@charset "UTF-8";:root, :host {
|
--md-sys-color-primary: #FF8014;
|
--md-sys-color-on-primary: #FFFFFF;
|
--md-sys-color-primary-container: #FFE4CC;
|
--md-sys-color-on-primary-container: #4A1E00;
|
--md-sys-color-secondary: #5C5C5C;
|
--md-sys-color-on-secondary: #FFFFFF;
|
--md-sys-color-secondary-container: #E0E0E0;
|
--md-sys-color-on-secondary-container: #1A1A1A;
|
--md-sys-color-tertiary: #757575;
|
--md-sys-color-on-tertiary: #FFFFFF;
|
--md-sys-color-tertiary-container: #E8E8E8;
|
--md-sys-color-on-tertiary-container: #1A1A1A;
|
--md-sys-color-surface: #FFFFFF;
|
--md-sys-color-surface-dim: #DCDCDC;
|
--md-sys-color-surface-bright: #FFFFFF;
|
--md-sys-color-on-surface: #1A1A1A;
|
--md-sys-color-on-surface-variant: #5C5C5C;
|
--md-sys-color-surface-container-lowest: #FFFFFF;
|
--md-sys-color-surface-container-low: #FAFAFA;
|
--md-sys-color-surface-container: #F5F5F5;
|
--md-sys-color-surface-container-high: #EEEEEE;
|
--md-sys-color-surface-container-highest: #E8E8E8;
|
--md-sys-color-surface-variant: #EEEEEE;
|
--md-sys-color-outline: #757575;
|
--md-sys-color-outline-variant: #E0E0E0;
|
--md-sys-color-error: #BA1A1A;
|
--md-sys-color-on-error: #FFFFFF;
|
--md-sys-color-error-container: #FFDAD6;
|
--md-sys-color-on-error-container: #410002;
|
--md-sys-color-success: #2E7D32;
|
--md-sys-color-on-success: #FFFFFF;
|
--md-sys-color-success-container: #C8E6C9;
|
--md-sys-color-on-success-container: #1B5E20;
|
--md-sys-color-inverse-surface: #1A1A1A;
|
--md-sys-color-inverse-on-surface: #FFFFFF;
|
--md-sys-color-inverse-primary: #FFB77C;
|
--md-sys-color-scrim: #000000;
|
--md-sys-color-shadow: #000000;
|
--md-sys-icon-filter-on-primary: brightness(0) invert(1);
|
--md-sys-color-primary-rgb: 255, 128, 20;
|
--md-sys-color-on-primary-rgb: 255, 255, 255;
|
--md-sys-color-on-surface-rgb: 26, 26, 26;
|
--md-sys-color-on-secondary-container-rgb: 26, 26, 26;
|
--md-sys-color-on-primary-container-rgb: 74, 30, 0;
|
--md-sys-color-success-rgb: 46, 125, 50;
|
--md-sys-color-on-success-container-rgb: 27, 94, 32;
|
--dh-error-color: var(--md-sys-color-error);
|
--md-comp-multiselect-selected: #5C5C5C;
|
--md-comp-multiselect-selected-rgb: 92, 92, 92;
|
--md-comp-checkbox-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpolyline points='3.5,9 7,12.5 14.5,5.5' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
--dh-scrollbar-width: 8px;
|
--dh-scrollbar-thumb: rgba(0, 0, 0, 0.2);
|
--dh-scrollbar-thumb-hover: rgba(0, 0, 0, 0.35);
|
--dh-scrollbar-track: transparent;
|
--dh-scrollbar-radius: 4px;
|
--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
|
--md-sys-motion-easing-standard-decel: cubic-bezier(0, 0, 0, 1);
|
--md-sys-motion-easing-standard-accel: cubic-bezier(0.3, 0, 1, 1);
|
--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
--md-sys-motion-easing-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
|
--md-sys-motion-easing-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
|
--md-sys-motion-easing-spring-fast: cubic-bezier(0.42, 1.67, 0.21, 0.9);
|
--md-sys-motion-easing-spring: cubic-bezier(0.5, 1.5, 0.4, 1);
|
--md-sys-motion-easing-spring-slow: cubic-bezier(0.5, 1.25, 0.4, 1);
|
--md-sys-motion-duration-short1: 50ms;
|
--md-sys-motion-duration-short2: 100ms;
|
--md-sys-motion-duration-short3: 150ms;
|
--md-sys-motion-duration-short4: 200ms;
|
--md-sys-motion-duration-medium1: 250ms;
|
--md-sys-motion-duration-medium2: 300ms;
|
--md-sys-motion-duration-medium3: 350ms;
|
--md-sys-motion-duration-medium4: 400ms;
|
--md-sys-motion-duration-long1: 450ms;
|
--md-sys-motion-duration-long2: 500ms;
|
--md-sys-shape-corner-none: 0px;
|
--md-sys-shape-corner-extra-small: 4px;
|
--md-sys-shape-corner-small: 8px;
|
--md-sys-shape-corner-medium: 12px;
|
--md-sys-shape-corner-large: 16px;
|
--md-sys-shape-corner-extra-large: 28px;
|
--md-sys-shape-corner-full: 9999px;
|
}
|
|
/*# sourceMappingURL=defines.orange-light.css.map */
|
[dh-button] {
|
display: inline-block;
|
height: auto;
|
width: auto;
|
vertical-align: middle;
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-button]::part(root),
|
[dh-infobox]::part(dh-button-root),
|
[dh-merge-dialog]::part(dh-button-root),
|
[dh-merge-dialog]::part(dh-button-nav-root),
|
[dh-table-old]::part(dh-button-root),
|
[dh-table]::part(dh-button-root),
|
[dh-window]::part(dh-button-root),
|
[dh-multi-selectbox]::part(dh-button-root),
|
[dh-multi-selectbox]::part(item-dh-button-root),
|
[dh-multi-selectbox-item]::part(dh-button-root) {
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
/* Buttons sind keine Textinhalte — Label-Text soll nicht markierbar sein. */
|
user-select: none;
|
-webkit-user-select: none;
|
gap: var(--dh-button-gap, 8px);
|
/* min-height statt height, damit der Button bei wrappendem Label hoeher werden kann */
|
min-height: var(--dh-button-height, 40px);
|
height: auto;
|
min-width: var(--dh-button-min-width, 64px);
|
padding-inline: var(--dh-button-padding-inline, 24px);
|
padding-block: 4px;
|
border: none;
|
border-radius: var(--dh-button-radius, 9999px);
|
cursor: pointer;
|
position: relative;
|
box-sizing: border-box;
|
text-align: center;
|
width: auto;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-button]::part(label),
|
[dh-infobox]::part(dh-button-label),
|
[dh-merge-dialog]::part(dh-button-label),
|
[dh-merge-dialog]::part(dh-button-nav-label),
|
[dh-table-old]::part(dh-button-label),
|
[dh-table]::part(dh-button-label),
|
[dh-window]::part(dh-button-label),
|
[dh-multi-selectbox]::part(dh-button-label),
|
[dh-multi-selectbox]::part(item-dh-button-label),
|
[dh-multi-selectbox-item]::part(dh-button-label) {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 0.875rem;
|
font-weight: 500;
|
line-height: 1.25rem;
|
letter-spacing: 0.00625rem;
|
/* Lange Button-Texte wrappen statt mit Ellipsis abschneiden.
|
* break-word bricht nur an Wort-Grenzen (kein "Sa ve" mitten im Wort). */
|
white-space: normal;
|
overflow-wrap: break-word;
|
}
|
|
[dh-button]::part(icon),
|
[dh-infobox]::part(dh-button-icon),
|
[dh-merge-dialog]::part(dh-button-icon),
|
[dh-merge-dialog]::part(dh-button-nav-icon),
|
[dh-table-old]::part(dh-button-icon),
|
[dh-table]::part(dh-button-icon),
|
[dh-window]::part(dh-button-icon),
|
[dh-multi-selectbox]::part(dh-button-icon),
|
[dh-multi-selectbox]::part(item-dh-button-icon),
|
[dh-multi-selectbox-item]::part(dh-button-icon) {
|
width: var(--dh-button-icon-size, 18px);
|
height: var(--dh-button-icon-size, 18px);
|
object-fit: contain;
|
flex-shrink: 0;
|
}
|
|
[dh-button][variant=filled]::part(root),
|
[dh-infobox]::part(dh-button-root),
|
[dh-merge-dialog]::part(dh-button-root),
|
[dh-merge-dialog]::part(dh-button-nav-root),
|
[dh-window]::part(dh-button-root),
|
[dh-multi-selectbox]::part(dh-button-root),
|
[dh-multi-selectbox]::part(item-dh-button-root),
|
[dh-multi-selectbox-item]::part(dh-button-root) {
|
background-color: var(--md-sys-color-primary);
|
color: var(--md-sys-color-on-primary);
|
box-shadow: none;
|
}
|
|
[dh-button][variant=filled]::part(label),
|
[dh-infobox]::part(dh-button-label),
|
[dh-merge-dialog]::part(dh-button-label),
|
[dh-merge-dialog]::part(dh-button-nav-label),
|
[dh-window]::part(dh-button-label),
|
[dh-multi-selectbox]::part(dh-button-label),
|
[dh-multi-selectbox]::part(item-dh-button-label),
|
[dh-multi-selectbox-item]::part(dh-button-label) {
|
color: var(--md-sys-color-on-primary);
|
}
|
|
[dh-button][variant=filled]:not([disabled]):hover::part(root),
|
[dh-infobox]::part(dh-button-root):hover,
|
[dh-merge-dialog]::part(dh-button-root):hover,
|
[dh-merge-dialog]::part(dh-button-nav-root):hover,
|
[dh-window]::part(dh-button-root):hover,
|
[dh-multi-selectbox]::part(dh-button-root):hover,
|
[dh-multi-selectbox]::part(item-dh-button-root):hover,
|
[dh-multi-selectbox-item]::part(dh-button-root):hover {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-primary-rgb), 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
|
}
|
|
[dh-button][variant=filled]:not([disabled]):focus-within::part(root),
|
[dh-infobox]::part(dh-button-root):focus-within,
|
[dh-merge-dialog]::part(dh-button-root):focus-within,
|
[dh-merge-dialog]::part(dh-button-nav-root):focus-within,
|
[dh-window]::part(dh-button-root):focus-within,
|
[dh-multi-selectbox]::part(dh-button-root):focus-within,
|
[dh-multi-selectbox]::part(item-dh-button-root):focus-within,
|
[dh-multi-selectbox-item]::part(dh-button-root):focus-within {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-primary-rgb), 0.12);
|
outline: 2px solid var(--md-sys-color-primary);
|
outline-offset: 2px;
|
}
|
|
[dh-button][variant=filled]:not([disabled]):active::part(root),
|
[dh-infobox]::part(dh-button-root):active,
|
[dh-merge-dialog]::part(dh-button-root):active,
|
[dh-merge-dialog]::part(dh-button-nav-root):active,
|
[dh-window]::part(dh-button-root):active,
|
[dh-multi-selectbox]::part(dh-button-root):active,
|
[dh-multi-selectbox]::part(item-dh-button-root):active,
|
[dh-multi-selectbox-item]::part(dh-button-root):active {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-primary-rgb), 0.12);
|
transform: scale(0.97);
|
}
|
|
[dh-button][variant=outlined]::part(root),
|
[dh-table-old]::part(dh-button-root),
|
[dh-table]::part(dh-button-root) {
|
background-color: transparent;
|
color: var(--md-sys-color-primary);
|
/* Modern: dezenter outline-variant als Default, outline auf Hover */
|
border: 1px solid var(--md-sys-color-outline-variant);
|
box-shadow: none;
|
}
|
|
[dh-button][variant=outlined]::part(label),
|
[dh-table-old]::part(dh-button-label),
|
[dh-table]::part(dh-button-label) {
|
color: var(--md-sys-color-primary);
|
}
|
|
[dh-button][variant=outlined]::part(icon),
|
[dh-table-old]::part(dh-button-icon),
|
[dh-table]::part(dh-button-icon) {
|
filter: none;
|
}
|
|
[dh-button][variant=outlined]:not([disabled]):hover::part(root),
|
[dh-table-old]::part(dh-button-root):hover,
|
[dh-table]::part(dh-button-root):hover {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.08);
|
border-color: var(--md-sys-color-outline);
|
}
|
|
[dh-button][variant=outlined]:not([disabled]):focus-within::part(root),
|
[dh-table-old]::part(dh-button-root):focus-within,
|
[dh-table]::part(dh-button-root):focus-within {
|
border-color: var(--md-sys-color-primary);
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
|
outline: 2px solid var(--md-sys-color-primary);
|
outline-offset: 2px;
|
}
|
|
[dh-button][variant=outlined]:not([disabled]):active::part(root),
|
[dh-table-old]::part(dh-button-root):active,
|
[dh-table]::part(dh-button-root):active {
|
border-color: var(--md-sys-color-outline);
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
|
transform: scale(0.97);
|
}
|
|
[dh-button][variant=standard]::part(root) {
|
background-color: transparent;
|
color: var(--md-sys-color-primary);
|
border: none;
|
box-shadow: none;
|
padding-inline: 12px;
|
min-width: auto;
|
}
|
|
[dh-button][variant=standard]::part(label) {
|
color: var(--md-sys-color-primary);
|
}
|
|
[dh-button][variant=standard]::part(icon) {
|
filter: none;
|
}
|
|
[dh-button][variant=standard]:not([disabled]):hover::part(root) {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.08);
|
}
|
|
[dh-button][variant=standard]:not([disabled]):focus-within::part(root) {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
|
outline: 2px solid var(--md-sys-color-primary);
|
outline-offset: 2px;
|
}
|
|
[dh-button][variant=standard]:not([disabled]):active::part(root) {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
|
transform: scale(0.97);
|
}
|
|
[dh-button][variant=elevated]::part(root) {
|
background-color: var(--md-sys-color-surface-container-low);
|
color: var(--md-sys-color-primary);
|
border: none;
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
|
}
|
|
[dh-button][variant=elevated]::part(label) {
|
color: var(--md-sys-color-primary);
|
}
|
|
[dh-button][variant=elevated]::part(icon) {
|
filter: none;
|
}
|
|
[dh-button][variant=elevated]:not([disabled]):hover::part(root) {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-primary-rgb), 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
|
}
|
|
[dh-button][variant=elevated]:not([disabled]):focus-within::part(root) {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-primary-rgb), 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
|
outline: 2px solid var(--md-sys-color-primary);
|
outline-offset: 2px;
|
}
|
|
[dh-button][variant=elevated]:not([disabled]):active::part(root) {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-primary-rgb), 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
|
transform: scale(0.97);
|
}
|
|
[dh-button][variant=tonal]::part(root) {
|
background-color: var(--md-sys-color-secondary-container);
|
color: var(--md-sys-color-on-secondary-container);
|
border: none;
|
box-shadow: none;
|
}
|
|
[dh-button][variant=tonal]::part(label) {
|
color: var(--md-sys-color-on-secondary-container);
|
}
|
|
[dh-button][variant=tonal]::part(icon) {
|
filter: none;
|
}
|
|
[dh-button][variant=tonal]:not([disabled]):hover::part(root) {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-secondary-container-rgb), 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
|
}
|
|
[dh-button][variant=tonal]:not([disabled]):focus-within::part(root) {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-secondary-container-rgb), 0.12);
|
outline: 2px solid var(--md-sys-color-primary);
|
outline-offset: 2px;
|
}
|
|
[dh-button][variant=tonal]:not([disabled]):active::part(root) {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-secondary-container-rgb), 0.12);
|
transform: scale(0.97);
|
}
|
|
[dh-button][variant=dashed]::part(root) {
|
background-color: transparent;
|
color: var(--md-sys-color-primary);
|
border: 1px dashed var(--md-sys-color-primary);
|
box-shadow: none;
|
}
|
|
[dh-button][variant=dashed]::part(label) {
|
color: var(--md-sys-color-primary);
|
}
|
|
[dh-button][variant=dashed]:not([disabled]):hover::part(root) {
|
background-color: var(--md-sys-color-primary-container);
|
border-style: solid;
|
}
|
|
[dh-button][variant=dashed]:not([disabled]):focus-within::part(root) {
|
background-color: var(--md-sys-color-primary-container);
|
outline: 2px solid var(--md-sys-color-primary);
|
outline-offset: 2px;
|
}
|
|
[dh-button][variant=dashed]:not([disabled]):active::part(root) {
|
background-color: var(--md-sys-color-primary-container);
|
transform: scale(0.97);
|
}
|
|
[dh-button][disabled]::part(root),
|
[dh-button][disabled][variant=filled]::part(root) {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
box-shadow: none;
|
cursor: not-allowed;
|
pointer-events: none;
|
}
|
|
[dh-button][disabled]::part(label),
|
[dh-button][disabled][variant=filled]::part(label) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-button][disabled]::part(icon),
|
[dh-button][disabled][variant=filled]::part(icon) {
|
opacity: 0.38;
|
filter: none;
|
}
|
|
[dh-button][disabled][variant=outlined]::part(root) {
|
background-color: transparent;
|
border-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
box-shadow: none;
|
cursor: not-allowed;
|
pointer-events: none;
|
}
|
|
[dh-button][disabled][variant=outlined]::part(label) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-button][disabled][variant=outlined]::part(icon) {
|
opacity: 0.38;
|
}
|
|
[dh-button][disabled][variant=standard]::part(root) {
|
background-color: transparent;
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
box-shadow: none;
|
cursor: not-allowed;
|
pointer-events: none;
|
}
|
|
[dh-button][disabled][variant=standard]::part(label) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-button][disabled][variant=standard]::part(icon) {
|
opacity: 0.38;
|
}
|
|
[dh-button][disabled][variant=elevated]::part(root) {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
box-shadow: none;
|
cursor: not-allowed;
|
pointer-events: none;
|
}
|
|
[dh-button][disabled][variant=elevated]::part(label) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-button][disabled][variant=elevated]::part(icon) {
|
opacity: 0.38;
|
}
|
|
[dh-button][disabled][variant=tonal]::part(root) {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
box-shadow: none;
|
cursor: not-allowed;
|
pointer-events: none;
|
}
|
|
[dh-button][disabled][variant=tonal]::part(label) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-button][disabled][variant=tonal]::part(icon) {
|
opacity: 0.38;
|
}
|
|
[dh-button][img]:not([img=""])::part(root),
|
[dh-button][variant=filled][img]:not([img=""])::part(root),
|
[dh-button][variant=outlined][img]:not([img=""])::part(root),
|
[dh-button][variant=elevated][img]:not([img=""])::part(root),
|
[dh-button][variant=tonal][img]:not([img=""])::part(root) {
|
padding-inline-start: 16px;
|
padding-inline-end: 24px;
|
}
|
|
[dh-button][variant=standard][img]:not([img=""])::part(root) {
|
padding-inline-start: 12px;
|
padding-inline-end: 16px;
|
}
|
|
[dh-button][icon-button]::part(root),
|
[dh-table-old]::part(dh-icon-button-root),
|
[dh-table]::part(dh-icon-button-root),
|
[dh-merge-dialog]::part(dh-icon-button-nav-root) {
|
width: 40px;
|
max-width: 100%;
|
min-width: 0;
|
height: 40px;
|
max-height: 100%;
|
min-height: 0;
|
aspect-ratio: 1/1;
|
padding: 0;
|
gap: 0;
|
border: none;
|
border-radius: 9999px;
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
box-sizing: border-box;
|
}
|
|
[dh-button][icon-button][variant=standard]::part(root) {
|
background-color: transparent;
|
color: var(--md-sys-color-on-surface-variant);
|
box-shadow: none;
|
}
|
|
[dh-button][icon-button][variant=filled]::part(root),
|
[dh-merge-dialog]::part(dh-icon-button-nav-root) {
|
background-color: var(--md-sys-color-primary);
|
color: var(--md-sys-color-on-primary);
|
box-shadow: none;
|
}
|
|
[dh-button][icon-button][variant=tonal]::part(root) {
|
background-color: var(--md-sys-color-secondary-container);
|
color: var(--md-sys-color-on-secondary-container);
|
box-shadow: none;
|
}
|
|
[dh-button][icon-button][variant=outlined]::part(root) {
|
background-color: transparent;
|
color: var(--md-sys-color-on-surface-variant);
|
box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
|
}
|
|
[dh-table-old]::part(dh-icon-button-root),
|
[dh-table]::part(dh-icon-button-root) {
|
background-color: transparent;
|
color: var(--md-sys-color-primary);
|
box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
|
}
|
|
[dh-button][icon-button][variant=elevated]::part(root) {
|
background-color: var(--md-sys-color-surface-container-low);
|
color: var(--md-sys-color-primary);
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
|
}
|
|
[dh-button][icon-button][variant=standard]:not([disabled]):hover::part(root) {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
|
}
|
|
[dh-button][icon-button][variant=filled]:not([disabled]):hover::part(root),
|
[dh-merge-dialog]::part(dh-icon-button-nav-root):hover {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-primary-rgb), 0.08);
|
}
|
|
[dh-button][icon-button][variant=tonal]:not([disabled]):hover::part(root) {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-secondary-container-rgb), 0.08);
|
}
|
|
[dh-button][icon-button][variant=outlined]:not([disabled]):hover::part(root) {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
|
box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
|
}
|
|
[dh-table-old]::part(dh-icon-button-root):hover,
|
[dh-table]::part(dh-icon-button-root):hover {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.08);
|
box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
|
}
|
|
[dh-button][icon-button][variant=elevated]:not([disabled]):hover::part(root) {
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15), inset 0 0 0 100vmax rgba(var(--md-sys-color-primary-rgb), 0.08);
|
}
|
|
[dh-button][icon-button]:not([disabled]):focus-within::part(root),
|
[dh-table-old]::part(dh-icon-button-root):focus-within,
|
[dh-table]::part(dh-icon-button-root):focus-within,
|
[dh-merge-dialog]::part(dh-icon-button-nav-root):focus-within {
|
outline: 2px solid var(--md-sys-color-primary);
|
outline-offset: 2px;
|
}
|
|
[dh-button][icon-button]:not([disabled]):active::part(root),
|
[dh-table-old]::part(dh-icon-button-root):active,
|
[dh-table]::part(dh-icon-button-root):active,
|
[dh-merge-dialog]::part(dh-icon-button-nav-root):active {
|
transform: scale(0.92);
|
}
|
|
[dh-button][icon-button][disabled][variant=filled]::part(root),
|
[dh-button][icon-button][disabled][variant=tonal]::part(root),
|
[dh-button][icon-button][disabled][variant=elevated]::part(root) {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
box-shadow: none;
|
cursor: not-allowed;
|
pointer-events: none;
|
}
|
|
[dh-button][icon-button][disabled][variant=standard]::part(root) {
|
background-color: transparent;
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
cursor: not-allowed;
|
pointer-events: none;
|
}
|
|
[dh-button][icon-button][disabled][variant=outlined]::part(root),
|
[dh-table-old]::part(dh-icon-button-root)[disabled],
|
[dh-table]::part(dh-icon-button-root)[disabled] {
|
background-color: transparent;
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
box-shadow: inset 0 0 0 1px rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
cursor: not-allowed;
|
pointer-events: none;
|
}
|
|
[dh-checkbox] {
|
display: inline-flex;
|
vertical-align: middle;
|
}
|
|
[dh-checkbox]::part(root),
|
[dh-settings-grid]::part(dh-checkbox-root),
|
[dh-setting-item]::part(dh-checkbox-root),
|
[dh-table-old]::part(dh-checkbox-root),
|
[dh-table]::part(dh-checkbox-root) {
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
}
|
|
[dh-checkbox]::part(input),
|
[dh-settings-grid]::part(dh-checkbox-input),
|
[dh-setting-item]::part(dh-checkbox-input),
|
[dh-table-old]::part(dh-checkbox-input),
|
[dh-table]::part(dh-checkbox-input) {
|
appearance: none;
|
-webkit-appearance: none;
|
width: 20px;
|
height: 20px;
|
border: 2px solid var(--md-sys-color-on-surface-variant);
|
border-radius: 4px;
|
background-color: transparent;
|
background-size: contain;
|
background-position: center;
|
background-repeat: no-repeat;
|
cursor: pointer;
|
margin: 0;
|
padding: 0;
|
outline: none;
|
box-sizing: border-box;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-checkbox]:not([disabled]):not([checked]):hover::part(input),
|
[dh-settings-grid]::part(dh-checkbox-input):not(:checked):not(:disabled):hover,
|
[dh-setting-item]::part(dh-checkbox-input):not(:checked):not(:disabled):hover,
|
[dh-table-old]::part(dh-checkbox-input):not(:checked):not(:disabled):hover,
|
[dh-table]::part(dh-checkbox-input):not(:checked):not(:disabled):hover {
|
border-color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-checkbox]:not([disabled]):not([checked]):focus-within::part(input),
|
[dh-settings-grid]::part(dh-checkbox-input):not(:checked):not(:disabled):focus-visible,
|
[dh-setting-item]::part(dh-checkbox-input):not(:checked):not(:disabled):focus-visible,
|
[dh-table-old]::part(dh-checkbox-input):not(:checked):not(:disabled):focus-visible,
|
[dh-table]::part(dh-checkbox-input):not(:checked):not(:disabled):focus-visible {
|
border-color: var(--md-sys-color-on-surface);
|
box-shadow: 0 0 0 2px rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
}
|
|
[dh-checkbox][checked]::part(input),
|
[dh-settings-grid]::part(dh-checkbox-input):checked,
|
[dh-setting-item]::part(dh-checkbox-input):checked,
|
[dh-table-old]::part(dh-checkbox-input):checked,
|
[dh-table]::part(dh-checkbox-input):checked {
|
background-color: var(--md-sys-color-primary);
|
border-color: var(--md-sys-color-primary);
|
background-image: var(--md-comp-checkbox-mark);
|
}
|
|
[dh-checkbox][checked]:not([disabled]):hover::part(input),
|
[dh-settings-grid]::part(dh-checkbox-input):checked:not(:disabled):hover,
|
[dh-setting-item]::part(dh-checkbox-input):checked:not(:disabled):hover,
|
[dh-table-old]::part(dh-checkbox-input):checked:not(:disabled):hover,
|
[dh-table]::part(dh-checkbox-input):checked:not(:disabled):hover {
|
box-shadow: 0 0 0 2px rgba(var(--md-sys-color-primary-rgb), 0.12);
|
}
|
|
[dh-checkbox][checked]:not([disabled]):focus-within::part(input),
|
[dh-settings-grid]::part(dh-checkbox-input):checked:not(:disabled):focus-visible,
|
[dh-setting-item]::part(dh-checkbox-input):checked:not(:disabled):focus-visible,
|
[dh-table-old]::part(dh-checkbox-input):checked:not(:disabled):focus-visible,
|
[dh-table]::part(dh-checkbox-input):checked:not(:disabled):focus-visible {
|
box-shadow: 0 0 0 2px rgba(var(--md-sys-color-primary-rgb), 0.2);
|
}
|
|
[dh-checkbox][indeterminate]::part(input),
|
[dh-settings-grid]::part(dh-checkbox-input):indeterminate,
|
[dh-setting-item]::part(dh-checkbox-input):indeterminate,
|
[dh-table-old]::part(dh-checkbox-input):indeterminate,
|
[dh-table]::part(dh-checkbox-input):indeterminate {
|
background-color: var(--md-sys-color-primary);
|
border-color: var(--md-sys-color-primary);
|
background-image: linear-gradient(var(--md-sys-color-on-primary), var(--md-sys-color-on-primary));
|
background-size: 10px 2px;
|
background-position: center;
|
background-repeat: no-repeat;
|
}
|
|
[dh-checkbox][indeterminate]:not([disabled]):hover::part(input),
|
[dh-settings-grid]::part(dh-checkbox-input):indeterminate:not(:disabled):hover,
|
[dh-setting-item]::part(dh-checkbox-input):indeterminate:not(:disabled):hover,
|
[dh-table-old]::part(dh-checkbox-input):indeterminate:not(:disabled):hover,
|
[dh-table]::part(dh-checkbox-input):indeterminate:not(:disabled):hover {
|
box-shadow: 0 0 0 2px rgba(var(--md-sys-color-primary-rgb), 0.12);
|
}
|
|
[dh-checkbox][disabled]:not([checked])::part(root) {
|
cursor: not-allowed;
|
pointer-events: none;
|
}
|
|
[dh-checkbox][disabled]:not([checked])::part(input),
|
[dh-settings-grid]::part(dh-checkbox-input):disabled:not(:checked),
|
[dh-setting-item]::part(dh-checkbox-input):disabled:not(:checked),
|
[dh-table-old]::part(dh-checkbox-input):disabled:not(:checked),
|
[dh-table]::part(dh-checkbox-input):disabled:not(:checked) {
|
border-color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
cursor: not-allowed;
|
}
|
|
[dh-checkbox][disabled][checked]::part(root) {
|
cursor: not-allowed;
|
pointer-events: none;
|
}
|
|
[dh-checkbox][disabled][checked]::part(input),
|
[dh-settings-grid]::part(dh-checkbox-input):disabled:checked,
|
[dh-setting-item]::part(dh-checkbox-input):disabled:checked,
|
[dh-table-old]::part(dh-checkbox-input):disabled:checked,
|
[dh-table]::part(dh-checkbox-input):disabled:checked {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
border-color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
cursor: not-allowed;
|
}
|
|
[dh-settings-grid]::part(dh-checkbox-root),
|
[dh-setting-item]::part(dh-checkbox-root) {
|
margin-left: 16px;
|
}
|
|
[dh-checkbox][variant=switch]::part(root),
|
[dh-table]::part(dh-switch-root) {
|
position: relative;
|
display: inline-flex;
|
align-items: center;
|
width: 48px;
|
height: 28px;
|
}
|
|
[dh-checkbox][variant=switch]::part(input),
|
[dh-table]::part(dh-switch-track) {
|
appearance: none;
|
-webkit-appearance: none;
|
width: 48px;
|
height: 28px;
|
border: 2px solid var(--md-sys-color-outline-variant);
|
border-radius: 14px;
|
background-color: var(--md-sys-color-surface-container-highest);
|
background-image: none;
|
cursor: pointer;
|
margin: 0;
|
padding: 0;
|
outline: none;
|
box-sizing: border-box;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-checkbox][variant=switch]::part(handle),
|
[dh-table]::part(dh-switch-handle) {
|
position: absolute;
|
top: 50%;
|
left: 5px;
|
width: 14px;
|
height: 14px;
|
border-radius: 50%;
|
background-color: var(--md-sys-color-outline);
|
transform: translate(0, -50%);
|
pointer-events: none;
|
transition: left 200ms cubic-bezier(0.2, 0, 0, 1), width 200ms cubic-bezier(0.2, 0, 0, 1), height 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-checkbox][variant=switch]:not([disabled]):not([checked]):hover::part(input),
|
[dh-table]::part(dh-switch-track):not(:checked):not(:disabled):hover {
|
border-color: var(--md-sys-color-on-surface-variant);
|
}
|
|
[dh-checkbox][variant=switch]:not([disabled]):not([checked]):hover::part(handle) {
|
background-color: var(--md-sys-color-on-surface-variant);
|
}
|
|
[dh-checkbox][variant=switch][checked]::part(input),
|
[dh-table]::part(dh-switch-track):checked {
|
background-color: var(--md-sys-color-primary);
|
border-color: var(--md-sys-color-primary);
|
background-image: none;
|
}
|
|
[dh-checkbox][variant=switch][checked]:not([disabled]):hover::part(handle) {
|
background-color: var(--md-sys-color-primary-container);
|
}
|
|
[dh-checkbox][variant=switch][disabled]:not([checked])::part(input),
|
[dh-table]::part(dh-switch-track):disabled:not(:checked) {
|
border-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.06);
|
}
|
|
[dh-checkbox][variant=switch][disabled]:not([checked])::part(handle) {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-checkbox][variant=switch][disabled][checked]::part(input),
|
[dh-table]::part(dh-switch-track):disabled:checked {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
border-color: transparent;
|
}
|
|
[dh-checkbox][variant=switch][disabled][checked]::part(handle) {
|
background-color: var(--md-sys-color-surface);
|
}
|
|
[dh-radio]::part(control) {
|
width: var(--dh-radio-control-size, 32px);
|
height: var(--dh-radio-control-size, 32px);
|
border-radius: 50%;
|
position: relative;
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
flex-shrink: 0;
|
cursor: pointer;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-radio][disabled]::part(control) {
|
cursor: not-allowed;
|
}
|
|
[dh-radio]:not([disabled])::part(control):hover {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
|
}
|
|
[dh-radio]:not([disabled])[checked]::part(control):hover {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.08);
|
}
|
|
[dh-radio]:not([disabled])::part(control):active {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
}
|
|
[dh-radio]:not([disabled])[checked]::part(control):active {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
|
}
|
|
[dh-radio]::part(input) {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
border: 2px solid var(--md-sys-color-on-surface);
|
background-color: transparent;
|
cursor: pointer;
|
transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-radio][disabled]::part(input) {
|
border-color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
cursor: not-allowed;
|
}
|
|
[dh-radio][checked]::part(input) {
|
border-color: var(--md-sys-color-primary);
|
background: radial-gradient(circle, var(--md-sys-color-primary) 0 5px, transparent 5px 100%);
|
}
|
|
[dh-radio][checked][disabled]::part(input) {
|
border-color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
background: radial-gradient(circle, rgba(var(--md-sys-color-on-surface-rgb), 0.38) 0 5px, transparent 5px 100%);
|
}
|
|
[dh-radio]:not([disabled])::part(input):focus-visible {
|
outline: none;
|
}
|
|
[dh-radio]:not([disabled]):has(:focus-visible)::part(control) {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
}
|
|
[dh-radio]:not([disabled])[checked]:has(:focus-visible)::part(control) {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
|
}
|
|
[dh-radio]::part(label) {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 0.875rem;
|
line-height: 1.25rem;
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-radio][disabled]::part(label) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-infobox] {
|
display: block;
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-infobox]::part(root) {
|
background-color: var(--md-sys-color-surface-container-low);
|
/* Subtle Outline + dezenter Shadow — wie dh-window. */
|
border: 1px solid var(--md-sys-color-outline-variant);
|
border-radius: 28px;
|
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12), 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
|
padding: 24px;
|
min-width: 280px;
|
max-width: 560px;
|
}
|
|
[dh-infobox]::part(header) {
|
padding: 0 0 16px 0;
|
justify-content: flex-start;
|
font-size: 1.5rem;
|
font-weight: 400;
|
}
|
|
[dh-infobox]::part(label) {
|
font-size: 1.5rem;
|
font-weight: 400;
|
line-height: 2rem;
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-infobox]::part(content) {
|
padding: 0 0 24px 0;
|
justify-content: flex-start;
|
align-items: flex-start;
|
font-size: 0.875rem;
|
font-weight: 400;
|
line-height: 1.25rem;
|
color: var(--md-sys-color-on-surface-variant);
|
}
|
|
[dh-infobox]::part(footer) {
|
padding: 0;
|
justify-content: flex-end;
|
gap: 8px;
|
}
|
|
[dh-input]::part(trailing-icon) {
|
width: 40px;
|
height: 40px;
|
margin-right: 4px;
|
border-radius: 50%;
|
color: var(--md-sys-color-on-surface-variant);
|
font-size: 1.125rem;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-input]:not([disabled])::part(trailing-icon):hover {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-input]:not([disabled])::part(trailing-icon):focus-visible {
|
outline: none;
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-input][disabled]::part(trailing-icon) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-input][toggle-password][type=password]::part(input) {
|
padding-right: 48px;
|
}
|
|
[dh-input][type=checkbox] {
|
display: inline-flex;
|
width: auto;
|
height: auto;
|
}
|
|
[dh-input]:not([type=checkbox]):not([type=range])::part(root),
|
[dh-settings-grid]::part(dh-input-root),
|
[dh-setting-item]::part(dh-input-root),
|
[dh-table-old]::part(dh-filter-root),
|
[dh-table]::part(dh-filter-root),
|
[dh-table-old]::part(dh-input-root),
|
[dh-table]::part(dh-input-root),
|
[dh-multi-selectbox]::part(dh-input-root),
|
[dh-color-picker]::part(dh-input-root) {
|
display: flex;
|
align-items: center;
|
width: 100%;
|
/* Compact (40px) statt MD3 Standard (56px) — passt zur dh-button-Hoehe und macht Admin-Forms uebersichtlicher */
|
min-height: 40px;
|
box-sizing: border-box;
|
transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-input]:not([type=checkbox]):not([type=range])::part(input),
|
[dh-settings-grid]::part(dh-input-input),
|
[dh-setting-item]::part(dh-input-input),
|
[dh-table-old]::part(dh-filter-input),
|
[dh-table]::part(dh-filter-input),
|
[dh-table-old]::part(dh-input-input),
|
[dh-table]::part(dh-input-input),
|
[dh-multi-selectbox]::part(dh-input-input),
|
[dh-color-picker]::part(dh-input-input) {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: var(--dh-input-input-size, 0.875rem);
|
font-weight: 400;
|
line-height: var(--dh-input-input-line-height, 1.25rem);
|
letter-spacing: 0.015625rem;
|
color: var(--md-sys-color-on-surface);
|
caret-color: var(--md-sys-color-primary);
|
padding: var(--dh-input-input-padding, 0 12px);
|
border: none;
|
outline: none;
|
background: transparent;
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
margin: 0;
|
}
|
|
[dh-input][type=checkbox]::part(root) {
|
width: auto;
|
height: auto;
|
border: none;
|
}
|
|
[dh-input][type=checkbox]::part(input) {
|
padding: 0;
|
width: auto;
|
height: auto;
|
}
|
|
[dh-input][type=range] {
|
--dh-input-range-thumb-color: var(--md-sys-color-primary);
|
--dh-input-range-disabled-color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
--dh-input-range-track-color: var(--md-sys-color-surface-container-highest);
|
--dh-input-range-track-fill-color: var(--md-sys-color-primary);
|
--dh-input-range-thumb-hover-box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-rgb), 0.08);
|
--dh-input-range-thumb-focus-box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-rgb), 0.10);
|
--dh-input-range-thumb-active-box-shadow: 0 0 0 12px rgba(var(--md-sys-color-primary-rgb), 0.12);
|
--dh-input-range-thumb-disabled-background: linear-gradient(var(--dh-input-range-disabled-color), var(--dh-input-range-disabled-color)), var(--md-sys-color-surface);
|
}
|
|
[dh-input]:not([type=range])::part(root),
|
[dh-input][variant=outlined]:not([type=range])::part(root),
|
[dh-table-old]::part(dh-filter-root),
|
[dh-table]::part(dh-filter-root),
|
[dh-color-picker]::part(dh-input-root) {
|
/* Modern: neutrale outline-variant als Default, nicht primary, nicht hartes Schwarz */
|
border: var(--dh-input-root-border, 1px solid var(--md-sys-color-outline-variant));
|
border-radius: var(--dh-input-root-radius, 4px);
|
background-color: var(--dh-input-root-bg, transparent);
|
}
|
|
[dh-input]:not([variant]):not([disabled]):hover::part(root),
|
[dh-input][variant=outlined]:not([disabled]):hover::part(root),
|
[dh-table-old]::part(dh-filter-root):hover,
|
[dh-table]::part(dh-filter-root):hover,
|
[dh-color-picker]::part(dh-input-root):hover {
|
/* Hover: outline (mittelgrau) — sichtbarer als Default, aber neutral */
|
border-color: var(--md-sys-color-outline);
|
}
|
|
[dh-input]:not([variant]):not([disabled]):focus-within::part(root),
|
[dh-input][variant=outlined]:not([disabled]):focus-within::part(root),
|
[dh-table-old]::part(dh-filter-root):focus-within,
|
[dh-table]::part(dh-filter-root):focus-within,
|
[dh-color-picker]::part(dh-input-root):focus-within {
|
border-color: var(--md-sys-color-primary);
|
}
|
|
[dh-input][invalid]::part(root) {
|
border-color: var(--md-sys-color-error);
|
}
|
|
[dh-input][invalid]:focus-within::part(root) {
|
border-color: var(--md-sys-color-error);
|
}
|
|
[dh-input][invalid]::part(label) {
|
color: var(--md-sys-color-error);
|
}
|
|
[dh-input][invalid]::part(supporting-text) {
|
color: var(--md-sys-color-error);
|
}
|
|
[dh-input][variant=filled]::part(root) {
|
border: var(--dh-input-root-border, none);
|
border-bottom: var(--dh-input-root-border-bottom, 1px solid var(--md-sys-color-on-surface-variant));
|
border-radius: var(--dh-input-root-radius, 4px 4px 0 0);
|
background-color: var(--dh-input-root-bg, var(--md-sys-color-surface-container-highest));
|
}
|
|
[dh-input][variant=filled]::part(input) {
|
padding: 20px 16px 8px 16px;
|
}
|
|
[dh-input][variant=filled]:not([disabled]):hover::part(root) {
|
border-bottom-color: var(--md-sys-color-on-surface);
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-surface-rgb), 0.08);
|
}
|
|
[dh-input][variant=filled]:not([disabled]):focus-within::part(root) {
|
border-bottom-color: var(--md-sys-color-primary);
|
box-shadow: var(--dh-input-root-focus-shadow, inset 0 -1px 0 0 var(--md-sys-color-primary));
|
}
|
|
[dh-input] {
|
--dh-input-label-top: 50%;
|
--dh-input-label-transform: translateY(-50%);
|
/* Compact: Resting-Label etwas kleiner (passt zu 40px Hoehe) */
|
--dh-input-label-font-size: 0.875rem;
|
--dh-input-label-line-height: 1.25rem;
|
/* Resting-Background transparent — der Floating-Background (outlined: surface
|
* * fuer den Notched-Outline-Look, filled: transparent) wird variant-spezifisch
|
* * ueber --dh-input-label-floating-bg ueberschrieben. NICHT direkt auf
|
* * ::part(label) setzen — Outer-::part schlaegt sonst den Inner-Floating-Style
|
* * und der Notched-Outline-Hintergrund waere weg. */
|
--dh-input-label-bg: transparent;
|
}
|
|
[dh-input]::part(label),
|
[dh-color-picker]::part(dh-input-label) {
|
position: absolute;
|
left: 12px;
|
font-family: Roboto, system-ui, sans-serif;
|
letter-spacing: 0.015625rem;
|
color: var(--md-sys-color-on-surface-variant);
|
pointer-events: none;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
max-width: calc(100% - 24px);
|
transition: top 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1), font-size 200ms cubic-bezier(0.2, 0, 0, 1), line-height 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-input]:not([variant])::part(label),
|
[dh-input][variant=outlined]::part(label),
|
[dh-color-picker]::part(dh-input-label) {
|
left: 12px;
|
/* 4px Padding je Seite gibt der Notch etwas Luft, damit die orange
|
* Border-Linie nicht direkt am ersten/letzten Buchstaben klebt. */
|
padding: 0 4px;
|
}
|
|
[dh-input]:not([variant]),
|
[dh-input][variant=outlined],
|
[dh-color-picker] {
|
--dh-input-label-floating-bg: var(--md-sys-color-surface);
|
}
|
|
[dh-input][variant=filled] {
|
--dh-input-label-floating-top: 6px;
|
--dh-input-label-floating-transform: translateY(0);
|
--dh-input-label-floating-bg: transparent;
|
}
|
|
[dh-input]:focus-within::part(label) {
|
color: var(--md-sys-color-primary);
|
}
|
|
[dh-input]::part(supporting-text),
|
[dh-settings-grid]::part(dh-input-supporting-text),
|
[dh-setting-item]::part(dh-input-supporting-text),
|
[dh-table-old]::part(dh-input-supporting-text),
|
[dh-table]::part(dh-input-supporting-text),
|
[dh-table-old]::part(dh-filter-supporting-text),
|
[dh-table]::part(dh-filter-supporting-text),
|
[dh-multi-selectbox]::part(dh-input-supporting-text) {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 0.75rem;
|
font-weight: 400;
|
line-height: 1rem;
|
letter-spacing: 0.025rem;
|
color: var(--md-sys-color-on-surface-variant);
|
padding: 4px 16px 0;
|
}
|
|
[dh-input][disabled]::part(root),
|
[dh-input][disabled][variant=outlined]::part(root) {
|
border-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
box-shadow: none;
|
}
|
|
[dh-input][disabled]::part(input),
|
[dh-input][disabled][variant=outlined]::part(input) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-color-picker][disabled]::part(dh-input-root) {
|
border-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
box-shadow: none;
|
}
|
|
[dh-color-picker][disabled]::part(dh-input-input) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-input][disabled][variant=filled]::part(root) {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.04);
|
border-bottom-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
box-shadow: none;
|
}
|
|
[dh-input][disabled][variant=filled]::part(input) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-input][disabled]::part(label) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-input][disabled]::part(supporting-text) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-input][readonly]:not([disabled])::part(root),
|
[dh-input][readonly]:not([disabled])[variant=outlined]::part(root) {
|
border-color: var(--md-sys-color-outline-variant);
|
}
|
|
[dh-input][readonly]:not([disabled])[variant=filled]::part(root) {
|
border-bottom-color: var(--md-sys-color-outline-variant);
|
}
|
|
[dh-input][readonly]:not([disabled])::part(input) {
|
color: var(--md-sys-color-on-surface-variant);
|
cursor: default;
|
}
|
|
[dh-input][variant=classic],
|
[dh-settings-grid],
|
[dh-setting-item],
|
[dh-table] {
|
--dh-input-placeholder-color: var(--md-sys-color-on-surface-variant);
|
--dh-input-placeholder-opacity: 1;
|
}
|
|
[dh-input][variant=classic]::part(root),
|
[dh-settings-grid]::part(dh-input-root),
|
[dh-setting-item]::part(dh-input-root) {
|
border: var(--dh-input-root-border, 1px solid var(--md-sys-color-outline-variant));
|
border-radius: var(--dh-input-root-radius, 4px);
|
background-color: var(--dh-input-root-bg, transparent);
|
}
|
|
[dh-input][variant=classic]:not([disabled]):hover::part(root),
|
[dh-settings-grid]::part(dh-input-root):hover,
|
[dh-setting-item]::part(dh-input-root):hover {
|
border-color: var(--md-sys-color-outline);
|
}
|
|
[dh-input][variant=classic]:not([disabled]):focus-within::part(root),
|
[dh-settings-grid]::part(dh-input-root):focus-within,
|
[dh-setting-item]::part(dh-input-root):focus-within {
|
border-color: var(--md-sys-color-primary);
|
}
|
|
[dh-input][disabled][variant=classic]::part(root) {
|
border-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
box-shadow: none;
|
}
|
|
[dh-input][disabled][variant=classic]::part(input) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-input][disabled][variant=classic] {
|
--dh-input-placeholder-color: var(--md-sys-color-on-surface);
|
--dh-input-placeholder-opacity: 0.38;
|
}
|
|
[dh-input][readonly]:not([disabled])[variant=classic]::part(root) {
|
border-color: var(--md-sys-color-outline-variant);
|
}
|
|
[dh-input][readonly]:not([disabled])[variant=classic]::part(input) {
|
color: var(--md-sys-color-on-surface-variant);
|
cursor: default;
|
}
|
|
[dh-settings-grid]::part(dh-input-root),
|
[dh-setting-item]::part(dh-input-root) {
|
border: var(--dh-input-root-border, 1px solid var(--md-sys-color-outline-variant));
|
border-radius: var(--dh-input-root-radius, 4px);
|
background-color: var(--dh-input-root-bg, var(--md-sys-color-surface));
|
}
|
|
[dh-settings-grid]::part(dh-input-root):hover,
|
[dh-setting-item]::part(dh-input-root):hover {
|
border-color: var(--md-sys-color-outline);
|
}
|
|
[dh-settings-grid]::part(dh-input-root):focus-within,
|
[dh-setting-item]::part(dh-input-root):focus-within {
|
border-color: var(--md-sys-color-primary);
|
}
|
|
[dh-select]::part(dh-input-root) {
|
border: none;
|
border-radius: 0;
|
background-color: transparent;
|
}
|
|
[dh-select]::part(dh-input-root):hover {
|
border: none;
|
box-shadow: none;
|
}
|
|
[dh-select]::part(dh-input-root):focus-within {
|
border: none;
|
box-shadow: none;
|
}
|
|
[dh-input][type=file]::part(root) {
|
border: none;
|
box-shadow: none;
|
background: transparent;
|
height: auto;
|
}
|
|
[dh-input][type=file]::part(file-button) {
|
height: var(--dh-button-height, 40px);
|
padding-inline: var(--dh-button-padding-inline, 24px);
|
border-radius: var(--dh-button-radius, 20px);
|
border: 1px solid var(--md-sys-color-outline);
|
background: transparent;
|
color: var(--md-sys-color-primary);
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
|
font-weight: var(--md-sys-typescale-label-large-weight, 500);
|
letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.00625rem);
|
cursor: pointer;
|
transition: background 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-input][type=file]:not([disabled])::part(file-button):hover {
|
background: rgba(var(--md-sys-color-primary-rgb), 0.08);
|
}
|
|
[dh-input][type=file]:not([disabled])::part(file-button):focus-visible {
|
outline: none;
|
background: rgba(var(--md-sys-color-primary-rgb), 0.12);
|
}
|
|
[dh-input][type=file][disabled]::part(file-button) {
|
border-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-input][type=file]::part(file-name) {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 0.875rem;
|
font-weight: 400;
|
line-height: 1.25rem;
|
letter-spacing: 0.015625rem;
|
color: var(--md-sys-color-on-surface-variant);
|
}
|
|
[dh-table-old]::part(dh-input-root),
|
[dh-table]::part(dh-input-root) {
|
height: 100%;
|
min-height: 0;
|
border: none;
|
border-radius: 0;
|
background-color: transparent;
|
}
|
|
[dh-table-old]::part(dh-input-input),
|
[dh-table]::part(dh-input-input) {
|
padding: 0;
|
font-size: 0.875rem;
|
line-height: 1.25rem;
|
}
|
|
[dh-table-old]::part(dh-input-root):hover,
|
[dh-table]::part(dh-input-root):hover {
|
border: none;
|
box-shadow: none;
|
}
|
|
[dh-table-old]::part(dh-input-root):focus-within,
|
[dh-table]::part(dh-input-root):focus-within {
|
border: none;
|
box-shadow: none;
|
}
|
|
[dh-list-item] {
|
display: block;
|
font-family: Roboto, system-ui, sans-serif;
|
--dh-list-item-title-color: var(--md-sys-color-on-surface);
|
--dh-list-item-meta-color: var(--md-sys-color-on-surface-variant);
|
--dh-list-item-status-color: var(--md-sys-color-primary);
|
}
|
|
[dh-list-item]::part(root) {
|
border: 1px solid var(--md-sys-color-outline-variant);
|
border-radius: 0.5rem;
|
overflow: visible;
|
background-color: var(--md-sys-color-surface);
|
transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-list-item]:hover::part(root) {
|
border-color: var(--md-sys-color-outline);
|
}
|
|
[dh-list-item][expanded]::part(root) {
|
border-color: var(--md-sys-color-primary);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
}
|
|
[dh-list-item]::part(row) {
|
padding: 0.75rem 1rem;
|
border-radius: 0.5rem;
|
}
|
|
[dh-list-item][expanded]::part(row) {
|
background-color: var(--md-sys-color-primary-container);
|
border-bottom-left-radius: 0;
|
border-bottom-right-radius: 0;
|
}
|
|
[dh-list-item]::part(expanded) {
|
border-top: 1px solid var(--md-sys-color-outline-variant);
|
padding: 1rem;
|
background-color: var(--md-sys-color-surface);
|
border-bottom-left-radius: 0.5rem;
|
border-bottom-right-radius: 0.5rem;
|
}
|
|
[dh-form-grid] {
|
display: block;
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-form-field] {
|
--dh-form-field-label-color: var(--md-sys-color-on-surface-variant);
|
}
|
|
[dh-section] {
|
display: block;
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-section]::part(header) {
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
}
|
|
[dh-section]::part(title) {
|
font-size: 1rem;
|
font-weight: 600;
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-section]::part(badge) {
|
font-size: 0.75rem;
|
font-weight: 500;
|
background-color: var(--md-sys-color-primary-container);
|
color: var(--md-sys-color-on-primary-container);
|
padding: 0.125rem 0.5rem;
|
border-radius: 999px;
|
}
|
|
[dh-section][divider] {
|
border-top-color: var(--md-sys-color-outline-variant);
|
}
|
|
[dh-textarea] {
|
display: block;
|
font-family: Roboto, system-ui, sans-serif;
|
width: 100%;
|
}
|
|
[dh-textarea]::part(input) {
|
padding: 0.5rem 0.75rem;
|
border: 1px solid var(--md-sys-color-outline);
|
border-radius: 4px;
|
font-size: 0.875rem;
|
font-family: inherit;
|
color: var(--md-sys-color-on-surface);
|
background-color: var(--md-sys-color-surface);
|
resize: vertical;
|
min-height: 60px;
|
outline: none;
|
transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-textarea]:not([disabled])::part(input):hover {
|
border-color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-textarea]::part(input):focus {
|
border-color: var(--md-sys-color-primary);
|
box-shadow: 0 0 0 2px rgba(var(--md-sys-color-primary-rgb), 0.12);
|
}
|
|
[dh-textarea][disabled]::part(input) {
|
border-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.04);
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
cursor: not-allowed;
|
}
|
|
[dh-color-picker] {
|
display: block;
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-color-picker]::part(preview) {
|
border: 1px solid var(--md-sys-color-outline);
|
}
|
|
[dh-color-picker][mode=extended]::part(area) {
|
border: 1px solid var(--md-sys-color-outline-variant);
|
border-radius: 8px;
|
}
|
|
[dh-color-picker][mode=extended]::part(hue) {
|
border: 1px solid var(--md-sys-color-outline-variant);
|
border-radius: 999px;
|
}
|
|
[dh-color-picker][mode=extended]::part(area-thumb),
|
[dh-color-picker][mode=extended]::part(hue-thumb) {
|
border: 2px solid #fff;
|
border-radius: 50%;
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
|
}
|
|
[dh-color-picker][mode=extended]::part(area-thumb):focus-visible,
|
[dh-color-picker][mode=extended]::part(hue-thumb):focus-visible {
|
outline: none;
|
box-shadow: 0 0 0 2px var(--md-sys-color-primary), 0 0 0 4px rgba(var(--md-sys-color-primary-rgb), 0.3);
|
}
|
|
[dh-color-picker][disabled][mode=extended]::part(area),
|
[dh-color-picker][disabled][mode=extended]::part(hue) {
|
opacity: 0.38;
|
cursor: not-allowed;
|
}
|
|
[dh-mainbar] {
|
display: block;
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-mainbar]::part(root) {
|
/* Mainbar als App-Chrome: sehr dezent surface-container-low — minimal abgesetzt vom weissen Body */
|
background-color: var(--md-sys-color-surface-container-low);
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-mainbar]::part(brand) {
|
font-size: 1.375rem;
|
font-weight: 400;
|
line-height: 1.75rem;
|
letter-spacing: 0;
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-mainbar]::part(content) {
|
font-size: 0.875rem;
|
font-weight: 400;
|
line-height: 1.25rem;
|
letter-spacing: 0.015625rem;
|
color: var(--md-sys-color-on-surface-variant);
|
}
|
|
[dh-mainbar]::part(actions) {
|
color: var(--md-sys-color-on-surface-variant);
|
}
|
|
[dh-merge-dialog] {
|
display: block;
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-merge-dialog]::part(root) {
|
background-color: var(--md-sys-color-surface-container-low);
|
/* Konsistent zu dh-window/dh-infobox: Outline + dezenter Shadow */
|
border: 1px solid var(--md-sys-color-outline-variant);
|
border-radius: 28px;
|
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12), 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
|
padding: 24px;
|
min-width: 280px;
|
max-width: 640px;
|
}
|
|
[dh-merge-dialog]::part(header) {
|
padding: 0 0 16px 0;
|
justify-content: flex-start;
|
font-size: 1.5rem;
|
font-weight: 400;
|
line-height: 2rem;
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-merge-dialog]::part(content) {
|
padding: 0 0 16px 0;
|
font-size: 0.875rem;
|
font-weight: 400;
|
line-height: 1.25rem;
|
color: var(--md-sys-color-on-surface-variant);
|
}
|
|
[dh-merge-dialog]::part(footer) {
|
padding: 0;
|
justify-content: space-between;
|
align-items: center;
|
gap: 8px;
|
}
|
|
[dh-merge-dialog]::part(page-root) {
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-merge-dialog]::part(page-label) {
|
font-size: 0.875rem;
|
font-weight: 500;
|
line-height: 1.25rem;
|
color: var(--md-sys-color-on-surface);
|
padding: 8px 0;
|
}
|
|
[dh-merge-dialog]::part(page-content) {
|
font-size: 0.875rem;
|
line-height: 1.25rem;
|
color: var(--md-sys-color-on-surface);
|
border: 1px solid var(--md-sys-color-outline-variant);
|
border-radius: 12px;
|
overflow: hidden;
|
accent-color: var(--md-sys-color-primary);
|
}
|
|
[dh-merge-dialog]::part(page-header) {
|
background-color: var(--md-sys-color-surface-container);
|
color: var(--md-sys-color-on-surface);
|
font-weight: 500;
|
border-color: var(--md-sys-color-outline-variant);
|
}
|
|
[dh-merge-dialog]::part(page-column-left),
|
[dh-merge-dialog]::part(page-column-right) {
|
background-color: var(--md-sys-color-surface-container);
|
color: var(--md-sys-color-on-surface);
|
font-weight: 500;
|
border-color: var(--md-sys-color-outline-variant);
|
accent-color: var(--md-sys-color-primary);
|
}
|
|
[dh-merge-dialog]::part(page-item) {
|
color: var(--md-sys-color-on-surface-variant);
|
font-weight: 400;
|
border-color: var(--md-sys-color-outline-variant);
|
}
|
|
[dh-merge-dialog]::part(dh-button-nav-root) {
|
padding-inline: 8px;
|
min-width: auto;
|
height: 36px;
|
}
|
|
[dh-merge-dialog]::part(dh-button-nav-icon) {
|
width: 14px;
|
height: 14px;
|
}
|
|
[dh-multi-selectbox] {
|
display: block;
|
}
|
|
[dh-multi-selectbox]::part(root),
|
[dh-settings-grid]::part(dh-multiselect-root),
|
[dh-setting-item]::part(dh-multiselect-root) {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
gap: 8px;
|
padding: 4px 8px;
|
border-radius: 8px;
|
background-color: var(--md-sys-color-surface);
|
}
|
|
[dh-multi-selectbox]::part(trigger),
|
[dh-settings-grid]::part(dh-multiselect-trigger),
|
[dh-setting-item]::part(dh-multiselect-trigger) {
|
gap: 4px;
|
flex: 1;
|
min-width: 0;
|
}
|
|
[dh-multi-selectbox]::part(item-root),
|
[dh-multi-selectbox-item]::part(root),
|
[dh-settings-grid]::part(dh-multiselect-item-root),
|
[dh-setting-item]::part(dh-multiselect-item-root) {
|
display: inline-flex;
|
align-items: center;
|
height: 32px;
|
padding: 0 4px 0 12px;
|
border-radius: 8px;
|
/* Modern: dezenter outline-variant Border */
|
border: 1px solid var(--md-sys-color-outline-variant);
|
background-color: transparent;
|
gap: 8px;
|
box-sizing: border-box;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-multi-selectbox]::part(item-label),
|
[dh-multi-selectbox-item]::part(label),
|
[dh-settings-grid]::part(dh-multiselect-item-label),
|
[dh-setting-item]::part(dh-multiselect-item-label) {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 0.875rem;
|
font-weight: 500;
|
line-height: 1.25rem;
|
letter-spacing: 0.00625rem;
|
color: var(--md-sys-color-on-surface);
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
[dh-multi-selectbox]::part(item-dh-button-root),
|
[dh-multi-selectbox-item]::part(dh-button-root),
|
[dh-settings-grid]::part(dh-multiselect-item-trigger),
|
[dh-setting-item]::part(dh-multiselect-item-trigger) {
|
width: 24px;
|
height: 24px;
|
min-width: auto;
|
min-height: auto;
|
border: none;
|
background: none;
|
border-radius: 50%;
|
cursor: pointer;
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
padding: 0;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-multi-selectbox]::part(item-icon),
|
[dh-multi-selectbox-item]::part(icon),
|
[dh-settings-grid]::part(dh-multiselect-item-icon),
|
[dh-setting-item]::part(dh-multiselect-item-icon) {
|
font-size: 18px;
|
color: var(--md-sys-color-on-surface-variant);
|
}
|
|
[dh-multi-selectbox]:not([noteditable])::part(item-root):hover,
|
[dh-multi-selectbox-item]:not([noteditable])::part(root):hover,
|
[dh-settings-grid]::part(dh-multiselect-item-root):hover,
|
[dh-setting-item]::part(dh-multiselect-item-root):hover {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
|
}
|
|
[dh-multi-selectbox]:not([noteditable])::part(item-dh-button-root):hover,
|
[dh-multi-selectbox-item]:not([noteditable])::part(dh-button-root):hover,
|
[dh-settings-grid]::part(dh-multiselect-item-trigger):hover,
|
[dh-setting-item]::part(dh-multiselect-item-trigger):hover {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
|
}
|
|
[dh-multi-selectbox]:not([noteditable])::part(item-root):focus-within,
|
[dh-multi-selectbox-item]:not([noteditable])::part(root):focus-within,
|
[dh-settings-grid]::part(dh-multiselect-item-root):focus-within,
|
[dh-setting-item]::part(dh-multiselect-item-root):focus-within {
|
border-color: var(--md-sys-color-on-surface);
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
}
|
|
[dh-multi-selectbox]::part(dh-button-root),
|
[dh-settings-grid]::part(dh-multiselect-icon),
|
[dh-setting-item]::part(dh-multiselect-icon) {
|
width: 32px;
|
height: 32px;
|
min-width: auto;
|
min-height: auto;
|
border-radius: 50%;
|
background-color: var(--md-sys-color-secondary-container);
|
color: var(--md-sys-color-on-secondary-container);
|
border: none;
|
cursor: pointer;
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 1.125rem;
|
padding: 0;
|
box-shadow: none;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-multi-selectbox]:not([noteditable])::part(dh-button-root):hover,
|
[dh-settings-grid]::part(dh-multiselect-icon):hover,
|
[dh-setting-item]::part(dh-multiselect-icon):hover {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-secondary-container-rgb), 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
|
}
|
|
[dh-multi-selectbox]:not([noteditable])::part(dh-button-root):focus-within,
|
[dh-settings-grid]::part(dh-multiselect-icon):focus-visible,
|
[dh-setting-item]::part(dh-multiselect-icon):focus-visible {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-secondary-container-rgb), 0.12);
|
outline: none;
|
}
|
|
[dh-multi-selectbox]:not([noteditable])::part(dh-button-root):active,
|
[dh-settings-grid]::part(dh-multiselect-icon):active,
|
[dh-setting-item]::part(dh-multiselect-icon):active {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-secondary-container-rgb), 0.12);
|
}
|
|
[dh-multi-selectbox]::part(content),
|
[dh-settings-grid]::part(dh-multiselect-content),
|
[dh-setting-item]::part(dh-multiselect-content),
|
[dh-form-field]::part(dh-multiselect-content) {
|
background-color: var(--md-sys-color-surface);
|
border-radius: 12px;
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
|
padding: 8px 0;
|
min-width: 200px;
|
}
|
|
[dh-multi-selectbox]::part(input),
|
[dh-settings-grid]::part(dh-multiselect-input),
|
[dh-setting-item]::part(dh-multiselect-input) {
|
display: block;
|
width: calc(100% - 16px);
|
margin: 0 8px 4px;
|
}
|
|
[dh-multi-selectbox]::part(dh-input-root) {
|
height: auto;
|
border: 1px solid var(--md-sys-color-outline-variant);
|
border-radius: 8px;
|
background-color: var(--md-sys-color-surface-container-low);
|
box-shadow: none;
|
}
|
|
[dh-multi-selectbox]::part(dh-input-input) {
|
font-size: 0.875rem;
|
line-height: 1.25rem;
|
padding: 8px 12px;
|
}
|
|
[dh-multi-selectbox]::part(item),
|
[dh-settings-grid]::part(dh-multiselect-item),
|
[dh-setting-item]::part(dh-multiselect-item) {
|
padding: 12px 16px;
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 0.875rem;
|
line-height: 1.25rem;
|
color: var(--md-sys-color-on-surface);
|
cursor: pointer;
|
transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-multi-selectbox]::part(item):hover,
|
[dh-settings-grid]::part(dh-multiselect-item):hover,
|
[dh-setting-item]::part(dh-multiselect-item):hover {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.08);
|
}
|
|
[dh-multi-selectbox]::part(item):focus,
|
[dh-settings-grid]::part(dh-multiselect-item):focus,
|
[dh-setting-item]::part(dh-multiselect-item):focus {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
|
outline: none;
|
}
|
|
[dh-multi-selectbox]::part(item):active,
|
[dh-settings-grid]::part(dh-multiselect-item):active,
|
[dh-setting-item]::part(dh-multiselect-item):active {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
|
}
|
|
[dh-multi-selectbox]::part(selected),
|
[dh-settings-grid]::part(dh-multiselect-selected),
|
[dh-setting-item]::part(dh-multiselect-selected) {
|
background-color: rgba(var(--md-comp-multiselect-selected-rgb), 0.12);
|
color: var(--md-comp-multiselect-selected);
|
font-weight: 700;
|
}
|
|
[dh-multi-selectbox]::part(selected):hover,
|
[dh-settings-grid]::part(dh-multiselect-selected):hover,
|
[dh-setting-item]::part(dh-multiselect-selected):hover {
|
background-color: rgba(var(--md-comp-multiselect-selected-rgb), 0.2);
|
}
|
|
[dh-multi-selectbox][noteditable]::part(root) {
|
opacity: 0.38;
|
pointer-events: none;
|
}
|
|
[dh-multi-selectbox][noteditable]::part(item-root) {
|
border-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
background-color: transparent;
|
}
|
|
[dh-multi-selectbox][noteditable]::part(item-label) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-select]::part(root),
|
[dh-settings-grid]::part(dh-select-root),
|
[dh-setting-item]::part(dh-select-root),
|
[dh-table-old]::part(dh-select-root),
|
[dh-table]::part(dh-select-root) {
|
position: relative;
|
height: 100%;
|
}
|
|
[dh-select]::part(trigger),
|
[dh-settings-grid]::part(dh-select-trigger),
|
[dh-setting-item]::part(dh-select-trigger),
|
[dh-table-old]::part(dh-select-trigger),
|
[dh-table]::part(dh-select-trigger) {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: var(--dh-select-trigger-height, 40px);
|
padding: var(--dh-select-trigger-padding, 0 12px);
|
/* MD3-Spec: Selects sind Container fuer eine Auswahl (kein Aktions-Element),
|
* daher corner-extra-small (4px) — gleicher Default wie dh-input. Pill bleibt
|
* ueber das Custom-Property abrufbar fuer Sonderfaelle (Toolbar-Filter etc.). */
|
border-radius: var(--dh-select-trigger-radius, var(--md-sys-shape-corner-extra-small, 4px));
|
cursor: pointer;
|
box-sizing: border-box;
|
overflow: hidden;
|
gap: 8px;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-select]::part(trigger),
|
[dh-select][variant=outlined]::part(trigger),
|
[dh-settings-grid]::part(dh-select-trigger),
|
[dh-setting-item]::part(dh-select-trigger),
|
[dh-table-old]::part(dh-select-trigger),
|
[dh-table]::part(dh-select-trigger) {
|
/* Modern: dezenter outline-variant als Default, transparent statt surface-container */
|
border: var(--dh-select-trigger-border, 1px solid var(--md-sys-color-outline-variant));
|
background-color: transparent;
|
}
|
|
[dh-select]:not([disabled]):not([variant=filled]):not([open]):not(:focus-within):hover::part(trigger),
|
[dh-select][variant=outlined]:not([disabled]):not([open]):not(:focus-within):hover::part(trigger),
|
[dh-settings-grid]::part(dh-select-trigger):not(:focus-within):hover,
|
[dh-setting-item]::part(dh-select-trigger):not(:focus-within):hover,
|
[dh-table-old]::part(dh-select-trigger):not(:focus-within):hover,
|
[dh-table]::part(dh-select-trigger):not(:focus-within):hover {
|
/* Hover: outline (mittelgrau) — neutraler Akzent statt fast-schwarz */
|
border-color: var(--md-sys-color-outline);
|
}
|
|
[dh-select]:not([disabled]):not([variant=filled]):focus-within::part(trigger),
|
[dh-select][variant=outlined]:not([disabled]):focus-within::part(trigger),
|
[dh-settings-grid]::part(dh-select-trigger):focus-within,
|
[dh-setting-item]::part(dh-select-trigger):focus-within,
|
[dh-table-old]::part(dh-select-trigger):focus-within,
|
[dh-table]::part(dh-select-trigger):focus-within {
|
border-color: var(--md-sys-color-primary);
|
}
|
|
[dh-select]:not([disabled]):not([variant=filled]):active::part(trigger),
|
[dh-select][variant=outlined]:not([disabled]):active::part(trigger) {
|
transform: scale(0.97);
|
}
|
|
[dh-select]:not([variant=filled])[open]::part(trigger),
|
[dh-select][variant=outlined][open]::part(trigger) {
|
border-color: var(--md-sys-color-primary);
|
}
|
|
[dh-select][variant=filled]::part(trigger) {
|
border: none;
|
background-color: var(--md-sys-color-primary);
|
color: var(--md-sys-color-on-primary);
|
}
|
|
[dh-select][variant=filled]:not([disabled]):hover::part(trigger) {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-primary-rgb), 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
|
}
|
|
[dh-select][variant=filled]:not([disabled]):focus-within::part(trigger) {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-primary-rgb), 0.12);
|
outline: none;
|
}
|
|
[dh-select][variant=filled]:not([disabled]):active::part(trigger) {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-primary-rgb), 0.12);
|
transform: scale(0.97);
|
}
|
|
[dh-select][variant=filled][open]::part(trigger) {
|
box-shadow: inset 0 0 0 100vmax rgba(var(--md-sys-color-on-primary-rgb), 0.12);
|
}
|
|
[dh-select]::part(floating-label) {
|
color: var(--md-sys-color-primary);
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-select][variant=filled]::part(floating-label) {
|
color: var(--md-sys-color-on-primary);
|
}
|
|
[dh-select]::part(label),
|
[dh-settings-grid]::part(dh-select-label),
|
[dh-setting-item]::part(dh-select-label),
|
[dh-table-old]::part(dh-select-label),
|
[dh-table]::part(dh-select-label) {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: var(--dh-select-label-size, 0.875rem);
|
font-weight: 500;
|
line-height: var(--dh-select-label-line-height, 1.25rem);
|
letter-spacing: 0.00625rem;
|
color: var(--md-sys-color-on-surface);
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
flex: 1;
|
}
|
|
[dh-select][variant=filled]::part(label) {
|
color: var(--md-sys-color-on-primary);
|
}
|
|
[dh-select]::part(icon),
|
[dh-settings-grid]::part(dh-select-icon),
|
[dh-setting-item]::part(dh-select-icon),
|
[dh-table-old]::part(dh-select-icon),
|
[dh-table]::part(dh-select-icon) {
|
color: var(--md-sys-color-on-surface-variant);
|
font-size: 0.75rem;
|
flex-shrink: 0;
|
transform: rotate(0deg);
|
transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-select][open]::part(icon),
|
[dh-settings-grid] [dh-select][open]::part(dh-select-icon),
|
[dh-setting-item] [dh-select][open]::part(dh-select-icon),
|
[dh-table-old] [dh-select][open]::part(dh-select-icon),
|
[dh-table] [dh-select][open]::part(dh-select-icon) {
|
transform: rotate(180deg);
|
}
|
|
[dh-select][variant=filled]::part(icon) {
|
color: var(--md-sys-color-on-primary);
|
}
|
|
[dh-select]::part(menu),
|
[dh-settings-grid]::part(dh-select-menu),
|
[dh-setting-item]::part(dh-select-menu),
|
[dh-table-old]::part(dh-select-menu),
|
[dh-table]::part(dh-select-menu) {
|
background-color: var(--md-sys-color-surface-container);
|
border-radius: 12px;
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
|
margin-top: 4px;
|
overflow: hidden;
|
}
|
|
[dh-select]::part(search-bar),
|
[dh-settings-grid]::part(dh-select-search-bar),
|
[dh-setting-item]::part(dh-select-search-bar),
|
[dh-table-old]::part(dh-select-search-bar),
|
[dh-table]::part(dh-select-search-bar) {
|
padding: 12px;
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
}
|
|
[dh-select]::part(search-input-wrapper),
|
[dh-settings-grid]::part(dh-select-search-input-wrapper),
|
[dh-setting-item]::part(dh-select-search-input-wrapper),
|
[dh-table-old]::part(dh-select-search-input-wrapper),
|
[dh-table]::part(dh-select-search-input-wrapper) {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
background-color: var(--md-sys-color-surface-container-highest);
|
border-radius: 9999px;
|
height: 40px;
|
padding: 0 14px;
|
}
|
|
[dh-select]::part(search-icon),
|
[dh-settings-grid]::part(dh-select-search-icon),
|
[dh-setting-item]::part(dh-select-search-icon),
|
[dh-table-old]::part(dh-select-search-icon),
|
[dh-table]::part(dh-select-search-icon) {
|
color: var(--md-sys-color-on-surface-variant);
|
font-size: 20px;
|
flex-shrink: 0;
|
line-height: 1;
|
}
|
|
[dh-select]::part(input),
|
[dh-settings-grid]::part(dh-select-input),
|
[dh-setting-item]::part(dh-select-input),
|
[dh-table-old]::part(dh-select-input),
|
[dh-table]::part(dh-select-input) {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 0.875rem;
|
line-height: 1.25rem;
|
padding: 0;
|
border: none;
|
border-bottom: none;
|
outline: none;
|
background: transparent;
|
color: var(--md-sys-color-on-surface);
|
flex: 1;
|
min-width: 0;
|
box-sizing: border-box;
|
}
|
|
[dh-select]::part(content),
|
[dh-settings-grid]::part(dh-select-content),
|
[dh-setting-item]::part(dh-select-content),
|
[dh-table-old]::part(dh-select-content),
|
[dh-table]::part(dh-select-content) {
|
padding: 4px 0;
|
}
|
|
[dh-select]::part(item),
|
[dh-settings-grid]::part(dh-select-item),
|
[dh-setting-item]::part(dh-select-item),
|
[dh-table-old]::part(dh-select-item),
|
[dh-table]::part(dh-select-item) {
|
min-height: 48px;
|
padding: 0 16px;
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 0.875rem;
|
font-weight: 400;
|
line-height: 1.25rem;
|
letter-spacing: 0.015625rem;
|
color: var(--md-sys-color-on-surface);
|
transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-select]::part(item):hover,
|
[dh-settings-grid]::part(dh-select-item):hover,
|
[dh-setting-item]::part(dh-select-item):hover,
|
[dh-table-old]::part(dh-select-item):hover,
|
[dh-table]::part(dh-select-item):hover {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.08);
|
}
|
|
[dh-select]::part(item):focus,
|
[dh-settings-grid]::part(dh-select-item):focus,
|
[dh-setting-item]::part(dh-select-item):focus,
|
[dh-table-old]::part(dh-select-item):focus,
|
[dh-table]::part(dh-select-item):focus {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
|
outline: none;
|
}
|
|
[dh-select]::part(item):active,
|
[dh-settings-grid]::part(dh-select-item):active,
|
[dh-setting-item]::part(dh-select-item):active,
|
[dh-table-old]::part(dh-select-item):active,
|
[dh-table]::part(dh-select-item):active {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
|
}
|
|
[dh-select]::part(selected),
|
[dh-settings-grid]::part(dh-select-selected),
|
[dh-setting-item]::part(dh-select-selected),
|
[dh-table-old]::part(dh-select-selected),
|
[dh-table]::part(dh-select-selected) {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.08);
|
color: var(--md-sys-color-primary);
|
font-weight: 500;
|
}
|
|
[dh-select]::part(selected):hover,
|
[dh-settings-grid]::part(dh-select-selected):hover,
|
[dh-setting-item]::part(dh-select-selected):hover,
|
[dh-table-old]::part(dh-select-selected):hover,
|
[dh-table]::part(dh-select-selected):hover {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.16);
|
}
|
|
[dh-select][disabled]::part(trigger),
|
[dh-select][disabled][variant=outlined]::part(trigger) {
|
border-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
background-color: transparent;
|
box-shadow: none;
|
cursor: not-allowed;
|
pointer-events: none;
|
}
|
|
[dh-select][disabled][variant=filled]::part(trigger) {
|
border: none;
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
box-shadow: none;
|
cursor: not-allowed;
|
pointer-events: none;
|
}
|
|
[dh-select][disabled]::part(label) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-select][disabled]::part(icon) {
|
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
|
}
|
|
[dh-settings-grid]::part(dh-select-trigger),
|
[dh-setting-item]::part(dh-select-trigger) {
|
border: none;
|
border-radius: 0;
|
}
|
|
[dh-settings-grid]::part(dh-select-trigger):hover,
|
[dh-setting-item]::part(dh-select-trigger):hover {
|
border: none;
|
box-shadow: none;
|
}
|
|
[dh-settings-grid]::part(dh-select-trigger):focus-within,
|
[dh-setting-item]::part(dh-select-trigger):focus-within {
|
border: none;
|
box-shadow: none;
|
}
|
|
[dh-table-old]::part(dh-select-root),
|
[dh-table]::part(dh-select-root) {
|
height: 100%;
|
}
|
|
[dh-table-old]::part(dh-select-trigger),
|
[dh-table]::part(dh-select-trigger) {
|
border: none;
|
border-radius: 0;
|
height: 100%;
|
padding: 0;
|
}
|
|
[dh-table-old]::part(dh-select-trigger):hover,
|
[dh-table]::part(dh-select-trigger):hover {
|
border: none;
|
box-shadow: none;
|
}
|
|
[dh-table-old]::part(dh-select-trigger):focus-within,
|
[dh-table]::part(dh-select-trigger):focus-within {
|
border: none;
|
box-shadow: none;
|
}
|
|
[dh-mainbar] [dh-select] {
|
width: auto;
|
min-width: 0;
|
}
|
|
[dh-settings-grid],
|
[dh-setting-item] {
|
--dh-input-root-border: 1px solid var(--md-sys-color-outline-variant);
|
--dh-input-root-radius: 4px;
|
--dh-input-root-bg: var(--md-sys-color-surface);
|
--dh-input-root-focus-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
|
--dh-input-input-padding: 0 8px;
|
--dh-select-display: block;
|
--dh-select-trigger-border: 1px solid var(--md-sys-color-outline-variant);
|
--dh-select-trigger-radius: 4px;
|
--dh-select-trigger-focus-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
|
}
|
|
[dh-settings-grid] {
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-settings-grid]::part(root) {
|
background-color: var(--md-sys-color-surface);
|
padding: 16px;
|
border-radius: 12px;
|
}
|
|
[dh-settings-grid],
|
[dh-grid-item] {
|
--dh-grid-hover-bg: rgba(var(--md-sys-color-on-surface-rgb), 0.06);
|
}
|
|
[dh-grid-item] {
|
display: block;
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-grid-item]::part(root),
|
[dh-grid-item]::part(grid-item-root),
|
[dh-settings-grid]::part(grid-item-root) {
|
margin: 2px 0;
|
border-radius: 20px;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), outline-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-grid-item].selected::part(root),
|
[dh-grid-item].selected::part(grid-item-root),
|
[dh-settings-grid] [dh-grid-item].selected::part(grid-item-root) {
|
outline: 1px solid var(--md-sys-color-outline-variant);
|
outline-offset: 0;
|
}
|
|
[dh-grid-item]::part(header),
|
[dh-grid-item]::part(grid-item-header),
|
[dh-settings-grid]::part(grid-item-header) {
|
padding: 4px 8px 4px 4px;
|
min-height: 40px;
|
cursor: pointer;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
position: relative;
|
}
|
|
[dh-grid-item]::part(header):hover,
|
[dh-grid-item]::part(grid-item-header):hover,
|
[dh-settings-grid]::part(grid-item-header):hover {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.06);
|
}
|
|
[dh-grid-item]::part(header):active,
|
[dh-grid-item]::part(grid-item-header):active,
|
[dh-settings-grid]::part(grid-item-header):active {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
}
|
|
[dh-grid-item].selected::part(header),
|
[dh-grid-item].selected::part(grid-item-header),
|
[dh-settings-grid] [dh-grid-item].selected::part(grid-item-header) {
|
/* Aufgeklappte Gruppe = primary-container (heller orange Tint #FFE4CC).
|
* Signalisiert den aktiven Zustand mit dem MD3-Brand-Akzent.
|
* KEIN zusaetzlicher Hover-State auf der ganzen Pille: der Container ist
|
* bereits gefuellt, Chevron und Reset-Icon haben jeweils eigene State-Layer
|
* beim Hover. */
|
background-color: var(--md-sys-color-primary-container);
|
color: var(--md-sys-color-on-primary-container);
|
border-radius: 20px 20px 4px 4px;
|
}
|
|
[dh-grid-item]::part(label),
|
[dh-grid-item]::part(grid-item-label),
|
[dh-settings-grid]::part(grid-item-label) {
|
font-size: 1rem;
|
font-weight: 500;
|
line-height: 1.5rem;
|
letter-spacing: 0.009375rem;
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-grid-item].selected::part(label),
|
[dh-grid-item].selected::part(grid-item-label),
|
[dh-settings-grid] [dh-grid-item].selected::part(grid-item-label),
|
[dh-grid-item].selected::part(icon),
|
[dh-grid-item].selected::part(grid-item-icon),
|
[dh-settings-grid] [dh-grid-item].selected::part(grid-item-icon),
|
[dh-grid-item].selected::part(icon-reset),
|
[dh-grid-item].selected::part(grid-item-icon-reset),
|
[dh-settings-grid] [dh-grid-item].selected::part(grid-item-icon-reset) {
|
color: var(--md-sys-color-on-primary-container);
|
}
|
|
[dh-grid-item]::part(icon),
|
[dh-grid-item]::part(grid-item-icon),
|
[dh-settings-grid]::part(grid-item-icon) {
|
width: 32px;
|
height: 32px;
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 50%;
|
color: var(--md-sys-color-on-surface-variant);
|
font-size: 1.125rem;
|
margin: 0;
|
transform: rotate(0deg);
|
transition: transform 280ms cubic-bezier(0.2, 0, 0, 1), background-color 150ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-grid-item]:not(.selected)::part(icon),
|
[dh-grid-item]:not(.selected)::part(grid-item-icon),
|
[dh-settings-grid] [dh-grid-item]:not(.selected)::part(grid-item-icon) {
|
transform: rotate(0deg);
|
}
|
|
[dh-grid-item].selected::part(icon),
|
[dh-grid-item].selected::part(grid-item-icon),
|
[dh-settings-grid] [dh-grid-item].selected::part(grid-item-icon) {
|
transform: rotate(180deg);
|
}
|
|
[dh-grid-item]::part(icon):hover,
|
[dh-grid-item]::part(grid-item-icon):hover,
|
[dh-settings-grid]::part(grid-item-icon):hover {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-grid-item]::part(icon-reset),
|
[dh-grid-item]::part(grid-item-icon-reset),
|
[dh-settings-grid]::part(grid-item-icon-reset) {
|
width: 32px;
|
height: 32px;
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
color: var(--md-sys-color-on-surface-variant);
|
cursor: pointer;
|
border-radius: 50%;
|
font-size: 1rem;
|
transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-grid-item]::part(icon-reset):hover,
|
[dh-grid-item]::part(grid-item-icon-reset):hover,
|
[dh-settings-grid]::part(grid-item-icon-reset):hover {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-settings-grid] {
|
--dh-grid-item-content-columns: 1fr;
|
--dh-grid-item-content-column-gap: 0;
|
--dh-grid-item-content-padding-right: 0;
|
--dh-grid-item-selected-header-bg: var(--md-sys-color-primary-container);
|
--dh-grid-item-selected-color: var(--md-sys-color-on-primary-container);
|
--dh-grid-item-selected-header-radius: 20px 20px 4px 4px;
|
--dh-grid-item-selected-outline: 1px solid var(--md-sys-color-outline-variant);
|
--dh-grid-item-selected-outline-offset: 0;
|
}
|
|
[dh-settings-grid][multicolumn] {
|
--dh-grid-item-content-columns: repeat(auto-fit, minmax(480px, 1fr));
|
--dh-grid-item-content-column-gap: 16px;
|
--dh-grid-item-content-padding-right: 8px;
|
}
|
|
[dh-grid-item][open]::part(content),
|
[dh-grid-item][open]::part(grid-item-content),
|
[dh-settings-grid] [dh-grid-item][open]::part(grid-item-content) {
|
display: grid;
|
grid-template-columns: var(--dh-grid-item-content-columns);
|
column-gap: var(--dh-grid-item-content-column-gap);
|
row-gap: 0;
|
padding: 0 var(--dh-grid-item-content-padding-right) 0 0;
|
align-items: start;
|
}
|
|
[dh-setting-item][type=BitList],
|
[dh-setting-item][type=note],
|
[dh-setting-item][type=Path] {
|
grid-column: 1/-1;
|
}
|
|
[dh-grid-item]::part(submenu),
|
[dh-grid-item]::part(grid-item-submenu),
|
[dh-settings-grid]::part(grid-item-submenu) {
|
padding: 4px 0 4px 24px;
|
}
|
|
[dh-setting-item] {
|
display: block;
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-setting-item]::part(root),
|
[dh-settings-grid]::part(setting-item-root) {
|
background-color: transparent;
|
min-height: 32px;
|
border-radius: 6px;
|
transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-setting-item]:hover::part(root),
|
[dh-settings-grid]::part(setting-item-root):hover {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.06);
|
}
|
|
[dh-setting-item]::part(label),
|
[dh-settings-grid]::part(setting-item-label) {
|
font-size: 0.875rem;
|
font-weight: 400;
|
line-height: 1.25rem;
|
letter-spacing: 0.015625rem;
|
color: var(--md-sys-color-on-surface-variant);
|
padding: 8px 12px;
|
}
|
|
[dh-setting-item]::part(icon),
|
[dh-settings-grid]::part(setting-item-icon) {
|
color: var(--md-sys-color-on-surface-variant);
|
cursor: pointer;
|
border-radius: 50%;
|
padding: 4px;
|
transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-setting-item]::part(icon):hover,
|
[dh-settings-grid]::part(setting-item-icon):hover {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
|
}
|
|
[dh-setting-item]::part(input),
|
[dh-settings-grid]::part(setting-item-input) {
|
border: none;
|
outline: none;
|
resize: vertical;
|
}
|
|
:host([dh-setting-item]) dh-checkbox[variant=switch]::part(root) {
|
transform: scale(0.8);
|
transform-origin: right center;
|
}
|
|
[dh-snackbar]::part(root) {
|
background-color: var(--md-sys-color-inverse-surface);
|
color: var(--md-sys-color-inverse-on-surface);
|
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
|
}
|
|
[dh-snackbar][variant=loading]::part(root) {
|
background-color: var(--md-sys-color-primary-container);
|
color: var(--md-sys-color-on-primary-container);
|
}
|
|
[dh-snackbar][variant=success]::part(root) {
|
background-color: var(--md-sys-color-success-container);
|
color: var(--md-sys-color-on-success-container);
|
}
|
|
[dh-snackbar][variant=error]::part(root) {
|
background-color: var(--md-sys-color-error-container);
|
color: var(--md-sys-color-on-error-container);
|
}
|
|
[dh-snackbar][variant=info]::part(root) {
|
background-color: var(--md-sys-color-secondary-container);
|
color: var(--md-sys-color-on-secondary-container);
|
}
|
|
[dh-snackbar]::part(action) {
|
color: var(--md-sys-color-inverse-primary);
|
background-color: transparent;
|
}
|
|
[dh-snackbar]::part(action):hover {
|
background-color: rgba(255, 255, 255, 0.08);
|
}
|
|
[dh-snackbar]::part(action):focus-visible {
|
background-color: rgba(255, 255, 255, 0.12);
|
outline: none;
|
}
|
|
[dh-snackbar][variant=loading]::part(action),
|
[dh-snackbar][variant=success]::part(action),
|
[dh-snackbar][variant=error]::part(action),
|
[dh-snackbar][variant=info]::part(action) {
|
color: inherit;
|
font-weight: 600;
|
}
|
|
[dh-snackbar][variant=loading]::part(action):hover,
|
[dh-snackbar][variant=success]::part(action):hover,
|
[dh-snackbar][variant=error]::part(action):hover,
|
[dh-snackbar][variant=info]::part(action):hover {
|
background-color: rgba(0, 0, 0, 0.06);
|
}
|
|
[dh-snackbar]::part(message) {
|
color: inherit;
|
}
|
|
[dh-tab] {
|
display: block;
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-tab]::part(root) {
|
background-color: transparent;
|
overflow: hidden;
|
}
|
|
[dh-tab]::part(header) {
|
background-color: transparent;
|
/* Modern MD3 spec: subtle divider via outline-variant — auf weissem Body
|
* wirkt das aber unsichtbar. outline gibt klarere Trennung Tab-Bar vs Content. */
|
border-bottom: 1px solid var(--md-sys-color-outline);
|
}
|
|
[dh-tab]::part(content) {
|
padding: 12px;
|
color: var(--md-sys-color-on-surface-variant);
|
background-color: transparent;
|
font-size: 14px;
|
}
|
|
[dh-tab] > [slot=tab-head] {
|
position: relative;
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
height: 48px;
|
/* MD3 spec: 64px min-width, 16px horizontal padding (compact) */
|
min-width: 64px;
|
padding: 0 16px;
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 0.875rem;
|
font-weight: 500;
|
line-height: 1.25rem;
|
letter-spacing: 0.00625rem;
|
color: var(--md-sys-color-on-surface-variant);
|
cursor: pointer;
|
user-select: none;
|
white-space: nowrap;
|
border: none;
|
background: transparent;
|
transition: color 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-tab] > [slot=tab-head]::after {
|
content: "";
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
height: 3px;
|
border-radius: 3px 3px 0 0;
|
background-color: var(--md-sys-color-primary);
|
transform: scaleX(0);
|
transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-tab] > [slot=tab-head]:hover {
|
/* MD3 spec: neutral state-layer (on-surface 0.08), nicht primary-tinted */
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-tab] > [slot=tab-head]:focus-visible {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
outline: none;
|
}
|
|
[dh-tab] > [slot=tab-head]:active {
|
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
|
}
|
|
[dh-tab] > [slot=tab-head].selected {
|
color: var(--md-sys-color-primary);
|
}
|
|
[dh-tab] > [slot=tab-head].selected::after {
|
transform: scaleX(1);
|
}
|
|
[dh-tab] > [slot=tab-head].selected:hover {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.06);
|
color: var(--md-sys-color-primary);
|
}
|
|
[dh-tab] > [slot=tab-head].selected:focus-visible {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
|
color: var(--md-sys-color-primary);
|
}
|
|
[dh-tab] > [slot=tab-head].selected:active {
|
background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
|
color: var(--md-sys-color-primary);
|
}
|
|
[dh-table-old],
|
[dh-table-row-old],
|
[dh-table-head-cell-old],
|
[dh-table-body-cell-old] {
|
--dh-state-hover-bg: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
|
--dh-state-selected-bg: var(--md-sys-color-secondary-container);
|
--dh-border-color: var(--md-sys-color-outline-variant);
|
}
|
|
[dh-table-old],
|
[dh-table-row-old],
|
[dh-table-head-cell-old],
|
[dh-table-body-cell-old] {
|
--dh-resize-width: 4px;
|
--dh-resize-bg: transparent;
|
--dh-resize-hover-bg: var(--md-sys-color-primary);
|
--dh-header-weight: 500;
|
--dh-header-color: var(--md-sys-color-on-surface-variant);
|
--dh-inactive-opacity: 0.38;
|
--dh-error-color: var(--md-sys-color-error);
|
}
|
|
[dh-table-old] {
|
display: flex;
|
font-family: Roboto, system-ui, sans-serif;
|
color: var(--md-sys-color-on-surface);
|
border: 1px solid var(--md-sys-color-outline-variant);
|
border-radius: 16px;
|
overflow: hidden;
|
--dh-button-height: 32px;
|
--dh-button-min-width: auto;
|
--dh-button-padding-inline: 8px;
|
--dh-button-radius: 16px;
|
--dh-button-gap: 4px;
|
--dh-button-icon-size: 24px;
|
}
|
|
[dh-table-old]::part(header) {
|
padding: 8px 16px;
|
gap: 8px;
|
align-items: center;
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
}
|
|
[dh-table-old]::part(scroll) {
|
scrollbar-gutter: stable;
|
}
|
|
[dh-table-old]::part(content) {
|
background-color: transparent;
|
}
|
|
[dh-table-row-old] {
|
font-family: Roboto, system-ui, sans-serif;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
--dh-head-cell-padding: 0 16px;
|
--dh-body-cell-padding: 0 16px;
|
--dh-select-display: block;
|
--dh-select-root-height: 100%;
|
--dh-select-trigger-height: 100%;
|
--dh-select-trigger-border: none;
|
--dh-select-trigger-radius: 0;
|
--dh-select-trigger-padding: 0;
|
--dh-select-trigger-focus-shadow: none;
|
--dh-select-label-size: 0.875rem;
|
--dh-select-label-line-height: 1.25rem;
|
}
|
|
[dh-table-head-cell-old] {
|
font-family: Roboto, system-ui, sans-serif;
|
padding: 0 16px;
|
}
|
|
[dh-table-head-cell-old]::part(label) {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 0.875rem;
|
font-weight: 500;
|
line-height: 1.25rem;
|
letter-spacing: 0.00625rem;
|
color: var(--md-sys-color-on-surface-variant);
|
}
|
|
[dh-table-head-cell-old]::part(root) {
|
align-items: center;
|
height: 100%;
|
}
|
|
[dh-table-head-cell-old]::part(icon) {
|
color: var(--md-sys-color-on-surface-variant);
|
font-size: 1.125rem;
|
}
|
|
[dh-table-head-cell-old]::part(divider) {
|
background-color: transparent;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-table-head-cell-old]::part(divider):hover {
|
background-color: var(--md-sys-color-outline);
|
}
|
|
[dh-table-body-cell-old] {
|
font-family: Roboto, system-ui, sans-serif;
|
padding: 0 16px;
|
}
|
|
[dh-table-body-cell-old]::part(root) {
|
height: 100%;
|
}
|
|
[dh-table-body-cell-old]::part(content) {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 0.875rem;
|
font-weight: 400;
|
line-height: 1.25rem;
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-table-old]::part(dh-button-root) {
|
height: 32px;
|
min-width: auto;
|
padding: 0 8px;
|
border-radius: 16px;
|
gap: 4px;
|
justify-content: center;
|
}
|
|
[dh-table-old]::part(dh-button-icon) {
|
width: 24px;
|
height: 24px;
|
}
|
|
[dh-table-old]::part(dh-filter-root) {
|
height: 36px;
|
}
|
|
[dh-table] {
|
font-family: Roboto, system-ui, sans-serif;
|
color: var(--md-sys-color-on-surface);
|
border: 1px solid var(--md-sys-color-outline-variant);
|
border-radius: 16px;
|
overflow: clip;
|
box-sizing: border-box;
|
}
|
|
:where([dh-table], [dh-table-row]) {
|
--dh-state-selected-bg: var(--md-sys-color-secondary-container);
|
--dh-state-copy-bg: #ffffff;
|
--dh-border-color: var(--md-sys-color-outline-variant);
|
--dh-header-weight: 500;
|
--dh-header-color: var(--md-sys-color-on-surface-variant);
|
--dh-resize-width: 4px;
|
--dh-resize-bg: transparent;
|
--dh-resize-hover-bg: var(--md-sys-color-primary);
|
/* Modern: Body-Cells transparent, Header in surface-container = klare Trennung */
|
--dh-body-cell-bg: transparent;
|
}
|
|
[dh-table]::part(header) {
|
padding: 8px;
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
background-color: var(--md-sys-color-surface-container);
|
gap: 4px;
|
}
|
|
[dh-table-head-cell] {
|
background-color: var(--md-sys-color-surface-container);
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
font-family: Roboto, system-ui, sans-serif;
|
font-weight: 500;
|
font-size: 0.875rem;
|
color: var(--md-sys-color-on-surface-variant);
|
cursor: pointer;
|
user-select: none;
|
}
|
|
[dh-table-head-cell]::part(root) {
|
gap: 4px;
|
}
|
|
[dh-table-head-cell]::part(icon) {
|
color: var(--md-sys-color-on-surface-variant);
|
font-size: 0.875rem;
|
}
|
|
[dh-table-head-cell]::part(divider) {
|
background-color: transparent;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-table-head-cell]::part(divider):hover {
|
background-color: var(--md-sys-color-primary);
|
}
|
|
[dh-table-body-cell] {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 0.875rem;
|
color: var(--md-sys-color-on-surface);
|
height: 36px;
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
}
|
|
[dh-table-body-cell]::part(root) {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
[dh-table-row].selected [dh-table-body-cell] {
|
background-color: var(--md-sys-color-secondary-container);
|
}
|
|
[dh-tree],
|
[dh-tree-item] {
|
--dh-tree-hover-bg: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
|
--dh-tree-hover-color: var(--md-sys-color-on-surface-variant);
|
--dh-tree-selected-bg: var(--md-sys-color-secondary-container);
|
--dh-tree-selected-color: var(--md-sys-color-on-secondary-container);
|
--dh-tree-selected-label-weight: 500;
|
--dh-tree-selected-hover-shadow: none;
|
--dh-tree-item-radius: 28px;
|
}
|
|
[dh-tree] {
|
display: block;
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-tree]::part(root) {
|
border-radius: 16px;
|
box-shadow: none;
|
padding: 8px 0;
|
overflow: hidden;
|
}
|
|
[dh-tree-item] {
|
display: block;
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-tree-item]::part(content) {
|
display: flex;
|
align-items: center;
|
height: 46px;
|
padding: 0 12px 0 16px;
|
margin: 2px 8px;
|
border-radius: 28px;
|
background-color: transparent;
|
cursor: pointer;
|
gap: 10px;
|
box-sizing: border-box;
|
position: relative;
|
overflow: hidden;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-tree-item]::part(label) {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 13.5px;
|
font-weight: 400;
|
line-height: 1.25rem;
|
letter-spacing: 0.15px;
|
color: var(--md-sys-color-on-surface-variant);
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
flex: 1;
|
min-width: 0;
|
}
|
|
[dh-tree-item]::part(icon-expand) {
|
color: var(--md-sys-color-on-surface-variant);
|
font-size: 16px;
|
flex-shrink: 0;
|
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-tree-item]::part(icon-folder) {
|
color: var(--md-sys-color-on-surface-variant);
|
font-size: 18px;
|
flex-shrink: 0;
|
}
|
|
[dh-tree-item]::part(icon-file) {
|
color: var(--md-sys-color-on-surface-variant);
|
font-size: 18px;
|
flex-shrink: 0;
|
}
|
|
[dh-tree-item]::part(content):hover {
|
background-color: var(--dh-tree-hover-bg);
|
}
|
|
[dh-tree-item]:hover::part(label) {
|
color: var(--dh-tree-hover-color);
|
}
|
|
[dh-tree-item]:hover::part(icon-expand) {
|
color: var(--dh-tree-hover-color);
|
}
|
|
[dh-tree-item].selected::part(content) {
|
background-color: var(--dh-tree-selected-bg);
|
}
|
|
[dh-tree-item].selected::part(content):hover {
|
background-color: var(--dh-tree-selected-bg);
|
box-shadow: var(--dh-tree-selected-hover-shadow);
|
}
|
|
[dh-tree-item].selected::part(label) {
|
color: var(--dh-tree-selected-color);
|
font-weight: var(--dh-tree-selected-label-weight);
|
}
|
|
[dh-tree-item].selected::part(icon-expand) {
|
color: var(--dh-tree-selected-color);
|
}
|
|
[dh-tree][compact] [dh-tree-item]::part(content) {
|
height: 32px;
|
padding: 0 8px 0 12px;
|
margin: 1px 4px;
|
border-radius: 16px;
|
gap: 6px;
|
}
|
|
[dh-tree][compact] [dh-tree-item]::part(label) {
|
font-size: 12.5px;
|
}
|
|
[dh-tree][compact] [dh-tree-item]::part(icon-folder),
|
[dh-tree][compact] [dh-tree-item]::part(icon-file) {
|
font-size: 16px;
|
}
|
|
[dh-tree][compact] [dh-tree-item]::part(icon-expand) {
|
font-size: 14px;
|
}
|
|
[dh-tree][compact]::part(root) {
|
padding: 4px 0;
|
}
|
|
[dh-tree-item]::part(submenu) {
|
padding-left: 0;
|
margin-left: 0;
|
}
|
|
[dh-card] {
|
display: block;
|
font-family: Roboto, system-ui, sans-serif;
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-card][variant=elevated]::part(root),
|
[dh-card][variant=filled]::part(root),
|
[dh-card][variant=outlined]::part(root),
|
[dh-card][variant=floating]::part(root) {
|
border-radius: 16px;
|
padding: 16px;
|
overflow: hidden;
|
position: relative;
|
cursor: pointer;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-card][no-click-effect]::part(root) {
|
cursor: default;
|
}
|
|
[dh-card][variant=elevated]:not([no-click-effect]):active:not(:has(dh-button:active, button:active, a:active, input:active))::part(root) {
|
background-color: var(--md-sys-color-surface-container-high);
|
}
|
|
[dh-card][variant=filled]:not([no-click-effect]):active:not(:has(dh-button:active, button:active, a:active, input:active))::part(root) {
|
background-color: var(--md-sys-color-surface-container-highest);
|
}
|
|
[dh-card][variant=outlined]:not([no-click-effect]):active:not(:has(dh-button:active, button:active, a:active, input:active))::part(root) {
|
border-color: var(--md-sys-color-outline);
|
background-color: var(--md-sys-color-surface-container);
|
}
|
|
[dh-card][variant=elevated]::part(root) {
|
border: 1px solid var(--md-sys-color-outline-variant);
|
/* Modern: Card transparent, Body-Background scheint durch — nur Outline trennt */
|
background-color: transparent;
|
box-shadow: none;
|
}
|
|
[dh-card][variant=elevated]:not([no-click-effect]):not([no-hover-effect]):hover::part(root) {
|
background-color: var(--md-sys-color-surface-container-low);
|
}
|
|
[dh-card][variant=filled]::part(root) {
|
border: none;
|
background-color: var(--md-sys-color-surface-container-highest);
|
box-shadow: none;
|
}
|
|
[dh-card][variant=filled]:not([no-click-effect]):not([no-hover-effect]):hover::part(root) {
|
background-color: var(--md-sys-color-surface-container-high);
|
}
|
|
[dh-card][variant=outlined]::part(root) {
|
border: 1px solid var(--md-sys-color-outline-variant);
|
background-color: transparent;
|
box-shadow: none;
|
}
|
|
[dh-card][variant=outlined]:not([no-click-effect]):not([no-hover-effect]):hover::part(root) {
|
border-color: var(--md-sys-color-outline);
|
background-color: var(--md-sys-color-surface-container-low);
|
}
|
|
[dh-card][variant=floating]::part(root) {
|
border: none;
|
background-color: var(--md-sys-color-surface-container-lowest);
|
border-radius: var(--md-sys-shape-corner-medium, 12px);
|
/* MD3 Elevation Level 1: ambient + key shadow */
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
|
}
|
|
[dh-card][variant=floating]:not([no-click-effect]):not([no-hover-effect]):hover::part(root) {
|
/* Hover hebt minimal an: Elevation Level 2 */
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
|
}
|
|
[dh-card][variant=floating]:not([no-click-effect]):active:not(:has(dh-button:active, button:active, a:active, input:active))::part(root) {
|
/* Aktiv: Surface eine Stufe dunkler, Shadow gleich */
|
background-color: var(--md-sys-color-surface-container-low);
|
}
|
|
[dh-card].selected::part(root),
|
[dh-card][variant=elevated].selected::part(root),
|
[dh-card][variant=filled].selected::part(root),
|
[dh-card][variant=outlined].selected::part(root) {
|
/* outline statt border-width-Wechsel — kein Layout-Shift bei Selektion */
|
outline: 2px solid var(--md-sys-color-primary);
|
outline-offset: -2px;
|
box-shadow: none;
|
}
|
|
[dh-card].selected:not([no-click-effect]):not([no-hover-effect]):hover::part(root),
|
[dh-card][variant=elevated].selected:not([no-click-effect]):not([no-hover-effect]):hover::part(root),
|
[dh-card][variant=filled].selected:not([no-click-effect]):not([no-hover-effect]):hover::part(root),
|
[dh-card][variant=outlined].selected:not([no-click-effect]):not([no-hover-effect]):hover::part(root) {
|
background-color: var(--md-sys-color-surface-container-low);
|
}
|
|
[dh-card]::part(header) {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 1rem;
|
font-weight: 500;
|
line-height: 1.5rem;
|
letter-spacing: 0.009375rem;
|
color: var(--md-sys-color-on-surface);
|
padding-bottom: 8px;
|
}
|
|
[dh-card][headerstyle=primary]::part(header) {
|
background-color: var(--md-sys-color-primary);
|
color: var(--md-sys-color-on-primary);
|
padding: 0.5rem 1rem;
|
margin: -0.5rem -0.5rem 0.5rem;
|
border-radius: 0;
|
font-weight: 600;
|
}
|
|
[dh-card]::part(content) {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 0.875rem;
|
font-weight: 400;
|
line-height: 1.25rem;
|
letter-spacing: 0.015625rem;
|
color: var(--md-sys-color-on-surface-variant);
|
padding-bottom: 8px;
|
}
|
|
[dh-card]::part(actions) {
|
gap: 8px;
|
padding-top: 12px;
|
}
|
|
[dh-window] {
|
display: inline-block;
|
font-family: Roboto, system-ui, sans-serif;
|
}
|
|
[dh-window]::part(root) {
|
background-color: var(--md-sys-color-surface-container);
|
/* Subtile Outline + dezenter Shadow — Modal hebt sich klar vom Body ab,
|
* ohne dass der Shadow zu dramatisch wirkt (modern flat MD3). */
|
border: 1px solid var(--md-sys-color-outline-variant);
|
border-radius: 28px;
|
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12), 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
|
padding: 24px;
|
}
|
|
[dh-window] {
|
--dh-input-label-bg: var(--md-sys-color-surface-container);
|
}
|
|
[dh-window]::part(header) {
|
padding: 0 0 16px 0;
|
align-items: center;
|
}
|
|
[dh-window]::part(label) {
|
font-family: Roboto, system-ui, sans-serif;
|
font-size: 1.5rem;
|
font-weight: 400;
|
line-height: 2rem;
|
color: var(--md-sys-color-on-surface);
|
}
|
|
[dh-window]::part(trigger) {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 40px;
|
height: 40px;
|
min-width: 40px;
|
min-height: 40px;
|
border-radius: 50%;
|
padding: 0;
|
background-color: transparent;
|
border: none;
|
box-shadow: none;
|
cursor: pointer;
|
transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
|
}
|
|
[dh-window]::part(trigger):hover {
|
background-color: rgba(var(--md-sys-color-on-surface-variant-rgb, var(--md-sys-color-on-surface-rgb)), 0.08);
|
}
|
|
[dh-window]::part(trigger):focus-within {
|
background-color: rgba(var(--md-sys-color-on-surface-variant-rgb, var(--md-sys-color-on-surface-rgb)), 0.12);
|
outline: none;
|
}
|
|
[dh-window]::part(trigger):active {
|
background-color: rgba(var(--md-sys-color-on-surface-variant-rgb, var(--md-sys-color-on-surface-rgb)), 0.12);
|
}
|
|
[dh-window]::part(close-icon) {
|
font-size: 24px;
|
width: 24px;
|
height: 24px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
opacity: 0.7;
|
transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
|
color: var(--md-sys-color-on-surface-variant);
|
}
|
|
[dh-window]:hover::part(close-icon) {
|
opacity: 1;
|
}
|
|
[dh-window]::part(content) {
|
padding: 0;
|
font-size: 0.875rem;
|
font-weight: 400;
|
line-height: 1.25rem;
|
color: var(--md-sys-color-on-surface-variant);
|
}
|
|
/*# sourceMappingURL=index.css.map */
|
body, html {
|
width: 100vw;
|
height: 100vh;
|
padding: 0;
|
margin: 0;
|
overflow: hidden;
|
}
|
|
html {
|
font-size: 16px;
|
font-style: normal;
|
-webkit-font-smoothing: antialiased;
|
-webkit-text-stroke-width: 0.2px;
|
-moz-osx-font-smoothing: grayscale;
|
}
|
|
* {
|
box-sizing: border-box;
|
}
|
|
::-webkit-scrollbar {
|
width: 12px;
|
height: 12px;
|
}
|
|
::-webkit-scrollbar-track {
|
background: rgba(0, 0, 0, 0.1);
|
}
|
|
::-webkit-scrollbar-thumb {
|
background: rgba(0, 0, 0, 0.5);
|
}
|
|
.hidden {
|
z-index: 0 !important;
|
display: none !important;
|
}
|
|
#iframe-drag-image {
|
position: absolute;
|
z-index: 9999;
|
}
|
#iframe-drag-image.wide {
|
width: 96px;
|
height: auto;
|
}
|
#iframe-drag-image.high {
|
width: auto;
|
height: 96px;
|
}
|
#iframe-drag-image.hidden {
|
display: none;
|
}
|
|
@font-face {
|
font-family: "Roboto";
|
src: url("/webui/t/baukasten/assets/WOy3sDCz.ttf") format("truetype");
|
font-weight: 100 900;
|
font-display: swap;
|
}
|
@font-face {
|
font-family: "NewParisKingSizeRegular";
|
font-style: normal;
|
font-weight: 400;
|
font-display: swap;
|
src: url("/webui/t/baukasten/assets/DGJFAuWK.otf");
|
}
|
@font-face {
|
font-family: "Futura";
|
font-style: normal;
|
font-weight: 400;
|
font-display: swap;
|
src: url("/webui/t/baukasten/assets/BW5KYxKr.otf");
|
}
|
@font-face {
|
font-family: "MullerRegular";
|
font-style: normal;
|
font-weight: 400;
|
font-display: swap;
|
src: url("/webui/t/baukasten/assets/ByawElgZ.otf");
|
}
|
/* Fonts made from http://www.onlinewebfonts.com is licensed by CC BY 3.0 */
|
@font-face {
|
font-family: "Maax Bold";
|
font-display: swap;
|
src: url("/webui/t/baukasten/assets/B3ufvq-Y.woff2") format("woff2"), url("/webui/t/baukasten/assets/BWi4uJsZ.woff") format("woff"), url("/webui/t/baukasten/assets/DAOVVG_i.ttf") format("truetype");
|
}
|
/* Fonts made from http://www.onlinewebfonts.com is licensed by CC BY 3.0 */
|
@font-face {
|
font-family: "Maax Regular";
|
font-display: swap;
|
src: url("/webui/t/baukasten/assets/UpXaRE2k.woff2") format("woff2"), url("/webui/t/baukasten/assets/D-WnySK6.woff") format("woff"), url("/webui/t/baukasten/assets/V6QrxJAu.ttf") format("truetype");
|
}/*$vite$:1*/
|
