/* * liquid-glass.css — Dnet.Blazor theme * * A material theme: translucent containers that blur and saturate what is * behind them, with a bright rim and a soft top sheen. Only custom properties: * no component rules, no !important. * * Load it AFTER dnet-blazor-styles.css and activate it with * document.documentElement.dataset.dnetTheme = "liquid-glass"; * or scope it with , which also carries it * into dialogs, popups and other overlays. * * The dark variant is a theme of its own, liquid-glass-dark.css, so that its * name travels through OverlayConfig.ThemeScope like any other theme. * * Replace the app background by redefining --dnet-sys-canvas (any valid * `background` value). Text tokens, material fills and canvas stops stay as * literals: `npm run check:contrast` reads them to verify WCAG AA. */ [data-dnet-theme="liquid-glass"] { /* ---------------------------------------------------------- surfaces */ /* Still opaque: surface is the colour other parts are cut out against (focus-ring gaps, checkmarks, inverse text). Containers use materials. */ --dnet-sys-surface: #ffffff; --dnet-sys-surface-raised: #ffffff; --dnet-sys-surface-hover: #f1f3f8; --dnet-sys-surface-variant: #e6e9f0; --dnet-sys-surface-inverse: #0d1220; /* -------------------------------------------------------------- text */ --dnet-sys-on-surface: #0d1220; --dnet-sys-on-surface-emphasis: #0d1220; --dnet-sys-on-surface-muted: #394055; --dnet-sys-on-surface-subtle: #4f576d; /* ------------------------------------------------------------ accent */ --dnet-sys-primary: #2563eb; --dnet-sys-primary-strong: #1d4ed8; --dnet-sys-primary-emphasis: #1e40af; --dnet-sys-primary-content: #1947ae; --dnet-sys-on-primary: #ffffff; --dnet-sys-danger: #a3150c; /* --------------------------------------------------- borders, states */ --dnet-sys-border: rgb(13 18 32 / .09); --dnet-sys-border-strong: rgb(13 18 32 / .18); --dnet-sys-state-selected: rgb(37 99 235 / .14); --dnet-sys-focus-ring: #2563eb; /* Restated so they resolve against this theme inside a DnetThemeScope. */ --dnet-sys-state-hover: color-mix(in srgb, var(--dnet-sys-on-surface) 8%, transparent); --dnet-sys-state-pressed: color-mix(in srgb, var(--dnet-sys-on-surface) 14%, transparent); --dnet-sys-state-disabled-fg: color-mix(in srgb, var(--dnet-sys-on-surface) 38%, transparent); /* ------------------------------------------------------------- shape */ --dnet-sys-radius-sm: 10px; --dnet-sys-radius-md: 14px; --dnet-sys-radius-lg: 20px; /* --------------------------------------------------------- elevation */ /* Diffuse: the rim and the blur carry the edge, the shadow only lifts. */ --dnet-sys-shadow-color: rgb(22 31 61 / .10); --dnet-sys-scrim: rgb(13 18 32 / .28); --dnet-sys-elevation-1: 0 1px 2px rgb(22 31 61 / .06), 0 4px 12px rgb(22 31 61 / .06); --dnet-sys-elevation-2: 0 1px 2px rgb(22 31 61 / .06), 0 14px 44px rgb(22 31 61 / .10); --dnet-sys-elevation-3: 0 2px 6px rgb(22 31 61 / .10), 0 24px 64px rgb(22 31 61 / .22); --dnet-sys-elevation-4: 0 4px 10px rgb(22 31 61 / .10), 0 32px 80px rgb(22 31 61 / .24); --dnet-sys-elevation-5: 0 6px 14px rgb(22 31 61 / .12), 0 40px 96px rgb(22 31 61 / .28); /* ------------------------------------------------ typography, motion */ /* No webfonts: the system font on Apple platforms, Inter when the app loads it, the OS font otherwise. */ --dnet-sys-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --dnet-sys-text-xs: 0.6875rem; --dnet-sys-text-sm: 0.8125rem; --dnet-sys-motion-fast: 160ms; --dnet-sys-motion-normal: 240ms; --dnet-sys-motion-ease: cubic-bezier(0.32, 0.72, 0, 1); /* --------------------------------------------------------- materials */ --dnet-sys-canvas: radial-gradient(60% 50% at 8% 0%, #80c3ff 0%, transparent 70%), radial-gradient(50% 45% at 96% 4%, #ffb39e 0%, transparent 70%), radial-gradient(45% 40% at 4% 62%, #8ae7c7 0%, transparent 70%), radial-gradient(55% 45% at 96% 74%, #c3a5f9 0%, transparent 70%), radial-gradient(40% 35% at 50% 100%, #f6e193 0%, transparent 70%), #e8ecf4; --dnet-sys-material-page: transparent; --dnet-sys-material-chrome: rgb(255 255 255 / .36); --dnet-sys-material-card: rgb(255 255 255 / .50); --dnet-sys-material-popup: rgb(250 251 255 / .86); --dnet-sys-material-control: rgb(255 255 255 / .62); --dnet-sys-material-ghost: rgb(255 255 255 / .62); --dnet-sys-material-backdrop: blur(28px) saturate(170%); --dnet-sys-material-highlight: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(255 255 255 / .35), inset 0 0 0 1px rgb(255 255 255 / .42); --dnet-sys-material-sheen: linear-gradient(180deg, rgb(255 255 255 / .5), rgb(255 255 255 / 0) 44%); --dnet-sys-scrim-backdrop: blur(6px) saturate(120%); /* Accent fills (filled buttons): a softer sheen, a top light and a bottom shade, and a glow in the accent colour. White text keeps AA at the label. */ --dnet-sys-material-accent-sheen: linear-gradient(180deg, rgb(255 255 255 / .2), rgb(255 255 255 / 0) 55%); /* Accent glass carries a 1px border of the accent a little lighter than its fill, the same step the white rim makes on white glass. It sits on the edge (an outer ring), so no fill shows outside it. */ --dnet-sys-material-accent-highlight: 0 0 0 1px color-mix(in srgb, var(--dnet-sys-primary) 78%, white), 0 10px 28px rgb(37 99 235 / .38); --dnet-sys-material-ghost-elevation: 0 4px 16px rgb(16 24 48 / .08); --dnet-sys-material-focus: 0 0 0 1.5px #2563eb, 0 0 0 5px rgb(37 99 235 / .26); /* Checkbox and radio faces: a tight shadow under the rim. */ --dnet-sys-material-lift: 0 1px 2px rgb(16 24 48 / .08), 0 3px 10px rgb(16 24 48 / .10); /* Slide toggle track: a recessed well with an inner shadow, a faint 1px rim and a light lip below. */ --dnet-sys-material-well-shadow: inset 0 1px 3px rgb(13 18 32 / .18), inset 0 0 0 1px rgb(13 18 32 / .10), 0 1px 0 rgb(255 255 255 / .8); /* ------------------------------------------------- component tokens */ /* Glass has no outlines: outlined buttons are ghost pills and fields are defined by their rim. Hints are quieter, field icons take the accent, and the clear action is a soft chip. */ --dnet-btn-border-color: var(--dnet-sys-transparent); --dnet-form-field-radius: 16px; --dnet-form-field-hint-color: var(--dnet-sys-on-surface-subtle); --dnet-form-field-clear-icon: url("data:image/svg+xml,"); --dnet-calendar-icon-color: var(--dnet-sys-primary-content); --dnet-timepicker-icon-color: var(--dnet-sys-primary-content); /* Checkbox and radio button: pure glass faces that stay glass when checked; the mark and the dot take the accent. No border: the rim and the lift draw the edge, so an empty box is below 3:1 against the card (author's decision; the gate reports it). */ --dnet-checkbox-size: 20px; --dnet-checkbox-border-radius: 6px; --dnet-checkbox-background: var(--dnet-sys-transparent); --dnet-checkbox-checkmark-path: var(--dnet-sys-primary); --dnet-checkbox-border-color: var(--dnet-sys-transparent); --dnet-radio-button-background: var(--dnet-sys-primary); --dnet-radio-button-border-color: var(--dnet-sys-transparent); --dnet-radio-button-checked-border-color: var(--dnet-sys-transparent); --dnet-radio-button-disabled-border-color: var(--dnet-sys-transparent); /* Grid: a glass card whose rows are cards of their own, in the control material, spaced like a dialog: the header text, the rows and the paginator's buttons sit 24px from the edges. The header row's own height already puts its text 22px down and the paginator's band leaves 9px under the buttons, inside a 1px border. The header sits on the glass, without fills or separators. */ --dnet-grid-radius: var(--dnet-sys-radius-lg); --dnet-grid-padding: 1px 23px 14px; --dnet-grid-row-gap: 8px; --dnet-grid-row-radius: var(--dnet-sys-radius-sm); /* The rows' outline is the glass rim of buttons and containers: a single 1px line, as --dnet-sys-material-highlight draws it. The border stays transparent; the top and bottom lines carry the ring and the highlight together (ring .42 over .95 on top, over .35 at the bottom). */ --dnet-grid-row-border: 1px solid var(--dnet-sys-transparent); --dnet-grid-row-highlight: inset 0 1px 0 rgb(255 255 255 / .97), inset 0 -1px 0 rgb(255 255 255 / .62); --dnet-grid-cell-default-background-color: var(--dnet-sys-material-control); --dnet-grid-hover-color: rgb(255 255 255 / .9); --dnet-grid-clicked-color: color-mix(in srgb, var(--dnet-sys-primary) 10%, var(--dnet-sys-material-control)); --dnet-grid-selected-color: color-mix(in srgb, var(--dnet-sys-primary) 16%, var(--dnet-sys-material-control)); --dnet-grid-headercell-default-background-color: var(--dnet-sys-transparent); --dnet-grid-border-color: var(--dnet-sys-transparent); --dnet-grid-header-foreground-color: var(--dnet-sys-on-surface-muted); /* Grid selection checkboxes: the same glass face as Checkbox. */ --dnet-grid-checkbox-size: var(--dnet-checkbox-size); --dnet-grid-checkbox-radius: var(--dnet-checkbox-border-radius); --dnet-grid-checkbox-border-color: var(--dnet-checkbox-border-color); --dnet-grid-checkbox-background: var(--dnet-sys-material-ghost); --dnet-grid-checkbox-background-checked: var(--dnet-sys-material-ghost); --dnet-grid-checkbox-mark-color: var(--dnet-checkbox-checkmark-path); /* Checkbox's tick: the same stroke across the whole box. */ --dnet-grid-checkbox-mark-size: var(--dnet-checkbox-size); --dnet-grid-checkbox-mark-image: url("data:image/svg+xml,"); /* Chips: glass like the buttons, keeping their own corners. Unselected chips are ghost glass; a selected chip takes the accent fill. */ --dnet-chips-background: var(--dnet-sys-material-ghost); --dnet-chips-background-hover: color-mix(in srgb, var(--dnet-sys-primary) 8%, var(--dnet-sys-material-ghost)); --dnet-chips-background-selected: var(--dnet-sys-primary); /* Slide toggle, standard (option A, "Gota azul"): off, the track is a recessed glass well; on, it fills with the accent. The handle is a white glass bead inside the track, without icons. Keyboard focus outlines the whole control, with no halo on hover or focus. */ --dnet-slide-toggle-handle-size: 26px; --dnet-slide-toggle-track-border-width: 0px; --dnet-slide-toggle-track-background: linear-gradient(180deg, rgb(13 18 32 / .13), rgb(13 18 32 / .06)); --dnet-slide-toggle-track-background-checked: linear-gradient(180deg, rgb(255 255 255 / .24), rgb(255 255 255 / 0) 55%), var(--dnet-sys-primary); --dnet-slide-toggle-track-shadow-checked: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -1px 2px rgb(0 0 0 / .14), 0 2px 10px color-mix(in srgb, var(--dnet-sys-primary) 35%, transparent); --dnet-slide-toggle-handle-background: radial-gradient(circle at 35% 25%, #ffffff 0 32%, #f3f5fa 62%, #e2e7f0 100%); --dnet-slide-toggle-handle-background-checked: radial-gradient(circle at 35% 25%, #ffffff 0 32%, #f3f5fa 62%, #e2e7f0 100%); --dnet-slide-toggle-handle-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 1px rgb(16 24 48 / .06), 0 0 0 .5px rgb(16 24 48 / .12), 0 2px 6px rgb(16 24 48 / .22); --dnet-slide-toggle-icon-color: var(--dnet-sys-transparent); --dnet-slide-toggle-halo-size: 0px; --dnet-slide-toggle-focus-outline: 0 0 0 2px rgb(255 255 255 / .92), 0 0 0 4px var(--dnet-sys-primary); --dnet-slide-toggle-disabled-opacity: .45; /* Slide toggle, Lens variant (option C, "Cristal tintado y lente"): off, the track is the glass of a checkbox face; on, translucent accent glass. The handle is a clear lens 4px taller than the track. */ --dnet-slide-toggle-lens-track-height: 28px; --dnet-slide-toggle-lens-handle-size: 32px; --dnet-slide-toggle-lens-track-background: linear-gradient(180deg, rgb(255 255 255 / .45), rgb(255 255 255 / 0) 45%), rgb(255 255 255 / .62); --dnet-slide-toggle-lens-track-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px rgb(255 255 255 / .4), 0 1px 2px rgb(16 24 48 / .08), 0 3px 10px rgb(16 24 48 / .10); --dnet-slide-toggle-lens-track-background-checked: linear-gradient(180deg, rgb(255 255 255 / .32), rgb(255 255 255 / 0) 55%), color-mix(in srgb, var(--dnet-sys-primary) 62%, transparent); --dnet-slide-toggle-lens-track-shadow-checked: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 0 0 1px color-mix(in srgb, var(--dnet-sys-primary) 45%, transparent), 0 2px 12px color-mix(in srgb, var(--dnet-sys-primary) 35%, transparent); --dnet-slide-toggle-lens-handle-background: radial-gradient(circle at 50% 115%, rgb(255 255 255 / .6), rgb(255 255 255 / .06) 62%), rgb(255 255 255 / .16); --dnet-slide-toggle-lens-handle-shadow: inset 0 1.5px 1px rgb(255 255 255 / .95), inset 0 -1px 2px rgb(255 255 255 / .55), inset 0 0 0 1px rgb(255 255 255 / .55), 0 0 0 .5px rgb(16 24 48 / .2), 0 3px 10px rgb(16 24 48 / .22); --dnet-slide-toggle-lens-handle-backdrop: blur(1.5px) brightness(1.1) saturate(1.6); /* Steppers: glass beads (option C of the reference design) on the stepper's own layout, label beside the bead and the thin lines between steps, as in the vertical stepper. The current step is a larger accent drop; completed steps show the accent tick instead of their number. The margin leaves room for the drop's halo inside the DynamicStepper's clipping row and keeps it off the label. */ --dnet-step-font-size: 13px; --dnet-step-icon-margin: 7px 12px 7px 7px; /* Labels take their own width, and each line keeps the bead's leading 7px on both ends: the same space after every label and before every bead, whatever the label's length. */ --dnet-step-label-min-width: 0px; --dnet-step-line-gap: 7px; --dnet-step-icon-font-size: 13px; --dnet-step-icon-font-weight: 700; --dnet-step-icon-background: radial-gradient(circle at 35% 25%, #ffffff 0 32%, #f3f5fa 62%, #e2e7f0 100%); --dnet-step-icon-color: #4b5368; --dnet-step-icon-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 1px rgb(16 24 48 / .06), 0 0 0 .5px rgb(16 24 48 / .12), 0 2px 6px rgb(16 24 48 / .18); --dnet-step-icon-background-done: url("data:image/svg+xml,") center / 12px 12px no-repeat, radial-gradient(circle at 35% 25%, #ffffff 0 32%, #f3f5fa 62%, #e2e7f0 100%); --dnet-step-icon-background-current: radial-gradient(120% 80% at 30% 10%, rgb(255 255 255 / .5), transparent 52%), linear-gradient(180deg, color-mix(in oklab, var(--dnet-sys-primary) 74%, #ffffff), var(--dnet-sys-primary) 55%, color-mix(in oklab, var(--dnet-sys-primary) 84%, #000000)); --dnet-step-icon-shadow-current: inset 0 1px 0 rgb(255 255 255 / .5), 0 4px 14px color-mix(in srgb, var(--dnet-sys-primary) 40%, transparent), 0 0 0 4px color-mix(in srgb, var(--dnet-sys-primary) 16%, transparent); --dnet-step-icon-scale-current: 1.2; --dnet-step-label-weight: 500; --dnet-step-label-weight-current: 650; --dnet-step-label-color-upcoming: var(--dnet-sys-on-surface-muted); /* Timeline (option A, "Tarjetas de cristal"): each event is a glass card; the current one takes an accent tint, ring and glow, and pending ones are a dashed outline. The markers are glass dots that the line runs under, centred on the card's title: completed ones are beads with the accent tick, the current one an accent drop with a white core. */ --dnet-timeline-gap: 18px; --dnet-timeline-content-gap: 19px; --dnet-timeline-title-font-size: 15px; --dnet-timeline-font-size: 13.5px; --dnet-timeline-muted-foreground: #4b5368; --dnet-timeline-line-color: rgb(13 18 32 / .18); --dnet-timeline-line-inset: -11px; --dnet-timeline-line-completed: linear-gradient(180deg, var(--dnet-sys-primary), color-mix(in srgb, var(--dnet-sys-primary) 75%, transparent)); --dnet-timeline-bullet-size: 22px; --dnet-timeline-bullet-offset: 11px; --dnet-timeline-bullet-border-width: 0px; --dnet-timeline-bullet-background: var(--dnet-sys-material-sheen), rgb(255 255 255 / .62); --dnet-timeline-bullet-shadow: var(--dnet-sys-material-highlight), inset 0 0 0 1.5px rgb(13 18 32 / .18), var(--dnet-sys-material-lift); --dnet-timeline-accent-foreground: var(--dnet-sys-transparent); --dnet-timeline-bullet-background-completed: url("data:image/svg+xml,") center / 12px 12px no-repeat, radial-gradient(circle at 35% 25%, #ffffff 0 32%, #f3f5fa 62%, #e2e7f0 100%); --dnet-timeline-bullet-shadow-completed: inset 0 1px 0 #ffffff, inset 0 -1px 1px rgb(16 24 48 / .06), 0 0 0 .5px rgb(16 24 48 / .12), 0 2px 6px rgb(16 24 48 / .18); --dnet-timeline-bullet-background-current: radial-gradient(120% 80% at 30% 10%, rgb(255 255 255 / .5), transparent 52%), linear-gradient(180deg, color-mix(in oklab, var(--dnet-sys-primary) 74%, #ffffff), var(--dnet-sys-primary) 55%, color-mix(in oklab, var(--dnet-sys-primary) 84%, #000000)); --dnet-timeline-bullet-shadow-current: inset 0 1px 0 rgb(255 255 255 / .5), 0 4px 12px color-mix(in srgb, var(--dnet-sys-primary) 40%, transparent), 0 0 0 4px color-mix(in srgb, var(--dnet-sys-primary) 16%, transparent); --dnet-timeline-current-foreground: #ffffff; --dnet-timeline-content-padding: 11px 14px 12px; --dnet-timeline-content-radius: 16px; --dnet-timeline-content-border-width: 1px; --dnet-timeline-content-background: rgb(255 255 255 / .62); --dnet-timeline-content-background-current: color-mix(in srgb, var(--dnet-sys-primary) 11%, rgb(255 255 255 / .62)); --dnet-timeline-content-shadow-current: inset 0 0 0 1.5px color-mix(in srgb, var(--dnet-sys-primary) 45%, transparent), 0 6px 20px color-mix(in srgb, var(--dnet-sys-primary) 18%, transparent); /* Toast: liquid glass like the cards, so the page shows through blurred. Its actions are the theme's outlined buttons, ghost glass pills with the accent label and no outline. The progress bar stops 5px short of where the corners start to curve. */ --dnet-toast-bg: var(--dnet-sys-material-card); --dnet-toast-action-foreground: var(--dnet-sys-primary-content); --dnet-toast-action-border-color: var(--dnet-sys-transparent); --dnet-toast-progress-inset: calc(var(--dnet-sys-radius-lg) - var(--dnet-sys-border-width) + 5px); /* Dialog: liquid glass like the cards, spaced as Material 3's basic dialog: 24px around, 16px between title and body. The bottom 24px sit inside the scrolling content, so buttons at the end keep their rim and glow. Its close button is the theme's round icon button: a ghost glass pill with the rim and a soft lift, 36px across like the image editor's tools. */ --dnet-dialog-background: var(--dnet-sys-material-card); --dnet-dialog-padding-top-bottom: 24px; --dnet-dialog-padding-bottom: 0px; --dnet-dialog-content-padding-bottom: 24px; --dnet-dialog-header-margin-bottom: 16px; --dnet-dialog-close-padding: 6px; --dnet-dialog-close-radius: var(--dnet-sys-radius-pill); --dnet-dialog-close-background: var(--dnet-sys-material-sheen), var(--dnet-sys-material-ghost); --dnet-dialog-close-background-hover: var(--dnet-sys-material-sheen), color-mix(in srgb, var(--dnet-sys-primary-content) 10%, var(--dnet-sys-material-ghost)); --dnet-dialog-close-shadow: var(--dnet-sys-material-highlight), var(--dnet-sys-material-ghost-elevation); /* Image editor: no line over the buttons, and 24px between the editor and them (the editor's 16px gap plus 8px), as Material 3 spaces body and actions. */ --dnet-image-editor-footer-border-width: 0px; --dnet-image-editor-footer-padding-top: 8px; /* Its zoom group keeps the same 4px all around its round buttons, inside pill corners that follow them. */ --dnet-image-editor-zoom-padding: 4px; --dnet-image-editor-zoom-radius: var(--dnet-sys-radius-pill); /* Select: its dropdown is glass like dialogs and spaced like them: 24px around, the list's text in line with the title and 16px under it, and the round close button 18px from the corner. The panel has a 1px border, so each space is 1px less inside it. */ --dnet-select-panel-background: var(--dnet-sys-material-card); --dnet-select-panel-header-padding: 23px 23px 0; --dnet-select-panel-header-height: auto; --dnet-select-panel-header-gap: 16px; --dnet-select-panel-list-padding: 11px; --dnet-select-panel-padding-bottom: 23px; --dnet-select-panel-close-padding: 6px; --dnet-select-panel-close-radius: var(--dnet-sys-radius-pill); --dnet-select-panel-close-background: var(--dnet-sys-material-sheen), var(--dnet-sys-material-ghost); --dnet-select-panel-close-background-hover: var(--dnet-sys-material-sheen), color-mix(in srgb, var(--dnet-sys-primary-content) 10%, var(--dnet-sys-material-ghost)); --dnet-select-panel-close-shadow: var(--dnet-sys-material-highlight), var(--dnet-sys-material-ghost-elevation); /* Autocomplete: its dropdown is the Select's, glass and spaced like a dialog, with the same 1px less inside its border. */ --dnet-autocomplete-panel-background: var(--dnet-sys-material-card); --dnet-autocomplete-panel-header-padding: 23px 23px 0; --dnet-autocomplete-panel-header-height: auto; --dnet-autocomplete-panel-header-gap: 16px; --dnet-autocomplete-panel-list-padding: 11px; --dnet-autocomplete-panel-padding-bottom: 23px; --dnet-autocomplete-panel-close-padding: 6px; --dnet-autocomplete-panel-close-radius: var(--dnet-sys-radius-pill); --dnet-autocomplete-panel-close-background: var(--dnet-sys-material-sheen), var(--dnet-sys-material-ghost); --dnet-autocomplete-panel-close-background-hover: var(--dnet-sys-material-sheen), color-mix(in srgb, var(--dnet-sys-primary-content) 10%, var(--dnet-sys-material-ghost)); --dnet-autocomplete-panel-close-shadow: var(--dnet-sys-material-highlight), var(--dnet-sys-material-ghost-elevation); /* Date picker, time picker and connected panel: their popups are glass like dialogs. The time picker's touch header no longer adds a second layer of fill. Calendars shown in the page keep their own fill. */ --dnet-datepicker-panel-background: var(--dnet-sys-material-card); /* Its popup is spaced like a dialog: the header's controls and the buttons 24px from the edges (20px here plus the header's own 4px), 24px between the days and the buttons (the calendar keeps 16px under its last row, so 4px here and 4px over the buttons), 8px between buttons, and the buttons at the theme's normal size. */ --dnet-datepicker-panel-padding: 20px 20px 4px; --dnet-datepicker-panel-footer-padding: 4px 24px 24px; --dnet-datepicker-panel-footer-gap: 8px; --dnet-datepicker-button-height: 40px; --dnet-datepicker-button-padding: 0 16px; --dnet-datepicker-button-icon-gap: 8px; --dnet-timepicker-panel-background: var(--dnet-sys-material-card); --dnet-timepicker-panel-header-background: var(--dnet-sys-transparent); /* Its panel is spaced like a dialog: the options' text 24px from the edges (rows inset 12px) with 24px above and below the list, and in the touch panel the title 24px in with 16px under it, 24px between the list and the button, the button 24px from the corner at the theme's normal size. */ --dnet-timepicker-panel-options-padding: 24px 12px; --dnet-timepicker-panel-touch-options-padding: 0 12px; --dnet-timepicker-panel-header-padding: 24px 24px 16px; --dnet-timepicker-panel-actions-padding: 24px; --dnet-timepicker-button-height: 40px; --dnet-timepicker-button-padding: 0 16px; --dnet-timepicker-button-icon-gap: 8px; --dnet-connected-panel-background: var(--dnet-sys-material-card); /* Floating double list: its panel is glass and spaced like a dialog. The round close button sits 18px from the corner, the lists' content 24px from the sides (the panel's 2px, 1px here and each list's own 21px), and the header row takes 49px of the 50px left above the lists, so their content also ends 24px from the bottom. */ --dnet-floating-double-list-panel-background: var(--dnet-sys-material-card); --dnet-floating-double-list-header-padding: 22px 22px 3px; --dnet-floating-double-list-lists-padding: 1px; --dnet-floating-double-list-close-padding: 6px; --dnet-floating-double-list-close-radius: var(--dnet-sys-radius-pill); --dnet-floating-double-list-close-background: var(--dnet-sys-material-sheen), var(--dnet-sys-material-ghost); --dnet-floating-double-list-close-background-hover: var(--dnet-sys-material-sheen), color-mix(in srgb, var(--dnet-sys-primary-content) 10%, var(--dnet-sys-material-ghost)); --dnet-floating-double-list-close-shadow: var(--dnet-sys-material-highlight), var(--dnet-sys-material-ghost-elevation); /* PickList: a glass panel like the cards, with the rim instead of a border, and spaced like a dialog: 24px around its content (23px inside its transparent 1px border) and 16px between its sections. */ --dnet-picklist-background: var(--dnet-sys-material-sheen), var(--dnet-sys-material-card); --dnet-picklist-border: var(--dnet-sys-transparent); --dnet-picklist-shadow: var(--dnet-sys-material-highlight); --dnet-picklist-padding: 23px; --dnet-picklist-gap: 16px; /* Its toolbar and footer are only as tall as their content, so the buttons sit 16px from the search and the rows, and the paginator 24px above the bottom of the panel. Its paginator is laid out as the list's, below, and its glass buttons keep their shadow and focus halo at the footer's edges. */ --dnet-picklist-header-height: 0px; --dnet-picklist-footer-height: 0px; --dnet-picklist-footer-overflow: visible; /* List: a standalone list is a glass panel like the PickList, with the rim instead of a border, 24px around its content (23px inside its transparent 1px border) and 16px between its sections. Lists inside the floating double list keep their own spacing. */ --dnet-list-panel-background: var(--dnet-sys-material-sheen), var(--dnet-sys-material-card); --dnet-list-panel-border: var(--dnet-sys-transparent); --dnet-list-panel-shadow: var(--dnet-sys-material-highlight); --dnet-list-panel-padding: 23px; --dnet-list-panel-gap: 16px; /* Its paginator lies on one line like the grid's, the range at the start, with nothing under it but the panel's padding; where the panel is too narrow it wraps instead, and on a phone only the controls stay. The pick list's paginator follows these too. */ --dnet-list-paginator-range-basis: auto; --dnet-list-paginator-range-order: -1; --dnet-list-paginator-range-compact-display: none; --dnet-list-footer-height: 0px; /* Expansion panel: separate glass cards, 8px apart and rounded on every corner, with taller rows, a bolder title over a 12px description and a sheen under the pointer that fades out before the row ends. The chevron sits in a round glass button, 16px from the card's edge like from its top and bottom, that stays still while only the chevron turns; once the panel is open the button is the accent drop with a white chevron, and the card lifts. Its content ends 24px from the bottom. With keyboard focus the button takes the focus ring, and on a disabled panel it fades. */ --dnet-accordion-gap: 8px; --dnet-accordion-border-radius: var(--dnet-sys-radius-lg); --dnet-accordion-joined-radius: var(--dnet-sys-radius-lg); --dnet-accordion-box-shadow-expanded: var(--dnet-sys-elevation-2); --dnet-accordion-header-padding: 0 16px 0 24px; --dnet-accordion-header-height: 64px; --dnet-accordion-header-hover-background: linear-gradient(180deg, rgb(255 255 255 / .5), rgb(255 255 255 / 0)); --dnet-accordion-title-font-weight: 600; --dnet-accordion-description-font-size: 12px; --dnet-accordion-indicator-padding: 12px; --dnet-accordion-indicator-radius: var(--dnet-sys-radius-pill); --dnet-accordion-indicator-background: var(--dnet-sys-material-sheen), var(--dnet-sys-material-ghost); --dnet-accordion-indicator-shadow: var(--dnet-sys-material-highlight), var(--dnet-sys-material-ghost-elevation); --dnet-accordion-indicator-background-expanded: radial-gradient(120% 80% at 30% 10%, rgb(255 255 255 / .5), transparent 52%), linear-gradient(180deg, color-mix(in oklab, var(--dnet-sys-primary) 74%, #ffffff), var(--dnet-sys-primary) 55%, color-mix(in oklab, var(--dnet-sys-primary) 84%, #000000)); --dnet-accordion-indicator-shadow-expanded: inset 0 1px 0 rgb(255 255 255 / .5), 0 4px 14px color-mix(in srgb, var(--dnet-sys-primary) 40%, transparent); --dnet-accordion-indicator-color-expanded: #ffffff; --dnet-accordion-indicator-rotate-expanded: none; --dnet-accordion-chevron-rotate-expanded: 180deg; --dnet-accordion-chevron-offset: -1.5px; --dnet-accordion-indicator-focus-outline: 2px solid var(--dnet-sys-focus-ring); --dnet-accordion-indicator-disabled-opacity: .45; --dnet-accordion-indicator-transition: rotate var(--dnet-sys-motion-normal) var(--dnet-sys-motion-ease), color var(--dnet-sys-motion-fast) ease, box-shadow var(--dnet-sys-motion-fast) ease; --dnet-accordion-body-padding: 0 24px 24px; /* Tabs: a glass panel like the cards, with the rim, 24px around its content and 16px between the tab row and the view. The labels stay subtle and the active one reads in the accent at full strength over its line; a ghost glass lens shows under the pointer, and the focus halo with keyboard focus. The arrows are round ghost glass buttons. */ --dnet-tabs-background: var(--dnet-sys-material-sheen), var(--dnet-sys-material-card); --dnet-tabs-shadow: var(--dnet-sys-material-highlight); --dnet-tabs-radius: var(--dnet-sys-radius-lg); --dnet-tabs-padding: 24px; --dnet-tabs-gap: 16px; --dnet-tabs-active-foreground: var(--dnet-sys-primary-content); --dnet-tabs-active-opacity: 1; --dnet-tabs-label-hover-background: var(--dnet-sys-material-sheen), var(--dnet-sys-material-ghost); --dnet-tabs-pagination-size: 32px; /* PillTabs: the track stays glass. The selected tab is glossy accent like the filled buttons, the others raise a ghost glass lens under the pointer, tinted like the round buttons' hover, and the counters are the reference design's chips. The tabs are 40px tall like the theme's buttons. */ --dnet-pill-tabs-selected-background: var(--dnet-sys-material-accent-sheen), var(--dnet-sys-primary); --dnet-pill-tabs-hover-background: var(--dnet-sys-material-sheen), color-mix(in srgb, var(--dnet-sys-primary-content) 10%, var(--dnet-sys-material-ghost)); --dnet-pill-tabs-badge-background: rgb(13 18 32 / .10); --dnet-pill-tabs-tab-height: 40px; /* Grid filter panel: glass like the other panels and spaced like a dialog, 24px around its content and 16px between the fields, which each field's own bottom margin already gives. Its buttons take the theme's normal size, and on desktop the page behind it is dimmed and blurred like on narrower screens, so the panel reads as glass there too. */ --dnet-grid-filter-background: var(--dnet-sys-material-sheen), var(--dnet-sys-material-card); --dnet-grid-filter-padding: 24px; --dnet-grid-filter-gap: 0px; --dnet-grid-filter-button-height: 40px; --dnet-grid-filter-button-padding: 0 16px; --dnet-grid-filter-scrim: var(--dnet-sys-scrim); --dnet-grid-filter-scrim-backdrop: var(--dnet-sys-scrim-backdrop); /* Paginator: the arrows are the theme's round glass buttons, 32px like the dialogs' close button and 6px apart, with the accent tint under the pointer; the page sits in a rounded glass well; and the range comes onto the same line, at the far left of the footer. */ --dnet-icon-button-size: 32px; --dnet-paginator-controls-gap: 6px; --dnet-paginator-padding: 0px; --dnet-paginator-button-hover-background: color-mix(in srgb, var(--dnet-sys-primary-content) 10%, var(--dnet-sys-material-ghost)); --dnet-paginator-input-background: var(--dnet-sys-material-control); --dnet-paginator-input-border-color: var(--dnet-sys-transparent); --dnet-paginator-input-radius: var(--dnet-sys-radius-pill); --dnet-paginator-input-width: 44px; --dnet-paginator-input-height: 32px; --dnet-paginator-input-margin: 0 5px; --dnet-paginator-rows: auto; --dnet-paginator-columns: 1fr auto auto; --dnet-paginator-width: 100%; --dnet-paginator-range-area: 1 / 1 / 2 / 2; --dnet-paginator-range-justify: flex-start; --dnet-paginator-range-font-size: 0.75rem; /* Tooltip: the menus' popup glass, frosted, with the sheen, the rim of light and the panels' soft shadow, and the text in the page's ink. The arrow takes the same fill. */ --dnet-tooltip-background: var(--dnet-sys-material-sheen), var(--dnet-sys-material-popup); --dnet-tooltip-foreground: var(--dnet-sys-on-surface); --dnet-tooltip-shadow: var(--dnet-sys-material-highlight), var(--dnet-sys-elevation-2); /* AdminLayout menu (from the reference design): rows inset from the column, each led by a glass tile with the item's short text, or its icon. Hovering a row lights it; the current page is an accent-tinted glass row with a filled accent tile. An open group hangs its rows on a hairline rail, and its chevron points down, and up while open. Keyboard focus draws an accent ring 2px out from the row. */ --dnet-dash-navbar-height: 44px; --dnet-dash-menu-text-size: 14px; --dnet-dash-navigation-color: var(--dnet-sys-on-surface-muted); --dnet-dash-link-color: var(--dnet-sys-on-surface-muted); --dnet-dash-indicator-width: 0px; --dnet-dash-menu-left-padding-firts-level: 10px; --dnet-dash-menu-left-padding-second-level: 0px; --dnet-dash-menu-inset: 12px; --dnet-dash-menu-item-gap: 2px; --dnet-dash-menu-item-radius: 14px; --dnet-dash-menu-item-weight: 500; --dnet-dash-menu-item-weight-active: 600; --dnet-dash-menu-item-background-hover: rgb(255 255 255 / .38); --dnet-dash-menu-item-background-active: var(--dnet-sys-material-sheen), color-mix(in srgb, var(--dnet-sys-primary) 16%, transparent); --dnet-dash-menu-item-shadow-active: var(--dnet-sys-material-highlight); --dnet-dash-menu-text-color-hover: currentColor; --dnet-dash-menu-text-color-active: color-mix(in oklab, var(--dnet-sys-primary) 80%, #000000); --dnet-dash-menu-text-gap: 12px; --dnet-dash-menu-img-offset: 0px; --dnet-dash-menu-tile-display: grid; --dnet-dash-menu-tile-size: 30px; --dnet-dash-menu-tile-radius: 10px; --dnet-dash-menu-tile-background: var(--dnet-sys-material-control); --dnet-dash-menu-tile-shadow: var(--dnet-sys-material-highlight); --dnet-dash-menu-tile-background-active: var(--dnet-sys-primary); --dnet-dash-menu-tile-color-active: var(--dnet-sys-on-primary); --dnet-dash-menu-tile-shadow-active: inset 0 1px 0 rgb(255 255 255 / .4); --dnet-dash-menu-chevron-rotate: 90deg; --dnet-dash-menu-chevron-rotate-open: 180deg; --dnet-dash-menu-chevron-size: 16px; --dnet-dash-menu-chevron-offset: 0px; --dnet-dash-menu-item-padding-end: 10px; --dnet-dash-menu-focus-ring: 2px solid var(--dnet-sys-primary); --dnet-dash-menu-focus-offset: 4px; --dnet-dash-submenu-width: auto; --dnet-dash-submenu-indent: 24px; --dnet-dash-submenu-rail: 1px solid var(--dnet-sys-border); --dnet-dash-submenu-padding: 10px; --dnet-dash-submenu-background: none; --dnet-dash-submenu-shadow: none; --dnet-dash-submenu-text-size: 13.5px; /* AdminLayout: the minified menu flyout floats over the content and defaults to the border colour, which is translucent here. Nested in the column it cannot blur (backdrop root), so it takes the popup fill instead. */ --dnet-menu-container-bgcolor: var(--dnet-sys-material-popup); } /* Phones: compact screens keep 16px margins, so the grid's content sits 16px from its sides (15px inside its 1px border) and the paginator fits on its line. */ @media (max-width: 599px) { [data-dnet-theme="liquid-glass"] { --dnet-grid-padding: 1px 15px 14px; } } /* No backdrop-filter support: without the blur a translucent fill shows the canvas sharply, so materials become opaque. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-dnet-theme="liquid-glass"] { --dnet-sys-material-chrome: #f5f7fb; --dnet-sys-material-card: #fafbfd; --dnet-sys-material-popup: #ffffff; --dnet-sys-material-control: #eef1f6; --dnet-sys-material-ghost: #f5f7fb; /* The translucent lens needs the glass behind it: it turns opaque. */ --dnet-slide-toggle-lens-handle-background: #ffffff; --dnet-slide-toggle-lens-handle-backdrop: none; } } /* Reduced transparency or forced colours: opaque materials, no blur, no sheen. */ @media (prefers-reduced-transparency: reduce), (forced-colors: active) { [data-dnet-theme="liquid-glass"] { --dnet-sys-material-chrome: #f5f7fb; --dnet-sys-material-card: #fafbfd; --dnet-sys-material-popup: #ffffff; --dnet-sys-material-control: #eef1f6; --dnet-sys-material-ghost: #f5f7fb; /* The translucent lens needs the glass behind it: it turns opaque. */ --dnet-slide-toggle-lens-handle-background: #ffffff; --dnet-slide-toggle-lens-handle-backdrop: none; --dnet-sys-material-backdrop: none; --dnet-sys-material-sheen: none; --dnet-sys-scrim-backdrop: none; } }