/* ============================================================================= UiChemy Create, Design System Tokens (Phase 1, isolated) ----------------------------------------------------------------------------- SURFACE MODEL, components are surface-agnostic. They read semantic tokens (surfaces, text, borders, ring, per-family fg/soft) whose VALUES are set by the surface scope a component lives in: .uc-content → light content (current look, DEFAULT) .uc-content[data-theme="dark"] → dark content (future, token change only) .uc-chrome → dark chrome (fixed; sidebar/nav/rails) `.uc-scope` and `.uc-portal` behave as light content, so existing usage is unchanged and the light view is pixel-identical to before this restructure. ISOLATION: all tokens are scoped under these classes (NOT :root). Nothing here touches the existing globals/theme. ========================================================================== */ /* Brand typeface, bundled via webpack (relative paths resolve to ../fonts/, emitted into build/ and URL-rewritten at build time so the fonts load correctly from wp-content, not the server root). */ @font-face { font-family:"Zalando Sans"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/ZalandoSans-Regular.bcfcc767.ttf) format("truetype"); } @font-face { font-family:"Zalando Sans"; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/ZalandoSans-Medium.41051c31.ttf) format("truetype"); } @font-face { font-family:"Zalando Sans"; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/ZalandoSans-SemiBold.d690e087.ttf) format("truetype"); } @font-face { font-family:"Zalando Sans"; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/ZalandoSans-Bold.0ac5948b.ttf) format("truetype"); } /* ============================================================================= 1. BASE, surface-INDEPENDENT tokens (identical on every surface). Applies to every surface scope so the values are always present. ========================================================================== */ /* `:root` added (AI-creator port) so DS token VALUES resolve app-wide for inline DS controls (buttons/inputs/triggers) WITHOUT importing the scope's font/color/box-sizing reset, that stays under `.uc-*` only. Nothing in the app references `--uc-*`, so these are inert for existing components. */ :root, .uc-scope, .uc-content, .uc-chrome, .uc-portal { /* ---- Brand + semantic SOLID fills + on-fill text (constant) ---------- ORANGE is back on the SOLID brand fill only, this paints the primary / main-CTA buttons (tone="brand" solid). The brand -fg/-soft/-border/-glow below stay NEUTRAL, so soft/outline/ghost brand controls, icon tints and text remain monochrome. --uc-accent stays neutral (no purple). */ --uc-brand: #FD6A35; --uc-brand-on: #FFFFFF; --uc-success: #2EA343; --uc-success-on: #FFFFFF; --uc-danger: #F65258; --uc-danger-on: #FFFFFF; --uc-warning: #FFA940; --uc-warning-on: #171717; --uc-accent: var(--uc-inverse-bg); --uc-accent-on: var(--uc-inverse-fg); /* ---- Family hairline borders (translucent, work on any surface) ----- */ --uc-brand-border: var(--uc-border); --uc-success-border: rgba(46, 163, 67, 0.40); --uc-danger-border: rgba(246, 82, 88, 0.40); --uc-warning-border: rgba(255, 169, 64, 0.42); --uc-accent-border: var(--uc-border); /* ---- Hover / press glow washes (translucent, surface-agnostic) ------ */ --uc-brand-glow-hover: rgba(128, 128, 128, 0.10); --uc-brand-glow-press: rgba(128, 128, 128, 0.18); --uc-success-glow-hover: rgba(46, 163, 67, 0.08); --uc-success-glow-press: rgba(46, 163, 67, 0.16); --uc-danger-glow-hover: rgba(246, 82, 88, 0.08); --uc-danger-glow-press: rgba(246, 82, 88, 0.16); --uc-warning-glow-hover: rgba(255, 169, 64, 0.10); --uc-warning-glow-press: rgba(255, 169, 64, 0.18); --uc-accent-glow-hover: rgba(128, 128, 128, 0.10); --uc-accent-glow-press: rgba(128, 128, 128, 0.18); /* ---- Inverse text (constant) ----------------------------------------- */ --uc-text-inverse: #FFFFFF; /* ---- Semantic aliases (resolve per surface via the surface tokens) --- */ --uc-bg: var(--uc-surface-base); --uc-fg: var(--uc-text-strong); --uc-fg-muted: var(--uc-text-muted); --uc-card: var(--uc-surface-raised); --uc-card-fg: var(--uc-text-strong); --uc-muted: var(--uc-surface-sunken); --uc-elevated: var(--uc-surface-overlay); /* ---- Radius (UiChemy scale: name = pixel value; mirrors the styleguide corner-radius set). Semantic aliases below keep components working. -- */ --uc-radius-0: 0; --uc-radius-2: 2px; --uc-radius-4: 4px; --uc-radius-6: 6px; --uc-radius-8: 8px; --uc-radius-12: 12px; --uc-radius-16: 16px; --uc-radius-24: 24px; --uc-radius-32: 32px; --uc-radius-infinite: 9999px; /* Semantic aliases → numeric scale (value-identical to before) */ --uc-radius-xs: var(--uc-radius-4); --uc-radius-sm: var(--uc-radius-6); --uc-radius-md: var(--uc-radius-8); --uc-radius-lg: var(--uc-radius-12); --uc-radius-xl: var(--uc-radius-16); --uc-radius-pill: var(--uc-radius-infinite); /* ---- Spacing (UiChemy scale: name = pixels) -------------------------- */ --uc-space-0: 0; --uc-space-1: 1px; --uc-space-2: 2px; --uc-space-3: 3px; --uc-space-4: 4px; --uc-space-5: 5px; --uc-space-6: 6px; --uc-space-7: 7px; --uc-space-8: 8px; --uc-space-9: 9px; --uc-space-10: 10px; --uc-space-11: 11px; --uc-space-12: 12px; --uc-space-14: 14px; --uc-space-16: 16px; --uc-space-20: 20px; --uc-space-24: 24px; --uc-space-28: 28px; --uc-space-32: 32px; --uc-space-36: 36px; --uc-space-40: 40px; --uc-space-44: 44px; --uc-space-48: 48px; /* ---- Typography ------------------------------------------------------ */ --uc-font-sans: "Zalando Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --uc-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --uc-text-3xs: 8px; --uc-text-2xs: 10px; --uc-text-xs: 12px; /* 11px: compact meta / dense-panel text (list meta, inspector hints, code gutter). */ --uc-text-11: 11px; --uc-text-sm: 13px; --uc-text-base: 14px; --uc-text-md: 16px; --uc-text-lg: 18px; --uc-text-xl: 20px; --uc-text-2xl: 24px; --uc-text-3xl: 30px; /* --uc-weight-semibold is temporarily folded to Medium (500): no text renders at 600 for now. Flip back to 600 here to restore SemiBold everywhere it's used (Card / Alert / Dialog / Accordion titles, etc.). */ --uc-weight-regular: 400; --uc-weight-medium: 500; --uc-weight-semibold: 500; --uc-leading-tight: 1.2; --uc-leading-snug: 1.35; --uc-leading-normal: 1.5; --uc-tracking-tight: -0.01em; --uc-tracking-normal: 0; --uc-tracking-wide: 0.02em; /* ---- Elevation (neutral recipes; control-brand recolored to orange) -- Resting + hover surfaces are FLAT (ElevenLabs-style): definition comes from the single hairline border, not a shadow. Only true overlays (popovers/menus/modals = shadow-3/4/5) still float. */ --uc-shadow-1: none; --uc-shadow-2: none; --uc-shadow-3: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 2px 4px -1px oklch(0% 0 0 / 0.05), 0 6px 14px -3px oklch(0% 0 0 / 0.08); --uc-shadow-4: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 6px 12px -4px oklch(0% 0 0 / 0.06), 0 14px 28px -6px oklch(0% 0 0 / 0.10); --uc-shadow-5: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 12px 24px -8px oklch(0% 0 0 / 0.08), 0 28px 56px -12px oklch(0% 0 0 / 0.14); /* Filled controls (solid buttons): light top highlight + one soft drop. Kept subtle, depth reads without heavy shadows. */ --uc-shadow-control: inset 0 1px 0 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 3px -1px rgba(0, 0, 0, 0.05); /* Colored solids (brand/success/danger): neutral dark inner edge so it suits any hue, plus a light top highlight and soft drop. */ --uc-shadow-control-brand: inset 0 1px 0 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.09), 0 2px 3px -1px rgba(0, 0, 0, 0.06); --uc-shadow-control-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.14); --uc-shadow-input: inset 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 2px 4px -2px rgba(0, 0, 0, 0.04); /* Raised secondary controls (outline buttons, select/menu triggers): a faint top highlight and a whisper of drop. Edge comes from the component border. */ --uc-shadow-raised: inset 0 1px 0 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px -1px rgba(0, 0, 0, 0.04); /* Very subtle gloss: faint light top → faint dark bottom. */ --uc-sheen: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.03)); /* ---- Control sizing -------------------------------------------------- */ --uc-control-h-sm: 28px; --uc-control-h-md: 32px; --uc-control-h-lg: 40px; /* ---- Motion ---------------------------------------------------------- */ --uc-dur-fast: 160ms; --uc-dur-base: 240ms; --uc-dur-slow: 340ms; /* Appearance of popovers / overlays (tooltip, menu, select, dialog), a touch slower than base so things ease in gracefully instead of flashing on. */ --uc-dur-enter: 300ms; --uc-ease-standard: cubic-bezier(0.2, 0, 0, 1); --uc-ease-emphasized: cubic-bezier(0.3, 0, 0, 1); --uc-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* ---- Z-index --------------------------------------------------------- */ /* Dropdowns/selects/menus sit ABOVE dialogs (1250 > z-dialog 1200) so a Select opened inside a modal renders on top instead of behind it. Tooltip stays highest. */ --uc-z-overlay: 1100; --uc-z-dialog: 1200; --uc-z-dropdown: 1250; --uc-z-tooltip: 1300; } /* ============================================================================= 2. SURFACE, CONTENT (light). DEFAULT. Values identical to pre-restructure, so the light view is unchanged. `.uc-scope` / `.uc-portal` map here too. ========================================================================== */ :root, .uc-scope, .uc-content, .uc-portal { --uc-surface-sunken: #EBEBEB; --uc-surface-base: #F4F4F4; --uc-surface-raised: #FFFFFF; --uc-surface-overlay: rgba(255, 255, 255, 0.10); --uc-surface-control: #FFFFFF; /* secondary control fill (raised) */ --uc-button-soft-neutral-bg: var(--uc-surface-sunken); --uc-button-soft-neutral-shadow: var(--uc-shadow-1); /* The hover / highlight wash (menu rows, the sliding pill in Select and Menu). SEPARATE from --uc-surface-control, which it used to borrow: that token is a RAISED FILL, and the two values only coincide on a dark surface where rgba(255,255,255,0.05) happens to read as both. On light, a raised control is #FFFFFF — a white pill on a white menu, i.e. invisible — while a hover wash has to be darker than what it sits on. Translucent so it composites over whatever surface the menu uses. */ --uc-surface-hover: rgba(0, 0, 0, 0.04); --uc-text-strong: #0A0A0A; --uc-text: #171717; --uc-text-muted: #737373; --uc-text-subtle: #A3A3A3; /* high-contrast inverse fill (B&W primary): dark on light content */ --uc-inverse-bg: #171717; --uc-inverse-fg: #FFFFFF; /* One soft, semi-transparent hairline (ElevenLabs uses rgba(0,0,0,0.1)). Translucent so it composites correctly over white AND grey tiles. */ --uc-border-subtle: rgba(0, 0, 0, 0.055); --uc-border: rgba(0, 0, 0, 0.09); --uc-border-strong: rgba(0, 0, 0, 0.14); /* The HOVER border on controls — one step above --uc-border-strong, and a BORDER value, not a text one. Every hover ring used --uc-text-subtle, which on dark is ALSO #525252 (the two coincide there, so the mistake was invisible — and the hover was in fact a no-op, resting and hover being the same colour) but on light is #A3A3A3: roughly 36% black against a 14% resting border, i.e. a hard outline snapping in instead of a step up. */ --uc-border-hover: rgba(0, 0, 0, 0.22); --uc-ring: #737373; /* per-family foreground (readable on light). brand/accent = dark ink. */ --uc-brand-fg: #171717; --uc-success-fg: #0A842A; --uc-danger-fg: #D12D37; --uc-warning-fg: #AA712B; --uc-accent-fg: #171717; /* per-family soft tint backgrounds (opaque light tints). brand/accent = grey. */ --uc-brand-soft: #F0F0F0; --uc-success-soft: #E7FFE7; --uc-danger-soft: #FFF2EF; --uc-warning-soft: #FFEDD8; --uc-accent-soft: #F0F0F0; } /* ============================================================================= 3. SURFACE, CONTENT DARK (future). Token change only; no component rebuild. Slightly lighter than chrome so content sits "above" the fixed chrome. ========================================================================== */ .uc-content[data-theme="dark"] { --uc-surface-sunken: #151515; --uc-surface-base: #1C1C1C; --uc-surface-raised: #242424; --uc-surface-overlay: #2A2A2A; --uc-surface-control: rgba(255, 255, 255, 0.05); /* subtle lift, blends on dark */ /* Muted neutral buttons use the secondary control recipe on dark surfaces. */ --uc-button-soft-neutral-bg: var(--uc-surface-control); --uc-button-soft-neutral-shadow: var(--uc-shadow-raised); --uc-text-strong: #F5F5F5; --uc-text: #E5E5E5; --uc-text-muted: #A3A3A3; --uc-text-subtle: #737373; /* inverse flips to light-on-dark so the B&W primary stays high-contrast */ --uc-inverse-bg: #F5F5F5; --uc-inverse-fg: #1C1C1C; --uc-border-subtle: #2E2E2E; --uc-border: #3D3D3D; --uc-border-strong: #525252; /* Exactly what --uc-text-subtle resolves to here, so dark is unchanged. */ --uc-border-hover: #525252; --uc-ring: #A3A3A3; --uc-brand-fg: #EDEDED; --uc-success-fg: #A7EAAA; --uc-danger-fg: #FDC9C6; --uc-warning-fg: #FFC680; --uc-accent-fg: #EDEDED; --uc-brand-soft: rgba(255, 255, 255, 0.12); --uc-success-soft: rgba(46, 163, 67, 0.20); --uc-danger-soft: rgba(246, 82, 88, 0.20); --uc-warning-soft: rgba(255, 169, 64, 0.22); --uc-accent-soft: rgba(255, 255, 255, 0.12); } /* ============================================================================= 4. SURFACE, CHROME (dark, fixed). Values from the existing app dark sidebar (#171717 / #202020, text-white / text-weakest, border-dark-weakest/default). ========================================================================== */ .uc-chrome { --uc-surface-sunken: #101010; --uc-surface-base: #171717; --uc-surface-raised: #202020; --uc-surface-overlay: #242424; --uc-surface-control: rgba(255, 255, 255, 0.05); /* subtle lift, blends on dark */ --uc-button-soft-neutral-bg: var(--uc-surface-control); --uc-button-soft-neutral-shadow: var(--uc-shadow-raised); /* Same value --uc-surface-control had, so dark is unchanged by the split. */ --uc-surface-hover: rgba(255, 255, 255, 0.05); --uc-text-strong: #FFFFFF; --uc-text: #A3A3A3; --uc-text-muted: #737373; --uc-text-subtle: #525252; /* inverse flips to light-on-dark so the B&W primary stays high-contrast */ --uc-inverse-bg: #F5F5F5; --uc-inverse-fg: #171717; --uc-border-subtle: #333333; --uc-border: #404040; --uc-border-strong: #525252; /* Exactly what --uc-text-subtle resolves to here, so dark is unchanged. */ --uc-border-hover: #525252; --uc-ring: #A3A3A3; --uc-brand-fg: #EDEDED; --uc-success-fg: #A7EAAA; --uc-danger-fg: #FDC9C6; --uc-warning-fg: #FFC680; --uc-accent-fg: #EDEDED; --uc-brand-soft: rgba(255, 255, 255, 0.12); --uc-success-soft: rgba(46, 163, 67, 0.20); --uc-danger-soft: rgba(246, 82, 88, 0.20); --uc-warning-soft: rgba(255, 169, 64, 0.22); --uc-accent-soft: rgba(255, 255, 255, 0.12); } /* ============================================================================= 4b. POPOVER, fixed dark scope for dropdowns (Select / Menu). Always dark in every mode. Applied alongside `uc-portal` (base tokens + box-sizing). ========================================================================== */ .uc-pop-dark { --uc-surface-sunken: #141414; --uc-surface-base: #1A1A1A; --uc-surface-raised: #242424; /* A dropdown must read as a LAYER above the panel. The old #1C1C1C sat between the panel chrome (#171717) and its field surfaces (#202020/#242424), so a dark list melted into the dark panel. #2E2E2E is clearly lighter than every panel surface, and the stronger shadow below (soft dark drops that actually show on dark, reused from the canvas dock bar) plus the .content border give it a crisp, floating edge. [ui-ux blend fix] */ --uc-surface-overlay: #2E2E2E; --uc-surface-control: rgba(255, 255, 255, 0.08); --uc-button-soft-neutral-bg: var(--uc-surface-control); --uc-button-soft-neutral-shadow: var(--uc-shadow-raised); /* Same value --uc-surface-control had here; a pop-up is already a layer up, so its wash is a touch stronger than the panel's. */ --uc-surface-hover: rgba(255, 255, 255, 0.08); --uc-shadow-4: 0 16px 44px -12px rgb(0 0 0 / 55%), 0 4px 12px -4px rgb(0 0 0 / 40%); --uc-text-strong: #FFFFFF; --uc-text: #E5E5E5; --uc-text-muted: #A3A3A3; --uc-text-subtle: #737373; --uc-inverse-bg: #F5F5F5; --uc-inverse-fg: #171717; --uc-border-subtle: #2E2E2E; --uc-border: #3D3D3D; --uc-border-strong: #525252; /* Exactly what --uc-text-subtle resolves to here, so dark is unchanged. */ --uc-border-hover: #525252; --uc-ring: #A3A3A3; --uc-brand-fg: #EDEDED; --uc-brand-soft: rgba(255, 255, 255, 0.12); --uc-success-fg: #A7EAAA; --uc-success-soft: rgba(46, 163, 67, 0.20); --uc-danger-fg: #FDC9C6; --uc-danger-soft: rgba(246, 82, 88, 0.20); --uc-warning-fg: #FFC680; --uc-warning-soft: rgba(255, 169, 64, 0.22); --uc-accent-fg: #EDEDED; --uc-accent-soft: rgba(255, 255, 255, 0.12); color: var(--uc-text); } /* ============================================================================= 5. BASELINES, each surface paints its own background + text. ========================================================================== */ .uc-scope, .uc-content, .uc-chrome { font-family: var(--uc-font-sans); --uich-ff: var(--uc-font-sans); font-size: var(--uc-text-base); line-height: var(--uc-leading-normal); color: var(--uc-text); background: var(--uc-surface-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Portalled content mounts in ; carry font/tokens but no background. */ .uc-portal { font-family: var(--uc-font-sans); --uich-ff: var(--uc-font-sans); font-size: var(--uc-text-base); line-height: var(--uc-leading-normal); color: var(--uc-text); -webkit-font-smoothing: antialiased; } .uc-scope *, .uc-scope *::before, .uc-scope *::after, .uc-content *, .uc-content *::before, .uc-content *::after, .uc-chrome *, .uc-chrome *::before, .uc-chrome *::after, .uc-portal *, .uc-portal *::before, .uc-portal *::after { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { .uc-scope *, .uc-content *, .uc-chrome *, .uc-portal * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================================= UiChemy Create, COMPONENT tokens (per-component knobs) ----------------------------------------------------------------------------- Per-component sizing/shape variables, editable from the internal DS editor (tools/ds-editor). Each defaults to a GLOBAL token via var(), so out of the box a component still follows the global scale, overriding one here changes ONLY that component, not the whole system. Loaded right after tokens.css (src/index.js), same surface scopes, so the values resolve wherever the components render. The component CSS modules read these with the original value as a var() fallback, so a missing/av value can never break a component. ========================================================================== */ .uc-scope, .uc-content, .uc-chrome, .uc-portal { /* ---- Button --------------------------------------------------------- */ --uc-btn-radius: var(--uc-radius-md); --uc-btn-weight: var(--uc-weight-medium); --uc-btn-h: var(--uc-control-h-md); --uc-btn-px: var(--uc-space-16); /* ---- Input ---------------------------------------------------------- */ --uc-input-radius: var(--uc-radius-md); --uc-input-h: var(--uc-control-h-md); --uc-input-px: var(--uc-space-12); /* ---- Card ----------------------------------------------------------- */ --uc-card-radius: var(--uc-radius-lg); --uc-card-pad: var(--uc-space-20); /* ---- Tabs (pill variant) -------------------------------------------- */ --uc-tab-track-bg: #F2F2F2; /* lighter track (was --uc-surface-sunken #EBEBEB) */ --uc-tab-track-stroke: none; /* no hairline stroke around the track */ --uc-tab-track-radius: var(--uc-radius-md); --uc-tab-track-pad: 3px; --uc-tab-radius: var(--uc-radius-sm); --uc-tab-h: 26px; --uc-tab-px: var(--uc-space-12); } /* FloatingToolbar shares the global palette in either theme. */ .uc-scope, .uc-content, .uc-chrome, .uc-portal, .uc-pop-dark { --uc-toolbar-bg: var(--uc-surface-raised); --uc-toolbar-hover-bg: var(--uc-surface-overlay); --uc-toolbar-fg: var(--uc-text); --uc-toolbar-border: var(--uc-border); --uc-toolbar-height: 48px; --uc-toolbar-action-size: 34px; --uc-toolbar-dismiss-size: 44px; --uc-toolbar-radius: var(--uc-radius-lg); --uc-toolbar-action-radius: var(--uc-btn-radius); --uc-toolbar-compact-height: var(--uc-space-40); --uc-toolbar-compact-action-size: var(--uc-control-h-md); --uc-toolbar-compact-radius: var(--uc-toolbar-radius); --uc-toolbar-shadow: var(--uc-shadow-4); } .uc-pop-dark { /* Pill tabs inside a dark pop-up (e.g. the model picker's CLI | WP Connectors strip). `.uc-portal` above pins the track to the light #F2F2F2, which beats anything inherited from a dark panel, so re-point it to the dark sunken well + hairline here. */ --uc-tab-track-bg: var(--uc-surface-sunken); --uc-tab-track-stroke: inset 0 0 0 1px var(--uc-border-subtle); } /* * Layout for the DS controls inside WordPress field-group boxes. The controls themselves are DS * components (styled by their own modules); this only arranges them and the few compositions the * DS has no single component for (media picker, link row, repeater rows). Every value is a uc- token. * * Layout rule: every control fills its cell, the full row unless the field has a Width setting * (the grid maths lives in uich-gf-style.css). The section itself is capped, so full width stays a * comfortable form width. */ /* The DS scope paints its base surface; here the controls sit on WordPress's white box, the way they sit on white cards in the dashboard (DS inputs are a translucent wash over what is behind them). */ .uich-gf-ds.uc-scope { min-width: 0; background: transparent; font-family: var(--uc-font-sans); color: var(--uc-text-strong); } /* ── The cell ──────────────────────────────────────────────────────────────── */ .uich-gf-ds-cell { min-width: 0; } /* On / off in a settings row: the state text, then the control at the right edge. */ .uich-gf-labels-left > .uich-gf-wrap-true_false .uich-gf-ds-bool { flex-direction: row-reverse; color: var(--uc-text-muted); } /* The PHP label and help text, brought in line with DS Label / hint. */ .uich-gf-row-ds > label.uich-gf-label, .uich-gf-row-ds > .uich-gf-label-col > label.uich-gf-label { font-family: var(--uc-font-sans, inherit); font-size: 13px; font-weight: 500; color: var(--uc-text-strong); } .uich-gf-row-ds .uich-gf-instruction { margin: 0; font-size: 12px; line-height: 1.45; color: var(--uc-text-muted); } .uich-gf-row-ds .uich-gf-input-wrap > .uich-gf-instruction, .uich-gf-row-ds .uich-gf-field-error { margin: 6px 0 0; } .uich-gf-row-ds .uich-gf-field-error { font-size: 12px; color: var(--uc-danger); } /* The value inputs that carry the POST data. WordPress's forms.css gives checkbox / radio inputs a display value, which beats the `hidden` attribute, so they must be hidden explicitly. */ .uich-gf-ds input[hidden], .uich-gf-ds select[hidden] { display: none !important; } /* ── Selects ───────────────────────────────────────────────────────────────── */ .uich-gf-ds .uich-gf-ds-select, .uich-gf-ds .uich-gf-ds-multi { width: 100%; min-width: 0; } .uich-gf-ds-chips { display: flex; flex-wrap: wrap; gap: var(--uc-space-4); min-width: 0; } .uich-gf-ds-multi[class] { height: auto; min-height: var(--uc-control-h-md); padding-block: var(--uc-space-4); } .uich-gf-ds-pop[class] { box-sizing: border-box; min-width: var(--radix-popover-trigger-width); padding: var(--uc-space-4); } .uich-gf-ds-pop__search { padding: var(--uc-space-4) var(--uc-space-4) var(--uc-space-6); } .uich-gf-ds-pop__list { max-height: 260px; overflow-y: auto; } .uich-gf-ds-pop__opt { display: flex; align-items: center; gap: var(--uc-space-8); padding: var(--uc-space-6) var(--uc-space-8); border-radius: var(--uc-radius-6); font-size: var(--uc-text-sm); cursor: pointer; } .uich-gf-ds-pop__opt:hover { background: rgba(255, 255, 255, 0.08); } .uich-gf-ds-pop__empty { margin: 0; padding: var(--uc-space-10); font-size: var(--uc-text-xs); color: var(--uc-text-muted); } /* ── Checkbox / radio lists, true / false ──────────────────────────────────── */ .uich-gf-ds-choices { display: flex; flex-direction: column; gap: var(--uc-space-8); } .uich-gf-ds-choices.is-row { flex-direction: row; flex-wrap: wrap; gap: var(--uc-space-8) var(--uc-space-20); } .uich-gf-ds-choice { display: inline-flex; align-items: center; gap: var(--uc-space-8); width: -moz-fit-content; width: fit-content; font-size: var(--uc-text-sm); color: var(--uc-text-strong); cursor: pointer; } /* "Select all" heads the list: a hairline sets it apart from the choices it controls. */ .uich-gf-ds-choice--all { font-weight: var(--uc-weight-medium); } .uich-gf-ds-choices:not(.is-row) > .uich-gf-ds-choice--all { width: 100%; max-width: 240px; padding-bottom: var(--uc-space-8); border-bottom: 1px solid var(--uc-border-subtle); } .uich-gf-ds-bool { min-height: var(--uc-control-h-sm); } /* ── Range: slider + number box ────────────────────────────────────────────── */ /* The DS input is `width: 100%` at [class] strength, hence the [class]. */ .uich-gf-ds-range { display: flex; align-items: center; gap: var(--uc-space-12); height: var(--uc-control-h-md); } .uich-gf-ds-range > :first-child { flex: 1 1 auto; min-width: 0; } .uich-gf-ds-range .uich-gf-ds-range__num[class] { flex: none; width: 88px; } /* ── Colour ────────────────────────────────────────────────────────────────── */ .uich-gf-ds-swatch { position: relative; display: block; width: 18px; height: 18px; border-radius: var(--uc-radius-4); box-shadow: inset 0 0 0 1px var(--uc-border); overflow: hidden; } .uich-gf-ds-swatch input[type="color"] { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); padding: 0; border: 0; opacity: 0; cursor: pointer; } /* ── Date / time: one icon (the DS one, on the left); the field opens the picker ── */ .uich-gf-ds-date::-webkit-calendar-picker-indicator { display: none; } .uich-gf-ds-date { cursor: pointer; } /* * ── Image / file / link ─────────────────────────────────────────────────────── * The anatomy of the DS FileUpload: an empty, compact zone (icon · text · button), then a file row * (thumb or glyph · name and details · actions). */ .uich-gf-ds-zone { display: flex; align-items: center; gap: var(--uc-space-12); min-width: 0; padding: var(--uc-space-12); border-radius: var(--uc-radius-md); border: 1px dashed var(--uc-border-strong); /* The inputs' own fill (not FileUpload's sunken grey): an empty field reads like its neighbours. */ background: var(--uc-surface-overlay); cursor: pointer; transition: border-color var(--uc-dur-fast) var(--uc-ease-standard); } .uich-gf-ds-zone:hover { border-color: var(--uc-text-subtle); } .uich-gf-ds-zone:focus-within { border-color: var(--uc-text-muted); } .uich-gf-ds-zone__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--uc-radius-pill); background: var(--uc-surface-raised); box-shadow: inset 0 0 0 1px var(--uc-border-subtle); color: var(--uc-text-muted); } .uich-gf-ds-zone__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--uc-space-2); min-width: 0; } .uich-gf-ds-zone__title { font-size: var(--uc-text-sm); font-weight: var(--uc-weight-medium); line-height: var(--uc-leading-snug); color: var(--uc-text-strong); } .uich-gf-ds-zone__hint { font-size: var(--uc-text-xs); line-height: var(--uc-leading-snug); color: var(--uc-text-muted); } .uich-gf-ds-file { display: flex; align-items: center; gap: var(--uc-space-12); min-width: 0; /* The empty zone's padding, so choosing a file swaps one for the other without a jump. */ padding: var(--uc-space-12) var(--uc-space-8) var(--uc-space-12) var(--uc-space-12); border-radius: var(--uc-radius-md); background: var(--uc-surface-raised); box-shadow: inset 0 0 0 1px var(--uc-border); } .uich-gf-ds-file__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--uc-radius-sm); background: var(--uc-surface-sunken); color: var(--uc-text-muted); } .uich-gf-ds-file__thumb { flex: none; display: block; width: 32px; height: 32px; border-radius: var(--uc-radius-sm); -o-object-fit: cover; object-fit: cover; background: var(--uc-surface-sunken); } /* An image field is about the picture: a larger preview. */ .uich-gf-ds-file.is-image .uich-gf-ds-file__thumb { width: 56px; height: 56px; } .uich-gf-ds-file__meta { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--uc-space-2); min-width: 0; } .uich-gf-ds-file__name, .uich-gf-ds-file__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uich-gf-ds-file__name { font-size: var(--uc-text-sm); font-weight: var(--uc-weight-medium); color: var(--uc-text-strong); } .uich-gf-ds-file__sub { font-size: var(--uc-text-xs); line-height: var(--uc-leading-snug); color: var(--uc-text-muted); } .uich-gf-ds-file__sub a { color: inherit; text-decoration: none; } .uich-gf-ds-file__sub a:hover { color: var(--uc-text-strong); text-decoration: underline; } .uich-gf-ds-file__actions { flex: none; display: flex; align-items: center; gap: var(--uc-space-4); } /* Set link: drawn like a filled DS input (same fill, ring, radius and height as .shell). */ .uich-gf-ds-linkrow { display: flex; align-items: center; gap: var(--uc-space-8); min-width: 0; height: var(--uc-input-h, var(--uc-control-h-md)); padding: 0 var(--uc-space-4) 0 var(--uc-input-px, var(--uc-space-12)); border-radius: var(--uc-input-radius, var(--uc-radius-md)); background: var(--uc-surface-overlay); box-shadow: inset 0 0 0 1px var(--uc-border-strong), var(--uc-shadow-input); /* The inputs' own size: a set link reads as a filled field. */ font-size: var(--uc-text-base); } .uich-gf-ds-linkrow__icon { flex: none; display: inline-flex; color: var(--uc-text-muted); } .uich-gf-ds-linkrow__text { flex: 1 1 auto; display: flex; align-items: baseline; gap: var(--uc-space-8); min-width: 0; white-space: nowrap; } .uich-gf-ds-linkrow__title { flex: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; font-weight: var(--uc-weight-medium); color: var(--uc-text-strong); } .uich-gf-ds-linkrow__url { min-width: 0; font-size: var(--uc-text-sm); overflow: hidden; text-overflow: ellipsis; color: var(--uc-text-muted); text-decoration: none; } .uich-gf-ds-linkrow__url:hover { color: var(--uc-text-strong); text-decoration: underline; } .uich-gf-ds-linkrow__flag { flex: none; font-size: var(--uc-text-xs); color: var(--uc-text-muted); } .uich-gf-ds-linkrow__actions { flex: none; display: flex; align-items: center; gap: var(--uc-space-2); } /* Empty link: a select-shaped trigger, icon and placeholder side by side. */ .uich-gf-ds-link-empty[class] { width: 100%; } .uich-gf-ds-link-empty > span:first-child { display: inline-flex; align-items: center; gap: var(--uc-space-8); } .uich-gf-ds-linkpop[class] { width: 320px; padding: 0; } .uich-gf-ds-linkpop__body { display: flex; flex-direction: column; gap: var(--uc-space-6); padding: var(--uc-space-12); } .uich-gf-ds-linkpop__body .uich-gf-ds-choice { margin-top: var(--uc-space-4); } .uich-gf-ds-linkpop__foot { display: flex; justify-content: space-between; gap: var(--uc-space-8); padding: var(--uc-space-10) var(--uc-space-12); border-top: 1px solid var(--uc-border-subtle); } /* ── Repeater: a card per row; inside, the same grid as the box ────────────── */ .uich-gf-ds-rep { display: flex; flex-direction: column; gap: var(--uc-space-8); } .uich-gf-ds-rep__row { border-radius: var(--uc-radius-md); background: var(--uc-surface-raised); box-shadow: inset 0 0 0 1px var(--uc-border); } .uich-gf-ds-rep__head { display: flex; align-items: center; justify-content: space-between; gap: var(--uc-space-8); height: 40px; padding: 0 var(--uc-space-6) 0 var(--uc-space-14); border-bottom: 1px solid var(--uc-border-subtle); } .uich-gf-ds-rep__num { font-size: var(--uc-text-xs); font-weight: var(--uc-weight-medium); color: var(--uc-text-muted); } .uich-gf-ds-rep__tools { display: inline-flex; gap: var(--uc-space-2); } .uich-gf-ds-rep__fields { display: flex; flex-wrap: wrap; gap: var(--uc-space-16) var(--uich-gf-gap-x, 16px); padding: var(--uc-space-14); } .uich-gf-ds-rep__field { display: flex; flex-direction: column; gap: var(--uc-space-6); flex: 1 1 100%; min-width: 0; } .uich-gf-ds-rep__field.uich-gf-has-width { flex: 0 0 calc(var(--uich-gf-w) * 1% - (100 - var(--uich-gf-w)) * var(--uich-gf-gap-x, 16px) / 100); } @container uich-gf (max-width: 560px) { .uich-gf-ds-rep__field.uich-gf-has-width { flex-basis: 100%; } } .uich-gf-ds-rep__foot { display: flex; align-items: center; gap: var(--uc-space-10); } .uich-gf-ds-help { margin: 0; font-size: var(--uc-text-xs); color: var(--uc-text-muted); } .uich-gf-ds-req { color: var(--uc-danger); } /* ── Pickers: post object, page link, user (searchable, in the dark DS dropdown) ── */ .uich-gf-ds-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } button.uich-gf-ds-pop__opt { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--uc-space-8); width: 100%; padding: var(--uc-space-6) var(--uc-space-8); border-radius: var(--uc-radius-6); font-size: var(--uc-text-sm); cursor: pointer; } button.uich-gf-ds-pop__opt:hover, button.uich-gf-ds-pop__opt:focus-visible { background: rgba(255, 255, 255, 0.08); } button.uich-gf-ds-pop__opt[aria-selected="true"] { font-weight: var(--uc-weight-medium); } .uich-gf-ds-pop__opt.is-muted { color: var(--uc-text-muted); } .uich-gf-ds-pop__group { margin: var(--uc-space-8) 0 var(--uc-space-2); padding: 0 var(--uc-space-8); font-size: var(--uc-text-xs); font-weight: var(--uc-weight-medium); color: var(--uc-text-muted); } .uich-gf-ds-pop__empty { display: flex; align-items: center; gap: var(--uc-space-6); } .uich-gf-ds-pop__more { all: unset; box-sizing: border-box; display: block; width: 100%; padding: var(--uc-space-8); text-align: center; border-radius: var(--uc-radius-6); font-size: var(--uc-text-xs); font-weight: var(--uc-weight-medium); color: var(--uc-text-muted); cursor: pointer; } .uich-gf-ds-pop__more:hover, .uich-gf-ds-pop__more:focus-visible { color: var(--uc-text-strong); background: rgba(255, 255, 255, 0.08); } /* A long term list scrolls instead of pushing the box down. */ .uich-gf-ds-scrollbox { max-height: 232px; overflow-y: auto; padding: var(--uc-space-10) var(--uc-space-12); border-radius: var(--uc-radius-md); box-shadow: inset 0 0 0 1px var(--uc-border); } /* Password: the show / hide button sits in the field's trailing slot. */ .uich-gf-ds-password[class] { padding-right: var(--uc-space-2); } /* ── Relationship ──────────────────────────────────────────────────────────── */ .uich-gf-ds-rel { display: flex; flex-direction: column; gap: var(--uc-space-8); min-width: 0; } .uich-gf-ds-rel__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uc-space-8); } .uich-gf-ds-rel__search { flex: 1 1 240px; min-width: 0; } .uich-gf-ds-rel__pt[class], .uich-gf-ds-rel__tax[class] { flex: 0 0 auto; width: 200px; } .uich-gf-ds-rel__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uich-gf-gap-x, 16px); } @container uich-gf (max-width: 560px) { .uich-gf-ds-rel__cols { grid-template-columns: minmax(0, 1fr); } } .uich-gf-ds-rel__col { display: flex; flex-direction: column; min-width: 0; border-radius: var(--uc-radius-md); background: var(--uc-surface-raised); box-shadow: inset 0 0 0 1px var(--uc-border); overflow: hidden; } .uich-gf-ds-rel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--uc-space-8); height: 36px; padding: 0 var(--uc-space-12); border-bottom: 1px solid var(--uc-border-subtle); font-size: var(--uc-text-xs); font-weight: var(--uc-weight-medium); color: var(--uc-text-muted); } .uich-gf-ds-rel__count { color: var(--uc-text-muted); } .uich-gf-ds-rel__list { height: 240px; overflow-y: auto; padding: var(--uc-space-4); } .uich-gf-ds-rel__list .uich-gf-ds-pop__empty { padding: var(--uc-space-10) var(--uc-space-8); } .uich-gf-ds-rel__list .uich-gf-ds-pop__more { color: var(--uc-text-muted); } .uich-gf-ds-rel__list .uich-gf-ds-pop__more:hover { color: var(--uc-text-strong); background: var(--uc-surface-sunken); } .uich-gf-ds-rel__item { box-sizing: border-box; display: flex; align-items: center; gap: var(--uc-space-8); width: 100%; min-height: 32px; padding: var(--uc-space-4) var(--uc-space-8); border: 0; border-radius: var(--uc-radius-6); background: none; font: inherit; font-size: var(--uc-text-sm); color: var(--uc-text-strong); text-align: left; } button.uich-gf-ds-rel__item { cursor: pointer; } button.uich-gf-ds-rel__item > svg { flex: none; margin-left: auto; color: var(--uc-text-subtle); opacity: 0; } button.uich-gf-ds-rel__item:hover:not(:disabled), button.uich-gf-ds-rel__item:focus-visible { background: var(--uc-surface-sunken); } button.uich-gf-ds-rel__item:hover:not(:disabled) > svg, button.uich-gf-ds-rel__item:focus-visible > svg { opacity: 1; } button.uich-gf-ds-rel__item:focus-visible { outline: 1px solid var(--uc-brand); outline-offset: -1px; } button.uich-gf-ds-rel__item:disabled { cursor: default; color: var(--uc-text-subtle); } button.uich-gf-ds-rel__item.is-picked > svg { opacity: 1; color: var(--uc-text-muted); } .uich-gf-ds-rel__item.is-selected { padding-right: var(--uc-space-2); } .uich-gf-ds-rel__item.is-selected:hover { background: var(--uc-surface-sunken); } .uich-gf-ds-rel__tools { flex: none; display: inline-flex; margin-left: auto; opacity: 0; } .uich-gf-ds-rel__item.is-selected:hover .uich-gf-ds-rel__tools, .uich-gf-ds-rel__item.is-selected:focus-within .uich-gf-ds-rel__tools { opacity: 1; } .uich-gf-ds-rel__thumb { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--uc-radius-4); -o-object-fit: cover; object-fit: cover; background: var(--uc-surface-sunken); color: var(--uc-text-subtle); } /* * ── On / off fields as setting rows ─────────────────────────────────────────── * Label and help on the left, the switch or checkbox on the right, in a bordered row; consecutive * full-width ones join into one list with hairlines between (the settings-list pattern). The row's * padding is the grid gutter, so the outline is a pseudo-element inset by that gutter. */ @supports (grid-template-rows: subgrid) { .uich-gf-metabox > .uich-gf-row-ds.uich-gf-labels-top:has(> .uich-gf-wrap-true_false) { --_inset-x: calc(var(--uich-gf-gap-x, 16px) / 2); --_inset-b: var(--uich-gf-gap-y, 24px); position: relative; grid-template-rows: auto auto; grid-template-columns: minmax(0, 1fr) auto; align-content: center; -moz-column-gap: var(--uc-space-16); column-gap: var(--uc-space-16); min-height: 56px; padding: var(--uc-space-12) calc(var(--_inset-x) + var(--uc-space-16)) calc(var(--_inset-b) + var(--uc-space-12)); } .uich-gf-metabox > .uich-gf-row-ds.uich-gf-labels-top:has(> .uich-gf-wrap-true_false)::before { content: ""; position: absolute; inset: 0 var(--_inset-x) var(--_inset-b); border: 1px solid var(--uc-border); border-radius: var(--uc-radius-md); pointer-events: none; } .uich-gf-metabox > .uich-gf-row-ds.uich-gf-labels-top:has(> .uich-gf-wrap-true_false) > label.uich-gf-label { grid-row: 1; grid-column: 1; align-self: end; } .uich-gf-metabox > .uich-gf-row-ds.uich-gf-labels-top:has(> .uich-gf-wrap-true_false) > .uich-gf-instruction { grid-row: 2; grid-column: 1; margin: 2px 0 0; } .uich-gf-metabox > .uich-gf-row-ds.uich-gf-labels-top:has(> .uich-gf-wrap-true_false) > .uich-gf-input-wrap { grid-row: 1 / span 2; grid-column: 2; align-self: center; margin: 0; } /* No help text: the label alone, centred on the control. */ .uich-gf-metabox > .uich-gf-row-ds.uich-gf-labels-top:has(> .uich-gf-wrap-true_false):not(:has(> .uich-gf-instruction)) > label.uich-gf-label { grid-row: 1 / span 2; align-self: center; } /* The text that names the state reads first, the control sits at the row's right edge. */ .uich-gf-metabox > .uich-gf-row-ds.uich-gf-labels-top:has(> .uich-gf-wrap-true_false) .uich-gf-ds-bool { flex-direction: row-reverse; color: var(--uc-text-muted); } /* Consecutive full-width ones: one list. */ .uich-gf-metabox > .uich-gf-row-ds.uich-gf-labels-top:not(.uich-gf-has-width):has(> .uich-gf-wrap-true_false):has(+ .uich-gf-row-ds.uich-gf-labels-top:not(.uich-gf-has-width):not(.uich-gf-cond-hidden) > .uich-gf-wrap-true_false) { --_inset-b: 0px; } .uich-gf-metabox > .uich-gf-row-ds.uich-gf-labels-top:not(.uich-gf-has-width):has(> .uich-gf-wrap-true_false):has(+ .uich-gf-row-ds.uich-gf-labels-top:not(.uich-gf-has-width):not(.uich-gf-cond-hidden) > .uich-gf-wrap-true_false)::before { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .uich-gf-metabox > .uich-gf-row-ds.uich-gf-labels-top:not(.uich-gf-has-width):has(> .uich-gf-wrap-true_false) + .uich-gf-row-ds.uich-gf-labels-top:not(.uich-gf-has-width):has(> .uich-gf-wrap-true_false)::before { border-top-color: var(--uc-border-subtle); border-top-left-radius: 0; border-top-right-radius: 0; } } /* Repeater sub-fields: the same 8px from label to control as the box's own rows. */ .uich-gf-ds-rep__field { gap: var(--uich-gf-label-gap, 8px); } /* Right after a reorder: the moved post stays highlighted with its buttons; other rows keep their buttons off (and unclickable) until the pointer moves. */ .uich-gf-ds-rel__item.is-selected.is-moved { background: var(--uc-surface-sunken); } .uich-gf-ds-rel__item.is-selected.is-moved .uich-gf-ds-rel__tools { opacity: 1; } .uich-gf-ds-rel__list.is-moving .uich-gf-ds-rel__item.is-selected:not(.is-moved):hover { background: none; } .uich-gf-ds-rel__list.is-moving .uich-gf-ds-rel__item.is-selected:not(.is-moved) .uich-gf-ds-rel__tools { opacity: 0; pointer-events: none; } /* Pointer use has no focus outline, even when a menu restores :focus-visible. * Scope is UI chrome only, never visitor content or third-party WP controls. * Preserve base inset borders, elevation, hover, checked and invalid states. * Keyboard navigation removes this override and uses component focus styles. */ :root[data-uc-input-mode='pointer'] :is(.uipb-studio, #uichemy-composer-floating-panel, #smart-html-floating-panel, .uich-composer-host, .uich-tw, .uich-rp, .uich-portal-root, .uc-scope, .uc-content, .uc-chrome, .uc-portal, .uc-pop-dark) :is(:focus, :focus-visible, :focus-within), :root[data-uc-input-mode='pointer'] :is(.uc-scope, .uc-content, .uc-chrome, .uc-portal, .uc-pop-dark):is(:focus, :focus-visible, :focus-within) { outline: none !important; --tw-ring-shadow: 0 0 #0000 !important; --tw-ring-offset-shadow: 0 0 #0000 !important; } /* Button, raised, physically-lit control on uc- tokens. */ .oDgO9tRe_mBUNaW0e6V8 { --_h: var(--uc-btn-h, var(--uc-control-h-md)); --_px: var(--uc-btn-px, var(--uc-space-16)); --_fs: var(--uc-text-base); display: inline-flex; align-items: center; justify-content: center; gap: var(--uc-space-8); height: var(--_h); padding: 0 var(--_px); font-family: var(--uc-font-sans); --uich-ff: var(--uc-font-sans); font-size: var(--_fs); font-weight: var(--uc-btn-weight, var(--uc-weight-medium)); line-height: 1; white-space: nowrap; text-decoration: none; border: none; border-radius: var(--uc-btn-radius, var(--uc-radius-md)); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; position: relative; isolation: isolate; transition: background var(--uc-dur-fast) var(--uc-ease-standard), box-shadow var(--uc-dur-fast) var(--uc-ease-standard), transform var(--uc-dur-fast) var(--uc-ease-standard), color var(--uc-dur-fast) var(--uc-ease-standard); } .oDgO9tRe_mBUNaW0e6V8:focus:not(:focus-visible) { outline: none; } .oDgO9tRe_mBUNaW0e6V8:focus-visible { outline: 2px solid var(--uc-ring); outline-offset: -2px; } .oDgO9tRe_mBUNaW0e6V8:active:not(:disabled) { transform: translateY(0.5px); } .oDgO9tRe_mBUNaW0e6V8:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* ---- Sizes ---------------------------------------------------------------- */ .qLkzuQUQ_X4w0fceh2CB { --_h: var(--uc-control-h-sm); --_px: var(--uc-space-12); --_fs: var(--uc-text-sm); } .NAPRKbEZKONQ8AdACBzs { --_h: var(--uc-btn-h, var(--uc-control-h-md)); --_px: var(--uc-btn-px, var(--uc-space-16)); --_fs: var(--uc-text-base); } .qeRuCFz3SPTfPQEz8Eur { --_h: var(--uc-control-h-lg); --_px: var(--uc-space-20); --_fs: var(--uc-text-md); } .GW0xiH4qJYyLFExAe7Cc { padding: 0; width: var(--_h); flex-shrink: 0; } .GW0xiH4qJYyLFExAe7Cc > svg { display: block; flex-shrink: 0; } /* ---- Variant: solid ------------------------------------------------------- */ .nx448XS4JGEoBYKJ_Xeh { color: var(--uc-brand-on); background: var(--_fill, var(--uc-brand)); background-image: var(--uc-sheen); box-shadow: var(--_shadow, var(--uc-shadow-control-brand)); } /* Keep the fill in every interactive state. The composer's host-theme reset (composer-isolation.css, (0,2,0) `background: none` on :hover/:focus/:active) outranks the lone `.solid` class, so a hovered or focused solid brand/danger button lost its fill and showed as an empty square. Same (0,2,0), later source order, so this wins. */ .nx448XS4JGEoBYKJ_Xeh:is(:hover, :focus, :focus-visible, :active) { background-color: var(--_fill, var(--uc-brand)); } .nx448XS4JGEoBYKJ_Xeh:hover:not(:disabled) { background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)), var(--uc-sheen); } .nx448XS4JGEoBYKJ_Xeh:active:not(:disabled) { background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), var(--uc-sheen); box-shadow: var(--uc-shadow-control-pressed); } /* neutral solid = the B&W PRIMARY: high-contrast inverse fill that flips per surface (dark on light content, light on dark chrome/content). */ .nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4 { color: var(--uc-inverse-fg); background: var(--uc-inverse-bg); box-shadow: var(--uc-shadow-control); } /* grey wash nudges black->lighter and white->darker, so hover reads on both */ .nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:hover:not(:disabled) { background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.16), rgba(128, 128, 128, 0.16)); } .nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:active:not(:disabled) { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.14)); } /* ---- Variant: soft -------------------------------------------------------- */ .lSxxR32yQ7uBGKoReA0d { color: var(--_fg, var(--uc-brand-fg)); background: var(--_soft, var(--uc-brand-soft)); background-image: var(--uc-sheen); box-shadow: inset 0 0 0 1px var(--_border, var(--uc-brand-border)), var(--_soft-shadow, var(--uc-shadow-1)); } .lSxxR32yQ7uBGKoReA0d:hover:not(:disabled) { background-image: var(--uc-sheen), linear-gradient(var(--_glow, var(--uc-brand-glow-hover)), var(--_glow, var(--uc-brand-glow-hover))); } /* ---- Variant: outline (raised secondary) ---------------------------------- */ .uEkFBKngy5ABC8BavrlF { color: var(--_fg, var(--uc-brand-fg)); background: var(--uc-surface-control); background-image: var(--uc-sheen); box-shadow: inset 0 0 0 1px var(--_border, var(--uc-border-subtle)), var(--uc-shadow-raised); } .uEkFBKngy5ABC8BavrlF.P6iUGKQ9CuUmhTY4IDx4 { color: var(--uc-text-strong); } .uEkFBKngy5ABC8BavrlF:hover:not(:disabled) { background-image: var(--uc-sheen), linear-gradient(var(--_glow, var(--uc-brand-glow-hover)), var(--_glow, var(--uc-brand-glow-hover))); } /* ---- Variant: ghost ------------------------------------------------------- */ .ZShdqkg6btw_9kcxTgYx { color: var(--_fg, var(--uc-brand-fg)); background: transparent; } .ZShdqkg6btw_9kcxTgYx.P6iUGKQ9CuUmhTY4IDx4 { color: var(--uc-text); } /* The pointer target stays full size; only the wash is inset. This avoids a tall grey tile swallowing small chevrons and adjacent split controls. */ .ZShdqkg6btw_9kcxTgYx::before { content: ""; position: absolute; inset: 3px; border-radius: max(2px, calc(var(--uc-btn-radius, var(--uc-radius-md)) - 2px)); background: var(--_glow, var(--uc-brand-glow-hover)); opacity: 0; pointer-events: none; z-index: -1; transition: opacity var(--uc-dur-fast) var(--uc-ease-standard); } .ZShdqkg6btw_9kcxTgYx:hover:not(:disabled) { background: transparent; color: var(--uc-text-strong); } .ZShdqkg6btw_9kcxTgYx:is(:hover, [data-state="open"]):not(:disabled)::before { opacity: 1; } /* ---- Hold the fill through hover / focus / press --------------------------- The dashboard's theme-isolation reset (composer-isolation.css) clears `background` on every link and button under the pointer or focus at (0,2,0), which outranks the single-class variant rules above. A Button rendered as a link (asChild, e.g. "Upgrade to Pro") then went transparent on hover: white text on white. These restate each variant's fill at (0,3,0)+ for those states. */ .nx448XS4JGEoBYKJ_Xeh:is(:hover, :focus, :focus-visible, :focus-within, :active):not(:disabled) { background-color: var(--_fill, var(--uc-brand)); } .nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:is(:hover, :focus, :focus-visible, :focus-within, :active):not(:disabled) { background-color: var(--uc-inverse-bg); } .lSxxR32yQ7uBGKoReA0d:is(:hover, :focus, :focus-visible, :focus-within, :active):not(:disabled) { background-color: var(--_soft, var(--uc-brand-soft)); } .uEkFBKngy5ABC8BavrlF:is(:hover, :focus, :focus-visible, :focus-within, :active):not(:disabled) { background-color: var(--uc-surface-control); } /* The same for a disabled button: its fill stays, dimmed by .button:disabled. Without these the reset left a disabled solid button (the chat's Send with nothing typed) transparent on hover, its white icon on the white panel. */ .nx448XS4JGEoBYKJ_Xeh:is(:hover, :focus, :focus-visible, :focus-within, :active):disabled { background-color: var(--_fill, var(--uc-brand)); } .nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:is(:hover, :focus, :focus-visible, :focus-within, :active):disabled { background-color: var(--uc-inverse-bg); } .lSxxR32yQ7uBGKoReA0d:is(:hover, :focus, :focus-visible, :focus-within, :active):disabled { background-color: var(--_soft, var(--uc-brand-soft)); } .uEkFBKngy5ABC8BavrlF:is(:hover, :focus, :focus-visible, :focus-within, :active):disabled { background-color: var(--uc-surface-control); } /* ---- Tones (feed the --_* channels the variants read) --------------------- */ .BDHV_0n6wKsmpw3p3s1i { --_fill: var(--uc-brand); --_fg: var(--uc-brand-fg); --_soft: var(--uc-brand-soft); --_border: var(--uc-brand-border); --_glow: var(--uc-brand-glow-hover); --_shadow: var(--uc-shadow-control-brand); } .keLGBcvAq5oELzJZ2XbZ { --_fill: var(--uc-success); --_fg: var(--uc-success-fg); --_soft: var(--uc-success-soft); --_border: var(--uc-success-border); --_glow: var(--uc-success-glow-hover); --_shadow: var(--uc-shadow-control-brand); } .qM62Gv6j4BSYSajMwnqk { --_fill: var(--uc-danger); --_fg: var(--uc-danger-fg); --_soft: var(--uc-danger-soft); --_border: var(--uc-danger-border); --_glow: var(--uc-danger-glow-hover); --_shadow: var(--uc-shadow-control-brand); } .P6iUGKQ9CuUmhTY4IDx4 { --_fg: var(--uc-text-strong); --_soft: var(--uc-button-soft-neutral-bg, var(--uc-surface-sunken)); --_soft-shadow: var(--uc-button-soft-neutral-shadow, var(--uc-shadow-1)); --_border: var(--uc-border-strong); --_glow: rgba(128, 128, 128, 0.10); } /* ---- As a link (asChild ) --------------------------------------------- * wp-admin styles `a:hover, a:active` (blue text) and `a:focus` (blue text + a 2px blue box-shadow) at 0,1,1, which out-ranks the variant colours and shadows above (0,1,0). Re-assert them for anchors so a link button looks exactly like the button it is in every state. */ a.nx448XS4JGEoBYKJ_Xeh:is(:hover, :focus, :active, :visited) { color: var(--uc-brand-on); } a.nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:is(:hover, :focus, :active, :visited) { color: var(--uc-inverse-fg); } a.lSxxR32yQ7uBGKoReA0d:is(:hover, :focus, :active, :visited), a.uEkFBKngy5ABC8BavrlF:is(:hover, :focus, :active, :visited) { color: var(--_fg, var(--uc-brand-fg)); } a.uEkFBKngy5ABC8BavrlF.P6iUGKQ9CuUmhTY4IDx4:is(:hover, :focus, :active, :visited) { color: var(--uc-text-strong); } a.ZShdqkg6btw_9kcxTgYx:is(:focus, :active, :visited) { color: var(--_fg, var(--uc-brand-fg)); } a.ZShdqkg6btw_9kcxTgYx.P6iUGKQ9CuUmhTY4IDx4:is(:focus, :active, :visited) { color: var(--uc-text); } a.nx448XS4JGEoBYKJ_Xeh:focus { box-shadow: var(--_shadow, var(--uc-shadow-control-brand)); } a.nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:focus { box-shadow: var(--uc-shadow-control); } a.lSxxR32yQ7uBGKoReA0d:focus { box-shadow: inset 0 0 0 1px var(--_border, var(--uc-brand-border)), var(--_soft-shadow, var(--uc-shadow-1)); } a.uEkFBKngy5ABC8BavrlF:focus { box-shadow: inset 0 0 0 1px var(--_border, var(--uc-border-subtle)), var(--uc-shadow-raised); } a.ZShdqkg6btw_9kcxTgYx:focus { box-shadow: none; } /* ---- Loading -------------------------------------------------------------- */ .pc70O1Y6HdzT607YK_OL { color: transparent !important; pointer-events: none; } .rtWcge6eoBiDmFoHo4gD { position: absolute; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; color: var(--uc-brand-on); animation: qUXtsmRZhV0_Rb8A9qFD 0.6s linear infinite; } .lSxxR32yQ7uBGKoReA0d .rtWcge6eoBiDmFoHo4gD, .uEkFBKngy5ABC8BavrlF .rtWcge6eoBiDmFoHo4gD, .ZShdqkg6btw_9kcxTgYx .rtWcge6eoBiDmFoHo4gD { color: var(--uc-text); } .nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4 .rtWcge6eoBiDmFoHo4gD { color: var(--uc-inverse-fg); } @keyframes qUXtsmRZhV0_Rb8A9qFD { to { transform: rotate(360deg); } } /* ---- Surface: dark -------------------------------------------------------- * `surface="dark"`, remaps the semantic tokens the variants read to the fixed dark-chrome values (mirrors `.uc-chrome` in tokens.css). Lets a single Button render correctly on the app's dark header / sidebar / rails WITHOUT needing a `.uc-chrome` ancestor (the app chrome is styled with UiChemy's own app tokens, not the DS scope). Orthogonal to variant + tone: every variant flips automatically, solid-neutral becomes a white B&W primary, outline/ghost go light-on-dark, brand stays orange. */ .VnThCro2n02iRphzomVo { --uc-surface-sunken: #101010; --uc-surface-control: rgba(255, 255, 255, 0.05); --uc-button-soft-neutral-bg: var(--uc-surface-control); --uc-button-soft-neutral-shadow: var(--uc-shadow-raised); --uc-text-strong: #FFFFFF; --uc-text: #A3A3A3; /* B&W primary flips to a light fill with dark ink on dark chrome */ --uc-inverse-bg: #F5F5F5; --uc-inverse-fg: #171717; --uc-border-subtle: #333333; --uc-border: #404040; --uc-border-strong: #525252; --uc-brand-border: var(--uc-border); --uc-ring: #A3A3A3; /* per-family fg/soft readable on dark */ --uc-brand-fg: #EDEDED; --uc-brand-soft: rgba(255, 255, 255, 0.12); --uc-success-fg: #A7EAAA; --uc-success-soft: rgba(46, 163, 67, 0.20); --uc-danger-fg: #FDC9C6; --uc-danger-soft: rgba(246, 82, 88, 0.20); } /* The always-dark chip: the floating canvas toolbar's standalone button as a reusable control. Reads the SAME --uc-toolbar tokens (with the same literal fallbacks), so the two stay identical; the component adds `uc-pop-dark` alongside this class, which is what scopes those tokens to dark values on any page theme. */ .cOkswkXgGqdwukDtzxre { background: var(--uc-toolbar-bg, var(--uc-surface-raised, #242424)); color: var(--uc-toolbar-fg, var(--uc-text, #F5F5F5)); box-shadow: inset 0 0 0 1px var(--uc-toolbar-border, rgba(255, 255, 255, 0.08)); border-radius: var(--uc-toolbar-radius, var(--uc-radius-lg, 12px)); } .cOkswkXgGqdwukDtzxre:hover:not(:disabled) { background: var(--uc-toolbar-hover-bg, var(--uc-surface-overlay, #2E2E2E)); color: var(--uc-toolbar-fg, var(--uc-text-strong, #FFFFFF)); } .cOkswkXgGqdwukDtzxre:focus-visible { outline: 2px solid var(--uc-ring, rgba(245, 245, 245, 0.55)); outline-offset: -2px; } /* The standalone dark chip already owns its hover fill. */ .cOkswkXgGqdwukDtzxre::before { content: none; } /* Compact grouping adapted from Hirael; global radii, MIT notice in FloatingToolbar.tsx. */ .VDCgP2TXcbIH83qTz1iU { display: inline-flex; align-items: center; gap: var(--uc-space-8, 8px); font-family: var(--uc-font-sans, system-ui, sans-serif); --uich-ff: var(--uc-font-sans, system-ui, sans-serif); font-size: var(--uc-text-base, 14px); color-scheme: inherit; color: var(--uc-toolbar-fg, var(--uc-text, CanvasText)); pointer-events: none; } /* uc-content supplies light tokens, not an extra rectangular wrapper surface. */ .VDCgP2TXcbIH83qTz1iU.VDCgP2TXcbIH83qTz1iU { background: transparent; } .VDCgP2TXcbIH83qTz1iU[data-theme="dark"] { color-scheme: dark; } .VDCgP2TXcbIH83qTz1iU[data-theme="light"] { color-scheme: light; } /* Rebind to the current surface, not a computed dark toolbar token inherited from an ancestor. Light uses the DS content scope; inherit adds no scope. */ .VDCgP2TXcbIH83qTz1iU:not([data-theme="dark"]) { --uc-toolbar-bg: var(--uc-surface-raised, Canvas); --uc-toolbar-fg: var(--uc-text, CanvasText); --uc-toolbar-border: var(--uc-border, ButtonBorder); --uc-toolbar-hover-bg: var(--uc-surface-hover, ButtonFace); } .VDCgP2TXcbIH83qTz1iU.IdW9qftPRIpxufX1u1zB { --uc-toolbar-height: var(--uc-toolbar-compact-height, var(--uc-control-h-lg, 40px)); --uc-toolbar-action-size: var(--uc-toolbar-compact-action-size, var(--uc-control-h-md, 32px)); --uc-toolbar-dismiss-size: var(--uc-toolbar-compact-action-size, var(--uc-control-h-md, 32px)); /* Compact changes density only. Surface/action radii stay global. */ } .wcjtBjSJwTWRpPftzjvQ, .Dki1FM4eHY9MKK_GAGym, .j4Axbcky5LgpsKgn4WAb { background: var(--uc-toolbar-bg, var(--uc-surface-raised, Canvas)); border: 1px solid var(--uc-toolbar-border, var(--uc-border, ButtonBorder)); box-shadow: var(--uc-toolbar-shadow, 0 16px 44px -12px rgb(0 0 0 / 48%), 0 4px 12px -4px rgb(0 0 0 / 32%)); } .wcjtBjSJwTWRpPftzjvQ { pointer-events: auto; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--uc-space-4, 4px); height: var(--uc-toolbar-height, 48px); padding: 0 var(--uc-space-6, 6px); /* Compact and dock geometry share the global surface radius. */ border-radius: var(--uc-toolbar-radius, var(--uc-radius-lg, 12px)); overflow: visible; } .IdW9qftPRIpxufX1u1zB .wcjtBjSJwTWRpPftzjvQ { padding-inline: var(--uc-space-6, 6px); gap: var(--uc-space-6, 6px); } .VDCgP2TXcbIH83qTz1iU.Ti6l0uHmIPYJMAFtJph6 { gap: 0; height: auto; padding: 0; border: 0; box-shadow: none; } .VDCgP2TXcbIH83qTz1iU.Ti6l0uHmIPYJMAFtJph6 .wcjtBjSJwTWRpPftzjvQ { height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .Nt2ipeZvcBNJCdMb5cZ_, .Dki1FM4eHY9MKK_GAGym { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; margin: 0; padding: 0; font: inherit; --uich-ff: inherit; display: grid; place-items: center; cursor: pointer; } /* Actions share the global Button radius; the ✕ matches the bar beside it. */ .Nt2ipeZvcBNJCdMb5cZ_ { border-radius: var(--uc-toolbar-action-radius, var(--uc-btn-radius, var(--uc-radius-md, 8px))); } .Dki1FM4eHY9MKK_GAGym { border-radius: var(--uc-toolbar-radius, var(--uc-radius-lg, 12px)); } .Nt2ipeZvcBNJCdMb5cZ_ { position: relative; flex: none; /* Fixed size — the dock magnification was removed. */ width: var(--uc-toolbar-action-size, 34px); height: var(--uc-toolbar-action-size, 34px); border: 0; background: transparent; color: var(--uc-toolbar-fg, var(--uc-text, CanvasText)); /* The active pill slides between buttons on this transition. */ transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease; /* Selected look = the DS dark gradient button: a dark fill with the sheen gradient on top and a hairline stroke + raised shadow. The gradient is a background-IMAGE, so it also survives the composer's theme button-paint guard (which only zeroes background-color). Defined once, reused by every :active rule below so the host-reset guards stay in sync. */ --uc-tb-active-bg: var(--uc-sheen, linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.03))), var(--uc-surface-sunken, ButtonFace); --uc-tb-active-ring: inset 0 0 0 1px var(--uc-border-strong, ButtonBorder), var(--uc-shadow-raised, 0 1px 2px rgba(0, 0, 0, 0.30)); } .Nt2ipeZvcBNJCdMb5cZ_:hover, .Dki1FM4eHY9MKK_GAGym:hover { background: var(--uc-toolbar-hover-bg, var(--uc-surface-hover, ButtonFace)); border-color: var(--uc-toolbar-border, var(--uc-border, ButtonBorder)); box-shadow: var(--uc-toolbar-shadow, 0 6px 16px -6px rgb(0 0 0 / 48%)); color: var(--uc-text-strong, CanvasText); } /* An action sits inside the bar, so its hover is the wash alone: the bar's own float shadow on a 32px button read as a grey haze around it. The ✕ and the handle's pill float by themselves and keep it. */ .Nt2ipeZvcBNJCdMb5cZ_:hover { box-shadow: none; } .Nt2ipeZvcBNJCdMb5cZ_:focus-visible, .Dki1FM4eHY9MKK_GAGym:focus-visible { outline: 2px solid var(--uc-ring, Highlight); outline-offset: -2px; } /* Selected = a dark, inset "stroked" button (the global dark icon button look), not a light disc. The stroke is the visible part; the fill sits a touch below the bar so it reads as pressed-in. */ .Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ { background: var(--uc-tb-active-bg); box-shadow: var(--uc-tb-active-ring); color: var(--uc-text-strong, CanvasText); } .Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ:hover { background: var(--uc-tb-active-bg); } /* A disabled action says so under the pointer. `default` read as "this button simply does nothing" — the arrow never changes, so a press that was ignored looked like a press that was missed. */ .Nt2ipeZvcBNJCdMb5cZ_:disabled, .Nt2ipeZvcBNJCdMb5cZ_:disabled:hover { opacity: 1; color: var(--uc-text-muted, GrayText); background: transparent; cursor: not-allowed; } /* Active AND disabled is work in progress — Save during a flush is the case this exists for. `progress` was the old choice and it is the wrong signal here: it means "busy, but you may still interact", while the button is in fact refusing the click. Saves are also short, so a cursor that only reads as a brief flicker told the user nothing. */ .Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ:disabled, .Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ:disabled:hover { background: var(--uc-tb-active-bg); box-shadow: var(--uc-tb-active-ring); color: var(--uc-text-strong, CanvasText); cursor: not-allowed; } .Nt2ipeZvcBNJCdMb5cZ_ svg, .Dki1FM4eHY9MKK_GAGym svg { width: auto !important; height: auto !important; color: inherit !important; stroke: currentColor !important; fill: none !important; opacity: 1 !important; filter: none !important; max-width: none !important; max-height: none !important; display: block; } .Ra_BBvLLe4yROxlrLqYt { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--uc-space-6, 6px); } .vPZZP6vGHUVlSQhkRpOh { flex: 0 0 auto; width: 1px; height: 20px; margin: 0 var(--uc-space-4, 4px); background: var(--uc-toolbar-border, var(--uc-border, ButtonBorder)); } .jLW95_rgGsGmyK7hLMfr::after { content: ""; position: absolute; top: 5px; inset-inline-end: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--uc-toolbar-indicator, var(--uc-brand, #fd6a35)); box-shadow: 0 0 0 1.5px var(--uc-toolbar-bg, var(--uc-surface-raised, Canvas)); pointer-events: none; } .Dki1FM4eHY9MKK_GAGym { pointer-events: auto; flex: none; width: var(--uc-toolbar-dismiss-size, 44px); height: var(--uc-toolbar-dismiss-size, 44px); color: var(--uc-toolbar-fg, var(--uc-text, CanvasText)); transition: background-color 150ms ease, color 150ms ease, transform 100ms ease; } .Dki1FM4eHY9MKK_GAGym:active { transform: scale(.94); } /* The ✕ is a