/* FoxUI tokenlari — avtomatik yaratilgan (scripts/build.mjs). Qo'lda tahrirlamang. */ @layer fx.reset, fx.tokens, fx.base, fx.components, fx.utilities; @property --fx-knob-pill { syntax: ""; inherits: true; initial-value: 0; } @property --fx-knob-density { syntax: ""; inherits: true; initial-value: 1; } @property --fx-knob-depth { syntax: ""; inherits: true; initial-value: 1; } @property --fx-knob-motion { syntax: ""; inherits: true; initial-value: 1; } @property --fx-knob-blur { syntax: ""; inherits: true; initial-value: 1; } @property --fx-knob-outline { syntax: ""; inherits: true; initial-value: 1; } @property --fx-knob-field-fill { syntax: ""; inherits: true; initial-value: 0; } @property --fx-knob-motion-press { syntax: ""; inherits: true; initial-value: 1; } @property --fx-knob-motion-lift { syntax: ""; inherits: true; initial-value: 0; } @property --fx-knob-motion-stagger { syntax: ""; inherits: true; initial-value: 0; } @property --fx-knob-motion-loop { syntax: ""; inherits: true; initial-value: 1; } @layer fx.tokens { :root { --fx-color-gray-25: #FCFCFD; --fx-color-gray-50: #F9FAFB; --fx-color-gray-100: #F2F4F7; --fx-color-gray-200: #E4E7EC; --fx-color-gray-300: #D0D5DD; --fx-color-gray-400: #98A2B3; --fx-color-gray-500: #667085; --fx-color-gray-600: #475467; --fx-color-gray-700: #344054; --fx-color-gray-800: #1D2939; --fx-color-gray-900: #101828; --fx-color-gray-950: #0C111D; --fx-color-neutral-25: var(--fx-color-gray-25); --fx-color-neutral-50: var(--fx-color-gray-50); --fx-color-neutral-100: var(--fx-color-gray-100); --fx-color-neutral-200: var(--fx-color-gray-200); --fx-color-neutral-300: var(--fx-color-gray-300); --fx-color-neutral-400: var(--fx-color-gray-400); --fx-color-neutral-500: var(--fx-color-gray-500); --fx-color-neutral-600: var(--fx-color-gray-600); --fx-color-neutral-700: var(--fx-color-gray-700); --fx-color-neutral-800: var(--fx-color-gray-800); --fx-color-neutral-900: var(--fx-color-gray-900); --fx-color-neutral-950: var(--fx-color-gray-950); --fx-color-pastel-yellow: #F5D77E; --fx-color-pastel-pink: #F3BBD4; --fx-color-pastel-blue: #AECBF2; --fx-color-pastel-coral: #F4A688; --fx-color-pastel-green: #BEDDB2; --fx-color-pastel-purple: #CFC0F3; --fx-color-red-50: #FEF3F2; --fx-color-red-300: #FDA29B; --fx-color-red-600: #D92D20; --fx-color-red-700: #B42318; --fx-color-red-900: #7A271A; --fx-color-green-50: #ECFDF3; --fx-color-green-300: #75E0A7; --fx-color-green-600: #079455; --fx-color-green-700: #067647; --fx-color-green-900: #074D31; --fx-color-amber-50: #FFFAEB; --fx-color-amber-300: #FEC84B; --fx-color-amber-600: #DC6803; --fx-color-amber-700: #B54708; --fx-color-amber-900: #7A2E0E; --fx-color-white: #FFFFFF; --fx-color-black: #000000; --fx-color-brand-50: var(--fx-color-neutral-50); --fx-color-brand-100: var(--fx-color-neutral-100); --fx-color-brand-200: var(--fx-color-neutral-200); --fx-color-brand-300: var(--fx-color-neutral-300); --fx-color-brand-400: var(--fx-color-neutral-400); --fx-color-brand-500: var(--fx-color-neutral-500); --fx-color-brand-600: var(--fx-color-neutral-600); --fx-color-brand-700: var(--fx-color-neutral-700); --fx-color-brand-800: var(--fx-color-neutral-800); --fx-color-brand-900: var(--fx-color-neutral-900); --fx-color-brand-950: var(--fx-color-neutral-950); --fx-color-blue-50: #EFF8FF; --fx-color-blue-300: #84CAFF; --fx-color-blue-600: #1570EF; --fx-color-blue-700: #175CD3; --fx-color-blue-900: #194185; --fx-space-1: 4px; --fx-space-2: 8px; --fx-space-3: 12px; --fx-space-4: 16px; --fx-space-5: 20px; --fx-space-6: 24px; --fx-space-8: 32px; --fx-space-10: 40px; --fx-space-12: 48px; --fx-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-family-display: var(--fx-font-family-sans); --fx-font-family-mono: ui-monospace, "SFMono-Regular", Consolas, monospace; --fx-font-family-numeric: var(--fx-font-family-display); --fx-font-size-xs: 12px; --fx-font-size-sm: 14px; --fx-font-size-md: 16px; --fx-font-size-lg: 18px; --fx-font-size-xl: 20px; --fx-font-size-display-sm: 30px; --fx-font-size-display-md: 36px; --fx-font-size-2xl: 24px; --fx-font-size-display-lg: 48px; --fx-font-size-display-xl: 60px; --fx-font-size-display-2xl: 72px; --fx-font-size-fluid-sm: clamp(var(--fx-font-size-xl), calc(1rem + 0.8vw), var(--fx-font-size-2xl)); --fx-font-size-fluid-md: clamp(var(--fx-font-size-2xl), calc(1rem + 2vw), var(--fx-font-size-display-md)); --fx-font-size-fluid-lg: clamp(var(--fx-font-size-display-sm), calc(1rem + 3.5vw), var(--fx-font-size-display-lg)); --fx-font-size-fluid-xl: clamp(var(--fx-font-size-display-md), calc(1rem + 5vw), var(--fx-font-size-display-2xl)); --fx-font-weight-regular: 400; --fx-font-weight-medium: 500; --fx-font-weight-semibold: 600; --fx-font-weight-bold: 700; --fx-font-adjust-sans: ex-height 0.52; --fx-font-adjust-display: var(--fx-font-adjust-sans); --fx-font-adjust-mono: ex-height 0.52; --fx-font-adjust-numeric: var(--fx-font-adjust-display); --fx-duration-fast: 120ms; --fx-duration-base: 200ms; --fx-duration-slow: 360ms; --fx-duration-pulse: 1600ms; --fx-duration-spin: 800ms; --fx-duration-instant: 60ms; --fx-duration-slower: 500ms; --fx-duration-stagger: 30ms; --fx-duration-shimmer: 1400ms; --fx-duration-indeterminate: 1600ms; --fx-duration-delay-tip: 400ms; --fx-ease-standard: cubic-bezier(0.2, 0, 0, 1); --fx-ease-emphasized: cubic-bezier(0.2, 0.7, 0.2, 1); --fx-ease-exit: cubic-bezier(0.4, 0, 1, 1); --fx-ease-enter: cubic-bezier(0, 0, 0.2, 1); --fx-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); --fx-ease-spring: linear(0, 0.044, 0.149, 0.283, 0.424, 0.558, 0.677, 0.776, 0.856, 0.917, 0.961, 0.992, 1.011, 1.022, 1.027, 1.028, 1.027, 1.023, 1.019, 1.015, 1.012, 1.008, 1.006, 1.004, 1); --fx-ease-bounce: linear(0, 0.064, 0.22, 0.42, 0.626, 0.812, 0.961, 1.067, 1.132, 1.16, 1.16, 1.141, 1.111, 1.077, 1.045, 1.017, 0.997, 0.983, 0.975, 0.973, 0.975, 0.979, 0.985, 0.99, 0.995, 0.999, 1.002, 1.004, 1.004, 1.004, 1.004, 1.003, 1); --fx-line-height-tight: 1.1; --fx-line-height-snug: 1.25; --fx-line-height-normal: 1.5; --fx-line-height-relaxed: 1.7; --fx-tracking-tight: -0.02em; --fx-tracking-snug: -0.01em; --fx-tracking-normal: 0em; --fx-tracking-wide: 0.02em; --fx-tracking-wider: 0.08em; --fx-z-base: 0; --fx-z-raised: 1; --fx-z-sticky: 100; --fx-z-dropdown: 200; --fx-z-overlay: 300; --fx-z-modal: 400; --fx-z-toast: 500; --fx-z-tip: 600; --fx-bp-compact: 0px; --fx-bp-medium: 600px; --fx-bp-expanded: 840px; --fx-bp-large: 1200px; --fx-bp-xl: 1600px; --fx-text-primary: var(--fx-color-neutral-900); --fx-text-secondary: var(--fx-color-neutral-600); --fx-text-tertiary: var(--fx-color-neutral-500); --fx-text-disabled: var(--fx-color-neutral-400); --fx-text-on-brand: var(--fx-color-white); --fx-text-error: var(--fx-color-red-600); --fx-text-on-category: var(--fx-color-neutral-900); --fx-text-brand: var(--fx-color-neutral-900); --fx-text-on-error: var(--fx-color-white); --fx-text-on-rail: var(--fx-color-neutral-300); --fx-text-on-rail-strong: var(--fx-color-neutral-25); --fx-text-on-rail-selected: var(--fx-color-neutral-950); --fx-text-on-rail-current: color-mix(in oklab, var(--fx-bg-rail-selected) 82%, var(--fx-text-on-rail-strong)); --fx-text-on-static-light: var(--fx-color-neutral-900); --fx-bg-page: var(--fx-color-neutral-25); --fx-bg-surface: var(--fx-color-white); --fx-bg-subtle: var(--fx-color-neutral-50); --fx-bg-muted: var(--fx-color-neutral-100); --fx-bg-brand-solid: var(--fx-color-neutral-900); --fx-bg-brand-solid-hover: var(--fx-color-neutral-700); --fx-bg-error-subtle: var(--fx-color-red-50); --fx-bg-success-subtle: var(--fx-color-green-50); --fx-bg-warning-subtle: var(--fx-color-amber-50); --fx-bg-overlay: var(--fx-color-neutral-950); --fx-bg-category-yellow: var(--fx-color-pastel-yellow); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page)); --fx-bg-category-pink: var(--fx-color-pastel-pink); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page)); --fx-bg-category-blue: var(--fx-color-pastel-blue); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page)); --fx-bg-category-coral: var(--fx-color-pastel-coral); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page)); --fx-bg-category-green: var(--fx-color-pastel-green); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page)); --fx-bg-category-purple: var(--fx-color-pastel-purple); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page)); --fx-bg-brand-subtle: var(--fx-color-neutral-100); --fx-bg-error-solid: var(--fx-color-red-600); --fx-bg-info-subtle: var(--fx-color-blue-50); --fx-bg-rail: var(--fx-color-neutral-950); --fx-bg-rail-selected: var(--fx-color-neutral-25); --fx-bg-static-light: var(--fx-color-neutral-25); --fx-bg-surface-container-lowest: light-dark(var(--fx-bg-surface), var(--fx-bg-page)); --fx-bg-surface-container-low: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 2%); --fx-bg-surface-container: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 4%); --fx-bg-surface-container-high: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 7%); --fx-bg-surface-container-highest: color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 10%); --fx-selection-bg: color-mix(in oklab, var(--fx-bg-brand-solid) 24%, var(--fx-bg-surface)); --fx-selection-text: var(--fx-text-primary); --fx-scrollbar-thumb: color-mix(in oklab, var(--fx-text-primary) 28%, transparent); --fx-scrollbar-thumb-hover: color-mix(in oklab, var(--fx-text-primary) 45%, transparent); --fx-scrollbar-track: transparent; --fx-fg-success: var(--fx-color-green-700); --fx-fg-warning: var(--fx-color-amber-700); --fx-fg-error: var(--fx-color-red-700); --fx-fg-info: var(--fx-color-blue-700); --fx-border-color-default: var(--fx-color-neutral-200); --fx-border-color-strong: var(--fx-color-neutral-300); --fx-border-color-focus: var(--fx-color-neutral-900); --fx-border-color-error: var(--fx-color-red-600); --fx-border-width-default: 1px; --fx-border-width-focus: 2px; --fx-shadow-color: var(--fx-color-neutral-900); --fx-knob-pill: 0; --fx-knob-density: 1; --fx-knob-depth: 1; --fx-knob-motion: 1; --fx-knob-blur: 1; --fx-knob-outline: 1; --fx-knob-field-fill: 0; --fx-knob-motion-press: 1; --fx-knob-motion-lift: 0; --fx-knob-motion-stagger: 0; --fx-knob-motion-loop: 1; --fx-radius-control: 8px; --fx-radius-nav: 6px; --fx-radius-field-multiline: 8px; --fx-radius-surface: 12px; --fx-radius-overlay: 16px; --fx-radius-badge: 6px; --fx-radius-circle: 50%; --fx-radius-checkbox-ratio: 0.25; --fx-radius-avatar-ratio: 0.28; --fx-radius-pill: 999px; --fx-size-control-sm: 36px; --fx-size-control-md: 44px; --fx-size-control-lg: 52px; --fx-size-checkbox: 20px; --fx-size-switch-track: 40px; --fx-size-min-target: 24px; --fx-size-touch-target: 44px; --fx-size-avatar-sm: 22px; --fx-size-avatar-md: 36px; --fx-size-avatar-lg: 56px; --fx-size-status-dot: 10px; --fx-size-status-dot-sm: 8px; --fx-size-icon-sm: 16px; --fx-size-icon-md: 20px; --fx-size-icon-lg: 24px; --fx-size-topbar: 60px; --fx-size-rail: 80px; --fx-nav-width: 256px; --fx-nav-width-collapsed: 60px; --fx-nav-item-height: 40px; --fx-nav-subitem-height: 34px; --fx-dialog-width: 480px; --fx-popover-width: 320px; --fx-toast-width: 520px; --fx-viz-ink: color-mix(in oklab, var(--fx-text-primary) 80%, var(--fx-bg-surface)); --fx-viz-brand: var(--fx-color-neutral-500); --fx-viz-accent: var(--fx-color-pastel-yellow); --fx-viz-risk: var(--fx-bg-error-solid); --fx-viz-context: var(--fx-color-neutral-300); --fx-viz-grid: var(--fx-border-color-default); --fx-viz-track: color-mix(in oklab, var(--fx-text-primary) 10%, transparent); --fx-motion-shift-sm: var(--fx-space-1); --fx-motion-shift-md: var(--fx-space-2); --fx-motion-shift-lg: var(--fx-space-6); --fx-motion-scale-enter: 0.96; --fx-motion-scale-press: 0.97; --fx-motion-lift: -2px; --fx-type-display-lg-size: var(--fx-font-size-display-xl); --fx-type-display-lg-line-height: var(--fx-line-height-tight); --fx-type-display-lg-weight: var(--fx-font-weight-semibold); --fx-type-display-lg-tracking: var(--fx-tracking-tight); --fx-type-display-md-size: var(--fx-font-size-display-lg); --fx-type-display-md-line-height: var(--fx-line-height-tight); --fx-type-display-md-weight: var(--fx-font-weight-semibold); --fx-type-display-md-tracking: var(--fx-tracking-tight); --fx-type-display-sm-size: var(--fx-font-size-display-md); --fx-type-display-sm-line-height: var(--fx-line-height-tight); --fx-type-display-sm-weight: var(--fx-font-weight-semibold); --fx-type-display-sm-tracking: var(--fx-tracking-tight); --fx-type-headline-lg-size: var(--fx-font-size-display-sm); --fx-type-headline-lg-line-height: var(--fx-line-height-snug); --fx-type-headline-lg-weight: var(--fx-font-weight-semibold); --fx-type-headline-lg-tracking: var(--fx-tracking-snug); --fx-type-headline-md-size: var(--fx-font-size-2xl); --fx-type-headline-md-line-height: var(--fx-line-height-snug); --fx-type-headline-md-weight: var(--fx-font-weight-semibold); --fx-type-headline-md-tracking: var(--fx-tracking-snug); --fx-type-headline-sm-size: var(--fx-font-size-xl); --fx-type-headline-sm-line-height: var(--fx-line-height-snug); --fx-type-headline-sm-weight: var(--fx-font-weight-semibold); --fx-type-headline-sm-tracking: var(--fx-tracking-normal); --fx-type-title-lg-size: var(--fx-font-size-lg); --fx-type-title-lg-line-height: var(--fx-line-height-snug); --fx-type-title-lg-weight: var(--fx-font-weight-semibold); --fx-type-title-lg-tracking: var(--fx-tracking-normal); --fx-type-title-md-size: var(--fx-font-size-md); --fx-type-title-md-line-height: var(--fx-line-height-snug); --fx-type-title-md-weight: var(--fx-font-weight-semibold); --fx-type-title-md-tracking: var(--fx-tracking-normal); --fx-type-title-sm-size: var(--fx-font-size-sm); --fx-type-title-sm-line-height: var(--fx-line-height-snug); --fx-type-title-sm-weight: var(--fx-font-weight-semibold); --fx-type-title-sm-tracking: var(--fx-tracking-normal); --fx-type-body-lg-size: var(--fx-font-size-md); --fx-type-body-lg-line-height: var(--fx-line-height-normal); --fx-type-body-lg-weight: var(--fx-font-weight-regular); --fx-type-body-lg-tracking: var(--fx-tracking-normal); --fx-type-body-md-size: var(--fx-font-size-sm); --fx-type-body-md-line-height: var(--fx-line-height-normal); --fx-type-body-md-weight: var(--fx-font-weight-regular); --fx-type-body-md-tracking: var(--fx-tracking-normal); --fx-type-body-sm-size: var(--fx-font-size-xs); --fx-type-body-sm-line-height: var(--fx-line-height-normal); --fx-type-body-sm-weight: var(--fx-font-weight-regular); --fx-type-body-sm-tracking: var(--fx-tracking-normal); --fx-type-label-lg-size: var(--fx-font-size-sm); --fx-type-label-lg-line-height: var(--fx-line-height-snug); --fx-type-label-lg-weight: var(--fx-font-weight-medium); --fx-type-label-lg-tracking: var(--fx-tracking-normal); --fx-type-label-md-size: var(--fx-font-size-xs); --fx-type-label-md-line-height: var(--fx-line-height-snug); --fx-type-label-md-weight: var(--fx-font-weight-medium); --fx-type-label-md-tracking: var(--fx-tracking-wide); --fx-type-label-sm-size: var(--fx-font-size-xs); --fx-type-label-sm-line-height: var(--fx-line-height-snug); --fx-type-label-sm-weight: var(--fx-font-weight-medium); --fx-type-label-sm-tracking: var(--fx-tracking-wider); --fx-elevation-0: none; --fx-elevation-1: 0 1px calc(2px * var(--fx-knob-blur)) 0 color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent); --fx-elevation-2: 0 4px calc(8px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent), 0 2px calc(4px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 6%), transparent); --fx-elevation-3: 0 12px calc(16px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 8%), transparent), 0 4px calc(6px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 3%), transparent); --fx-elevation-4: 0 20px calc(24px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent), 0 8px calc(8px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 4%), transparent); --fx-elevation-5: 0 24px calc(48px * var(--fx-knob-blur)) -12px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 18%), transparent), 0 8px calc(16px * var(--fx-knob-blur)) -6px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 6%), transparent); --fx-elevation-tint-0: var(--fx-bg-surface); --fx-elevation-tint-1: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 3%)); --fx-elevation-tint-2: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 5%)); --fx-elevation-tint-3: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 8%)); --fx-elevation-tint-4: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 11%)); --fx-elevation-tint-5: light-dark(var(--fx-bg-surface), color-mix(in oklab, var(--fx-bg-surface), var(--fx-text-primary) 14%)); } [data-fx-scheme="light"] { --fx-text-primary: var(--fx-color-neutral-900); --fx-text-secondary: var(--fx-color-neutral-600); --fx-text-tertiary: var(--fx-color-neutral-500); --fx-text-disabled: var(--fx-color-neutral-400); --fx-text-on-brand: var(--fx-color-white); --fx-text-error: var(--fx-color-red-600); --fx-text-on-category: var(--fx-color-neutral-900); --fx-text-brand: var(--fx-color-neutral-900); --fx-text-on-error: var(--fx-color-white); --fx-bg-page: var(--fx-color-neutral-25); --fx-bg-surface: var(--fx-color-white); --fx-bg-subtle: var(--fx-color-neutral-50); --fx-bg-muted: var(--fx-color-neutral-100); --fx-bg-brand-solid: var(--fx-color-neutral-900); --fx-bg-brand-solid-hover: var(--fx-color-neutral-700); --fx-bg-error-subtle: var(--fx-color-red-50); --fx-bg-success-subtle: var(--fx-color-green-50); --fx-bg-warning-subtle: var(--fx-color-amber-50); --fx-bg-overlay: var(--fx-color-neutral-950); --fx-bg-category-yellow: var(--fx-color-pastel-yellow); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 20%, var(--fx-bg-page)); --fx-bg-category-pink: var(--fx-color-pastel-pink); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 20%, var(--fx-bg-page)); --fx-bg-category-blue: var(--fx-color-pastel-blue); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 20%, var(--fx-bg-page)); --fx-bg-category-coral: var(--fx-color-pastel-coral); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 20%, var(--fx-bg-page)); --fx-bg-category-green: var(--fx-color-pastel-green); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 20%, var(--fx-bg-page)); --fx-bg-category-purple: var(--fx-color-pastel-purple); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 20%, var(--fx-bg-page)); --fx-bg-brand-subtle: var(--fx-color-neutral-100); --fx-bg-error-solid: var(--fx-color-red-600); --fx-bg-info-subtle: var(--fx-color-blue-50); --fx-fg-success: var(--fx-color-green-700); --fx-fg-warning: var(--fx-color-amber-700); --fx-fg-error: var(--fx-color-red-700); --fx-fg-info: var(--fx-color-blue-700); --fx-border-color-default: var(--fx-color-neutral-200); --fx-border-color-strong: var(--fx-color-neutral-300); --fx-border-color-focus: var(--fx-color-neutral-900); --fx-border-color-error: var(--fx-color-red-600); --fx-shadow-color: var(--fx-color-neutral-900); --fx-viz-brand: var(--fx-color-neutral-500); --fx-viz-context: var(--fx-color-neutral-300); --fx-viz-accent: var(--fx-color-pastel-yellow); } @media (prefers-color-scheme: dark) { :root:not([data-fx-scheme="light"]) { --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-brand: var(--fx-color-neutral-900); --fx-text-error: var(--fx-color-red-300); --fx-text-on-category: var(--fx-color-neutral-50); --fx-text-brand: var(--fx-color-neutral-50); --fx-text-on-error: var(--fx-color-white); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-brand-solid: var(--fx-color-neutral-50); --fx-bg-brand-solid-hover: var(--fx-color-neutral-200); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-bg-error-solid: var(--fx-color-red-600); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-fg-success: var(--fx-color-green-300); --fx-fg-warning: var(--fx-color-amber-300); --fx-fg-error: var(--fx-color-red-300); --fx-fg-info: var(--fx-color-blue-300); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-border-color-focus: var(--fx-color-neutral-50); --fx-border-color-error: var(--fx-color-red-300); --fx-shadow-color: var(--fx-color-black); --fx-viz-brand: var(--fx-color-neutral-400); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-accent: var(--fx-color-pastel-yellow); } } [data-fx-scheme="dark"] { --fx-text-primary: var(--fx-color-neutral-50); --fx-text-secondary: var(--fx-color-neutral-300); --fx-text-tertiary: var(--fx-color-neutral-400); --fx-text-disabled: var(--fx-color-neutral-600); --fx-text-on-brand: var(--fx-color-neutral-900); --fx-text-error: var(--fx-color-red-300); --fx-text-on-category: var(--fx-color-neutral-50); --fx-text-brand: var(--fx-color-neutral-50); --fx-text-on-error: var(--fx-color-white); --fx-bg-page: var(--fx-color-neutral-950); --fx-bg-surface: var(--fx-color-neutral-900); --fx-bg-subtle: var(--fx-color-neutral-900); --fx-bg-muted: var(--fx-color-neutral-800); --fx-bg-brand-solid: var(--fx-color-neutral-50); --fx-bg-brand-solid-hover: var(--fx-color-neutral-200); --fx-bg-error-subtle: color-mix(in oklab, var(--fx-color-red-300) 16%, var(--fx-bg-surface)); --fx-bg-success-subtle: color-mix(in oklab, var(--fx-color-green-300) 16%, var(--fx-bg-surface)); --fx-bg-warning-subtle: color-mix(in oklab, var(--fx-color-amber-300) 16%, var(--fx-bg-surface)); --fx-bg-overlay: var(--fx-color-black); --fx-bg-category-yellow: color-mix(in oklab, var(--fx-color-pastel-yellow) 45%, var(--fx-color-neutral-950)); --fx-bg-category-yellow-subtle: color-mix(in oklab, var(--fx-color-pastel-yellow) 10%, var(--fx-bg-page)); --fx-bg-category-pink: color-mix(in oklab, var(--fx-color-pastel-pink) 45%, var(--fx-color-neutral-950)); --fx-bg-category-pink-subtle: color-mix(in oklab, var(--fx-color-pastel-pink) 10%, var(--fx-bg-page)); --fx-bg-category-blue: color-mix(in oklab, var(--fx-color-pastel-blue) 45%, var(--fx-color-neutral-950)); --fx-bg-category-blue-subtle: color-mix(in oklab, var(--fx-color-pastel-blue) 10%, var(--fx-bg-page)); --fx-bg-category-coral: color-mix(in oklab, var(--fx-color-pastel-coral) 45%, var(--fx-color-neutral-950)); --fx-bg-category-coral-subtle: color-mix(in oklab, var(--fx-color-pastel-coral) 10%, var(--fx-bg-page)); --fx-bg-category-green: color-mix(in oklab, var(--fx-color-pastel-green) 45%, var(--fx-color-neutral-950)); --fx-bg-category-green-subtle: color-mix(in oklab, var(--fx-color-pastel-green) 10%, var(--fx-bg-page)); --fx-bg-category-purple: color-mix(in oklab, var(--fx-color-pastel-purple) 45%, var(--fx-color-neutral-950)); --fx-bg-category-purple-subtle: color-mix(in oklab, var(--fx-color-pastel-purple) 10%, var(--fx-bg-page)); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-bg-error-solid: var(--fx-color-red-600); --fx-bg-info-subtle: color-mix(in oklab, var(--fx-color-blue-300) 16%, var(--fx-bg-surface)); --fx-fg-success: var(--fx-color-green-300); --fx-fg-warning: var(--fx-color-amber-300); --fx-fg-error: var(--fx-color-red-300); --fx-fg-info: var(--fx-color-blue-300); --fx-border-color-default: var(--fx-color-neutral-800); --fx-border-color-strong: var(--fx-color-neutral-700); --fx-border-color-focus: var(--fx-color-neutral-50); --fx-border-color-error: var(--fx-color-red-300); --fx-shadow-color: var(--fx-color-black); --fx-viz-brand: var(--fx-color-neutral-400); --fx-viz-context: var(--fx-color-neutral-600); --fx-viz-accent: var(--fx-color-pastel-yellow); } [data-fx-theme="graphite"] { --fx-color-neutral-25: var(--fx-color-gray-25); --fx-color-neutral-50: var(--fx-color-gray-50); --fx-color-neutral-100: var(--fx-color-gray-100); --fx-color-neutral-200: var(--fx-color-gray-200); --fx-color-neutral-300: var(--fx-color-gray-300); --fx-color-neutral-400: var(--fx-color-gray-400); --fx-color-neutral-500: var(--fx-color-gray-500); --fx-color-neutral-600: var(--fx-color-gray-600); --fx-color-neutral-700: var(--fx-color-gray-700); --fx-color-neutral-800: var(--fx-color-gray-800); --fx-color-neutral-900: var(--fx-color-gray-900); --fx-color-neutral-950: var(--fx-color-gray-950); --fx-color-brand-50: var(--fx-color-neutral-50); --fx-color-brand-100: var(--fx-color-neutral-100); --fx-color-brand-200: var(--fx-color-neutral-200); --fx-color-brand-300: var(--fx-color-neutral-300); --fx-color-brand-400: var(--fx-color-neutral-400); --fx-color-brand-500: var(--fx-color-neutral-500); --fx-color-brand-600: var(--fx-color-neutral-600); --fx-color-brand-700: var(--fx-color-neutral-700); --fx-color-brand-800: var(--fx-color-neutral-800); --fx-color-brand-900: var(--fx-color-neutral-900); --fx-color-brand-950: var(--fx-color-neutral-950); --fx-color-pastel-yellow: #F5D77E; --fx-color-pastel-pink: #F3BBD4; --fx-color-pastel-blue: #AECBF2; --fx-color-pastel-coral: #F4A688; --fx-color-pastel-green: #BEDDB2; --fx-color-pastel-purple: #CFC0F3; --fx-text-on-brand: var(--fx-color-white); --fx-text-brand: var(--fx-color-neutral-900); --fx-text-on-rail-selected: var(--fx-color-neutral-950); --fx-bg-brand-solid: var(--fx-color-neutral-900); --fx-bg-brand-solid-hover: var(--fx-color-neutral-700); --fx-bg-brand-subtle: var(--fx-color-neutral-100); --fx-bg-rail: var(--fx-color-neutral-950); --fx-bg-rail-selected: var(--fx-color-neutral-25); --fx-border-color-focus: var(--fx-color-neutral-900); --fx-viz-brand: var(--fx-color-neutral-500); } [data-fx-theme="amber"], [data-fx-theme="amber"] [data-fx-scheme="light"] { --fx-color-neutral-25: #FDFBF8; --fx-color-neutral-50: #F9F6F3; --fx-color-neutral-100: #F2F0ED; --fx-color-neutral-200: #E7E4E1; --fx-color-neutral-300: #D9D3CD; --fx-color-neutral-400: #A8A29C; --fx-color-neutral-500: #706B65; --fx-color-neutral-600: #58534D; --fx-color-neutral-700: #45403B; --fx-color-neutral-800: #2B2722; --fx-color-neutral-900: #1D1914; --fx-color-neutral-950: #15110C; --fx-color-brand-50: #FFF3E6; --fx-color-brand-100: #FFE5C8; --fx-color-brand-200: #F8CD9D; --fx-color-brand-300: #E8B273; --fx-color-brand-400: #D6933C; --fx-color-brand-500: #F59E0B; --fx-color-brand-600: #A06604; --fx-color-brand-700: #865400; --fx-color-brand-800: #6C4301; --fx-color-brand-900: #533200; --fx-color-brand-950: #382000; --fx-color-pastel-yellow: #FED2A0; --fx-color-pastel-pink: #FFBBD1; --fx-color-pastel-blue: #B3D4FE; --fx-color-pastel-coral: #FFC0A9; --fx-color-pastel-green: #BBDEA4; --fx-color-pastel-purple: #D9C6FF; --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-700); --fx-text-on-rail-selected: var(--fx-color-neutral-950); --fx-bg-brand-solid: var(--fx-color-brand-500); --fx-bg-brand-solid-hover: var(--fx-color-brand-600); --fx-bg-brand-subtle: var(--fx-color-brand-50); --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-950) 70%, var(--fx-color-neutral-950)); --fx-bg-rail-selected: var(--fx-color-brand-500); --fx-border-color-focus: var(--fx-color-brand-600); --fx-viz-brand: var(--fx-color-brand-700); } @media (prefers-color-scheme: dark) { [data-fx-theme="amber"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); } } [data-fx-theme="amber"][data-fx-scheme="dark"], [data-fx-theme="amber"] [data-fx-scheme="dark"] { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); } [data-fx-theme="amethyst"], [data-fx-theme="amethyst"] [data-fx-scheme="light"] { --fx-color-neutral-25: #FBFAFE; --fx-color-neutral-50: #F7F6FA; --fx-color-neutral-100: #F0EFF3; --fx-color-neutral-200: #E4E4E8; --fx-color-neutral-300: #D4D3DB; --fx-color-neutral-400: #A3A2A9; --fx-color-neutral-500: #6C6B72; --fx-color-neutral-600: #54535A; --fx-color-neutral-700: #414047; --fx-color-neutral-800: #28272D; --fx-color-neutral-900: #19191E; --fx-color-neutral-950: #121116; --fx-color-brand-50: #F5F3FF; --fx-color-brand-100: #EAE6FF; --fx-color-brand-200: #D7CEFE; --fx-color-brand-300: #C0B0FF; --fx-color-brand-400: #A88DFE; --fx-color-brand-500: #9466FF; --fx-color-brand-600: #7C3AED; --fx-color-brand-700: #693DC2; --fx-color-brand-800: #54329B; --fx-color-brand-900: #402676; --fx-color-brand-950: #2A1A4E; --fx-color-pastel-yellow: #F5D983; --fx-color-pastel-pink: #FABBDE; --fx-color-pastel-blue: #B6D3FF; --fx-color-pastel-coral: #FEC0AD; --fx-color-pastel-green: #B4DFAA; --fx-color-pastel-purple: #D2C8FF; --fx-text-on-brand: var(--fx-color-white); --fx-text-brand: var(--fx-color-brand-700); --fx-text-on-rail-selected: var(--fx-color-neutral-950); --fx-bg-brand-solid: var(--fx-color-brand-600); --fx-bg-brand-solid-hover: var(--fx-color-brand-700); --fx-bg-brand-subtle: var(--fx-color-brand-50); --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-950) 70%, var(--fx-color-neutral-950)); --fx-bg-rail-selected: var(--fx-color-brand-500); --fx-border-color-focus: var(--fx-color-brand-600); --fx-viz-brand: var(--fx-color-brand-700); } @media (prefers-color-scheme: dark) { [data-fx-theme="amethyst"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); } } [data-fx-theme="amethyst"][data-fx-scheme="dark"], [data-fx-theme="amethyst"] [data-fx-scheme="dark"] { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); } [data-fx-theme="emerald"], [data-fx-theme="emerald"] [data-fx-scheme="light"] { --fx-color-neutral-25: #F8FCFA; --fx-color-neutral-50: #F4F8F6; --fx-color-neutral-100: #EDF1EF; --fx-color-neutral-200: #E2E6E3; --fx-color-neutral-300: #CED7D2; --fx-color-neutral-400: #9DA5A1; --fx-color-neutral-500: #666E6A; --fx-color-neutral-600: #4F5652; --fx-color-neutral-700: #3C433F; --fx-color-neutral-800: #232926; --fx-color-neutral-900: #151B18; --fx-color-neutral-950: #0D1310; --fx-color-brand-50: #DFFEEE; --fx-color-brand-100: #CFF4E1; --fx-color-brand-200: #B2E3CB; --fx-color-brand-300: #8ECEAF; --fx-color-brand-400: #63B791; --fx-color-brand-500: #32A176; --fx-color-brand-600: #059669; --fx-color-brand-700: #107250; --fx-color-brand-800: #105B40; --fx-color-brand-900: #0F4530; --fx-color-brand-950: #0B2E20; --fx-color-pastel-yellow: #EDDC85; --fx-color-pastel-pink: #FDBBD9; --fx-color-pastel-blue: #B3D4FE; --fx-color-pastel-coral: #FEC0AD; --fx-color-pastel-green: #9DE3C1; --fx-color-pastel-purple: #D9C6FF; --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-700); --fx-text-on-rail-selected: var(--fx-color-neutral-950); --fx-bg-brand-solid: var(--fx-color-brand-600); --fx-bg-brand-solid-hover: var(--fx-color-brand-700); --fx-bg-brand-subtle: var(--fx-color-brand-50); --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-950) 70%, var(--fx-color-neutral-950)); --fx-bg-rail-selected: var(--fx-color-brand-500); --fx-border-color-focus: var(--fx-color-brand-600); --fx-viz-brand: var(--fx-color-brand-700); } @media (prefers-color-scheme: dark) { [data-fx-theme="emerald"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); } } [data-fx-theme="emerald"][data-fx-scheme="dark"], [data-fx-theme="emerald"] [data-fx-scheme="dark"] { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); } [data-fx-theme="hilos"], [data-fx-theme="hilos"] [data-fx-scheme="light"] { --fx-color-neutral-25: #FAF8F4; --fx-color-neutral-50: #F4F1EC; --fx-color-neutral-100: #EFEAE3; --fx-color-neutral-200: #E9E4DC; --fx-color-neutral-300: #D9D4CC; --fx-color-neutral-400: #A6A099; --fx-color-neutral-500: #706B64; --fx-color-neutral-600: #57524C; --fx-color-neutral-700: #433F39; --fx-color-neutral-800: #2B2721; --fx-color-neutral-900: #1F1C18; --fx-color-neutral-950: #15130F; --fx-color-brand-50: var(--fx-color-neutral-50); --fx-color-brand-100: var(--fx-color-neutral-100); --fx-color-brand-200: var(--fx-color-neutral-200); --fx-color-brand-300: var(--fx-color-neutral-300); --fx-color-brand-400: var(--fx-color-neutral-400); --fx-color-brand-500: var(--fx-color-neutral-500); --fx-color-brand-600: var(--fx-color-neutral-600); --fx-color-brand-700: var(--fx-color-neutral-700); --fx-color-brand-800: var(--fx-color-neutral-800); --fx-color-brand-900: var(--fx-color-neutral-900); --fx-color-brand-950: var(--fx-color-neutral-950); --fx-text-on-brand: var(--fx-color-white); --fx-text-brand: var(--fx-color-neutral-900); --fx-bg-brand-solid: var(--fx-color-neutral-900); --fx-bg-brand-solid-hover: var(--fx-color-neutral-700); --fx-bg-brand-subtle: var(--fx-color-neutral-100); --fx-border-color-focus: var(--fx-color-neutral-900); } @media (prefers-color-scheme: dark) { [data-fx-theme="hilos"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-900); --fx-text-brand: var(--fx-color-neutral-50); --fx-bg-brand-solid: var(--fx-color-neutral-50); --fx-bg-brand-solid-hover: var(--fx-color-neutral-200); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-neutral-50); } } [data-fx-theme="hilos"][data-fx-scheme="dark"], [data-fx-theme="hilos"] [data-fx-scheme="dark"] { --fx-text-on-brand: var(--fx-color-neutral-900); --fx-text-brand: var(--fx-color-neutral-50); --fx-bg-brand-solid: var(--fx-color-neutral-50); --fx-bg-brand-solid-hover: var(--fx-color-neutral-200); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-neutral-50); } [data-fx-theme="ocean"], [data-fx-theme="ocean"] [data-fx-scheme="light"] { --fx-color-neutral-25: #F9FBFF; --fx-color-neutral-50: #F5F7FA; --fx-color-neutral-100: #EEF0F4; --fx-color-neutral-200: #E3E5E8; --fx-color-neutral-300: #D0D4DC; --fx-color-neutral-400: #9FA3AA; --fx-color-neutral-500: #686C72; --fx-color-neutral-600: #51545A; --fx-color-neutral-700: #3E4147; --fx-color-neutral-800: #25282D; --fx-color-neutral-900: #171A1F; --fx-color-neutral-950: #0F1217; --fx-color-brand-50: #F0F5FF; --fx-color-brand-100: #DFEAFF; --fx-color-brand-200: #C1D7FF; --fx-color-brand-300: #9CBEFE; --fx-color-brand-400: #71A1FE; --fx-color-brand-500: #4783FF; --fx-color-brand-600: #2563EB; --fx-color-brand-700: #2858BF; --fx-color-brand-800: #204799; --fx-color-brand-900: #193674; --fx-color-brand-950: #10244D; --fx-color-pastel-yellow: #F5D983; --fx-color-pastel-pink: #F8BBE1; --fx-color-pastel-blue: #BAD2FE; --fx-color-pastel-coral: #FEC0AD; --fx-color-pastel-green: #B4DFAA; --fx-color-pastel-purple: #D5C7FE; --fx-text-on-brand: var(--fx-color-white); --fx-text-brand: var(--fx-color-brand-700); --fx-text-on-rail-selected: var(--fx-color-neutral-950); --fx-bg-brand-solid: var(--fx-color-brand-600); --fx-bg-brand-solid-hover: var(--fx-color-brand-700); --fx-bg-brand-subtle: var(--fx-color-brand-50); --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-950) 70%, var(--fx-color-neutral-950)); --fx-bg-rail-selected: var(--fx-color-brand-500); --fx-border-color-focus: var(--fx-color-brand-600); --fx-viz-brand: var(--fx-color-brand-700); } @media (prefers-color-scheme: dark) { [data-fx-theme="ocean"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); } } [data-fx-theme="ocean"][data-fx-scheme="dark"], [data-fx-theme="ocean"] [data-fx-scheme="dark"] { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); } [data-fx-theme="rose"], [data-fx-theme="rose"] [data-fx-scheme="light"] { --fx-color-neutral-25: #FEFAFA; --fx-color-neutral-50: #FAF5F5; --fx-color-neutral-100: #F3EFEF; --fx-color-neutral-200: #E8E3E3; --fx-color-neutral-300: #DBD1D1; --fx-color-neutral-400: #AAA0A0; --fx-color-neutral-500: #726969; --fx-color-neutral-600: #5A5252; --fx-color-neutral-700: #473F3F; --fx-color-neutral-800: #2D2626; --fx-color-neutral-900: #1E1718; --fx-color-neutral-950: #161010; --fx-color-brand-50: #FEF2F2; --fx-color-brand-100: #FFE1E1; --fx-color-brand-200: #FFC5C6; --fx-color-brand-300: #FE9FA3; --fx-color-brand-400: #FC6E7A; --fx-color-brand-500: #ED415A; --fx-color-brand-600: #E11D48; --fx-color-brand-700: #AE1F39; --fx-color-brand-800: #8B1B2E; --fx-color-brand-900: #6A1623; --fx-color-brand-950: #471017; --fx-color-pastel-yellow: #FDD583; --fx-color-pastel-pink: #FEBAD6; --fx-color-pastel-blue: #B3D4FE; --fx-color-pastel-coral: #FFBEBF; --fx-color-pastel-green: #B4DFAA; --fx-color-pastel-purple: #E0C3FD; --fx-text-on-brand: var(--fx-color-white); --fx-text-brand: var(--fx-color-brand-700); --fx-text-on-rail-selected: var(--fx-color-neutral-950); --fx-bg-brand-solid: var(--fx-color-brand-600); --fx-bg-brand-solid-hover: var(--fx-color-brand-700); --fx-bg-brand-subtle: var(--fx-color-brand-50); --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-950) 70%, var(--fx-color-neutral-950)); --fx-bg-rail-selected: var(--fx-color-brand-500); --fx-border-color-focus: var(--fx-color-brand-600); --fx-viz-brand: var(--fx-color-brand-700); } @media (prefers-color-scheme: dark) { [data-fx-theme="rose"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); } } [data-fx-theme="rose"][data-fx-scheme="dark"], [data-fx-theme="rose"] [data-fx-scheme="dark"] { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); } [data-fx-theme="sunset"], [data-fx-theme="sunset"] [data-fx-scheme="light"] { --fx-color-neutral-25: #FEFAF8; --fx-color-neutral-50: #FAF6F4; --fx-color-neutral-100: #F3EFED; --fx-color-neutral-200: #E8E3E2; --fx-color-neutral-300: #DBD2CF; --fx-color-neutral-400: #A9A19E; --fx-color-neutral-500: #726A67; --fx-color-neutral-600: #5A524F; --fx-color-neutral-700: #463F3D; --fx-color-neutral-800: #2D2624; --fx-color-neutral-900: #1E1816; --fx-color-neutral-950: #16100E; --fx-color-brand-50: #FEF2EE; --fx-color-brand-100: #FEE3D9; --fx-color-brand-200: #FEC8B3; --fx-color-brand-300: #FFA381; --fx-color-brand-400: #F07F53; --fx-color-brand-500: #EA580C; --fx-color-brand-600: #C34601; --fx-color-brand-700: #A23901; --fx-color-brand-800: #832D01; --fx-color-brand-900: #642305; --fx-color-brand-950: #421706; --fx-color-pastel-yellow: #FAD683; --fx-color-pastel-pink: #FFBAD4; --fx-color-pastel-blue: #B3D4FE; --fx-color-pastel-coral: #FFC0A9; --fx-color-pastel-green: #B4DFAA; --fx-color-pastel-purple: #D9C6FF; --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-700); --fx-text-on-rail-selected: var(--fx-color-neutral-950); --fx-bg-brand-solid: var(--fx-color-brand-500); --fx-bg-brand-solid-hover: var(--fx-color-brand-600); --fx-bg-brand-subtle: var(--fx-color-brand-50); --fx-bg-rail: color-mix(in oklab, var(--fx-color-brand-950) 70%, var(--fx-color-neutral-950)); --fx-bg-rail-selected: var(--fx-color-brand-500); --fx-border-color-focus: var(--fx-color-brand-500); --fx-viz-brand: var(--fx-color-brand-700); } @media (prefers-color-scheme: dark) { [data-fx-theme="sunset"]:not([data-fx-scheme="light"]) { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); } } [data-fx-theme="sunset"][data-fx-scheme="dark"], [data-fx-theme="sunset"] [data-fx-scheme="dark"] { --fx-text-on-brand: var(--fx-color-neutral-950); --fx-text-brand: var(--fx-color-brand-300); --fx-bg-brand-solid: var(--fx-color-brand-400); --fx-bg-brand-solid-hover: var(--fx-color-brand-300); --fx-bg-brand-subtle: color-mix(in oklab, var(--fx-bg-brand-solid) 20%, var(--fx-bg-surface)); --fx-border-color-focus: var(--fx-color-brand-400); --fx-viz-brand: var(--fx-color-brand-400); } [data-fx-body="system"] { --fx-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-adjust-sans: ex-height 0.52; } [data-fx-body="google-sans"] { --fx-font-family-sans: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-adjust-sans: ex-height 0.520; } [data-fx-body="inter"] { --fx-font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-adjust-sans: ex-height 0.520; } [data-fx-body="onest"] { --fx-font-family-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-adjust-sans: ex-height 0.514; } [data-fx-body="public"] { --fx-font-family-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-adjust-sans: ex-height 0.512; } [data-fx-body="source"] { --fx-font-family-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-adjust-sans: ex-height 0.520; } [data-fx-font="system"] { --fx-font-family-display: var(--fx-font-family-sans); --fx-font-family-mono: ui-monospace, "SFMono-Regular", Consolas, monospace; --fx-font-family-numeric: var(--fx-font-family-display); --fx-font-adjust-display: var(--fx-font-adjust-sans); --fx-font-adjust-mono: ex-height 0.52; --fx-font-adjust-numeric: var(--fx-font-adjust-display); } [data-fx-font="condensed"] { --fx-font-family-display: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace; --fx-font-family-numeric: var(--fx-font-family-display); --fx-font-adjust-display: ex-height 0.520; --fx-font-adjust-mono: ex-height 0.520; --fx-font-adjust-numeric: var(--fx-font-adjust-display); } [data-fx-font="editorial"] { --fx-font-family-display: "Lora", Georgia, "Times New Roman", serif; --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace; --fx-font-family-numeric: var(--fx-font-family-mono); --fx-font-adjust-display: ex-height 0.506; --fx-font-adjust-mono: ex-height 0.520; --fx-font-adjust-numeric: var(--fx-font-adjust-mono); } [data-fx-font="friendly"] { --fx-font-family-display: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace; --fx-font-family-numeric: var(--fx-font-family-display); --fx-font-adjust-display: ex-height 0.520; --fx-font-adjust-mono: ex-height 0.520; --fx-font-adjust-numeric: var(--fx-font-adjust-display); } [data-fx-font="grotesk"] { --fx-font-family-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace; --fx-font-family-numeric: var(--fx-font-family-display); --fx-font-adjust-display: ex-height 0.471; --fx-font-adjust-mono: ex-height 0.520; --fx-font-adjust-numeric: var(--fx-font-adjust-display); } [data-fx-font="onest"] { --fx-font-family-display: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-family-numeric: var(--fx-font-family-display); --fx-font-adjust-display: ex-height 0.514; --fx-font-adjust-numeric: var(--fx-font-adjust-display); } [data-fx-font="wide"] { --fx-font-family-display: "Unbounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-font-family-mono: "IBM Plex Mono", ui-monospace, monospace; --fx-font-family-numeric: var(--fx-font-family-display); --fx-font-adjust-display: ex-height 0.448; --fx-font-adjust-mono: ex-height 0.520; --fx-font-adjust-numeric: var(--fx-font-adjust-display); } [data-fx-personality="hard"] { --fx-knob-pill: 0; --fx-knob-depth: 1.2; --fx-knob-blur: 0.5; --fx-knob-motion: 0.85; --fx-knob-outline: 1; --fx-knob-field-fill: 0; --fx-radius-control: 4px; --fx-radius-nav: 4px; --fx-radius-field-multiline: 4px; --fx-radius-surface: 4px; --fx-radius-overlay: 8px; --fx-radius-badge: 4px; --fx-radius-checkbox-ratio: 0.15; --fx-size-control-sm: 28px; --fx-size-control-md: 32px; --fx-size-control-lg: 40px; } [data-fx-personality="medium"] { --fx-knob-pill: 0; --fx-knob-depth: 1; --fx-knob-blur: 1; --fx-knob-motion: 1; --fx-knob-outline: 1; --fx-knob-field-fill: 0; --fx-radius-control: 8px; --fx-radius-nav: 6px; --fx-radius-field-multiline: 8px; --fx-radius-surface: 12px; --fx-radius-overlay: 16px; --fx-radius-badge: 6px; --fx-radius-checkbox-ratio: 0.25; --fx-size-control-sm: 36px; --fx-size-control-md: 44px; --fx-size-control-lg: 52px; } [data-fx-personality="soft"] { --fx-knob-pill: 0; --fx-knob-depth: 0.9; --fx-knob-blur: 2; --fx-knob-motion: 1.15; --fx-knob-outline: 0; --fx-knob-field-fill: 1; --fx-radius-control: 12px; --fx-radius-nav: 8px; --fx-radius-field-multiline: 12px; --fx-radius-surface: 14px; --fx-radius-overlay: 14px; --fx-radius-badge: 999px; --fx-radius-checkbox-ratio: 0.34; } [data-fx-personality="round"] { --fx-knob-pill: 1; --fx-knob-depth: 0.9; --fx-knob-blur: 2; --fx-knob-motion: 1.15; --fx-knob-outline: 0; --fx-knob-field-fill: 1; --fx-radius-control: 12px; --fx-radius-nav: 8px; --fx-radius-field-multiline: 16px; --fx-radius-surface: 14px; --fx-radius-overlay: 14px; --fx-radius-badge: 999px; --fx-radius-checkbox-ratio: 0.34; } [data-fx-edge="line"], [data-fx-edge="line"] [data-fx-personality] { --fx-knob-outline: 1; --fx-knob-depth: 0; --fx-knob-field-fill: 0; } [data-fx-edge="shadow"], [data-fx-edge="shadow"] [data-fx-personality] { --fx-knob-outline: 0; --fx-knob-depth: 1; --fx-knob-field-fill: 1; } [data-fx-density="compact"] { --fx-knob-density: 0.82; } [data-fx-density="default"] { --fx-knob-density: 1; } [data-fx-density="comfortable"] { --fx-knob-density: 1.18; } [data-fx-motion="none"], [data-fx-motion="none"] [data-fx-personality] { --fx-knob-motion: 0; --fx-knob-motion-press: 0; --fx-knob-motion-loop: 0; --fx-motion-shift-sm: 0px; --fx-motion-shift-md: 0px; --fx-motion-shift-lg: 0px; --fx-motion-scale-enter: 1; --fx-motion-scale-press: 1; } [data-fx-motion="calm"] { --fx-knob-motion-press: 0; --fx-ease-spring: cubic-bezier(0.2, 0, 0, 1); } [data-fx-motion="expressive"] { --fx-knob-motion-lift: 1; --fx-knob-motion-stagger: 1; } :root, [data-fx-scheme], [data-fx-theme], [data-fx-body], [data-fx-font], [data-fx-personality], [data-fx-edge], [data-fx-density], [data-fx-motion] { --fx-control-h-sm: max(var(--fx-size-min-target), calc(var(--fx-size-control-sm) * var(--fx-knob-density))); --fx-control-h-md: max(var(--fx-size-min-target), calc(var(--fx-size-control-md) * var(--fx-knob-density))); --fx-control-h-lg: max(var(--fx-size-min-target), calc(var(--fx-size-control-lg) * var(--fx-knob-density))); --fx-shadow-sm: 0 1px calc(2px * var(--fx-knob-blur)) 0 color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent); --fx-shadow-md: 0 4px calc(8px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 10%), transparent), 0 2px calc(4px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 6%), transparent); --fx-shadow-lg: 0 12px calc(16px * var(--fx-knob-blur)) -4px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 8%), transparent), 0 4px calc(6px * var(--fx-knob-blur)) -2px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 3%), transparent), 0 24px calc(48px * var(--fx-knob-blur)) -12px color-mix(in oklab, var(--fx-shadow-color) calc(var(--fx-knob-depth) * 12%), transparent); --fx-border-color-surface: color-mix(in oklab, var(--fx-border-color-default) calc(var(--fx-knob-outline) * 100%), transparent); --fx-bg-field: color-mix(in oklab, var(--fx-bg-muted) calc(var(--fx-knob-field-fill) * 100%), var(--fx-bg-surface)); --fx-border-color-field: color-mix(in oklab, var(--fx-border-color-default) calc((1 - var(--fx-knob-field-fill)) * 100%), transparent); --fx-motion-fast: calc(var(--fx-duration-fast) * var(--fx-knob-motion)); --fx-motion-base: calc(var(--fx-duration-base) * var(--fx-knob-motion)); --fx-motion-slow: calc(var(--fx-duration-slow) * var(--fx-knob-motion)); --fx-motion-instant: calc(var(--fx-duration-instant) * var(--fx-knob-motion)); --fx-motion-slower: calc(var(--fx-duration-slower) * var(--fx-knob-motion)); --fx-motion-exit-fast: calc(var(--fx-duration-fast) * var(--fx-knob-motion) * 0.7); --fx-motion-exit-base: calc(var(--fx-duration-base) * var(--fx-knob-motion) * 0.7); --fx-motion-exit-slow: calc(var(--fx-duration-slow) * var(--fx-knob-motion) * 0.7); --fx-motion-press: calc(1 - (1 - var(--fx-motion-scale-press)) * var(--fx-knob-motion-press)); } @media (pointer: coarse) { :root, [data-fx-scheme], [data-fx-theme], [data-fx-body], [data-fx-font], [data-fx-personality], [data-fx-edge], [data-fx-density], [data-fx-motion] { --fx-control-h-sm: max(var(--fx-size-touch-target), calc(var(--fx-size-control-sm) * var(--fx-knob-density))); --fx-control-h-md: max(var(--fx-size-touch-target), calc(var(--fx-size-control-md) * var(--fx-knob-density))); } } } /* Asos: sahifa foni, matn, harakatni kamaytirish. Komponent emas — fx.base qatlami. */ @layer fx.base { :root { color-scheme: light; font-family: var(--fx-font-family-sans); font-size-adjust: var(--fx-font-adjust-sans); /* shrift almashganda oʻlcham saqlanadi (scripts/fonts.mjs) */ color: var(--fx-text-primary); background: var(--fx-bg-page); } [data-fx-scheme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-fx-scheme="light"]) { color-scheme: dark; } } [data-fx-scheme] { color: var(--fx-text-primary); background: var(--fx-bg-page); } /* hidden doim yashiradi: komponentning oʻz display qiymati (flex, grid, inline-flex) uni bosib ketmasin. !important pastki qatlamda — har qanday komponent display’idan ustun (RedFox admin topdi, 17.10) */ [hidden]:not([hidden="until-found"]) { display: none !important; } /* Matn belgilash va skroll rangi mavzudan (5-toʻlqin 4.22) */ ::selection { background: var(--fx-selection-bg); color: var(--fx-selection-text); } :root { scrollbar-color: var(--fx-scrollbar-thumb) var(--fx-scrollbar-track); } /* Umumiy harakatlar — bir nechta komponent ishlatadi (avatar holati, tugma yuklanishi, spinner) */ @keyframes fx-pulse { 50% { opacity: 0.35; } } @keyframes fx-spin { to { rotate: 1turn; } } @keyframes fx-fade-in { from { opacity: 0; } } /* WDS Harakat: prefers-reduced-motion doim hurmat qilinadi */ @media (prefers-reduced-motion: reduce) { /* harakat yoʻq, maʼno bor: siljish 0, shkala 1, cheksiz animatsiya toʻxtaydi; rang va holat qoladi (WDS «Harakat») */ :root, [data-fx-personality], [data-fx-motion] { --fx-knob-motion: 0; --fx-knob-motion-press: 0; --fx-knob-motion-lift: 0; --fx-knob-motion-stagger: 0; --fx-knob-motion-loop: 0; --fx-motion-shift-sm: 0px; --fx-motion-shift-md: 0px; --fx-motion-shift-lg: 0px; --fx-motion-scale-enter: 1; } } } /* Yordamchilar: ekranda koʻrinmaydi, ekran oʻquvchi oʻqiydi; «Asosiy qismga oʻtish» havolasi fokusda chiqadi */ @layer fx.utilities { .fx-sr-only:not(:focus-within, :focus) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .fx-skip-link:not(:focus) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .fx-skip-link:focus { position: fixed; inset-block-start: var(--fx-space-2); inset-inline-start: var(--fx-space-2); z-index: 10; padding: var(--fx-space-2) var(--fx-space-4); border-radius: var(--fx-radius-control); background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand); } } /* Harakat yordamchilari (fx.utilities): AI matn yaltirashi, qadamli kirish (expressive), yorqin chegara */ @layer fx.utilities { /* «Oʻylayapti…» — matn ustidan yorugʻlik oʻtadi */ .fx-shimmer-text { background: linear-gradient(90deg, var(--fx-text-tertiary) 35%, var(--fx-text-primary) 50%, var(--fx-text-tertiary) 65%) 0 0 / 300% 100% text; color: transparent; animation: fx-shimmer-text var(--fx-duration-shimmer) linear infinite; } @keyframes fx-shimmer-text { from { background-position: 100% 0; } to { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .fx-shimmer-text { animation: none; color: var(--fx-text-tertiary); background: none; } } /* Roʻyxat elementlari ketma-ket kiradi — faqat expressive (knob), 8 tagacha */ [data-fx-stagger] > * { animation: fx-stagger-in calc(var(--fx-motion-base) * var(--fx-knob-motion-stagger)) var(--fx-ease-enter) both; } [data-fx-stagger] > :nth-child(2) { animation-delay: calc(var(--fx-duration-stagger) * 1 * var(--fx-knob-motion-stagger)); } [data-fx-stagger] > :nth-child(3) { animation-delay: calc(var(--fx-duration-stagger) * 2 * var(--fx-knob-motion-stagger)); } [data-fx-stagger] > :nth-child(4) { animation-delay: calc(var(--fx-duration-stagger) * 3 * var(--fx-knob-motion-stagger)); } [data-fx-stagger] > :nth-child(5) { animation-delay: calc(var(--fx-duration-stagger) * 4 * var(--fx-knob-motion-stagger)); } [data-fx-stagger] > :nth-child(6) { animation-delay: calc(var(--fx-duration-stagger) * 5 * var(--fx-knob-motion-stagger)); } [data-fx-stagger] > :nth-child(7) { animation-delay: calc(var(--fx-duration-stagger) * 6 * var(--fx-knob-motion-stagger)); } [data-fx-stagger] > :nth-child(n + 8) { animation-delay: calc(var(--fx-duration-stagger) * 7 * var(--fx-knob-motion-stagger)); } @keyframes fx-stagger-in { from { opacity: 0; translate: 0 var(--fx-motion-shift-md); } } /* Yorqin chegara (landing kartasi, AI javobi): aylanuvchi gradient — faqat expressive’da aylanadi */ @property --fx-glow-angle { syntax: ""; inherits: false; initial-value: 0deg; } .fx-glow { border: var(--fx-border-width-default) solid transparent; background: linear-gradient(var(--fx-bg-surface), var(--fx-bg-surface)) padding-box, conic-gradient(from var(--fx-glow-angle), var(--fx-viz-brand), var(--fx-viz-accent), var(--fx-color-pastel-pink), var(--fx-viz-brand)) border-box; } [data-fx-motion="expressive"] .fx-glow { animation: fx-glow-spin calc(var(--fx-duration-shimmer) * 3) linear infinite; } @keyframes fx-glow-spin { to { --fx-glow-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .fx-glow { animation: none; } } /* Harakat oʻchirilgan (data-fx-motion="none"): cheksiz animatsiyalar toʻxtaydi */ [data-fx-motion="none"] :is(*, *::before, *::after) { animation-iteration-count: 1 !important; } } /* accordion */ @layer fx.components { /* Akkordeon: native
(name — bittasi ochiq), strelka — chevron, yopiqda −90°, ochiqda 0°. Ochilish balandlik animatsiyasi ::details-content + interpolate-size qoʻllaydigan brauzerda. */ .fx-accordion { display: grid; border-block: var(--fx-border-width-default) solid var(--fx-border-color-default); } .fx-accordion__item + .fx-accordion__item { border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); } .fx-accordion__summary { display: flex; align-items: center; gap: var(--fx-space-3); min-block-size: var(--fx-control-h-md); padding-block: var(--fx-space-3); cursor: pointer; list-style: none; font-weight: var(--fx-font-weight-medium); color: var(--fx-text-primary); } .fx-accordion__summary::-webkit-details-marker { display: none; } .fx-accordion__summary::after { content: ""; flex: none; margin-inline-start: auto; inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); background: currentColor; opacity: 0.55; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; rotate: -90deg; transition: rotate var(--fx-motion-fast) var(--fx-ease-standard), opacity var(--fx-motion-fast) var(--fx-ease-standard); } .fx-accordion__summary:hover::after { opacity: 0.9; } .fx-accordion__item[open] > .fx-accordion__summary::after { rotate: 0deg; } .fx-accordion__summary:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); border-radius: var(--fx-radius-badge); } .fx-accordion__body { padding-block-end: var(--fx-space-4); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); line-height: 1.6; } @supports (interpolate-size: allow-keywords) { .fx-accordion { interpolate-size: allow-keywords; } .fx-accordion__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--fx-motion-base) var(--fx-ease-standard), content-visibility var(--fx-motion-base) allow-discrete; } .fx-accordion__item[open]::details-content { block-size: auto; } } /* ---- Kengaytma (2.143, 2.153, 2.154): sarlavha slotlari, chevron chapda, bordered/separated/flush, ichma-ich, print ---- */ .fx-accordion__icon { flex: none; inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); color: var(--fx-text-tertiary); } .fx-accordion__meta { margin-inline-start: auto; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-regular); } .fx-accordion__summary:has(> .fx-accordion__meta)::after { margin-inline-start: var(--fx-space-2); } .fx-accordion[data-chevron="start"] .fx-accordion__summary::after { order: -1; margin-inline-start: 0; } .fx-accordion[data-chevron="start"] .fx-accordion__meta { margin-inline-start: auto; } .fx-accordion[data-chevron="start"] .fx-accordion__body { padding-inline-start: calc(var(--fx-size-icon-sm) + var(--fx-space-3)); } .fx-accordion[data-variant="flush"] { border-block: 0; } .fx-accordion[data-variant="flush"] .fx-accordion__item + .fx-accordion__item { border-block-start: 0; } .fx-accordion[data-variant="bordered"] { border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-surface); overflow: clip; } .fx-accordion[data-variant="separated"] { gap: var(--fx-space-2); border-block: 0; } .fx-accordion[data-variant="separated"] > .fx-accordion__item { border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-surface); overflow: clip; } .fx-accordion:is([data-variant="bordered"], [data-variant="separated"]) :is(.fx-accordion__summary, .fx-accordion__body) { padding-inline: var(--fx-space-4); } .fx-accordion[data-focus="inset"] .fx-accordion__summary:focus-visible { outline-offset: calc(var(--fx-border-width-focus) * -1); } .fx-accordion__body > .fx-accordion { margin-block-start: var(--fx-space-2); border-block-end: 0; padding-inline-start: var(--fx-space-4); } /* Bosma: hammasi ochiq chiqadi */ @media print { .fx-accordion__item::details-content { block-size: auto; content-visibility: visible; } .fx-accordion__summary::after { display: none; } } @media (forced-colors: active) { .fx-accordion__summary::after { background: ButtonText; opacity: 1; } } } /* alert */ @layer fx.components { /* Ogohlantirish / eslatma (WDS «Rang»: callout faqat semantik ohangda; toʻla tusli yuza, chiziqsiz, chap chiziqsiz, soyasiz; ixtiyoriy bitta havola). Belgi — holat shakli (doira, uchburchak, romb, «i»), rangning oʻzi yetmaydi. */ .fx-alert { --_bg: var(--fx-bg-muted); --_fg: var(--fx-text-secondary); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--fx-space-1) var(--fx-space-3); padding: var(--fx-space-4); border-radius: var(--fx-radius-surface); background: var(--_bg); color: var(--fx-text-primary); font-size: var(--fx-font-size-sm); line-height: 1.5; } .fx-alert::before { content: ""; grid-row: span 2; margin-block-start: calc(var(--fx-space-1) * 0.75); inline-size: var(--fx-size-status-dot); block-size: var(--fx-size-status-dot); border-radius: var(--fx-radius-badge); background: var(--_fg); } .fx-alert[data-tone="info"] { --_bg: var(--fx-bg-info-subtle); --_fg: var(--fx-fg-info); } .fx-alert[data-tone="info"]::before { border-radius: var(--fx-radius-circle); } .fx-alert[data-tone="success"] { --_bg: var(--fx-bg-success-subtle); --_fg: var(--fx-fg-success); } .fx-alert[data-tone="success"]::before { border-radius: var(--fx-radius-circle); } .fx-alert[data-tone="warning"] { --_bg: var(--fx-bg-warning-subtle); --_fg: var(--fx-fg-warning); } .fx-alert[data-tone="warning"]::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; } .fx-alert[data-tone="error"] { --_bg: var(--fx-bg-error-subtle); --_fg: var(--fx-fg-error); } .fx-alert[data-tone="error"]::before { rotate: 45deg; scale: 0.85; border-radius: 0; } .fx-alert[data-tone="brand"] { --_bg: var(--fx-bg-brand-subtle); --_fg: var(--fx-text-brand); } .fx-alert__title { margin: 0; grid-column: 2; font-weight: var(--fx-font-weight-semibold); } .fx-alert__text { margin: 0; grid-column: 2; color: var(--fx-text-secondary); } .fx-alert__list { grid-column: 2; margin: var(--fx-space-1) 0 0; padding-inline-start: var(--fx-space-4); color: var(--fx-text-secondary); } .fx-alert__list a { color: inherit; text-decoration: underline; text-underline-offset: calc(var(--fx-space-1) * 0.75); } .fx-alert__action { grid-column: 2; justify-self: start; margin-block-start: var(--fx-space-1); color: var(--_fg); font-weight: var(--fx-font-weight-semibold); text-decoration: underline; text-underline-offset: calc(var(--fx-space-1) * 0.75); } .fx-alert__close { grid-column: 3; grid-row: 1; inline-size: var(--fx-size-min-target); block-size: var(--fx-size-min-target); margin: calc(var(--fx-space-1) * -1); padding: 0; border: 0; border-radius: var(--fx-radius-badge); background: transparent; color: var(--fx-text-tertiary); font: inherit; font-size: var(--fx-font-size-lg); line-height: 1; cursor: pointer; } .fx-alert__close:hover { color: var(--fx-text-primary); } .fx-alert__close:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); } .fx-alert[data-layout="compact"] { padding: var(--fx-space-2) var(--fx-space-3); align-items: center; } .fx-alert[data-layout="compact"]::before { grid-row: auto; margin: 0; } /* ---- Kengaytma (2.89): ikon slot — .fx-alert__icon boʻlsa shakl-belgi oʻrniga ikon chiqadi ---- */ .fx-alert__icon { grid-row: span 2; flex: none; inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); color: var(--_fg); } .fx-alert:has(> .fx-alert__icon)::before { content: none; } .fx-alert > .fx-alert__icon { margin-block-start: calc(var(--fx-space-1) / 2); } @media (forced-colors: active) { .fx-alert { border: var(--fx-border-width-default) solid CanvasText; } } } /* anchor-heading */ @layer fx.components { /* Sarlavha havolasi (anchor link): sarlavha ustiga kelganda yoki fokusda «#» chiqadi — shu boʻlimga toʻgʻridan-toʻgʻri havola */ .fx-anchor-heading { position: relative; scroll-margin-block-start: calc(var(--fx-size-topbar) + var(--fx-space-4)); } .fx-anchor-heading__link { margin-inline-start: var(--fx-space-2); border-radius: var(--fx-radius-badge); color: var(--fx-text-tertiary); font-weight: var(--fx-font-weight-regular); text-decoration: none; opacity: 0; transition: opacity var(--fx-motion-fast) var(--fx-ease-standard), color var(--fx-motion-fast) var(--fx-ease-standard); } .fx-anchor-heading:hover .fx-anchor-heading__link, .fx-anchor-heading__link:focus-visible, .fx-anchor-heading:target .fx-anchor-heading__link { opacity: 1; } .fx-anchor-heading__link:hover { color: var(--fx-text-brand); } .fx-anchor-heading__link:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); } @media (hover: none) { .fx-anchor-heading__link { opacity: 1; } } } /* apikeys */ @layer fx.components { /* API kalitlari boshqaruvi (4.188, naqsh): roʻyxat (nom, prefiks, ruxsat, yaratilgan, oxirgi ishlatilgan, muddat, amal), «Yangi kalit» dialogi va yaratilgandan keyin BIR MARTA koʻrsatiladigan kalit paneli (nusxalash + ogohlantirish). Bekor qilingan kalit — chizilgan prefiks + «Bekor qilingan» holati. Xulq: foxui.js → apikeys. */ .fx-apikeys { display: grid; gap: var(--fx-space-4); color: var(--fx-text-primary); } .fx-apikeys__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--fx-space-3); } .fx-apikeys__title { margin: 0; font-size: var(--fx-font-size-lg); font-weight: var(--fx-font-weight-semibold); } .fx-apikeys__text { margin: var(--fx-space-1) 0 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); } /* Bir martalik koʻrsatish paneli: ogohlantirish rangi + «!» + matn; kalit monospace, butun eniga, tanlash oson */ .fx-apikeys__reveal { display: grid; gap: var(--fx-space-3); padding: var(--fx-space-4); border: var(--fx-border-width-default) solid var(--fx-fg-warning); border-radius: var(--fx-radius-surface); background: var(--fx-bg-warning-subtle); } .fx-apikeys__reveal[hidden] { display: none; } .fx-apikeys__reveal-title { margin: 0; font-weight: var(--fx-font-weight-semibold); } .fx-apikeys__reveal-title:focus { outline: none; } .fx-apikeys__warn { margin: 0; color: var(--fx-text-primary); font-size: var(--fx-font-size-sm); } .fx-apikeys__warn::before { content: "! "; color: var(--fx-fg-warning); font-weight: var(--fx-font-weight-semibold); } .fx-apikeys__secret { display: flex; align-items: center; gap: var(--fx-space-2); padding: var(--fx-space-2) var(--fx-space-2) var(--fx-space-2) var(--fx-space-3); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-control); background: var(--fx-bg-surface); } .fx-apikeys__key { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: var(--fx-font-size-sm); user-select: all; } .fx-apikeys__reveal-actions { display: flex; justify-content: flex-end; } .fx-apikeys__prefix { font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: var(--fx-font-size-xs); color: var(--fx-text-secondary); white-space: nowrap; } .fx-apikeys__name { font-weight: var(--fx-font-weight-medium); } .fx-apikeys__muted { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); white-space: nowrap; font-variant-numeric: tabular-nums; } .fx-apikeys__row[data-state="expiring"] .fx-apikeys__expires { color: var(--fx-text-primary); } .fx-apikeys__row[data-state="expiring"] .fx-apikeys__expires::before { content: "! "; color: var(--fx-fg-warning); font-weight: var(--fx-font-weight-semibold); } .fx-apikeys__row[data-state="revoked"] > td { color: var(--fx-text-tertiary); } .fx-apikeys__row[data-state="revoked"] .fx-apikeys__prefix { text-decoration: line-through; } .fx-apikeys__row[data-state="new"] { animation: fx-fade-in var(--fx-motion-base) var(--fx-ease-enter); } .fx-apikeys__row[data-state="new"] > td:first-child .fx-apikeys__name::after { content: " · yangi"; color: var(--fx-text-brand); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-regular); } .fx-apikeys__form { display: grid; gap: var(--fx-space-4); } } /* approval */ @layer fx.components { /* Tasdiqlash soʻrovi: agent amal qilishdan oldin ruxsat soʻraydi — savol, nima oʻzgaradi, Ruxsat / Rad etish / Har doim. Qaror (data-state="approved|denied") tugmalarni natija satriga almashtiradi (ikon + soʻz, role="status"). JS: behaviors/approval.js. */ .fx-approval { display: grid; gap: var(--fx-space-3); padding: var(--fx-space-4); border: var(--fx-border-width-default) solid var(--fx-fg-warning); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); font-size: var(--fx-font-size-sm); } .fx-approval[data-state="approved"] { border-color: var(--fx-border-color-default); } .fx-approval[data-state="denied"] { border-color: var(--fx-border-color-default); } .fx-approval__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fx-space-1) var(--fx-space-3); align-items: start; } .fx-approval__head > svg { grid-row: span 2; inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); fill: none; stroke: var(--fx-fg-warning); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .fx-approval__title { margin: 0; color: var(--fx-text-primary); font-size: var(--fx-font-size-md); font-weight: var(--fx-font-weight-semibold); } .fx-approval__text { margin: 0; color: var(--fx-text-secondary); line-height: 1.5; } .fx-approval__detail { margin: 0; padding: var(--fx-space-2) var(--fx-space-3); overflow-x: auto; border-radius: var(--fx-radius-badge); background: var(--fx-bg-muted); color: var(--fx-text-primary); font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: var(--fx-font-size-xs); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .fx-approval__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); } .fx-approval[data-state="approved"] .fx-approval__actions, .fx-approval[data-state="denied"] .fx-approval__actions { display: none; } .fx-approval__result { display: flex; align-items: center; gap: var(--fx-space-2); margin: 0; font-weight: var(--fx-font-weight-medium); } .fx-approval__result:empty { display: none; } .fx-approval__result:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); border-radius: var(--fx-radius-badge); } .fx-approval__result::before { content: ""; flex: none; inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); background: currentColor; mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm-1.2 12.4l-3.3-3.3 1.1-1.1 2.2 2.2 4.6-4.6 1.1 1.1-5.7 5.7z'/%3E%3C/svg%3E"); } .fx-approval[data-state="approved"] .fx-approval__result { color: var(--fx-fg-success); } .fx-approval[data-state="denied"] .fx-approval__result { color: var(--fx-fg-error); } .fx-approval[data-state="denied"] .fx-approval__result::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zm-3.2 5.7l1.1-1.1L12 9.7l2.1-2.1 1.1 1.1-2.1 2.1 2.1 2.1-1.1 1.1-2.1-2.1-2.1 2.1-1.1-1.1 2.1-2.1z'/%3E%3C/svg%3E"); } } /* article */ @layer fx.components { /* Maqola sahifasi (4.178, naqsh): tepada ortga havola + toifa, sarlavha, lid, muallif qatori (avatar, ism, sana, oʻqish vaqti), muqova; ostida uch ustun — chapda ulashish tugmalari (yopishqoq), markazda matn (fx-prose), oʻngda mundarija (fx-toc, yopishqoq). Oxirida teglar, muallif kartasi va «Oʻxshash maqolalar» (fx-blog kartalari). Tepada ixtiyoriy oʻqish chizigʻi (fx-scroll-progress). Tor ekranda: mundarija matn tepasida yigʻiladigan
, ulashish — matn ostida qator. */ .fx-article { display: grid; gap: var(--fx-space-8); } .fx-article__header { display: grid; justify-items: center; gap: var(--fx-space-4); max-inline-size: calc(var(--fx-dialog-width) * 1.7); margin-inline: auto; text-align: center; } .fx-article__kicker { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--fx-space-2) var(--fx-space-4); margin: 0; font-size: var(--fx-font-size-sm); } .fx-article__back { color: var(--fx-text-secondary); text-decoration: none; } .fx-article__back::before { content: "← "; } .fx-article__back:hover { color: var(--fx-text-primary); } .fx-article__category { color: var(--fx-text-brand); font-weight: var(--fx-font-weight-semibold); text-decoration: none; } .fx-article__title { margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: clamp(var(--fx-font-size-display-sm), calc(var(--fx-font-size-display-sm) + 1.6vw), var(--fx-font-size-display-lg)); font-weight: var(--fx-font-weight-semibold); line-height: var(--fx-line-height-tight); letter-spacing: -0.025em; text-wrap: balance; color: var(--fx-text-primary); } .fx-article__lead { margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-lg); line-height: var(--fx-line-height-relaxed); text-wrap: pretty; } .fx-article__byline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--fx-space-3); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); } .fx-article__byline > :is(time, span):not(.fx-avatar)::before { content: "·"; margin-inline-end: var(--fx-space-3); color: var(--fx-text-tertiary); } .fx-article__author { color: var(--fx-text-primary); font-weight: var(--fx-font-weight-semibold); text-decoration: none; } .fx-article__cover { margin: 0; overflow: hidden; aspect-ratio: 21 / 9; border-radius: var(--fx-radius-surface); background: var(--fx-bg-muted); } .fx-article__cover > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .fx-article__cover[data-color="purple"] { background: var(--fx-bg-category-purple); } .fx-article__cover[data-color="blue"] { background: var(--fx-bg-category-blue); } .fx-article__cover[data-color="green"] { background: var(--fx-bg-category-green); } .fx-article__cover[data-color="yellow"] { background: var(--fx-bg-category-yellow); } .fx-article__caption { margin-block-start: calc(var(--fx-space-6) * -1); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); text-align: center; } .fx-article__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 68ch) minmax(0, 1fr); align-items: start; gap: var(--fx-space-8); } .fx-article__share { position: sticky; inset-block-start: calc(var(--fx-size-topbar) + var(--fx-space-6)); justify-self: end; display: grid; gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; } .fx-article__share-label { margin: 0 0 var(--fx-space-1); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); } .fx-article__share-btn { display: grid; place-items: center; inline-size: var(--fx-control-h-md); block-size: var(--fx-control-h-md); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-control); background: var(--fx-bg-surface); color: var(--fx-text-secondary); text-decoration: none; cursor: pointer; transition: color var(--fx-motion-fast) var(--fx-ease-standard), border-color var(--fx-motion-fast) var(--fx-ease-standard), scale var(--fx-motion-fast) var(--fx-ease-standard); } .fx-article__share-btn:hover { border-color: var(--fx-border-color-strong); color: var(--fx-text-primary); } .fx-article__share-btn:active { scale: var(--fx-motion-press); } .fx-article__share-btn:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); } .fx-article__share-btn > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); } /* havolani nusxalash (data-fx-copy): ✓ belgisi 2 soniya */ .fx-article__share-btn > [data-fx-icon="check"], .fx-article__share-btn[data-state="copied"] > [data-fx-icon="copy"] { display: none; } .fx-article__share-btn[data-state="copied"] { border-color: var(--fx-fg-success); color: var(--fx-fg-success); } .fx-article__share-btn[data-state="copied"] > [data-fx-icon="check"] { display: block; } .fx-article__body { grid-column: 2; min-inline-size: 0; } .fx-article__body :is(h2, h3)[id] { scroll-margin-block-start: calc(var(--fx-size-topbar) + var(--fx-space-4)); } .fx-article__aside { position: sticky; inset-block-start: calc(var(--fx-size-topbar) + var(--fx-space-6)); min-inline-size: 0; } .fx-article__aside > summary { display: none; } .fx-article__tags { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; } .fx-article__tags a { text-decoration: none; } .fx-article__footer { display: grid; gap: var(--fx-space-6); max-inline-size: 68ch; font-size: var(--fx-font-size-md); inline-size: 100%; margin-inline: auto; padding-block-start: var(--fx-space-6); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); } .fx-article__bio { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fx-space-1) var(--fx-space-4); padding: var(--fx-space-5); border-radius: var(--fx-radius-surface); background: var(--fx-bg-subtle); } .fx-article__bio > .fx-avatar { grid-row: span 3; } .fx-article__bio-name { margin: 0; font-size: var(--fx-font-size-md); font-weight: var(--fx-font-weight-semibold); } .fx-article__bio-role { margin: 0; color: var(--fx-text-brand); font-size: var(--fx-font-size-sm); } .fx-article__bio-text { margin: 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); } .fx-article__related { display: grid; gap: var(--fx-space-6); padding-block-start: var(--fx-space-8); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); } .fx-article__related-title { margin: 0; font-size: var(--fx-font-size-xl); font-weight: var(--fx-font-weight-semibold); } @media (max-width: 64em) { .fx-article__layout { grid-template-columns: minmax(0, 1fr); max-inline-size: 68ch; margin-inline: auto; gap: var(--fx-space-6); } .fx-article__body { grid-column: auto; } .fx-article__aside { position: static; order: -1; padding: var(--fx-space-3) var(--fx-space-4); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-surface); } .fx-article__aside > summary { display: list-item; color: var(--fx-text-primary); font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-semibold); cursor: pointer; } .fx-article__aside > summary:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-space-1); border-radius: var(--fx-radius-badge); } .fx-article__aside[open] > summary { margin-block-end: var(--fx-space-3); } .fx-article__aside .fx-toc__title { display: none; } .fx-article__share { position: static; order: 2; justify-self: start; display: flex; flex-wrap: wrap; align-items: center; } .fx-article__share-label { margin: 0 var(--fx-space-2) 0 0; } } @media print { .fx-article__share, .fx-article__aside, .fx-article__related { display: none; } .fx-article__layout { display: block; } } } /* assistant */ @layer fx.components { /* AI yordamchi widget’i («Guli saytda»): oʻng pastda dumaloq tugma (personaj sloti) → suhbat oynasi. Har sayt — sozlama (nom, rang, endpoint, til). Holatlar: idle · open · sending · error · handoff (menejerga — Telegram/telefon). Telefonda (< 640 px) — toʻliq ekran. Personaj: tinch holatda yengil «nafas», sahifada bir marta qoʻl silkitadi (data-mascot="wave"); harakat kamaytirilsa — yoʻq. */ .fx-assistant { --_c: var(--fx-bg-brand-solid); --_edge: var(--fx-space-5); position: fixed; inset: auto max(var(--_edge), env(safe-area-inset-right, 0px)) max(var(--_edge), env(safe-area-inset-bottom, 0px)) auto; z-index: 50; display: grid; justify-items: end; gap: var(--fx-space-3); font-size: var(--fx-font-size-sm); color: var(--fx-text-primary); } /* och doira (data-color="light") — qora konturli personaj ikkala rejimda ham aniq koʻrinsin */ .fx-assistant[data-color="light"] { --_c: var(--fx-bg-static-light); } .fx-assistant[data-color="light"] :is(.fx-assistant__launcher, .fx-assistant__avatar) { color: var(--fx-text-on-static-light); } .fx-assistant > .fx-assistant__mascot { display: none; } /* manba — JS nusxa oladi */ .fx-assistant__launcher { position: relative; display: grid; place-items: center; inline-size: calc(var(--fx-space-12) + var(--fx-space-2)); block-size: calc(var(--fx-space-12) + var(--fx-space-2)); padding: 0; border: 0; border-radius: var(--fx-radius-circle); background: var(--_c); color: var(--_ink, var(--fx-text-on-category)); box-shadow: var(--fx-shadow-lg); cursor: pointer; transition: scale var(--fx-motion-instant) var(--fx-ease-standard), translate var(--fx-motion-base) var(--fx-ease-spring); } .fx-assistant__launcher:hover { translate: 0 calc(var(--fx-space-1) * -0.5); } .fx-assistant__launcher:active { scale: var(--fx-motion-press); } .fx-assistant__launcher:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); } .fx-assistant__launcher > .fx-assistant__face { position: absolute; inset: var(--fx-space-1); inline-size: calc(100% - var(--fx-space-1) * 2); block-size: calc(100% - var(--fx-space-1) * 2); border-radius: var(--fx-radius-circle); object-fit: cover; } .fx-assistant__launcher > .fx-assistant__face:not(img, svg, canvas) { display: grid; place-items: center; font-size: var(--fx-font-size-lg); font-weight: var(--fx-font-weight-semibold); } .fx-assistant__icon { display: none; } .fx-assistant[data-state="open"] .fx-assistant__launcher > .fx-assistant__face, .fx-assistant[data-state="sending"] .fx-assistant__launcher > .fx-assistant__face { opacity: 0; } .fx-assistant:is([data-state="open"], [data-state="sending"]) .fx-assistant__icon { display: grid; } .fx-assistant__icon > svg { inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); } .fx-assistant__glyph > svg { inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); } .fx-assistant__badge { position: absolute; inset-block-start: 0; inset-inline-end: 0; min-inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); border-radius: var(--fx-radius-circle); background: var(--fx-bg-error-solid); color: var(--fx-text-on-error); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); line-height: var(--fx-size-icon-md); outline: var(--fx-border-width-focus) solid var(--fx-bg-page); } /* personaj harakati: tinch «nafas» (loop knob), bir martalik qoʻl silkitish; tab yashirinsa — pauza */ .fx-assistant[data-mascot="idle"] .fx-assistant__launcher > .fx-assistant__face:not(svg, .fx-orb) { animation: fx-assistant-breath calc(var(--fx-duration-pulse) * 2.5) var(--fx-ease-standard) infinite; } .fx-assistant[data-mascot="wave"] .fx-assistant__launcher > .fx-assistant__face:not(svg, .fx-orb) { transform-origin: 70% 90%; animation: fx-assistant-wave calc(var(--fx-motion-slow) * 4) var(--fx-ease-standard) 1; } .fx-assistant[data-paused] .fx-assistant__launcher > .fx-assistant__face { animation-play-state: paused; } /* ichki SVG animatsiyalari ham: tab yashirin yoki oyna ochiq (tugmadagi personaj koʻrinmaydi) — pauza, CPU tejaladi */ .fx-assistant:is([data-paused], [data-state="open"], [data-state="sending"]) .fx-assistant__launcher > .fx-assistant__face :is(*, *::before, *::after) { animation-play-state: paused !important; } .fx-assistant[data-paused] .fx-assistant__avatar :is(*, *::before, *::after) { animation-play-state: paused !important; } .fx-assistant[data-mascot="thinking"] .fx-assistant__launcher > .fx-assistant__face:not(svg, .fx-orb) { animation: fx-pulse var(--fx-duration-pulse) var(--fx-ease-standard) infinite; } .fx-assistant[data-mascot="talking"] .fx-assistant__launcher > .fx-assistant__face:not(svg, .fx-orb) { animation: fx-assistant-breath var(--fx-motion-slow) var(--fx-ease-spring) 2; } /* jonli personaj (inline SVG) oʻzi harakatlanadi — tashqi tebranish ikkilanmasin; holatni .salom/.oylayapti/.gapiryapti/.uzatyapti sinflari beradi */ .fx-assistant:is([data-mascot="idle"], [data-mascot="wave"], [data-mascot="thinking"], [data-mascot="talking"], [data-mascot="handoff"]) .fx-assistant__launcher > svg.fx-assistant__face { animation: none; } /* abstrakt shar (data-face="orb") — tugmani toʻliq egallaydi, rangi saytning brend rangi; harakatni sharning oʻzi beradi */ .fx-assistant .fx-orb { --_o: var(--_c); } .fx-assistant__launcher > .fx-orb.fx-assistant__face { inset: 0; inline-size: 100%; block-size: 100%; } .fx-assistant__avatar > .fx-orb { inline-size: 100%; } /* holat nuqtasi: xato — qizil, menejerga oʻtkazildi — ogohlantirish */ .fx-assistant[data-state="error"] .fx-assistant__who small::before { background: var(--fx-fg-error); } .fx-assistant[data-state="handoff"] .fx-assistant__who small::before { background: var(--fx-fg-warning); } @keyframes fx-assistant-breath { 50% { scale: 1.04; } } @keyframes fx-assistant-wave { 15%, 45% { rotate: -12deg; } 30%, 60% { rotate: 10deg; } 75% { rotate: 0deg; } } @media (prefers-reduced-motion: reduce) { .fx-assistant__launcher > .fx-assistant__face { animation: none !important; } } /* salom pufakchasi */ .fx-assistant__greet { display: flex; align-items: center; gap: var(--fx-space-2); max-inline-size: calc(var(--fx-space-12) * 6); padding: var(--fx-space-3) var(--fx-space-2) var(--fx-space-3) var(--fx-space-4); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); border-end-end-radius: var(--fx-radius-badge); background: var(--fx-bg-surface); box-shadow: var(--fx-shadow-lg); cursor: pointer; animation: fx-stagger-in var(--fx-motion-base) var(--fx-ease-enter); } .fx-assistant__x { display: grid; place-items: center; flex: none; inline-size: var(--fx-control-h-sm); block-size: var(--fx-control-h-sm); padding: 0; border: 0; border-radius: var(--fx-radius-circle); background: none; color: var(--fx-text-tertiary); cursor: pointer; } .fx-assistant__x:hover { background: var(--fx-bg-muted); color: var(--fx-text-primary); } .fx-assistant__x > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); } /* panel */ .fx-assistant__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; inline-size: min(calc(100vw - var(--_edge) * 2), calc(var(--fx-space-12) * 8)); block-size: min(calc(100dvh - var(--fx-space-12) * 3), calc(var(--fx-space-12) * 12)); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); box-shadow: var(--fx-shadow-lg); overflow: hidden; transform-origin: bottom right; animation: fx-assistant-in var(--fx-motion-base) var(--fx-ease-enter); } @keyframes fx-assistant-in { from { opacity: 0; scale: var(--fx-motion-scale-enter); translate: 0 var(--fx-motion-shift-md); } } .fx-assistant__head { display: flex; align-items: center; gap: var(--fx-space-3); padding: var(--fx-space-3) var(--fx-space-3) var(--fx-space-3) var(--fx-space-4); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); } .fx-assistant__avatar { display: grid; place-items: center; flex: none; inline-size: var(--fx-size-avatar-md); block-size: var(--fx-size-avatar-md); border-radius: var(--fx-radius-circle); background: var(--_c); color: var(--_ink, var(--fx-text-on-category)); overflow: hidden; font-weight: var(--fx-font-weight-semibold); } .fx-assistant__avatar > :is(img, svg, canvas) { inline-size: 100%; block-size: 100%; object-fit: cover; } .fx-assistant__who { display: grid; flex: 1; min-inline-size: 0; } .fx-assistant__who small { display: inline-flex; align-items: center; gap: var(--fx-space-1); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); } .fx-assistant__who small::before { content: ""; inline-size: var(--fx-size-status-dot-sm); block-size: var(--fx-size-status-dot-sm); border-radius: var(--fx-radius-circle); background: var(--fx-fg-success); } .fx-assistant__log { display: flex; flex-direction: column; gap: var(--fx-space-2); padding: var(--fx-space-4); overflow-y: auto; overscroll-behavior: contain; } .fx-assistant__msg { max-inline-size: 85%; padding: var(--fx-space-2) var(--fx-space-3); border-radius: var(--fx-radius-overlay); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; animation: fx-stagger-in var(--fx-motion-fast) var(--fx-ease-enter); } .fx-assistant__msg[data-who="bot"] { align-self: start; border-end-start-radius: var(--fx-radius-badge); background: var(--fx-bg-muted); } .fx-assistant__msg[data-who="user"] { align-self: end; border-end-end-radius: var(--fx-radius-badge); background: var(--fx-bg-brand-subtle); } .fx-assistant__handoff, .fx-assistant__error { display: grid; gap: var(--fx-space-2); padding: var(--fx-space-3); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-control); } .fx-assistant__handoff > p { margin: 0; } .fx-assistant__error { color: var(--fx-fg-error); justify-items: start; } .fx-assistant__chips { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); padding: 0 var(--fx-space-4); } .fx-assistant__chips:not(:empty) { padding-block-end: var(--fx-space-3); } .fx-assistant__form { display: flex; align-items: end; gap: var(--fx-space-2); margin: 0; padding: var(--fx-space-3); border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); } .fx-assistant__form textarea { flex: 1; min-block-size: var(--fx-control-h-md); max-block-size: calc(var(--fx-control-h-md) * 3); padding: var(--fx-space-2) var(--fx-space-3); box-sizing: border-box; border: var(--fx-border-width-default) solid var(--fx-border-color-field); border-radius: var(--fx-radius-control); background: var(--fx-bg-field); color: inherit; font: inherit; resize: none; } .fx-assistant__form textarea:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: 0; } .fx-assistant__form button { display: grid; place-items: center; inline-size: var(--fx-control-h-md); block-size: var(--fx-control-h-md); padding: 0; border: 0; border-radius: var(--fx-radius-control); background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand); cursor: pointer; } .fx-assistant__form button > svg { inline-size: var(--fx-size-icon-md); block-size: var(--fx-size-icon-md); } .fx-assistant[data-state="sending"] .fx-assistant__form button { opacity: 0.5; pointer-events: none; } .fx-assistant__note { margin: 0; padding: 0 var(--fx-space-4) var(--fx-space-3); color: var(--fx-text-tertiary); font-size: calc(var(--fx-font-size-xs) * 0.92); text-align: center; } /* telefonda: toʻliq ekran varaq */ @media (max-width: 640px) { .fx-assistant__panel { position: fixed; inset: 0; inline-size: auto; block-size: auto; border: 0; border-radius: 0; padding-block-end: env(safe-area-inset-bottom, 0px); } .fx-assistant:is([data-state="open"], [data-state="sending"]) .fx-assistant__launcher { display: none; } } } /* attachment */ @layer fx.components { /* Biriktirma: fayl/rasm kartochkasi — belgi yoki rasm, nom, hajm, olib tashlash ×, yuklanish chizigʻi. Composer ichida (chip) va xabar ichida (card). Holatlar: uploading · done · error (xato — soʻz bilan). JS: behaviors/attachment.js (× — olib tashlaydi, fokusni qoldiradi). */ .fx-attachment { position: relative; display: inline-grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "thumb name remove" "thumb meta remove"; align-items: center; column-gap: var(--fx-space-2); max-inline-size: calc(var(--fx-space-12) * 5); padding: var(--fx-space-1) var(--fx-space-1) var(--fx-space-1) var(--fx-space-1); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-control); background: var(--fx-bg-surface); font-size: var(--fx-font-size-sm); overflow: hidden; } .fx-attachment__thumb { grid-area: thumb; display: grid; place-items: center; inline-size: var(--fx-control-h-md); block-size: var(--fx-control-h-md); overflow: hidden; border-radius: calc(var(--fx-radius-control) - var(--fx-space-1) / 2); background: var(--fx-bg-brand-subtle); color: var(--fx-text-brand); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); object-fit: cover; } .fx-attachment__name { grid-area: name; overflow: hidden; color: var(--fx-text-primary); font-weight: var(--fx-font-weight-medium); text-overflow: ellipsis; white-space: nowrap; } .fx-attachment__meta { grid-area: meta; overflow: hidden; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .fx-attachment__remove { grid-area: remove; display: grid; place-items: center; inline-size: var(--fx-size-min-target); block-size: var(--fx-size-min-target); padding: 0; border: 0; border-radius: var(--fx-radius-circle); background: transparent; color: var(--fx-text-tertiary); cursor: pointer; transition: background-color var(--fx-motion-fast) var(--fx-ease-standard); } .fx-attachment__remove:hover { background: var(--fx-bg-muted); color: var(--fx-text-primary); } .fx-attachment__remove:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-default); } .fx-attachment__remove > svg { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .fx-attachment__progress { position: absolute; inset-inline: 0; inset-block-end: 0; display: none; inline-size: 100%; block-size: calc(var(--fx-space-1) / 2); appearance: none; border: 0; background: var(--fx-bg-muted); } .fx-attachment__progress::-webkit-progress-bar { background: var(--fx-bg-muted); } .fx-attachment__progress::-webkit-progress-value { background: var(--fx-bg-brand-solid); transition: inline-size var(--fx-motion-base) var(--fx-ease-standard); } .fx-attachment__progress::-moz-progress-bar { background: var(--fx-bg-brand-solid); } .fx-attachment[data-state="uploading"] .fx-attachment__progress { display: block; } .fx-attachment[data-state="error"] { border-color: var(--fx-border-color-error); background: var(--fx-bg-error-subtle); } .fx-attachment[data-state="error"] .fx-attachment__thumb { background: var(--fx-bg-error-subtle); color: var(--fx-fg-error); } .fx-attachment[data-state="error"] .fx-attachment__meta { color: var(--fx-text-error); } .fx-attachment[data-state="error"] .fx-attachment__meta::before { content: "! "; font-weight: var(--fx-font-weight-semibold); } /* karta varianti (xabar ichida): katta, rasm ustun */ .fx-attachment[data-variant="card"] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "thumb thumb" "name remove" "meta remove"; row-gap: 0; padding: var(--fx-space-2); } .fx-attachment[data-variant="card"] .fx-attachment__thumb { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; margin-block-end: var(--fx-space-2); } } /* audioplayer */ @layer fx.components { /* Audio pleyer (#120): ixcham — ijro tugmasi, sarlavha, toʻlqinsimon progress (bosib yoki ← → bilan suriladi), vaqt, tezlik (1× · 1,5× · 2×). Chiziqlar balandligi data-peaks (0–100 vergul bilan) yoki sarlavhadan hosil boʻladi; oʻtilgan qism toʻq rangda va balandroq. */ .fx-audioplayer { --fx-audio-bars: 48; display: flex; align-items: center; gap: var(--fx-space-3); padding: var(--fx-space-3); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-surface); background: var(--fx-bg-surface); color: var(--fx-text-primary); } .fx-audioplayer__play { flex: none; display: grid; place-items: center; inline-size: var(--fx-size-control-lg); block-size: var(--fx-size-control-lg); padding: 0; border: 0; border-radius: var(--fx-radius-circle); background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand); cursor: pointer; transition: background var(--fx-motion-fast) var(--fx-ease-standard), scale var(--fx-motion-instant) var(--fx-ease-standard); } .fx-audioplayer__play:hover { background: var(--fx-bg-brand-solid-hover); } .fx-audioplayer__play:active { scale: var(--fx-motion-press); } .fx-audioplayer__play:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); } .fx-audioplayer__play::before { content: ""; inline-size: 45%; block-size: 45%; background: currentColor; mask: var(--_ic) center / contain no-repeat; } .fx-audioplayer__play[data-icon="play"] { --_ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12-7.5z' fill='black'/%3E%3C/svg%3E"); } .fx-audioplayer__play[data-icon="pause"] { --_ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 4.5h4v15h-4zM13.5 4.5h4v15h-4z' fill='black'/%3E%3C/svg%3E"); } .fx-audioplayer__body { display: grid; gap: var(--fx-space-1); flex: 1; min-inline-size: 0; } .fx-audioplayer__meta { display: flex; align-items: baseline; gap: var(--fx-space-2); min-inline-size: 0; } .fx-audioplayer__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-medium); } .fx-audioplayer__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); } .fx-audioplayer__wave { display: flex; align-items: center; gap: calc(var(--fx-space-1) / 2); block-size: var(--fx-size-control-md); cursor: pointer; touch-action: none; border-radius: var(--fx-radius-nav); } .fx-audioplayer__wave:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); } .fx-audioplayer__bar { flex: 1; min-inline-size: calc(var(--fx-space-1) / 2); block-size: calc(var(--_h) * 1%); border-radius: var(--fx-radius-circle); background: var(--fx-border-color-strong); transition: background var(--fx-motion-fast) var(--fx-ease-standard); } .fx-audioplayer__bar[data-played] { background: var(--fx-bg-brand-solid); } .fx-audioplayer__time { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); font-variant-numeric: tabular-nums; white-space: nowrap; } .fx-audioplayer__speed { flex: none; min-inline-size: var(--fx-size-control-md); block-size: var(--fx-size-control-sm); padding-inline: var(--fx-space-2); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-control); background: transparent; color: var(--fx-text-secondary); font: inherit; font-size: var(--fx-font-size-xs); font-variant-numeric: tabular-nums; cursor: pointer; } .fx-audioplayer__speed:hover { background: var(--fx-bg-muted); } .fx-audioplayer__speed:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); } .fx-audioplayer[data-size="sm"] { padding: var(--fx-space-2); gap: var(--fx-space-2); } .fx-audioplayer[data-size="sm"] .fx-audioplayer__play { inline-size: var(--fx-size-control-md); block-size: var(--fx-size-control-md); } .fx-audioplayer[data-size="sm"] .fx-audioplayer__wave { block-size: var(--fx-size-control-sm); } } /* auditlog */ @layer fx.components { /* Audit jurnali (4.191, naqsh): xavfsizlik va boshqaruv uchun «kim · nima · qachon · qayerdan» jadvali. Tepada sarlavha, saqlash muddati va «Eksport (CSV)»; filtr qatori (qidiruv, foydalanuvchi, amal turi, davr); jadval (fx-table asosida) kunlar boʻyicha guruhlangan (.fx-audit__day qatori). Har qator: vaqt, aktor (fx-persona yoki «Tizim»), amal (fe’l + obyekt), IP va joy, muhimlik (data-severity: info · warning · critical — chap chiziq + soʻz). Tafsilot —
ichida oʻzgarish farqi (.fx-auditlog__diff: oldin → keyin). Pastda «Koʻproq yuklash». Yozuvlar oʻzgarmaydi — tahrirlash tugmasi yoʻq. */ .fx-auditlog { display: grid; gap: var(--fx-space-5); } .fx-auditlog__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--fx-space-3) var(--fx-space-6); } .fx-auditlog__title { margin: 0; color: var(--fx-text-primary); font-size: var(--fx-font-size-xl); font-weight: var(--fx-font-weight-semibold); } .fx-auditlog__text { margin: var(--fx-space-1) 0 0; color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); } .fx-auditlog__filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--fx-space-3); padding: var(--fx-space-3); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-surface); background: var(--fx-bg-subtle); } .fx-auditlog__filters > .fx-search { flex: 1 1 calc(var(--fx-space-12) * 5); } .fx-auditlog__filters > .fx-field { flex: 0 1 calc(var(--fx-space-12) * 3.5); } .fx-auditlog__table td { vertical-align: top; } .fx-auditlog__day > th { padding-block: var(--fx-space-3) var(--fx-space-2); background: var(--fx-bg-page); color: var(--fx-text-secondary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); text-align: start; text-transform: uppercase; letter-spacing: 0.04em; } .fx-auditlog__time { color: var(--fx-text-secondary); font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: var(--fx-font-size-sm); font-variant-numeric: tabular-nums; white-space: nowrap; } .fx-auditlog__row > td:first-child { border-inline-start: var(--fx-border-width-focus) solid transparent; } .fx-auditlog__row[data-severity="warning"] > td:first-child { border-inline-start-color: var(--fx-fg-warning); } .fx-auditlog__row[data-severity="critical"] > td:first-child { border-inline-start-color: var(--fx-fg-error); } .fx-auditlog__row[data-severity="critical"] { background: color-mix(in oklab, var(--fx-bg-error-subtle) 45%, transparent); } .fx-auditlog__system { display: inline-flex; align-items: center; gap: var(--fx-space-2); color: var(--fx-text-secondary); font-size: var(--fx-font-size-sm); } .fx-auditlog__system::before { content: "⚙"; display: grid; place-items: center; inline-size: var(--fx-size-avatar-sm); block-size: var(--fx-size-avatar-sm); border-radius: var(--fx-radius-control); background: var(--fx-bg-muted); color: var(--fx-text-secondary); } .fx-auditlog__action { display: grid; gap: calc(var(--fx-space-1) / 2); min-inline-size: calc(var(--fx-space-12) * 5); color: var(--fx-text-primary); font-size: var(--fx-font-size-sm); } .fx-auditlog__verb { font-weight: var(--fx-font-weight-semibold); } .fx-auditlog__object { color: var(--fx-text-brand); text-decoration: none; } .fx-auditlog__object:hover { text-decoration: underline; } .fx-auditlog__object:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); border-radius: var(--fx-radius-badge); } .fx-auditlog__severity { display: inline-flex; align-items: center; gap: var(--fx-space-1); color: var(--fx-text-secondary); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-medium); white-space: nowrap; } .fx-auditlog__row[data-severity="warning"] .fx-auditlog__severity { color: var(--fx-text-primary); } .fx-auditlog__row[data-severity="warning"] .fx-auditlog__severity::before { content: "▲"; color: var(--fx-fg-warning); } .fx-auditlog__row[data-severity="critical"] .fx-auditlog__severity { color: var(--fx-text-error); } .fx-auditlog__row[data-severity="critical"] .fx-auditlog__severity::before { content: "■"; color: var(--fx-fg-error); } .fx-auditlog__where { display: grid; color: var(--fx-text-secondary); font-size: var(--fx-font-size-xs); white-space: nowrap; } .fx-auditlog__where > code { color: var(--fx-text-primary); font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: var(--fx-font-size-sm); } .fx-auditlog__details > summary { inline-size: fit-content; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); cursor: pointer; } .fx-auditlog__details > summary:hover { color: var(--fx-text-primary); } .fx-auditlog__details > summary:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); border-radius: var(--fx-radius-badge); } .fx-auditlog__diff { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fx-space-1) var(--fx-space-3); margin: var(--fx-space-2) 0 0; padding: var(--fx-space-3); border-radius: var(--fx-radius-control); background: var(--fx-bg-subtle); font-size: var(--fx-font-size-xs); } .fx-auditlog__diff dt { color: var(--fx-text-secondary); } .fx-auditlog__diff dd { display: flex; flex-wrap: wrap; gap: var(--fx-space-1) var(--fx-space-2); margin: 0; font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); } .fx-auditlog__diff del { padding: 0 var(--fx-space-1); border-radius: var(--fx-radius-badge); background: var(--fx-bg-error-subtle); color: var(--fx-text-primary); } .fx-auditlog__diff ins { padding: 0 var(--fx-space-1); border-radius: var(--fx-radius-badge); background: var(--fx-bg-success-subtle); color: var(--fx-text-primary); text-decoration: none; } .fx-auditlog__diff del::before { content: "− "; } .fx-auditlog__diff ins::before { content: "+ "; } .fx-auditlog__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fx-space-3); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); } @media (max-width: 48em) { .fx-auditlog__table .fx-auditlog__col-where { display: none; } } } /* auth */ @layer fx.components { /* Kirish / roʻyxatdan oʻtish sahifasi qolipi: sahifa markazida karta (default) yoki chapda forma + oʻngda brend paneli (split). "Havola yuborildi" holati (magic link) — .fx-auth__view[data-view="sent"]. Xulq — foxui.js (data-fx-auth). */ .fx-auth { display: grid; place-items: center; min-block-size: 100dvh; padding: var(--fx-space-6); background: var(--fx-bg-page); color: var(--fx-text-primary); } .fx-auth__card { inline-size: min(100%, var(--fx-dialog-width)); display: grid; gap: var(--fx-space-6); padding: var(--fx-space-8); border: var(--fx-border-width-default) solid var(--fx-border-color-surface); border-radius: var(--fx-radius-overlay); background: var(--fx-bg-surface); box-shadow: var(--fx-shadow-sm); } .fx-auth__brand { display: flex; align-items: center; gap: var(--fx-space-2); font-weight: var(--fx-font-weight-semibold); color: var(--fx-text-primary); text-decoration: none; } .fx-auth__brand > svg { inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); color: var(--fx-text-brand); } .fx-auth__head { display: grid; gap: var(--fx-space-2); } .fx-auth__title { margin: 0; font-size: var(--fx-font-size-xl); font-weight: var(--fx-font-weight-semibold); } .fx-auth__text { margin: 0; font-size: var(--fx-font-size-sm); color: var(--fx-text-secondary); } .fx-auth__form { display: grid; gap: var(--fx-space-4); } .fx-auth__social { display: grid; gap: var(--fx-space-2); } .fx-auth__or { display: flex; align-items: center; gap: var(--fx-space-3); color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); } .fx-auth__or::before, .fx-auth__or::after { content: ""; flex: 1; block-size: var(--fx-border-width-default); background: var(--fx-border-color-default); } .fx-auth__foot { margin: 0; font-size: var(--fx-font-size-sm); color: var(--fx-text-secondary); text-align: center; } .fx-auth__foot a { color: var(--fx-text-brand); font-weight: var(--fx-font-weight-medium); } .fx-auth__legal { margin: 0; font-size: var(--fx-font-size-xs); color: var(--fx-text-tertiary); text-align: center; } .fx-auth__view { display: grid; gap: var(--fx-space-6); } .fx-auth__view[hidden] { display: none; } /* «Havola yuborildi»: katta belgi, manzil, qayta yuborish */ .fx-auth__view[data-view="sent"] { justify-items: center; text-align: center; } .fx-auth__art { display: grid; place-items: center; inline-size: calc(var(--fx-space-12) * 1.25); block-size: calc(var(--fx-space-12) * 1.25); border-radius: var(--fx-radius-surface); background: var(--fx-bg-brand-subtle); color: var(--fx-text-brand); } .fx-auth__art > svg { inline-size: var(--fx-size-icon-lg); block-size: var(--fx-size-icon-lg); } .fx-auth__email { font-weight: var(--fx-font-weight-semibold); color: var(--fx-text-primary); overflow-wrap: anywhere; } /* Split: forma chapda, brend paneli oʻngda; tor ekranda panel yashirinadi */ .fx-auth[data-variant="split"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); place-items: stretch; padding: 0; } .fx-auth[data-variant="split"] .fx-auth__main { display: grid; place-items: center; padding: var(--fx-space-6); } .fx-auth[data-variant="split"] .fx-auth__card { border: 0; background: transparent; box-shadow: none; padding: 0; } .fx-auth__aside { display: none; align-content: space-between; gap: var(--fx-space-8); padding: var(--fx-space-10); background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand); } .fx-auth[data-variant="split"] .fx-auth__aside { display: grid; } .fx-auth__quote { margin: 0; font-size: var(--fx-font-size-display-sm); font-weight: var(--fx-font-weight-medium); line-height: 1.3; } .fx-auth__cite { margin: var(--fx-space-4) 0 0; font-size: var(--fx-font-size-sm); opacity: 0.85; } @media (max-width: 56em) { .fx-auth[data-variant="split"] { grid-template-columns: minmax(0, 1fr); } .fx-auth[data-variant="split"] .fx-auth__aside { display: none; } } @media (max-width: 30em) { .fx-auth__card { padding: var(--fx-space-5); } } /* ---- Bosqichlar (4.109): tasdiqlash kodi, parolni tiklash, yangi parol, tayyor. Joriy bosqich — ildizdagi data-step (xulq qoʻyadi; server ham shu bilan istalgan bosqichni ochadi). Boshqa koʻrinishlar yashiriladi. ---- */ .fx-auth[data-step="form"] .fx-auth__view:not([data-view="form"]), .fx-auth[data-step="sent"] .fx-auth__view:not([data-view="sent"]), .fx-auth[data-step="verify"] .fx-auth__view:not([data-view="verify"]), .fx-auth[data-step="forgot"] .fx-auth__view:not([data-view="forgot"]), .fx-auth[data-step="reset"] .fx-auth__view:not([data-view="reset"]), .fx-auth[data-step="done"] .fx-auth__view:not([data-view="done"]) { display: none; } .fx-auth__view:is([data-view="verify"], [data-view="done"]) { justify-items: center; text-align: center; } .fx-auth__view[data-view="verify"] .fx-auth__form { justify-items: center; } .fx-auth__title:focus { outline: none; } /* Yorliq qatori: «Parol» chapda, «Parolni unutdingizmi?» oʻngda */ .fx-auth__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fx-space-3); } .fx-auth__link { padding: 0; border: 0; background: none; color: var(--fx-text-brand); font: inherit; font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-medium); text-decoration: underline; text-underline-offset: var(--fx-space-1); cursor: pointer; } .fx-auth__link:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: var(--fx-border-width-focus); border-radius: var(--fx-radius-badge); } .fx-auth__back { display: inline-flex; align-items: center; gap: var(--fx-space-1); justify-self: start; } .fx-auth__back::before { content: "←"; } /* Muvaffaqiyat belgisi: yashil fon + ✓ shakli (rang yolgʻiz emas) */ .fx-auth__art[data-tone="success"] { background: var(--fx-bg-success-subtle); color: var(--fx-fg-success); } .fx-auth__rules { display: grid; gap: var(--fx-space-1); margin: 0; padding: 0; list-style: none; color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); } .fx-auth__rules > li::before { content: "○ "; } .fx-auth__rules > li[data-ok] { color: var(--fx-fg-success); } .fx-auth__rules > li[data-ok]::before { content: "✓ "; } } /* avatar */ @layer fx.components { /* Kvadrat avatar + holat nuqtasi (FoxOS (avval Fox Workspace) hilos namunasidan, Ustoz tasdigʻi 16.10; WDS «Komponentlar» 08.10 doira qoidasi bekor). */ .fx-avatar { --_s: var(--fx-size-avatar-md); --fx-avatar-ring: var(--fx-bg-surface); /* holat nuqtasi halqasi — avatar turgan yuza rangi (hook) */ position: relative; flex: none; display: inline-grid; place-items: center; inline-size: var(--_s); block-size: var(--_s); border-radius: calc(var(--_s) * var(--fx-radius-avatar-ratio)); background: var(--fx-bg-category-blue); color: var(--fx-text-on-category); font-size: var(--fx-font-size-xs); font-weight: var(--fx-font-weight-semibold); line-height: 1; user-select: none; } .fx-avatar[data-size="sm"] { --_s: var(--fx-size-avatar-sm); font-size: calc(var(--fx-font-size-xs) * 0.75); } .fx-avatar[data-size="lg"] { --_s: var(--fx-size-avatar-lg); font-size: var(--fx-font-size-lg); } .fx-avatar > img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; } .fx-avatar[data-color="yellow"] { background: var(--fx-bg-category-yellow); } .fx-avatar[data-color="pink"] { background: var(--fx-bg-category-pink); } .fx-avatar[data-color="blue"] { background: var(--fx-bg-category-blue); } .fx-avatar[data-color="coral"] { background: var(--fx-bg-category-coral); } .fx-avatar[data-color="green"] { background: var(--fx-bg-category-green); } .fx-avatar[data-color="purple"] { background: var(--fx-bg-category-purple); } /* Holat: active — puls, waiting — sariq, stopped — qizil, idle — xira */ .fx-avatar[data-status]::after { content: ""; position: absolute; inset-inline-end: calc(var(--fx-border-width-focus) * -1); inset-block-end: calc(var(--fx-border-width-focus) * -1); inline-size: var(--fx-size-status-dot); block-size: var(--fx-size-status-dot); box-sizing: border-box; border-radius: var(--fx-radius-circle); border: var(--fx-border-width-focus) solid var(--fx-avatar-ring); background: var(--fx-border-color-strong); } .fx-avatar[data-size="sm"][data-status]::after { inline-size: var(--fx-size-status-dot-sm); block-size: var(--fx-size-status-dot-sm); } .fx-avatar[data-status="active"]::after { background: var(--fx-fg-success); animation: fx-pulse var(--fx-duration-pulse) var(--fx-ease-standard) infinite; } .fx-avatar[data-status="waiting"]::after { background: var(--fx-fg-warning); } .fx-avatar[data-status="stopped"]::after { background: var(--fx-fg-error); } @media (prefers-reduced-motion: reduce) { .fx-avatar[data-status]::after { animation: none; } } /* Guruh: bir-birining ustiga, kesim — avatar turgan yuza rangida; oxirida «+N» */ .fx-avatar-group { display: inline-flex; align-items: center; } .fx-avatar-group > .fx-avatar { outline: var(--fx-border-width-focus) solid var(--fx-avatar-ring); } .fx-avatar-group > .fx-avatar + .fx-avatar { margin-inline-start: calc(var(--fx-space-2) * -1); } .fx-avatar[data-more] { background: var(--fx-bg-muted); color: var(--fx-text-secondary); } /* ---- Kengaytma (2.45–2.53): xs/xl/2xl, guruh yoyilishi/toʻr/chegara, tugma-“+N”, surat zanjiri, belgi, tahrirlash ---- */ .fx-avatar[data-size="xs"] { --_s: var(--fx-size-icon-sm); font-size: calc(var(--fx-font-size-xs) * 0.5); } .fx-avatar[data-size="xs"][data-status]::after { inline-size: calc(var(--fx-size-status-dot-sm) * 0.6); block-size: calc(var(--fx-size-status-dot-sm) * 0.6); border-width: calc(var(--fx-border-width-focus) / 2); } .fx-avatar[data-size="xl"] { --_s: calc(var(--fx-size-avatar-lg) * 1.5); font-size: var(--fx-font-size-xl); } .fx-avatar[data-size="2xl"] { --_s: calc(var(--fx-size-avatar-lg) * 2); font-size: var(--fx-font-size-display-sm); } :is(.fx-avatar[data-size="xl"], .fx-avatar[data-size="2xl"])[data-status]::after { inline-size: var(--fx-size-icon-sm); block-size: var(--fx-size-icon-sm); } /* Guruh: transition + hover’da yoyilish (data-spread), toʻr (data-layout="grid"), eng koʻp koʻrinadigan soni (data-max) */ .fx-avatar-group > .fx-avatar + .fx-avatar { transition: margin var(--fx-motion-base) var(--fx-ease-standard); } .fx-avatar-group[data-spread]:is(:hover, :focus-within) > .fx-avatar + .fx-avatar { margin-inline-start: var(--fx-space-1); } .fx-avatar-group[data-layout="grid"] { flex-wrap: wrap; gap: var(--fx-space-2); } .fx-avatar-group[data-layout="grid"] > .fx-avatar + .fx-avatar { margin-inline-start: 0; } .fx-avatar-group[data-layout="grid"] > .fx-avatar { outline: 0; } .fx-avatar-group[data-max="3"] > .fx-avatar:nth-child(n + 4):not([data-more]), .fx-avatar-group[data-max="4"] > .fx-avatar:nth-child(n + 5):not([data-more]), .fx-avatar-group[data-max="5"] > .fx-avatar:nth-child(n + 6):not([data-more]), .fx-avatar-group[data-max="6"] > .fx-avatar:nth-child(n + 7):not([data-more]) { display: none; } /* “+N” bosiladigan boʻlsa (popover ochadi): haqiqiy