/* ---- base.css ---- */ /* Aerolith — base layer: tokens, spacing, type, focus, fallbacks. Sprite variables (--aer-…) are generated into dist/sprites.css and layered on top. */ :root { /* spacing: 4px base, anchored on physical targets (see docs/ui-library/foundations.md) */ --aer-space-1: 4px; --aer-space-2: 8px; /* min gap between touch targets */ --aer-space-3: 12px; --aer-space-4: 16px; --aer-space-5: 24px; /* min target size (WCAG 2.5.8) */ --aer-space-6: 32px; /* control height S */ --aer-space-7: 44px; /* control height M (default) */ --aer-space-8: 64px; --aer-space-9: 96px; --aer-control-s: 32px; --aer-control-m: 44px; --aer-control-l: 56px; --aer-control: var(--aer-control-m); --aer-target-gap: var(--aer-space-2); /* type: modular scale 1.2 */ --aer-font-ui: "Segoe UI", "Frutiger", "Myriad Pro", "Lucida Grande", Tahoma, system-ui, sans-serif; --aer-font-text: var(--aer-font-ui); --aer-font-mono: "Consolas", "Lucida Console", ui-monospace, monospace; --aer-text-xs: 0.833rem; --aer-text-s: 0.9rem; --aer-text-m: 1rem; --aer-text-l: 1.2rem; --aer-text-xl: 1.44rem; --aer-text-2xl: 1.728rem; --aer-text-3xl: 2.074rem; --aer-leading: 1.5; /* colour (light) */ --aer-ink: #0d2236; --aer-ink-muted: #3d5468; --aer-page: #eef6fc; --aer-on-gloss: #ffffff; /* label text on glossy buttons */ --aer-halo: rgba(4, 30, 70, 0.75); /* label halo on glossy sprites */ --aer-focus: #0a64d6; --aer-focus-glow: #8fd3ff; --aer-radius-pill: 999px; color-scheme: light dark; } :root[data-theme="dark"], .aer-dark { --aer-ink: #e6f1fb; --aer-ink-muted: #a9bfd2; --aer-page: #0d1620; --aer-focus: #8fd3ff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --aer-ink: #e6f1fb; --aer-ink-muted: #a9bfd2; --aer-page: #0d1620; --aer-focus: #8fd3ff; } } /* touch: bigger targets and gaps; fine pointers may use the S size */ @media (pointer: coarse) { :root { --aer-control: var(--aer-control-m); --aer-target-gap: var(--aer-space-3); } } /* 10-foot / distance media: scale everything so the visual angle stays comfortable at ~3 m */ .aer-distance { font-size: 150%; --aer-control: var(--aer-control-l); } /* label text on glossy sprites: white + halo (WCAG measures text against its halo) */ .aer-on-gloss { color: var(--aer-on-gloss); text-shadow: 0 0 1px var(--aer-halo), 0 0 3px var(--aer-halo), 0 1px 2px var(--aer-halo); } /* focus: rendered rim glow lives in the sprite; this outline guarantees visibility everywhere */ .aer :focus-visible, .aer-focusable:focus-visible { outline: 2px solid var(--aer-focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .aer *, .aer *::before, .aer *::after { animation: none !important; transition: none !important; } } /* Windows High Contrast / forced colours: sprites (background images) are dropped by the browser; give every component a plain system-colour border so it stays legible. */ @media (forced-colors: active) { .aer [class*="aer-"] { border-color: ButtonText; } .aer-button, .aer-field, .aer-panel { border: 1px solid ButtonText !important; } .aer-button:focus-visible { outline: 2px solid Highlight; } } /* utilities */ .aer-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---- sprites.css ---- */ :root { --aer-badge-error-w: 60px; --aer-badge-error-h: 22px; --aer-badge-error-border: 1px 12px 1px 12px; --aer-badge-error-outset: 1px 1px 1px 1px; --aer-badge-info-w: 60px; --aer-badge-info-h: 22px; --aer-badge-info-border: 1px 12px 1px 12px; --aer-badge-info-outset: 1px 1px 1px 1px; --aer-badge-ok-w: 60px; --aer-badge-ok-h: 22px; --aer-badge-ok-border: 1px 12px 1px 12px; --aer-badge-ok-outset: 1px 1px 1px 1px; --aer-badge-warn-w: 60px; --aer-badge-warn-h: 22px; --aer-badge-warn-border: 1px 12px 1px 12px; --aer-badge-warn-outset: 1px 1px 1px 1px; --aer-bar-w: 240px; --aer-bar-h: 56px; --aer-bar-border: 27px 27px 27px 27px; --aer-bar-outset: 1px 1px 1px 1px; --aer-btn-disabled-l-w: 140px; --aer-btn-disabled-l-h: 56px; --aer-btn-disabled-l-border: 1px 29px 1px 29px; --aer-btn-disabled-l-outset: 1px 1px 1px 1px; --aer-btn-disabled-m-w: 110px; --aer-btn-disabled-m-h: 44px; --aer-btn-disabled-m-border: 1px 23px 1px 23px; --aer-btn-disabled-m-outset: 1px 1px 1px 1px; --aer-btn-disabled-s-w: 80px; --aer-btn-disabled-s-h: 32px; --aer-btn-disabled-s-border: 1px 17px 1px 17px; --aer-btn-disabled-s-outset: 1px 1px 1px 1px; --aer-btn-glass-l-w: 140px; --aer-btn-glass-l-h: 56px; --aer-btn-glass-l-border: 1px 29px 1px 29px; --aer-btn-glass-l-outset: 1px 1px 1px 1px; --aer-btn-glass-l-active-w: 140px; --aer-btn-glass-l-active-h: 56px; --aer-btn-glass-l-active-border: 1px 29px 1px 29px; --aer-btn-glass-l-active-outset: 1px 1px 1px 1px; --aer-btn-glass-l-hover-w: 140px; --aer-btn-glass-l-hover-h: 56px; --aer-btn-glass-l-hover-border: 1px 29px 1px 29px; --aer-btn-glass-l-hover-outset: 1px 1px 1px 1px; --aer-btn-glass-m-w: 110px; --aer-btn-glass-m-h: 44px; --aer-btn-glass-m-border: 1px 23px 1px 23px; --aer-btn-glass-m-outset: 1px 1px 1px 1px; --aer-btn-glass-m-active-w: 110px; --aer-btn-glass-m-active-h: 44px; --aer-btn-glass-m-active-border: 1px 23px 1px 23px; --aer-btn-glass-m-active-outset: 1px 1px 1px 1px; --aer-btn-glass-m-hover-w: 110px; --aer-btn-glass-m-hover-h: 44px; --aer-btn-glass-m-hover-border: 1px 23px 1px 23px; --aer-btn-glass-m-hover-outset: 1px 1px 1px 1px; --aer-btn-glass-s-w: 80px; --aer-btn-glass-s-h: 32px; --aer-btn-glass-s-border: 1px 17px 1px 17px; --aer-btn-glass-s-outset: 1px 1px 1px 1px; --aer-btn-glass-s-active-w: 80px; --aer-btn-glass-s-active-h: 32px; --aer-btn-glass-s-active-border: 1px 17px 1px 17px; --aer-btn-glass-s-active-outset: 1px 1px 1px 1px; --aer-btn-glass-s-hover-w: 80px; --aer-btn-glass-s-hover-h: 32px; --aer-btn-glass-s-hover-border: 1px 17px 1px 17px; --aer-btn-glass-s-hover-outset: 1px 1px 1px 1px; --aer-btn-primary-l-w: 140px; --aer-btn-primary-l-h: 56px; --aer-btn-primary-l-border: 1px 29px 1px 29px; --aer-btn-primary-l-outset: 1px 1px 1px 1px; --aer-btn-primary-l-active-w: 140px; --aer-btn-primary-l-active-h: 56px; --aer-btn-primary-l-active-border: 1px 29px 1px 29px; --aer-btn-primary-l-active-outset: 1px 1px 1px 1px; --aer-btn-primary-l-hover-w: 140px; --aer-btn-primary-l-hover-h: 56px; --aer-btn-primary-l-hover-border: 1px 29px 1px 29px; --aer-btn-primary-l-hover-outset: 1px 1px 1px 1px; --aer-btn-primary-m-w: 110px; --aer-btn-primary-m-h: 44px; --aer-btn-primary-m-border: 1px 23px 1px 23px; --aer-btn-primary-m-outset: 1px 1px 1px 1px; --aer-btn-primary-m-active-w: 110px; --aer-btn-primary-m-active-h: 44px; --aer-btn-primary-m-active-border: 1px 23px 1px 23px; --aer-btn-primary-m-active-outset: 1px 1px 1px 1px; --aer-btn-primary-m-hover-w: 110px; --aer-btn-primary-m-hover-h: 44px; --aer-btn-primary-m-hover-border: 1px 23px 1px 23px; --aer-btn-primary-m-hover-outset: 1px 1px 1px 1px; --aer-btn-primary-s-w: 80px; --aer-btn-primary-s-h: 32px; --aer-btn-primary-s-border: 1px 17px 1px 17px; --aer-btn-primary-s-outset: 1px 1px 1px 1px; --aer-btn-primary-s-active-w: 80px; --aer-btn-primary-s-active-h: 32px; --aer-btn-primary-s-active-border: 1px 17px 1px 17px; --aer-btn-primary-s-active-outset: 1px 1px 1px 1px; --aer-btn-primary-s-hover-w: 80px; --aer-btn-primary-s-hover-h: 32px; --aer-btn-primary-s-hover-border: 1px 17px 1px 17px; --aer-btn-primary-s-hover-outset: 1px 1px 1px 1px; --aer-btn-secondary-l-w: 140px; --aer-btn-secondary-l-h: 56px; --aer-btn-secondary-l-border: 1px 29px 1px 29px; --aer-btn-secondary-l-outset: 1px 1px 1px 1px; --aer-btn-secondary-l-active-w: 140px; --aer-btn-secondary-l-active-h: 56px; --aer-btn-secondary-l-active-border: 1px 29px 1px 29px; --aer-btn-secondary-l-active-outset: 1px 1px 1px 1px; --aer-btn-secondary-l-hover-w: 140px; --aer-btn-secondary-l-hover-h: 56px; --aer-btn-secondary-l-hover-border: 1px 29px 1px 29px; --aer-btn-secondary-l-hover-outset: 1px 1px 1px 1px; --aer-btn-secondary-m-w: 110px; --aer-btn-secondary-m-h: 44px; --aer-btn-secondary-m-border: 1px 23px 1px 23px; --aer-btn-secondary-m-outset: 1px 1px 1px 1px; --aer-btn-secondary-m-active-w: 110px; --aer-btn-secondary-m-active-h: 44px; --aer-btn-secondary-m-active-border: 1px 23px 1px 23px; --aer-btn-secondary-m-active-outset: 1px 1px 1px 1px; --aer-btn-secondary-m-hover-w: 110px; --aer-btn-secondary-m-hover-h: 44px; --aer-btn-secondary-m-hover-border: 1px 23px 1px 23px; --aer-btn-secondary-m-hover-outset: 1px 1px 1px 1px; --aer-btn-secondary-s-w: 80px; --aer-btn-secondary-s-h: 32px; --aer-btn-secondary-s-border: 1px 17px 1px 17px; --aer-btn-secondary-s-outset: 1px 1px 1px 1px; --aer-btn-secondary-s-active-w: 80px; --aer-btn-secondary-s-active-h: 32px; --aer-btn-secondary-s-active-border: 1px 17px 1px 17px; --aer-btn-secondary-s-active-outset: 1px 1px 1px 1px; --aer-btn-secondary-s-hover-w: 80px; --aer-btn-secondary-s-hover-h: 32px; --aer-btn-secondary-s-hover-border: 1px 17px 1px 17px; --aer-btn-secondary-s-hover-outset: 1px 1px 1px 1px; --aer-card-w: 160px; --aer-card-h: 120px; --aer-card-border: 23px 23px 23px 23px; --aer-card-outset: 1px 1px 1px 1px; --aer-card-hover-w: 160px; --aer-card-hover-h: 120px; --aer-card-hover-border: 23px 23px 23px 23px; --aer-card-hover-outset: 1px 1px 1px 1px; --aer-check-w: 26px; --aer-check-h: 26px; --aer-check-outset: 1px 1px 1px 1px; --aer-check-mixed-w: 26px; --aer-check-mixed-h: 26px; --aer-check-mixed-outset: 1px 1px 1px 1px; --aer-check-on-w: 26px; --aer-check-on-h: 26px; --aer-check-on-outset: 1px 1px 1px 1px; --aer-choice-on-w: 140px; --aer-choice-on-h: 90px; --aer-choice-on-border: 25px 25px 25px 25px; --aer-choice-on-outset: 1px 1px 1px 1px; --aer-close-w: 24px; --aer-close-h: 24px; --aer-close-outset: 1px 1px 1px 1px; --aer-close-hover-w: 24px; --aer-close-hover-h: 24px; --aer-close-hover-outset: 1px 1px 1px 1px; --aer-compare-grip-w: 36px; --aer-compare-grip-h: 36px; --aer-compare-grip-outset: 1px 1px 1px 1px; --aer-dialog-w: 320px; --aer-dialog-h: 220px; --aer-dialog-border: 33px 33px 33px 33px; --aer-dialog-outset: 1px 1px 1px 1px; --aer-drop-w: 200px; --aer-drop-h: 120px; --aer-drop-border: 33px 33px 33px 33px; --aer-drop-outset: 1px 1px 1px 1px; --aer-drop-over-w: 200px; --aer-drop-over-h: 120px; --aer-drop-over-border: 33px 33px 33px 33px; --aer-drop-over-outset: 1px 1px 1px 1px; --aer-field-w: 120px; --aer-field-h: 44px; --aer-field-border: 17px 17px 17px 17px; --aer-field-outset: 1px 1px 1px 1px; --aer-field-focus-w: 120px; --aer-field-focus-h: 44px; --aer-field-focus-border: 17px 17px 17px 17px; --aer-field-focus-outset: 1px 1px 1px 1px; --aer-iconbtn-glass-w: 44px; --aer-iconbtn-glass-h: 44px; --aer-iconbtn-glass-outset: 1px 1px 1px 1px; --aer-iconbtn-glass-active-w: 44px; --aer-iconbtn-glass-active-h: 44px; --aer-iconbtn-glass-active-outset: 1px 1px 1px 1px; --aer-iconbtn-glass-hover-w: 44px; --aer-iconbtn-glass-hover-h: 44px; --aer-iconbtn-glass-hover-outset: 1px 1px 1px 1px; --aer-iconbtn-primary-w: 44px; --aer-iconbtn-primary-h: 44px; --aer-iconbtn-primary-outset: 1px 1px 1px 1px; --aer-iconbtn-primary-active-w: 44px; --aer-iconbtn-primary-active-h: 44px; --aer-iconbtn-primary-active-outset: 1px 1px 1px 1px; --aer-iconbtn-primary-hover-w: 44px; --aer-iconbtn-primary-hover-h: 44px; --aer-iconbtn-primary-hover-outset: 1px 1px 1px 1px; --aer-lens-w: 160px; --aer-lens-h: 120px; --aer-lens-border: 37px 37px 37px 37px; --aer-lens-outset: 1px 1px 1px 1px; --aer-orb-error-w: 16px; --aer-orb-error-h: 16px; --aer-orb-error-outset: 1px 1px 1px 1px; --aer-orb-info-w: 16px; --aer-orb-info-h: 16px; --aer-orb-info-outset: 1px 1px 1px 1px; --aer-orb-ok-w: 16px; --aer-orb-ok-h: 16px; --aer-orb-ok-outset: 1px 1px 1px 1px; --aer-orb-warn-w: 16px; --aer-orb-warn-h: 16px; --aer-orb-warn-outset: 1px 1px 1px 1px; --aer-panel-w: 160px; --aer-panel-h: 120px; --aer-panel-border: 27px 27px 27px 27px; --aer-panel-outset: 1px 1px 1px 1px; --aer-progress-fill-w: 160px; --aer-progress-fill-h: 12px; --aer-progress-fill-border: 1px 7px 1px 7px; --aer-progress-fill-outset: 1px 1px 1px 1px; --aer-progress-tube-w: 160px; --aer-progress-tube-h: 18px; --aer-progress-tube-border: 1px 10px 1px 10px; --aer-progress-tube-outset: 1px 1px 1px 1px; --aer-radio-w: 26px; --aer-radio-h: 26px; --aer-radio-outset: 1px 1px 1px 1px; --aer-radio-on-w: 26px; --aer-radio-on-h: 26px; --aer-radio-on-outset: 1px 1px 1px 1px; --aer-rail-error-w: 10px; --aer-rail-error-h: 64px; --aer-rail-error-border: 6px 1px 6px 1px; --aer-rail-error-outset: 1px 1px 1px 1px; --aer-rail-info-w: 10px; --aer-rail-info-h: 64px; --aer-rail-info-border: 6px 1px 6px 1px; --aer-rail-info-outset: 1px 1px 1px 1px; --aer-rail-ok-w: 10px; --aer-rail-ok-h: 64px; --aer-rail-ok-border: 6px 1px 6px 1px; --aer-rail-ok-outset: 1px 1px 1px 1px; --aer-rail-warn-w: 10px; --aer-rail-warn-h: 64px; --aer-rail-warn-border: 6px 1px 6px 1px; --aer-rail-warn-outset: 1px 1px 1px 1px; --aer-seg-chip-w: 80px; --aer-seg-chip-h: 32px; --aer-seg-chip-border: 1px 17px 1px 17px; --aer-seg-chip-outset: 1px 1px 1px 1px; --aer-seg-chip-hover-w: 80px; --aer-seg-chip-hover-h: 32px; --aer-seg-chip-hover-border: 1px 17px 1px 17px; --aer-seg-chip-hover-outset: 1px 1px 1px 1px; --aer-seg-tray-w: 160px; --aer-seg-tray-h: 40px; --aer-seg-tray-border: 1px 21px 1px 21px; --aer-seg-tray-outset: 1px 1px 1px 1px; --aer-slider-fill-w: 160px; --aer-slider-fill-h: 6px; --aer-slider-fill-border: 1px 4px 1px 4px; --aer-slider-fill-outset: 1px 1px 1px 1px; --aer-slider-rail-w: 160px; --aer-slider-rail-h: 10px; --aer-slider-rail-border: 1px 6px 1px 6px; --aer-slider-rail-outset: 1px 1px 1px 1px; --aer-slider-thumb-w: 24px; --aer-slider-thumb-h: 24px; --aer-slider-thumb-outset: 1px 1px 1px 1px; --aer-toggle-knob-w: 26px; --aer-toggle-knob-h: 26px; --aer-toggle-knob-outset: 1px 1px 1px 1px; --aer-toggle-knob-moon-w: 26px; --aer-toggle-knob-moon-h: 26px; --aer-toggle-knob-moon-outset: 1px 1px 1px 1px; --aer-toggle-knob-on-w: 26px; --aer-toggle-knob-on-h: 26px; --aer-toggle-knob-on-outset: 1px 1px 1px 1px; --aer-toggle-knob-sun-w: 26px; --aer-toggle-knob-sun-h: 26px; --aer-toggle-knob-sun-outset: 1px 1px 1px 1px; --aer-toggle-track-w: 56px; --aer-toggle-track-h: 32px; --aer-toggle-track-border: 1px 17px 1px 17px; --aer-toggle-track-outset: 1px 1px 1px 1px; --aer-toggle-track-on-w: 56px; --aer-toggle-track-on-h: 32px; --aer-toggle-track-on-border: 1px 17px 1px 17px; --aer-toggle-track-on-outset: 1px 1px 1px 1px; --aer-badge-error: url("sprites/badge-error@1x.png"); --aer-badge-error-slice: 1 12 1 12 fill; --aer-badge-info: url("sprites/badge-info@1x.png"); --aer-badge-info-slice: 1 12 1 12 fill; --aer-badge-ok: url("sprites/badge-ok@1x.png"); --aer-badge-ok-slice: 1 12 1 12 fill; --aer-badge-warn: url("sprites/badge-warn@1x.png"); --aer-badge-warn-slice: 1 12 1 12 fill; --aer-bar: url("sprites/bar@1x.png"); --aer-bar-slice: 27 27 27 27 fill; --aer-btn-disabled-l: url("sprites/btn-disabled-l@1x.png"); --aer-btn-disabled-l-slice: 1 29 1 29 fill; --aer-btn-disabled-m: url("sprites/btn-disabled-m@1x.png"); --aer-btn-disabled-m-slice: 1 23 1 23 fill; --aer-btn-disabled-s: url("sprites/btn-disabled-s@1x.png"); --aer-btn-disabled-s-slice: 1 17 1 17 fill; --aer-btn-glass-l: url("sprites/btn-glass-l@1x.png"); --aer-btn-glass-l-slice: 1 29 1 29 fill; --aer-btn-glass-l-active: url("sprites/btn-glass-l-active@1x.png"); --aer-btn-glass-l-active-slice: 1 29 1 29 fill; --aer-btn-glass-l-hover: url("sprites/btn-glass-l-hover@1x.png"); --aer-btn-glass-l-hover-slice: 1 29 1 29 fill; --aer-btn-glass-m: url("sprites/btn-glass-m@1x.png"); --aer-btn-glass-m-slice: 1 23 1 23 fill; --aer-btn-glass-m-active: url("sprites/btn-glass-m-active@1x.png"); --aer-btn-glass-m-active-slice: 1 23 1 23 fill; --aer-btn-glass-m-hover: url("sprites/btn-glass-m-hover@1x.png"); --aer-btn-glass-m-hover-slice: 1 23 1 23 fill; --aer-btn-glass-s: url("sprites/btn-glass-s@1x.png"); --aer-btn-glass-s-slice: 1 17 1 17 fill; --aer-btn-glass-s-active: url("sprites/btn-glass-s-active@1x.png"); --aer-btn-glass-s-active-slice: 1 17 1 17 fill; --aer-btn-glass-s-hover: url("sprites/btn-glass-s-hover@1x.png"); --aer-btn-glass-s-hover-slice: 1 17 1 17 fill; --aer-btn-primary-l: url("sprites/btn-primary-l@1x.png"); --aer-btn-primary-l-slice: 1 29 1 29 fill; --aer-btn-primary-l-active: url("sprites/btn-primary-l-active@1x.png"); --aer-btn-primary-l-active-slice: 1 29 1 29 fill; --aer-btn-primary-l-hover: url("sprites/btn-primary-l-hover@1x.png"); --aer-btn-primary-l-hover-slice: 1 29 1 29 fill; --aer-btn-primary-m: url("sprites/btn-primary-m@1x.png"); --aer-btn-primary-m-slice: 1 23 1 23 fill; --aer-btn-primary-m-active: url("sprites/btn-primary-m-active@1x.png"); --aer-btn-primary-m-active-slice: 1 23 1 23 fill; --aer-btn-primary-m-hover: url("sprites/btn-primary-m-hover@1x.png"); --aer-btn-primary-m-hover-slice: 1 23 1 23 fill; --aer-btn-primary-s: url("sprites/btn-primary-s@1x.png"); --aer-btn-primary-s-slice: 1 17 1 17 fill; --aer-btn-primary-s-active: url("sprites/btn-primary-s-active@1x.png"); --aer-btn-primary-s-active-slice: 1 17 1 17 fill; --aer-btn-primary-s-hover: url("sprites/btn-primary-s-hover@1x.png"); --aer-btn-primary-s-hover-slice: 1 17 1 17 fill; --aer-btn-secondary-l: url("sprites/btn-secondary-l@1x.png"); --aer-btn-secondary-l-slice: 1 29 1 29 fill; --aer-btn-secondary-l-active: url("sprites/btn-secondary-l-active@1x.png"); --aer-btn-secondary-l-active-slice: 1 29 1 29 fill; --aer-btn-secondary-l-hover: url("sprites/btn-secondary-l-hover@1x.png"); --aer-btn-secondary-l-hover-slice: 1 29 1 29 fill; --aer-btn-secondary-m: url("sprites/btn-secondary-m@1x.png"); --aer-btn-secondary-m-slice: 1 23 1 23 fill; --aer-btn-secondary-m-active: url("sprites/btn-secondary-m-active@1x.png"); --aer-btn-secondary-m-active-slice: 1 23 1 23 fill; --aer-btn-secondary-m-hover: url("sprites/btn-secondary-m-hover@1x.png"); --aer-btn-secondary-m-hover-slice: 1 23 1 23 fill; --aer-btn-secondary-s: url("sprites/btn-secondary-s@1x.png"); --aer-btn-secondary-s-slice: 1 17 1 17 fill; --aer-btn-secondary-s-active: url("sprites/btn-secondary-s-active@1x.png"); --aer-btn-secondary-s-active-slice: 1 17 1 17 fill; --aer-btn-secondary-s-hover: url("sprites/btn-secondary-s-hover@1x.png"); --aer-btn-secondary-s-hover-slice: 1 17 1 17 fill; --aer-card: url("sprites/card@1x.png"); --aer-card-slice: 23 23 23 23 fill; --aer-card-hover: url("sprites/card-hover@1x.png"); --aer-card-hover-slice: 23 23 23 23 fill; --aer-check: url("sprites/check@1x.png"); --aer-check-mixed: url("sprites/check-mixed@1x.png"); --aer-check-on: url("sprites/check-on@1x.png"); --aer-choice-on: url("sprites/choice-on@1x.png"); --aer-choice-on-slice: 25 25 25 25 fill; --aer-close: url("sprites/close@1x.png"); --aer-close-hover: url("sprites/close-hover@1x.png"); --aer-compare-grip: url("sprites/compare-grip@1x.png"); --aer-dialog: url("sprites/dialog@1x.png"); --aer-dialog-slice: 33 33 33 33 fill; --aer-drop: url("sprites/drop@1x.png"); --aer-drop-slice: 33 33 33 33 fill; --aer-drop-over: url("sprites/drop-over@1x.png"); --aer-drop-over-slice: 33 33 33 33 fill; --aer-field: url("sprites/field@1x.png"); --aer-field-slice: 17 17 17 17 fill; --aer-field-focus: url("sprites/field-focus@1x.png"); --aer-field-focus-slice: 17 17 17 17 fill; --aer-iconbtn-glass: url("sprites/iconbtn-glass@1x.png"); --aer-iconbtn-glass-active: url("sprites/iconbtn-glass-active@1x.png"); --aer-iconbtn-glass-hover: url("sprites/iconbtn-glass-hover@1x.png"); --aer-iconbtn-primary: url("sprites/iconbtn-primary@1x.png"); --aer-iconbtn-primary-active: url("sprites/iconbtn-primary-active@1x.png"); --aer-iconbtn-primary-hover: url("sprites/iconbtn-primary-hover@1x.png"); --aer-lens: url("sprites/lens@1x.png"); --aer-lens-slice: 37 37 37 37 fill; --aer-orb-error: url("sprites/orb-error@1x.png"); --aer-orb-info: url("sprites/orb-info@1x.png"); --aer-orb-ok: url("sprites/orb-ok@1x.png"); --aer-orb-warn: url("sprites/orb-warn@1x.png"); --aer-panel: url("sprites/panel@1x.png"); --aer-panel-slice: 27 27 27 27 fill; --aer-progress-fill: url("sprites/progress-fill@1x.png"); --aer-progress-fill-slice: 1 7 1 7 fill; --aer-progress-tube: url("sprites/progress-tube@1x.png"); --aer-progress-tube-slice: 1 10 1 10 fill; --aer-radio: url("sprites/radio@1x.png"); --aer-radio-on: url("sprites/radio-on@1x.png"); --aer-rail-error: url("sprites/rail-error@1x.png"); --aer-rail-error-slice: 6 1 6 1 fill; --aer-rail-info: url("sprites/rail-info@1x.png"); --aer-rail-info-slice: 6 1 6 1 fill; --aer-rail-ok: url("sprites/rail-ok@1x.png"); --aer-rail-ok-slice: 6 1 6 1 fill; --aer-rail-warn: url("sprites/rail-warn@1x.png"); --aer-rail-warn-slice: 6 1 6 1 fill; --aer-seg-chip: url("sprites/seg-chip@1x.png"); --aer-seg-chip-slice: 1 17 1 17 fill; --aer-seg-chip-hover: url("sprites/seg-chip-hover@1x.png"); --aer-seg-chip-hover-slice: 1 17 1 17 fill; --aer-seg-tray: url("sprites/seg-tray@1x.png"); --aer-seg-tray-slice: 1 21 1 21 fill; --aer-slider-fill: url("sprites/slider-fill@1x.png"); --aer-slider-fill-slice: 1 4 1 4 fill; --aer-slider-rail: url("sprites/slider-rail@1x.png"); --aer-slider-rail-slice: 1 6 1 6 fill; --aer-slider-thumb: url("sprites/slider-thumb@1x.png"); --aer-toggle-knob: url("sprites/toggle-knob@1x.png"); --aer-toggle-knob-moon: url("sprites/toggle-knob-moon@1x.png"); --aer-toggle-knob-on: url("sprites/toggle-knob-on@1x.png"); --aer-toggle-knob-sun: url("sprites/toggle-knob-sun@1x.png"); --aer-toggle-track: url("sprites/toggle-track@1x.png"); --aer-toggle-track-slice: 1 17 1 17 fill; --aer-toggle-track-on: url("sprites/toggle-track-on@1x.png"); --aer-toggle-track-on-slice: 1 17 1 17 fill; } @media (min-resolution: 1.5dppx) { :root { --aer-badge-error: url("sprites/badge-error@2x.png"); --aer-badge-error-slice: 2 24 2 24 fill; --aer-badge-info: url("sprites/badge-info@2x.png"); --aer-badge-info-slice: 2 24 2 24 fill; --aer-badge-ok: url("sprites/badge-ok@2x.png"); --aer-badge-ok-slice: 2 24 2 24 fill; --aer-badge-warn: url("sprites/badge-warn@2x.png"); --aer-badge-warn-slice: 2 24 2 24 fill; --aer-bar: url("sprites/bar@2x.png"); --aer-bar-slice: 54 54 54 54 fill; --aer-btn-disabled-l: url("sprites/btn-disabled-l@2x.png"); --aer-btn-disabled-l-slice: 2 58 2 58 fill; --aer-btn-disabled-m: url("sprites/btn-disabled-m@2x.png"); --aer-btn-disabled-m-slice: 2 46 2 46 fill; --aer-btn-disabled-s: url("sprites/btn-disabled-s@2x.png"); --aer-btn-disabled-s-slice: 2 34 2 34 fill; --aer-btn-glass-l: url("sprites/btn-glass-l@2x.png"); --aer-btn-glass-l-slice: 2 58 2 58 fill; --aer-btn-glass-l-active: url("sprites/btn-glass-l-active@2x.png"); --aer-btn-glass-l-active-slice: 2 58 2 58 fill; --aer-btn-glass-l-hover: url("sprites/btn-glass-l-hover@2x.png"); --aer-btn-glass-l-hover-slice: 2 58 2 58 fill; --aer-btn-glass-m: url("sprites/btn-glass-m@2x.png"); --aer-btn-glass-m-slice: 2 46 2 46 fill; --aer-btn-glass-m-active: url("sprites/btn-glass-m-active@2x.png"); --aer-btn-glass-m-active-slice: 2 46 2 46 fill; --aer-btn-glass-m-hover: url("sprites/btn-glass-m-hover@2x.png"); --aer-btn-glass-m-hover-slice: 2 46 2 46 fill; --aer-btn-glass-s: url("sprites/btn-glass-s@2x.png"); --aer-btn-glass-s-slice: 2 34 2 34 fill; --aer-btn-glass-s-active: url("sprites/btn-glass-s-active@2x.png"); --aer-btn-glass-s-active-slice: 2 34 2 34 fill; --aer-btn-glass-s-hover: url("sprites/btn-glass-s-hover@2x.png"); --aer-btn-glass-s-hover-slice: 2 34 2 34 fill; --aer-btn-primary-l: url("sprites/btn-primary-l@2x.png"); --aer-btn-primary-l-slice: 2 58 2 58 fill; --aer-btn-primary-l-active: url("sprites/btn-primary-l-active@2x.png"); --aer-btn-primary-l-active-slice: 2 58 2 58 fill; --aer-btn-primary-l-hover: url("sprites/btn-primary-l-hover@2x.png"); --aer-btn-primary-l-hover-slice: 2 58 2 58 fill; --aer-btn-primary-m: url("sprites/btn-primary-m@2x.png"); --aer-btn-primary-m-slice: 2 46 2 46 fill; --aer-btn-primary-m-active: url("sprites/btn-primary-m-active@2x.png"); --aer-btn-primary-m-active-slice: 2 46 2 46 fill; --aer-btn-primary-m-hover: url("sprites/btn-primary-m-hover@2x.png"); --aer-btn-primary-m-hover-slice: 2 46 2 46 fill; --aer-btn-primary-s: url("sprites/btn-primary-s@2x.png"); --aer-btn-primary-s-slice: 2 34 2 34 fill; --aer-btn-primary-s-active: url("sprites/btn-primary-s-active@2x.png"); --aer-btn-primary-s-active-slice: 2 34 2 34 fill; --aer-btn-primary-s-hover: url("sprites/btn-primary-s-hover@2x.png"); --aer-btn-primary-s-hover-slice: 2 34 2 34 fill; --aer-btn-secondary-l: url("sprites/btn-secondary-l@2x.png"); --aer-btn-secondary-l-slice: 2 58 2 58 fill; --aer-btn-secondary-l-active: url("sprites/btn-secondary-l-active@2x.png"); --aer-btn-secondary-l-active-slice: 2 58 2 58 fill; --aer-btn-secondary-l-hover: url("sprites/btn-secondary-l-hover@2x.png"); --aer-btn-secondary-l-hover-slice: 2 58 2 58 fill; --aer-btn-secondary-m: url("sprites/btn-secondary-m@2x.png"); --aer-btn-secondary-m-slice: 2 46 2 46 fill; --aer-btn-secondary-m-active: url("sprites/btn-secondary-m-active@2x.png"); --aer-btn-secondary-m-active-slice: 2 46 2 46 fill; --aer-btn-secondary-m-hover: url("sprites/btn-secondary-m-hover@2x.png"); --aer-btn-secondary-m-hover-slice: 2 46 2 46 fill; --aer-btn-secondary-s: url("sprites/btn-secondary-s@2x.png"); --aer-btn-secondary-s-slice: 2 34 2 34 fill; --aer-btn-secondary-s-active: url("sprites/btn-secondary-s-active@2x.png"); --aer-btn-secondary-s-active-slice: 2 34 2 34 fill; --aer-btn-secondary-s-hover: url("sprites/btn-secondary-s-hover@2x.png"); --aer-btn-secondary-s-hover-slice: 2 34 2 34 fill; --aer-card: url("sprites/card@2x.png"); --aer-card-slice: 46 46 46 46 fill; --aer-card-hover: url("sprites/card-hover@2x.png"); --aer-card-hover-slice: 46 46 46 46 fill; --aer-check: url("sprites/check@2x.png"); --aer-check-mixed: url("sprites/check-mixed@2x.png"); --aer-check-on: url("sprites/check-on@2x.png"); --aer-choice-on: url("sprites/choice-on@2x.png"); --aer-choice-on-slice: 50 50 50 50 fill; --aer-close: url("sprites/close@2x.png"); --aer-close-hover: url("sprites/close-hover@2x.png"); --aer-compare-grip: url("sprites/compare-grip@2x.png"); --aer-dialog: url("sprites/dialog@2x.png"); --aer-dialog-slice: 66 66 66 66 fill; --aer-drop: url("sprites/drop@2x.png"); --aer-drop-slice: 66 66 66 66 fill; --aer-drop-over: url("sprites/drop-over@2x.png"); --aer-drop-over-slice: 66 66 66 66 fill; --aer-field: url("sprites/field@2x.png"); --aer-field-slice: 34 34 34 34 fill; --aer-field-focus: url("sprites/field-focus@2x.png"); --aer-field-focus-slice: 34 34 34 34 fill; --aer-iconbtn-glass: url("sprites/iconbtn-glass@2x.png"); --aer-iconbtn-glass-active: url("sprites/iconbtn-glass-active@2x.png"); --aer-iconbtn-glass-hover: url("sprites/iconbtn-glass-hover@2x.png"); --aer-iconbtn-primary: url("sprites/iconbtn-primary@2x.png"); --aer-iconbtn-primary-active: url("sprites/iconbtn-primary-active@2x.png"); --aer-iconbtn-primary-hover: url("sprites/iconbtn-primary-hover@2x.png"); --aer-lens: url("sprites/lens@2x.png"); --aer-lens-slice: 74 74 74 74 fill; --aer-orb-error: url("sprites/orb-error@2x.png"); --aer-orb-info: url("sprites/orb-info@2x.png"); --aer-orb-ok: url("sprites/orb-ok@2x.png"); --aer-orb-warn: url("sprites/orb-warn@2x.png"); --aer-panel: url("sprites/panel@2x.png"); --aer-panel-slice: 54 54 54 54 fill; --aer-progress-fill: url("sprites/progress-fill@2x.png"); --aer-progress-fill-slice: 2 14 2 14 fill; --aer-progress-tube: url("sprites/progress-tube@2x.png"); --aer-progress-tube-slice: 2 20 2 20 fill; --aer-radio: url("sprites/radio@2x.png"); --aer-radio-on: url("sprites/radio-on@2x.png"); --aer-rail-error: url("sprites/rail-error@2x.png"); --aer-rail-error-slice: 12 2 12 2 fill; --aer-rail-info: url("sprites/rail-info@2x.png"); --aer-rail-info-slice: 12 2 12 2 fill; --aer-rail-ok: url("sprites/rail-ok@2x.png"); --aer-rail-ok-slice: 12 2 12 2 fill; --aer-rail-warn: url("sprites/rail-warn@2x.png"); --aer-rail-warn-slice: 12 2 12 2 fill; --aer-seg-chip: url("sprites/seg-chip@2x.png"); --aer-seg-chip-slice: 2 34 2 34 fill; --aer-seg-chip-hover: url("sprites/seg-chip-hover@2x.png"); --aer-seg-chip-hover-slice: 2 34 2 34 fill; --aer-seg-tray: url("sprites/seg-tray@2x.png"); --aer-seg-tray-slice: 2 42 2 42 fill; --aer-slider-fill: url("sprites/slider-fill@2x.png"); --aer-slider-fill-slice: 2 8 2 8 fill; --aer-slider-rail: url("sprites/slider-rail@2x.png"); --aer-slider-rail-slice: 2 12 2 12 fill; --aer-slider-thumb: url("sprites/slider-thumb@2x.png"); --aer-toggle-knob: url("sprites/toggle-knob@2x.png"); --aer-toggle-knob-moon: url("sprites/toggle-knob-moon@2x.png"); --aer-toggle-knob-on: url("sprites/toggle-knob-on@2x.png"); --aer-toggle-knob-sun: url("sprites/toggle-knob-sun@2x.png"); --aer-toggle-track: url("sprites/toggle-track@2x.png"); --aer-toggle-track-slice: 2 34 2 34 fill; --aer-toggle-track-on: url("sprites/toggle-track-on@2x.png"); --aer-toggle-track-on-slice: 2 34 2 34 fill; } } @media (min-resolution: 2.5dppx) { :root { --aer-badge-error: url("sprites/badge-error@3x.png"); --aer-badge-error-slice: 3 36 3 36 fill; --aer-badge-info: url("sprites/badge-info@3x.png"); --aer-badge-info-slice: 3 36 3 36 fill; --aer-badge-ok: url("sprites/badge-ok@3x.png"); --aer-badge-ok-slice: 3 36 3 36 fill; --aer-badge-warn: url("sprites/badge-warn@3x.png"); --aer-badge-warn-slice: 3 36 3 36 fill; --aer-bar: url("sprites/bar@3x.png"); --aer-bar-slice: 81 81 81 81 fill; --aer-btn-disabled-l: url("sprites/btn-disabled-l@3x.png"); --aer-btn-disabled-l-slice: 3 87 3 87 fill; --aer-btn-disabled-m: url("sprites/btn-disabled-m@3x.png"); --aer-btn-disabled-m-slice: 3 69 3 69 fill; --aer-btn-disabled-s: url("sprites/btn-disabled-s@3x.png"); --aer-btn-disabled-s-slice: 3 51 3 51 fill; --aer-btn-glass-l: url("sprites/btn-glass-l@3x.png"); --aer-btn-glass-l-slice: 3 87 3 87 fill; --aer-btn-glass-l-active: url("sprites/btn-glass-l-active@3x.png"); --aer-btn-glass-l-active-slice: 3 87 3 87 fill; --aer-btn-glass-l-hover: url("sprites/btn-glass-l-hover@3x.png"); --aer-btn-glass-l-hover-slice: 3 87 3 87 fill; --aer-btn-glass-m: url("sprites/btn-glass-m@3x.png"); --aer-btn-glass-m-slice: 3 69 3 69 fill; --aer-btn-glass-m-active: url("sprites/btn-glass-m-active@3x.png"); --aer-btn-glass-m-active-slice: 3 69 3 69 fill; --aer-btn-glass-m-hover: url("sprites/btn-glass-m-hover@3x.png"); --aer-btn-glass-m-hover-slice: 3 69 3 69 fill; --aer-btn-glass-s: url("sprites/btn-glass-s@3x.png"); --aer-btn-glass-s-slice: 3 51 3 51 fill; --aer-btn-glass-s-active: url("sprites/btn-glass-s-active@3x.png"); --aer-btn-glass-s-active-slice: 3 51 3 51 fill; --aer-btn-glass-s-hover: url("sprites/btn-glass-s-hover@3x.png"); --aer-btn-glass-s-hover-slice: 3 51 3 51 fill; --aer-btn-primary-l: url("sprites/btn-primary-l@3x.png"); --aer-btn-primary-l-slice: 3 87 3 87 fill; --aer-btn-primary-l-active: url("sprites/btn-primary-l-active@3x.png"); --aer-btn-primary-l-active-slice: 3 87 3 87 fill; --aer-btn-primary-l-hover: url("sprites/btn-primary-l-hover@3x.png"); --aer-btn-primary-l-hover-slice: 3 87 3 87 fill; --aer-btn-primary-m: url("sprites/btn-primary-m@3x.png"); --aer-btn-primary-m-slice: 3 69 3 69 fill; --aer-btn-primary-m-active: url("sprites/btn-primary-m-active@3x.png"); --aer-btn-primary-m-active-slice: 3 69 3 69 fill; --aer-btn-primary-m-hover: url("sprites/btn-primary-m-hover@3x.png"); --aer-btn-primary-m-hover-slice: 3 69 3 69 fill; --aer-btn-primary-s: url("sprites/btn-primary-s@3x.png"); --aer-btn-primary-s-slice: 3 51 3 51 fill; --aer-btn-primary-s-active: url("sprites/btn-primary-s-active@3x.png"); --aer-btn-primary-s-active-slice: 3 51 3 51 fill; --aer-btn-primary-s-hover: url("sprites/btn-primary-s-hover@3x.png"); --aer-btn-primary-s-hover-slice: 3 51 3 51 fill; --aer-btn-secondary-l: url("sprites/btn-secondary-l@3x.png"); --aer-btn-secondary-l-slice: 3 87 3 87 fill; --aer-btn-secondary-l-active: url("sprites/btn-secondary-l-active@3x.png"); --aer-btn-secondary-l-active-slice: 3 87 3 87 fill; --aer-btn-secondary-l-hover: url("sprites/btn-secondary-l-hover@3x.png"); --aer-btn-secondary-l-hover-slice: 3 87 3 87 fill; --aer-btn-secondary-m: url("sprites/btn-secondary-m@3x.png"); --aer-btn-secondary-m-slice: 3 69 3 69 fill; --aer-btn-secondary-m-active: url("sprites/btn-secondary-m-active@3x.png"); --aer-btn-secondary-m-active-slice: 3 69 3 69 fill; --aer-btn-secondary-m-hover: url("sprites/btn-secondary-m-hover@3x.png"); --aer-btn-secondary-m-hover-slice: 3 69 3 69 fill; --aer-btn-secondary-s: url("sprites/btn-secondary-s@3x.png"); --aer-btn-secondary-s-slice: 3 51 3 51 fill; --aer-btn-secondary-s-active: url("sprites/btn-secondary-s-active@3x.png"); --aer-btn-secondary-s-active-slice: 3 51 3 51 fill; --aer-btn-secondary-s-hover: url("sprites/btn-secondary-s-hover@3x.png"); --aer-btn-secondary-s-hover-slice: 3 51 3 51 fill; --aer-card: url("sprites/card@3x.png"); --aer-card-slice: 69 69 69 69 fill; --aer-card-hover: url("sprites/card-hover@3x.png"); --aer-card-hover-slice: 69 69 69 69 fill; --aer-check: url("sprites/check@3x.png"); --aer-check-mixed: url("sprites/check-mixed@3x.png"); --aer-check-on: url("sprites/check-on@3x.png"); --aer-choice-on: url("sprites/choice-on@3x.png"); --aer-choice-on-slice: 75 75 75 75 fill; --aer-close: url("sprites/close@3x.png"); --aer-close-hover: url("sprites/close-hover@3x.png"); --aer-compare-grip: url("sprites/compare-grip@3x.png"); --aer-dialog: url("sprites/dialog@3x.png"); --aer-dialog-slice: 99 99 99 99 fill; --aer-drop: url("sprites/drop@3x.png"); --aer-drop-slice: 99 99 99 99 fill; --aer-drop-over: url("sprites/drop-over@3x.png"); --aer-drop-over-slice: 99 99 99 99 fill; --aer-field: url("sprites/field@3x.png"); --aer-field-slice: 51 51 51 51 fill; --aer-field-focus: url("sprites/field-focus@3x.png"); --aer-field-focus-slice: 51 51 51 51 fill; --aer-iconbtn-glass: url("sprites/iconbtn-glass@3x.png"); --aer-iconbtn-glass-active: url("sprites/iconbtn-glass-active@3x.png"); --aer-iconbtn-glass-hover: url("sprites/iconbtn-glass-hover@3x.png"); --aer-iconbtn-primary: url("sprites/iconbtn-primary@3x.png"); --aer-iconbtn-primary-active: url("sprites/iconbtn-primary-active@3x.png"); --aer-iconbtn-primary-hover: url("sprites/iconbtn-primary-hover@3x.png"); --aer-lens: url("sprites/lens@3x.png"); --aer-lens-slice: 111 111 111 111 fill; --aer-orb-error: url("sprites/orb-error@3x.png"); --aer-orb-info: url("sprites/orb-info@3x.png"); --aer-orb-ok: url("sprites/orb-ok@3x.png"); --aer-orb-warn: url("sprites/orb-warn@3x.png"); --aer-panel: url("sprites/panel@3x.png"); --aer-panel-slice: 81 81 81 81 fill; --aer-progress-fill: url("sprites/progress-fill@3x.png"); --aer-progress-fill-slice: 3 21 3 21 fill; --aer-progress-tube: url("sprites/progress-tube@3x.png"); --aer-progress-tube-slice: 3 30 3 30 fill; --aer-radio: url("sprites/radio@3x.png"); --aer-radio-on: url("sprites/radio-on@3x.png"); --aer-rail-error: url("sprites/rail-error@3x.png"); --aer-rail-error-slice: 18 3 18 3 fill; --aer-rail-info: url("sprites/rail-info@3x.png"); --aer-rail-info-slice: 18 3 18 3 fill; --aer-rail-ok: url("sprites/rail-ok@3x.png"); --aer-rail-ok-slice: 18 3 18 3 fill; --aer-rail-warn: url("sprites/rail-warn@3x.png"); --aer-rail-warn-slice: 18 3 18 3 fill; --aer-seg-chip: url("sprites/seg-chip@3x.png"); --aer-seg-chip-slice: 3 51 3 51 fill; --aer-seg-chip-hover: url("sprites/seg-chip-hover@3x.png"); --aer-seg-chip-hover-slice: 3 51 3 51 fill; --aer-seg-tray: url("sprites/seg-tray@3x.png"); --aer-seg-tray-slice: 3 63 3 63 fill; --aer-slider-fill: url("sprites/slider-fill@3x.png"); --aer-slider-fill-slice: 3 12 3 12 fill; --aer-slider-rail: url("sprites/slider-rail@3x.png"); --aer-slider-rail-slice: 3 18 3 18 fill; --aer-slider-thumb: url("sprites/slider-thumb@3x.png"); --aer-toggle-knob: url("sprites/toggle-knob@3x.png"); --aer-toggle-knob-moon: url("sprites/toggle-knob-moon@3x.png"); --aer-toggle-knob-on: url("sprites/toggle-knob-on@3x.png"); --aer-toggle-knob-sun: url("sprites/toggle-knob-sun@3x.png"); --aer-toggle-track: url("sprites/toggle-track@3x.png"); --aer-toggle-track-slice: 3 51 3 51 fill; --aer-toggle-track-on: url("sprites/toggle-track-on@3x.png"); --aer-toggle-track-on-slice: 3 51 3 51 fill; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --aer-bar: url("sprites/bar.dark@1x.png"); --aer-bar-slice: 27 27 27 27 fill; --aer-btn-glass-l-active: url("sprites/btn-glass-l-active.dark@1x.png"); --aer-btn-glass-l-active-slice: 1 29 1 29 fill; --aer-btn-glass-l-hover: url("sprites/btn-glass-l-hover.dark@1x.png"); --aer-btn-glass-l-hover-slice: 1 29 1 29 fill; --aer-btn-glass-l: url("sprites/btn-glass-l.dark@1x.png"); --aer-btn-glass-l-slice: 1 29 1 29 fill; --aer-btn-glass-m-active: url("sprites/btn-glass-m-active.dark@1x.png"); --aer-btn-glass-m-active-slice: 1 23 1 23 fill; --aer-btn-glass-m-hover: url("sprites/btn-glass-m-hover.dark@1x.png"); --aer-btn-glass-m-hover-slice: 1 23 1 23 fill; --aer-btn-glass-m: url("sprites/btn-glass-m.dark@1x.png"); --aer-btn-glass-m-slice: 1 23 1 23 fill; --aer-btn-glass-s-active: url("sprites/btn-glass-s-active.dark@1x.png"); --aer-btn-glass-s-active-slice: 1 17 1 17 fill; --aer-btn-glass-s-hover: url("sprites/btn-glass-s-hover.dark@1x.png"); --aer-btn-glass-s-hover-slice: 1 17 1 17 fill; --aer-btn-glass-s: url("sprites/btn-glass-s.dark@1x.png"); --aer-btn-glass-s-slice: 1 17 1 17 fill; --aer-card-hover: url("sprites/card-hover.dark@1x.png"); --aer-card-hover-slice: 23 23 23 23 fill; --aer-card: url("sprites/card.dark@1x.png"); --aer-card-slice: 23 23 23 23 fill; --aer-check-mixed: url("sprites/check-mixed.dark@1x.png"); --aer-check-on: url("sprites/check-on.dark@1x.png"); --aer-check: url("sprites/check.dark@1x.png"); --aer-choice-on: url("sprites/choice-on.dark@1x.png"); --aer-choice-on-slice: 25 25 25 25 fill; --aer-dialog: url("sprites/dialog.dark@1x.png"); --aer-dialog-slice: 33 33 33 33 fill; --aer-drop-over: url("sprites/drop-over.dark@1x.png"); --aer-drop-over-slice: 33 33 33 33 fill; --aer-drop: url("sprites/drop.dark@1x.png"); --aer-drop-slice: 33 33 33 33 fill; --aer-field-focus: url("sprites/field-focus.dark@1x.png"); --aer-field-focus-slice: 17 17 17 17 fill; --aer-field: url("sprites/field.dark@1x.png"); --aer-field-slice: 17 17 17 17 fill; --aer-iconbtn-glass-active: url("sprites/iconbtn-glass-active.dark@1x.png"); --aer-iconbtn-glass-hover: url("sprites/iconbtn-glass-hover.dark@1x.png"); --aer-iconbtn-glass: url("sprites/iconbtn-glass.dark@1x.png"); --aer-lens: url("sprites/lens.dark@1x.png"); --aer-lens-slice: 37 37 37 37 fill; --aer-panel: url("sprites/panel.dark@1x.png"); --aer-panel-slice: 27 27 27 27 fill; --aer-progress-tube: url("sprites/progress-tube.dark@1x.png"); --aer-progress-tube-slice: 1 10 1 10 fill; --aer-radio-on: url("sprites/radio-on.dark@1x.png"); --aer-radio: url("sprites/radio.dark@1x.png"); --aer-seg-tray: url("sprites/seg-tray.dark@1x.png"); --aer-seg-tray-slice: 1 21 1 21 fill; --aer-slider-rail: url("sprites/slider-rail.dark@1x.png"); --aer-slider-rail-slice: 1 6 1 6 fill; --aer-toggle-track-on: url("sprites/toggle-track-on.dark@1x.png"); --aer-toggle-track-on-slice: 1 17 1 17 fill; --aer-toggle-track: url("sprites/toggle-track.dark@1x.png"); --aer-toggle-track-slice: 1 17 1 17 fill; } } :root[data-theme="dark"], .aer-dark { --aer-bar: url("sprites/bar.dark@1x.png"); --aer-bar-slice: 27 27 27 27 fill; --aer-btn-glass-l-active: url("sprites/btn-glass-l-active.dark@1x.png"); --aer-btn-glass-l-active-slice: 1 29 1 29 fill; --aer-btn-glass-l-hover: url("sprites/btn-glass-l-hover.dark@1x.png"); --aer-btn-glass-l-hover-slice: 1 29 1 29 fill; --aer-btn-glass-l: url("sprites/btn-glass-l.dark@1x.png"); --aer-btn-glass-l-slice: 1 29 1 29 fill; --aer-btn-glass-m-active: url("sprites/btn-glass-m-active.dark@1x.png"); --aer-btn-glass-m-active-slice: 1 23 1 23 fill; --aer-btn-glass-m-hover: url("sprites/btn-glass-m-hover.dark@1x.png"); --aer-btn-glass-m-hover-slice: 1 23 1 23 fill; --aer-btn-glass-m: url("sprites/btn-glass-m.dark@1x.png"); --aer-btn-glass-m-slice: 1 23 1 23 fill; --aer-btn-glass-s-active: url("sprites/btn-glass-s-active.dark@1x.png"); --aer-btn-glass-s-active-slice: 1 17 1 17 fill; --aer-btn-glass-s-hover: url("sprites/btn-glass-s-hover.dark@1x.png"); --aer-btn-glass-s-hover-slice: 1 17 1 17 fill; --aer-btn-glass-s: url("sprites/btn-glass-s.dark@1x.png"); --aer-btn-glass-s-slice: 1 17 1 17 fill; --aer-card-hover: url("sprites/card-hover.dark@1x.png"); --aer-card-hover-slice: 23 23 23 23 fill; --aer-card: url("sprites/card.dark@1x.png"); --aer-card-slice: 23 23 23 23 fill; --aer-check-mixed: url("sprites/check-mixed.dark@1x.png"); --aer-check-on: url("sprites/check-on.dark@1x.png"); --aer-check: url("sprites/check.dark@1x.png"); --aer-choice-on: url("sprites/choice-on.dark@1x.png"); --aer-choice-on-slice: 25 25 25 25 fill; --aer-dialog: url("sprites/dialog.dark@1x.png"); --aer-dialog-slice: 33 33 33 33 fill; --aer-drop-over: url("sprites/drop-over.dark@1x.png"); --aer-drop-over-slice: 33 33 33 33 fill; --aer-drop: url("sprites/drop.dark@1x.png"); --aer-drop-slice: 33 33 33 33 fill; --aer-field-focus: url("sprites/field-focus.dark@1x.png"); --aer-field-focus-slice: 17 17 17 17 fill; --aer-field: url("sprites/field.dark@1x.png"); --aer-field-slice: 17 17 17 17 fill; --aer-iconbtn-glass-active: url("sprites/iconbtn-glass-active.dark@1x.png"); --aer-iconbtn-glass-hover: url("sprites/iconbtn-glass-hover.dark@1x.png"); --aer-iconbtn-glass: url("sprites/iconbtn-glass.dark@1x.png"); --aer-lens: url("sprites/lens.dark@1x.png"); --aer-lens-slice: 37 37 37 37 fill; --aer-panel: url("sprites/panel.dark@1x.png"); --aer-panel-slice: 27 27 27 27 fill; --aer-progress-tube: url("sprites/progress-tube.dark@1x.png"); --aer-progress-tube-slice: 1 10 1 10 fill; --aer-radio-on: url("sprites/radio-on.dark@1x.png"); --aer-radio: url("sprites/radio.dark@1x.png"); --aer-seg-tray: url("sprites/seg-tray.dark@1x.png"); --aer-seg-tray-slice: 1 21 1 21 fill; --aer-slider-rail: url("sprites/slider-rail.dark@1x.png"); --aer-slider-rail-slice: 1 6 1 6 fill; --aer-toggle-track-on: url("sprites/toggle-track-on.dark@1x.png"); --aer-toggle-track-on-slice: 1 17 1 17 fill; --aer-toggle-track: url("sprites/toggle-track.dark@1x.png"); --aer-toggle-track-slice: 1 17 1 17 fill; } @media (prefers-color-scheme: dark) and (min-resolution: 1.5dppx) { :root:not([data-theme="light"]) { --aer-bar: url("sprites/bar.dark@2x.png"); --aer-bar-slice: 54 54 54 54 fill; --aer-btn-glass-l-active: url("sprites/btn-glass-l-active.dark@2x.png"); --aer-btn-glass-l-active-slice: 2 58 2 58 fill; --aer-btn-glass-l-hover: url("sprites/btn-glass-l-hover.dark@2x.png"); --aer-btn-glass-l-hover-slice: 2 58 2 58 fill; --aer-btn-glass-l: url("sprites/btn-glass-l.dark@2x.png"); --aer-btn-glass-l-slice: 2 58 2 58 fill; --aer-btn-glass-m-active: url("sprites/btn-glass-m-active.dark@2x.png"); --aer-btn-glass-m-active-slice: 2 46 2 46 fill; --aer-btn-glass-m-hover: url("sprites/btn-glass-m-hover.dark@2x.png"); --aer-btn-glass-m-hover-slice: 2 46 2 46 fill; --aer-btn-glass-m: url("sprites/btn-glass-m.dark@2x.png"); --aer-btn-glass-m-slice: 2 46 2 46 fill; --aer-btn-glass-s-active: url("sprites/btn-glass-s-active.dark@2x.png"); --aer-btn-glass-s-active-slice: 2 34 2 34 fill; --aer-btn-glass-s-hover: url("sprites/btn-glass-s-hover.dark@2x.png"); --aer-btn-glass-s-hover-slice: 2 34 2 34 fill; --aer-btn-glass-s: url("sprites/btn-glass-s.dark@2x.png"); --aer-btn-glass-s-slice: 2 34 2 34 fill; --aer-card-hover: url("sprites/card-hover.dark@2x.png"); --aer-card-hover-slice: 46 46 46 46 fill; --aer-card: url("sprites/card.dark@2x.png"); --aer-card-slice: 46 46 46 46 fill; --aer-check-mixed: url("sprites/check-mixed.dark@2x.png"); --aer-check-on: url("sprites/check-on.dark@2x.png"); --aer-check: url("sprites/check.dark@2x.png"); --aer-choice-on: url("sprites/choice-on.dark@2x.png"); --aer-choice-on-slice: 50 50 50 50 fill; --aer-dialog: url("sprites/dialog.dark@2x.png"); --aer-dialog-slice: 66 66 66 66 fill; --aer-drop-over: url("sprites/drop-over.dark@2x.png"); --aer-drop-over-slice: 66 66 66 66 fill; --aer-drop: url("sprites/drop.dark@2x.png"); --aer-drop-slice: 66 66 66 66 fill; --aer-field-focus: url("sprites/field-focus.dark@2x.png"); --aer-field-focus-slice: 34 34 34 34 fill; --aer-field: url("sprites/field.dark@2x.png"); --aer-field-slice: 34 34 34 34 fill; --aer-iconbtn-glass-active: url("sprites/iconbtn-glass-active.dark@2x.png"); --aer-iconbtn-glass-hover: url("sprites/iconbtn-glass-hover.dark@2x.png"); --aer-iconbtn-glass: url("sprites/iconbtn-glass.dark@2x.png"); --aer-lens: url("sprites/lens.dark@2x.png"); --aer-lens-slice: 74 74 74 74 fill; --aer-panel: url("sprites/panel.dark@2x.png"); --aer-panel-slice: 54 54 54 54 fill; --aer-progress-tube: url("sprites/progress-tube.dark@2x.png"); --aer-progress-tube-slice: 2 20 2 20 fill; --aer-radio-on: url("sprites/radio-on.dark@2x.png"); --aer-radio: url("sprites/radio.dark@2x.png"); --aer-seg-tray: url("sprites/seg-tray.dark@2x.png"); --aer-seg-tray-slice: 2 42 2 42 fill; --aer-slider-rail: url("sprites/slider-rail.dark@2x.png"); --aer-slider-rail-slice: 2 12 2 12 fill; --aer-toggle-track-on: url("sprites/toggle-track-on.dark@2x.png"); --aer-toggle-track-on-slice: 2 34 2 34 fill; --aer-toggle-track: url("sprites/toggle-track.dark@2x.png"); --aer-toggle-track-slice: 2 34 2 34 fill; } } @media (min-resolution: 1.5dppx) { :root[data-theme="dark"], .aer-dark { --aer-bar: url("sprites/bar.dark@2x.png"); --aer-bar-slice: 54 54 54 54 fill; --aer-btn-glass-l-active: url("sprites/btn-glass-l-active.dark@2x.png"); --aer-btn-glass-l-active-slice: 2 58 2 58 fill; --aer-btn-glass-l-hover: url("sprites/btn-glass-l-hover.dark@2x.png"); --aer-btn-glass-l-hover-slice: 2 58 2 58 fill; --aer-btn-glass-l: url("sprites/btn-glass-l.dark@2x.png"); --aer-btn-glass-l-slice: 2 58 2 58 fill; --aer-btn-glass-m-active: url("sprites/btn-glass-m-active.dark@2x.png"); --aer-btn-glass-m-active-slice: 2 46 2 46 fill; --aer-btn-glass-m-hover: url("sprites/btn-glass-m-hover.dark@2x.png"); --aer-btn-glass-m-hover-slice: 2 46 2 46 fill; --aer-btn-glass-m: url("sprites/btn-glass-m.dark@2x.png"); --aer-btn-glass-m-slice: 2 46 2 46 fill; --aer-btn-glass-s-active: url("sprites/btn-glass-s-active.dark@2x.png"); --aer-btn-glass-s-active-slice: 2 34 2 34 fill; --aer-btn-glass-s-hover: url("sprites/btn-glass-s-hover.dark@2x.png"); --aer-btn-glass-s-hover-slice: 2 34 2 34 fill; --aer-btn-glass-s: url("sprites/btn-glass-s.dark@2x.png"); --aer-btn-glass-s-slice: 2 34 2 34 fill; --aer-card-hover: url("sprites/card-hover.dark@2x.png"); --aer-card-hover-slice: 46 46 46 46 fill; --aer-card: url("sprites/card.dark@2x.png"); --aer-card-slice: 46 46 46 46 fill; --aer-check-mixed: url("sprites/check-mixed.dark@2x.png"); --aer-check-on: url("sprites/check-on.dark@2x.png"); --aer-check: url("sprites/check.dark@2x.png"); --aer-choice-on: url("sprites/choice-on.dark@2x.png"); --aer-choice-on-slice: 50 50 50 50 fill; --aer-dialog: url("sprites/dialog.dark@2x.png"); --aer-dialog-slice: 66 66 66 66 fill; --aer-drop-over: url("sprites/drop-over.dark@2x.png"); --aer-drop-over-slice: 66 66 66 66 fill; --aer-drop: url("sprites/drop.dark@2x.png"); --aer-drop-slice: 66 66 66 66 fill; --aer-field-focus: url("sprites/field-focus.dark@2x.png"); --aer-field-focus-slice: 34 34 34 34 fill; --aer-field: url("sprites/field.dark@2x.png"); --aer-field-slice: 34 34 34 34 fill; --aer-iconbtn-glass-active: url("sprites/iconbtn-glass-active.dark@2x.png"); --aer-iconbtn-glass-hover: url("sprites/iconbtn-glass-hover.dark@2x.png"); --aer-iconbtn-glass: url("sprites/iconbtn-glass.dark@2x.png"); --aer-lens: url("sprites/lens.dark@2x.png"); --aer-lens-slice: 74 74 74 74 fill; --aer-panel: url("sprites/panel.dark@2x.png"); --aer-panel-slice: 54 54 54 54 fill; --aer-progress-tube: url("sprites/progress-tube.dark@2x.png"); --aer-progress-tube-slice: 2 20 2 20 fill; --aer-radio-on: url("sprites/radio-on.dark@2x.png"); --aer-radio: url("sprites/radio.dark@2x.png"); --aer-seg-tray: url("sprites/seg-tray.dark@2x.png"); --aer-seg-tray-slice: 2 42 2 42 fill; --aer-slider-rail: url("sprites/slider-rail.dark@2x.png"); --aer-slider-rail-slice: 2 12 2 12 fill; --aer-toggle-track-on: url("sprites/toggle-track-on.dark@2x.png"); --aer-toggle-track-on-slice: 2 34 2 34 fill; --aer-toggle-track: url("sprites/toggle-track.dark@2x.png"); --aer-toggle-track-slice: 2 34 2 34 fill; } } @media (prefers-color-scheme: dark) and (min-resolution: 2.5dppx) { :root:not([data-theme="light"]) { --aer-bar: url("sprites/bar.dark@3x.png"); --aer-bar-slice: 81 81 81 81 fill; --aer-btn-glass-l-active: url("sprites/btn-glass-l-active.dark@3x.png"); --aer-btn-glass-l-active-slice: 3 87 3 87 fill; --aer-btn-glass-l-hover: url("sprites/btn-glass-l-hover.dark@3x.png"); --aer-btn-glass-l-hover-slice: 3 87 3 87 fill; --aer-btn-glass-l: url("sprites/btn-glass-l.dark@3x.png"); --aer-btn-glass-l-slice: 3 87 3 87 fill; --aer-btn-glass-m-active: url("sprites/btn-glass-m-active.dark@3x.png"); --aer-btn-glass-m-active-slice: 3 69 3 69 fill; --aer-btn-glass-m-hover: url("sprites/btn-glass-m-hover.dark@3x.png"); --aer-btn-glass-m-hover-slice: 3 69 3 69 fill; --aer-btn-glass-m: url("sprites/btn-glass-m.dark@3x.png"); --aer-btn-glass-m-slice: 3 69 3 69 fill; --aer-btn-glass-s-active: url("sprites/btn-glass-s-active.dark@3x.png"); --aer-btn-glass-s-active-slice: 3 51 3 51 fill; --aer-btn-glass-s-hover: url("sprites/btn-glass-s-hover.dark@3x.png"); --aer-btn-glass-s-hover-slice: 3 51 3 51 fill; --aer-btn-glass-s: url("sprites/btn-glass-s.dark@3x.png"); --aer-btn-glass-s-slice: 3 51 3 51 fill; --aer-card-hover: url("sprites/card-hover.dark@3x.png"); --aer-card-hover-slice: 69 69 69 69 fill; --aer-card: url("sprites/card.dark@3x.png"); --aer-card-slice: 69 69 69 69 fill; --aer-check-mixed: url("sprites/check-mixed.dark@3x.png"); --aer-check-on: url("sprites/check-on.dark@3x.png"); --aer-check: url("sprites/check.dark@3x.png"); --aer-choice-on: url("sprites/choice-on.dark@3x.png"); --aer-choice-on-slice: 75 75 75 75 fill; --aer-dialog: url("sprites/dialog.dark@3x.png"); --aer-dialog-slice: 99 99 99 99 fill; --aer-drop-over: url("sprites/drop-over.dark@3x.png"); --aer-drop-over-slice: 99 99 99 99 fill; --aer-drop: url("sprites/drop.dark@3x.png"); --aer-drop-slice: 99 99 99 99 fill; --aer-field-focus: url("sprites/field-focus.dark@3x.png"); --aer-field-focus-slice: 51 51 51 51 fill; --aer-field: url("sprites/field.dark@3x.png"); --aer-field-slice: 51 51 51 51 fill; --aer-iconbtn-glass-active: url("sprites/iconbtn-glass-active.dark@3x.png"); --aer-iconbtn-glass-hover: url("sprites/iconbtn-glass-hover.dark@3x.png"); --aer-iconbtn-glass: url("sprites/iconbtn-glass.dark@3x.png"); --aer-lens: url("sprites/lens.dark@3x.png"); --aer-lens-slice: 111 111 111 111 fill; --aer-panel: url("sprites/panel.dark@3x.png"); --aer-panel-slice: 81 81 81 81 fill; --aer-progress-tube: url("sprites/progress-tube.dark@3x.png"); --aer-progress-tube-slice: 3 30 3 30 fill; --aer-radio-on: url("sprites/radio-on.dark@3x.png"); --aer-radio: url("sprites/radio.dark@3x.png"); --aer-seg-tray: url("sprites/seg-tray.dark@3x.png"); --aer-seg-tray-slice: 3 63 3 63 fill; --aer-slider-rail: url("sprites/slider-rail.dark@3x.png"); --aer-slider-rail-slice: 3 18 3 18 fill; --aer-toggle-track-on: url("sprites/toggle-track-on.dark@3x.png"); --aer-toggle-track-on-slice: 3 51 3 51 fill; --aer-toggle-track: url("sprites/toggle-track.dark@3x.png"); --aer-toggle-track-slice: 3 51 3 51 fill; } } @media (min-resolution: 2.5dppx) { :root[data-theme="dark"], .aer-dark { --aer-bar: url("sprites/bar.dark@3x.png"); --aer-bar-slice: 81 81 81 81 fill; --aer-btn-glass-l-active: url("sprites/btn-glass-l-active.dark@3x.png"); --aer-btn-glass-l-active-slice: 3 87 3 87 fill; --aer-btn-glass-l-hover: url("sprites/btn-glass-l-hover.dark@3x.png"); --aer-btn-glass-l-hover-slice: 3 87 3 87 fill; --aer-btn-glass-l: url("sprites/btn-glass-l.dark@3x.png"); --aer-btn-glass-l-slice: 3 87 3 87 fill; --aer-btn-glass-m-active: url("sprites/btn-glass-m-active.dark@3x.png"); --aer-btn-glass-m-active-slice: 3 69 3 69 fill; --aer-btn-glass-m-hover: url("sprites/btn-glass-m-hover.dark@3x.png"); --aer-btn-glass-m-hover-slice: 3 69 3 69 fill; --aer-btn-glass-m: url("sprites/btn-glass-m.dark@3x.png"); --aer-btn-glass-m-slice: 3 69 3 69 fill; --aer-btn-glass-s-active: url("sprites/btn-glass-s-active.dark@3x.png"); --aer-btn-glass-s-active-slice: 3 51 3 51 fill; --aer-btn-glass-s-hover: url("sprites/btn-glass-s-hover.dark@3x.png"); --aer-btn-glass-s-hover-slice: 3 51 3 51 fill; --aer-btn-glass-s: url("sprites/btn-glass-s.dark@3x.png"); --aer-btn-glass-s-slice: 3 51 3 51 fill; --aer-card-hover: url("sprites/card-hover.dark@3x.png"); --aer-card-hover-slice: 69 69 69 69 fill; --aer-card: url("sprites/card.dark@3x.png"); --aer-card-slice: 69 69 69 69 fill; --aer-check-mixed: url("sprites/check-mixed.dark@3x.png"); --aer-check-on: url("sprites/check-on.dark@3x.png"); --aer-check: url("sprites/check.dark@3x.png"); --aer-choice-on: url("sprites/choice-on.dark@3x.png"); --aer-choice-on-slice: 75 75 75 75 fill; --aer-dialog: url("sprites/dialog.dark@3x.png"); --aer-dialog-slice: 99 99 99 99 fill; --aer-drop-over: url("sprites/drop-over.dark@3x.png"); --aer-drop-over-slice: 99 99 99 99 fill; --aer-drop: url("sprites/drop.dark@3x.png"); --aer-drop-slice: 99 99 99 99 fill; --aer-field-focus: url("sprites/field-focus.dark@3x.png"); --aer-field-focus-slice: 51 51 51 51 fill; --aer-field: url("sprites/field.dark@3x.png"); --aer-field-slice: 51 51 51 51 fill; --aer-iconbtn-glass-active: url("sprites/iconbtn-glass-active.dark@3x.png"); --aer-iconbtn-glass-hover: url("sprites/iconbtn-glass-hover.dark@3x.png"); --aer-iconbtn-glass: url("sprites/iconbtn-glass.dark@3x.png"); --aer-lens: url("sprites/lens.dark@3x.png"); --aer-lens-slice: 111 111 111 111 fill; --aer-panel: url("sprites/panel.dark@3x.png"); --aer-panel-slice: 81 81 81 81 fill; --aer-progress-tube: url("sprites/progress-tube.dark@3x.png"); --aer-progress-tube-slice: 3 30 3 30 fill; --aer-radio-on: url("sprites/radio-on.dark@3x.png"); --aer-radio: url("sprites/radio.dark@3x.png"); --aer-seg-tray: url("sprites/seg-tray.dark@3x.png"); --aer-seg-tray-slice: 3 63 3 63 fill; --aer-slider-rail: url("sprites/slider-rail.dark@3x.png"); --aer-slider-rail-slice: 3 18 3 18 fill; --aer-toggle-track-on: url("sprites/toggle-track-on.dark@3x.png"); --aer-toggle-track-on-slice: 3 51 3 51 fill; --aer-toggle-track: url("sprites/toggle-track.dark@3x.png"); --aer-toggle-track-slice: 3 51 3 51 fill; } } /* ---- skins.css ---- */ /* generated by build/build.py: component state -> sprite */ .aer-button { --_img: var(--aer-btn-primary-m); --_slice: var(--aer-btn-primary-m-slice); --_bw: var(--aer-btn-primary-m-border); --_out: var(--aer-btn-primary-m-outset); } .aer-button:hover { --_img: var(--aer-btn-primary-m-hover); --_slice: var(--aer-btn-primary-m-hover-slice); --_bw: var(--aer-btn-primary-m-hover-border); --_out: var(--aer-btn-primary-m-hover-outset); } .aer-button:active, .aer-button[aria-pressed="true"] { --_img: var(--aer-btn-primary-m-active); --_slice: var(--aer-btn-primary-m-active-slice); --_bw: var(--aer-btn-primary-m-active-border); --_out: var(--aer-btn-primary-m-active-outset); } .aer-button.aer-s { --_img: var(--aer-btn-primary-s); --_slice: var(--aer-btn-primary-s-slice); --_bw: var(--aer-btn-primary-s-border); --_out: var(--aer-btn-primary-s-outset); } .aer-button.aer-s:hover { --_img: var(--aer-btn-primary-s-hover); --_slice: var(--aer-btn-primary-s-hover-slice); --_bw: var(--aer-btn-primary-s-hover-border); --_out: var(--aer-btn-primary-s-hover-outset); } .aer-button.aer-s:active, .aer-button.aer-s[aria-pressed="true"] { --_img: var(--aer-btn-primary-s-active); --_slice: var(--aer-btn-primary-s-active-slice); --_bw: var(--aer-btn-primary-s-active-border); --_out: var(--aer-btn-primary-s-active-outset); } .aer-button.aer-l { --_img: var(--aer-btn-primary-l); --_slice: var(--aer-btn-primary-l-slice); --_bw: var(--aer-btn-primary-l-border); --_out: var(--aer-btn-primary-l-outset); } .aer-button.aer-l:hover { --_img: var(--aer-btn-primary-l-hover); --_slice: var(--aer-btn-primary-l-hover-slice); --_bw: var(--aer-btn-primary-l-hover-border); --_out: var(--aer-btn-primary-l-hover-outset); } .aer-button.aer-l:active, .aer-button.aer-l[aria-pressed="true"] { --_img: var(--aer-btn-primary-l-active); --_slice: var(--aer-btn-primary-l-active-slice); --_bw: var(--aer-btn-primary-l-active-border); --_out: var(--aer-btn-primary-l-active-outset); } .aer-button.aer-secondary { --_img: var(--aer-btn-secondary-m); --_slice: var(--aer-btn-secondary-m-slice); --_bw: var(--aer-btn-secondary-m-border); --_out: var(--aer-btn-secondary-m-outset); } .aer-button.aer-secondary:hover { --_img: var(--aer-btn-secondary-m-hover); --_slice: var(--aer-btn-secondary-m-hover-slice); --_bw: var(--aer-btn-secondary-m-hover-border); --_out: var(--aer-btn-secondary-m-hover-outset); } .aer-button.aer-secondary:active, .aer-button.aer-secondary[aria-pressed="true"] { --_img: var(--aer-btn-secondary-m-active); --_slice: var(--aer-btn-secondary-m-active-slice); --_bw: var(--aer-btn-secondary-m-active-border); --_out: var(--aer-btn-secondary-m-active-outset); } .aer-button.aer-secondary.aer-s { --_img: var(--aer-btn-secondary-s); --_slice: var(--aer-btn-secondary-s-slice); --_bw: var(--aer-btn-secondary-s-border); --_out: var(--aer-btn-secondary-s-outset); } .aer-button.aer-secondary.aer-s:hover { --_img: var(--aer-btn-secondary-s-hover); --_slice: var(--aer-btn-secondary-s-hover-slice); --_bw: var(--aer-btn-secondary-s-hover-border); --_out: var(--aer-btn-secondary-s-hover-outset); } .aer-button.aer-secondary.aer-s:active, .aer-button.aer-secondary.aer-s[aria-pressed="true"] { --_img: var(--aer-btn-secondary-s-active); --_slice: var(--aer-btn-secondary-s-active-slice); --_bw: var(--aer-btn-secondary-s-active-border); --_out: var(--aer-btn-secondary-s-active-outset); } .aer-button.aer-secondary.aer-l { --_img: var(--aer-btn-secondary-l); --_slice: var(--aer-btn-secondary-l-slice); --_bw: var(--aer-btn-secondary-l-border); --_out: var(--aer-btn-secondary-l-outset); } .aer-button.aer-secondary.aer-l:hover { --_img: var(--aer-btn-secondary-l-hover); --_slice: var(--aer-btn-secondary-l-hover-slice); --_bw: var(--aer-btn-secondary-l-hover-border); --_out: var(--aer-btn-secondary-l-hover-outset); } .aer-button.aer-secondary.aer-l:active, .aer-button.aer-secondary.aer-l[aria-pressed="true"] { --_img: var(--aer-btn-secondary-l-active); --_slice: var(--aer-btn-secondary-l-active-slice); --_bw: var(--aer-btn-secondary-l-active-border); --_out: var(--aer-btn-secondary-l-active-outset); } .aer-button.aer-quiet { --_img: var(--aer-btn-glass-m); --_slice: var(--aer-btn-glass-m-slice); --_bw: var(--aer-btn-glass-m-border); --_out: var(--aer-btn-glass-m-outset); } .aer-button.aer-quiet:hover { --_img: var(--aer-btn-glass-m-hover); --_slice: var(--aer-btn-glass-m-hover-slice); --_bw: var(--aer-btn-glass-m-hover-border); --_out: var(--aer-btn-glass-m-hover-outset); } .aer-button.aer-quiet:active, .aer-button.aer-quiet[aria-pressed="true"] { --_img: var(--aer-btn-glass-m-active); --_slice: var(--aer-btn-glass-m-active-slice); --_bw: var(--aer-btn-glass-m-active-border); --_out: var(--aer-btn-glass-m-active-outset); } .aer-button.aer-quiet.aer-s { --_img: var(--aer-btn-glass-s); --_slice: var(--aer-btn-glass-s-slice); --_bw: var(--aer-btn-glass-s-border); --_out: var(--aer-btn-glass-s-outset); } .aer-button.aer-quiet.aer-s:hover { --_img: var(--aer-btn-glass-s-hover); --_slice: var(--aer-btn-glass-s-hover-slice); --_bw: var(--aer-btn-glass-s-hover-border); --_out: var(--aer-btn-glass-s-hover-outset); } .aer-button.aer-quiet.aer-s:active, .aer-button.aer-quiet.aer-s[aria-pressed="true"] { --_img: var(--aer-btn-glass-s-active); --_slice: var(--aer-btn-glass-s-active-slice); --_bw: var(--aer-btn-glass-s-active-border); --_out: var(--aer-btn-glass-s-active-outset); } .aer-button.aer-quiet.aer-l { --_img: var(--aer-btn-glass-l); --_slice: var(--aer-btn-glass-l-slice); --_bw: var(--aer-btn-glass-l-border); --_out: var(--aer-btn-glass-l-outset); } .aer-button.aer-quiet.aer-l:hover { --_img: var(--aer-btn-glass-l-hover); --_slice: var(--aer-btn-glass-l-hover-slice); --_bw: var(--aer-btn-glass-l-hover-border); --_out: var(--aer-btn-glass-l-hover-outset); } .aer-button.aer-quiet.aer-l:active, .aer-button.aer-quiet.aer-l[aria-pressed="true"] { --_img: var(--aer-btn-glass-l-active); --_slice: var(--aer-btn-glass-l-active-slice); --_bw: var(--aer-btn-glass-l-active-border); --_out: var(--aer-btn-glass-l-active-outset); } .aer-button:disabled, .aer-button[aria-disabled="true"] { --_img: var(--aer-btn-disabled-m); --_slice: var(--aer-btn-disabled-m-slice); --_bw: var(--aer-btn-disabled-m-border); --_out: var(--aer-btn-disabled-m-outset); } .aer-button.aer-s:disabled, .aer-button.aer-s[aria-disabled="true"] { --_img: var(--aer-btn-disabled-s); --_slice: var(--aer-btn-disabled-s-slice); --_bw: var(--aer-btn-disabled-s-border); --_out: var(--aer-btn-disabled-s-outset); } .aer-button.aer-l:disabled, .aer-button.aer-l[aria-disabled="true"] { --_img: var(--aer-btn-disabled-l); --_slice: var(--aer-btn-disabled-l-slice); --_bw: var(--aer-btn-disabled-l-border); --_out: var(--aer-btn-disabled-l-outset); } .aer-button.aer-secondary:disabled, .aer-button.aer-secondary[aria-disabled="true"] { --_img: var(--aer-btn-disabled-m); --_slice: var(--aer-btn-disabled-m-slice); --_bw: var(--aer-btn-disabled-m-border); --_out: var(--aer-btn-disabled-m-outset); } .aer-button.aer-secondary.aer-s:disabled, .aer-button.aer-secondary.aer-s[aria-disabled="true"] { --_img: var(--aer-btn-disabled-s); --_slice: var(--aer-btn-disabled-s-slice); --_bw: var(--aer-btn-disabled-s-border); --_out: var(--aer-btn-disabled-s-outset); } .aer-button.aer-secondary.aer-l:disabled, .aer-button.aer-secondary.aer-l[aria-disabled="true"] { --_img: var(--aer-btn-disabled-l); --_slice: var(--aer-btn-disabled-l-slice); --_bw: var(--aer-btn-disabled-l-border); --_out: var(--aer-btn-disabled-l-outset); } .aer-button.aer-quiet:disabled, .aer-button.aer-quiet[aria-disabled="true"] { --_img: var(--aer-btn-disabled-m); --_slice: var(--aer-btn-disabled-m-slice); --_bw: var(--aer-btn-disabled-m-border); --_out: var(--aer-btn-disabled-m-outset); } .aer-button.aer-quiet.aer-s:disabled, .aer-button.aer-quiet.aer-s[aria-disabled="true"] { --_img: var(--aer-btn-disabled-s); --_slice: var(--aer-btn-disabled-s-slice); --_bw: var(--aer-btn-disabled-s-border); --_out: var(--aer-btn-disabled-s-outset); } .aer-button.aer-quiet.aer-l:disabled, .aer-button.aer-quiet.aer-l[aria-disabled="true"] { --_img: var(--aer-btn-disabled-l); --_slice: var(--aer-btn-disabled-l-slice); --_bw: var(--aer-btn-disabled-l-border); --_out: var(--aer-btn-disabled-l-outset); } /* ---- icons.css ---- */ /* generated by build/build.py: icon atlases */ .aer-icon { --_s: 24px; --_m: 3px; --_c: calc(var(--_s) + 2 * var(--_m)); --_i: 0; --_j: 0; display: inline-block; position: relative; flex: none; inline-size: var(--_s); block-size: var(--_s); vertical-align: middle; } .aer-icon::before { content: ""; position: absolute; inset: calc(-1 * var(--_m)); pointer-events: none; background: var(--_atlas) no-repeat; background-size: var(--_bs); background-position: calc(var(--_i) * -1 * var(--_c)) calc(var(--_j) * -1 * var(--_c)); } .aer-icon.aer-pearl, :is(.aer-button, .aer-iconbtn):not(.aer-quiet) .aer-icon:not(.aer-aqua) { --_j: 1; } .aer-icon-heart { --_i: 0; } .aer-icon-heart-outline { --_i: 1; } .aer-icon-close { --_i: 2; } .aer-icon-menu { --_i: 3; } .aer-icon-arrow-left { --_i: 4; } .aer-icon-arrow-right { --_i: 5; } .aer-icon-chevron-down { --_i: 6; } .aer-icon-swap { --_i: 7; } .aer-icon-play { --_i: 8; } .aer-icon-help { --_i: 9; } .aer-icon-info { --_i: 10; } .aer-icon-error { --_i: 11; } .aer-icon-warning { --_i: 12; } .aer-icon-gear { --_i: 13; } .aer-icon-undo { --_i: 14; } .aer-icon-redo { --_i: 15; } .aer-icon-plus { --_i: 16; } .aer-icon-minus { --_i: 17; } .aer-icon-fit { --_i: 18; } .aer-icon-search { --_i: 19; } .aer-icon-download { --_i: 20; } .aer-icon-upload { --_i: 21; } .aer-icon-copy { --_i: 22; } .aer-icon-check { --_i: 23; } .aer-icon-file { --_i: 24; } .aer-icon-pdf { --_i: 25; } .aer-icon-text { --_i: 26; } .aer-icon-image { --_i: 27; } .aer-icon-code { --_i: 28; } .aer-icon-clock { --_i: 29; } .aer-icon-colour { --_i: 30; } .aer-icon-pin { --_i: 31; } .aer-icon-lock { --_i: 32; } .aer-icon-sun { --_i: 33; } .aer-icon-moon { --_i: 34; } .aer-icon { --_bs: 1050px 60px; --_atlas: var(--aer-icons-24); } :root { --aer-icons-24: url("sprites/icons-24@1x.png"); } @media (min-resolution: 1.5dppx) { :root { --aer-icons-24: url("sprites/icons-24@2x.png"); } } @media (min-resolution: 2.5dppx) { :root { --aer-icons-24: url("sprites/icons-24@3x.png"); } } .aer-icon.aer-s { --_s: 16px; --_m: 2px; } .aer-icon.aer-s { --_bs: 700px 40px; --_atlas: var(--aer-icons-16); } :root { --aer-icons-16: url("sprites/icons-16@1x.png"); } @media (min-resolution: 1.5dppx) { :root { --aer-icons-16: url("sprites/icons-16@2x.png"); } } @media (min-resolution: 2.5dppx) { :root { --aer-icons-16: url("sprites/icons-16@3x.png"); } } .aer-select::after { content: ""; position: absolute; pointer-events: none; inset-inline-end: 10px; inset-block-start: calc(50% - 10px); inline-size: 20px; block-size: 20px; background: var(--aer-icons-16) no-repeat -120px 0 / 700px 40px; } :root { --aer-spin: url("sprites/spin@1x.png"); --aer-spin-cell: 38px 38px; } @media (min-resolution: 1.5dppx) { :root { --aer-spin: url("sprites/spin@2x.png"); --aer-spin-cell: 38px 38px; } } @media (min-resolution: 2.5dppx) { :root { --aer-spin: url("sprites/spin@3x.png"); --aer-spin-cell: 38px 38px; } } @media (forced-colors: active) { .aer-icon::before { forced-color-adjust: none; background: CanvasText; mask: var(--_atlas) no-repeat; mask-size: var(--_bs); mask-position: calc(var(--_i) * -1 * var(--_c)) calc(var(--_j) * -1 * var(--_c)); } } /* ---- components.css ---- */ /* Aerolith — components. Load order: base.css, dist/sprites.css, dist/skins.css, components.css. Every skin sits on a native element (button, input, progress…), so keyboard, forms, screen readers and forced colours keep working without the sprites. One drawing mechanism for all sprites: border-image. --_img the sprite (url, per device resolution and theme, from sprites.css) --_slice its border-image-slice (raw image px + fill); "0 fill" for unsliced sprites --_bw border-image-width: the slice insets in CSS px, so caps and corners draw 1:1 --_out border-image-outset: glow/glint beyond the object outline The element's own box is the rendered object's outline; layout never sees the glow. */ .aer-sprite { border-style: solid; border-color: transparent; border-width: 0; border-image-source: var(--_img); border-image-slice: var(--_slice, 0 fill); border-image-width: var(--_bw, 0); border-image-outset: var(--_out, 0); border-image-repeat: stretch; background: none; } /* ------------------------------------------------------------------ button Sprite per colour x size x state (skins.css). Height is the rendered outline: 32/44/56. */ .aer-button { --_h: var(--aer-control-m); border-style: solid; border-color: transparent; border-width: 0; border-image-source: var(--_img); border-image-slice: var(--_slice); border-image-width: var(--_bw); border-image-outset: var(--_out); border-image-repeat: stretch; background: none; appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--aer-space-2); block-size: var(--_h); min-inline-size: calc(var(--_h) * 2); padding: 0 calc(var(--_h) * 0.5); /* label stays on the flat face, clear of the caps */ margin: 0; font: 600 var(--aer-text-m) / 1 var(--aer-font-ui); letter-spacing: 0.01em; color: #fff; text-shadow: 0 1px 1px rgba(4, 30, 70, 0.55); text-decoration: none; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } /* label contrast on the gloss is ~4.4:1 bare; the halo lifts it. Hover (lighter) and pressed (the dished face lights its lower edge) get a stronger halo: transient states, look first. */ .aer-button:not(.aer-quiet):hover { text-shadow: 0 0 2px rgba(4, 30, 70, 0.7), 0 1px 2px rgba(4, 30, 70, 0.6); } .aer-button:active, .aer-button[aria-pressed="true"] { padding-block-start: 2px; } .aer-button:not(.aer-quiet):active, .aer-button:not(.aer-quiet)[aria-pressed="true"] { text-shadow: 0 0 2px rgba(4, 30, 70, 0.9), 0 0 5px rgba(4, 30, 70, 0.7), 0 1px 2px rgba(4, 30, 70, 0.8); } .aer-button.aer-s { --_h: var(--aer-control-s); font-size: var(--aer-text-s); } .aer-button.aer-l { --_h: var(--aer-control-l); font-size: var(--aer-text-l); } .aer-button.aer-secondary { text-shadow: 0 1px 1px rgba(4, 50, 20, 0.6); } /* clear glass: dark ink in both themes (measured on the sprites: >= 4.6:1 light and dark, light ink on dark-theme glass would fall to ~2.8:1) */ .aer-button.aer-quiet { color: #0d2236; text-shadow: 0 0 2px rgba(255, 255, 255, 0.7), 0 1px 0 rgba(255, 255, 255, 0.5); } .aer-button:disabled, .aer-button[aria-disabled="true"] { color: #f4f8fb; text-shadow: 0 1px 1px rgba(40, 60, 80, 0.6); cursor: not-allowed; } .aer-button > svg { inline-size: 1.25em; block-size: 1.25em; flex: none; } .aer-button > .aer-icon { margin-inline: -2px; } /* ------------------------------------------------------------------ toggle: */ .aer-toggle { --_w: 56px; --_h: 32px; --_k: 26px; --_img: var(--aer-toggle-track); --_slice: var(--aer-toggle-track-slice); --_bw: var(--aer-toggle-track-border); --_out: var(--aer-toggle-track-outset); appearance: none; margin: 0; flex: none; position: relative; display: inline-block; vertical-align: middle; box-sizing: border-box; inline-size: var(--_w); block-size: var(--_h); border-style: solid; border-color: transparent; border-width: 0; border-image: var(--_img) var(--_slice) / var(--_bw) / var(--_out) stretch; background: none; cursor: pointer; } .aer-toggle::before { content: ""; position: absolute; inset-block-start: calc((var(--_h) - var(--_k)) / 2); inset-inline-start: calc((var(--_h) - var(--_k)) / 2); inline-size: var(--_k); block-size: var(--_k); border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-toggle-knob) 0 fill / 0 / var(--aer-toggle-knob-outset) stretch; transition: translate 200ms cubic-bezier(.3, 1.5, .5, 1); } .aer-toggle:checked { --_img: var(--aer-toggle-track-on); --_slice: var(--aer-toggle-track-on-slice); --_bw: var(--aer-toggle-track-on-border); --_out: var(--aer-toggle-track-on-outset); } .aer-toggle:checked::before { border-image: var(--aer-toggle-knob-on) 0 fill / 0 / var(--aer-toggle-knob-on-outset) stretch; translate: calc(var(--_w) - var(--_h)) 0; } .aer-toggle:checked:dir(rtl)::before { translate: calc(var(--_h) - var(--_w)) 0; } .aer-toggle:disabled { opacity: 0.5; filter: saturate(0.2); cursor: not-allowed; } /* ------------------------------------------------------------------ checkbox / radio */ .aer-check, .aer-radio { appearance: none; margin: 0; flex: none; box-sizing: border-box; inline-size: 26px; block-size: 26px; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-check) 0 fill / 0 / var(--aer-check-outset) stretch; background: none; vertical-align: middle; cursor: pointer; } .aer-check:checked { border-image: var(--aer-check-on) 0 fill / 0 / var(--aer-check-on-outset) stretch; } .aer-check:indeterminate { border-image: var(--aer-check-mixed) 0 fill / 0 / var(--aer-check-mixed-outset) stretch; } .aer-radio { border-image: var(--aer-radio) 0 fill / 0 / var(--aer-radio-outset) stretch; } .aer-radio:checked { border-image: var(--aer-radio-on) 0 fill / 0 / var(--aer-radio-on-outset) stretch; } .aer-check:disabled, .aer-radio:disabled { opacity: 0.5; filter: saturate(0.2); cursor: not-allowed; } /* a label row gives every small control a full 44px target */ .aer-option { display: inline-flex; align-items: center; gap: var(--aer-space-3); min-block-size: var(--aer-control); color: var(--aer-ink); font: var(--aer-text-m) / var(--aer-leading) var(--aer-font-text); cursor: pointer; } .aer-option:has(:disabled) { color: var(--aer-ink-muted); cursor: not-allowed; } /* ------------------------------------------------------------------ text field: recessed well (9-slice) */ .aer-field { border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-field) var(--aer-field-slice) / var(--aer-field-border) / var(--aer-field-outset) stretch; background: none; appearance: none; box-sizing: border-box; block-size: var(--aer-control); min-inline-size: 0; padding: 0 var(--aer-space-4); margin: 0; font: var(--aer-text-m) / 1.2 var(--aer-font-text); color: var(--aer-ink); } .aer-field::placeholder { color: var(--aer-ink-muted); opacity: 1; } .aer-field:focus { border-image: var(--aer-field-focus) var(--aer-field-focus-slice) / var(--aer-field-focus-border) / var(--aer-field-focus-outset) stretch; } textarea.aer-field { block-size: auto; min-block-size: calc(var(--aer-control) * 2); padding-block: var(--aer-space-3); resize: vertical; line-height: var(--aer-leading); } .aer-field:disabled, .aer-field[readonly] { color: var(--aer-ink-muted); } .aer-label { display: grid; gap: var(--aer-space-1); font: 600 var(--aer-text-s) / 1.3 var(--aer-font-ui); color: var(--aer-ink); } /* ------------------------------------------------------------------ panel / card: frosted glass (9-slice); dark pages get smoked glass (sprites.css swaps the image) */ .aer-panel, .aer-card { border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-panel) var(--aer-panel-slice) / var(--aer-panel-border) / var(--aer-panel-outset) stretch; background: none; padding: var(--aer-space-5); color: var(--aer-ink); } .aer-card { border-image: var(--aer-card) var(--aer-card-slice) / var(--aer-card-border) / var(--aer-card-outset) stretch; padding: var(--aer-space-4); } a.aer-card { display: block; text-decoration: none; } a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover { border-image: var(--aer-card-hover) var(--aer-card-hover-slice) / var(--aer-card-hover-border) / var(--aer-card-hover-outset) stretch; } /* ------------------------------------------------------------------ progress: glass tube + liquid () */ .aer-progress { --_inset: 3px; appearance: none; -webkit-appearance: none; display: block; inline-size: 100%; block-size: 18px; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-progress-tube) var(--aer-progress-tube-slice) / var(--aer-progress-tube-border) / var(--aer-progress-tube-outset) stretch; background: none; padding: var(--_inset); box-sizing: border-box; color: transparent; } .aer-progress::-webkit-progress-bar { background: transparent; } .aer-progress::-webkit-progress-value { border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-progress-fill) var(--aer-progress-fill-slice) / var(--aer-progress-fill-border) / var(--aer-progress-fill-outset) stretch; background: none; min-inline-size: 12px; transition: inline-size 300ms ease; } .aer-progress::-moz-progress-bar { border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-progress-fill) var(--aer-progress-fill-slice) / var(--aer-progress-fill-border) / var(--aer-progress-fill-outset) stretch; background: none; min-inline-size: 12px; } /* ------------------------------------------------------------------ slider: rail = the wrapper, liquid fill = ::before (width from --aer-fill, kept in sync by aerolith.js), thumb = a pearl. Without JS: rail + thumb, no fill. */ .aer-slider { --aer-fill: 0; /* 0..1, set by aerolith.js */ --_rail: 10px; --_thumb: 24px; position: relative; display: block; block-size: var(--aer-control); } .aer-slider::after, .aer-slider::before { content: ""; position: absolute; pointer-events: none; border-style: solid; border-color: transparent; border-width: 0; } .aer-slider::after { /* rail */ inset-inline: calc(var(--_thumb) / 2 - var(--_rail) / 2); inset-block-start: calc(50% - var(--_rail) / 2); block-size: var(--_rail); border-image: var(--aer-slider-rail) var(--aer-slider-rail-slice) / var(--aer-slider-rail-border) / var(--aer-slider-rail-outset) stretch; z-index: 0; } .aer-slider::before { /* liquid fill: from the rail start to the thumb centre */ inset-inline-start: calc(var(--_thumb) / 2 - var(--_rail) / 2 + 2px); inset-block-start: calc(50% - 3px); block-size: 6px; inline-size: calc((100% - var(--_thumb)) * var(--aer-fill) + var(--_rail) / 2); border-image: var(--aer-slider-fill) var(--aer-slider-fill-slice) / var(--aer-slider-fill-border) / var(--aer-slider-fill-outset) stretch; z-index: 1; } .aer-slider:not([data-aer-ready])::before { display: none; } .aer-slider > input[type="range"] { position: relative; z-index: 2; appearance: none; -webkit-appearance: none; background: none; margin: 0; inline-size: 100%; block-size: 100%; cursor: pointer; } .aer-slider > input::-webkit-slider-runnable-track { background: none; block-size: var(--_thumb); } .aer-slider > input::-moz-range-track { background: none; block-size: var(--_thumb); } .aer-slider > input::-webkit-slider-thumb { -webkit-appearance: none; inline-size: var(--_thumb); block-size: var(--_thumb); border: 0; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-slider-thumb) 0 fill / 0 / var(--aer-slider-thumb-outset) stretch; background: none; } .aer-slider > input::-moz-range-thumb { inline-size: var(--_thumb); block-size: var(--_thumb); border: 0; border-radius: 0; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-slider-thumb) 0 fill / 0 / var(--aer-slider-thumb-outset) stretch; background: none; } /* ------------------------------------------------------------------ badges (gem pills) + status orbs */ .aer-badge { --_g: ok; display: inline-flex; align-items: center; box-sizing: border-box; block-size: 22px; padding: 0 10px; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-badge-ok) var(--aer-badge-ok-slice) / var(--aer-badge-ok-border) / var(--aer-badge-ok-outset) stretch; font: 700 var(--aer-text-xs) / 1 var(--aer-font-ui); letter-spacing: 0.02em; color: #fff; text-shadow: 0 0 2px rgba(0, 30, 10, 0.8), 0 1px 1px rgba(0, 30, 10, 0.7); white-space: nowrap; vertical-align: middle; } .aer-badge.aer-info { border-image: var(--aer-badge-info) var(--aer-badge-info-slice) / var(--aer-badge-info-border) / var(--aer-badge-info-outset) stretch; text-shadow: 0 0 2px rgba(4, 30, 70, 0.8), 0 1px 1px rgba(4, 30, 70, 0.7); } .aer-badge.aer-warn { border-image: var(--aer-badge-warn) var(--aer-badge-warn-slice) / var(--aer-badge-warn-border) / var(--aer-badge-warn-outset) stretch; color: #2a1800; text-shadow: 0 0 2px rgba(255, 240, 200, 0.7); } .aer-badge.aer-error { border-image: var(--aer-badge-error) var(--aer-badge-error-slice) / var(--aer-badge-error-border) / var(--aer-badge-error-outset) stretch; text-shadow: 0 0 2px rgba(60, 0, 10, 0.85), 0 1px 1px rgba(60, 0, 10, 0.7); } .aer-orb { display: inline-block; inline-size: 16px; block-size: 16px; flex: none; vertical-align: middle; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-orb-ok) 0 fill / 0 / var(--aer-orb-ok-outset) stretch; } .aer-orb.aer-info { border-image: var(--aer-orb-info) 0 fill / 0 / var(--aer-orb-info-outset) stretch; } .aer-orb.aer-warn { border-image: var(--aer-orb-warn) 0 fill / 0 / var(--aer-orb-warn-outset) stretch; } .aer-orb.aer-error { border-image: var(--aer-orb-error) 0 fill / 0 / var(--aer-orb-error-outset) stretch; } /* ------------------------------------------------------------------ icon button: 44 px orb + one glyph aqua gloss by default (pearl glyph), .aer-quiet = clear glass (aqua glyph) */ .aer-iconbtn { --_n: var(--aer-iconbtn-primary); --_o: var(--aer-iconbtn-primary-outset); appearance: none; margin: 0; padding: 0; flex: none; box-sizing: border-box; display: inline-grid; place-items: center; vertical-align: middle; inline-size: 44px; block-size: 44px; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--_n) 0 fill / 0 / var(--_o) stretch; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .aer-iconbtn:hover { --_n: var(--aer-iconbtn-primary-hover); --_o: var(--aer-iconbtn-primary-hover-outset); } .aer-iconbtn:active, .aer-iconbtn[aria-pressed="true"] { --_n: var(--aer-iconbtn-primary-active); --_o: var(--aer-iconbtn-primary-active-outset); padding-block-start: 2px; } .aer-iconbtn.aer-quiet { --_n: var(--aer-iconbtn-glass); --_o: var(--aer-iconbtn-glass-outset); } .aer-iconbtn.aer-quiet:hover { --_n: var(--aer-iconbtn-glass-hover); --_o: var(--aer-iconbtn-glass-hover-outset); } .aer-iconbtn.aer-quiet:active, .aer-iconbtn.aer-quiet[aria-pressed="true"] { --_n: var(--aer-iconbtn-glass-active); --_o: var(--aer-iconbtn-glass-active-outset); } .aer-iconbtn:disabled { opacity: 0.5; filter: saturate(0.2); cursor: not-allowed; } /* ------------------------------------------------------------------ segmented control / tab bar
…
or a nav: glass tray (3-slice), selected segment = aqua chip, hover = pearl chip */ .aer-segmented { display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; block-size: 40px; padding: 4px; vertical-align: middle; inline-size: max-content; max-inline-size: 100%; justify-self: start; align-self: start; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-seg-tray) var(--aer-seg-tray-slice) / var(--aer-seg-tray-border) / var(--aer-seg-tray-outset) stretch; font: 600 var(--aer-text-s) / 1 var(--aer-font-ui); } .aer-segmented > label, .aer-segmented > a, .aer-segmented > button { position: relative; display: inline-flex; align-items: center; gap: var(--aer-space-2); box-sizing: border-box; block-size: 32px; padding: 0 16px; margin: 0; border-style: solid; border-color: transparent; border-width: 0; background: none; font: inherit; color: var(--aer-ink); text-decoration: none; white-space: nowrap; cursor: pointer; } .aer-segmented input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .aer-segmented > :hover { border-image: var(--aer-seg-chip-hover) var(--aer-seg-chip-hover-slice) / var(--aer-seg-chip-hover-border) / var(--aer-seg-chip-hover-outset) stretch; color: #0d2236; } .aer-segmented > :has(:checked), .aer-segmented > [aria-current]:not([aria-current="false"]), .aer-segmented > [aria-selected="true"], .aer-segmented > [aria-pressed="true"] { border-image: var(--aer-seg-chip) var(--aer-seg-chip-slice) / var(--aer-seg-chip-border) / var(--aer-seg-chip-outset) stretch; color: #fff; text-shadow: 0 0 2px rgba(4, 30, 70, 0.8), 0 1px 1px rgba(4, 30, 70, 0.6); } .aer-segmented > :has(:focus-visible) { outline: 2px solid var(--aer-focus); outline-offset: 2px; } .aer-segmented > :has(:disabled) { opacity: 0.5; cursor: not-allowed; } /* ------------------------------------------------------------------ choice card: a whole tile is the radio/checkbox */ .aer-choice { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: var(--aer-space-3); padding: var(--aer-space-4); min-block-size: 44px; box-sizing: border-box; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-card) var(--aer-card-slice) / var(--aer-card-border) / var(--aer-card-outset) stretch; color: var(--aer-ink); font: var(--aer-text-m) / var(--aer-leading) var(--aer-font-text); cursor: pointer; } .aer-choice > :not(input) { grid-column: 2; } .aer-choice > input { grid-row: 1 / span 3; } .aer-choice:hover { border-image: var(--aer-card-hover) var(--aer-card-hover-slice) / var(--aer-card-hover-border) / var(--aer-card-hover-outset) stretch; } .aer-choice:has(:checked) { border-image: var(--aer-choice-on) var(--aer-choice-on-slice) / var(--aer-choice-on-border) / var(--aer-choice-on-outset) stretch; } .aer-choice:has(:focus-visible) { outline: 2px solid var(--aer-focus); outline-offset: 2px; } .aer-choice:has(:focus-visible) > input { outline: none; } .aer-choice:has(:disabled) { opacity: 0.55; cursor: not-allowed; } /* ------------------------------------------------------------------ select: the field well + an aqua chevron */ .aer-select { position: relative; display: inline-grid; vertical-align: middle; } .aer-select > select { padding-inline-end: 40px; cursor: pointer; } .aer-select > select:dir(rtl) { padding-inline: 40px var(--aer-space-4); } /* ------------------------------------------------------------------ drop zone: a water basin around a file input aerolith.js sets [data-aer-over] while files are dragged over it */ .aer-drop { position: relative; display: grid; place-content: center; justify-items: center; gap: var(--aer-space-2); min-block-size: 120px; padding: var(--aer-space-5); box-sizing: border-box; text-align: center; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-drop) var(--aer-drop-slice) / var(--aer-drop-border) / var(--aer-drop-outset) stretch; color: var(--aer-ink); font: var(--aer-text-m) / var(--aer-leading) var(--aer-font-text); cursor: pointer; } .aer-drop > input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; inline-size: 100%; } .aer-drop[data-aer-over], .aer-drop:has(input:focus-visible) { border-image: var(--aer-drop-over) var(--aer-drop-over-slice) / var(--aer-drop-over-border) / var(--aer-drop-over-outset) stretch; } .aer-drop:has(input:focus-visible) { outline: 2px solid var(--aer-focus); outline-offset: 2px; } /* ------------------------------------------------------------------ callout: card + vertical gem rail; toast: card + status orb (put toasts in an .aer-toaster with role="status") */ .aer-callout { --_r: var(--aer-rail-info); --_rs: var(--aer-rail-info-slice); --_rb: var(--aer-rail-info-border); --_ro: var(--aer-rail-info-outset); position: relative; padding: var(--aer-space-4) var(--aer-space-4) var(--aer-space-4) 38px; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-card) var(--aer-card-slice) / var(--aer-card-border) / var(--aer-card-outset) stretch; color: var(--aer-ink); font: var(--aer-text-m) / var(--aer-leading) var(--aer-font-text); } .aer-callout::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 16px; inline-size: 10px; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--_r) var(--_rs) / var(--_rb) / var(--_ro) stretch; } .aer-callout.aer-ok { --_r: var(--aer-rail-ok); --_rs: var(--aer-rail-ok-slice); --_rb: var(--aer-rail-ok-border); --_ro: var(--aer-rail-ok-outset); } .aer-callout.aer-warn { --_r: var(--aer-rail-warn); --_rs: var(--aer-rail-warn-slice); --_rb: var(--aer-rail-warn-border); --_ro: var(--aer-rail-warn-outset); } .aer-callout.aer-error { --_r: var(--aer-rail-error); --_rs: var(--aer-rail-error-slice); --_rb: var(--aer-rail-error-border); --_ro: var(--aer-rail-error-outset); } .aer-callout > :first-child { margin-block-start: 0; } .aer-callout > :last-child { margin-block-end: 0; } .aer-toaster { position: fixed; inset-block-end: var(--aer-space-5); inset-inline-end: var(--aer-space-5); z-index: 1000; display: grid; gap: var(--aer-space-3); justify-items: end; pointer-events: none; } .aer-toast { display: flex; align-items: center; gap: var(--aer-space-3); pointer-events: auto; max-inline-size: 420px; padding: var(--aer-space-3) var(--aer-space-4); border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-card) var(--aer-card-slice) / var(--aer-card-border) / var(--aer-card-outset) stretch; color: var(--aer-ink); font: var(--aer-text-m) / 1.4 var(--aer-font-text); animation: aer-toast-in 260ms cubic-bezier(.3, 1.4, .5, 1); } @keyframes aer-toast-in { from { opacity: 0; translate: 0 12px; } } /* ------------------------------------------------------------------ dialog: frosted window on native
…
… */ .aer-dialog { box-sizing: border-box; max-inline-size: min(560px, calc(100vw - 32px)); padding: var(--aer-space-5); border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-dialog) var(--aer-dialog-slice) / var(--aer-dialog-border) / var(--aer-dialog-outset) stretch; background: none; color: var(--aer-ink); font: var(--aer-text-m) / var(--aer-leading) var(--aer-font-text); overflow: visible; } .aer-dialog::backdrop { background: rgba(8, 40, 80, 0.28); backdrop-filter: blur(3px) saturate(1.2); } .aer-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: var(--aer-space-3); margin: calc(-1 * var(--aer-space-2)) 0 var(--aer-space-3); font: 600 var(--aer-text-l) / 1.3 var(--aer-font-ui); } .aer-dialog[open] { animation: aer-dialog-in 220ms cubic-bezier(.3, 1.3, .5, 1); } @keyframes aer-dialog-in { from { opacity: 0; scale: 0.96; } } /* close orb: 24 px red gem, 44 px invisible hit area */ .aer-close { position: relative; appearance: none; margin: 0; padding: 0; flex: none; box-sizing: border-box; display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-close) 0 fill / 0 / var(--aer-close-outset) stretch; background: none; cursor: pointer; } .aer-close::after { content: ""; position: absolute; inset: -10px; } .aer-close:hover { border-image: var(--aer-close-hover) 0 fill / 0 / var(--aer-close-hover-outset) stretch; } .aer-close:active { padding-block-start: 1px; } .aer-close:empty::before { content: ""; } /* glyph: */ .aer-close .aer-icon { --_j: 1; } /* ------------------------------------------------------------------ popover / menu: frosted bubble (works with [popover]) */ .aer-popover { box-sizing: border-box; min-inline-size: 180px; padding: var(--aer-space-2); margin: 0; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-card) var(--aer-card-slice) / var(--aer-card-border) / var(--aer-card-outset) stretch; background: none; color: var(--aer-ink); font: var(--aer-text-m) / 1.4 var(--aer-font-text); overflow: visible; } .aer-menu { display: grid; gap: 2px; } .aer-menu > :is(a, button) { display: flex; align-items: center; gap: var(--aer-space-2); box-sizing: border-box; min-block-size: 36px; padding: 0 var(--aer-space-3); margin: 0; border-style: solid; border-color: transparent; border-width: 0; background: none; font: inherit; color: inherit; text-align: start; text-decoration: none; cursor: pointer; } .aer-menu > :is(a, button):is(:hover, :focus-visible) { border-image: var(--aer-seg-chip-hover) var(--aer-seg-chip-hover-slice) / var(--aer-seg-chip-hover-border) / var(--aer-seg-chip-hover-outset) stretch; color: #0d2236; outline: none; } /* ------------------------------------------------------------------ spinner: 8 rendered frames (lighting stays put) */ .aer-spinner { position: relative; display: inline-block; flex: none; vertical-align: middle; inline-size: 32px; block-size: 32px; } .aer-spinner::before { content: ""; position: absolute; inset: -3px; background: var(--aer-spin) no-repeat 0 0 / calc(38px * 8) 38px; animation: aer-spin 0.8s steps(8) infinite; } @keyframes aer-spin { to { background-position-x: calc(-38px * 8); } } /* ------------------------------------------------------------------ before/after compare
*/ .aer-compare { --aer-fill: 0.5; --_g: 36px; position: relative; display: grid; overflow: hidden; } .aer-compare > img { grid-area: 1 / 1; inline-size: 100%; block-size: auto; display: block; } .aer-compare > img:nth-of-type(2) { clip-path: inset(0 0 0 calc(var(--aer-fill) * 100%)); } .aer-compare::after { content: ""; position: absolute; inset-block: 0; inline-size: 2px; pointer-events: none; inset-inline-start: calc(var(--aer-fill) * 100% - 1px); background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 6px rgba(0, 60, 140, 0.6); } .aer-compare > input[type="range"] { position: absolute; z-index: 1; appearance: none; -webkit-appearance: none; margin: 0; inset-inline: calc(var(--_g) / -2); inset-block-start: calc(50% - var(--_g) / 2); block-size: var(--_g); background: none; cursor: ew-resize; } .aer-compare > input::-webkit-slider-runnable-track { background: none; block-size: var(--_g); } .aer-compare > input::-moz-range-track { background: none; } .aer-compare > input::-webkit-slider-thumb { -webkit-appearance: none; inline-size: var(--_g); block-size: var(--_g); border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-compare-grip) 0 fill / 0 / var(--aer-compare-grip-outset) stretch; background: none; } .aer-compare > input::-moz-range-thumb { inline-size: var(--_g); block-size: var(--_g); border: 0; border-radius: 0; border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-compare-grip) 0 fill / 0 / var(--aer-compare-grip-outset) stretch; background: none; } /* ------------------------------------------------------------------ theme switch: the toggle with sun / moon knobs */ .aer-toggle.aer-theme::before { border-image: var(--aer-toggle-knob-sun) 0 fill / 0 / var(--aer-toggle-knob-sun-outset) stretch; } .aer-toggle.aer-theme:checked { --_img: var(--aer-toggle-track); --_slice: var(--aer-toggle-track-slice); --_bw: var(--aer-toggle-track-border); --_out: var(--aer-toggle-track-outset); } .aer-toggle.aer-theme:checked::before { border-image: var(--aer-toggle-knob-moon) 0 fill / 0 / var(--aer-toggle-knob-moon-outset) stretch; } /* ------------------------------------------------------------------ header bar: a glass strip (9-slice) */ .aer-bar { display: flex; align-items: center; gap: var(--aer-space-4); box-sizing: border-box; min-block-size: 56px; padding: var(--aer-space-2) var(--aer-space-5); border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-bar) var(--aer-bar-slice) / var(--aer-bar-border) / var(--aer-bar-outset) stretch; color: var(--aer-ink); font: 600 var(--aer-text-m) / 1.2 var(--aer-font-ui); } .aer-bar > .aer-spacer { flex: 1; } /* ------------------------------------------------------------------ lens: clear thick glass; in Chromium aerolith.js adds the refraction of its rim (an SVG displacement map computed from the same bevel profile) */ .aer-lens { position: relative; box-sizing: border-box; padding: var(--aer-space-5); border-style: solid; border-color: transparent; border-width: 0; border-image: var(--aer-lens) var(--aer-lens-slice) / var(--aer-lens-border) / var(--aer-lens-outset) stretch; color: var(--aer-ink); } /* ------------------------------------------------------------------ preferences */ @media (prefers-reduced-motion: reduce) { .aer-spinner::before { animation: none; } .aer-toggle::before, .aer-progress::-webkit-progress-value { transition: none; } .aer-toast, .aer-dialog[open] { animation: none; } } /* forced colours: sprites are dropped, native rendering and system colours take over */ @media (forced-colors: active) { .aer-button, .aer-iconbtn, .aer-field, .aer-segmented > :has(:checked), .aer-choice, .aer-drop, .aer-dialog, .aer-popover, .aer-close, .aer-bar, .aer-callout, .aer-toast, .aer-panel, .aer-card, .aer-lens { border-image: none; border: 1px solid CanvasText; } .aer-button:is(:hover, :focus-visible), .aer-iconbtn:is(:hover, :focus-visible) { border-color: Highlight; } .aer-segmented > :has(:checked), .aer-segmented > [aria-current]:not([aria-current="false"]) { background: Highlight; color: HighlightText; forced-color-adjust: none; } .aer-toggle, .aer-check, .aer-radio { appearance: auto; border-image: none; } .aer-toggle::before, .aer-spinner::before, .aer-callout::before { display: none; } .aer-spinner { border: 3px dotted CanvasText; border-radius: 50%; } }