vanilla-breeze 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -4
- package/dist/cdn/components/activity-feed.js +1 -1
- package/dist/cdn/components/audio-player.js +2 -2
- package/dist/cdn/components/carousel-wc.js +1 -1
- package/dist/cdn/components/comment-box.js +16 -16
- package/dist/cdn/components/comment-thread.js +20 -20
- package/dist/cdn/components/comment-wc.js +1 -1
- package/dist/cdn/components/content-lens.js +1 -1
- package/dist/cdn/components/context-menu.js +1 -1
- package/dist/cdn/components/diagram-wc.js +1 -1
- package/dist/cdn/components/drop-down.js +1 -1
- package/dist/cdn/components/image-gallery.js +1 -1
- package/dist/cdn/components/manifest.json +44 -20
- package/dist/cdn/components/reaction-bar.js +1 -1
- package/dist/cdn/components/score-card.js +2 -2
- package/dist/cdn/components/settings-panel.js +15 -15
- package/dist/cdn/components/site-search.js +1 -1
- package/dist/cdn/components/social-embed.js +1 -1
- package/dist/cdn/components/tab-set.js +1 -1
- package/dist/cdn/components/theme-picker.js +45 -45
- package/dist/cdn/components/time-index.js +2 -2
- package/dist/cdn/components/time-picker.js +1 -1
- package/dist/cdn/components/version-switcher.js +1 -1
- package/dist/cdn/packs/effects.full.js +1 -1
- package/dist/cdn/packs/journal.effects.css +1 -1
- package/dist/cdn/packs/journal.full.css +1 -1
- package/dist/cdn/packs/kawaii.effects.css +1 -1
- package/dist/cdn/packs/kawaii.full.css +2 -2
- package/dist/cdn/packs/kawaii.full.js +4 -4
- package/dist/cdn/packs/kawaii.theme.css +1 -1
- package/dist/cdn/packs/manifest.json +11 -11
- package/dist/cdn/packs/memphis.full.css +1 -1
- package/dist/cdn/packs/memphis.theme.css +1 -1
- package/dist/cdn/packs/ui.full.css +1 -1
- package/dist/cdn/packs/ui.full.js +52 -52
- package/dist/cdn/themes/8bit.css +1 -1
- package/dist/cdn/themes/8bit.tokens.json +4 -4
- package/dist/cdn/themes/alpha1999-dark.tokens.json +4 -4
- package/dist/cdn/themes/alpha1999.css +1 -1
- package/dist/cdn/themes/alpha1999.tokens.json +4 -4
- package/dist/cdn/themes/anthropic.css +1 -1
- package/dist/cdn/themes/anthropic.tokens.json +4 -4
- package/dist/cdn/themes/art-deco-dark.tokens.json +4 -4
- package/dist/cdn/themes/art-deco.css +1 -1
- package/dist/cdn/themes/art-deco.tokens.json +4 -4
- package/dist/cdn/themes/bauhaus-dark.tokens.json +1 -1
- package/dist/cdn/themes/bauhaus.css +1 -1
- package/dist/cdn/themes/bauhaus.tokens.json +4 -4
- package/dist/cdn/themes/brutalist-dark.tokens.json +4 -4
- package/dist/cdn/themes/brutalist.css +1 -1
- package/dist/cdn/themes/brutalist.tokens.json +4 -4
- package/dist/cdn/themes/catalog/atlassian.tokens.json +2 -2
- package/dist/cdn/themes/catalog/bootstrap.tokens.json +2 -2
- package/dist/cdn/themes/catalog/carbon.tokens.json +2 -2
- package/dist/cdn/themes/catalog/catppuccin-mocha.tokens.json +2 -2
- package/dist/cdn/themes/catalog/govuk.tokens.json +2 -2
- package/dist/cdn/themes/catalog/manifest.json +1 -1
- package/dist/cdn/themes/catalog/material.tokens.json +2 -2
- package/dist/cdn/themes/catalog/salesforce.tokens.json +2 -2
- package/dist/cdn/themes/catalog/tailwind.tokens.json +2 -2
- package/dist/cdn/themes/catppuccin-frappe.css +1 -1
- package/dist/cdn/themes/catppuccin-frappe.tokens.json +4 -4
- package/dist/cdn/themes/catppuccin-latte-dark.tokens.json +4 -4
- package/dist/cdn/themes/catppuccin-latte.css +1 -1
- package/dist/cdn/themes/catppuccin-latte.tokens.json +4 -4
- package/dist/cdn/themes/catppuccin-macchiato.css +1 -1
- package/dist/cdn/themes/catppuccin-macchiato.tokens.json +4 -4
- package/dist/cdn/themes/catppuccin-mocha.css +1 -1
- package/dist/cdn/themes/catppuccin-mocha.tokens.json +4 -4
- package/dist/cdn/themes/classic-dark.tokens.json +4 -4
- package/dist/cdn/themes/classic.css +1 -1
- package/dist/cdn/themes/classic.tokens.json +4 -4
- package/dist/cdn/themes/claymorphism-dark.tokens.json +10 -10
- package/dist/cdn/themes/claymorphism.css +1 -1
- package/dist/cdn/themes/claymorphism.tokens.json +10 -10
- package/dist/cdn/themes/clinical-dark.tokens.json +4 -4
- package/dist/cdn/themes/clinical.css +1 -1
- package/dist/cdn/themes/clinical.tokens.json +4 -4
- package/dist/cdn/themes/cottagecore-dark.tokens.json +4 -4
- package/dist/cdn/themes/cottagecore.css +1 -1
- package/dist/cdn/themes/cottagecore.tokens.json +4 -4
- package/dist/cdn/themes/cyber.css +1 -1
- package/dist/cdn/themes/cyber.tokens.json +4 -5
- package/dist/cdn/themes/dawn-dark.tokens.json +4 -4
- package/dist/cdn/themes/dawn.css +1 -1
- package/dist/cdn/themes/dawn.tokens.json +4 -4
- package/dist/cdn/themes/dracula.css +1 -1
- package/dist/cdn/themes/dracula.tokens.json +4 -4
- package/dist/cdn/themes/dusk.css +1 -1
- package/dist/cdn/themes/dusk.tokens.json +4 -4
- package/dist/cdn/themes/editorial-dark.tokens.json +3 -3
- package/dist/cdn/themes/editorial.css +1 -1
- package/dist/cdn/themes/editorial.tokens.json +4 -4
- package/dist/cdn/themes/financial-dark.tokens.json +4 -4
- package/dist/cdn/themes/financial.css +1 -1
- package/dist/cdn/themes/financial.tokens.json +4 -4
- package/dist/cdn/themes/genai.css +1 -1
- package/dist/cdn/themes/genai.tokens.json +4 -4
- package/dist/cdn/themes/glassmorphism-dark.tokens.json +4 -4
- package/dist/cdn/themes/glassmorphism.css +1 -1
- package/dist/cdn/themes/glassmorphism.tokens.json +4 -4
- package/dist/cdn/themes/government-dark.tokens.json +4 -4
- package/dist/cdn/themes/government.css +1 -1
- package/dist/cdn/themes/government.tokens.json +4 -4
- package/dist/cdn/themes/gruvbox-dark.tokens.json +4 -4
- package/dist/cdn/themes/gruvbox.css +1 -1
- package/dist/cdn/themes/gruvbox.tokens.json +4 -4
- package/dist/cdn/themes/high-noon-dark.tokens.json +4 -4
- package/dist/cdn/themes/high-noon.css +1 -1
- package/dist/cdn/themes/high-noon.tokens.json +4 -4
- package/dist/cdn/themes/ibm.css +1 -1
- package/dist/cdn/themes/ibm.tokens.json +6 -6
- package/dist/cdn/themes/journal-dark.tokens.json +4 -4
- package/dist/cdn/themes/journal.css +1 -1
- package/dist/cdn/themes/journal.tokens.json +4 -4
- package/dist/cdn/themes/kawaii-dark.tokens.json +4 -4
- package/dist/cdn/themes/kawaii.css +1 -1
- package/dist/cdn/themes/kawaii.tokens.json +4 -4
- package/dist/cdn/themes/magna-dark.tokens.json +4 -4
- package/dist/cdn/themes/magna.css +1 -1
- package/dist/cdn/themes/magna.tokens.json +4 -4
- package/dist/cdn/themes/manifest.json +48 -48
- package/dist/cdn/themes/mcdonalds.css +1 -1
- package/dist/cdn/themes/mcdonalds.tokens.json +4 -4
- package/dist/cdn/themes/midnight.css +1 -1
- package/dist/cdn/themes/midnight.tokens.json +4 -4
- package/dist/cdn/themes/minimal-dark.tokens.json +4 -4
- package/dist/cdn/themes/minimal.css +1 -1
- package/dist/cdn/themes/minimal.tokens.json +4 -4
- package/dist/cdn/themes/modern-dark.tokens.json +4 -4
- package/dist/cdn/themes/modern.css +1 -1
- package/dist/cdn/themes/modern.tokens.json +4 -4
- package/dist/cdn/themes/nes-dark.tokens.json +4 -4
- package/dist/cdn/themes/nes.css +1 -1
- package/dist/cdn/themes/nes.tokens.json +4 -4
- package/dist/cdn/themes/neumorphism-dark.tokens.json +10 -10
- package/dist/cdn/themes/neumorphism.css +1 -1
- package/dist/cdn/themes/neumorphism.tokens.json +10 -10
- package/dist/cdn/themes/nord-dark.tokens.json +4 -4
- package/dist/cdn/themes/nord.css +1 -1
- package/dist/cdn/themes/nord.tokens.json +4 -4
- package/dist/cdn/themes/organic-dark.tokens.json +4 -4
- package/dist/cdn/themes/organic.css +1 -1
- package/dist/cdn/themes/organic.tokens.json +4 -4
- package/dist/cdn/themes/rose-pine-dark.tokens.json +4 -4
- package/dist/cdn/themes/rose-pine.css +1 -1
- package/dist/cdn/themes/rose-pine.tokens.json +4 -4
- package/dist/cdn/themes/rough-dark.tokens.json +4 -5
- package/dist/cdn/themes/rough.css +1 -1
- package/dist/cdn/themes/rough.tokens.json +5 -6
- package/dist/cdn/themes/solarized-dark.tokens.json +4 -4
- package/dist/cdn/themes/solarized.css +1 -1
- package/dist/cdn/themes/solarized.tokens.json +4 -4
- package/dist/cdn/themes/starbucks.css +1 -1
- package/dist/cdn/themes/starbucks.tokens.json +4 -4
- package/dist/cdn/themes/startup-dark.tokens.json +4 -4
- package/dist/cdn/themes/startup.css +1 -1
- package/dist/cdn/themes/startup.tokens.json +4 -4
- package/dist/cdn/themes/super2026-dark.tokens.json +4 -4
- package/dist/cdn/themes/super2026.css +1 -1
- package/dist/cdn/themes/super2026.tokens.json +4 -4
- package/dist/cdn/themes/swiss-dark.tokens.json +1 -1
- package/dist/cdn/themes/swiss.css +1 -1
- package/dist/cdn/themes/swiss.tokens.json +4 -4
- package/dist/cdn/themes/terminal.css +1 -1
- package/dist/cdn/themes/terminal.tokens.json +4 -4
- package/dist/cdn/themes/tokyo-night-dark.tokens.json +4 -4
- package/dist/cdn/themes/tokyo-night.css +1 -1
- package/dist/cdn/themes/tokyo-night.tokens.json +4 -4
- package/dist/cdn/themes/vaporwave-dark.tokens.json +4 -4
- package/dist/cdn/themes/vaporwave.css +1 -1
- package/dist/cdn/themes/vaporwave.tokens.json +4 -4
- package/dist/cdn/themes/win9x-dark.tokens.json +4 -4
- package/dist/cdn/themes/win9x.css +1 -1
- package/dist/cdn/themes/win9x.tokens.json +4 -4
- package/dist/cdn/vanilla-breeze-charts.css +1 -1
- package/dist/cdn/vanilla-breeze-core.css +1 -1
- package/dist/cdn/vanilla-breeze-core.js +62 -62
- package/dist/cdn/vanilla-breeze-dev.css +1 -1
- package/dist/cdn/vanilla-breeze-extras.js +19 -19
- package/dist/cdn/vanilla-breeze-labs.css +1 -1
- package/dist/cdn/vanilla-breeze.css +1 -1
- package/dist/cdn/vanilla-breeze.js +170 -170
- package/package.json +5 -8
- package/dist/cdn/components/accessibility-specimen.js +0 -11
- package/dist/cdn/components/adr-wc.js +0 -403
- package/dist/cdn/components/breakpoint-specimen.js +0 -26
- package/dist/cdn/components/burndown-chart.js +0 -2
- package/dist/cdn/components/capacity-plan.js +0 -25
- package/dist/cdn/components/color-palette.js +0 -16
- package/dist/cdn/components/component-sampler.js +0 -45
- package/dist/cdn/components/empathy-map.js +0 -582
- package/dist/cdn/components/font-pairer.js +0 -108
- package/dist/cdn/components/gantt-chart.js +0 -2
- package/dist/cdn/components/gradient-builder.js +0 -52
- package/dist/cdn/components/impact-effort.js +0 -2
- package/dist/cdn/components/iron-triangle.js +0 -2
- package/dist/cdn/components/kanban-board.js +0 -2
- package/dist/cdn/components/layout-specimen.js +0 -35
- package/dist/cdn/components/motion-specimen.js +0 -21
- package/dist/cdn/components/palette-generator.js +0 -15
- package/dist/cdn/components/product-roadmap.js +0 -3
- package/dist/cdn/components/quadrant-grid.js +0 -3
- package/dist/cdn/components/quality-target.js +0 -12
- package/dist/cdn/components/requirement-card.js +0 -122
- package/dist/cdn/components/review-surface.js +0 -535
- package/dist/cdn/components/risk-register.js +0 -25
- package/dist/cdn/components/semantic-palette.js +0 -30
- package/dist/cdn/components/spacing-specimen.js +0 -6
- package/dist/cdn/components/story-map.js +0 -2
- package/dist/cdn/components/theme-catalog.js +0 -28
- package/dist/cdn/components/theme-export.js +0 -26
- package/dist/cdn/components/theme-import.js +0 -44
- package/dist/cdn/components/token-specimen.js +0 -26
- package/dist/cdn/components/traceability-matrix.js +0 -3
- package/dist/cdn/components/type-specimen.js +0 -19
- package/dist/cdn/components/user-journey.js +0 -366
- package/dist/cdn/components/user-persona.js +0 -402
- package/dist/cdn/components/user-story.js +0 -411
- package/dist/cdn/components/work-item.js +0 -447
- package/dist/cdn/packs/design-system.full.css +0 -2
- package/dist/cdn/packs/design-system.full.js +0 -175
- package/dist/cdn/packs/ux-planning.full.css +0 -2
- package/dist/cdn/packs/ux-planning.full.js +0 -3160
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root[data-theme~=win9x],[data-theme~=win9x]{--_win9x-bg: oklch(78% 0 0);--_win9x-highlight: oklch(100% 0 0);--_win9x-light: oklch(87% 0 0);--_win9x-shadow: oklch(50% 0 0);--_win9x-dark-shadow: oklch(0% 0 0);--_win9x-title-active: oklch(25% .15 250);--_win9x-title-inactive: oklch(50% 0 0);--_win9x-title-text: oklch(100% 0 0);--_win9x-window-bg: oklch(100% 0 0);--color-surface: var(--_win9x-bg);--color-surface-alt: oklch(74% 0 0);--color-surface-raised: oklch(85% 0 0);--color-surface-sunken: oklch(70% 0 0);--color-surface-overlay: var(--_win9x-bg);--color-background: oklch(42% .06 195);--color-text: oklch(0% 0 0);--color-text-muted: oklch(25% 0 0);--color-text-subtle: oklch(40% 0 0);--color-primary: oklch(30% .15 250);--caret-color: var(--color-primary);--color-primary-hover: oklch(30% .17 250);--color-primary-subtle: oklch(80% .05 250);--color-accent: oklch(50% .15 250);--color-accent-hover: oklch(45% .17 250);--color-success: oklch(45% .15 145);--color-success-subtle: oklch(90% .05 145);--color-success-text: oklch(30% .12 145);--color-warning: oklch(75% .15 90);--color-warning-subtle: oklch(92% .06 90);--color-warning-text: oklch(38% .12 90);--color-error: oklch(50% .2 25);--color-error-subtle: oklch(90% .05 25);--color-error-text: oklch(35% .15 25);--color-info: oklch(48% .15 250);--color-info-subtle: oklch(90% .05 250);--color-info-text: oklch(30% .12 250);--color-border: var(--_win9x-dark-shadow);--color-border-muted: var(--_win9x-shadow);--color-border-strong: var(--_win9x-dark-shadow);--_win9x-raised: inset 1px 1px 0 var(--_win9x-highlight), inset 2px 2px 0 var(--_win9x-light), inset -1px -1px 0 var(--_win9x-dark-shadow), inset -2px -2px 0 var(--_win9x-shadow);--_win9x-pressed: inset 1px 1px 0 var(--_win9x-dark-shadow), inset 2px 2px 0 var(--_win9x-shadow), inset -1px -1px 0 var(--_win9x-highlight), inset -2px -2px 0 var(--_win9x-light);--_win9x-sunken: inset 1px 1px 0 var(--_win9x-shadow), inset 2px 2px 0 var(--_win9x-dark-shadow), inset -1px -1px 0 var(--_win9x-light), inset -2px -2px 0 var(--_win9x-highlight);--_win9x-window: inset 1px 1px 0 var(--_win9x-light), inset -1px -1px 0 var(--_win9x-dark-shadow), inset 2px 2px 0 var(--_win9x-highlight), inset -2px -2px 0 var(--_win9x-shadow);--font-sans: "Tahoma", "MS Sans Serif", Arial, sans-serif;--font-mono: "Fixedsys", "Lucida Console", monospace;--line-height-normal: 1.4;--line-height-tight: 1.2;--letter-spacing-normal: 0;--radius-xs: 0;--radius-s: 0;--radius-m: 0;--radius-l: 0;--radius-xl: 0;--radius-2xl: 0;--radius-full: 0;--shadow-xs: 2px 2px 0 oklch(0% 0 0 / .3);--shadow-sm: 2px 2px 0 oklch(0% 0 0 / .3);--shadow-md: 4px 4px 0 oklch(0% 0 0 / .3);--shadow-lg: 4px 4px 0 oklch(0% 0 0 / .3);--shadow-xl: 6px 6px 0 oklch(0% 0 0 / .3);--shadow-2xl: 8px 8px 0 oklch(0% 0 0 / .3);--duration-instant: 0ms;--duration-fast: 0ms;--duration-normal: 0ms;--duration-slow: .1s;--ease-default: linear;--ease-out: linear;--control-size: .8125rem;--control-border: var(--_win9x-shadow);--control-checked-bg: var(--_win9x-window-bg);--control-checked-border: var(--_win9x-shadow);--control-radius-check: 0;--control-radius-radio: var(--radius-full);--input-bg: var(--_win9x-window-bg);--input-border: var(--_win9x-shadow);--input-border-focus: var(--color-primary);--range-track-bg: var(--_win9x-shadow);--range-track-fill: var(--color-primary);--range-thumb-bg: var(--_win9x-bg);--range-thumb-border: var(--_win9x-shadow);--progress-track-bg: var(--_win9x-light);--progress-fill: var(--color-primary)}:root[data-theme~=win9x],[data-theme~=win9x]{:is(main,article){.button,button{background:var(--_win9x-bg);color:var(--color-text);border:none;box-shadow:var(--_win9x-raised);padding:.25rem .75rem;font-family:var(--font-sans);font-size:.6875rem;min-height:23px;cursor:pointer;&:hover{background:var(--color-surface-alt)}&:active{box-shadow:var(--_win9x-pressed);padding-top:calc(.25rem + 1px);padding-left:calc(.75rem + 1px)}&:focus{outline:1px dotted var(--color-text);outline-offset:-4px}&:disabled{color:var(--_win9x-shadow);text-shadow:1px 1px 0 var(--_win9x-highlight);cursor:not-allowed}&.default,&[data-default=true]{outline:1px solid var(--_win9x-dark-shadow);outline-offset:-1px}}}.win9x-window,dialog{background:var(--_win9x-bg);border:none;box-shadow:var(--_win9x-window);padding:0;max-width:90vw;&::backdrop{background:transparent}}.win9x-titlebar,dialog header{background:linear-gradient(90deg,var(--_win9x-title-active),oklch(50% .1 250));color:var(--_win9x-title-text);padding:2px 3px;font-family:var(--font-sans);font-size:.6875rem;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:.5rem;user-select:none}.win9x-titlebar[data-inactive],dialog[data-inactive] header{background:linear-gradient(90deg,var(--_win9x-title-inactive),oklch(65% 0 0))}.win9x-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.win9x-buttons{display:flex;gap:2px}.win9x-btn{width:16px;height:14px;padding:0;min-height:auto;font-size:8px;display:flex;align-items:center;justify-content:center;box-shadow:var(--_win9x-raised);background:var(--_win9x-bg);color:var(--color-text);&:active{box-shadow:var(--_win9x-pressed)}}.win9x-body,dialog .dialog-body{padding:1rem;background:var(--_win9x-bg)}.win9x-content{background:var(--_win9x-window-bg);box-shadow:var(--_win9x-sunken);padding:.5rem}.win9x-footer,dialog footer{padding:.75rem 1rem;display:flex;gap:.5rem;justify-content:center;background:var(--_win9x-bg)}.menu-bar,.win9x-menubar{display:flex;background:var(--_win9x-bg);padding:2px 0;border-bottom:1px solid var(--_win9x-shadow);>button,>details>summary{background:transparent;box-shadow:none;padding:2px 8px;min-height:auto;&:hover{box-shadow:var(--_win9x-raised)}&:active,&[aria-expanded=true]{box-shadow:var(--_win9x-pressed)}}}.win9x-menu,menu{background:var(--_win9x-bg);box-shadow:var(--_win9x-raised);padding:2px;margin:0;list-style:none;min-width:150px;& li{margin:0}& button,a{display:flex;align-items:center;gap:1rem;width:100%;padding:2px 1.5rem;text-align:left;background:transparent;border:none;box-shadow:none;font-family:var(--font-sans);font-size:.6875rem;color:var(--color-text);text-decoration:none;cursor:pointer;min-height:auto;&:hover{background:var(--color-primary);color:var(--_win9x-title-text)}&:disabled{color:var(--_win9x-shadow);text-shadow:1px 1px 0 var(--_win9x-highlight)}}.shortcut{margin-left:auto;color:var(--color-text-muted)}& hr:not([data-ornament]){border:none;height:2px;background:var(--_win9x-shadow);box-shadow:0 1px 0 var(--_win9x-highlight);margin:2px 0}}:is(main,article){& details{background:var(--_win9x-bg);box-shadow:var(--_win9x-raised);margin-block-end:4px}& summary{padding:.25rem .5rem;cursor:pointer;font-family:var(--font-sans);font-size:.6875rem;list-style:none;display:flex;align-items:center;gap:.5rem;&::-webkit-details-marker{display:none}&:before{content:"+";font-family:var(--font-mono);width:1em;text-align:center}}& details[open]>summary:before{content:"-"}& details>:not(summary){padding:.5rem;background:var(--_win9x-window-bg);box-shadow:var(--_win9x-sunken);margin:0 .5rem .5rem}}& input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=url],input[type=tel],textarea{background:var(--_win9x-window-bg);border:none;box-shadow:var(--_win9x-sunken);padding:2px 4px;font-family:var(--font-sans);font-size:.6875rem;color:var(--color-text);min-height:21px;&:focus{outline:none}&::placeholder{color:var(--color-text-muted)}&:disabled{background:var(--_win9x-bg);color:var(--_win9x-shadow)}}& select{appearance:none;background:var(--_win9x-window-bg);border:none;box-shadow:var(--_win9x-sunken);padding:2px 20px 2px 4px;font-family:var(--font-sans);font-size:.6875rem;color:var(--color-text);min-height:21px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect fill='%23c0c0c0' x='0' y='0' width='16' height='16'/%3E%3Cpath fill='black' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0 center;&:focus{outline:none}}:is(main,article) input[type=checkbox]{appearance:none;width:13px;height:13px;background:var(--_win9x-window-bg);box-shadow:var(--_win9x-sunken);cursor:pointer;position:relative;&:checked:after{content:"\2714";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;color:var(--color-text)}&:focus{outline:1px dotted var(--color-text);outline-offset:2px}}:is(main,article) input[type=radio]{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--_win9x-window-bg);box-shadow:var(--_win9x-sunken);cursor:pointer;position:relative;&:checked:after{content:"";position:absolute;top:3px;left:3px;width:6px;height:6px;border-radius:50%;background:var(--color-text)}&:focus{outline:1px dotted var(--color-text);outline-offset:2px}}& input[type=range]{appearance:none;height:21px;background:transparent;&::-webkit-slider-runnable-track{height:4px;background:var(--_win9x-bg);box-shadow:var(--_win9x-sunken)}&::-webkit-slider-thumb{appearance:none;width:11px;height:21px;background:var(--_win9x-bg);box-shadow:var(--_win9x-raised);margin-top:-8px}}& progress{appearance:none;height:16px;background:var(--_win9x-bg);box-shadow:var(--_win9x-sunken);border:none;&::-webkit-progress-bar{background:transparent}&::-webkit-progress-value{background:repeating-linear-gradient(90deg,var(--color-primary) 0,var(--color-primary) 8px,var(--_win9x-bg) 8px,var(--_win9x-bg) 10px)}&::-moz-progress-bar{background:repeating-linear-gradient(90deg,var(--color-primary) 0,var(--color-primary) 8px,var(--_win9x-bg) 8px,var(--_win9x-bg) 10px)}}.tabs,.win9x-tabs{display:flex;gap:0;position:relative;z-index:1;padding-left:4px}.tab,.win9x-tab{background:var(--_win9x-bg);box-shadow:inset 1px 1px 0 var(--_win9x-highlight),inset 2px 2px 0 var(--_win9x-light),inset -1px 0 0 var(--_win9x-shadow),inset -2px 0 0 var(--_win9x-dark-shadow);padding:4px 12px;font-family:var(--font-sans);font-size:.6875rem;cursor:pointer;border:none;position:relative;top:2px;margin-right:2px;&[aria-selected=true],&.active,&:checked{top:0;padding-bottom:6px;box-shadow:inset 1px 1px 0 var(--_win9x-highlight),inset 2px 2px 0 var(--_win9x-light),inset -1px 0 0 var(--_win9x-shadow),inset -2px 0 0 var(--_win9x-dark-shadow),0 2px 0 var(--_win9x-bg)}}.tab-panel,.win9x-panel{background:var(--_win9x-bg);box-shadow:var(--_win9x-raised);padding:1rem;position:relative}.win9x-groupbox,fieldset{background:var(--_win9x-bg);border:1px solid var(--_win9x-shadow);box-shadow:inset 0 0 0 1px var(--_win9x-highlight),0 0 0 1px var(--_win9x-highlight);padding:1rem;margin:.5rem 0}& legend{background:var(--_win9x-bg);padding:0 .5rem;font-family:var(--font-sans);font-size:.6875rem}.win9x-statusbar{display:flex;gap:2px;background:var(--_win9x-bg);padding:2px;border-top:1px solid var(--_win9x-shadow);box-shadow:inset 0 1px 0 var(--_win9x-highlight)}.win9x-status-section{background:var(--_win9x-bg);box-shadow:var(--_win9x-sunken);padding:2px 8px;font-family:var(--font-sans);font-size:.6875rem;flex:1;&:last-child{flex:none}}.win9x-toolbar{display:flex;gap:2px;background:var(--_win9x-bg);padding:2px;box-shadow:var(--_win9x-raised);& button{box-shadow:none;padding:2px 4px;min-height:auto;&:hover{box-shadow:var(--_win9x-raised)}&:active{box-shadow:var(--_win9x-pressed)}}.separator{width:2px;background:var(--_win9x-shadow);box-shadow:1px 0 0 var(--_win9x-highlight);margin:2px 4px}}:is(main,article){& hr:not([data-ornament]){border:none;height:2px;background:var(--_win9x-shadow);box-shadow:0 1px 0 var(--_win9x-highlight);margin-block:1rem}& h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);margin-block-end:.5rem}& a:not([class]){color:oklch(35% .2 250);text-decoration:underline;&:visited{color:#692278}&:hover{color:oklch(50% .22 25)}}.card{background:var(--_win9x-bg);box-shadow:var(--_win9x-raised);padding:1rem}& pre{background:var(--_win9x-window-bg);box-shadow:var(--_win9x-sunken);padding:.5rem;font-family:var(--font-mono);font-size:.6875rem;overflow-x:auto}& code{background:var(--color-surface-alt);padding:1px 4px;font-family:var(--font-mono);font-size:.6875rem}& pre code{background:transparent;padding:0}}:is(main,article) code-block{--cb-bg: var(--_win9x-window-bg);--cb-code-bg: var(--_win9x-window-bg);--cb-header-bg: var(--_win9x-bg);--cb-border-color: var(--_win9x-shadow);--cb-keyword: oklch(35% .2 250);--cb-string: oklch(40% .15 145);--cb-function: oklch(35% .15 320);--cb-number: oklch(50% .15 25);--cb-button-bg: var(--_win9x-bg);--cb-button-color: var(--color-text);--cb-button-border: var(--_win9x-shadow);--cb-scrollbar-track: var(--_win9x-bg);--cb-scrollbar-thumb: var(--_win9x-shadow)}:is(main,article) browser-window{--browser-window-bg: var(--_win9x-bg);--browser-window-header-bg: linear-gradient(90deg, var(--_win9x-title-active), oklch(50% .1 250));--browser-window-content-bg: var(--_win9x-window-bg);--browser-window-border-color: var(--_win9x-dark-shadow);--browser-window-text-color: var(--_win9x-title-text);--browser-window-url-bg: var(--_win9x-window-bg);--browser-window-hover-bg: var(--color-surface-alt)}& table{width:100%;border-collapse:collapse;background:var(--_win9x-window-bg);box-shadow:var(--_win9x-sunken);font-size:.6875rem}& th,td{padding:2px 8px;text-align:left;border:1px solid var(--_win9x-shadow)}& th{background:var(--_win9x-bg);font-weight:700}.win9x-listview-header{display:flex;background:var(--_win9x-bg);& button{flex:1;box-shadow:var(--_win9x-raised);padding:2px 8px;text-align:left;min-height:auto;border-right:1px solid var(--_win9x-dark-shadow);&:active{box-shadow:var(--_win9x-pressed)}}}.win9x-treeview{background:var(--_win9x-window-bg);box-shadow:var(--_win9x-sunken);padding:2px;font-family:var(--font-sans);font-size:.6875rem;& ul{list-style:none;margin:0;padding-left:16px}& li{position:relative;&:before{content:"";position:absolute;left:-12px;top:0;width:1px;height:100%;border-left:1px dotted var(--_win9x-shadow)}&:after{content:"";position:absolute;left:-12px;top:8px;width:8px;border-top:1px dotted var(--_win9x-shadow)}}}::selection{background:var(--color-primary);color:var(--_win9x-title-text)}}:root[data-theme~=win9x][data-mode=dark],[data-theme~=win9x][data-mode=dark]{color-scheme:dark;--_win9x-bg: oklch(30% 0 0);--_win9x-highlight: oklch(50% 0 0);--_win9x-light: oklch(40% 0 0);--_win9x-shadow: oklch(15% 0 0);--_win9x-dark-shadow: oklch(0% 0 0);--_win9x-window-bg: oklch(25% 0 0);--color-surface: var(--_win9x-bg);--color-surface-alt: oklch(26% 0 0);--color-surface-raised: oklch(38% 0 0);--color-surface-sunken: oklch(22% 0 0);--color-surface-overlay: oklch(33% 0 0);--color-background: oklch(15% .05 195);--color-text: oklch(90% 0 0);--color-text-muted: oklch(70% 0 0);--color-hover-bg: oklch(38% 0 0);--color-hover-text: var(--color-primary);--color-active-text: var(--color-primary);--color-primary: oklch(60% .15 250);--color-primary-hover: oklch(65% .18 250);--color-primary-subtle: oklch(25% .06 250);--color-accent: oklch(65% .15 250);--color-accent-hover: oklch(70% .17 250);--color-text-subtle: oklch(55% 0 0);--color-success: oklch(60% .15 145);--color-success-subtle: oklch(22% .05 145);--color-success-text: oklch(75% .12 145);--color-warning: oklch(80% .15 90);--color-warning-subtle: oklch(25% .06 90);--color-warning-text: oklch(82% .12 90);--color-error: oklch(62% .2 25);--color-error-subtle: oklch(22% .05 25);--color-error-text: oklch(75% .15 25);--color-info: oklch(62% .15 250);--color-info-subtle: oklch(22% .05 250);--color-info-text: oklch(75% .12 250);--color-border: oklch(40% 0 0);--color-border-strong: oklch(60% 0 0);--shadow-xs: 2px 2px 0 oklch(0% 0 0 / .5);--shadow-sm: 2px 2px 0 oklch(0% 0 0 / .5);--shadow-md: 4px 4px 0 oklch(0% 0 0 / .5);--shadow-lg: 4px 4px 0 oklch(0% 0 0 / .5);--shadow-xl: 6px 6px 0 oklch(0% 0 0 / .5);--shadow-2xl: 8px 8px 0 oklch(0% 0 0 / .5);--control-size: .8125rem;--control-border: var(--_win9x-highlight);--control-checked-bg: var(--_win9x-window-bg);--control-checked-border: var(--_win9x-highlight);--input-bg: var(--_win9x-window-bg);--input-border: var(--_win9x-highlight);--input-border-focus: var(--color-primary);--range-track-bg: var(--_win9x-shadow);--range-track-fill: var(--color-primary);--range-thumb-bg: var(--_win9x-bg);--range-thumb-border: var(--_win9x-highlight);--progress-track-bg: var(--_win9x-light);--progress-fill: var(--color-primary);:is(main,article) a:not([class]){color:#3a93e6}:is(main,article) code{background:#161616;color:#dedede}:is(main,article) code-block{--cb-bg: var(--_win9x-window-bg);--cb-code-bg: var(--_win9x-window-bg);--cb-header-bg: var(--_win9x-bg);--cb-text-color: oklch(90% 0 0);--cb-border-color: oklch(40% 0 0);--cb-comment: oklch(55% 0 0);--cb-keyword: oklch(70% .18 250);--cb-string: oklch(72% .12 145);--cb-function: oklch(70% .12 320);--cb-number: oklch(75% .12 25);--cb-tag: oklch(75% .08 145);--cb-button-bg: var(--_win9x-bg);--cb-button-color: oklch(90% 0 0);--cb-scrollbar-track: var(--_win9x-bg);--cb-scrollbar-thumb: oklch(50% 0 0)}:is(main,article) browser-window{--browser-window-header-bg: linear-gradient(90deg, oklch(30% .15 250), oklch(45% .08 250))}}
|
|
1
|
+
@layer tokens, reset, native-elements, custom-elements, web-components, utils, bundle-theme, bundle-effects, bundle-components;@layer bundle-theme{:root[data-theme~=win9x],[data-theme~=win9x]{--_win9x-bg: oklch(78% 0 0);--_win9x-highlight: oklch(100% 0 0);--_win9x-light: oklch(87% 0 0);--_win9x-shadow: oklch(50% 0 0);--_win9x-dark-shadow: oklch(0% 0 0);--_win9x-title-active: oklch(25% .15 250);--_win9x-title-inactive: oklch(50% 0 0);--_win9x-title-text: oklch(100% 0 0);--_win9x-window-bg: oklch(100% 0 0);--color-surface: var(--_win9x-bg);--color-surface-alt: oklch(74% 0 0);--color-surface-raised: oklch(85% 0 0);--color-surface-sunken: oklch(70% 0 0);--color-surface-overlay: var(--_win9x-bg);--color-background: oklch(42% .06 195);--color-text: oklch(0% 0 0);--color-text-muted: oklch(25% 0 0);--color-text-subtle: oklch(40% 0 0);--color-primary: oklch(30% .15 250);--caret-color: var(--color-primary);--color-primary-hover: oklch(30% .17 250);--color-primary-subtle: oklch(80% .05 250);--color-accent: oklch(50% .15 250);--color-accent-hover: oklch(45% .17 250);--color-success: oklch(45% .15 145);--color-success-subtle: oklch(90% .05 145);--color-success-text: oklch(30% .12 145);--color-warning: oklch(75% .15 90);--color-warning-subtle: oklch(92% .06 90);--color-warning-text: oklch(38% .12 90);--color-error: oklch(50% .2 25);--color-error-subtle: oklch(90% .05 25);--color-error-text: oklch(35% .15 25);--color-info: oklch(48% .15 250);--color-info-subtle: oklch(90% .05 250);--color-info-text: oklch(30% .12 250);--color-border: var(--_win9x-dark-shadow);--color-border-muted: var(--_win9x-shadow);--color-border-strong: var(--_win9x-dark-shadow);--_win9x-raised: inset 1px 1px 0 var(--_win9x-highlight), inset 2px 2px 0 var(--_win9x-light), inset -1px -1px 0 var(--_win9x-dark-shadow), inset -2px -2px 0 var(--_win9x-shadow);--_win9x-pressed: inset 1px 1px 0 var(--_win9x-dark-shadow), inset 2px 2px 0 var(--_win9x-shadow), inset -1px -1px 0 var(--_win9x-highlight), inset -2px -2px 0 var(--_win9x-light);--_win9x-sunken: inset 1px 1px 0 var(--_win9x-shadow), inset 2px 2px 0 var(--_win9x-dark-shadow), inset -1px -1px 0 var(--_win9x-light), inset -2px -2px 0 var(--_win9x-highlight);--_win9x-window: inset 1px 1px 0 var(--_win9x-light), inset -1px -1px 0 var(--_win9x-dark-shadow), inset 2px 2px 0 var(--_win9x-highlight), inset -2px -2px 0 var(--_win9x-shadow);--font-sans: "Tahoma", "MS Sans Serif", Arial, sans-serif;--font-mono: "Fixedsys", "Lucida Console", monospace;--line-height-normal: 1.4;--line-height-tight: 1.2;--letter-spacing-normal: 0;--radius-xs: 0;--radius-s: 0;--radius-m: 0;--radius-l: 0;--radius-xl: 0;--radius-2xl: 0;--radius-full: 0;--shadow-xs: 2px 2px 0 oklch(0% 0 0 / .3);--shadow-s: 2px 2px 0 oklch(0% 0 0 / .3);--shadow-m: 4px 4px 0 oklch(0% 0 0 / .3);--shadow-l: 4px 4px 0 oklch(0% 0 0 / .3);--shadow-xl: 6px 6px 0 oklch(0% 0 0 / .3);--shadow-2xl: 8px 8px 0 oklch(0% 0 0 / .3);--duration-instant: 0ms;--duration-fast: 0ms;--duration-normal: 0ms;--duration-slow: .1s;--ease-default: linear;--ease-out: linear;--control-size: .8125rem;--control-border: var(--_win9x-shadow);--control-checked-bg: var(--_win9x-window-bg);--control-checked-border: var(--_win9x-shadow);--control-radius-check: 0;--control-radius-radio: var(--radius-full);--input-bg: var(--_win9x-window-bg);--input-border: var(--_win9x-shadow);--input-border-focus: var(--color-primary);--range-track-bg: var(--_win9x-shadow);--range-track-fill: var(--color-primary);--range-thumb-bg: var(--_win9x-bg);--range-thumb-border: var(--_win9x-shadow);--progress-track-bg: var(--_win9x-light);--progress-fill: var(--color-primary)}:root[data-theme~=win9x],[data-theme~=win9x]{:is(main,article){.button,button{background:var(--_win9x-bg);color:var(--color-text);border:none;box-shadow:var(--_win9x-raised);padding:.25rem .75rem;font-family:var(--font-sans);font-size:.6875rem;min-height:23px;cursor:pointer;&:hover{background:var(--color-surface-alt)}&:active{box-shadow:var(--_win9x-pressed);padding-top:calc(.25rem + 1px);padding-left:calc(.75rem + 1px)}&:focus{outline:1px dotted var(--color-text);outline-offset:-4px}&:disabled{color:var(--_win9x-shadow);text-shadow:1px 1px 0 var(--_win9x-highlight);cursor:not-allowed}&.default,&[data-default=true]{outline:1px solid var(--_win9x-dark-shadow);outline-offset:-1px}}}.win9x-window,dialog{background:var(--_win9x-bg);border:none;box-shadow:var(--_win9x-window);padding:0;max-width:90vw;&::backdrop{background:transparent}}.win9x-titlebar,dialog header{background:linear-gradient(90deg,var(--_win9x-title-active),oklch(50% .1 250));color:var(--_win9x-title-text);padding:2px 3px;font-family:var(--font-sans);font-size:.6875rem;font-weight:700;align-items:center;justify-content:space-between;gap:.5rem;user-select:none}.win9x-titlebar{display:flex}.win9x-titlebar[data-inactive],dialog[data-inactive] header{background:linear-gradient(90deg,var(--_win9x-title-inactive),oklch(65% 0 0))}.win9x-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.win9x-buttons{display:flex;gap:2px}.win9x-btn{width:16px;height:14px;padding:0;min-height:auto;font-size:8px;display:flex;align-items:center;justify-content:center;box-shadow:var(--_win9x-raised);background:var(--_win9x-bg);color:var(--color-text);&:active{box-shadow:var(--_win9x-pressed)}}.win9x-body,dialog .dialog-body{padding:1rem;background:var(--_win9x-bg)}.win9x-content{background:var(--_win9x-window-bg);box-shadow:var(--_win9x-sunken);padding:.5rem}.win9x-footer,dialog footer{padding:.75rem 1rem;gap:.5rem;justify-content:center;background:var(--_win9x-bg)}.win9x-footer{display:flex}.menu-bar,.win9x-menubar{display:flex;background:var(--_win9x-bg);padding:2px 0;border-bottom:1px solid var(--_win9x-shadow);>button,>details>summary{background:transparent;box-shadow:none;padding:2px 8px;min-height:auto;&:hover{box-shadow:var(--_win9x-raised)}&:active,&[aria-expanded=true]{box-shadow:var(--_win9x-pressed)}}}.win9x-menu,menu{background:var(--_win9x-bg);box-shadow:var(--_win9x-raised);padding:2px;margin:0;list-style:none;min-width:150px;& li{margin:0}& button,a{display:flex;align-items:center;gap:1rem;width:100%;padding:2px 1.5rem;text-align:left;background:transparent;border:none;box-shadow:none;font-family:var(--font-sans);font-size:.6875rem;color:var(--color-text);text-decoration:none;cursor:pointer;min-height:auto;&:hover{background:var(--color-primary);color:var(--_win9x-title-text)}&:disabled{color:var(--_win9x-shadow);text-shadow:1px 1px 0 var(--_win9x-highlight)}}.shortcut{margin-left:auto;color:var(--color-text-muted)}& hr:not([data-ornament]){border:none;height:2px;background:var(--_win9x-shadow);box-shadow:0 1px 0 var(--_win9x-highlight);margin:2px 0}}:is(main,article){& details{background:var(--_win9x-bg);box-shadow:var(--_win9x-raised);margin-block-end:4px}& summary{padding:.25rem .5rem;cursor:pointer;font-family:var(--font-sans);font-size:.6875rem;list-style:none;align-items:center;gap:.5rem;&:before{content:"+";font-family:var(--font-mono);width:1em;text-align:center}}& details[open]>summary:before{content:"-"}& details>:not(summary){padding:.5rem;background:var(--_win9x-window-bg);box-shadow:var(--_win9x-sunken);margin:0 .5rem .5rem}}& input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=url],input[type=tel],textarea{background:var(--_win9x-window-bg);border:none;box-shadow:var(--_win9x-sunken);padding:2px 4px;font-family:var(--font-sans);font-size:.6875rem;color:var(--color-text);min-height:21px;&:focus{outline:none}&::placeholder{color:var(--color-text-muted)}&:disabled{background:var(--_win9x-bg);color:var(--_win9x-shadow)}}& select{appearance:none;background:var(--_win9x-window-bg);border:none;box-shadow:var(--_win9x-sunken);padding:2px 20px 2px 4px;font-family:var(--font-sans);font-size:.6875rem;color:var(--color-text);min-height:21px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect fill='%23c0c0c0' x='0' y='0' width='16' height='16'/%3E%3Cpath fill='black' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0 center;&:focus{outline:none}}:is(main,article) input[type=checkbox]{appearance:none;width:13px;height:13px;background:var(--_win9x-window-bg);box-shadow:var(--_win9x-sunken);cursor:pointer;position:relative;&:checked:after{content:"\2714";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;color:var(--color-text)}&:focus{outline:1px dotted var(--color-text);outline-offset:2px}}:is(main,article) input[type=radio]{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--_win9x-window-bg);box-shadow:var(--_win9x-sunken);cursor:pointer;position:relative;&:checked:after{content:"";position:absolute;top:3px;left:3px;width:6px;height:6px;border-radius:50%;background:var(--color-text)}&:focus{outline:1px dotted var(--color-text);outline-offset:2px}}& input[type=range]{appearance:none;height:21px;background:transparent;&::-webkit-slider-runnable-track{height:4px;background:var(--_win9x-bg);box-shadow:var(--_win9x-sunken)}&::-webkit-slider-thumb{appearance:none;width:11px;height:21px;background:var(--_win9x-bg);box-shadow:var(--_win9x-raised);margin-top:-8px}}& progress{appearance:none;height:16px;background:var(--_win9x-bg);box-shadow:var(--_win9x-sunken);border:none;&::-webkit-progress-bar{background:transparent}&::-webkit-progress-value{background:repeating-linear-gradient(90deg,var(--color-primary) 0,var(--color-primary) 8px,var(--_win9x-bg) 8px,var(--_win9x-bg) 10px)}&::-moz-progress-bar{background:repeating-linear-gradient(90deg,var(--color-primary) 0,var(--color-primary) 8px,var(--_win9x-bg) 8px,var(--_win9x-bg) 10px)}}.tabs,.win9x-tabs{display:flex;gap:0;position:relative;z-index:1;padding-left:4px}.tab,.win9x-tab{background:var(--_win9x-bg);box-shadow:inset 1px 1px 0 var(--_win9x-highlight),inset 2px 2px 0 var(--_win9x-light),inset -1px 0 0 var(--_win9x-shadow),inset -2px 0 0 var(--_win9x-dark-shadow);padding:4px 12px;font-family:var(--font-sans);font-size:.6875rem;cursor:pointer;border:none;position:relative;top:2px;margin-right:2px;&[aria-selected=true],&.active,&:checked{top:0;padding-bottom:6px;box-shadow:inset 1px 1px 0 var(--_win9x-highlight),inset 2px 2px 0 var(--_win9x-light),inset -1px 0 0 var(--_win9x-shadow),inset -2px 0 0 var(--_win9x-dark-shadow),0 2px 0 var(--_win9x-bg)}}.tab-panel,.win9x-panel{background:var(--_win9x-bg);box-shadow:var(--_win9x-raised);padding:1rem;position:relative}.win9x-groupbox,fieldset{background:var(--_win9x-bg);border:1px solid var(--_win9x-shadow);box-shadow:inset 0 0 0 1px var(--_win9x-highlight),0 0 0 1px var(--_win9x-highlight);padding:1rem;margin:.5rem 0}& legend{background:var(--_win9x-bg);padding:0 .5rem;font-family:var(--font-sans);font-size:.6875rem}.win9x-statusbar{display:flex;gap:2px;background:var(--_win9x-bg);padding:2px;border-top:1px solid var(--_win9x-shadow);box-shadow:inset 0 1px 0 var(--_win9x-highlight)}.win9x-status-section{background:var(--_win9x-bg);box-shadow:var(--_win9x-sunken);padding:2px 8px;font-family:var(--font-sans);font-size:.6875rem;flex:1;&:last-child{flex:none}}.win9x-toolbar{display:flex;gap:2px;background:var(--_win9x-bg);padding:2px;box-shadow:var(--_win9x-raised);& button{box-shadow:none;padding:2px 4px;min-height:auto;&:hover{box-shadow:var(--_win9x-raised)}&:active{box-shadow:var(--_win9x-pressed)}}.separator{width:2px;background:var(--_win9x-shadow);box-shadow:1px 0 0 var(--_win9x-highlight);margin:2px 4px}}:is(main,article){& hr:not([data-ornament]){border:none;height:2px;background:var(--_win9x-shadow);box-shadow:0 1px 0 var(--_win9x-highlight);margin-block:1rem}& h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);margin-block-end:.5rem}& a:not([class]){color:oklch(35% .2 250);text-decoration:underline;&:visited{color:#692278}&:hover{color:oklch(50% .22 25)}}.card{background:var(--_win9x-bg);box-shadow:var(--_win9x-raised);padding:1rem}& pre{background:var(--_win9x-window-bg);box-shadow:var(--_win9x-sunken);padding:.5rem;font-family:var(--font-mono);font-size:.6875rem;overflow-x:auto}& code{background:var(--color-surface-alt);padding:1px 4px;font-family:var(--font-mono);font-size:.6875rem}& pre code{background:transparent;padding:0}}:is(main,article) code-block{--cb-bg: var(--_win9x-window-bg);--cb-code-bg: var(--_win9x-window-bg);--cb-header-bg: var(--_win9x-bg);--cb-border-color: var(--_win9x-shadow);--cb-keyword: oklch(35% .2 250);--cb-string: oklch(40% .15 145);--cb-function: oklch(35% .15 320);--cb-number: oklch(50% .15 25);--cb-button-bg: var(--_win9x-bg);--cb-button-color: var(--color-text);--cb-button-border: var(--_win9x-shadow);--cb-scrollbar-track: var(--_win9x-bg);--cb-scrollbar-thumb: var(--_win9x-shadow)}:is(main,article) browser-window{--browser-window-bg: var(--_win9x-bg);--browser-window-header-bg: linear-gradient(90deg, var(--_win9x-title-active), oklch(50% .1 250));--browser-window-content-bg: var(--_win9x-window-bg);--browser-window-border-color: var(--_win9x-dark-shadow);--browser-window-text-color: var(--_win9x-title-text);--browser-window-url-bg: var(--_win9x-window-bg);--browser-window-hover-bg: var(--color-surface-alt)}& table{width:100%;border-collapse:collapse;background:var(--_win9x-window-bg);box-shadow:var(--_win9x-sunken);font-size:.6875rem}& th,td{padding:2px 8px;text-align:left;border:1px solid var(--_win9x-shadow)}& th{background:var(--_win9x-bg);font-weight:700}.win9x-listview-header{display:flex;background:var(--_win9x-bg);& button{flex:1;box-shadow:var(--_win9x-raised);padding:2px 8px;text-align:left;min-height:auto;border-right:1px solid var(--_win9x-dark-shadow);&:active{box-shadow:var(--_win9x-pressed)}}}.win9x-treeview{background:var(--_win9x-window-bg);box-shadow:var(--_win9x-sunken);padding:2px;font-family:var(--font-sans);font-size:.6875rem;& ul{list-style:none;margin:0;padding-left:16px}& li{position:relative;&:before{content:"";position:absolute;left:-12px;top:0;width:1px;height:100%;border-left:1px dotted var(--_win9x-shadow)}&:after{content:"";position:absolute;left:-12px;top:8px;width:8px;border-top:1px dotted var(--_win9x-shadow)}}}::selection{background:var(--color-primary);color:var(--_win9x-title-text)}}:root[data-theme~=win9x][data-mode=dark],[data-theme~=win9x][data-mode=dark]{color-scheme:dark;--_win9x-bg: oklch(30% 0 0);--_win9x-highlight: oklch(50% 0 0);--_win9x-light: oklch(40% 0 0);--_win9x-shadow: oklch(15% 0 0);--_win9x-dark-shadow: oklch(0% 0 0);--_win9x-window-bg: oklch(25% 0 0);--color-surface: var(--_win9x-bg);--color-surface-alt: oklch(26% 0 0);--color-surface-raised: oklch(38% 0 0);--color-surface-sunken: oklch(22% 0 0);--color-surface-overlay: oklch(33% 0 0);--color-background: oklch(15% .05 195);--color-text: oklch(90% 0 0);--color-text-muted: oklch(70% 0 0);--color-hover-bg: oklch(38% 0 0);--color-hover-text: var(--color-primary);--color-active-text: var(--color-primary);--color-primary: oklch(60% .15 250);--color-primary-hover: oklch(65% .18 250);--color-primary-subtle: oklch(25% .06 250);--color-accent: oklch(65% .15 250);--color-accent-hover: oklch(70% .17 250);--color-text-subtle: oklch(55% 0 0);--color-success: oklch(60% .15 145);--color-success-subtle: oklch(22% .05 145);--color-success-text: oklch(75% .12 145);--color-warning: oklch(80% .15 90);--color-warning-subtle: oklch(25% .06 90);--color-warning-text: oklch(82% .12 90);--color-error: oklch(62% .2 25);--color-error-subtle: oklch(22% .05 25);--color-error-text: oklch(75% .15 25);--color-info: oklch(62% .15 250);--color-info-subtle: oklch(22% .05 250);--color-info-text: oklch(75% .12 250);--color-border: oklch(40% 0 0);--color-border-strong: oklch(60% 0 0);--shadow-xs: 2px 2px 0 oklch(0% 0 0 / .5);--shadow-s: 2px 2px 0 oklch(0% 0 0 / .5);--shadow-m: 4px 4px 0 oklch(0% 0 0 / .5);--shadow-l: 4px 4px 0 oklch(0% 0 0 / .5);--shadow-xl: 6px 6px 0 oklch(0% 0 0 / .5);--shadow-2xl: 8px 8px 0 oklch(0% 0 0 / .5);--control-size: .8125rem;--control-border: var(--_win9x-highlight);--control-checked-bg: var(--_win9x-window-bg);--control-checked-border: var(--_win9x-highlight);--input-bg: var(--_win9x-window-bg);--input-border: var(--_win9x-highlight);--input-border-focus: var(--color-primary);--range-track-bg: var(--_win9x-shadow);--range-track-fill: var(--color-primary);--range-thumb-bg: var(--_win9x-bg);--range-thumb-border: var(--_win9x-highlight);--progress-track-bg: var(--_win9x-light);--progress-fill: var(--color-primary);:is(main,article) a:not([class]){color:#3a93e6}:is(main,article) code{background:#161616;color:#dedede}:is(main,article) code-block{--cb-bg: var(--_win9x-window-bg);--cb-code-bg: var(--_win9x-window-bg);--cb-header-bg: var(--_win9x-bg);--cb-text-color: oklch(90% 0 0);--cb-border-color: oklch(40% 0 0);--cb-comment: oklch(55% 0 0);--cb-keyword: oklch(70% .18 250);--cb-string: oklch(72% .12 145);--cb-function: oklch(70% .12 320);--cb-number: oklch(75% .12 25);--cb-tag: oklch(75% .08 145);--cb-button-bg: var(--_win9x-bg);--cb-button-color: oklch(90% 0 0);--cb-scrollbar-track: var(--_win9x-bg);--cb-scrollbar-thumb: oklch(50% 0 0)}:is(main,article) browser-window{--browser-window-header-bg: linear-gradient(90deg, oklch(30% .15 250), oklch(45% .08 250))}}}
|
|
2
2
|
/*# sourceMappingURL=win9x.css.map */
|
|
@@ -466,7 +466,7 @@
|
|
|
466
466
|
}
|
|
467
467
|
}
|
|
468
468
|
},
|
|
469
|
-
"
|
|
469
|
+
"s": {
|
|
470
470
|
"$type": "shadow",
|
|
471
471
|
"$value": {
|
|
472
472
|
"offsetX": {
|
|
@@ -492,7 +492,7 @@
|
|
|
492
492
|
}
|
|
493
493
|
}
|
|
494
494
|
},
|
|
495
|
-
"
|
|
495
|
+
"m": {
|
|
496
496
|
"$type": "shadow",
|
|
497
497
|
"$value": {
|
|
498
498
|
"offsetX": {
|
|
@@ -518,7 +518,7 @@
|
|
|
518
518
|
}
|
|
519
519
|
}
|
|
520
520
|
},
|
|
521
|
-
"
|
|
521
|
+
"l": {
|
|
522
522
|
"$type": "shadow",
|
|
523
523
|
"$value": {
|
|
524
524
|
"offsetX": {
|
|
@@ -663,7 +663,7 @@
|
|
|
663
663
|
"$extensions": {
|
|
664
664
|
"com.vanilla-breeze": {
|
|
665
665
|
"spec": "2025.10",
|
|
666
|
-
"vbVersion": "0.
|
|
666
|
+
"vbVersion": "0.4.0",
|
|
667
667
|
"unmapped": [
|
|
668
668
|
"--_win9x-bg",
|
|
669
669
|
"--_win9x-highlight",
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--chart-series-1: var(--color-primary, #3b82f6);--chart-series-2: var(--color-accent, #8b5cf6);--chart-series-3: var(--color-success, #22c55e);--chart-series-4: var(--color-warning, #f59e0b);--chart-series-5: var(--color-error, #ef4444);--chart-series-6: var(--color-info, #06b6d4)}.vb-chart{--chart-height: 200px;--chart-bar-height: var(--size-l, 1.5rem);--chart-gap: var(--size-xs, .5rem);--chart-label-width: minmax(80px, 20%);--chart-axis-color: var(--color-border, #e5e7eb);--chart-grid-color: var(--color-border-subtle, var(--chart-axis-color));--chart-label-color: var(--color-text-muted, #6b7280);--chart-tooltip-bg: var(--color-surface-raised, var(--color-surface, #fff));--chart-tooltip-color: var(--color-text, #1f2937);--chart-tooltip-shadow: var(--shadow-m, 0 4px 6px -1px rgb(0 0 0 / .1));--chart-duration: var(--duration-normal, .2s);--chart-easing: var(--ease-out, cubic-bezier(.33, 1, .68, 1))}.vb-chart[data-gap=s]{--chart-gap: var(--size-2xs, .25rem)}.vb-chart[data-gap=m]{--chart-gap: var(--size-s, .75rem)}.vb-chart[data-gap=l]{--chart-gap: var(--size-m, 1rem)}.vb-chart[data-size=s]{--chart-height: 120px;--chart-bar-height: var(--size-m, 1rem)}.vb-chart[data-size=l]{--chart-height: 300px;--chart-bar-height: var(--size-xl, 2rem)}.vb-chart{display:block;width:100%;border-collapse:collapse;border-spacing:0;font-family:inherit}.vb-chart caption{display:block;text-align:start;font-weight:600;margin-block-end:var(--size-s, .75rem);color:var(--color-text, inherit);font-size:var(--font-size-base, 1rem)}.vb-chart thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.vb-chart tbody,.vb-chart tr{display:block}.vb-chart th{display:block;font-weight:400;text-align:start;color:var(--chart-label-color);font-size:var(--font-size-sm, .875rem)}.vb-chart td{display:block;position:relative}.vb-chart[data-axes=y] tbody,.vb-chart[data-axes=both] tbody{border-inline-start:1px solid var(--chart-axis-color);padding-inline-start:var(--size-xs, .5rem)}.vb-chart[data-axes=x] tbody,.vb-chart[data-axes=both] tbody{border-block-end:1px solid var(--chart-axis-color);padding-block-end:var(--size-xs, .5rem)}@media print{.vb-chart{display:table}.vb-chart caption{display:table-caption}.vb-chart thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal;display:table-header-group}.vb-chart tbody{display:table-row-group}.vb-chart tr{display:table-row}.vb-chart th,.vb-chart td{display:table-cell;padding:var(--size-xs, .5rem);border:1px solid var(--chart-axis-color);background:none!important;width:auto!important;height:auto!important;font-size:inherit!important;color:inherit!important}}@media(prefers-reduced-motion:reduce){.vb-chart td{transition:none!important}}.vb-chart[data-type=bar] tbody{display:flex;flex-direction:column;gap:var(--chart-gap)}.vb-chart[data-type=bar] tr{display:grid;grid-template-columns:var(--chart-label-width) 1fr;align-items:center;gap:var(--size-s, .75rem)}.vb-chart[data-type=bar] th{text-align:end;padding-inline-end:var(--size-2xs, .25rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vb-chart[data-type=bar] td{height:var(--chart-bar-height);background:var(--chart-series-1);width:calc(var(--value, 0) * 100%);min-width:2px;border-radius:var(--radius-s, 4px);transition:width var(--chart-duration) var(--chart-easing),background-color var(--chart-duration) var(--chart-easing);font-size:0;color:transparent;overflow:hidden}.vb-chart[data-type=bar] td[data-series="2"]{background:var(--chart-series-2)}.vb-chart[data-type=bar] td[data-series="3"]{background:var(--chart-series-3)}.vb-chart[data-type=bar] td[data-series="4"]{background:var(--chart-series-4)}.vb-chart[data-type=bar] td[data-series="5"]{background:var(--chart-series-5)}.vb-chart[data-type=bar] td[data-series="6"]{background:var(--chart-series-6)}.vb-chart[data-type=bar][data-labels] td{font-size:var(--font-size-xs, .75rem);color:#fff;display:flex;align-items:center;justify-content:flex-end;padding-inline:var(--size-xs, .5rem);min-width:max(2px,calc(var(--value, 0) * 100%))}.vb-chart[data-type=bar][data-labels] td:after{content:attr(data-label)}.vb-chart[data-type=bar][data-stacked] tr{grid-template-columns:var(--chart-label-width) 1fr}.vb-chart[data-type=bar][data-stacked] tr td{display:inline-block;border-radius:0}.vb-chart[data-type=bar][data-stacked] tr td:first-of-type{border-radius:var(--radius-s, 4px) 0 0 var(--radius-s, 4px)}.vb-chart[data-type=bar][data-stacked] tr td:last-of-type{border-radius:0 var(--radius-s, 4px) var(--radius-s, 4px) 0}.vb-chart[data-type=bar] td:hover{filter:brightness(1.1)}.vb-chart[data-type=column] tbody{display:flex;align-items:flex-end;gap:var(--chart-gap);height:var(--chart-height);border-block-end:1px solid var(--chart-axis-color);padding-block-start:var(--size-xs, .5rem)}.vb-chart[data-type=column] tr{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;min-width:0}.vb-chart[data-type=column] th{order:1;text-align:center;padding-block-start:var(--size-xs, .5rem);font-size:var(--font-size-xs, .75rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.vb-chart[data-type=column] td{width:100%;max-width:60px;background:var(--chart-series-1);height:calc(var(--value, 0) * 100%);min-height:2px;border-radius:var(--radius-s, 4px) var(--radius-s, 4px) 0 0;transition:height var(--chart-duration) var(--chart-easing),background-color var(--chart-duration) var(--chart-easing);font-size:0;color:transparent;overflow:hidden}.vb-chart[data-type=column] td[data-series="2"]{background:var(--chart-series-2)}.vb-chart[data-type=column] td[data-series="3"]{background:var(--chart-series-3)}.vb-chart[data-type=column] td[data-series="4"]{background:var(--chart-series-4)}.vb-chart[data-type=column] td[data-series="5"]{background:var(--chart-series-5)}.vb-chart[data-type=column] td[data-series="6"]{background:var(--chart-series-6)}.vb-chart[data-type=column][data-labels] td:before{content:attr(data-label);position:absolute;inset-block-start:-1.5em;inset-inline-start:50%;transform:translate(-50%);font-size:var(--font-size-xs, .75rem);color:var(--chart-label-color);white-space:nowrap}.vb-chart[data-type=column][data-labels] td{position:relative}.vb-chart[data-type=column][data-stacked] tr{flex-direction:column-reverse}.vb-chart[data-type=column][data-stacked] td{border-radius:0;height:auto;flex:0 0 calc(var(--value, 0) * var(--chart-height))}.vb-chart[data-type=column][data-stacked] td:last-of-type{border-radius:var(--radius-s, 4px) var(--radius-s, 4px) 0 0}.vb-chart[data-type=column][data-grouped] tr{flex-direction:row;align-items:flex-end;gap:2px}.vb-chart[data-type=column][data-grouped] td{flex:1;max-width:30px}.vb-chart[data-type=column] td:hover{filter:brightness(1.1)}.vb-chart[data-type=line]{--line-size: 3px;--dot-size: 10px}.vb-chart[data-type=line] tbody{display:flex;height:var(--chart-height, 200px);border-block-end:1px solid var(--chart-axis-color);border-inline-start:1px solid var(--chart-axis-color);position:relative}.vb-chart[data-type=line] tr{flex:1;position:relative;height:100%}.vb-chart[data-type=line] th{position:absolute;inset-block-end:-1.5em;inset-inline-start:50%;transform:translate(-50%);font-size:var(--font-size-xs, .75rem);color:var(--chart-label-color);white-space:nowrap}.vb-chart[data-type=line] td{position:absolute;inset:0;background:var(--chart-series-1);clip-path:polygon(0% calc(100% * (1 - var(--start, 0))),100% calc(100% * (1 - var(--end, 0))),100% calc(100% * (1 - var(--end, 0)) + var(--line-size)),0% calc(100% * (1 - var(--start, 0)) + var(--line-size)));font-size:0;color:transparent;transition:opacity var(--chart-duration, .3s) var(--chart-easing, ease)}.vb-chart[data-type=line] td:after{content:"";position:absolute;inset-block-end:calc(var(--end, 0) * 100% - var(--dot-size) / 2);inset-inline-end:calc(var(--dot-size) / -2);width:var(--dot-size);height:var(--dot-size);background:var(--chart-series-1);border-radius:50%;border:2px solid var(--color-surface, #fff);z-index:2;transition:transform var(--chart-duration, .3s) var(--chart-easing, ease)}.vb-chart[data-type=line] td:hover:after{transform:scale(1.3);z-index:3}.vb-chart[data-type=line] td[data-series="2"]{background:var(--chart-series-2)}.vb-chart[data-type=line] td[data-series="2"]:after{background:var(--chart-series-2)}.vb-chart[data-type=line] td[data-series="3"]{background:var(--chart-series-3)}.vb-chart[data-type=line] td[data-series="3"]:after{background:var(--chart-series-3)}.vb-chart[data-type=line] td[data-series="4"]{background:var(--chart-series-4)}.vb-chart[data-type=line] td[data-series="4"]:after{background:var(--chart-series-4)}.vb-chart[data-type=line] td[data-series="5"]{background:var(--chart-series-5)}.vb-chart[data-type=line] td[data-series="5"]:after{background:var(--chart-series-5)}.vb-chart[data-type=line] td[data-series="6"]{background:var(--chart-series-6)}.vb-chart[data-type=line] td[data-series="6"]:after{background:var(--chart-series-6)}.vb-chart[data-type=line] tr:first-child td:before{content:"";position:absolute;inset-block-end:calc(var(--start, 0) * 100% - var(--dot-size) / 2);inset-inline-start:calc(var(--dot-size) / -2);width:var(--dot-size);height:var(--dot-size);background:var(--chart-series-1);border-radius:50%;border:2px solid var(--color-surface, #fff);z-index:2}.vb-chart[data-type=line] tr:first-child td[data-series="2"]:before{background:var(--chart-series-2)}.vb-chart[data-type=line] tr:first-child td[data-series="3"]:before{background:var(--chart-series-3)}.vb-chart[data-type=line] tr:first-child td[data-series="4"]:before{background:var(--chart-series-4)}.vb-chart[data-type=line][data-grid] tbody{background-image:repeating-linear-gradient(to top,var(--chart-grid-color) 0,var(--chart-grid-color) 1px,transparent 1px,transparent 25%)}.vb-chart[data-type=line][data-labels] td:after{content:attr(data-label)}.vb-chart[data-type=line][data-dots=large]{--dot-size: 14px}.vb-chart[data-type=line][data-dots=small]{--dot-size: 6px}.vb-chart[data-type=area]{--dot-size: 8px}.vb-chart[data-type=area] tbody{display:flex;height:var(--chart-height, 200px);border-block-end:1px solid var(--chart-axis-color);border-inline-start:1px solid var(--chart-axis-color);position:relative}.vb-chart[data-type=area] tr{flex:1;position:relative;height:100%}.vb-chart[data-type=area] th{position:absolute;inset-block-end:-1.5em;inset-inline-start:50%;transform:translate(-50%);font-size:var(--font-size-xs, .75rem);color:var(--chart-label-color);white-space:nowrap}.vb-chart[data-type=area] td{position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--chart-series-1) 40%,transparent),color-mix(in srgb,var(--chart-series-1) 20%,transparent));clip-path:polygon(0% calc(100% * (1 - var(--start, 0))),100% calc(100% * (1 - var(--end, 0))),100% 100%,0% 100%);font-size:0;color:transparent;transition:opacity var(--chart-duration, .3s) var(--chart-easing, ease)}.vb-chart[data-type=area] td:before{content:"";position:absolute;inset:0;background:var(--chart-series-1);clip-path:polygon(0% calc(100% * (1 - var(--start, 0))),100% calc(100% * (1 - var(--end, 0))),100% calc(100% * (1 - var(--end, 0)) + 2px),0% calc(100% * (1 - var(--start, 0)) + 2px))}.vb-chart[data-type=area] td:after{content:"";position:absolute;inset-block-end:calc(var(--end, 0) * 100% - var(--dot-size) / 2);inset-inline-end:calc(var(--dot-size) / -2);width:var(--dot-size);height:var(--dot-size);background:var(--chart-series-1);border-radius:50%;border:2px solid var(--color-surface, #fff);z-index:2;transition:transform var(--chart-duration, .3s) var(--chart-easing, ease)}.vb-chart[data-type=area] td:hover{background:linear-gradient(to top,color-mix(in srgb,var(--chart-series-1) 50%,transparent),color-mix(in srgb,var(--chart-series-1) 30%,transparent))}.vb-chart[data-type=area] td:hover:after{transform:scale(1.3)}.vb-chart[data-type=area] td[data-series="2"]{background:linear-gradient(to top,color-mix(in srgb,var(--chart-series-2) 40%,transparent),color-mix(in srgb,var(--chart-series-2) 20%,transparent))}.vb-chart[data-type=area] td[data-series="2"]:before{background:var(--chart-series-2)}.vb-chart[data-type=area] td[data-series="2"]:after{background:var(--chart-series-2)}.vb-chart[data-type=area] td[data-series="3"]{background:linear-gradient(to top,color-mix(in srgb,var(--chart-series-3) 40%,transparent),color-mix(in srgb,var(--chart-series-3) 20%,transparent))}.vb-chart[data-type=area] td[data-series="3"]:before{background:var(--chart-series-3)}.vb-chart[data-type=area] td[data-series="3"]:after{background:var(--chart-series-3)}.vb-chart[data-type=area] td[data-series="4"]{background:linear-gradient(to top,color-mix(in srgb,var(--chart-series-4) 40%,transparent),color-mix(in srgb,var(--chart-series-4) 20%,transparent))}.vb-chart[data-type=area] td[data-series="4"]:before{background:var(--chart-series-4)}.vb-chart[data-type=area] td[data-series="4"]:after{background:var(--chart-series-4)}.vb-chart[data-type=area][data-grid] tbody{background-image:repeating-linear-gradient(to top,var(--chart-grid-color) 0,var(--chart-grid-color) 1px,transparent 1px,transparent 25%)}.vb-chart[data-type=area][data-labels] td:after{content:attr(data-label)}.vb-chart[data-type=pie]{--chart-size: 200px;display:flex;flex-direction:column;align-items:center}.vb-chart[data-type=pie] caption{text-align:center}.vb-chart[data-type=pie] tbody{display:block;width:var(--chart-size);height:var(--chart-size);border-radius:50%;position:relative;background:conic-gradient(var(--chart-series-1) 0deg calc(var(--seg-1, .33) * 360deg),var(--chart-series-2) calc(var(--seg-1, .33) * 360deg) calc((var(--seg-1, .33) + var(--seg-2, .33)) * 360deg),var(--chart-series-3) calc((var(--seg-1, .33) + var(--seg-2, .33)) * 360deg) calc((var(--seg-1, .33) + var(--seg-2, .33) + var(--seg-3, .34)) * 360deg),var(--chart-series-4) calc((var(--seg-1, .33) + var(--seg-2, .33) + var(--seg-3, .34)) * 360deg) calc((var(--seg-1, .33) + var(--seg-2, .33) + var(--seg-3, .34) + var(--seg-4, 0)) * 360deg),var(--chart-series-5) calc((var(--seg-1, .33) + var(--seg-2, .33) + var(--seg-3, .34) + var(--seg-4, 0)) * 360deg) calc((var(--seg-1, .33) + var(--seg-2, .33) + var(--seg-3, .34) + var(--seg-4, 0) + var(--seg-5, 0)) * 360deg),var(--chart-series-6) calc((var(--seg-1, .33) + var(--seg-2, .33) + var(--seg-3, .34) + var(--seg-4, 0) + var(--seg-5, 0)) * 360deg) 360deg);box-shadow:inset 0 0 0 1px var(--color-border, #e5e7eb)}.vb-chart[data-type=pie] tr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.vb-chart[data-type=pie][data-donut] tbody:after{content:"";position:absolute;inset:25%;background:var(--color-surface, #fff);border-radius:50%}.vb-chart[data-type=pie][data-donut][data-center-label] tbody:after{content:attr(data-center-label);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg, 1.25rem);font-weight:600;color:var(--color-text, inherit)}.vb-chart[data-type=pie][data-size=s]{--chart-size: 120px}.vb-chart[data-type=pie][data-size=l]{--chart-size: 280px}.vb-chart[data-type=pie]:hover tbody{box-shadow:inset 0 0 0 1px var(--color-border, #e5e7eb),0 4px 12px #0000001a}.vb-chart[data-type=pie][data-half] tbody{height:calc(var(--chart-size) / 2);border-radius:var(--chart-size) var(--chart-size) 0 0;background:conic-gradient(from -90deg,var(--chart-series-1) 0deg calc(var(--seg-1, .33) * 180deg),var(--chart-series-2) calc(var(--seg-1, .33) * 180deg) calc((var(--seg-1, .33) + var(--seg-2, .33)) * 180deg),var(--chart-series-3) calc((var(--seg-1, .33) + var(--seg-2, .33)) * 180deg) 180deg,transparent 180deg 360deg)}.vb-chart-legend{display:flex;flex-wrap:wrap;gap:var(--size-m, 1rem);justify-content:center;margin-block-start:var(--size-m, 1rem);padding-block-start:var(--size-s, .75rem)}.vb-chart[data-legend-position=top]+.vb-chart-legend{order:-1;margin-block-start:0;margin-block-end:var(--size-m, 1rem);padding-block-start:0;padding-block-end:var(--size-s, .75rem)}.vb-chart[data-legend-position=left]+.vb-chart-legend,.vb-chart[data-legend-position=right]+.vb-chart-legend{flex-direction:column;align-items:flex-start}.vb-chart-legend-item{display:flex;align-items:center;gap:var(--size-2xs, .25rem);font-size:var(--font-size-sm, .875rem);color:var(--color-text-muted, #6b7280)}.vb-chart-legend-item:before{content:"";display:block;width:12px;height:12px;border-radius:var(--radius-xs, 2px);background:var(--legend-color, var(--chart-series-1));flex-shrink:0}.vb-chart-legend-item[data-series="1"]{--legend-color: var(--chart-series-1)}.vb-chart-legend-item[data-series="2"]{--legend-color: var(--chart-series-2)}.vb-chart-legend-item[data-series="3"]{--legend-color: var(--chart-series-3)}.vb-chart-legend-item[data-series="4"]{--legend-color: var(--chart-series-4)}.vb-chart-legend-item[data-series="5"]{--legend-color: var(--chart-series-5)}.vb-chart-legend-item[data-series="6"]{--legend-color: var(--chart-series-6)}.vb-chart-legend-item[data-interactive]{cursor:pointer;transition:opacity var(--duration-fast, .1s) ease}.vb-chart-legend-item[data-interactive]:hover{opacity:.8}.vb-chart-legend-item[data-interactive][aria-pressed=false]{opacity:.4;text-decoration:line-through}.vb-chart-legend[data-compact]{gap:var(--size-s, .75rem);font-size:var(--font-size-xs, .75rem)}.vb-chart-legend[data-compact] .vb-chart-legend-item:before{width:8px;height:8px}.vb-chart[data-legend=inline] caption{display:flex;flex-wrap:wrap;align-items:center;gap:var(--size-m, 1rem)}.vb-chart[data-legend=inline] caption:after{content:"";flex:1 0 100%}@media print{.vb-chart-legend{break-inside:avoid}.vb-chart-legend-item:before{print-color-adjust:exact;-webkit-print-color-adjust:exact}}.vb-chart[data-tooltip] td{position:relative;cursor:pointer;overflow:visible!important}.vb-chart[data-tooltip] td:after{content:attr(data-tooltip);position:absolute;inset-block-end:calc(100% + 8px);inset-inline-start:50%;transform:translate(-50%);padding:var(--size-2xs, .25rem) var(--size-xs, .5rem);background:var(--chart-tooltip-bg);color:var(--chart-tooltip-color);font-size:var(--font-size-xs, .75rem);white-space:nowrap;border-radius:var(--radius-s, 4px);box-shadow:var(--chart-tooltip-shadow);opacity:0;pointer-events:none;transition:opacity var(--duration-fast, .1s) ease;z-index:100;font-size:var(--font-size-xs, .75rem)!important;color:var(--chart-tooltip-color)!important}.vb-chart[data-tooltip] td:before{content:"";position:absolute;inset-block-end:calc(100% + 4px);inset-inline-start:50%;transform:translate(-50%);border:4px solid transparent;border-block-start-color:var(--chart-tooltip-bg);opacity:0;pointer-events:none;transition:opacity var(--duration-fast, .1s) ease;z-index:100}.vb-chart[data-tooltip] td:hover:after,.vb-chart[data-tooltip] td:hover:before{opacity:1}.vb-chart[data-tooltip] td:focus-visible:after,.vb-chart[data-tooltip] td:focus-visible:before{opacity:1}.vb-chart[data-tooltip] td:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.vb-chart[data-type=column][data-tooltip] td:after{inset-block-end:auto;inset-block-start:-2em}.vb-chart[data-type=column][data-tooltip] td:before{inset-block-end:auto;inset-block-start:calc(-2em + 12px);border-block-start-color:transparent;border-block-end-color:var(--chart-tooltip-bg)}.vb-chart[data-type=line][data-tooltip] td:after,.vb-chart[data-type=area][data-tooltip] td:after{inset-block-end:calc(100% + 12px)}.vb-chart[data-type=line][data-tooltip] td:before,.vb-chart[data-type=area][data-tooltip] td:before{inset-block-end:calc(100% + 8px)}.vb-chart[data-type=pie][data-tooltip] tbody{cursor:pointer}.vb-chart[data-tooltip-position=bottom] td:after{inset-block-end:auto;inset-block-start:calc(100% + 8px)}.vb-chart[data-tooltip-position=bottom] td:before{inset-block-end:auto;inset-block-start:calc(100% + 4px);border-block-start-color:transparent;border-block-end-color:var(--chart-tooltip-bg)}.vb-chart[data-tooltip-position=left] td:after{inset-inline-start:auto;inset-inline-end:calc(100% + 8px);inset-block-end:50%;transform:translateY(50%)}.vb-chart[data-tooltip-position=left] td:before{inset-inline-start:auto;inset-inline-end:calc(100% + 4px);inset-block-end:50%;transform:translateY(50%);border-block-start-color:transparent;border-inline-start-color:var(--chart-tooltip-bg)}.vb-chart[data-tooltip-position=right] td:after{inset-inline-start:calc(100% + 8px);inset-block-end:50%;transform:translateY(50%)}.vb-chart[data-tooltip-position=right] td:before{inset-inline-start:calc(100% + 4px);inset-block-end:50%;transform:translateY(50%);border-block-start-color:transparent;border-inline-end-color:var(--chart-tooltip-bg)}@media print{.vb-chart[data-tooltip] td:after,.vb-chart[data-tooltip] td:before{display:none}}@media(prefers-reduced-motion:reduce){.vb-chart[data-tooltip] td:after,.vb-chart[data-tooltip] td:before{transition:none}}chart-wc{display:block;container-type:inline-size;--chart-wc-height: 400px}chart-wc [data-chart-svg]{width:100%;height:var(--chart-wc-height);overflow:visible}chart-wc[data-size=sparkline]{--chart-wc-height: 100%;display:inline-block;inline-size:100%;block-size:100%;min-block-size:1.5em}chart-wc[data-size=sparkline] [data-chart-svg]{height:100%;min-block-size:1.5em}chart-wc [data-chart-svg] svg{width:100%;height:100%;display:block}chart-wc>table.visually-hidden{display:block;block-size:1px!important;inline-size:1px!important;overflow:hidden;contain:size}chart-wc>table.visually-hidden>*{display:none}@media print{chart-wc>table.visually-hidden{position:static;inline-size:auto;block-size:auto;margin:0;overflow:visible;clip:auto;white-space:normal}chart-wc [data-chart-svg]{display:none}}
|
|
1
|
+
@layer tokens, reset, native-elements, custom-elements, web-components, utils, bundle-theme, bundle-effects, bundle-components;@layer web-components{:root{--chart-series-1: var(--color-primary, #3b82f6);--chart-series-2: var(--color-accent, #8b5cf6);--chart-series-3: var(--color-success, #22c55e);--chart-series-4: var(--color-warning, #f59e0b);--chart-series-5: var(--color-error, #ef4444);--chart-series-6: var(--color-info, #06b6d4)}.vb-chart{--chart-height: 200px;--chart-bar-height: var(--size-l, 1.5rem);--chart-gap: var(--size-xs, .5rem);--chart-label-width: minmax(80px, 20%);--chart-axis-color: var(--color-border, #e5e7eb);--chart-grid-color: var(--color-border-subtle, var(--chart-axis-color));--chart-label-color: var(--color-text-muted, #6b7280);--chart-tooltip-bg: var(--color-surface-raised, var(--color-surface, #fff));--chart-tooltip-color: var(--color-text, #1f2937);--chart-tooltip-shadow: var(--shadow-m, 0 4px 6px -1px rgb(0 0 0 / .1));--chart-duration: var(--duration-normal, .2s);--chart-easing: var(--ease-out, cubic-bezier(.33, 1, .68, 1))}.vb-chart[data-gap=s]{--chart-gap: var(--size-2xs, .25rem)}.vb-chart[data-gap=m]{--chart-gap: var(--size-s, .75rem)}.vb-chart[data-gap=l]{--chart-gap: var(--size-m, 1rem)}.vb-chart[data-size=s]{--chart-height: 120px;--chart-bar-height: var(--size-m, 1rem)}.vb-chart[data-size=l]{--chart-height: 300px;--chart-bar-height: var(--size-xl, 2rem)}}@layer web-components{.vb-chart{display:block;width:100%;border-collapse:collapse;border-spacing:0;font-family:inherit}.vb-chart caption{display:block;text-align:start;font-weight:600;margin-block-end:var(--size-s, .75rem);color:var(--color-text, inherit);font-size:var(--font-size-base, 1rem)}.vb-chart thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.vb-chart tbody,.vb-chart tr{display:block}.vb-chart th{display:block;font-weight:400;text-align:start;color:var(--chart-label-color);font-size:var(--font-size-s, .875rem)}.vb-chart td{display:block;position:relative}.vb-chart[data-axes=y] tbody,.vb-chart[data-axes=both] tbody{border-inline-start:1px solid var(--chart-axis-color);padding-inline-start:var(--size-xs, .5rem)}.vb-chart[data-axes=x] tbody,.vb-chart[data-axes=both] tbody{border-block-end:1px solid var(--chart-axis-color);padding-block-end:var(--size-xs, .5rem)}@media print{.vb-chart{display:table}.vb-chart caption{display:table-caption}.vb-chart thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal;display:table-header-group}.vb-chart tbody{display:table-row-group}.vb-chart tr{display:table-row}.vb-chart th,.vb-chart td{display:table-cell;padding:var(--size-xs, .5rem);border:1px solid var(--chart-axis-color);background:none!important;width:auto!important;height:auto!important;font-size:inherit!important;color:inherit!important}}@media(prefers-reduced-motion:reduce){.vb-chart td{transition:none!important}}}@layer web-components{.vb-chart[data-type=bar] tbody{display:flex;flex-direction:column;gap:var(--chart-gap)}.vb-chart[data-type=bar] tr{display:grid;grid-template-columns:var(--chart-label-width) 1fr;align-items:center;gap:var(--size-s, .75rem)}.vb-chart[data-type=bar] th{text-align:end;padding-inline-end:var(--size-2xs, .25rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vb-chart[data-type=bar] td{height:var(--chart-bar-height);background:var(--chart-series-1);width:calc(var(--value, 0) * 100%);min-width:2px;border-radius:var(--radius-s, 4px);transition:width var(--chart-duration) var(--chart-easing),background-color var(--chart-duration) var(--chart-easing);font-size:0;color:transparent;overflow:hidden}.vb-chart[data-type=bar] td[data-series="2"]{background:var(--chart-series-2)}.vb-chart[data-type=bar] td[data-series="3"]{background:var(--chart-series-3)}.vb-chart[data-type=bar] td[data-series="4"]{background:var(--chart-series-4)}.vb-chart[data-type=bar] td[data-series="5"]{background:var(--chart-series-5)}.vb-chart[data-type=bar] td[data-series="6"]{background:var(--chart-series-6)}.vb-chart[data-type=bar][data-labels] td{font-size:var(--font-size-xs, .75rem);color:#fff;display:flex;align-items:center;justify-content:flex-end;padding-inline:var(--size-xs, .5rem);min-width:max(2px,calc(var(--value, 0) * 100%))}.vb-chart[data-type=bar][data-labels] td:after{content:attr(data-label)}.vb-chart[data-type=bar][data-stacked] tr{grid-template-columns:var(--chart-label-width) 1fr}.vb-chart[data-type=bar][data-stacked] tr td{display:inline-block;border-radius:0}.vb-chart[data-type=bar][data-stacked] tr td:first-of-type{border-radius:var(--radius-s, 4px) 0 0 var(--radius-s, 4px)}.vb-chart[data-type=bar][data-stacked] tr td:last-of-type{border-radius:0 var(--radius-s, 4px) var(--radius-s, 4px) 0}.vb-chart[data-type=bar] td:hover{filter:brightness(1.1)}}@layer web-components{.vb-chart[data-type=column] tbody{display:flex;align-items:flex-end;gap:var(--chart-gap);height:var(--chart-height);border-block-end:1px solid var(--chart-axis-color);padding-block-start:var(--size-xs, .5rem)}.vb-chart[data-type=column] tr{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;min-width:0}.vb-chart[data-type=column] th{order:1;text-align:center;padding-block-start:var(--size-xs, .5rem);font-size:var(--font-size-xs, .75rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.vb-chart[data-type=column] td{width:100%;max-width:60px;background:var(--chart-series-1);height:calc(var(--value, 0) * 100%);min-height:2px;border-radius:var(--radius-s, 4px) var(--radius-s, 4px) 0 0;transition:height var(--chart-duration) var(--chart-easing),background-color var(--chart-duration) var(--chart-easing);font-size:0;color:transparent;overflow:hidden}.vb-chart[data-type=column] td[data-series="2"]{background:var(--chart-series-2)}.vb-chart[data-type=column] td[data-series="3"]{background:var(--chart-series-3)}.vb-chart[data-type=column] td[data-series="4"]{background:var(--chart-series-4)}.vb-chart[data-type=column] td[data-series="5"]{background:var(--chart-series-5)}.vb-chart[data-type=column] td[data-series="6"]{background:var(--chart-series-6)}.vb-chart[data-type=column][data-labels] td:before{content:attr(data-label);position:absolute;inset-block-start:-1.5em;inset-inline-start:50%;transform:translate(-50%);font-size:var(--font-size-xs, .75rem);color:var(--chart-label-color);white-space:nowrap}.vb-chart[data-type=column][data-labels] td{position:relative}.vb-chart[data-type=column][data-stacked] tr{flex-direction:column-reverse}.vb-chart[data-type=column][data-stacked] td{border-radius:0;height:auto;flex:0 0 calc(var(--value, 0) * var(--chart-height))}.vb-chart[data-type=column][data-stacked] td:last-of-type{border-radius:var(--radius-s, 4px) var(--radius-s, 4px) 0 0}.vb-chart[data-type=column][data-grouped] tr{flex-direction:row;align-items:flex-end;gap:2px}.vb-chart[data-type=column][data-grouped] td{flex:1;max-width:30px}.vb-chart[data-type=column] td:hover{filter:brightness(1.1)}}@layer web-components{.vb-chart[data-type=line]{--line-size: 3px;--dot-size: 10px}.vb-chart[data-type=line] tbody{display:flex;height:var(--chart-height, 200px);border-block-end:1px solid var(--chart-axis-color);border-inline-start:1px solid var(--chart-axis-color);position:relative}.vb-chart[data-type=line] tr{flex:1;position:relative;height:100%}.vb-chart[data-type=line] th{position:absolute;inset-block-end:-1.5em;inset-inline-start:50%;transform:translate(-50%);font-size:var(--font-size-xs, .75rem);color:var(--chart-label-color);white-space:nowrap}.vb-chart[data-type=line] td{position:absolute;inset:0;background:var(--chart-series-1);clip-path:polygon(0% calc(100% * (1 - var(--start, 0))),100% calc(100% * (1 - var(--end, 0))),100% calc(100% * (1 - var(--end, 0)) + var(--line-size)),0% calc(100% * (1 - var(--start, 0)) + var(--line-size)));font-size:0;color:transparent;transition:opacity var(--chart-duration, .3s) var(--chart-easing, ease)}.vb-chart[data-type=line] td:after{content:"";position:absolute;inset-block-end:calc(var(--end, 0) * 100% - var(--dot-size) / 2);inset-inline-end:calc(var(--dot-size) / -2);width:var(--dot-size);height:var(--dot-size);background:var(--chart-series-1);border-radius:50%;border:2px solid var(--color-surface, #fff);z-index:2;transition:transform var(--chart-duration, .3s) var(--chart-easing, ease)}.vb-chart[data-type=line] td:hover:after{transform:scale(1.3);z-index:3}.vb-chart[data-type=line] td[data-series="2"]{background:var(--chart-series-2)}.vb-chart[data-type=line] td[data-series="2"]:after{background:var(--chart-series-2)}.vb-chart[data-type=line] td[data-series="3"]{background:var(--chart-series-3)}.vb-chart[data-type=line] td[data-series="3"]:after{background:var(--chart-series-3)}.vb-chart[data-type=line] td[data-series="4"]{background:var(--chart-series-4)}.vb-chart[data-type=line] td[data-series="4"]:after{background:var(--chart-series-4)}.vb-chart[data-type=line] td[data-series="5"]{background:var(--chart-series-5)}.vb-chart[data-type=line] td[data-series="5"]:after{background:var(--chart-series-5)}.vb-chart[data-type=line] td[data-series="6"]{background:var(--chart-series-6)}.vb-chart[data-type=line] td[data-series="6"]:after{background:var(--chart-series-6)}.vb-chart[data-type=line] tr:first-child td:before{content:"";position:absolute;inset-block-end:calc(var(--start, 0) * 100% - var(--dot-size) / 2);inset-inline-start:calc(var(--dot-size) / -2);width:var(--dot-size);height:var(--dot-size);background:var(--chart-series-1);border-radius:50%;border:2px solid var(--color-surface, #fff);z-index:2}.vb-chart[data-type=line] tr:first-child td[data-series="2"]:before{background:var(--chart-series-2)}.vb-chart[data-type=line] tr:first-child td[data-series="3"]:before{background:var(--chart-series-3)}.vb-chart[data-type=line] tr:first-child td[data-series="4"]:before{background:var(--chart-series-4)}.vb-chart[data-type=line][data-grid] tbody{background-image:repeating-linear-gradient(to top,var(--chart-grid-color) 0,var(--chart-grid-color) 1px,transparent 1px,transparent 25%)}.vb-chart[data-type=line][data-labels] td:after{content:attr(data-label)}.vb-chart[data-type=line][data-dots=large]{--dot-size: 14px}.vb-chart[data-type=line][data-dots=small]{--dot-size: 6px}}@layer web-components{.vb-chart[data-type=area]{--dot-size: 8px}.vb-chart[data-type=area] tbody{display:flex;height:var(--chart-height, 200px);border-block-end:1px solid var(--chart-axis-color);border-inline-start:1px solid var(--chart-axis-color);position:relative}.vb-chart[data-type=area] tr{flex:1;position:relative;height:100%}.vb-chart[data-type=area] th{position:absolute;inset-block-end:-1.5em;inset-inline-start:50%;transform:translate(-50%);font-size:var(--font-size-xs, .75rem);color:var(--chart-label-color);white-space:nowrap}.vb-chart[data-type=area] td{position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--chart-series-1) 40%,transparent),color-mix(in srgb,var(--chart-series-1) 20%,transparent));clip-path:polygon(0% calc(100% * (1 - var(--start, 0))),100% calc(100% * (1 - var(--end, 0))),100% 100%,0% 100%);font-size:0;color:transparent;transition:opacity var(--chart-duration, .3s) var(--chart-easing, ease)}.vb-chart[data-type=area] td:before{content:"";position:absolute;inset:0;background:var(--chart-series-1);clip-path:polygon(0% calc(100% * (1 - var(--start, 0))),100% calc(100% * (1 - var(--end, 0))),100% calc(100% * (1 - var(--end, 0)) + 2px),0% calc(100% * (1 - var(--start, 0)) + 2px))}.vb-chart[data-type=area] td:after{content:"";position:absolute;inset-block-end:calc(var(--end, 0) * 100% - var(--dot-size) / 2);inset-inline-end:calc(var(--dot-size) / -2);width:var(--dot-size);height:var(--dot-size);background:var(--chart-series-1);border-radius:50%;border:2px solid var(--color-surface, #fff);z-index:2;transition:transform var(--chart-duration, .3s) var(--chart-easing, ease)}.vb-chart[data-type=area] td:hover{background:linear-gradient(to top,color-mix(in srgb,var(--chart-series-1) 50%,transparent),color-mix(in srgb,var(--chart-series-1) 30%,transparent))}.vb-chart[data-type=area] td:hover:after{transform:scale(1.3)}.vb-chart[data-type=area] td[data-series="2"]{background:linear-gradient(to top,color-mix(in srgb,var(--chart-series-2) 40%,transparent),color-mix(in srgb,var(--chart-series-2) 20%,transparent))}.vb-chart[data-type=area] td[data-series="2"]:before{background:var(--chart-series-2)}.vb-chart[data-type=area] td[data-series="2"]:after{background:var(--chart-series-2)}.vb-chart[data-type=area] td[data-series="3"]{background:linear-gradient(to top,color-mix(in srgb,var(--chart-series-3) 40%,transparent),color-mix(in srgb,var(--chart-series-3) 20%,transparent))}.vb-chart[data-type=area] td[data-series="3"]:before{background:var(--chart-series-3)}.vb-chart[data-type=area] td[data-series="3"]:after{background:var(--chart-series-3)}.vb-chart[data-type=area] td[data-series="4"]{background:linear-gradient(to top,color-mix(in srgb,var(--chart-series-4) 40%,transparent),color-mix(in srgb,var(--chart-series-4) 20%,transparent))}.vb-chart[data-type=area] td[data-series="4"]:before{background:var(--chart-series-4)}.vb-chart[data-type=area] td[data-series="4"]:after{background:var(--chart-series-4)}.vb-chart[data-type=area][data-grid] tbody{background-image:repeating-linear-gradient(to top,var(--chart-grid-color) 0,var(--chart-grid-color) 1px,transparent 1px,transparent 25%)}.vb-chart[data-type=area][data-labels] td:after{content:attr(data-label)}}@layer web-components{.vb-chart[data-type=pie]{--chart-size: 200px;display:flex;flex-direction:column;align-items:center}.vb-chart[data-type=pie] caption{text-align:center}.vb-chart[data-type=pie] tbody{display:block;width:var(--chart-size);height:var(--chart-size);border-radius:50%;position:relative;background:conic-gradient(var(--chart-series-1) 0deg calc(var(--seg-1, .33) * 360deg),var(--chart-series-2) calc(var(--seg-1, .33) * 360deg) calc((var(--seg-1, .33) + var(--seg-2, .33)) * 360deg),var(--chart-series-3) calc((var(--seg-1, .33) + var(--seg-2, .33)) * 360deg) calc((var(--seg-1, .33) + var(--seg-2, .33) + var(--seg-3, .34)) * 360deg),var(--chart-series-4) calc((var(--seg-1, .33) + var(--seg-2, .33) + var(--seg-3, .34)) * 360deg) calc((var(--seg-1, .33) + var(--seg-2, .33) + var(--seg-3, .34) + var(--seg-4, 0)) * 360deg),var(--chart-series-5) calc((var(--seg-1, .33) + var(--seg-2, .33) + var(--seg-3, .34) + var(--seg-4, 0)) * 360deg) calc((var(--seg-1, .33) + var(--seg-2, .33) + var(--seg-3, .34) + var(--seg-4, 0) + var(--seg-5, 0)) * 360deg),var(--chart-series-6) calc((var(--seg-1, .33) + var(--seg-2, .33) + var(--seg-3, .34) + var(--seg-4, 0) + var(--seg-5, 0)) * 360deg) 360deg);box-shadow:inset 0 0 0 1px var(--color-border, #e5e7eb)}.vb-chart[data-type=pie] tr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.vb-chart[data-type=pie][data-donut] tbody:after{content:"";position:absolute;inset:25%;background:var(--color-surface, #fff);border-radius:50%}.vb-chart[data-type=pie][data-donut][data-center-label] tbody:after{content:attr(data-center-label);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-l, 1.25rem);font-weight:600;color:var(--color-text, inherit)}.vb-chart[data-type=pie][data-size=s]{--chart-size: 120px}.vb-chart[data-type=pie][data-size=l]{--chart-size: 280px}.vb-chart[data-type=pie]:hover tbody{box-shadow:inset 0 0 0 1px var(--color-border, #e5e7eb),0 4px 12px #0000001a}.vb-chart[data-type=pie][data-half] tbody{height:calc(var(--chart-size) / 2);border-radius:var(--chart-size) var(--chart-size) 0 0;background:conic-gradient(from -90deg,var(--chart-series-1) 0deg calc(var(--seg-1, .33) * 180deg),var(--chart-series-2) calc(var(--seg-1, .33) * 180deg) calc((var(--seg-1, .33) + var(--seg-2, .33)) * 180deg),var(--chart-series-3) calc((var(--seg-1, .33) + var(--seg-2, .33)) * 180deg) 180deg,transparent 180deg 360deg)}}@layer web-components{.vb-chart-legend{display:flex;flex-wrap:wrap;gap:var(--size-m, 1rem);justify-content:center;margin-block-start:var(--size-m, 1rem);padding-block-start:var(--size-s, .75rem)}.vb-chart[data-legend-position=top]+.vb-chart-legend{order:-1;margin-block-start:0;margin-block-end:var(--size-m, 1rem);padding-block-start:0;padding-block-end:var(--size-s, .75rem)}.vb-chart[data-legend-position=left]+.vb-chart-legend,.vb-chart[data-legend-position=right]+.vb-chart-legend{flex-direction:column;align-items:flex-start}.vb-chart-legend-item{display:flex;align-items:center;gap:var(--size-2xs, .25rem);font-size:var(--font-size-s, .875rem);color:var(--color-text-muted, #6b7280)}.vb-chart-legend-item:before{content:"";display:block;width:12px;height:12px;border-radius:var(--radius-xs, 2px);background:var(--legend-color, var(--chart-series-1));flex-shrink:0}.vb-chart-legend-item[data-series="1"]{--legend-color: var(--chart-series-1)}.vb-chart-legend-item[data-series="2"]{--legend-color: var(--chart-series-2)}.vb-chart-legend-item[data-series="3"]{--legend-color: var(--chart-series-3)}.vb-chart-legend-item[data-series="4"]{--legend-color: var(--chart-series-4)}.vb-chart-legend-item[data-series="5"]{--legend-color: var(--chart-series-5)}.vb-chart-legend-item[data-series="6"]{--legend-color: var(--chart-series-6)}.vb-chart-legend-item[data-interactive]{cursor:pointer;transition:opacity var(--duration-fast, .1s) ease}.vb-chart-legend-item[data-interactive]:hover{opacity:.8}.vb-chart-legend-item[data-interactive][aria-pressed=false]{opacity:.4;text-decoration:line-through}.vb-chart-legend[data-compact]{gap:var(--size-s, .75rem);font-size:var(--font-size-xs, .75rem)}.vb-chart-legend[data-compact] .vb-chart-legend-item:before{width:8px;height:8px}.vb-chart[data-legend=inline] caption{display:flex;flex-wrap:wrap;align-items:center;gap:var(--size-m, 1rem)}.vb-chart[data-legend=inline] caption:after{content:"";flex:1 0 100%}@media print{.vb-chart-legend{break-inside:avoid}.vb-chart-legend-item:before{print-color-adjust:exact;-webkit-print-color-adjust:exact}}}@layer web-components{.vb-chart[data-tooltip] td{position:relative;cursor:pointer;overflow:visible!important}.vb-chart[data-tooltip] td:after{content:attr(data-tooltip);position:absolute;inset-block-end:calc(100% + 8px);inset-inline-start:50%;transform:translate(-50%);padding:var(--size-2xs, .25rem) var(--size-xs, .5rem);background:var(--chart-tooltip-bg);color:var(--chart-tooltip-color);font-size:var(--font-size-xs, .75rem);white-space:nowrap;border-radius:var(--radius-s, 4px);box-shadow:var(--chart-tooltip-shadow);opacity:0;pointer-events:none;transition:opacity var(--duration-fast, .1s) ease;z-index:100;font-size:var(--font-size-xs, .75rem)!important;color:var(--chart-tooltip-color)!important}.vb-chart[data-tooltip] td:before{content:"";position:absolute;inset-block-end:calc(100% + 4px);inset-inline-start:50%;transform:translate(-50%);border:4px solid transparent;border-block-start-color:var(--chart-tooltip-bg);opacity:0;pointer-events:none;transition:opacity var(--duration-fast, .1s) ease;z-index:100}.vb-chart[data-tooltip] td:hover:after,.vb-chart[data-tooltip] td:hover:before{opacity:1}.vb-chart[data-tooltip] td:focus-visible:after,.vb-chart[data-tooltip] td:focus-visible:before{opacity:1}.vb-chart[data-tooltip] td:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.vb-chart[data-type=column][data-tooltip] td:after{inset-block-end:auto;inset-block-start:-2em}.vb-chart[data-type=column][data-tooltip] td:before{inset-block-end:auto;inset-block-start:calc(-2em + 12px);border-block-start-color:transparent;border-block-end-color:var(--chart-tooltip-bg)}.vb-chart[data-type=line][data-tooltip] td:after,.vb-chart[data-type=area][data-tooltip] td:after{inset-block-end:calc(100% + 12px)}.vb-chart[data-type=line][data-tooltip] td:before,.vb-chart[data-type=area][data-tooltip] td:before{inset-block-end:calc(100% + 8px)}.vb-chart[data-type=pie][data-tooltip] tbody{cursor:pointer}.vb-chart[data-tooltip-position=bottom] td:after{inset-block-end:auto;inset-block-start:calc(100% + 8px)}.vb-chart[data-tooltip-position=bottom] td:before{inset-block-end:auto;inset-block-start:calc(100% + 4px);border-block-start-color:transparent;border-block-end-color:var(--chart-tooltip-bg)}.vb-chart[data-tooltip-position=left] td:after{inset-inline-start:auto;inset-inline-end:calc(100% + 8px);inset-block-end:50%;transform:translateY(50%)}.vb-chart[data-tooltip-position=left] td:before{inset-inline-start:auto;inset-inline-end:calc(100% + 4px);inset-block-end:50%;transform:translateY(50%);border-block-start-color:transparent;border-inline-start-color:var(--chart-tooltip-bg)}.vb-chart[data-tooltip-position=right] td:after{inset-inline-start:calc(100% + 8px);inset-block-end:50%;transform:translateY(50%)}.vb-chart[data-tooltip-position=right] td:before{inset-inline-start:calc(100% + 4px);inset-block-end:50%;transform:translateY(50%);border-block-start-color:transparent;border-inline-end-color:var(--chart-tooltip-bg)}@media print{.vb-chart[data-tooltip] td:after,.vb-chart[data-tooltip] td:before{display:none}}@media(prefers-reduced-motion:reduce){.vb-chart[data-tooltip] td:after,.vb-chart[data-tooltip] td:before{transition:none}}}@layer web-components{chart-wc{display:block;container-type:inline-size;--chart-wc-height: 400px}chart-wc [data-chart-svg]{width:100%;height:var(--chart-wc-height);overflow:visible}chart-wc[data-size=sparkline]{--chart-wc-height: 100%;display:inline-block;inline-size:100%;block-size:100%;min-block-size:1.5em}chart-wc[data-size=sparkline] [data-chart-svg]{height:100%;min-block-size:1.5em}chart-wc [data-chart-svg] svg{width:100%;height:100%;display:block}chart-wc>table.visually-hidden{display:block;block-size:1px!important;inline-size:1px!important;overflow:hidden;contain:size}chart-wc>table.visually-hidden>*{display:none}@media print{chart-wc>table.visually-hidden{position:static!important;inline-size:auto!important;block-size:auto!important;margin:0!important;overflow:visible!important;clip:auto!important;white-space:normal!important}chart-wc [data-chart-svg]{display:none}}}
|
|
2
2
|
/*# sourceMappingURL=vanilla-breeze-charts.css.map */
|