diff --git a/AGENTS.md b/AGENTS.md index 867769c..eeed76e 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,15 +1,8 @@ -# UI Design Code — Agent Instructions +# Bible — Instructions for Codex -Read and follow `bible/README.md` as the architecture source of truth. +This repository is the shared engineering rules library for all projects. -This repository is a submodule-first design kit for Go web projects. Keep shared assets in -`kit/` generic and reusable; project branding belongs in host repositories. - -## Rules - -- Architecture and integration contracts live in `bible/` (English only). -- Significant decisions go to `bible/decisions/10-decisions.md`. -- Public bundle contracts live in `exports/`; keep them in sync with `kit/`. -- Prefer updating shared templates/patterns over adding host-specific logic here. -- Do not broaden the repository scope beyond the currently approved area unless the user - explicitly requests it; when in doubt, stay focused on the current scope. +Rules live in `kit/patterns/` as `contract.md` files. When adding or updating a rule: +- Find the relevant existing contract and edit it, or create a new `kit/patterns//contract.md`. +- Do not create rules outside `kit/patterns/`. +- Do not expand scope beyond engineering rules and patterns. diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index f4f2a5d..0000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,27 +0,0 @@ -# Changelog - -All notable changes to the public design kit surface are documented here. - -## Unreleased - -### Added - -- Submodule-first repository layout (`kit/`, `exports/`, `tools/designsync`, `demo/`) -- Initial bundle manifests (`ai-rules`, `bible-core`, `go-web-skeleton`, `ui-pattern-table`, `ui-pattern-modal`) -- `designsync` MVP CLI (`list`, `validate`, `plan`, `apply`) -- Demo app (`demo/`) with bundle catalog UI -- Design single-source index: `bible/architecture/design-canon-map.md` -- Active reusable Vapor theme module in `kit/patterns/theme-vapor` (CSS + icon sprite) -- New export bundle: `ui-theme-vapor` -- Vapor shell palette catalog with 9 preset IDs for header/accent colors and tokenized shell height - (`kit/patterns/theme-vapor/palette-catalog.md`) - -### Changed - -- Canonical baseline docs aligned to `Vapor Soft` / `Vapor Night` as active demo/scaffold style. -- Aqua module/docs clarified as legacy archive/reference (not active baseline). -- Table-management docs clarified as theme-agnostic geometry/semantics contract. -- Vapor shell CSS now supports reusable preset selection via `data-vapor-shell` and shared - `--shell-*` tokens across default, auto-dark, and explicit `data-theme` modes. -- Demo/scaffold runtime now includes a deterministic vapor preset selection strategy: - `?vapor_shell` → `localStorage["vapor_shell"]` → markup default. diff --git a/CLAUDE.md b/CLAUDE.md index fdbd22d..2e7a7f0 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,17 +1,8 @@ -# UI Design Code — Instructions for Claude +# Bible — Instructions for Claude -Read and follow the project Bible before making any changes: +This repository is the shared engineering rules library for all projects. -**[`bible/README.md`](bible/README.md)** - -The Bible is the single source of truth for architecture, public integration contracts, -bundle manifests, and reusable pattern conventions. - -Every significant architectural decision must be recorded in -[`bible/decisions/10-decisions.md`](bible/decisions/10-decisions.md). - -If a change affects `kit/`, `exports/`, or `tools/designsync`, update the relevant Bible -docs and `CHANGELOG.md` in the same change set. - -Do not expand the repository scope beyond the currently approved work area unless the user -explicitly requests that expansion. +Rules live in `kit/patterns/` as `contract.md` files. When adding or updating a rule: +- Find the relevant existing contract and edit it, or create a new `kit/patterns//contract.md`. +- Do not create rules outside `kit/patterns/`. +- Do not expand scope beyond engineering rules and patterns. diff --git a/VERSIONING.md b/VERSIONING.md deleted file mode 100644 index 9cceaba..0000000 --- a/VERSIONING.md +++ /dev/null @@ -1,24 +0,0 @@ -# Versioning Policy - -This repository uses `v0.x.y` tags while the public bundle contracts are stabilizing. - -## Public Compatibility Surface - -Breaking changes are changes to: - -- `kit/` file paths or template variables -- `exports/` manifest schema or bundle ids -- `tools/designsync` CLI behavior/flags - -## Tagging Rules (`v0.x.y`) - -- `y` (patch): fixes, docs updates, non-breaking improvements -- `x` (minor): any breaking public-surface change during `0.x` - -## Release Checklist - -1. Update `CHANGELOG.md` -2. Validate manifests (`designsync validate`) -3. Run tests (`go test ./...` and `cd demo && go test ./...`) -4. Tag release - diff --git a/bible/README.md b/bible/README.md deleted file mode 100644 index 7a7eef9..0000000 --- a/bible/README.md +++ /dev/null @@ -1,57 +0,0 @@ -# UI Design Code Bible - -> **Documentation language:** English only. All maintained architecture documentation must be -> written in English. -> -> **Architectural decisions:** Every significant architectural decision **must** be recorded in -> [`decisions/10-decisions.md`](decisions/10-decisions.md) before or alongside the code change. -> -> **Single source of truth:** Architecture and technical design documentation belongs in `bible/`. -> Keep `README.md`, `CLAUDE.md`, and `AGENTS.md` minimal to avoid duplicate documentation. - -This directory is the single source of truth for UI Design Code architecture, bundle contracts, -and reusable pattern conventions. It is structured so both humans and AI assistants can navigate -it quickly. - ---- - -## Reading Map (Hierarchical) - -### 1. Foundations (read first) - -| File | What it covers | -|------|----------------| -| [architecture/system-overview.md](architecture/system-overview.md) | Product purpose, scope, repository composition | -| [architecture/submodule-integration-contract.md](architecture/submodule-integration-contract.md) | How host repositories consume this kit | -| [architecture/ui-pattern-catalog.md](architecture/ui-pattern-catalog.md) | Canonical pattern taxonomy and bundle status | -| [architecture/design-canon-map.md](architecture/design-canon-map.md) | Single-source map for canonical UI contracts and assets | - -### 2. Runtime & Delivery - -| File | What it covers | -|------|----------------| -| [architecture/demo-runtime-flows.md](architecture/demo-runtime-flows.md) | Demo app routes, render flow, failure behavior | -| [governance/documentation-policy.md](governance/documentation-policy.md) | Rules for maintaining architecture docs | - -### 3. Governance (always current) - -| File | What it covers | -|------|----------------| -| [decisions/10-decisions.md](decisions/10-decisions.md) | Architectural Decision Log (ADL) | -| [synthesis/source-repos.md](synthesis/source-repos.md) | Source repositories and Bible entrypoints | -| [synthesis/common-invariants.md](synthesis/common-invariants.md) | Shared rules extracted from source repos | -| [synthesis/normalization-matrix.md](synthesis/normalization-matrix.md) | Source → canonical convention mapping | -| [synthesis/ui-pattern-coverage-matrix.md](synthesis/ui-pattern-coverage-matrix.md) | UI pattern checklist and coverage status | - ---- - -## Quick Orientation for AI Assistants - -- Public reusable artifacts: `kit/` -- Bundle manifests: `exports/bundles/` -- Bundle index: `exports/index.yaml` -- Sync/apply tool: `tools/designsync/` -- Runnable reference app: `demo/` - -Read order for most changes: system overview → submodule contract → affected bundle docs → -decision log. diff --git a/bible/architecture/demo-runtime-flows.md b/bible/architecture/demo-runtime-flows.md deleted file mode 100644 index e243925..0000000 --- a/bible/architecture/demo-runtime-flows.md +++ /dev/null @@ -1,41 +0,0 @@ -# Demo Runtime Flows - -## Demo App Purpose - -The demo app (`demo/`) is a runnable reference for shared UI patterns. It is not the public -integration surface for host repositories. - -## HTTP Routes (initial) - -- `GET /` - pattern bundle catalog page -- `GET /healthz` - health endpoint -- `GET /static/*` - static assets - -## Demo Shell Visual Mode (Current Baseline) - -- The main demo shell uses a dual visual baseline: - - `Vapor Soft` for light/system-light mode - - `Vapor Night` for dark/system-dark mode -- Theme selection in the main demo shell is system-driven (`prefers-color-scheme`) only. -- The style playground route may exist for internal experimentation, but it is not part of the - primary demo navigation/catalog when the baseline is under active refinement. - -## Page Render Flow (`GET /`) - -1. Request hits `net/http` server mux -2. Handler prepares bundle/pattern catalog view model -3. Embedded templates render HTML response -4. Static CSS/JS loaded from embedded assets - -## Interaction Flow Guardrail (Server-Rendered UI) - -- Query-driven interactions (filters, pagination, segmented tabs, bulk actions, modal open/step state) - must preserve the user's reading position on the page. -- Canonical mechanism in this repo: anchor-to-module links/forms (for example `#table-filters`, - `#table-list`, `#controls-selection`, `#timeline-drilldown`). -- JS scroll restoration is optional and not required for the base contracts. - -## Failure Behavior - -- Template parse/render errors return `500` -- No DB calls or external services in bootstrap demo diff --git a/bible/architecture/design-canon-map.md b/bible/architecture/design-canon-map.md deleted file mode 100644 index 75c5bba..0000000 --- a/bible/architecture/design-canon-map.md +++ /dev/null @@ -1,42 +0,0 @@ -# Design Canon Map (Single Source Index) - -This file defines where each reusable design element is specified exactly once. -Use it to prevent duplicated contracts and drift across demo, kit, and exports. - -## Active Visual Baseline - -- Active baseline: `Vapor Soft` / `Vapor Night` (system-driven mode selection). -- Canonical runtime statement: `bible/architecture/demo-runtime-flows.md`. -- Aqua assets are archive-only: `bible/architecture/legacy-aqua-freeze.md`. - -## Canonical Component Contracts - -- Table management geometry + semantics (toolbar groups, icon semantics, select/actions columns): - `kit/patterns/table-management/contract.md` -- Controls + selection additions: - `kit/patterns/controls-selection/contract.md` -- Operator tools additions: - `kit/patterns/operator-tools/contract.md` -- Table pagination/filter contract: - `kit/patterns/table-pagination/contract.md` -- Forms + validation: - `kit/patterns/forms-validation/contract.md` -- Import/export flow: - `kit/patterns/import-export/contract.md` -- Modal workflow: - `kit/patterns/modal-workflows/contract.md` - -## Canonical Asset Sources - -- Active icon sprite source: `kit/patterns/theme-vapor/templates/icon_sprite.html` -- Active stylesheet source: `kit/patterns/theme-vapor/static/vapor.css` -- Shell palette catalog source: `kit/patterns/theme-vapor/palette-catalog.md` -- Demo runtime icon usage mirror: `demo/web/templates/base.html` -- Demo runtime stylesheet mirror: `demo/web/static/css/app.css` - -## Reuse Rules - -- Do not redefine shared toolbar/table geometry in pattern-specific contracts. -- Do not redefine icon semantics outside `table-management/contract.md`. -- When a pattern needs exceptions, document only additive overrides in its own contract. -- Keep bundle manifests in `exports/bundles/` aligned with canonical contract locations. diff --git a/bible/architecture/legacy-aqua-freeze.md b/bible/architecture/legacy-aqua-freeze.md deleted file mode 100644 index f944bf3..0000000 --- a/bible/architecture/legacy-aqua-freeze.md +++ /dev/null @@ -1,32 +0,0 @@ -# Legacy Aqua Freeze (Reference Only) - -## Status - -This document records the outcome of the Aqua-style exploration and its freeze status. - -- Status: `legacy` -- Active use: `archive reference` -- Purpose: preserve the explored style decisions as a reusable reference snapshot bundle - -## Locked Decisions (Aqua Exploration) - -- Aqua-inspired component language was explored across buttons, segmented controls, tables, filter controls, modal chrome, and status badges. -- The exploration introduced a consistent control-surface vocabulary and modal/window chrome experiments. -- The exploration is preserved as an archive snapshot for reference and rollback safety. - -## Current Direction - -- Active visual baseline for the demo/scaffold is **Vapor Soft / Vapor Night**. -- Aqua artifacts remain archived in this module and are not the active baseline. -- This document remains an archive record of the freeze/snapshot event and stored artifacts. - -## Storage / Bundle - -- Legacy Aqua snapshot bundle: `ui-theme-aqua-legacy` -- Bundle manifest: `exports/bundles/ui-theme-aqua-legacy.yaml` -- Snapshot assets and notes: `kit/patterns/theme-aqua-legacy/` - -## Usage Policy - -- The snapshot may be used as a legacy reference, migration source, or comparison artifact when explicitly needed. -- The active baseline is maintained in the live demo/scaffold styles, not in this frozen snapshot file. diff --git a/bible/architecture/submodule-integration-contract.md b/bible/architecture/submodule-integration-contract.md deleted file mode 100644 index 0e0a9c5..0000000 --- a/bible/architecture/submodule-integration-contract.md +++ /dev/null @@ -1,44 +0,0 @@ -# Submodule Integration Contract - -## Canonical Consumption Model - -Host repositories consume this project as a git submodule and copy/sync selected artifacts -from the kit into their own repository. - -Direct runtime dependency on submodule paths is not the default integration pattern. - -## Recommended Host Placement - -- `tools/ui-design-code` -- `third_party/ui-design-code` - -## Stable Public Surface - -Host repositories may rely on: - -- `kit/` -- `exports/` -- `tools/designsync/` -- `VERSIONING.md` -- `CHANGELOG.md` - -`demo/` is reference-only and not part of the stable integration contract. - -## Bundles - -Bundle definitions live in `exports/bundles/*.yaml` and are indexed by `exports/index.yaml`. - -Each bundle must define: - -- stable `id` -- version -- source paths under `kit/` -- target mapping rules -- conflict policy -- template variables (if any) - -## Safety Rules - -- Bundle manifests must not write outside the declared host target root. -- `designsync` must reject path traversal in manifest source/target paths. - diff --git a/bible/architecture/system-overview.md b/bible/architecture/system-overview.md deleted file mode 100644 index 8027f4d..0000000 --- a/bible/architecture/system-overview.md +++ /dev/null @@ -1,33 +0,0 @@ -# System Overview - -## Product - -UI Design Code is a submodule-first design kit for Go web applications and AI coding agents. - -It provides: - -- canonical documentation skeletons ("Bible") -- AI instruction templates -- reusable scaffolds and UI pattern building blocks -- a sync/apply tool (`designsync`) for host repositories -- a runnable demo app for pattern reference - -## Primary Consumers - -- Host Go repositories using this repo as a git submodule -- AI coding agents (Codex, Claude Code, etc.) -- Developers maintaining shared UI/architecture conventions - -## Runtime Composition - -- Root module: tools and bundle management (`tools/designsync`) -- `kit/`: copy/sync source artifacts for host repos -- `exports/`: machine-readable bundle manifests -- `demo/`: separate Go module for browsing patterns in action - -## Non-Goals (Phase 0 / bootstrap) - -- No production-ready shared Go UI framework -- No host-project-specific business rules or branding -- No database/runtime dependencies for the demo - diff --git a/bible/architecture/ui-pattern-catalog.md b/bible/architecture/ui-pattern-catalog.md deleted file mode 100644 index bcc4795..0000000 --- a/bible/architecture/ui-pattern-catalog.md +++ /dev/null @@ -1,57 +0,0 @@ -# UI Pattern Catalog - -Canonical pattern taxonomy for reusable Go web UI patterns. - -Visual baseline for the canonical demo and scaffold is Vapor: - -- `Vapor Soft` for light mode -- `Vapor Night` for dark mode - -Pattern-level interaction contracts inherit the active baseline component language rather than -redefining primitives locally. The Aqua bundle remains archive/reference only. - -## Pattern Families - -- Table + filters + pagination -- Modal workflows (create/edit/remove/confirm) -- Status indicators and health badges -- Timeline cards and grouped history views -- Forms with validation and server round-trips -- Operator/admin tools dashboards (queue + batch actions) - -## Initial Bundle Status - -| Pattern | Bundle | Status | -|---|---|---| -| Table + pagination | `ui-pattern-table` | placeholder contract + files | -| Controls + selection | `ui-pattern-controls` | contract + files | -| Forms + validation + suggestions | `ui-pattern-forms` | contract + files | -| Operator tools dashboard | `ui-pattern-operator-tools` | contract + files | -| Modal workflow | `ui-pattern-modal` | contract + files | -| Import / export | `ui-pattern-io` | contract + files | -| Status indicators | bundled inside controls/table demos | partial | -| Timeline cards | `ui-pattern-timeline` | contract + files | - -## Theme Bundles - -| Theme | Bundle | Status | -|---|---|---| -| Vapor (active baseline) | `ui-theme-vapor` | active | -| Aqua legacy snapshot | `ui-theme-aqua-legacy` | archive/reference | - -## Synthesis Direction - -Initial canonical behaviors are synthesized from multiple existing Go web applications with: - -- detailed UI interaction contracts -- operational admin workflows -- lean `net/http` + template runtime structures - -## Component Baseline Notes - -- Buttons, segmented controls, status badges, filter inputs, and table surfaces share one baseline component language. -- Canonical demo visuals target the active Vapor baseline (`Vapor Soft` / `Vapor Night`). -- Segmented controls use joined-button geometry (shared shell, rounded outer edges only, straight internal separators). -- Context-specific active-state color is allowed (for example dark scope tabs vs blue theme preset selector) without changing segmented geometry. -- Table-management behavior and toolbar icon semantics are defined once in - `kit/patterns/table-management/contract.md`. diff --git a/bible/decisions/10-decisions.md b/bible/decisions/10-decisions.md deleted file mode 100644 index 6c7c58a..0000000 --- a/bible/decisions/10-decisions.md +++ /dev/null @@ -1,148 +0,0 @@ -# Architectural Decision Log - -## ADL-001 — Submodule-first repository layout - -**Date:** 2026-02-23 - -**Context:** The repository must be consumable by multiple host projects with minimal coupling. - -**Decision:** The root repository is the reusable kit surface (`kit/`, `exports/`, `tools/designsync`), -while the runnable reference app lives in `demo/` as a separate module. - -**Consequences:** - -- Host repositories can pin and sync shared artifacts without depending on demo runtime code. -- Public compatibility boundaries are clearer. -- Documentation and changelog discipline are required for bundle contracts. - -## ADL-002 — Copy/sync is the default integration model - -**Date:** 2026-02-23 - -**Context:** Host repositories need stable, reviewable changes and should avoid hidden runtime -dependency on submodule internals. - -**Decision:** Canonical integration is copy/sync from submodule bundles using `designsync`. - -**Consequences:** - -- Host repos review concrete file changes in their own tree. -- Runtime coupling to submodule paths is avoided. -- Bundle manifests and sync tooling become a critical public interface. - -## ADL-003 — Scope expansion requires explicit user direction - -**Date:** 2026-02-23 - -**Context:** The repository can easily grow from UI/UX design code into broader application -architecture standards, which risks losing focus and slowing delivery. - -**Decision:** Keep the repository focused on the currently approved scope. Do not expand into new -design-code domains unless the user explicitly requests that expansion. - -**Consequences:** - -- Work remains concentrated on current deliverables and consistency. -- New domains are added intentionally instead of opportunistically. -- Agents should prefer improving existing patterns/docs over inventing adjacent scope. - -## ADL-004 — Aqua style work is frozen as legacy; active rewrite direction is Win9x - -Superseded by ADL-005. - -**Date:** 2026-02-23 - -**Context:** A substantial Aqua-inspired visual exploration was implemented during demo refinement. -The result is useful as a reference archive, but it should not continue to drive the active baseline. -The next visual rewrite direction is a simpler classic Windows 95-2000 (Win9x-style) baseline. - -**Decision:** Freeze Aqua-related visual work as a legacy snapshot bundle. Keep it documented for -reference, but do not treat it as the active baseline for ongoing demo/scaffold styling. Continue -visual work on the Win9x rewrite path. - -**Consequences:** - -- Aqua styles remain available for legacy reference and extraction. -- New styling changes should target the Win9x baseline instead of extending Aqua. -- Documentation must clearly mark Aqua as legacy / not active to avoid ambiguity. - -## ADL-005 — Restore Aqua as the active visual baseline - -Superseded by ADL-006. - -**Date:** 2026-02-23 - -**Context:** The temporary Win9x-wide rewrite pass was evaluated and rejected for the current demo -catalog. The team decided to continue from the existing Aqua-based visual work. - -**Decision:** Restore Aqua-first styling as the active baseline for the demo/scaffold and keep the -Win9x attempt as a discarded experiment. Preserve the Aqua snapshot bundle/docs as archive -artifacts, but continue active iteration on the live Aqua baseline. - -**Consequences:** - -- Demo pages continue to evolve on top of Aqua-first styles. -- Legacy bundle artifacts remain available for archival reference. -- Documentation should describe Aqua as active baseline and avoid marking Win9x as current direction. - -## ADL-006 — Main demo shell baseline is Vapor Soft / Vapor Night with system-only mode selection - -**Date:** 2026-02-23 - -**Context:** The demo catalog visual work moved from Aqua-first experimentation to a new Vaporwave -inspired UI direction intended to remain usable for day-long operation. Manual day/night toggles in -the shell caused state conflicts and inconsistent rendering relative to system color-scheme. - -**Decision:** Use a dual baseline in the main demo shell: - -- `Vapor Soft` for light mode -- `Vapor Night` for dark mode - -Mode selection follows system settings only (`prefers-color-scheme`). The style playground may -remain available as an internal route for visual experimentation, but it is hidden from the main -demo navigation/catalog while the baseline is actively refined. - -**Consequences:** - -- The main demo shell keeps one stable visual contract while still supporting light/dark operation. -- Manual theme override UI/state is removed from the main shell to avoid visual mismatches. -- Vapor-themed background composition (including dark-mode retro-grid variant) becomes part of the - canonical demo presentation and must remain subordinate to UI readability. - -## ADL-007 — Canonical design contracts must resolve through a single-source map - -**Date:** 2026-02-28 - -**Context:** Table-management and operator/controls patterns evolved quickly during iterative demo -refinement. Without an explicit source map, repeated definitions across contracts/documents risk -semantic drift (toolbar groups, icon semantics, active baseline references). - -**Decision:** Maintain one explicit single-source index for design contracts and assets in -`bible/architecture/design-canon-map.md`, with Vapor as active baseline and Aqua marked archive-only. -Pattern-specific contracts must reference shared base contracts and document only additive overrides. - -**Consequences:** - -- Contract ownership is explicit and reviewable in one place. -- Repeated component semantics are less likely to diverge across patterns. -- Release preparation can validate canonical sources first, then dependent pattern docs/manifests. - -## ADL-008 — Vapor shell uses preset-driven header/accent palette contract - -**Date:** 2026-02-28 - -**Context:** Host repositories that consume this kit need a stable way to keep the app header -height and color treatment consistent with Vapor aesthetics. Ad-hoc local overrides caused drift in -header height and non-Vapor accent choices. - -**Decision:** Introduce reusable shell palette presets in `theme-vapor` with stable preset IDs and -document them in `kit/patterns/theme-vapor/palette-catalog.md`. Presets are selected by -`data-vapor-shell` on the root element and resolve shared shell tokens for light/dark backgrounds, -accent gradients, accent borders, and shell height. Runtime selection precedence is standardized as -query `vapor_shell` → local storage key `vapor_shell` → markup default preset. - -**Consequences:** - -- Host projects can switch shell look without modifying component markup. -- Header height is tokenized (`--shell-height`) and no longer depends on one-off CSS edits. -- Palette ID compatibility becomes part of the reusable visual contract for `ui-theme-vapor`. diff --git a/bible/decisions/README.md b/bible/decisions/README.md deleted file mode 100644 index de598c9..0000000 --- a/bible/decisions/README.md +++ /dev/null @@ -1,17 +0,0 @@ -# Architecture Decision Records - -Use this directory to capture architecture decisions and significant updates. - -## Required - -- Every architecture decision must be recorded in the Bible. -- If a decision replaces an older one, update the older document in the same change. -- Keep entries short, explicit, and linked to the affected architecture files. - -## Minimal Entry Template - -- Date (`YYYY-MM-DD`) -- Decision -- Context -- Consequences -- Supersedes (if any) diff --git a/bible/governance/documentation-policy.md b/bible/governance/documentation-policy.md deleted file mode 100644 index 523eea1..0000000 --- a/bible/governance/documentation-policy.md +++ /dev/null @@ -1,29 +0,0 @@ -# Documentation Policy - -## Purpose - -This policy defines how architectural knowledge is captured and maintained. - -## Mandatory Rules - -- Record every architecture decision in the Bible before or together with implementation. -- Use English for all architecture documentation. -- Keep only current architecture in active sections. -- When a solution is replaced, update or remove obsolete guidance in the same change. -- Keep architecture details centralized in `bible/`; top-level docs should only reference it. - -## Change Workflow - -1. Update the relevant file(s) in `bible/architecture/` or `bible/synthesis/`. -2. If behavior changed, add or update a decision note in `bible/decisions/10-decisions.md`. -3. Update `CHANGELOG.md` when public bundle/tooling contracts change. -4. Remove duplicated or outdated statements from `README.md`, `CLAUDE.md`, and `AGENTS.md`. - -## Scope Expansion Guardrail - -- Do not expand the design-code scope beyond the currently approved work area by default. -- Expansion into new domains (for example API contracts, data/model architecture, observability, - security, or backend service patterns) requires an explicit user request. -- If the request is ambiguous, keep focus on the current scope and ask for confirmation before - broadening the repository mission. -- Prefer depth and consistency in the current approved scope over breadth. diff --git a/bible/synthesis/common-invariants.md b/bible/synthesis/common-invariants.md deleted file mode 100644 index 7e7403a..0000000 --- a/bible/synthesis/common-invariants.md +++ /dev/null @@ -1,18 +0,0 @@ -# Common Invariants Across Source Repos - -## Documentation - -- Architecture docs are authoritative and must be kept current with code changes. -- English-only Bible documentation is enforced (or being enforced). -- AI instruction files point to the Bible entrypoint. - -## Engineering Practices - -- Go is the implementation language. -- Web UI is server-rendered or template-driven. -- Explicit operational/build commands are documented for AI agents. - -## Design-Kit Implication - -This repository standardizes documentation and reusable pattern contracts while leaving room for -host-project branding and business rules. diff --git a/bible/synthesis/normalization-matrix.md b/bible/synthesis/normalization-matrix.md deleted file mode 100644 index 999eba6..0000000 --- a/bible/synthesis/normalization-matrix.md +++ /dev/null @@ -1,8 +0,0 @@ -# Normalization Matrix (Initial) - -| Source Variant | Source Convention | Canonical Rule in This Repo | -|---|---|---| -| Variant A | `bible/README.md` | Root `bible/README.md` as source of truth | -| Variant B | `bible/BIBLE.md` | Root `bible/README.md` entrypoint (English docs) | -| Variant C | `docs/bible/README.md` | Normalize to root `bible/` for new repos | -| Mature UI Contract Repo | Detailed UI interaction contracts | Use pattern contracts in `kit/patterns/*/contract.md` | diff --git a/bible/synthesis/source-repos.md b/bible/synthesis/source-repos.md deleted file mode 100644 index 65865f1..0000000 --- a/bible/synthesis/source-repos.md +++ /dev/null @@ -1,15 +0,0 @@ -# Reference Applications (Anonymized) - -The initial design-code synthesis draws from several existing Go web applications that use a -Bible-style architecture documentation system. - -## Observed Variants - -- Bible entrypoint at `bible/README.md` -- Bible entrypoint at `bible/BIBLE.md` -- Bible entrypoint at `docs/bible/README.md` - -## Key Observation - -All source applications treat the Bible (or equivalent folder) as the architecture source of -truth, but folder layout and UI/runtime stacks differ. diff --git a/bible/synthesis/ui-pattern-coverage-matrix.md b/bible/synthesis/ui-pattern-coverage-matrix.md deleted file mode 100644 index d859a5c..0000000 --- a/bible/synthesis/ui-pattern-coverage-matrix.md +++ /dev/null @@ -1,47 +0,0 @@ -# UI Pattern Coverage Matrix (Reference Apps → Design Kit) - -This file tracks UI/UX pattern extraction from reference Go web applications into this -repository's current scope (UI/UX + interaction contracts + demo pages + reusable pattern docs). - -## Scope Reminder - -- This matrix covers only the currently approved design-code scope. -- It does **not** expand into backend architecture, API contract frameworks, or observability. - -## Pattern Checklist - -| Pattern Family | Reference Evidence (types of usage observed) | Demo Coverage | Kit Contract / Bundle | Status | -|---|---|---|---|---| -| Table lists | multiple list/detail/admin tables | `/patterns/table`, `/patterns/controls` | `ui-pattern-table` | covered (core) | -| Pagination | shared pagination style, prev/next/page links | `/patterns/table` | `ui-pattern-table` | covered (core) | -| Server-side filters | header filters, URL query semantics | `/patterns/table` | `ui-pattern-table` | covered (core) | -| Datalist/autocomplete filters | datalist-backed header filters and suggestions | `/patterns/forms` | `ui-pattern-forms` | covered | -| Buttons hierarchy | primary/secondary/danger/quiet controls | `/patterns/controls` | `ui-pattern-controls` | covered | -| Checkboxes + selection | row select, select visible, bulk actions | `/patterns/controls` | `ui-pattern-controls` | covered | -| Segmented/tabs | active/archived, mode switches, tab buttons | `/patterns/controls`, `/patterns/forms` | `ui-pattern-controls`, `ui-pattern-forms` | covered | -| Status badges/indicators | entity status, source/status labels, warning chips | `/patterns/controls`, `/patterns/timeline` | `ui-pattern-controls` | covered (core) | -| Modals (single-step) | create/edit/remove dialogs | `/patterns/modals` | `ui-pattern-modal` | covered | -| Modals (multi-step confirm) | review/confirm/submit flows | `/patterns/modals`, `/patterns/forms` | `ui-pattern-modal`, `ui-pattern-forms` | covered | -| Import workflow | file input, preview, confirm | `/patterns/io`, `/patterns/forms` | `ui-pattern-io`, `ui-pattern-forms` | covered | -| Export workflow | explicit scope/format, CSV download | `/patterns/io` | `ui-pattern-io` | covered | -| CSV export compatibility details | BOM + delimiter for spreadsheet UX | `/patterns/io/export.csv` | `ui-pattern-io` | covered | -| Timeline cards | grouped by day/action/source | `/patterns/timeline` | `ui-pattern-timeline` | covered | -| Timeline drilldown | single drilldown panel/modal, event detail | `/patterns/timeline` | `ui-pattern-timeline` | covered | -| Empty states | table/list/filter empty states | multiple demo pages | multiple bundles | covered | -| Inline validation messages | form-level and field-level messages | `/patterns/forms` | `ui-pattern-forms` | covered | -| File upload controls | `` and import affordances | `/patterns/forms`, `/patterns/io` | `ui-pattern-io`, `ui-pattern-forms` | covered | -| Global selection across paginated pages | persistent selection across pages/storage | `/patterns/controls` (paginated selection + select visible/filtered + preserved `sel`) | `ui-pattern-controls` | covered | -| Advanced admin tools / repair dashboards | complex operator tooling with many tables | `/patterns/operator-tools` (canonicalized operator dashboard) | `ui-pattern-operator-tools` | covered (simplified canonical) | - -## Notes on Intentional Simplifications - -- Some complex operator workflows are represented as simplified demos to keep the repository - focused on reusable interaction contracts rather than domain-specific UI logic. -- Global selection is demonstrated via query-driven selected IDs preserved across paginated views. -- Client-side persistence (for example local storage) is intentionally not required for the canonical contract. - -## Next In-Scope Improvements (Optional, not automatic) - -- Stronger global-selection demo (cross-page or local-storage persistence) -- Dedicated "operator dashboard tools" pattern page (still within UI/UX scope) -- Richer datalist/autocomplete disambiguation candidate flow diff --git a/demo/Makefile b/demo/Makefile deleted file mode 100644 index b3e2ce9..0000000 --- a/demo/Makefile +++ /dev/null @@ -1,12 +0,0 @@ -run: - go run ./cmd/demo-server - -build: - go build ./cmd/demo-server - -test: - go test ./... - -fmt: - gofmt -w $$(find . -name '*.go' -type f) - diff --git a/demo/README.md b/demo/README.md deleted file mode 100644 index 3e8c6db..0000000 --- a/demo/README.md +++ /dev/null @@ -1,9 +0,0 @@ -# UI Design Code Demo - -Runnable reference app for shared UI patterns and bundle catalog. - -This app is not the public submodule contract; host repositories should consume `kit/` via -`tools/designsync`. - -Active shared theme assets for host integration are published in `kit/patterns/theme-vapor` -and exported as bundle `ui-theme-vapor`. diff --git a/demo/go.mod b/demo/go.mod deleted file mode 100644 index 3a7639b..0000000 --- a/demo/go.mod +++ /dev/null @@ -1,4 +0,0 @@ -module git.mchus.pro/mchus/ui-design-code-demo - -go 1.24.0 - diff --git a/demo/internal/web/patterns_more.go b/demo/internal/web/patterns_more.go deleted file mode 100644 index a05ae6c..0000000 --- a/demo/internal/web/patterns_more.go +++ /dev/null @@ -1,1189 +0,0 @@ -package web - -import ( - "bytes" - "encoding/csv" - "fmt" - "net/http" - "net/url" - "sort" - "strconv" - "strings" -) - -type controlsRow struct { - ID int - Name string - Type string - Status string - Selected bool - ToggleURL string - EditURL string - RemoveURL string -} - -type controlsPageData struct { - Title string - CurrentPath string - Rows []controlsRow - Segment string - Page int - Pager tableDemoPager - VisibleCount int - SelectedCount int - SelectedVisible int - SelectedHidden int - ActionMessage string - SegmentedCounts map[string]int - SegmentURLs map[string]string - SelectVisibleURL string - SelectFilteredURL string - ClearVisibleURL string - ClearFilteredURL string - ClearSelectionURL string - BulkReviewURL string - BulkArchiveURL string - BulkExportURL string - BulkRetrySyncURL string - OpenEditSelectedURL string - OpenDeleteSelectedURL string - HasSelection bool - SimulateLoading bool - SimulateLoadingURL string - ClearLoadingURL string -} - -type modalDemoPageData struct { - Title string - CurrentPath string - Open string - Stage string - Message string - SelectedIDs []string -} - -type ioImportPreviewRow struct { - RowNo int - ItemCode string - Name string - Qty int - Status string -} - -type ioPageData struct { - Title string - CurrentPath string - ImportMode string - FileName string - ImportMessage string - PreviewRows []ioImportPreviewRow - ExportFormat string - ExportScope string - ExportMessage string -} - -type formsDemoPageData struct { - Title string - CurrentPath string - Mode string - Step string - ServerSerial string - Location string - ComponentSerial string - EventDate string - Details string - Message string - FieldErrors map[string]string - LocationOptions []string - ServerOptions []string - ComponentOptions []string - StepURLs map[string]string - ModeURLs map[string]string -} - -type stylePlaygroundPageData struct { - Title string - CurrentPath string - Style string - StyleLabel string - StyleURLs map[string]string - StyleClass string - LoadingDemo bool - LoadingDemoURL string - ClearLoadingURL string -} - -type operatorToolJob struct { - ID string - Tool string - Scope string - Mode string - Status string - Owner string - StartedAt string - Selected bool - ToggleURL string - RetryURL string - CancelURL string - ExportURL string - InspectURL string -} - -type operatorToolsPageData struct { - Title string - CurrentPath string - Scope string - Queue string - Rows []operatorToolJob - VisibleCount int - SelectedCount int - SelectedVisible int - SelectionOutside int - ActionMessage string - ScopeURLs map[string]string - QueueURLs map[string]string - SelectVisibleURL string - ClearVisibleURL string - ClearSelectionURL string - RunSelectedURL string - RetrySelectedURL string - CancelSelectedURL string - OpenReviewModalURL string - ImportPreviewURL string - ExportFilteredURL string - ExportSelectedURL string - SafetyChecklist []string - RecentActivityNotes []string -} - -type timelineEvent struct { - ID string - At string - Action string - Source string - Entity string - Target string - Detail string - Slot string - Device string -} - -type timelineCard struct { - ID string - Day string - Title string - Action string - Source string - Count int - SummaryLeft []string - SummaryRight []string - Items []timelineEvent - OpenURL string - Open bool -} - -type timelinePageData struct { - Title string - CurrentPath string - ActionFilter string - SourceFilter string - ActionURLs map[string]string - SourceURLs map[string]string - Cards []timelineCard - OpenCard *timelineCard - CardSearch string - ClearCardURL string - ActiveEvent *timelineEvent -} - -func (s *Server) handleControlsPattern(w http.ResponseWriter, r *http.Request) { - if r.URL.Path != "/patterns/controls" { - http.NotFound(w, r) - return - } - segment := strings.TrimSpace(r.URL.Query().Get("segment")) - if segment == "" { - segment = "all" - } - page := parsePositiveInt(r.URL.Query().Get("page"), 1) - selected := parseIDSet(r.URL.Query()["sel"]) - rows := demoControlsRows() - - counts := map[string]int{"all": len(rows), "ready": 0, "warning": 0, "review": 0} - filteredAll := make([]controlsRow, 0, len(rows)) - filteredIDs := make([]string, 0, len(rows)) - for _, row := range rows { - counts[strings.ToLower(row.Status)]++ - if segment != "all" && !strings.EqualFold(row.Status, segment) { - continue - } - filteredAll = append(filteredAll, row) - filteredIDs = append(filteredIDs, strconv.Itoa(row.ID)) - } - - pageRows, pager := paginateControlsRows(segment, selected, filteredAll, page, 5) - visibleIDs := make([]string, 0, len(pageRows)) - for _, row := range pageRows { - visibleIDs = append(visibleIDs, strconv.Itoa(row.ID)) - } - - switch strings.TrimSpace(r.URL.Query().Get("selection_action")) { - case "select_visible": - for _, id := range visibleIDs { - selected[id] = true - } - case "clear_visible": - for _, id := range visibleIDs { - delete(selected, id) - } - case "select_filtered": - for _, id := range filteredIDs { - selected[id] = true - } - case "clear_filtered": - for _, id := range filteredIDs { - delete(selected, id) - } - case "clear_all": - selected = map[string]bool{} - case "toggle": - id := strings.TrimSpace(r.URL.Query().Get("id")) - if id != "" { - if selected[id] { - delete(selected, id) - } else { - selected[id] = true - } - } - } - - selectedCSV := joinSelectedIDs(selected) - pageRows, pager = paginateControlsRows(segment, selected, filteredAll, page, 5) - visibleIDs = visibleIDs[:0] - for _, row := range pageRows { - visibleIDs = append(visibleIDs, strconv.Itoa(row.ID)) - } - selectedVisible := 0 - for i := range pageRows { - id := strconv.Itoa(pageRows[i].ID) - pageRows[i].Selected = selected[id] - if pageRows[i].Selected { - selectedVisible++ - } - pageRows[i].ToggleURL = controlsURL(segment, pager.Page, selectedCSV, "toggle", id, "", nil) - pageRows[i].EditURL = modalURL("edit", "edit", selectedCSV, id) - pageRows[i].RemoveURL = modalURL("delete", "confirm", selectedCSV, id) - } - selectedHidden := len(selected) - selectedVisible - if selectedHidden < 0 { - selectedHidden = 0 - } - - action := strings.TrimSpace(r.URL.Query().Get("bulk")) - loading := r.URL.Query().Get("loading") == "1" - actionMsg := "" - if action != "" { - actionMsg = fmt.Sprintf("Bulk action preview: %s on %d selected item(s).", action, len(selected)) - } - - data := controlsPageData{ - Title: "Controls + Selection Pattern", - CurrentPath: "/patterns/controls", - Rows: pageRows, - Segment: segment, - Page: pager.Page, - Pager: pager, - VisibleCount: len(pageRows), - SelectedCount: len(selected), - SelectedVisible: selectedVisible, - SelectedHidden: selectedHidden, - ActionMessage: actionMsg, - SegmentedCounts: counts, - SegmentURLs: controlsSegmentURLs(selectedCSV), - SelectVisibleURL: controlsURL(segment, pager.Page, selectedCSV, "select_visible", "", "", nil), - SelectFilteredURL: controlsURL(segment, pager.Page, selectedCSV, "select_filtered", "", "", nil), - ClearVisibleURL: controlsURL(segment, pager.Page, selectedCSV, "clear_visible", "", "", nil), - ClearFilteredURL: controlsURL(segment, pager.Page, selectedCSV, "clear_filtered", "", "", nil), - ClearSelectionURL: controlsURL(segment, pager.Page, "", "clear_all", "", "", nil), - BulkReviewURL: controlsURL(segment, pager.Page, selectedCSV, "", "", "review", nil), - BulkArchiveURL: controlsURL(segment, pager.Page, selectedCSV, "", "", "archive", nil), - BulkExportURL: controlsURL(segment, pager.Page, selectedCSV, "", "", "export", nil), - BulkRetrySyncURL: controlsURL(segment, pager.Page, selectedCSV, "", "", "retry_sync", nil), - OpenEditSelectedURL: modalURL("edit", "edit", selectedCSV, ""), - OpenDeleteSelectedURL: modalURL("delete", "confirm", selectedCSV, ""), - HasSelection: len(selected) > 0, - SimulateLoading: loading, - SimulateLoadingURL: controlsURL(segment, pager.Page, selectedCSV, "", "", "review", map[string]string{"loading": "1"}), - ClearLoadingURL: controlsURL(segment, pager.Page, selectedCSV, "", "", "", map[string]string{"loading": ""}), - } - s.renderTemplate(w, "controls_pattern.html", data) -} - -func (s *Server) handleModalPattern(w http.ResponseWriter, r *http.Request) { - if r.URL.Path != "/patterns/modals" { - http.NotFound(w, r) - return - } - open := strings.TrimSpace(r.URL.Query().Get("open")) - stage := strings.TrimSpace(r.URL.Query().Get("stage")) - if stage == "" { - stage = "edit" - } - selectedIDs := selectedIDSlice(r.URL.Query()["sel"]) - msg := "" - switch stage { - case "confirm": - msg = "Confirm stage: summarize changes and require explicit confirmation." - case "done": - msg = "Completed state: show success summary and next actions." - default: - msg = "Edit stage: collect inputs and validate before transition to confirm." - } - data := modalDemoPageData{ - Title: "Modal Workflows Pattern", - CurrentPath: "/patterns/modals", - Open: open, - Stage: stage, - Message: msg, - SelectedIDs: selectedIDs, - } - s.renderTemplate(w, "modal_pattern.html", data) -} - -func (s *Server) handleIOPattern(w http.ResponseWriter, r *http.Request) { - if r.URL.Path != "/patterns/io" { - http.NotFound(w, r) - return - } - mode := strings.TrimSpace(r.URL.Query().Get("import_mode")) - if mode == "" { - mode = "preview" - } - fileName := strings.TrimSpace(r.URL.Query().Get("file")) - if fileName == "" { - fileName = "items.csv" - } - scope := strings.TrimSpace(r.URL.Query().Get("scope")) - if scope == "" { - scope = "filtered" - } - format := strings.TrimSpace(r.URL.Query().Get("format")) - if format == "" { - format = "csv" - } - preview := []ioImportPreviewRow{ - {RowNo: 1, ItemCode: "CMP-001", Name: "Controller board", Qty: 2, Status: "ok"}, - {RowNo: 2, ItemCode: "CMP-002", Name: "PSU module", Qty: 1, Status: "warning"}, - {RowNo: 3, ItemCode: "CMP-003", Name: "Network adapter", Qty: 4, Status: "ok"}, - {RowNo: 4, ItemCode: "CMP-004", Name: "Missing mapping sample", Qty: 1, Status: "error"}, - } - msg := "Import workflow pattern: upload -> preview/validate -> confirm." - if mode == "confirm" { - msg = "Confirm import step: user reviews validation summary before submitting." - } - exportMsg := "Export workflow pattern: explicit format/scope selection and predictable filename." - if r.URL.Query().Get("export_ready") == "1" { - exportMsg = "Export is ready. Use the download action below (real CSV endpoint in demo)." - } - data := ioPageData{ - Title: "Import / Export Pattern", - CurrentPath: "/patterns/io", - ImportMode: mode, - FileName: fileName, - ImportMessage: msg, - PreviewRows: preview, - ExportFormat: format, - ExportScope: scope, - ExportMessage: exportMsg, - } - s.renderTemplate(w, "io_pattern.html", data) -} - -func (s *Server) handleFormsPattern(w http.ResponseWriter, r *http.Request) { - if r.URL.Path != "/patterns/forms" { - http.NotFound(w, r) - return - } - mode := strings.TrimSpace(r.URL.Query().Get("mode")) - if mode == "" { - mode = "register" - } - step := strings.TrimSpace(r.URL.Query().Get("step")) - if step == "" { - step = "edit" - } - data := formsDemoPageData{ - Title: "Forms + Validation Pattern", - CurrentPath: "/patterns/forms", - Mode: mode, - Step: step, - ServerSerial: strings.TrimSpace(r.URL.Query().Get("server_serial")), - Location: strings.TrimSpace(r.URL.Query().Get("location")), - ComponentSerial: strings.TrimSpace(r.URL.Query().Get("component_serial")), - EventDate: strings.TrimSpace(r.URL.Query().Get("event_date")), - Details: strings.TrimSpace(r.URL.Query().Get("details")), - FieldErrors: map[string]string{}, - LocationOptions: []string{"AOC#1", "AOC#2", "PSU#1", "PSU#2", "CTRL#1"}, - ServerOptions: []string{"SRV-001", "SRV-002", "SRV-003", "SRV-010"}, - ComponentOptions: []string{ - "NIC-AX210-001", "NIC-AX210-002", "PSU-750W-100", "CTRL-MGMT-014", - }, - StepURLs: map[string]string{ - "edit": formsURL(mode, "edit", url.Values{}), - "review": formsURL(mode, "review", carryFormFields(r.URL.Query())), - "confirm": formsURL(mode, "confirm", carryFormFields(r.URL.Query())), - }, - ModeURLs: map[string]string{ - "register": formsURL("register", "edit", carryFormFields(r.URL.Query())), - "import": formsURL("import", "edit", carryFormFields(r.URL.Query())), - }, - } - if data.EventDate == "" { - data.EventDate = "2026-02-23" - } - - if step == "review" || step == "confirm" { - validateFormsDemo(&data) - if len(data.FieldErrors) > 0 && step != "edit" { - data.Message = "Validation errors must be resolved before confirmation." - } - } - if step == "edit" { - data.Message = "Edit step: enter values, use suggestions, then move to review." - } else if step == "review" { - if len(data.FieldErrors) == 0 { - data.Message = "Review step: summarize recognized values and request explicit confirmation." - } - } else if step == "confirm" { - if len(data.FieldErrors) == 0 { - data.Message = "Done state: show human-readable result and next actions." - } - } - s.renderTemplate(w, "forms_pattern.html", data) -} - -func (s *Server) handleStylePlaygroundPattern(w http.ResponseWriter, r *http.Request) { - if r.URL.Path != "/patterns/style-playground" { - http.NotFound(w, r) - return - } - style := strings.TrimSpace(r.URL.Query().Get("style")) - if style == "" { - style = "aqua" - } - if style == "vaporwave" { - style = "vaporwave-soft" - } - allowed := map[string]string{ - "linen": "Linen / Editorial", - "slate": "Slate / Utility", - "signal": "Signal / Accent", - "y2k-silver": "Y2K / Silver Chrome", - "vaporwave-soft": "Vaporwave / Soft Day", - "vaporwave-night": "Vaporwave / Night", - "aqua": "macOS Aqua", - "win9x": "Windows 95-2000", - } - label, ok := allowed[style] - if !ok { - style = "aqua" - label = allowed[style] - } - styleClass := "theme-" + style - if style == "vaporwave-soft" { - // Keep CSS compatibility with the first vaporwave implementation. - styleClass = "theme-vaporwave" - } - data := stylePlaygroundPageData{ - Title: "Style Playground", - CurrentPath: "/patterns/style-playground", - Style: style, - StyleLabel: label, - StyleClass: styleClass, - StyleURLs: map[string]string{ - "linen": anchored("/patterns/style-playground?style=linen", "style-presets"), - "slate": anchored("/patterns/style-playground?style=slate", "style-presets"), - "signal": anchored("/patterns/style-playground?style=signal", "style-presets"), - "y2k-silver": anchored("/patterns/style-playground?style=y2k-silver", "style-presets"), - "vaporwave-soft": anchored("/patterns/style-playground?style=vaporwave-soft", "style-presets"), - "vaporwave-night": anchored("/patterns/style-playground?style=vaporwave-night", "style-presets"), - "aqua": anchored("/patterns/style-playground?style=aqua", "style-presets"), - "win9x": anchored("/patterns/style-playground?style=win9x", "style-presets"), - }, - LoadingDemo: r.URL.Query().Get("loading") == "1", - LoadingDemoURL: anchored("/patterns/style-playground?style="+style+"&loading=1", "style-components"), - ClearLoadingURL: anchored("/patterns/style-playground?style="+style, "style-components"), - } - s.renderTemplate(w, "style_playground_pattern.html", data) -} - -func (s *Server) handleOperatorToolsPattern(w http.ResponseWriter, r *http.Request) { - if r.URL.Path != "/patterns/operator-tools" { - http.NotFound(w, r) - return - } - scope := strings.TrimSpace(r.URL.Query().Get("scope")) - if scope == "" { - scope = "assets" - } - queue := strings.TrimSpace(r.URL.Query().Get("queue")) - if queue == "" { - queue = "all" - } - selected := parseIDSet(r.URL.Query()["sel"]) - - all := demoOperatorToolJobs() - filtered := make([]operatorToolJob, 0, len(all)) - visibleIDs := make([]string, 0, len(all)) - for _, row := range all { - if scope != "all" && !strings.EqualFold(row.Scope, scope) { - continue - } - if queue != "all" && !strings.EqualFold(row.Status, queue) { - continue - } - filtered = append(filtered, row) - visibleIDs = append(visibleIDs, row.ID) - } - - switch strings.TrimSpace(r.URL.Query().Get("selection_action")) { - case "select_visible": - for _, id := range visibleIDs { - selected[id] = true - } - case "clear_visible": - for _, id := range visibleIDs { - delete(selected, id) - } - case "clear_all": - selected = map[string]bool{} - case "toggle": - id := strings.TrimSpace(r.URL.Query().Get("id")) - if id != "" { - if selected[id] { - delete(selected, id) - } else { - selected[id] = true - } - } - } - - selCSV := joinSelectedIDs(selected) - selectedVisible := 0 - for i := range filtered { - filtered[i].Selected = selected[filtered[i].ID] - if filtered[i].Selected { - selectedVisible++ - } - filtered[i].ToggleURL = operatorToolsURL(scope, queue, selCSV, "toggle", filtered[i].ID, "") - filtered[i].RetryURL = operatorToolsURL(scope, queue, selCSV, "", "", "retry") - filtered[i].CancelURL = operatorToolsURL(scope, queue, selCSV, "", "", "cancel") - filtered[i].ExportURL = anchored("/patterns/io?scope=filtered&export_ready=1", "io-export") - filtered[i].InspectURL = timelineURL("", "", "c1", "", "") - } - selectedHidden := len(selected) - selectedVisible - if selectedHidden < 0 { - selectedHidden = 0 - } - - action := strings.TrimSpace(r.URL.Query().Get("batch")) - actionMessage := "" - if action != "" { - actionMessage = fmt.Sprintf("Operator batch preview: %s on %d selected job(s).", action, len(selected)) - } - if len(selected) == 0 && action != "" { - actionMessage = "Operator batch preview requires explicit selection first." - } - - data := operatorToolsPageData{ - Title: "Operator Tools Pattern", - CurrentPath: "/patterns/operator-tools", - Scope: scope, - Queue: queue, - Rows: filtered, - VisibleCount: len(filtered), - SelectedCount: len(selected), - SelectedVisible: selectedVisible, - SelectionOutside: selectedHidden, - ActionMessage: actionMessage, - ScopeURLs: map[string]string{ - "assets": operatorToolsURL("assets", queue, selCSV, "", "", ""), - "components": operatorToolsURL("components", queue, selCSV, "", "", ""), - "imports": operatorToolsURL("imports", queue, selCSV, "", "", ""), - "maintenance": operatorToolsURL("maintenance", queue, selCSV, "", "", ""), - "all": operatorToolsURL("all", queue, selCSV, "", "", ""), - }, - QueueURLs: map[string]string{ - "all": operatorToolsURL(scope, "all", selCSV, "", "", ""), - "queued": operatorToolsURL(scope, "queued", selCSV, "", "", ""), - "running": operatorToolsURL(scope, "running", selCSV, "", "", ""), - "failed": operatorToolsURL(scope, "failed", selCSV, "", "", ""), - "done": operatorToolsURL(scope, "done", selCSV, "", "", ""), - }, - SelectVisibleURL: operatorToolsURL(scope, queue, selCSV, "select_visible", "", ""), - ClearVisibleURL: operatorToolsURL(scope, queue, selCSV, "clear_visible", "", ""), - ClearSelectionURL: operatorToolsURL(scope, queue, "", "clear_all", "", ""), - RunSelectedURL: operatorToolsURL(scope, queue, selCSV, "", "", "run"), - RetrySelectedURL: operatorToolsURL(scope, queue, selCSV, "", "", "retry"), - CancelSelectedURL: operatorToolsURL(scope, queue, selCSV, "", "", "cancel"), - OpenReviewModalURL: modalURL("edit", "confirm", selCSV, ""), - ImportPreviewURL: anchored("/patterns/io?import_mode=preview&file=operator-batch.csv", "io-import"), - ExportFilteredURL: anchored("/patterns/io?scope=filtered&format=csv&export_ready=1", "io-export"), - ExportSelectedURL: anchored("/patterns/io?scope=selected&format=csv&export_ready=1", "io-export"), - SafetyChecklist: []string{ - "Require explicit selection for batch actions (never infer from hidden defaults).", - "Show scope and queue filters in the action bar before executing.", - "Destructive or high-impact operations must route through a confirm step.", - "Batch result summaries must be exportable and human-readable.", - }, - RecentActivityNotes: []string{ - "Failed runs should stay filterable and retryable without losing scope context.", - "Import and export affordances belong near batch controls, not hidden in settings.", - "Queue status labels must be stable and reused across table rows and summaries.", - }, - } - s.renderTemplate(w, "operator_tools_pattern.html", data) -} - -func (s *Server) handleIOExportCSV(w http.ResponseWriter, r *http.Request) { - if r.URL.Path != "/patterns/io/export.csv" { - http.NotFound(w, r) - return - } - scope := r.URL.Query().Get("scope") - if scope == "" { - scope = "filtered" - } - filename := "2026-02-23 (DEMO) items.csv" - w.Header().Set("Content-Type", "text/csv; charset=utf-8") - w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=%q", filename)) - _, _ = w.Write([]byte{0xEF, 0xBB, 0xBF}) - - var buf bytes.Buffer - cw := csv.NewWriter(&buf) - cw.Comma = ';' - _ = cw.Write([]string{"Code", "Name", "Category", "Status", "Qty"}) - for _, row := range demoControlsRows() { - if scope == "selected" && row.ID%2 == 0 { - continue - } - _ = cw.Write([]string{ - fmt.Sprintf("CMP-%03d", row.ID), - row.Name, - row.Type, - row.Status, - strconv.Itoa((row.ID % 5) + 1), - }) - } - cw.Flush() - _, _ = w.Write(buf.Bytes()) -} - -func (s *Server) handleTimelinePattern(w http.ResponseWriter, r *http.Request) { - if r.URL.Path != "/patterns/timeline" { - http.NotFound(w, r) - return - } - actionFilter := strings.TrimSpace(r.URL.Query().Get("action")) - sourceFilter := strings.TrimSpace(r.URL.Query().Get("source")) - openID := strings.TrimSpace(r.URL.Query().Get("open")) - cardSearch := strings.TrimSpace(r.URL.Query().Get("q")) - activeEventID := strings.TrimSpace(r.URL.Query().Get("event")) - - all := demoTimelineCards() - cards := make([]timelineCard, 0, len(all)) - for _, c := range all { - if actionFilter != "" && !strings.EqualFold(c.Action, actionFilter) { - continue - } - if sourceFilter != "" && !strings.EqualFold(c.Source, sourceFilter) { - continue - } - c.OpenURL = timelineURL(actionFilter, sourceFilter, c.ID, "", "") - c.Open = c.ID == openID - if c.Open && cardSearch != "" { - needle := strings.ToLower(cardSearch) - items := make([]timelineEvent, 0, len(c.Items)) - for _, it := range c.Items { - h := strings.ToLower(strings.Join([]string{it.Action, it.Source, it.Entity, it.Target, it.Slot, it.Device, it.Detail}, " ")) - if strings.Contains(h, needle) { - items = append(items, it) - } - } - c.Items = items - c.Count = len(items) - } - cards = append(cards, c) - } - - var openCard *timelineCard - var activeEvent *timelineEvent - for i := range cards { - if cards[i].ID != openID { - continue - } - openCard = &cards[i] - if len(cards[i].Items) == 0 { - break - } - idx := 0 - if activeEventID != "" { - for j := range cards[i].Items { - if cards[i].Items[j].ID == activeEventID { - idx = j - break - } - } - } - activeEvent = &cards[i].Items[idx] - break - } - - data := timelinePageData{ - Title: "Timeline Cards Pattern", - CurrentPath: "/patterns/timeline", - ActionFilter: actionFilter, - SourceFilter: sourceFilter, - ActionURLs: map[string]string{ - "": timelineURL("", sourceFilter, "", "", ""), - "installation": timelineURL("installation", sourceFilter, "", "", ""), - "removal": timelineURL("removal", sourceFilter, "", "", ""), - "edit": timelineURL("edit", sourceFilter, "", "", ""), - }, - SourceURLs: map[string]string{ - "": timelineURL(actionFilter, "", "", "", ""), - "manual": timelineURL(actionFilter, "manual", "", "", ""), - "ingest": timelineURL(actionFilter, "ingest", "", "", ""), - "system": timelineURL(actionFilter, "system", "", "", ""), - }, - Cards: cards, - OpenCard: openCard, - CardSearch: cardSearch, - ClearCardURL: timelineURL(actionFilter, sourceFilter, "", "", ""), - ActiveEvent: activeEvent, - } - s.renderTemplate(w, "timeline_pattern.html", data) -} - -func validateFormsDemo(d *formsDemoPageData) { - if d.ServerSerial == "" && d.Mode == "register" { - d.FieldErrors["server_serial"] = "Server serial is required in register mode." - } - if d.ComponentSerial == "" { - d.FieldErrors["component_serial"] = "Component serial is required." - } - if d.EventDate == "" { - d.FieldErrors["event_date"] = "Date is required." - } - if d.Location == "" && d.Mode == "register" { - d.FieldErrors["location"] = "Location/slot is required." - } -} - -func (s *Server) renderTemplate(w http.ResponseWriter, name string, data any) { - w.Header().Set("Content-Type", "text/html; charset=utf-8") - if err := s.tmpl.ExecuteTemplate(w, name, data); err != nil { - http.Error(w, "template error", http.StatusInternalServerError) - } -} - -func parseIDSet(values []string) map[string]bool { - out := map[string]bool{} - for _, v := range values { - for _, p := range strings.Split(v, ",") { - p = strings.TrimSpace(p) - if p == "" { - continue - } - out[p] = true - } - } - return out -} - -func selectedIDSlice(values []string) []string { - set := parseIDSet(values) - keys := make([]string, 0, len(set)) - for k := range set { - keys = append(keys, k) - } - sort.Slice(keys, func(i, j int) bool { - ai, aerr := strconv.Atoi(keys[i]) - aj, berr := strconv.Atoi(keys[j]) - if aerr == nil && berr == nil { - return ai < aj - } - return keys[i] < keys[j] - }) - return keys -} - -func joinSelectedIDs(set map[string]bool) string { - if len(set) == 0 { - return "" - } - keys := make([]string, 0, len(set)) - for k := range set { - keys = append(keys, k) - } - sort.Slice(keys, func(i, j int) bool { - ai, aerr := strconv.Atoi(keys[i]) - aj, berr := strconv.Atoi(keys[j]) - if aerr == nil && berr == nil { - return ai < aj - } - return keys[i] < keys[j] - }) - return strings.Join(keys, ",") -} - -func demoControlsRows() []controlsRow { - names := []string{ - "Controller board", "Power module", "NIC adapter", "Drive tray", "Cooling fan", "BMC board", - "CPU module", "Memory kit", "Rail set", "Backplane", "Patch panel", "Optics cage", - } - types := []string{"Compute", "Power", "Networking", "Storage"} - statuses := []string{"ready", "warning", "review"} - rows := make([]controlsRow, 0, len(names)) - for i, n := range names { - rows = append(rows, controlsRow{ - ID: i + 1, - Name: n, - Type: types[i%len(types)], - Status: statuses[i%len(statuses)], - }) - } - return rows -} - -func controlsSegmentURLs(selCSV string) map[string]string { - return map[string]string{ - "all": controlsURL("all", 1, selCSV, "", "", "", nil), - "ready": controlsURL("ready", 1, selCSV, "", "", "", nil), - "warning": controlsURL("warning", 1, selCSV, "", "", "", nil), - "review": controlsURL("review", 1, selCSV, "", "", "", nil), - } -} - -func carryFormFields(q url.Values) url.Values { - out := url.Values{} - for _, k := range []string{"server_serial", "location", "component_serial", "event_date", "details"} { - if v := strings.TrimSpace(q.Get(k)); v != "" { - out.Set(k, v) - } - } - return out -} - -func formsURL(mode, step string, extra url.Values) string { - q := url.Values{} - if mode != "" { - q.Set("mode", mode) - } - if step != "" { - q.Set("step", step) - } - for k, vals := range extra { - for _, v := range vals { - q.Add(k, v) - } - } - if qs := q.Encode(); qs != "" { - return anchored("/patterns/forms?"+qs, "forms-contract") - } - return anchored("/patterns/forms", "forms-contract") -} - -func paginateControlsRows(segment string, selected map[string]bool, rows []controlsRow, page, perPage int) ([]controlsRow, tableDemoPager) { - totalItems := len(rows) - totalPages := 1 - if totalItems > 0 { - totalPages = (totalItems + perPage - 1) / perPage - } - if page < 1 { - page = 1 - } - if page > totalPages { - page = totalPages - } - start := 0 - end := 0 - from := 0 - to := 0 - pageRows := []controlsRow{} - if totalItems > 0 { - start = (page - 1) * perPage - end = start + perPage - if end > totalItems { - end = totalItems - } - from = start + 1 - to = end - pageRows = append(pageRows, rows[start:end]...) - } - selCSV := joinSelectedIDs(selected) - links := buildControlsPageLinks(segment, selCSV, page, totalPages) - pager := tableDemoPager{ - Page: page, - PerPage: perPage, - TotalItems: totalItems, - TotalPages: totalPages, - From: from, - To: to, - Links: links, - } - if page > 1 { - pager.PrevURL = controlsURL(segment, page-1, selCSV, "", "", "", nil) - } - if page < totalPages { - pager.NextURL = controlsURL(segment, page+1, selCSV, "", "", "", nil) - } - return pageRows, pager -} - -func buildControlsPageLinks(segment, selCSV string, current, totalPages int) []tableDemoPageLink { - if totalPages <= 1 { - return nil - } - if totalPages <= 4 { - out := make([]tableDemoPageLink, 0, totalPages) - for p := 1; p <= totalPages; p++ { - out = append(out, tableDemoPageLink{ - Label: strconv.Itoa(p), - URL: controlsURL(segment, p, selCSV, "", "", "", nil), - Current: p == current, - }) - } - return out - } - pages := map[int]bool{ - 1: true, 2: true, - totalPages - 1: true, totalPages: true, - current - 1: true, current: true, current + 1: true, - } - keys := make([]int, 0, len(pages)) - for p := range pages { - if p < 1 || p > totalPages { - continue - } - keys = append(keys, p) - } - sort.Ints(keys) - out := make([]tableDemoPageLink, 0, len(keys)+2) - prev := 0 - for _, p := range keys { - if prev != 0 && p-prev > 1 { - out = append(out, tableDemoPageLink{Label: "...", Ellipsis: true}) - } - out = append(out, tableDemoPageLink{ - Label: strconv.Itoa(p), - URL: controlsURL(segment, p, selCSV, "", "", "", nil), - Current: p == current, - }) - prev = p - } - return out -} - -func controlsURL(segment string, page int, selCSV, selectionAction, id, bulk string, extra map[string]string) string { - q := url.Values{} - if segment != "" { - q.Set("segment", segment) - } - if page > 1 { - q.Set("page", strconv.Itoa(page)) - } - if selCSV != "" { - q.Set("sel", selCSV) - } - if selectionAction != "" { - q.Set("selection_action", selectionAction) - } - if id != "" { - q.Set("id", id) - } - if bulk != "" { - q.Set("bulk", bulk) - } - for k, v := range extra { - if v == "" { - q.Del(k) - continue - } - q.Set(k, v) - } - if qs := q.Encode(); qs != "" { - return anchored("/patterns/controls?"+qs, "controls-selection") - } - return anchored("/patterns/controls", "controls-selection") -} - -func operatorToolsURL(scope, queue, selCSV, selectionAction, id, batch string) string { - q := url.Values{} - if scope != "" { - q.Set("scope", scope) - } - if queue != "" { - q.Set("queue", queue) - } - if selCSV != "" { - q.Set("sel", selCSV) - } - if selectionAction != "" { - q.Set("selection_action", selectionAction) - } - if id != "" { - q.Set("id", id) - } - if batch != "" { - q.Set("batch", batch) - } - if qs := q.Encode(); qs != "" { - return anchored("/patterns/operator-tools?"+qs, "operator-queue") - } - return anchored("/patterns/operator-tools", "operator-queue") -} - -func modalURL(open, stage, selCSV, singleID string) string { - q := url.Values{} - if open != "" { - q.Set("open", open) - } - if stage != "" { - q.Set("stage", stage) - } - if singleID != "" { - q.Set("sel", singleID) - } else if selCSV != "" { - q.Set("sel", selCSV) - } - if qs := q.Encode(); qs != "" { - return anchored("/patterns/modals?"+qs, "modal-open-states") - } - return anchored("/patterns/modals", "modal-open-states") -} - -func timelineURL(action, source, open, qtext, event string) string { - q := url.Values{} - if action != "" { - q.Set("action", action) - } - if source != "" { - q.Set("source", source) - } - if open != "" { - q.Set("open", open) - } - if qtext != "" { - q.Set("q", qtext) - } - if event != "" { - q.Set("event", event) - } - fragment := "timeline-filters" - if open != "" { - fragment = "timeline-drilldown" - } - if qs := q.Encode(); qs != "" { - return anchored("/patterns/timeline?"+qs, fragment) - } - return anchored("/patterns/timeline", fragment) -} - -func anchored(path, fragment string) string { - if fragment == "" { - return path - } - if strings.Contains(path, "#") { - return path - } - return path + "#" + fragment -} - -func demoTimelineCards() []timelineCard { - return []timelineCard{ - { - ID: "c1", - Day: "2026-02-23", - Title: "Installed 3 components", - Action: "installation", - Source: "manual", - Count: 3, - SummaryLeft: []string{"2x Network adapter", "1x Controller board"}, - SummaryRight: []string{"AOC#1", "AOC#2", "CTRL#1"}, - Items: []timelineEvent{ - {ID: "e1", At: "10:12", Action: "installation", Source: "manual", Entity: "Asset A-12", Target: "Network adapter", Slot: "AOC#1", Device: "NIC", Detail: "Installed after maintenance"}, - {ID: "e2", At: "10:13", Action: "installation", Source: "manual", Entity: "Asset A-12", Target: "Network adapter", Slot: "AOC#2", Device: "NIC", Detail: "Installed after maintenance"}, - {ID: "e3", At: "10:16", Action: "installation", Source: "manual", Entity: "Asset A-12", Target: "Controller board", Slot: "CTRL#1", Device: "Controller", Detail: "Replacement unit attached"}, - }, - }, - { - ID: "c2", - Day: "2026-02-23", - Title: "Removed 2 components", - Action: "removal", - Source: "ingest", - Count: 2, - SummaryLeft: []string{"1x PSU module", "1x Cooling fan"}, - SummaryRight: []string{"PSU#2", "FAN#4"}, - Items: []timelineEvent{ - {ID: "e4", At: "08:42", Action: "removal", Source: "ingest", Entity: "Asset B-07", Target: "PSU module", Slot: "PSU#2", Device: "Power", Detail: "Absent in latest snapshot"}, - {ID: "e5", At: "08:42", Action: "removal", Source: "ingest", Entity: "Asset B-07", Target: "Cooling fan", Slot: "FAN#4", Device: "Cooling", Detail: "Absent in latest snapshot"}, - }, - }, - { - ID: "c3", - Day: "2026-02-22", - Title: "Bulk metadata edit", - Action: "edit", - Source: "system", - Count: 4, - SummaryLeft: []string{"Vendor normalized", "Status recomputed"}, - SummaryRight: []string{"4 affected rows"}, - Items: []timelineEvent{ - {ID: "e6", At: "21:11", Action: "edit", Source: "system", Entity: "Asset C-03", Target: "Component metadata", Slot: "AOC#3", Device: "NIC", Detail: "Vendor name normalized"}, - {ID: "e7", At: "21:11", Action: "edit", Source: "system", Entity: "Asset C-03", Target: "Component metadata", Slot: "AOC#4", Device: "NIC", Detail: "Vendor name normalized"}, - {ID: "e8", At: "21:12", Action: "edit", Source: "system", Entity: "Asset C-03", Target: "Status", Slot: "PSU#1", Device: "Power", Detail: "Status recalculated from observations"}, - {ID: "e9", At: "21:12", Action: "edit", Source: "system", Entity: "Asset C-03", Target: "Status", Slot: "PSU#2", Device: "Power", Detail: "Status recalculated from observations"}, - }, - }, - } -} - -func demoOperatorToolJobs() []operatorToolJob { - return []operatorToolJob{ - {ID: "job-101", Tool: "Recompute status", Scope: "assets", Mode: "dry-run", Status: "queued", Owner: "operator", StartedAt: "2026-02-23 10:20"}, - {ID: "job-102", Tool: "Bulk assign labels", Scope: "components", Mode: "apply", Status: "running", Owner: "operator", StartedAt: "2026-02-23 10:16"}, - {ID: "job-103", Tool: "Import snapshot preview", Scope: "imports", Mode: "preview", Status: "done", Owner: "operator", StartedAt: "2026-02-23 10:04"}, - {ID: "job-104", Tool: "Repair mappings", Scope: "components", Mode: "apply", Status: "failed", Owner: "operator", StartedAt: "2026-02-23 09:58"}, - {ID: "job-105", Tool: "Refresh timelines", Scope: "maintenance", Mode: "apply", Status: "queued", Owner: "scheduler", StartedAt: "2026-02-23 09:40"}, - {ID: "job-106", Tool: "Export filtered report", Scope: "assets", Mode: "export", Status: "done", Owner: "operator", StartedAt: "2026-02-23 09:22"}, - {ID: "job-107", Tool: "Validate import mapping", Scope: "imports", Mode: "preview", Status: "running", Owner: "operator", StartedAt: "2026-02-23 09:10"}, - {ID: "job-108", Tool: "Cleanup stale drafts", Scope: "maintenance", Mode: "apply", Status: "failed", Owner: "system", StartedAt: "2026-02-23 08:55"}, - } -} - -func withQuery(base string, updates map[string]string) string { - u, err := url.Parse(base) - if err != nil { - return base - } - q := u.Query() - for k, v := range updates { - if v == "" { - q.Del(k) - continue - } - q.Set(k, v) - } - u.RawQuery = q.Encode() - return u.String() -} - -func dict(args ...string) map[string]string { - out := map[string]string{} - for i := 0; i+1 < len(args); i += 2 { - out[args[i]] = args[i+1] - } - return out -} diff --git a/demo/internal/web/server.go b/demo/internal/web/server.go deleted file mode 100644 index 9c94967..0000000 --- a/demo/internal/web/server.go +++ /dev/null @@ -1,340 +0,0 @@ -package web - -import ( - "fmt" - "html/template" - "io/fs" - "net/http" - "net/url" - "sort" - "strconv" - "strings" - - appweb "git.mchus.pro/mchus/ui-design-code-demo/web" -) - -type Server struct { - mux *http.ServeMux - tmpl *template.Template -} - -type PatternCard struct { - ID string - Name string - Bundle string - Link string - Status string - Summary string -} - -type IndexViewData struct { - Title string - CurrentPath string - Bundles []PatternCard - Patterns []PatternCard -} - -type tableDemoRow struct { - ID int - Name string - Category string - Status string - Owner string - Updated string -} - -type tableDemoFilters struct { - Query string - Category string - Status string -} - -type tableDemoPager struct { - Page int - PerPage int - TotalItems int - TotalPages int - From int - To int - PrevURL string - NextURL string - Links []tableDemoPageLink -} - -type tableDemoPageLink struct { - Label string - URL string - Current bool - Ellipsis bool -} - -type tableDemoPageData struct { - Title string - CurrentPath string - Rows []tableDemoRow - Filters tableDemoFilters - Pager tableDemoPager - PerPage int - PerPageOpts []int - Categories []string - Statuses []string -} - -func NewServer() (*Server, error) { - tmpl, err := template.New("demo").Funcs(template.FuncMap{ - "withQuery": withQuery, - "dict": dict, - }).ParseFS(appweb.Assets, "templates/*.html") - if err != nil { - return nil, err - } - s := &Server{mux: http.NewServeMux(), tmpl: tmpl} - s.registerRoutes() - return s, nil -} - -func (s *Server) Handler() http.Handler { return s.mux } - -func (s *Server) registerRoutes() { - s.mux.HandleFunc("/", s.handleIndex) - s.mux.HandleFunc("/patterns/table", s.handleTablePattern) - s.mux.HandleFunc("/patterns/controls", s.handleControlsPattern) - s.mux.HandleFunc("/patterns/modals", s.handleModalPattern) - s.mux.HandleFunc("/patterns/io", s.handleIOPattern) - s.mux.HandleFunc("/patterns/io/export.csv", s.handleIOExportCSV) - s.mux.HandleFunc("/patterns/forms", s.handleFormsPattern) - s.mux.HandleFunc("/patterns/style-playground", s.handleStylePlaygroundPattern) - s.mux.HandleFunc("/patterns/operator-tools", s.handleOperatorToolsPattern) - s.mux.HandleFunc("/patterns/timeline", s.handleTimelinePattern) - s.mux.HandleFunc("/healthz", s.handleHealthz) - staticFS, err := fs.Sub(appweb.Assets, "static") - if err == nil { - s.mux.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.FS(staticFS)))) - } -} - -func (s *Server) handleIndex(w http.ResponseWriter, r *http.Request) { - if r.URL.Path != "/" { - http.NotFound(w, r) - return - } - data := IndexViewData{ - Title: "UI Design Code", - CurrentPath: "/", - Bundles: []PatternCard{ - {ID: "ai-rules", Name: "AI Rules", Bundle: "ai-rules", Status: "ready", Summary: "CLAUDE/AGENTS templates + shared architecture doc policy."}, - {ID: "bible-core", Name: "Bible Core", Bundle: "bible-core", Status: "ready", Summary: "Canonical Bible skeleton for Go web projects using AI coding agents."}, - {ID: "go-web-skeleton", Name: "Go Web Skeleton", Bundle: "go-web-skeleton", Status: "ready", Summary: "Minimal net/http + templates scaffold for host repos."}, - }, - Patterns: []PatternCard{ - {ID: "table-pagination", Name: "Table + Pagination", Bundle: "ui-pattern-table", Link: "/patterns/table", Status: "ready", Summary: "Server-side filters + pagination contract for canonical list pages."}, - {ID: "controls-selection", Name: "Controls + Selection", Bundle: "ui-pattern-controls", Link: "/patterns/controls", Status: "ready", Summary: "Buttons, checkboxes, bulk-selection, segmented actions, status chips."}, - {ID: "modal-workflows", Name: "Modal Workflows", Bundle: "ui-pattern-modal", Link: "/patterns/modals", Status: "ready", Summary: "Create/edit/remove + confirm modal workflow contracts for admin and detail pages."}, - {ID: "import-export", Name: "Import / Export", Bundle: "ui-pattern-io", Link: "/patterns/io", Status: "ready", Summary: "File import forms, preview/confirm UX, CSV export controls and download endpoint."}, - {ID: "forms-validation", Name: "Forms + Validation", Bundle: "ui-pattern-forms", Link: "/patterns/forms", Status: "ready", Summary: "Inline validation, datalist suggestions, tabs/steps, confirm-before-submit forms."}, - {ID: "operator-tools", Name: "Operator Tools", Bundle: "ui-pattern-operator-tools", Link: "/patterns/operator-tools", Status: "ready", Summary: "Complex operator/admin dashboards: queue tables, batch actions, safety checks, and run states."}, - {ID: "timeline-cards", Name: "Timeline Cards", Bundle: "ui-pattern-timeline", Link: "/patterns/timeline", Status: "ready", Summary: "Grouped timeline cards with drilldown modal and in-card filtering."}, - }, - } - w.Header().Set("Content-Type", "text/html; charset=utf-8") - if err := s.tmpl.ExecuteTemplate(w, "base.html", data); err != nil { - http.Error(w, "template error", http.StatusInternalServerError) - } -} - -func (s *Server) handleHealthz(w http.ResponseWriter, _ *http.Request) { - w.WriteHeader(http.StatusOK) - _, _ = w.Write([]byte("ok")) -} - -func (s *Server) handleTablePattern(w http.ResponseWriter, r *http.Request) { - if r.URL.Path != "/patterns/table" { - http.NotFound(w, r) - return - } - filters := tableDemoFilters{ - Query: strings.TrimSpace(r.URL.Query().Get("q")), - Category: strings.TrimSpace(r.URL.Query().Get("category")), - Status: strings.TrimSpace(r.URL.Query().Get("status")), - } - allRows := demoTableRows() - filtered := make([]tableDemoRow, 0, len(allRows)) - for _, row := range allRows { - if !matchesTableFilters(row, filters) { - continue - } - filtered = append(filtered, row) - } - page := parsePositiveInt(r.URL.Query().Get("page"), 1) - perPage := parseAllowedInt(r.URL.Query().Get("per_page"), 10, []int{5, 10, 20}) - rowsPage, pager := paginateTableRows(r.URL, filtered, page, perPage) - data := tableDemoPageData{ - Title: "Table + Pagination Pattern", - CurrentPath: "/patterns/table", - Rows: rowsPage, - Filters: filters, - Pager: pager, - PerPage: perPage, - PerPageOpts: []int{5, 10, 20}, - Categories: []string{"Compute", "Networking", "Power", "Storage"}, - Statuses: []string{"ready", "warning", "review"}, - } - w.Header().Set("Content-Type", "text/html; charset=utf-8") - if err := s.tmpl.ExecuteTemplate(w, "table_pattern.html", data); err != nil { - http.Error(w, "template error", http.StatusInternalServerError) - } -} - -func matchesTableFilters(row tableDemoRow, f tableDemoFilters) bool { - if f.Query != "" { - q := strings.ToLower(f.Query) - haystack := strings.ToLower(strings.Join([]string{row.Name, row.Category, row.Status, row.Owner}, " ")) - if !strings.Contains(haystack, q) { - return false - } - } - if f.Category != "" && !strings.EqualFold(row.Category, f.Category) { - return false - } - if f.Status != "" && !strings.EqualFold(row.Status, f.Status) { - return false - } - return true -} - -func paginateTableRows(u *url.URL, rows []tableDemoRow, page, perPage int) ([]tableDemoRow, tableDemoPager) { - totalItems := len(rows) - totalPages := 1 - if totalItems > 0 { - totalPages = (totalItems + perPage - 1) / perPage - } - if page < 1 { - page = 1 - } - if page > totalPages { - page = 1 - } - start := 0 - end := 0 - from := 0 - to := 0 - pageRows := []tableDemoRow{} - if totalItems > 0 { - start = (page - 1) * perPage - end = start + perPage - if end > totalItems { - end = totalItems - } - from = start + 1 - to = end - pageRows = rows[start:end] - } - pager := tableDemoPager{ - Page: page, - PerPage: perPage, - TotalItems: totalItems, - TotalPages: totalPages, - From: from, - To: to, - Links: buildPageLinks(u, page, totalPages), - } - return pageRows, pager -} - -func pageURL(u *url.URL, page, totalPages int) string { - if totalPages < 1 { - totalPages = 1 - } - if page < 1 || page > totalPages { - return "" - } - clone := *u - q := clone.Query() - q.Set("page", strconv.Itoa(page)) - clone.RawQuery = q.Encode() - return clone.String() -} - -func buildPageLinks(u *url.URL, current, totalPages int) []tableDemoPageLink { - if totalPages <= 1 { - return nil - } - if totalPages <= 4 { - out := make([]tableDemoPageLink, 0, totalPages) - for p := 1; p <= totalPages; p++ { - out = append(out, tableDemoPageLink{ - Label: strconv.Itoa(p), - URL: pageURL(u, p, totalPages), - Current: p == current, - }) - } - return out - } - pages := map[int]bool{ - 1: true, 2: true, - totalPages: true, totalPages - 1: true, - current: true, current - 1: true, current + 1: true, - } - keys := make([]int, 0, len(pages)) - for p := range pages { - if p < 1 || p > totalPages { - continue - } - keys = append(keys, p) - } - sort.Ints(keys) - out := make([]tableDemoPageLink, 0, len(keys)+2) - prev := 0 - for _, p := range keys { - if prev != 0 && p-prev > 1 { - out = append(out, tableDemoPageLink{Label: "...", Ellipsis: true}) - } - out = append(out, tableDemoPageLink{ - Label: strconv.Itoa(p), - URL: pageURL(u, p, totalPages), - Current: p == current, - }) - prev = p - } - return out -} - -func parsePositiveInt(v string, fallback int) int { - n, err := strconv.Atoi(v) - if err != nil || n < 1 { - return fallback - } - return n -} - -func parseAllowedInt(v string, fallback int, allowed []int) int { - n := parsePositiveInt(v, fallback) - for _, candidate := range allowed { - if n == candidate { - return n - } - } - return fallback -} - -func demoTableRows() []tableDemoRow { - rows := make([]tableDemoRow, 0, 36) - categories := []string{"Compute", "Networking", "Storage", "Power"} - statuses := []string{"ready", "warning", "review"} - owners := []string{"Ops", "Infra", "QA", "Procurement"} - for i := 1; i <= 36; i++ { - rows = append(rows, tableDemoRow{ - ID: i, - Name: fmt.Sprintf("Component Spec %02d", i), - Category: categories[(i-1)%len(categories)], - Status: statuses[(i-1)%len(statuses)], - Owner: owners[(i-1)%len(owners)], - Updated: fmt.Sprintf("2026-02-%02d", (i%23)+1), - }) - } - // Seed a few targeted names to make filter behavior testable and demonstrative. - rows[4].Name = "Rack Controller Alpha" - rows[11].Name = "Rack Controller Beta" - rows[20].Name = "Rack Controller Gamma" - return rows -} diff --git a/demo/internal/web/server_test.go b/demo/internal/web/server_test.go deleted file mode 100644 index 9cb1e3a..0000000 --- a/demo/internal/web/server_test.go +++ /dev/null @@ -1,292 +0,0 @@ -package web - -import ( - "bytes" - "net/http" - "net/http/httptest" - "strings" - "testing" -) - -func TestRoutes(t *testing.T) { - srv, err := NewServer() - if err != nil { - t.Fatalf("NewServer: %v", err) - } - - t.Run("index", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - if !strings.Contains(rr.Body.String(), "UI Design Code") { - t.Fatalf("unexpected body: %s", rr.Body.String()) - } - }) - - t.Run("healthz", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/healthz", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - }) - - t.Run("static", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/static/css/app.css", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - }) - - t.Run("table pattern page", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/table", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - body := rr.Body.String() - if !strings.Contains(body, "Canonical List Page") { - t.Fatalf("missing table demo content in body") - } - if !strings.Contains(body, "Showing 1–10 of 36") { - t.Fatalf("missing summary: %s", body) - } - }) - - t.Run("controls pattern page", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/controls?segment=warning", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - body := rr.Body.String() - if !strings.Contains(body, "Selection Table") { - t.Fatalf("missing controls page content") - } - }) - - t.Run("controls selection toggle persists in query links", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/controls?segment=all&selection_action=toggle&id=2", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - body := rr.Body.String() - if !strings.Contains(body, "1 selected") { - t.Fatalf("expected selected counter, got body") - } - if !strings.Contains(body, "sel=2") { - t.Fatalf("expected selected id in follow-up links") - } - }) - - t.Run("controls select visible", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/controls?segment=warning&selection_action=select_visible", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - body := rr.Body.String() - if !strings.Contains(body, "4 selected") { - t.Fatalf("expected all visible selected") - } - }) - - t.Run("modal pattern page", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/modals?open=edit&stage=confirm&sel=1", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - body := rr.Body.String() - if !strings.Contains(body, "Confirmation Summary") || !strings.Contains(body, "Single-modal workflow progression") { - t.Fatalf("missing modal page markers") - } - }) - - t.Run("io pattern page", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/io?import_mode=confirm&export_ready=1", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - body := rr.Body.String() - if !strings.Contains(body, "Import / Export Pattern") || !strings.Contains(body, "Download CSV") { - t.Fatalf("missing io page markers") - } - }) - - t.Run("forms pattern page", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/forms?mode=register&step=review", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - body := rr.Body.String() - if !strings.Contains(body, "Forms") || !strings.Contains(body, "Validation Pattern") || !strings.Contains(body, "Review Summary") { - t.Fatalf("missing forms page markers") - } - if !strings.Contains(body, "Server serial is required") { - t.Fatalf("expected validation message") - } - }) - - t.Run("style playground pattern page", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/style-playground?style=slate", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - body := rr.Body.String() - if !strings.Contains(body, "Style Playground") || !strings.Contains(body, "Theme Presets") { - t.Fatalf("missing style playground markers") - } - if !strings.Contains(body, "theme-slate") { - t.Fatalf("expected theme class in body") - } - }) - - t.Run("style playground extra presets", func(t *testing.T) { - for _, tc := range []struct { - name string - style string - expectMark string - }{ - {name: "y2k silver", style: "y2k-silver", expectMark: "theme-y2k-silver"}, - {name: "vaporwave alias", style: "vaporwave", expectMark: "theme-vaporwave"}, - {name: "vaporwave soft", style: "vaporwave-soft", expectMark: "theme-vaporwave"}, - {name: "vaporwave night", style: "vaporwave-night", expectMark: "theme-vaporwave-night"}, - {name: "aqua", style: "aqua", expectMark: "theme-aqua"}, - {name: "win9x", style: "win9x", expectMark: "theme-win9x"}, - } { - t.Run(tc.name, func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/style-playground?style="+tc.style, nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - body := rr.Body.String() - if !strings.Contains(body, tc.expectMark) { - t.Fatalf("expected theme marker %q", tc.expectMark) - } - if !strings.Contains(body, "Y2K Silver") || !strings.Contains(body, "Vapor Soft") || !strings.Contains(body, "Vapor Night") || !strings.Contains(body, "Aqua") || !strings.Contains(body, "Win9x") { - t.Fatalf("expected preset tabs in switcher") - } - }) - } - }) - - t.Run("operator tools pattern page", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/operator-tools?scope=components&queue=failed", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - body := rr.Body.String() - if !strings.Contains(body, "Operator Tools Pattern") || !strings.Contains(body, "Operations Queue") { - t.Fatalf("missing operator tools page markers") - } - }) - - t.Run("timeline pattern page", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/timeline?open=c1", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - body := rr.Body.String() - if !strings.Contains(body, "Timeline Cards Pattern") || !strings.Contains(body, "Open details") { - t.Fatalf("missing timeline page markers") - } - if !strings.Contains(body, "Event Detail") { - t.Fatalf("expected drilldown panel when card is open") - } - }) - - t.Run("io export csv endpoint", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/io/export.csv?scope=selected", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - if got := rr.Header().Get("Content-Type"); !strings.Contains(got, "text/csv") { - t.Fatalf("content-type=%q", got) - } - if got := rr.Header().Get("Content-Disposition"); !strings.Contains(got, "items.csv") { - t.Fatalf("content-disposition=%q", got) - } - body := rr.Body.Bytes() - if len(body) < 3 || !bytes.Equal(body[:3], []byte{0xEF, 0xBB, 0xBF}) { - t.Fatalf("missing UTF-8 BOM") - } - if !strings.Contains(string(body), "Code;Name;Category;Status;Qty") { - t.Fatalf("unexpected csv header") - } - }) - - t.Run("table pattern filters before pagination", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/table?q=Rack&page=99", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - body := rr.Body.String() - if !strings.Contains(body, "Showing 1–3 of 3") { - t.Fatalf("expected filtered summary, got: %s", body) - } - if !strings.Contains(body, "Rack Controller Alpha") { - t.Fatalf("expected filtered rows") - } - if strings.Contains(body, "Component Spec 36") { - t.Fatalf("unexpected unrelated row present") - } - }) - - t.Run("table pattern keeps filter params in pager links", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/table?status=ready", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - body := rr.Body.String() - if !strings.Contains(body, "status=ready") { - t.Fatalf("expected status filter in pagination links") - } - }) - - t.Run("table pattern empty result", func(t *testing.T) { - rr := httptest.NewRecorder() - req := httptest.NewRequest(http.MethodGet, "/patterns/table?q=does-not-exist", nil) - srv.Handler().ServeHTTP(rr, req) - if rr.Code != http.StatusOK { - t.Fatalf("status=%d", rr.Code) - } - body := rr.Body.String() - if !strings.Contains(body, "No rows match current filters.") { - t.Fatalf("expected empty-state message") - } - if !strings.Contains(body, "Showing 0 of 0") { - t.Fatalf("expected zero summary") - } - }) -} diff --git a/demo/web/embed.go b/demo/web/embed.go deleted file mode 100644 index 24ad6f5..0000000 --- a/demo/web/embed.go +++ /dev/null @@ -1,6 +0,0 @@ -package web - -import "embed" - -//go:embed templates/* static/* -var Assets embed.FS diff --git a/demo/web/static/css/app.css b/demo/web/static/css/app.css deleted file mode 100644 index 8f7aa7a..0000000 --- a/demo/web/static/css/app.css +++ /dev/null @@ -1,4995 +0,0 @@ -:root { - --anchor-offset: clamp(180px, 36vh, 420px); - --bg: #e6e8ee; - --ink: #1f2023; - --muted: #5d646f; - --panel: linear-gradient(180deg, rgba(244, 245, 248, 0.98), rgba(224, 227, 234, 0.96) 55%, rgba(232, 235, 241, 0.97)); - --line: #b9cbe0; - --accent: linear-gradient(180deg, #85b8ef 0%, #93c6fb 26%, #abd8ff 55%, #c7e8ff 82%, #def2ff 100%); - --accent-line: #88a4d4; - --accent-soft: #d8ecff; - --ready: #256b43; - --draft: #8a5a11; - --planned: #5a5f89; -} - -* { box-sizing: border-box; } -.icon-sprite { - position: absolute; - width: 0; - height: 0; - overflow: hidden; -} -html { - scroll-padding-top: var(--anchor-offset); -} -:target { - /* Keep anchored modules below the sticky shell/nav so the module header remains visible. */ - scroll-margin-top: var(--anchor-offset); -} -body { - margin: 0; - color: var(--ink); - background: - radial-gradient(760px 360px at 14% 6%, rgba(255,255,255,0.82), transparent 72%), - radial-gradient(760px 360px at 88% 8%, rgba(154, 203, 247, 0.16), transparent 74%), - linear-gradient(#eef1f6, #dde2ea); - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -.demo-topnav { - position: sticky; - top: 0; - z-index: 20; - background: rgba(236, 240, 246, 0.86); - backdrop-filter: blur(10px); - border-bottom: 1px solid rgba(185, 203, 224, 0.82); -} -.demo-topnav-inner { - max-width: 1040px; - margin: 0 auto; - padding: 8px 16px; - display: flex; - gap: 6px; - flex-wrap: wrap; - align-items: center; -} -.demo-topnav-brand, -.demo-topnav-link { - text-decoration: none; - color: var(--ink); - border: 1px solid transparent; - border-radius: 999px; - padding: 4px 10px; - font-size: 11px; - font-weight: 600; - color: #4c5561; - line-height: 1.1; -} -.demo-topnav-brand { - font-weight: 600; - margin-right: 4px; - border-color: #a8adb6; - background: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 1px rgba(0,0,0,0.04); -} -.demo-topnav-brand.active, -.demo-topnav-link.active { - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.18) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - border-color: #adb2bb; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 1px 1px rgba(0,0,0,0.04); - color: #2f353d; -} -.demo-topnav-link:hover { - background: rgba(255,255,255,0.44); - border-color: rgba(173, 178, 187, 0.75); -} -.page { - max-width: 1040px; - margin: 0 auto; - padding: 20px 16px 56px; -} -.app-shell { - position: relative; - min-height: var(--shell-height, 64px); - border-bottom: 1px solid rgba(176, 189, 206, 0.78); - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.20) 34%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0)), - rgba(230, 235, 242, 0.84); - backdrop-filter: blur(8px); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.86), - inset 0 -1px 0 rgba(145, 160, 179, 0.10); -} -.app-shell::after { - content: ""; - position: absolute; - left: 0; - right: 0; - bottom: -1px; - height: 3px; - background: var(--shell-accent, linear-gradient(90deg, #ffd9f3 0%, #e8c9ff 44%, #b8ddff 100%)); - border-top: 1px solid var(--shell-accent-line, #bf92e3); - box-shadow: 0 0 16px var(--shell-accent-shadow, rgba(191, 146, 227, 0.32)); - pointer-events: none; -} -.app-shell-inner { - max-width: 1040px; - margin: 0 auto; - padding: var(--shell-pad-y, 10px) 16px; - display: flex; - justify-content: space-between; - gap: 14px; - align-items: flex-start; -} -.app-shell-kicker { - margin: 0; - text-transform: uppercase; - letter-spacing: 0.10em; - color: var(--shell-kicker, #717986); - font-size: 10px; - font-weight: 600; -} -.app-shell-title { - margin: 1px 0 0; - font-size: 16px; - line-height: 1.08; - font-weight: 700; - color: var(--shell-title, #2f343b); - text-shadow: 0 1px 0 rgba(255,255,255,0.26); -} -.app-shell-subtitle { - margin: 1px 0 0; - font-size: 11px; - line-height: 1.15; - color: var(--shell-subtitle, #6b7480); -} -.app-shell-statuses { - display: flex; - flex-wrap: wrap; - gap: 5px; - justify-content: flex-end; - align-items: center; -} -.theme-switch { - display: inline-flex; - align-items: center; - gap: 0; - margin-left: 4px; - border: 1px solid #cdbfe5; - border-radius: 999px; - overflow: hidden; - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #faf7ff 0%, #ede9f6 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.84); -} -.theme-switch-btn { - appearance: none; - border: 0; - border-left: 1px solid rgba(184, 171, 217, 0.5); - background: transparent; - color: #5f5578; - cursor: pointer; - font: inherit; - font-size: 11px; - font-weight: 700; - line-height: 1; - padding: 5px 9px; -} -.theme-switch-btn:first-child { border-left: 0; } -.theme-switch-btn:hover { background: rgba(255,255,255,0.22); } -.theme-switch-btn.active { - color: #2f2048; - background: - radial-gradient(150% 90% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.26) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffd9f3 0%, #e8c9ff 46%, #b9ddff 100%); -} -.shell-pill { - display: inline-flex; - align-items: center; - border: 1px solid var(--line); - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - border-radius: 999px; - padding: 3px 9px; - font-size: 10px; - line-height: 1; - font-weight: 600; - white-space: nowrap; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(164, 172, 182, 0.06), - 0 1px 1px rgba(0,0,0,0.03); -} -.shell-pill-env { - border-color: #bbc4cf; - color: #59626f; -} -.shell-pill-db { - border-color: #a8cdae; - color: #3a7446; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #eef8ef 0%, #d9eddc 100%); -} -.shell-pill-user { - border-color: #bdd0e2; - color: #476989; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #edf5ff 0%, #dbeafa 100%); -} -.masthead { - padding: 14px 16px; - border: 1px solid var(--line); - border-radius: 18px; - background: - repeating-linear-gradient(to bottom, rgba(255,255,255,0.22) 0 1px, rgba(183,194,208,0.08) 1px 3px), - var(--panel); - box-shadow: 0 12px 26px rgba(78, 107, 139, 0.10), inset 0 1px 0 rgba(255,255,255,0.96); -} -.label { - margin: 0; - text-transform: uppercase; - letter-spacing: 0.09em; - color: #5f6772; - font-size: 12px; -} -h1 { margin: 6px 0 8px; font-size: 30px; } -.lead { margin: 0; color: var(--muted); } -.panel { - margin-top: 16px; - padding: 14px; - border: 1px solid var(--line); - border-radius: 18px; - background: - repeating-linear-gradient(to bottom, rgba(255,255,255,0.22) 0 1px, rgba(183,194,208,0.08) 1px 3px), - var(--panel); - box-shadow: 0 10px 20px rgba(78, 107, 139, 0.09), inset 0 1px 0 rgba(255,255,255,0.96); -} -.panel-composite { - padding-top: 12px; - padding-bottom: 12px; -} -.panel-subsection { - display: block; -} -.panel-subsection-divider { - margin-top: 12px; - padding-top: 12px; - border-top: 1px solid #c7d3e0; -} -.panel-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - margin-bottom: 10px; -} -.panel-head .button-demo-row { margin-top: 0; } -.panel-head h2 { - margin: 0; - font-size: 16px; - font-weight: 600; - color: #2f3338; - text-shadow: 0 1px 0 rgba(255,255,255,0.45); -} -.pill { - text-decoration: none; - color: var(--ink); - border: 1px solid var(--line); - border-radius: 999px; - padding: 6px 10px; - background: #fff; - font-size: 13px; -} -.grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 12px; -} -.card { - border: 1px solid var(--line); - border-radius: 14px; - background: - linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.0) 29%), - linear-gradient(180deg, rgba(252,252,253,0.99), rgba(240, 244, 249, 0.97) 44%, rgba(228, 238, 248, 0.96) 78%, rgba(221, 234, 248, 0.96)); - padding: 14px; - min-height: 140px; -} -.row { - display: flex; - justify-content: space-between; - gap: 8px; - align-items: start; -} -.row h3 { - margin: 0; - font-size: 17px; - font-weight: 600; - color: #2f3338; - text-shadow: 0 1px 0 rgba(255,255,255,0.40); -} -.card p { margin: 10px 0 0; color: var(--muted); } -.meta { font-size: 12px; color: #666d77; font-weight: 500; } -.masthead h1 { - font-size: 25px; - line-height: 1.08; - font-weight: 700; - color: #272b31; - text-shadow: 0 1px 0 rgba(255,255,255,0.36); -} -.masthead .lead { - font-size: 12px; - line-height: 1.25; - color: #5d6672; -} -.masthead .meta { - margin-top: 8px; -} -.chip-link { - display: inline-flex; - align-items: center; - text-decoration: none; - border: 1px solid #aeb4bd; - border-radius: 999px; - min-height: 24px; - padding: 2px 10px; - color: #545d6a; - font-size: 12px; - font-weight: 600; - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f8f8fa 0%, #ededf0 62%, #e6e6ea 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 1px 0 rgba(255,255,255,0.18); -} -.chip-link:hover { filter: brightness(1.01); } - -/* Home page (catalog) Aqua hierarchy and typography tuning. */ -#home-overview.masthead { - background: - linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.12) 34%, rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.24) 0 1px, rgba(176,191,208,0.08) 1px 3px), - linear-gradient(180deg, rgba(239, 243, 249, 0.98), rgba(225, 231, 239, 0.97)); - border-color: #b8cbe0; - box-shadow: - 0 14px 28px rgba(72, 100, 130, 0.10), - inset 0 1px 0 rgba(255,255,255,0.98), - inset 0 -1px 0 rgba(130, 156, 188, 0.14); -} -#home-overview .label { - color: #6a7280; - letter-spacing: 0.11em; - font-size: 11px; -} -#home-overview h1 { - margin: 5px 0 6px; - font-size: 30px; - line-height: 1.05; - font-weight: 700; - color: #272b31; - text-shadow: 0 1px 0 rgba(255,255,255,0.42); -} -#home-overview .lead { - max-width: 860px; - color: #59616c; - font-size: 13px; - line-height: 1.28; -} -#home-overview .button-demo-row { - gap: 6px; -} -#home-overview .button-demo-row .chip-link { border-color: #b4bcc8; } -#home-overview .button-demo-row .chip-link:hover { - border-color: #aab3bf; -} - -#home-design-approach .card, -#home-anti-patterns .card, -#home-bundles .card, -#home-roadmap .card { - background: - linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.18) 30%, rgba(255,255,255,0)), - linear-gradient(180deg, rgba(246,248,251,0.98), rgba(230,237,245,0.96)); - border-color: #bfd1e3; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.95); -} -#home-design-approach .panel-head h2, -#home-workflow .panel-head h2, -#home-standardizes .panel-head h2, -#home-anti-patterns .panel-head h2, -#home-bundles .panel-head h2, -#home-roadmap .panel-head h2 { - font-size: 17px; - font-weight: 600; - color: #30343a; - text-shadow: 0 1px 0 rgba(255,255,255,0.38); -} -#home-design-approach .panel-head, -#home-workflow .panel-head, -#home-standardizes .panel-head, -#home-anti-patterns .panel-head, -#home-bundles .panel-head, -#home-roadmap .panel-head { - margin-bottom: 10px; -} -#home-design-approach .card h3, -#home-anti-patterns .card h3, -#home-bundles .card h3, -#home-roadmap .card h3 { - font-size: 15px; - font-weight: 600; - line-height: 1.15; - color: #2f3338; -} -#home-design-approach .card p, -#home-anti-patterns .card p, -#home-bundles .card p, -#home-roadmap .card p { - color: #5b6470; - font-size: 13px; - line-height: 1.28; - font-weight: 400; -} - -#home-workflow .timeline-card { - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.12) 28%, rgba(255,255,255,0)), - linear-gradient(180deg, rgba(242,245,249,0.98), rgba(229,235,243,0.96)); - border-color: #becfe1; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.96); -} -#home-workflow .timeline-card-top h3 { - margin: 2px 0 0; - font-size: 15px; - font-weight: 600; - color: #2f3338; -} -#home-workflow .timeline-card .meta { - margin-top: 8px; - color: #5f6773; - font-size: 12px; - line-height: 1.28; - font-weight: 400; -} - -#home-standardizes .chip-row { - gap: 7px; -} -#home-standardizes .chip { - border-color: #b6c7da; - color: #495767; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f9fc 0%, #ebf0f6 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 1px 0 rgba(255,255,255,0.24); -} - -#home-bundles .status, -#home-roadmap .status { - min-width: 58px; - text-align: center; -} -#home-bundles .meta code, -#home-roadmap .meta code { - background: #eef3fb; - color: #666f7c; - border: 1px solid #c4d2e1; - font-size: 12px; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.75); -} -.text-link { - color: #214a78; - text-decoration: none; - border-bottom: 1px solid rgba(33, 74, 120, 0.35); -} -.text-link:hover { border-bottom-color: rgba(33, 74, 120, 0.75); } -.button-demo-row { - display: flex; - gap: 8px; - flex-wrap: wrap; - margin-top: 10px; -} -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - text-decoration: none; - position: relative; - overflow: hidden; - border-radius: 7px; - min-height: 27px; - padding: 2px 11px; - border: 1px solid #9a9ba0; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.20) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #ffffff 0%, #f0f0f2 62%, #e8e8eb 100%); - color: #1b1b1d; - font-size: 13px; - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 500; - cursor: pointer; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.70); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -1px 0 rgba(172,172,176,0.08), - 0 1px 0 rgba(255,255,255,0.42), - 0 1px 1px rgba(0,0,0,0.08); -} -.btn:hover { - filter: brightness(1.01); -} -.btn:disabled { - opacity: 1; - cursor: not-allowed; -} -.btn-primary { - color: #18273d; - text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.20); - border-color: var(--accent-line); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.54) 24%, rgba(255,255,255,0.14) 38%, rgba(255,255,255,0) 39%), - var(--accent); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.96), - 0 1px 0 rgba(255,255,255,0.46), - 0 0 0 1px rgba(181, 213, 246, 0.16); -} -.btn-primary::before { - content: ""; - position: absolute; - left: 6px; - right: 6px; - top: 1px; - height: 36%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.12) 60%, rgba(255,255,255,0)); - pointer-events: none; -} -.btn-primary:hover { filter: brightness(1.01); } -.btn-secondary { - border-color: #a8abb0; - color: #5a6473; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); -} -.btn-secondary:hover { filter: brightness(1.01); } -.btn-danger, -.tool-btn-danger { - border-color: #c79e98; - color: #6f2e2a; - text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%); -} -.btn-danger:hover, -.tool-btn-danger:hover { filter: brightness(1.01); } -.btn-ghost { - border-color: #a8abb0; - color: #636b78; - background: - linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fcfcfd 0%, #f1f1f3 62%, #ebebee 100%); -} -.btn-ghost:hover { - filter: brightness(1.01); -} -.btn-quiet { background: transparent; } -.btn-quiet { border-color: #cfd7e0; color: #2d4960; } -.btn-quiet:hover { background: #edf3f8; border-color: #bccbda; } -.btn-pair { width: 120px; } -.btn.is-loading, -.btn[aria-disabled="true"] { - opacity: 1; - pointer-events: none; - color: #b1b5bc; - border-color: #d0d3d8; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.04) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f7f9 0%, #eceef1 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.84), - 0 1px 0 rgba(255,255,255,0.26); -} -.btn.is-loading::before { - content: ""; - width: 12px; - height: 12px; - border-radius: 50%; - border: 2px solid rgba(45, 73, 96, 0.25); - border-top-color: rgba(45, 73, 96, 0.95); - animation: spin 0.8s linear infinite; -} -.status { - white-space: nowrap; - border-radius: 999px; - padding: 3px 8px; - font-size: 12px; - text-transform: lowercase; - border: 1px solid currentColor; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.72); -} -.status-ready { color: #356941; border-color: #9dc7a5; background: linear-gradient(180deg, #edf8ef 0%, #d8eddd 100%); } -.status-warning { color: #8a6221; border-color: #d8bf7f; background: linear-gradient(180deg, #fff7e6 0%, #f6e6bf 100%); } -.status-review { color: #5c528f; border-color: #b5addc; background: linear-gradient(180deg, #f3efff 0%, #e3dbfb 100%); } -.status-queued { color: #7a5a00; background: #fff6da; } -.status-running { color: #0f5d7a; background: #e7f6fb; } -.status-failed { color: #8b3d39; border-color: #d4aaaa; background: linear-gradient(180deg, #fff0ee 0%, #f4d7d3 100%); } -.status-done { color: #1d6b3b; background: #e9f8ef; } -.status-draft { color: var(--draft); background: #fff5e6; } -.status-planned { color: var(--planned); background: #eff0fb; } -code { - background: #f4ede0; - border-radius: 6px; - padding: 1px 5px; -} -.filters { - display: grid; - grid-template-columns: 2fr 1fr 1fr auto; - gap: 8px; - align-items: end; -} -.filters label { - display: grid; - gap: 4px; - font-size: 12px; - font-weight: 600; - color: #646d79; -} -.filters label > :first-child { - line-height: 1.1; -} -.filters input, -.filters select, -.forms-grid input, -.forms-grid select, -.forms-grid textarea { - width: 100%; - border: 1px solid var(--line); - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfb 0%, #e8e8ea 100%); - border-radius: 6px; - padding: 7px 9px; - color: var(--ink); - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - font-weight: 400; - line-height: 1.2; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.34); -} -.filters input, -.filters select { - height: 32px; - min-height: 32px; - font-size: 12px; - font-weight: 400; -} -.filters input { - padding-top: 0; - padding-bottom: 0; - border-color: #b2becb; - border-radius: 4px; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.12) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ffffff 0%, #eef1f5 100%); -} -.filters select { - padding-top: 0; - padding-bottom: 0; - border-color: #aeb8c4; - border-radius: 6px; - padding-left: 8px; - padding-right: 8px; - -webkit-appearance: menulist; - appearance: auto; - background: - linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #fbfcfe 0%, #eaedf2 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(176, 184, 194, 0.06), - 0 1px 0 rgba(255,255,255,0.20); -} -.filters select:hover { - border-color: #9eacbd; - filter: brightness(1.01); -} -.filters select:focus { - outline: none; - border-color: #86a9d8; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 0 0 2px rgba(120, 170, 232, 0.22); -} -.filters option { - font-weight: 400; -} -.filters input::placeholder { - color: #9aa1ac; -} -.forms-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; -} -.forms-grid label { - display: grid; - gap: 6px; - font-size: 14px; - color: var(--muted); -} -.forms-grid .full-row { - grid-column: 1 / -1; -} -.field-error { - color: #9a2f23; - font-size: 12px; - font-weight: 600; -} -.input-error { - border-color: #d8a29b !important; - background: #fff6f5 !important; -} -.filter-actions { - display: flex; - gap: 8px; - align-items: center; -} -.filter-actions button:not(.btn) { - border: 1px solid #a6aab1; - border-radius: 7px; - min-height: 27px; - padding: 2px 11px; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.20) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #ffffff 0%, #f0f0f2 62%, #e8e8eb 100%); - color: #1b1b1d; - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - font-weight: 500; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.70); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -1px 0 rgba(172,172,176,0.08), - 0 1px 0 rgba(255,255,255,0.42), - 0 1px 1px rgba(0,0,0,0.08); - cursor: pointer; -} -.filter-actions button:not(.btn):hover { - filter: brightness(1.01); -} -.filter-actions .btn { - min-height: 27px; -} -.segmented { - display: inline-flex; - flex-wrap: wrap; - gap: 0; - padding: 5px; - border: 1px solid #98999e; - border-radius: 9px; - background: - linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(168,168,172,0.05) 1px 3px), - #d8d8db; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.78), - 0 1px 1px rgba(0,0,0,0.06); -} -.segmented.segmented-wide { - display: flex; - width: max-content; - max-width: 100%; - margin-left: auto; - margin-right: auto; -} -.segmented.segmented-wide .segment { - flex: 0 0 auto; - min-height: 36px; - padding-top: 8px; - padding-bottom: 8px; -} -.segment { - flex: 1 1 0; - display: inline-flex; - align-items: center; - justify-content: center; - text-decoration: none; - text-align: center; - color: #2f3135; - border: 0; - min-height: 30px; - padding: 6px 12px; - border-radius: 0; - font-size: 13px; - font-weight: 600; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.55); - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.88); -} -.segment + .segment { - border-left: 1px solid #a9aaaf; -} -.segment:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; -} -.segment:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; -} -.segment.active { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - inset 0 -2px 4px rgba(74, 144, 220, 0.16); -} -.notice { - border: 1px solid #d8cfbf; - background: #fbf8f1; - border-radius: 10px; - padding: 10px 12px; - margin-bottom: 12px; - font-size: 14px; - color: #4d453c; -} -.notice.success { - border-color: #b7d9c2; - background: #edf8f1; - color: #23543a; -} -.bulk-bar { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-bottom: 12px; - align-items: center; -} -.operator-toolbar { - display: flex; - flex-wrap: wrap; - gap: 10px; - align-items: center; -} -.operator-scope-toolbar { - margin-top: 4px; -} -.operator-scope-toolbar .tool-group { - flex: 1 1 320px; -} -.table-toolbar { - display: flex; - flex-wrap: wrap; - gap: 0; - align-items: stretch; - padding: 6px; - border: 1px solid #b7bdd0; - border-radius: 12px; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.22) 42%, rgba(255,255,255,0)), - linear-gradient(180deg, #edf1f7 0%, #dfe5ee 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.38); -} -.table-toolbar + .table-wrap { - margin-top: 0; - border-top: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; -} -.table-toolbar { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} -.toolbar-group { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 2px 10px; -} -.toolbar-group + .toolbar-group { - border-left: 1px solid #b6bdd0; -} -.toolbar-group-title { - margin: 0; - font-size: 9px; - font-weight: 700; - letter-spacing: 0.05em; - text-transform: uppercase; - color: #6f7088; - white-space: nowrap; -} -.toolbar-group-buttons { - display: inline-flex; - gap: 6px; - padding: 0; -} -.tool-icon-btn { - width: 34px; - height: 34px; - border: 1px solid #a7acb7; - border-radius: 8px; - text-decoration: none; - display: inline-flex; - align-items: center; - justify-content: center; - color: #2e4f7d; - font-size: 17px; - line-height: 1; - font-family: "Tahoma", "MS Sans Serif", "Lucida Grande", sans-serif; - text-shadow: 0 1px 0 rgba(255,255,255,0.62); - background: - radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.38) 30%, rgba(255,255,255,0.12) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #fdfdff 0%, #e7ebf3 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.95), - inset 0 -1px 0 rgba(164, 173, 188, 0.14), - 0 1px 0 rgba(255,255,255,0.28); -} -.tool-svg { - width: 21px; - height: 21px; - stroke: currentColor; - fill: none; - stroke-width: 1.35; - stroke-linecap: round; - stroke-linejoin: round; - shape-rendering: geometricPrecision; - vector-effect: non-scaling-stroke; -} -.tool-icon-btn:hover { - filter: brightness(1.03); -} -.tool-icon-btn-primary { - border-color: #88a4d4; - color: #244f83; - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); -} -.tool-icon-btn-danger { - border-color: #c79e98; - color: #6f2e2a; - text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%); -} -.tool-group { - display: inline-flex; - flex-wrap: wrap; - gap: 6px; - padding: 4px; - border: 1px solid #b6bbca; - border-radius: 10px; - background: - linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0)), - linear-gradient(180deg, #eef0f4 0%, #e2e6ed 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.86); -} -.tool-btn { - min-height: 30px; - padding: 6px 10px; - border: 1px solid #a6aab5; - border-radius: 7px; - text-decoration: none; - color: #2f3135; - font-size: 13px; - font-weight: 600; - line-height: 1; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - white-space: nowrap; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fafbfc 0%, #e8ebf1 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.90); -} -.tool-btn:hover { - filter: brightness(1.02); -} -.tool-btn.active, -.tool-tab.active { - border-color: #88a4d4; - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.48); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); -} -.tool-btn-primary { - border-color: #88a4d4; - color: #244f83; - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); -} -.tool-icn { - width: 14px; - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 12px; -} -.inline-menu { - position: relative; -} -.inline-menu summary { - list-style: none; -} -.inline-menu summary::-webkit-details-marker { - display: none; -} -.inline-menu[open] summary { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; -} -.inline-menu-list { - position: absolute; - top: calc(100% + 6px); - right: 0; - min-width: 180px; - border: 1px solid var(--line); - border-radius: 12px; - background: #fff; - box-shadow: 0 10px 24px rgba(25, 22, 17, 0.08); - padding: 6px; - display: grid; - gap: 4px; - z-index: 5; -} -.menu-item { - text-decoration: none; - color: var(--ink); - border-radius: 8px; - padding: 8px 10px; - font-size: 13px; -} -.menu-item:hover { - background: #f6f7f9; -} -.menu-item.danger { - color: #8a1f2e; -} -.menu-item.danger:hover { - background: #fdecef; -} -.action-cell { - white-space: nowrap; -} -.action-cell.action-icons { - white-space: nowrap; -} -.action-cell > .icon-link + .icon-link, -.action-cell > .text-link + .text-link { - margin-left: 6px; -} -.action-cell.actions-col .tool-svg { - width: 17px; - height: 17px; -} -.icon-link { - width: 28px; - height: 28px; - border: 1px solid #a8adb8; - border-radius: 7px; - text-decoration: none; - color: #365a8b; - font-size: 15px; - font-weight: 700; - line-height: 1; - display: inline-flex; - align-items: center; - justify-content: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fafbfc 0%, #e8ebf1 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.90); -} -.icon-link:hover { - filter: brightness(1.03); -} -.icon-link-danger { - border-color: #c79e98; - color: #6f2e2a; - text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%); -} -.icon-link-danger:hover { - filter: brightness(1.01); -} -.check-toggle { - text-decoration: none; - display: inline-flex; - align-items: center; - justify-content: center; - width: 30px; - height: 30px; - border: 1px solid var(--line); - border-radius: 8px; - color: var(--ink); - background: #fff; - font-size: 16px; -} -.check-toggle.checked { - background: #edf8f0; - border-color: #b7d9c2; -} -.job-id-cell, -.job-id-cell code { - white-space: nowrap; -} -.table-wrap { - overflow: auto; - border: 1px solid var(--line); - border-radius: 12px; - background: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.18) 20%, rgba(255,255,255,0)), - linear-gradient(180deg, #fbfcfe 0%, #eff3f8 100%); -} -.ui-table { - width: 100%; - border-collapse: collapse; - min-width: 720px; -} -.ui-table th, -.ui-table td { - text-align: left; - padding: 10px 12px; - border-bottom: 1px solid #d9e1eb; - font-size: 13px; -} -.ui-table thead th { - font-size: 12px; - text-transform: uppercase; - letter-spacing: 0.03em; - color: #5d6672; - font-weight: 600; - background: - linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.06) 38%, rgba(255,255,255,0)), - linear-gradient(180deg, #eceef2 0%, #d8dce2 100%); - border-bottom-color: #c5ced8; -} -.ui-table .status-col { - text-align: center; -} -.ui-table th.select-col, -.ui-table td.select-col { - width: 1%; - min-width: 46px; - max-width: 46px; - white-space: nowrap; - text-align: center; - padding-left: 8px; - padding-right: 8px; -} -.ui-table th.actions-col, -.ui-table td.actions-col { - width: 1%; - white-space: nowrap; - text-align: right; - padding-left: 8px; - padding-right: 10px; -} -.ui-table tbody tr:hover { background: linear-gradient(90deg, rgba(245,247,250,0.96), rgba(238,242,247,0.96)); } -.empty-cell { - color: var(--muted); - text-align: center; - padding: 18px 12px; -} -.pager { - display: flex; - flex-wrap: wrap; - gap: 4px; - align-items: center; - margin-top: 10px; -} -.pager a, -.pager .current, -.pager .disabled, -.pager .ellipsis { - border: 1px solid var(--line); - border-radius: 7px; - min-width: 28px; - min-height: 26px; - padding: 4px 8px; - font-size: 12px; - line-height: 1; - display: inline-flex; - align-items: center; - justify-content: center; - text-decoration: none; - color: var(--ink); - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 1px 0 rgba(255,255,255,0.20); -} -.pager .current { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - border-color: #88a4d4; - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); -} -.pager .disabled, -.pager .ellipsis { - color: var(--muted); - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f7f7f9 0%, #eceef1 100%); -} - -.pager.pager-dots { - justify-content: center; - gap: 2px; - margin-top: 12px; -} -.pager.pager-dots a, -.pager.pager-dots .current, -.pager.pager-dots .ellipsis { - position: relative; - min-width: 20px; - width: 20px; - height: 16px; - min-height: 16px; - padding: 0; - border-radius: 999px; - font-size: 0; - line-height: 0; - color: transparent; - text-shadow: none; - overflow: visible; - border: 0; - background: transparent; - box-shadow: none; -} -.pager.pager-dots a::before, -.pager.pager-dots .current::before { - content: ""; - position: absolute; - left: 50%; - top: 50%; - width: 10px; - height: 10px; - transform: translate(-50%, -50%); - border-radius: 999px; -} -.pager.pager-dots a::before { - border: 1px solid #9ca0a8; - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f6f8 0%, #dddddf 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.90), - 0 1px 0 rgba(255,255,255,0.18); -} -.pager.pager-dots a { - transition: - transform 220ms cubic-bezier(0.22, 0.8, 0.2, 1), - box-shadow 220ms cubic-bezier(0.22, 0.8, 0.2, 1), - filter 200ms ease, - border-color 200ms ease; - transform-origin: center center; - will-change: transform; -} -.pager.pager-dots a:hover { - transform: scale(1.24); - filter: brightness(1.03); - z-index: 1; -} -.pager.pager-dots a:hover::before { - border-color: #8e9aac; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.94), - 0 1px 0 rgba(255,255,255,0.22), - 0 2px 5px rgba(104, 121, 146, 0.12); -} -.pager.pager-dots a:active { - transform: scale(0.97); - filter: brightness(0.98); -} -.pager.pager-dots .current { - cursor: pointer; -} -.pager.pager-dots .current::before { - width: 12px; - height: 12px; - border: 1px solid #88a4d4; - background: - radial-gradient(circle at 35% 28%, rgba(255,255,255,0.82) 0 24%, rgba(255,255,255,0.28) 46%, rgba(255,255,255,0) 47%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - 0 0 0 1px rgba(181, 213, 246, 0.20), - 0 1px 4px rgba(92, 150, 212, 0.18); -} -.pager.pager-dots .ellipsis { - width: 24px; - min-width: 24px; - border: 0; - background: - radial-gradient(circle, #9399a3 48%, transparent 52%) 5px 50% / 4px 4px no-repeat, - radial-gradient(circle, #9399a3 48%, transparent 52%) 10px 50% / 4px 4px no-repeat, - radial-gradient(circle, #9399a3 48%, transparent 52%) 15px 50% / 4px 4px no-repeat; - box-shadow: none; -} - -@media (prefers-reduced-motion: reduce) { - .pager.pager-dots a { - transition: none; - } -} -.demo-modal-backdrop { - position: fixed; - inset: 0; - background: rgba(15, 13, 10, 0.45); - display: grid; - place-items: center; - padding: 16px; -} -.demo-modal { - width: min(640px, 100%); - display: flex; - flex-direction: column; - background: - linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)), - #e3e5ea; - border: 1px solid #b4bac4; - border-radius: 7px; - padding: 0; - box-shadow: - 0 20px 60px rgba(15, 13, 10, 0.23), - 0 2px 8px rgba(15, 13, 10, 0.10); - overflow: hidden; -} -.demo-modal-titlebar { - position: relative; - height: 23px; - display: flex; - align-items: center; - justify-content: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.18) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #e4e6ea 0%, #d8dae0 56%, #ced1d7 100%); - border-bottom: 1px solid #a2a7b0; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92); -} -.demo-modal-close-dot { - position: absolute; - left: 10px; - top: 50%; - width: 13px; - height: 13px; - transform: translateY(-50%); - border-radius: 999px; - border: 1px solid #8f2f26; - background: - radial-gradient(circle at 35% 26%, rgba(255,255,255,0.94) 0 18%, rgba(255,255,255,0.34) 30%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 48%), - radial-gradient(circle at 50% 120%, rgba(111, 20, 14, 0.26) 0 45%, rgba(111,20,14,0) 72%), - linear-gradient(180deg, #f2a094 0%, #e06758 44%, #c33f32 72%, #a92820 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.52), - inset 0 -1px 0 rgba(122, 27, 21, 0.18), - 0 1px 1px rgba(0,0,0,0.08), - 0 0 0 1px rgba(255,255,255,0.12); - text-decoration: none; -} -.demo-modal-close-dot:hover { - filter: brightness(1.03) saturate(1.02); -} -.demo-modal-close-dot:focus { - outline: none; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.52), - inset 0 -1px 0 rgba(122, 27, 21, 0.18), - 0 1px 1px rgba(0,0,0,0.08), - 0 0 0 1px rgba(255,255,255,0.12), - 0 0 0 2px rgba(120, 170, 232, 0.26); -} -.demo-modal-title { - max-width: calc(100% - 64px); - padding: 0 12px; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 13px; - font-weight: 600; - letter-spacing: 0; - color: #343942; - text-shadow: 0 1px 0 rgba(255,255,255,0.50); -} -.demo-modal-body { - display: flex; - flex-direction: column; - gap: 10px; - padding: 10px 14px 14px; - background: - repeating-linear-gradient(to bottom, rgba(255,255,255,0.20) 0 1px, rgba(183,194,208,0.07) 1px 3px), - linear-gradient(180deg, rgba(244, 247, 251, 0.98), rgba(231, 237, 245, 0.97)); -} -.demo-modal-body > .button-demo-row:last-child { - margin-top: auto; - padding-top: 4px; -} -.demo-modal .button-demo-row { - justify-content: flex-end; - margin-top: 10px; -} -.demo-modal .button-demo-row.full-row { - justify-content: flex-end; -} -.demo-modal .card { - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.14) 30%, rgba(255,255,255,0)), - linear-gradient(180deg, rgba(248,250,253,0.99), rgba(233,239,247,0.97)); - border-color: #bed0e3; -} -.modal-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; - margin: 8px 0; -} -.modal-grid label { - display: grid; - gap: 4px; - font-size: 11px; - font-weight: 600; - color: #646d79; -} -.modal-grid input, -.modal-grid select { - width: 100%; - border: 1px solid #aeb8c4; - border-radius: 6px; - background: - linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #fbfcfe 0%, #eaedf2 100%); - padding: 6px 8px; - color: var(--ink); - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 12px; - font-weight: 400; - line-height: 1.2; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(176, 184, 194, 0.06), - 0 1px 0 rgba(255,255,255,0.20); -} -.modal-grid input, -.modal-grid select { - height: 30px; - min-height: 30px; -} -.modal-grid input { - padding-top: 0; - padding-bottom: 0; -} -.modal-grid select { - padding-top: 0; - padding-bottom: 0; - -webkit-appearance: menulist; - appearance: auto; -} -.modal-grid select:hover { - border-color: #9eacbd; - filter: brightness(1.01); -} -.modal-grid select:focus, -.modal-grid input:focus { - outline: none; - border-color: #86a9d8; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 0 0 2px rgba(120, 170, 232, 0.22); -} -.checkbox-row { - display: inline-flex !important; - align-items: center; - gap: 8px; - grid-column: 1 / -1; -} -.checkbox-row input { - width: auto; - padding: 0; -} -.timeline-cards { - display: grid; - gap: 12px; -} -.timeline-card { - border: 1px solid var(--line); - border-radius: 14px; - background: #fffdf8; - padding: 14px; -} -.timeline-card-top { - display: flex; - justify-content: space-between; - gap: 12px; - align-items: flex-start; -} -.timeline-card-top h3 { - margin: 4px 0 0; - font-size: 18px; -} -.timeline-day { - margin: 0; - color: var(--muted); - font-size: 12px; - text-transform: uppercase; - letter-spacing: 0.06em; -} -.timeline-meta { - display: flex; - gap: 6px; - flex-wrap: wrap; -} -.timeline-summary-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; - margin-top: 12px; -} -.chip-row { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin-top: 6px; -} -.chip { - display: inline-flex; - align-items: center; - border: 1px solid var(--line); - background: #faf7f0; - border-radius: 999px; - padding: 4px 8px; - font-size: 12px; -} -.timeline-card-actions { - display: flex; - justify-content: space-between; - align-items: center; - gap: 10px; - margin-top: 12px; -} -.timeline-modal { - width: min(980px, 100%); -} -.timeline-drill-grid { - display: grid; - grid-template-columns: 1fr 1.2fr; - gap: 12px; - margin-top: 12px; -} -.timeline-drill-list { - border: 1px solid var(--line); - border-radius: 12px; - background: #fff; - max-height: 420px; - overflow: auto; - padding: 8px; -} -.timeline-item { - display: block; - text-decoration: none; - color: inherit; - border: 1px solid transparent; - border-radius: 10px; - padding: 8px; -} -.timeline-item:hover { - background: #fcf8ef; -} -.timeline-item.active { - border-color: #bad0e6; - background: #f2f7fd; -} -.timeline-item-title { - font-weight: 600; - font-size: 14px; -} -.timeline-item-meta { - margin-top: 2px; - color: var(--muted); - font-size: 12px; -} -.timeline-drill-detail { - border: 1px solid var(--line); - border-radius: 12px; - background: #fff; - padding: 12px; -} - -.style-playground { - --sp-panel: var(--panel); - --sp-line: var(--line); - --sp-card: #fffdf8; - --sp-chip-bg: #faf7f0; - --sp-chip-line: var(--line); - --sp-table-head: #faf6ee; - --sp-accent: var(--accent); - --sp-accent-line: var(--accent-line); - --sp-accent-soft: var(--accent-soft); - --sp-ghost-text: #2d4960; - --sp-ghost-line: #cfd7e0; - --sp-ghost-bg-hover: #edf3f8; - --sp-secondary-bg: #f4f6f8; - --sp-secondary-line: #cfd7e0; -} -.style-playground .panel { - background: var(--sp-panel); - border-color: var(--sp-line); -} -.style-playground .card, -.style-playground .timeline-card { - background: var(--sp-card); - border-color: var(--sp-line); -} -.style-playground .chip { - background: var(--sp-chip-bg); - border-color: var(--sp-chip-line); -} -.style-playground .ui-table thead th { - background: var(--sp-table-head); -} -.style-playground .btn-primary { - background: var(--sp-accent); - border-color: var(--sp-accent-line); -} -.style-playground .btn-secondary { - background: var(--sp-secondary-bg); - border-color: var(--sp-secondary-line); -} -.style-playground .btn-ghost { - color: var(--sp-ghost-text); - border-color: var(--sp-ghost-line); -} -.style-playground .btn-ghost:hover { - background: var(--sp-ghost-bg-hover); -} -.style-playground .pager .current { - background: var(--sp-accent-soft); - border-color: color-mix(in srgb, var(--sp-accent) 20%, white); - color: color-mix(in srgb, var(--sp-accent) 75%, black); -} -.style-playground .segment.active { - border-color: var(--sp-line); - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); -} -.aqua-lion-window { - position: relative; - max-width: 940px; - margin: 0 auto; - border-radius: 10px; - background: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0)), - #d7d7da; - border: 1px solid #b6b6ba; - box-shadow: - 0 22px 34px rgba(0,0,0,0.22), - 0 5px 10px rgba(0,0,0,0.12), - inset 0 1px 0 rgba(255,255,255,0.76); - overflow: hidden; - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -.aqua-lion-window::after { - content: ""; - position: absolute; - right: 9px; - bottom: 8px; - width: 14px; - height: 14px; - background: - linear-gradient(135deg, transparent 52%, rgba(120,120,124,0.7) 53%, rgba(120,120,124,0.7) 56%, transparent 57%), - linear-gradient(135deg, transparent 64%, rgba(146,146,150,0.85) 65%, rgba(146,146,150,0.85) 68%, transparent 69%), - linear-gradient(135deg, transparent 76%, rgba(171,171,175,0.9) 77%, rgba(171,171,175,0.9) 80%, transparent 81%); - pointer-events: none; -} -.aqua-lion-titlebar { - height: 36px; - position: relative; - display: flex; - align-items: center; - justify-content: center; - color: #2c2c2c; - font-size: 12px; - background: - linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #e4e4e7 0%, #d3d3d6 48%, #c9c9cc 100%); - border-bottom: 1px solid #8a8a8f; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(255,255,255,0.32); -} -.aqua-lion-traffic { - position: absolute; - left: 12px; - display: flex; - gap: 7px; -} -.aqua-lion-traffic .dot { - width: 12px; - height: 12px; - border-radius: 50%; - border: 1px solid rgba(0,0,0,0.28); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.75), - 0 1px 0 rgba(255,255,255,0.35); -} -.aqua-lion-traffic .dot.red { - background: radial-gradient(circle at 35% 30%, #ffd0c8 0%, #ef7f67 38%, #ca3e33 70%, #8e251f 100%); -} -.aqua-lion-traffic .dot.yellow { - background: radial-gradient(circle at 35% 30%, #fff4b8 0%, #f2d35f 40%, #d3a22f 72%, #976f16 100%); -} -.aqua-lion-traffic .dot.green { - background: radial-gradient(circle at 35% 30%, #d2f4bc 0%, #8fd85d 42%, #5ca532 72%, #3d6c20 100%); -} -.aqua-lion-title { - font-weight: 400; - letter-spacing: 0.02em; - text-shadow: 0 1px 0 rgba(255,255,255,0.62); -} -.aqua-lion-body { - padding: 14px 14px 16px; - font-size: 12px; - background: - repeating-linear-gradient( - to bottom, - rgba(255,255,255,0.16) 0px, - rgba(255,255,255,0.16) 1px, - rgba(173,173,177,0.10) 1px, - rgba(173,173,177,0.10) 2px - ), - linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0)), - #d8d8db; -} -.aqua-lion-group { - border-radius: 9px; - border: 1px solid #bebec2; - background: - repeating-linear-gradient( - to bottom, - rgba(255,255,255,0.18) 0px, - rgba(255,255,255,0.18) 1px, - rgba(176,176,181,0.10) 1px, - rgba(176,176,181,0.10) 2px - ), - linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.10)), - #d9d9dc; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.82), - 0 1px 0 rgba(255,255,255,0.46), - inset 0 -1px 0 rgba(179,179,184,0.22); - padding: 14px 12px 12px; -} -.aqua-lion-tabs { - display: inline-flex; - margin: -28px auto 10px; - position: relative; - left: 50%; - transform: translateX(-50%); - border-radius: 7px; - border: 1px solid #8c8c90; - overflow: hidden; - box-shadow: - 0 1px 0 rgba(255,255,255,0.58), - 0 1px 2px rgba(0,0,0,0.08); -} -.aqua-lion-tabs .tab { - min-width: 56px; - height: 24px; - border: 0; - font: inherit; - font-size: 11px; - font-weight: 400; - color: #111; - text-shadow: 0 1px 0 rgba(255,255,255,0.65); - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.22) 46%, rgba(255,255,255,0) 47%), - linear-gradient(180deg, #fafafb 0%, #ececef 56%, #e4e4e7 100%); -} -.aqua-lion-tabs .tab + .tab { - border-left: 1px solid #97989d; -} -.aqua-lion-tabs .tab.active { - color: rgba(255,255,255,0.95); - text-shadow: 0 -1px 0 rgba(0,0,0,0.20); - background: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #9e9ea1 0%, #8d8d91 58%, #848489 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.22), - inset 0 -1px 0 rgba(70,70,74,0.38); -} -.aqua-lion-grid { - display: grid; - grid-template-columns: 1.9fr 0.8fr 0.8fr; - gap: 7px 10px; - align-items: center; -} -.lion-input, -.lion-select, -.lion-combo, -.lion-search, -.lion-date, -.lion-mini-btn, -.lion-stepper { - height: 26px; - border-radius: 6px; - border: 1px solid #9b9ca0; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.24) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #fbfbfb 0%, #e8e8ea 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.42); - color: #111; - font: inherit; -} -.lion-input { - width: 100%; - padding: 0 12px; - font-size: 11px; - border-radius: 0; - background: - linear-gradient(180deg, #ffffff, #f3f3f4); - box-shadow: - inset 0 1px 2px rgba(0,0,0,0.14), - 0 1px 0 rgba(255,255,255,0.4); -} -.lion-input::placeholder { color: #a0a0a5; opacity: 1; } -.lion-btn { - position: relative; - overflow: hidden; - height: 26px; - border-radius: 6px; - border: 1px solid #9a9ba0; - width: calc(100% - 8px); - justify-self: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.20) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #ffffff 0%, #f0f0f2 62%, #e8e8eb 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -1px 0 rgba(166,166,170,0.14), - 0 1px 0 rgba(255,255,255,0.42), - 0 1px 1px rgba(0,0,0,0.08); - color: #1b1b1d; - text-shadow: 0 1px 0 rgba(255,255,255,0.70); - font: inherit; - font-size: 13px; - font-weight: 500; - letter-spacing: 0; -} -.lion-btn-default { - border-color: #8aa7d8; - color: #101820; - text-shadow: - 0 1px 0 rgba(255,255,255,0.64), - 0 0 1px rgba(255,255,255,0.28); - background: - radial-gradient(160% 95% at 50% -8%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.62) 22%, rgba(255,255,255,0.16) 36%, rgba(255,255,255,0) 37%), - linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 36%), - linear-gradient(180deg, #8ab9ee 0%, #8fc2f8 26%, #a7d6ff 56%, #c6e8ff 82%, #dff3ff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 2px 0 rgba(255,255,255,0.48), - inset 0 -4px 6px rgba(96, 153, 224, 0.12), - 0 1px 0 rgba(255,255,255,0.46), - 0 0 0 1px rgba(183, 214, 247, 0.20); -} -.lion-btn-default::before { - content: ""; - position: absolute; - left: 6px; - right: 6px; - top: 1px; - height: 48%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.20) 62%, rgba(255,255,255,0)); - pointer-events: none; -} -.lion-btn-default::after { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - box-shadow: - inset 0 0 0 1px rgba(255,255,255,0.14), - inset 0 1px 0 rgba(84, 129, 201, 0.18), - inset 0 -1px 0 rgba(255,255,255,0.10); - pointer-events: none; -} -.lion-btn-bevel { - border-radius: 999px; - border-color: #909196; - background: - linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f6f7 0%, #e5e5e8 58%, #dddddf 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.90), - inset 0 -1px 0 rgba(154,154,159,0.16), - 0 1px 1px rgba(0,0,0,0.06); -} -.lion-btn-square { - border-radius: 0; - border-color: #9a9ba0; - width: 100%; - background: - linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.05) 34%, rgba(255,255,255,0) 35%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.14) 0 1px, rgba(174,174,178,0.10) 1px 2px), - linear-gradient(180deg, #ececee 0%, #d9d9db 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.86), - 0 1px 0 rgba(255,255,255,0.28); -} -.lion-select, -.lion-combo { - display: flex; - align-items: center; - padding: 0 32px 0 10px; - position: relative; - font-size: 11px; - overflow: hidden; -} -.lion-select::before, -.lion-combo::before { - content: ""; - position: absolute; - top: 0; - right: 0; - width: 28px; - height: 100%; - border-left: 1px solid rgba(92, 114, 154, 0.55); - background: - linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ddf2ff 0%, #a4d8ff 36%, #6db8ff 72%, #58a4f1 100%); -} -.lion-select::after, -.lion-combo::after { - position: absolute; - right: 7px; - top: 50%; - color: #111; - font-size: 8px; - line-height: 0.9; - text-align: center; - text-shadow: 0 1px 0 rgba(255,255,255,0.45); -} -.lion-select::after { - content: "▴\A▾"; - white-space: pre; - transform: translateY(-57%); -} -.lion-combo::after { - content: "▾"; - transform: translateY(-50%); -} -.lion-combo { - border-radius: 0; -} -.lion-search { - display: flex; - align-items: center; - border-radius: 999px; - padding: 0 12px 0 32px; - position: relative; - color: #9b9ba1; - font-size: 10px; -} -.lion-search::before { - content: ""; - position: absolute; - left: 11px; - width: 10px; - height: 10px; - border: 1.5px solid #a6a7ad; - border-radius: 50%; -} -.lion-search::after { - content: ""; - position: absolute; - left: 20px; - top: 15px; - width: 6px; - height: 1.5px; - background: #a6a7ad; - transform: rotate(45deg); - border-radius: 2px; -} -.lion-stack { - display: grid; - gap: 4px; -} -.lion-choice { - display: flex; - align-items: center; - gap: 6px; - font-size: 11px; -} -.lion-choice .radio, -.lion-choice .check { - width: 13px; - height: 13px; - border: 1px solid #9a9ba0; - background: linear-gradient(180deg, #fff, #e7e7e9); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.9), - 0 1px 0 rgba(255,255,255,0.32); -} -.lion-choice .radio { border-radius: 50%; position: relative; } -.lion-choice .radio.on::after { - content: ""; - position: absolute; - inset: 2px; - border-radius: 50%; - background: radial-gradient(circle at 30% 30%, #ddf2ff, #79c3ff 60%, #3d7fd4); -} -.lion-choice .check { border-radius: 4px; position: relative; } -.lion-choice .check.on::after { - content: "✓"; - position: absolute; - left: 1px; - top: -3px; - font-size: 13px; - color: #1f5fb0; - font-weight: 700; -} -.lion-date-row { - display: flex; - gap: 4px; - align-items: center; - min-width: 0; -} -.lion-date { - min-width: 72px; - display: flex; - align-items: center; - padding: 0 8px; - border-radius: 0; - font-size: 10px; -} -.lion-stepper { - width: 18px; - display: grid; - place-items: center; - line-height: 0.8; - font-size: 7px; - text-align: center; - border-radius: 999px; - padding-top: 1px; -} -.lion-mini-btn { - width: 18px; - display: grid; - place-items: center; - border-radius: 6px; - font-size: 8px; -} -.lion-help { - width: 20px; - height: 20px; - border-radius: 50%; - border: 1.5px solid #8b68c7; - background: - radial-gradient(circle at 30% 20%, rgba(255,255,255,0.92), rgba(255,255,255,0.28) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffffff, #ece6fb 58%, #ddd1f6); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.9), - 0 1px 0 rgba(255,255,255,0.35); - display: grid; - place-items: center; - font-weight: 700; - font-size: 11px; -} -.lion-round-knob { - width: 30px; - height: 30px; - border-radius: 50%; - border: 1px solid #9d9ea2; - background: - radial-gradient(circle at 38% 26%, rgba(255,255,255,0.96), rgba(255,255,255,0.40) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f6f7, #d7d7d9); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.96), - inset 0 -2px 4px rgba(0,0,0,0.08), - 0 1px 2px rgba(0,0,0,0.12); - justify-self: center; -} -.lion-segmented { - display: inline-grid; - grid-template-columns: repeat(3, 1fr); - border: 1px solid #98999e; - border-radius: 6px; - overflow: hidden; - background: - linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0)), - #d8d8db; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.78), - 0 1px 1px rgba(0,0,0,0.06); -} -.lion-segmented button { - border: 0; - min-width: 0; - height: 22px; - padding: 0 10px; - font-size: 11px; - font: inherit; - font-weight: 400; - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - color: #202124; - text-shadow: 0 1px 0 rgba(255,255,255,0.55); -} -.lion-segmented button + button { - border-left: 1px solid #a9aaaf; -} -.lion-segmented button.active { - background: - radial-gradient(150% 105% at 50% -4%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 30%, rgba(255,255,255,0) 31%), - linear-gradient(180deg, #d6edff 0%, #b2dcff 44%, #8fc7fb 100%); - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - inset 0 -2px 4px rgba(74, 144, 220, 0.16); -} -.lion-slider { - height: 4px; - border-radius: 999px; - background: linear-gradient(180deg, #a4a4a8, #d0d0d4); - border: 1px solid #97989d; - position: relative; - box-shadow: - inset 0 1px 1px rgba(0,0,0,0.18), - 0 1px 0 rgba(255,255,255,0.34); -} -.lion-slider-wide { - grid-column: 2 / 4; - margin-right: 2px; -} -.lion-slider .knob { - position: absolute; - left: 52%; - top: 50%; - width: 17px; - height: 17px; - transform: translate(-50%, -50%); - border-radius: 50%; - border: 1px solid #5b74c7; - background: - radial-gradient(circle at 50% 20%, rgba(255,255,255,0.98), rgba(255,255,255,0.52) 34%, rgba(255,255,255,0) 35%), - radial-gradient(circle at 48% 44%, rgba(196,236,255,0.98) 0%, rgba(124,198,255,0.95) 44%, rgba(84,145,223,0.98) 74%, rgba(72,111,196,1) 100%), - linear-gradient(180deg, #e6f6ff 0%, #9fd7ff 58%, #67afe8 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -2px 3px rgba(42, 98, 188, 0.18), - 0 1px 2px rgba(0,0,0,0.20), - 0 0 0 1px rgba(183, 228, 255, 0.18); -} -.lion-slider .knob::before { - content: ""; - position: absolute; - left: 2px; - right: 2px; - top: 1px; - height: 46%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.42) 58%, rgba(255,255,255,0)); -} -.lion-slider .knob::after { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - box-shadow: - inset 0 0 0 1px rgba(255,255,255,0.16), - inset 0 -1px 0 rgba(46, 87, 165, 0.30); - pointer-events: none; -} -.lion-slider-scale { - grid-column: 2 / 4; - position: relative; - height: 18px; - margin-right: 2px; -} -.lion-slider-scale::before { - content: ""; - position: absolute; - left: 0; - right: 0; - top: 6px; - height: 4px; - border-radius: 999px; - border: 1px solid #98999e; - background: linear-gradient(180deg, #a7a7ab, #d1d1d4); - box-shadow: - inset 0 1px 1px rgba(0,0,0,0.16), - 0 1px 0 rgba(255,255,255,0.32); -} -.lion-slider-scale::after { - content: ""; - position: absolute; - left: 4px; - right: 4px; - bottom: -1px; - height: 6px; - background: - linear-gradient(#8b8c90, #8b8c90) 0 0 / 1px 6px no-repeat, - linear-gradient(#8b8c90, #8b8c90) 50% 0 / 1px 6px no-repeat, - linear-gradient(#8b8c90, #8b8c90) 100% 0 / 1px 6px no-repeat; - opacity: 0.9; -} -.lion-slider-scale .marker { - position: absolute; - left: 47%; - top: -2px; - width: 16px; - height: 12px; - transform: translateX(-50%); - border: 1px solid #5b74c7; - border-radius: 4px 4px 9px 9px; - background: - radial-gradient(circle at 50% 16%, rgba(255,255,255,0.96), rgba(255,255,255,0.40) 34%, rgba(255,255,255,0) 35%), - linear-gradient(180deg, #e4f6ff 0%, #a8dbff 50%, #6fb4ec 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.94), - inset 0 -2px 3px rgba(35, 96, 190, 0.16), - 0 1px 2px rgba(0,0,0,0.20); -} -.lion-slider-scale .marker::before { - content: ""; - position: absolute; - left: 2px; - right: 2px; - top: 1px; - height: 42%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.28) 62%, rgba(255,255,255,0)); -} -.lion-slider-scale .marker::after { - content: ""; - position: absolute; - left: 50%; - top: 100%; - width: 0; - height: 0; - transform: translateX(-50%); - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 7px solid #6fb4ec; - filter: drop-shadow(0 1px 0 #5b74c7); -} -.lion-progress { - height: 8px; - border-radius: 3px; - border: 1px solid #a1a2a6; - background: linear-gradient(180deg, #eeeeef, #d7d7da); - box-shadow: - inset 0 1px 1px rgba(0,0,0,0.12), - 0 1px 0 rgba(255,255,255,0.32); - overflow: hidden; -} -.lion-progress-wide { - grid-column: 1 / -1; - height: 10px; -} -.lion-progress > span { - display: block; - height: 100%; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.12) 45%, rgba(255,255,255,0) 46%), - linear-gradient(180deg, #a6e3ff 0%, #73c5ff 55%, #4aaaf2 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.82), - inset 0 -1px 0 rgba(37, 111, 195, 0.18); -} -.lion-progress-striped > span { - background: - linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.12) 45%, rgba(255,255,255,0) 46%), - repeating-linear-gradient(-45deg, rgba(78, 168, 244, 0.95) 0 12px, rgba(78, 168, 244, 0.95) 12px 18px, rgba(228, 244, 255, 0.98) 18px 30px); -} - -.style-playground.theme-y2k-silver { - position: relative; - --sp-panel: linear-gradient(180deg, rgba(252, 253, 255, 0.96), rgba(227, 232, 240, 0.95) 52%, rgba(241, 243, 248, 0.96)); - --sp-line: #b6becb; - --sp-card: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(233, 237, 244, 0.96) 56%, rgba(248, 249, 252, 0.97)); - --sp-chip-bg: linear-gradient(180deg, #ffffff, #e8ecf3); - --sp-chip-line: #c1c8d4; - --sp-table-head: linear-gradient(180deg, #f4f7fb, #e5eaf2); - --sp-accent: linear-gradient(180deg, #f9fdff 0%, #b9d2ff 18%, #75a0f3 45%, #4a73d8 70%, #7a82b1 100%); - --sp-accent-line: #8090bf; - --sp-accent-soft: #e9effc; - --sp-ghost-text: #475469; - --sp-ghost-line: #b8c1cf; - --sp-ghost-bg-hover: linear-gradient(180deg, #fafcff, #edf1f6); - --sp-secondary-bg: linear-gradient(180deg, #ffffff, #eef2f7); - --sp-secondary-line: #c3ccd8; -} -.style-playground.theme-y2k-silver::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - opacity: 0.35; - background: - radial-gradient(460px 220px at 8% 10%, rgba(255,255,255,0.60), transparent 70%), - radial-gradient(540px 260px at 90% 12%, rgba(188, 205, 241, 0.38), transparent 72%), - linear-gradient(115deg, rgba(255,255,255,0.0) 36%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.0) 62%); -} -.style-playground.theme-y2k-silver > * { position: relative; z-index: 1; } -.style-playground.theme-y2k-silver .panel, -.style-playground.theme-y2k-silver .card, -.style-playground.theme-y2k-silver .table-wrap { - box-shadow: - 0 12px 22px rgba(92, 104, 124, 0.10), - inset 0 1px 0 rgba(255,255,255,0.98), - inset 0 -1px 0 rgba(175, 184, 198, 0.16); -} -.style-playground.theme-y2k-silver .btn { - border-radius: 13px; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.98), - inset 0 -1px 0 rgba(155, 166, 186, 0.18), - 0 2px 0 rgba(135, 145, 164, 0.10), - 0 6px 14px rgba(109, 120, 141, 0.08); -} -.style-playground.theme-y2k-silver .btn-primary { - color: #f9fbff; - text-shadow: 0 1px 0 rgba(53, 73, 122, 0.32); -} -.style-playground.theme-y2k-silver .segment.active, -.style-playground.theme-y2k-silver .pager .current { - background: linear-gradient(180deg, #ffffff, #e7edf7 62%, #dfe6f2); - border-color: #b8c4db; - color: #33425a; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 1px 0 rgba(140, 152, 175, 0.10); -} - -.style-playground.theme-vaporwave { - position: relative; - --sp-panel: linear-gradient(180deg, rgba(252, 248, 255, 0.86), rgba(234, 240, 255, 0.84) 46%, rgba(239, 250, 255, 0.82)); - --sp-line: #c7bddf; - --sp-card: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245, 236, 252, 0.88) 48%, rgba(234, 246, 255, 0.88)); - --sp-chip-bg: linear-gradient(180deg, #fffaff, #efe7fb); - --sp-chip-line: #d1c4ea; - --sp-table-head: linear-gradient(180deg, #fff8ff, #efe6fb 44%, #e8f4ff); - --sp-accent: linear-gradient(180deg, #ffe8fb 0%, #f2c8ff 22%, #d79eff 48%, #8fd7ff 76%, #76b7ff 100%); - --sp-accent-line: #ac84d6; - --sp-accent-soft: #f6e9ff; - --sp-ghost-text: #5b5073; - --sp-ghost-line: #cabdde; - --sp-ghost-bg-hover: linear-gradient(180deg, #fff8ff, #f4ecfb); - --sp-secondary-bg: linear-gradient(180deg, #fffaff, #f0ebf8); - --sp-secondary-line: #cfc3e1; -} -.style-playground.theme-vaporwave::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - opacity: 0.78; - background: - radial-gradient(680px 300px at 8% -4%, rgba(255, 184, 232, 0.28), transparent 70%), - radial-gradient(700px 340px at 92% 0%, rgba(129, 224, 255, 0.24), transparent 72%), - radial-gradient(640px 300px at 50% 110%, rgba(182, 151, 255, 0.18), transparent 74%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(170, 160, 214, 0.03) 1px 3px), - linear-gradient(180deg, rgba(255, 249, 255, 0.28), rgba(233, 244, 255, 0.16)), - linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 48%, rgba(255,255,255,0) 100%); -} -.style-playground.theme-vaporwave::after { - content: ""; - position: fixed; - inset: -8% -12%; - pointer-events: none; - z-index: 0; - opacity: 0.28; - background: - radial-gradient(900px 320px at 14% 10%, rgba(255, 171, 236, 0.20), transparent 72%), - radial-gradient(920px 340px at 86% 12%, rgba(123, 220, 255, 0.20), transparent 72%), - radial-gradient(680px 260px at 50% 92%, rgba(196, 155, 255, 0.14), transparent 74%), - linear-gradient(110deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 42%), - linear-gradient(180deg, rgba(255, 248, 255, 0.10), rgba(232, 245, 255, 0.04)); - background-size: - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%; - background-position: - center, - center, - center, - center, - center, - center, - center; - background-blend-mode: screen, screen, screen, soft-light, normal; - filter: saturate(1.06) contrast(1.02); -} -.style-playground.theme-vaporwave > * { position: relative; z-index: 1; } -.style-playground.theme-vaporwave { - font-family: "Trebuchet MS", "Lucida Grande", "Verdana", sans-serif; - color: #2d2740; -} -.style-playground.theme-vaporwave .panel, -.style-playground.theme-vaporwave .card, -.style-playground.theme-vaporwave .table-wrap { - border-color: #cbbde4; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.54), rgba(255,255,255,0.12) 30%, rgba(255,255,255,0) 31%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.22) 0 1px, rgba(206, 188, 236, 0.08) 1px 3px), - var(--sp-panel); - box-shadow: - 0 12px 24px rgba(96, 86, 142, 0.10), - 0 0 0 1px rgba(255,255,255,0.40), - inset 0 1px 0 rgba(255,255,255,0.90), - inset 0 -1px 0 rgba(163, 146, 212, 0.10); -} -.style-playground.theme-vaporwave .card, -.style-playground.theme-vaporwave .table-wrap { - background-image: - linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.10) 30%, rgba(255,255,255,0) 31%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.20) 0 1px, rgba(204, 191, 233, 0.08) 1px 3px), - var(--sp-card); -} -.style-playground.theme-vaporwave .panel-head h2, -.style-playground.theme-vaporwave .card h3 { - color: #342d49; - text-shadow: 0 1px 0 rgba(255,255,255,0.55); -} -.style-playground.theme-vaporwave .meta { - color: #6b6088; -} -.style-playground.theme-vaporwave .btn { - border-radius: 10px; - border-color: #baabd8; - color: #332a4a; - background-image: - radial-gradient(160% 90% at 50% -8%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.36) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff8ff 0%, #f3ebfb 58%, #e9edf8 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(184, 171, 217, 0.10), - 0 1px 0 rgba(255,255,255,0.35), - 0 4px 10px rgba(143, 132, 188, 0.08); -} -.style-playground.theme-vaporwave .btn:hover { - filter: brightness(1.02) saturate(1.04); -} -.style-playground.theme-vaporwave .btn-primary { - color: #2a1e42; - border-color: #b58dd9; - text-shadow: 0 1px 0 rgba(255,255,255,0.50); - background-image: - radial-gradient(150% 95% at 50% -10%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.46) 26%, rgba(255,255,255,0.12) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ffd7f6 0%, #f2b8ff 28%, #d9adff 52%, #a9d7ff 78%, #8ec5ff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.96), - inset 0 -1px 0 rgba(136, 115, 190, 0.10), - 0 1px 0 rgba(255,255,255,0.42), - 0 0 0 1px rgba(238, 197, 255, 0.18); -} -.style-playground.theme-vaporwave .btn-secondary, -.style-playground.theme-vaporwave .btn-ghost { - color: #5a5074; - border-color: #c8bce0; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fdfbff 0%, #f1ecf8 100%); -} -.style-playground.theme-vaporwave .btn-danger { - color: #742f50; - border-color: #d3a3bf; - background-image: - radial-gradient(150% 95% at 50% -10%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.40) 26%, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ffd8e9 0%, #f5bfd8 52%, #eed0dc 100%); -} -.style-playground.theme-vaporwave .btn:disabled, -.style-playground.theme-vaporwave .btn[aria-disabled="true"] { - color: #b8b1c7; - border-color: #ddd6e8; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.06) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #faf9fc 0%, #f0eef4 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.82); -} -.style-playground.theme-vaporwave .segmented { - border-color: #bcaed9; - border-radius: 10px; - background: - linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(191, 175, 230, 0.05) 1px 3px), - #e5dff0; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.80), - 0 1px 0 rgba(255,255,255,0.36); -} -.style-playground.theme-vaporwave .segment { - color: #43395f; - border-color: transparent; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #faf8fd 0%, #ece8f4 100%); - text-shadow: 0 1px 0 rgba(255,255,255,0.60); -} -.style-playground.theme-vaporwave .segment.active, -.style-playground.theme-vaporwave .pager .current { - color: #2f2850; - border-color: #c297ea; - background: - radial-gradient(150% 95% at 50% -10%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.34) 25%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ffd8f6 0%, #e6c3ff 42%, #b7d8ff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.84), - inset 0 -1px 2px rgba(145, 132, 211, 0.10); -} -.style-playground.theme-vaporwave .chip, -.style-playground.theme-vaporwave .status { - border-color: #cebde7; - color: #584f73; - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fffafe 0%, #f1ebf8 100%); -} -.style-playground.theme-vaporwave .chip:nth-child(1) { - border-color: #b7c8f5; - color: #36538b; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #eff4ff 0%, #dfe9ff 100%); -} -.style-playground.theme-vaporwave .chip:nth-child(2) { - border-color: #d8bee8; - color: #6c4f86; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff4ff 0%, #efe4fb 100%); -} -.style-playground.theme-vaporwave .chip:nth-child(3) { - border-color: #bde1d8; - color: #3f736a; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f1fffb 0%, #def7ef 100%); -} -.style-playground.theme-vaporwave .status-ready { - border-color: #a9d7c7; - color: #327363; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ebfff8 0%, #d2f2e8 100%); -} -.style-playground.theme-vaporwave .status-warning { - border-color: #e0c798; - color: #8c6727; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff6de 0%, #f4e4b6 100%); -} -.style-playground.theme-vaporwave .status-review { - border-color: #c6afe9; - color: #6b4da0; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f7efff 0%, #e9ddff 100%); -} -.style-playground.theme-vaporwave .status-failed { - border-color: #e0b5c2; - color: #8c4459; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff0f6 0%, #f4d7e1 100%); -} -.style-playground.theme-vaporwave .filters input, -.style-playground.theme-vaporwave .filters select { - border-color: #b8abd6; - color: #2f2844; - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fffcff 0%, #eeecf7 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.28); -} -.style-playground.theme-vaporwave .filters input::placeholder { - color: #9d93b5; -} -.style-playground.theme-vaporwave .ui-table thead th { - color: #64597d; - border-bottom-color: #d1c4e6; - background: - linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.02) 34%, rgba(255,255,255,0) 35%), - linear-gradient(180deg, #f5f0fb 0%, #e9e3f4 45%, #e4eef8 100%); -} -.style-playground.theme-vaporwave .ui-table tbody tr:hover { - background: linear-gradient(90deg, rgba(255, 244, 253, 0.92), rgba(236, 248, 255, 0.92)); -} -.style-playground.theme-vaporwave .status-filter-shell { - border-color: #d6c4ea; - background: - linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.08) 34%, rgba(255,255,255,0) 35%), - rgba(255,255,255,0.14); -} -.style-playground.theme-vaporwave .status-filter-tabs-dark .segment.active { - color: #fff8ff; - text-shadow: 0 -1px 0 rgba(0,0,0,0.18); - background: - linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #9d95b2 0%, #8b839d 52%, #7f778f 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.16), - inset 0 -1px 0 rgba(70,63,89,0.26); -} - -.style-playground.theme-vaporwave-night { - position: relative; - --sp-panel: linear-gradient(180deg, rgba(33, 26, 63, 0.84), rgba(26, 23, 56, 0.82) 45%, rgba(21, 28, 58, 0.84)); - --sp-line: #6557a0; - --sp-card: linear-gradient(180deg, rgba(43, 33, 77, 0.90), rgba(31, 28, 68, 0.88) 48%, rgba(24, 36, 68, 0.88)); - --sp-chip-bg: linear-gradient(180deg, #3c2f69, #2e2858); - --sp-chip-line: #6e60b3; - --sp-table-head: linear-gradient(180deg, #42346f, #312b5d 46%, #273a68); - --sp-accent: linear-gradient(180deg, #ff7bd8 0%, #f35cff 28%, #b86dff 58%, #5fc9ff 86%, #46a8ff 100%); - --sp-accent-line: #b86cff; - --sp-accent-soft: #3f326e; - --sp-ghost-text: #ddd8ef; - --sp-ghost-line: #6b5ea6; - --sp-ghost-bg-hover: linear-gradient(180deg, #443871, #312b5f); - --sp-secondary-bg: linear-gradient(180deg, #4a3a78, #312c5f); - --sp-secondary-line: #6f63ad; -} -.style-playground.theme-vaporwave-night::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - opacity: 0.96; - background: - radial-gradient(900px 380px at 50% -8%, rgba(255, 110, 220, 0.18), transparent 70%), - radial-gradient(700px 320px at 12% 10%, rgba(98, 217, 255, 0.14), transparent 72%), - radial-gradient(700px 320px at 88% 12%, rgba(183, 114, 255, 0.16), transparent 72%), - linear-gradient(180deg, rgba(15,12,29,0.16), rgba(11,10,24,0.26)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.035) 0 1px, rgba(110, 86, 188, 0.03) 1px 3px); -} -.style-playground.theme-vaporwave-night::after { - content: ""; - position: fixed; - inset: -10% -14%; - pointer-events: none; - z-index: 0; - opacity: 0.30; - background: - radial-gradient(980px 340px at 14% 10%, rgba(255, 124, 226, 0.18), transparent 72%), - radial-gradient(980px 360px at 86% 12%, rgba(95, 204, 255, 0.16), transparent 72%), - radial-gradient(820px 300px at 50% 95%, rgba(168, 113, 255, 0.14), transparent 74%), - linear-gradient(92deg, rgba(177, 120, 255, 0.09) 0%, rgba(255,255,255,0) 50%), - linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); - background-size: - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%; - background-position: - center, - center, - center, - center, - center, - center, - center; - background-blend-mode: screen, screen, screen, soft-light, normal; - filter: saturate(1.10) contrast(1.05); -} -.style-playground.theme-vaporwave-night > * { position: relative; z-index: 1; } -.style-playground.theme-vaporwave-night { - color: #ece8ff; - font-family: "Trebuchet MS", "Lucida Grande", "Verdana", sans-serif; -} -.style-playground.theme-vaporwave-night .panel, -.style-playground.theme-vaporwave-night .card, -.style-playground.theme-vaporwave-night .table-wrap { - border-color: #5f53a1; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 26%, rgba(255,255,255,0) 27%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(145, 116, 232, 0.03) 1px 3px), - var(--sp-panel); - box-shadow: - 0 16px 28px rgba(10, 7, 25, 0.28), - 0 0 0 1px rgba(235, 214, 255, 0.04), - inset 0 1px 0 rgba(255,255,255,0.12), - inset 0 -1px 0 rgba(91, 72, 152, 0.18); -} -.style-playground.theme-vaporwave-night .card, -.style-playground.theme-vaporwave-night .table-wrap { - background-image: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 26%, rgba(255,255,255,0) 27%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, rgba(145, 116, 232, 0.03) 1px 3px), - var(--sp-card); -} -.style-playground.theme-vaporwave-night .panel-head h2, -.style-playground.theme-vaporwave-night .card h3 { - color: #f1ecff; - text-shadow: 0 1px 0 rgba(0,0,0,0.30); -} -.style-playground.theme-vaporwave-night .meta, -.style-playground.theme-vaporwave-night .filters label { - color: #c6bde5; -} -.style-playground.theme-vaporwave-night .btn { - border-color: #7265b4; - color: #f0eaff; - background-image: - radial-gradient(150% 90% at 50% -8%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 26%, rgba(255,255,255,0) 40%), - linear-gradient(180deg, #493b79 0%, #352f67 62%, #2f2a5d 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.16), - inset 0 -1px 0 rgba(58, 45, 108, 0.24), - 0 1px 0 rgba(255,255,255,0.04), - 0 6px 14px rgba(8, 6, 22, 0.22); - text-shadow: 0 -1px 0 rgba(0,0,0,0.22); -} -.style-playground.theme-vaporwave-night .btn:hover { - filter: brightness(1.04) saturate(1.08); -} -.style-playground.theme-vaporwave-night .btn-primary { - color: #2c153f; - text-shadow: 0 1px 0 rgba(255,255,255,0.28); - border-color: #c97af8; - background-image: - radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.04) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ff9be5 0%, #ee74ff 28%, #c680ff 58%, #77d8ff 88%, #66beff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.34), - inset 0 -1px 0 rgba(109, 64, 179, 0.18), - 0 0 0 1px rgba(248, 126, 252, 0.10), - 0 0 18px rgba(164, 115, 255, 0.16); -} -.style-playground.theme-vaporwave-night .btn-secondary, -.style-playground.theme-vaporwave-night .btn-ghost { - color: #e5ddfb; - border-color: #6e61aa; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #453872 0%, #312b5e 100%); -} -.style-playground.theme-vaporwave-night .btn-danger { - color: #ffdbe9; - border-color: #b65c8f; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #8a2b56 0%, #702349 100%); -} -.style-playground.theme-vaporwave-night .btn:disabled, -.style-playground.theme-vaporwave-night .btn[aria-disabled="true"] { - color: #9b93b8; - border-color: #5d5580; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #372f52 0%, #2d2944 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); -} -.style-playground.theme-vaporwave-night .segmented { - border-color: #6e63ab; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, rgba(118, 95, 194, 0.03) 1px 3px), - #352d59; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); -} -.style-playground.theme-vaporwave-night .segment { - color: #ece6ff; - text-shadow: 0 -1px 0 rgba(0,0,0,0.20); - background-image: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #473a75 0%, #322d61 100%); -} -.style-playground.theme-vaporwave-night .segment.active, -.style-playground.theme-vaporwave-night .pager .current { - color: #240f36; - text-shadow: 0 1px 0 rgba(255,255,255,0.26); - border-color: #cf83ff; - background: - radial-gradient(150% 95% at 50% -10%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.16) 28%, rgba(255,255,255,0.04) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ff9be3 0%, #ea7aff 34%, #b98bff 66%, #7dd7ff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.30), - 0 0 12px rgba(181, 114, 255, 0.14); -} -.style-playground.theme-vaporwave-night .chip, -.style-playground.theme-vaporwave-night .status { - color: #e4ddfb; - border-color: #6e63aa; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #473a73 0%, #322d5f 100%); -} -.style-playground.theme-vaporwave-night .chip:nth-child(1) { - border-color: #6fb4ff; - color: #d9ecff; -} -.style-playground.theme-vaporwave-night .chip:nth-child(2) { - border-color: #c18cff; - color: #f1deff; -} -.style-playground.theme-vaporwave-night .chip:nth-child(3) { - border-color: #7ddbcf; - color: #d8fff7; -} -.style-playground.theme-vaporwave-night .status-ready { - border-color: #63d7b9; - color: #d4fff6; -} -.style-playground.theme-vaporwave-night .status-warning { - border-color: #f0c46f; - color: #fff0cc; -} -.style-playground.theme-vaporwave-night .status-review { - border-color: #c291ff; - color: #f1e1ff; -} -.style-playground.theme-vaporwave-night .status-failed { - border-color: #ef8eb5; - color: #ffe0ec; -} -.style-playground.theme-vaporwave-night .filters input, -.style-playground.theme-vaporwave-night .filters select { - border-color: #6d62aa; - color: #f0eaff; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #43376d 0%, #2f2a59 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); -} -.style-playground.theme-vaporwave-night .filters input::placeholder { - color: #bdb2df; -} -.style-playground.theme-vaporwave-night .ui-table thead th { - color: #d7d0f1; - border-bottom-color: #6d60aa; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 34%, rgba(255,255,255,0) 35%), - linear-gradient(180deg, #463a74 0%, #312d61 46%, #2a3964 100%); -} -.style-playground.theme-vaporwave-night .ui-table td { - color: #efeafd; - border-bottom-color: rgba(120, 103, 181, 0.28); -} -.style-playground.theme-vaporwave-night .ui-table tbody tr:hover { - background: linear-gradient(90deg, rgba(81, 57, 126, 0.36), rgba(42, 92, 126, 0.28)); -} -.style-playground.theme-vaporwave-night .status-filter-shell { - border-color: #6f62aa; - background: - linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 34%, rgba(255,255,255,0) 35%), - rgba(60, 44, 104, 0.34); -} -.style-playground.theme-vaporwave-night .status-filter-tabs-dark .segment.active { - color: #fff4fe; - text-shadow: 0 -1px 0 rgba(42, 19, 63, 0.22); - border-color: #cf83ff; - background: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #d080ff 0%, #b37bff 48%, #8bbfff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.18), - 0 0 10px rgba(197, 114, 255, 0.16); -} - -.style-playground.theme-aqua { - position: relative; - --sp-panel: linear-gradient(180deg, rgba(244, 245, 248, 0.98), rgba(224, 227, 234, 0.96) 55%, rgba(232, 235, 241, 0.97)); - --sp-line: #b7c6d8; - --sp-card: linear-gradient(180deg, rgba(252,252,253,0.99), rgba(240, 244, 249, 0.97) 44%, rgba(228, 238, 248, 0.96) 78%, rgba(221, 234, 248, 0.96)); - --sp-chip-bg: linear-gradient(180deg, #ffffff, #f0f4f8 60%, #e8eef5); - --sp-chip-line: #bcccdc; - --sp-table-head: linear-gradient(180deg, #f7fbff, #ebf3fb 45%, #e4eef8 100%); - --sp-accent: linear-gradient(180deg, #eaf9ff 0%, #cbeaff 18%, #93d0ff 42%, #5aaff5 63%, #3a8be4 82%, #3a6ed4 100%); - --sp-accent-line: #4e80c8; - --sp-accent-soft: #d8f0ff; - --sp-ghost-text: #4c6780; - --sp-ghost-line: #b8c8d8; - --sp-ghost-bg-hover: linear-gradient(180deg, #feffff, #f2f6fa 48%, #e8eff6 100%); - --sp-secondary-bg: linear-gradient(180deg, #ffffff 0%, #f4f7fa 42%, #e8eef4 100%); - --sp-secondary-line: #b9c9da; -} -.style-playground.theme-aqua::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - opacity: 0.44; - background: - radial-gradient(620px 320px at 10% 8%, rgba(255,255,255,0.84), transparent 72%), - radial-gradient(640px 320px at 86% 8%, rgba(145, 205, 255, 0.30), transparent 74%), - radial-gradient(700px 360px at 52% 112%, rgba(105, 165, 228, 0.18), transparent 74%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(162,175,194,0.03) 1px 3px), - linear-gradient(115deg, rgba(255,255,255,0.0) 34%, rgba(255,255,255,0.16) 49%, rgba(255,255,255,0.0) 64%); -} -.style-playground.theme-aqua > * { position: relative; z-index: 1; } -.style-playground.theme-aqua { - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -.style-playground.theme-aqua h1, -.style-playground.theme-aqua h2, -.style-playground.theme-aqua h3 { - letter-spacing: 0; -} -.style-playground.theme-aqua .panel-head h2 { - font-size: 19px; - font-weight: 600; - line-height: 1.15; - color: #2f3338; - text-shadow: 0 1px 0 rgba(255,255,255,0.45); -} -.style-playground.theme-aqua .card h3 { - font-size: 17px; - font-weight: 600; - line-height: 1.15; - color: #2f3338; - text-shadow: 0 1px 0 rgba(255,255,255,0.40); -} -.style-playground.theme-aqua .panel .meta { - color: #666d77; - font-size: 12px; - font-weight: 500; -} -.style-playground.theme-aqua #style-presets .meta { - font-size: 11px; - font-weight: 600; -} -.style-playground.theme-aqua .panel, -.style-playground.theme-aqua .card, -.style-playground.theme-aqua .table-wrap { - background-image: - repeating-linear-gradient( - to bottom, - rgba(255,255,255,0.26) 0px, - rgba(255,255,255,0.26) 1px, - rgba(181, 191, 204, 0.10) 1px, - rgba(181, 191, 204, 0.10) 2px - ), - var(--sp-panel); - box-shadow: - 0 12px 22px rgba(78, 107, 139, 0.12), - inset 0 1px 0 rgba(255,255,255,1), - inset 0 -1px 0 rgba(126, 156, 191, 0.16); -} -.style-playground.theme-aqua .panel { - border-color: #b9cbe0; - backdrop-filter: blur(4px); -} -.style-playground.theme-aqua .card, -.style-playground.theme-aqua .table-wrap { - border-color: #c1cfde; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.0) 29%), - repeating-linear-gradient( - to bottom, - rgba(255,255,255,0.26) 0px, - rgba(255,255,255,0.26) 1px, - rgba(188,205,223,0.10) 1px, - rgba(188,205,223,0.10) 3px - ), - var(--sp-card); -} -.style-playground.theme-aqua .btn { - position: relative; - overflow: hidden; - border-radius: 7px; - border-color: #9a9ba0; - min-height: 27px; - padding: 2px 11px; - line-height: 1; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.20) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #ffffff 0%, #f0f0f2 62%, #e8e8eb 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -1px 0 rgba(172,172,176,0.08), - 0 1px 0 rgba(255,255,255,0.42), - 0 1px 1px rgba(0,0,0,0.08); - color: #1b1b1d; - text-shadow: 0 1px 0 rgba(255,255,255,0.70); - font-size: 13px; - font-weight: 500; - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -.style-playground.theme-aqua .btn-primary { - color: #18273d; - text-shadow: - 0 1px 0 rgba(255,255,255,0.56), - 0 0 1px rgba(255,255,255,0.20); - border-color: #88a4d4; - background-image: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.54) 24%, rgba(255,255,255,0.14) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #85b8ef 0%, #93c6fb 26%, #abd8ff 55%, #c7e8ff 82%, #def2ff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.96), - inset 0 1px 0 rgba(255,255,255,0.18), - 0 1px 0 rgba(255,255,255,0.46), - 0 0 0 1px rgba(181, 213, 246, 0.16); -} -.style-playground.theme-aqua .btn-primary::before { - content: ""; - position: absolute; - left: 6px; - right: 6px; - top: 1px; - height: 36%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.12) 60%, rgba(255,255,255,0)); - pointer-events: none; -} -.style-playground.theme-aqua .btn-primary::after { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - box-shadow: - inset 0 0 0 1px rgba(255,255,255,0.10), - inset 0 -1px 0 rgba(255,255,255,0.08); - pointer-events: none; -} -.style-playground.theme-aqua .btn-secondary, -.style-playground.theme-aqua .btn-ghost { - border-color: #a8abb0; - color: #5a6473; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(186, 188, 193, 0.06), - 0 1px 0 rgba(255,255,255,0.36), - 0 1px 1px rgba(0,0,0,0.05); -} -.style-playground.theme-aqua .btn-ghost { - color: #636b78; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fcfcfd 0%, #f1f1f3 62%, #ebebee 100%); -} -.style-playground.theme-aqua .btn-danger { - border-color: #c79e98; - color: #6f2e2a; - text-shadow: - 0 1px 0 rgba(255,255,255,0.56), - 0 0 1px rgba(255,255,255,0.16); - background-image: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.94), - inset 0 1px 0 rgba(255,255,255,0.18), - inset 0 -2px 3px rgba(214, 143, 133, 0.08), - 0 1px 0 rgba(255,255,255,0.40), - 0 0 0 1px rgba(239, 202, 196, 0.18); -} -.style-playground.theme-aqua .btn:disabled, -.style-playground.theme-aqua .btn[aria-disabled="true"] { - color: #b1b5bc; - border-color: #d0d3d8; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.04) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f7f9 0%, #eceef1 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.84), - inset 0 -1px 0 rgba(196, 200, 206, 0.05), - 0 1px 0 rgba(255,255,255,0.26); -} -.style-playground.theme-aqua .btn:hover { - filter: brightness(1.01); -} -.style-playground.theme-aqua .segment { - border-radius: 0; - border-color: transparent; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - color: #202124; - font-weight: 600; - text-shadow: 0 1px 0 rgba(255,255,255,0.55); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88); -} -.style-playground.theme-aqua .segment.active, -.style-playground.theme-aqua .pager .current { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.30) 24%, rgba(255,255,255,0.06) 36%, rgba(255,255,255,0) 37%), - linear-gradient(180deg, #9ecaf4 0%, #acd3f9 30%, #c5e2fb 60%, #dceefc 100%); - border-color: #aec4de; - color: #3d648e; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.86), - inset 0 -1px 2px rgba(108, 164, 223, 0.08); - text-shadow: 0 1px 0 rgba(255,255,255,0.58); -} -.style-playground.theme-aqua #style-presets .segment.active { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.22) 24%, rgba(255,255,255,0.04) 34%, rgba(255,255,255,0) 35%), - linear-gradient(180deg, #b9d6f1 0%, #c6ddf3 36%, #d8e8f7 100%); - border-color: #bdcddd; - color: #486a8f; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.84), - inset 0 -1px 2px rgba(129, 166, 206, 0.06); -} -.style-playground.theme-aqua .chip, -.style-playground.theme-aqua .status { - border-radius: 999px; - border-color: #b7c4d1; - color: #475563; - background: - linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f8fafc 0%, #edf1f5 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.28); -} -.style-playground.theme-aqua .chip:nth-child(1) { - border-color: #9fc4eb; - color: #255c8d; - background: - linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #edf7ff 0%, #dbeeff 100%); -} -.style-playground.theme-aqua .chip:nth-child(2) { - border-color: #b6c8d9; - color: #445869; - background: - linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f4f7fb 0%, #e8edf3 100%); -} -.style-playground.theme-aqua .chip:nth-child(3) { - border-color: #b8d4bb; - color: #3e6d46; - background: - linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #eef8ef 0%, #deefe1 100%); -} -.style-playground.theme-aqua .status-ready { - border-color: #9dc7a5; - color: #356941; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #edf8ef 0%, #d8eddd 100%); -} -.style-playground.theme-aqua .status-warning { - border-color: #d8bf7f; - color: #8a6221; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff7e6 0%, #f6e6bf 100%); -} -.style-playground.theme-aqua .status-review { - border-color: #b5addc; - color: #5c528f; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f3efff 0%, #e3dbfb 100%); -} -.style-playground.theme-aqua .status-failed { - border-color: #d4aaaa; - color: #8b3d39; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff0ee 0%, #f4d7d3 100%); -} -.style-playground.theme-aqua .segmented { - border-radius: 6px; - background: - linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(168,168,172,0.05) 1px 3px), - #d8d8db; - border-color: #98999e; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.78), - 0 1px 1px rgba(0,0,0,0.06); -} -.style-playground.theme-aqua .segmented .segment + .segment { - border-left: 1px solid #a9aaaf; -} -.style-playground.theme-aqua #style-presets .segmented { - border-radius: 6px; - border: 1px solid #9a9ba0; - background: - linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(168,168,172,0.05) 1px 3px), - #d8d8db; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.76), - 0 1px 1px rgba(0,0,0,0.05); - overflow: hidden; -} -.style-playground.theme-aqua #style-presets .segment { - min-height: 30px; - padding: 6px 12px; - border-radius: 0; - border: 0; - font-size: 11px; - font-weight: 600; - color: #2f3135; - text-shadow: 0 1px 0 rgba(255,255,255,0.55); - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88); -} -.style-playground.theme-aqua #style-presets .segment + .segment { - border-left: 1px solid #a9aaaf; -} -.style-playground.theme-aqua #style-presets .segment.active { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - inset 0 -2px 4px rgba(74, 144, 220, 0.16); -} -.style-playground.theme-aqua #style-status-filter .panel-head { - align-items: baseline; -} -.style-playground.theme-aqua #style-status-filter .panel-head .meta { - font-size: 13px; - font-weight: 500; - color: #32363c; -} -.style-playground.theme-aqua #style-status-filter .status-filter-shell { - border: 1px solid #c8c0c9; - border-radius: 14px; - padding: 12px 13px; - display: flex; - justify-content: center; - align-items: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.06) 34%, rgba(255,255,255,0) 35%), - rgba(255,255,255,0.10); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.40), - inset 0 -1px 0 rgba(190,180,192,0.08); -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs { - display: inline-flex; - flex-wrap: wrap; - gap: 0; - border: 1px solid #96979c; - border-radius: 10px; - overflow: hidden; - background: - linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0)), - #d5d5d8; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.80), - inset 0 -1px 0 rgba(167,167,171,0.14), - 0 1px 1px rgba(0,0,0,0.05); -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment { - border: 0; - min-height: 34px; - padding: 7px 18px; - border-radius: 0; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.14) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #f4f4f6 0%, #e2e2e5 100%); - color: #2f3135; - font-size: 14px; - font-weight: 600; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.60); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.82); -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment + .segment { - border-left: 1px solid #b4b5ba; -} -.style-playground.theme-aqua .status-filter-tabs .segment:first-child { - border-top-left-radius: 8px; - border-bottom-left-radius: 8px; -} -.style-playground.theme-aqua .status-filter-tabs .segment:last-child { - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment.active { - background: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #a8a8ac 0%, #95969a 54%, #8d8e93 100%); - color: rgba(255,255,255,0.93); - text-shadow: 0 -1px 0 rgba(0,0,0,0.16); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.18), - inset 1px 0 0 rgba(255,255,255,0.07), - inset -1px 0 0 rgba(72,72,76,0.14), - inset 0 -1px 0 rgba(74,74,78,0.26), - inset 0 -2px 4px rgba(74,72,76,0.10); -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment:first-child { - border-top-left-radius: 7px; - border-bottom-left-radius: 7px; -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment:last-child { - border-top-right-radius: 7px; - border-bottom-right-radius: 7px; -} -.style-playground.theme-aqua .pager a, -.style-playground.theme-aqua .pager .current, -.style-playground.theme-aqua .pager .ellipsis { - border-radius: 6px; - border-color: #98999e; - color: #202124; - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - text-shadow: 0 1px 0 rgba(255,255,255,0.55); -} -.style-playground.theme-aqua .pager .current { - color: #244f83; -} -.style-playground.theme-aqua .filters input, -.style-playground.theme-aqua .filters select { - border-color: #9c9da2; - border-radius: 6px; - color: #1f2023; - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfb 0%, #e8e8ea 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.34); -} -.style-playground.theme-aqua .filters input::placeholder { - color: #9b9ba1; -} -.style-playground.theme-aqua #style-filters .btn-pair { - width: 110px; -} -.style-playground.theme-aqua #style-filters .panel-head .btn { - min-height: 27px; - padding-top: 2px; - padding-bottom: 2px; -} -.style-playground.theme-aqua #style-filters .panel-head .btn-primary { - border-color: #88a4d4; -} -.style-playground.theme-aqua #style-filters .panel-head .btn-ghost { - border-color: #a8abb0; - color: #616978; -} -.style-playground.theme-aqua .filters label, -.style-playground.theme-aqua .panel .meta { - color: #4d5560; -} -.style-playground.theme-aqua .ui-table thead th { - color: #5c6470; - font-size: 12px; - font-weight: 600; - letter-spacing: 0.03em; - border-bottom-color: #c5ced8; - background: - linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.02) 34%, rgba(255,255,255,0) 35%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.12) 0 1px, rgba(174,174,178,0.08) 1px 2px), - linear-gradient(180deg, #ececee 0%, #d9d9db 100%); -} -.style-playground.theme-aqua .ui-table .status-ready { - border-color: #8fbe98; - color: #2f6a3d; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #e4f5e8 0%, #cfe8d6 100%); -} -.style-playground.theme-aqua .ui-table .status-warning { - border-color: #d0b26b; - color: #835b16; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fdf1d2 0%, #f2dfab 100%); -} -.style-playground.theme-aqua .ui-table .status-review { - border-color: #aaa0d8; - color: #5a4e92; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #eee9ff 0%, #ddd3fb 100%); -} -.style-playground.theme-aqua .ui-table .status-failed { - border-color: #cc9b9a; - color: #853734; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fee7e4 0%, #f0cbc6 100%); -} -.style-playground.theme-aqua .ui-table tbody tr:hover { - background: linear-gradient(90deg, rgba(245,247,250,0.96), rgba(238,242,247,0.96)); -} - -/* Aqua-first authoritative segmented controls for playground modules. */ -.style-playground.theme-aqua .status-filter-tabs { - display: inline-flex; - flex-wrap: nowrap; - gap: 0; - padding: 5px; - border: 1px solid #98999e; - border-radius: 10px; - overflow: hidden; - background: - linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(168,168,172,0.05) 1px 3px), - #d8d8db; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.78), - 0 1px 1px rgba(0,0,0,0.06); -} -.style-playground.theme-aqua .status-filter-tabs .segment { - min-height: 34px; - padding: 8px 18px; - border: 0; - border-radius: 0; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.14) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #f4f4f6 0%, #e2e2e5 100%); - color: #2f3135; - font-size: 14px; - font-weight: 600; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.60); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.82); -} -.style-playground.theme-aqua .status-filter-tabs .segment + .segment { - border-left: 1px solid #b4b5ba; -} -.style-playground.theme-aqua .status-filter-tabs .segment:first-child { - border-top-left-radius: 7px; - border-bottom-left-radius: 7px; -} -.style-playground.theme-aqua .status-filter-tabs .segment:last-child { - border-top-right-radius: 7px; - border-bottom-right-radius: 7px; -} -.style-playground.theme-aqua .status-filter-tabs-blue .segment.active { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - inset 0 -2px 4px rgba(74, 144, 220, 0.16); -} -.style-playground.theme-aqua .status-filter-tabs-dark .segment.active { - background: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #a8a8ac 0%, #95969a 54%, #8d8e93 100%); - color: rgba(255,255,255,0.93); - text-shadow: 0 -1px 0 rgba(0,0,0,0.16); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.18), - inset 1px 0 0 rgba(255,255,255,0.07), - inset -1px 0 0 rgba(72,72,76,0.14), - inset 0 -1px 0 rgba(74,74,78,0.26), - inset 0 -2px 4px rgba(74,72,76,0.10); -} -.style-playground.theme-aqua #style-status-filter .status-filter-shell { - border: 1px solid #c8c0c9; - border-radius: 14px; - padding: 12px 13px; - display: flex; - justify-content: center; - align-items: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.06) 34%, rgba(255,255,255,0) 35%), - rgba(255,255,255,0.10); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.40), - inset 0 -1px 0 rgba(190,180,192,0.08); -} -.style-playground.theme-aqua #style-presets .status-filter-tabs .segment { - min-height: 30px; - padding: 6px 12px; - font-size: 11px; -} -.style-playground.theme-aqua #style-presets .status-filter-tabs .segment.active { - color: #244f83; -} - -.style-playground.theme-win9x { - position: relative; - --sp-panel: #c0c0c0; - --sp-line: #7f7f7f; - --sp-card: #c0c0c0; - --sp-chip-bg: #d4d0c8; - --sp-chip-line: #808080; - --sp-table-head: #d4d0c8; - --sp-accent: #0a246a; - --sp-accent-line: #00123c; - --sp-accent-soft: #c6d6f7; - --sp-ghost-text: #000; - --sp-ghost-line: #808080; - --sp-ghost-bg-hover: #d4d0c8; - --sp-secondary-bg: #d4d0c8; - --sp-secondary-line: #808080; -} -.style-playground.theme-win9x::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - background: - linear-gradient(rgba(255,255,255,0.05), rgba(0,0,0,0.02)), - radial-gradient(480px 220px at 20% -10%, rgba(255,255,255,0.18), transparent 65%); -} -.style-playground.theme-win9x > * { position: relative; z-index: 1; } -.style-playground.theme-win9x .panel, -.style-playground.theme-win9x .card, -.style-playground.theme-win9x .table-wrap { - border: 1px solid #808080; - border-top-color: #ffffff; - border-left-color: #ffffff; - border-right-color: #404040; - border-bottom-color: #404040; - border-radius: 0; - box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080; -} -.style-playground.theme-win9x .panel { - padding: 14px; -} -.style-playground.theme-win9x .card { - min-height: auto; -} -.style-playground.theme-win9x .btn, -.style-playground.theme-win9x .segment, -.style-playground.theme-win9x .chip, -.style-playground.theme-win9x .pager a, -.style-playground.theme-win9x .pager .current, -.style-playground.theme-win9x .pager .ellipsis { - border-radius: 0; - border: 1px solid #808080; - border-top-color: #ffffff; - border-left-color: #ffffff; - border-right-color: #404040; - border-bottom-color: #404040; - box-shadow: none; -} -.style-playground.theme-win9x .btn { - min-height: 34px; - padding: 6px 12px; - font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif; - font-size: 13px; - background: #d4d0c8; - color: #000; -} -.style-playground.theme-win9x .btn:hover { - background: #e1ddd6; - transform: none; -} -.style-playground.theme-win9x .btn:active { - border-top-color: #404040; - border-left-color: #404040; - border-right-color: #ffffff; - border-bottom-color: #ffffff; - box-shadow: inset 1px 1px 0 #808080; -} -.style-playground.theme-win9x .btn-primary { - background: #0a246a; - color: #fff; - border-top-color: #6f8fd8; - border-left-color: #6f8fd8; - border-right-color: #00123c; - border-bottom-color: #00123c; - text-shadow: none; -} -.style-playground.theme-win9x .btn-secondary, -.style-playground.theme-win9x .btn-ghost { - color: #000; -} -.style-playground.theme-win9x .btn-danger { - background: #b93a32; - color: #fff; - border-top-color: #de8b86; - border-left-color: #de8b86; - border-right-color: #5e1b18; - border-bottom-color: #5e1b18; -} -.style-playground.theme-win9x .segmented { - border-radius: 0; - border: 1px solid #808080; - border-top-color: #404040; - border-left-color: #404040; - border-right-color: #ffffff; - border-bottom-color: #ffffff; - background: #c0c0c0; - padding: 4px; -} -.style-playground.theme-win9x .segment { - padding: 6px 9px; - font-family: Tahoma, "MS Sans Serif", sans-serif; - font-size: 12px; - background: #d4d0c8; - color: #000; -} -.style-playground.theme-win9x .segment.active, -.style-playground.theme-win9x .pager .current { - background: #0a246a; - color: #fff; - border-top-color: #6f8fd8; - border-left-color: #6f8fd8; - border-right-color: #00123c; - border-bottom-color: #00123c; -} -.style-playground.theme-win9x .chip { - background: #d4d0c8; - padding: 3px 8px; - font-family: Tahoma, "MS Sans Serif", sans-serif; - font-size: 11px; -} -.style-playground.theme-win9x .status { - border-radius: 0; - padding: 2px 6px; - font-family: Tahoma, "MS Sans Serif", sans-serif; - font-size: 11px; - text-transform: none; - box-shadow: inset 1px 1px 0 rgba(255,255,255,0.35); -} -.style-playground.theme-win9x .ui-table { - min-width: 0; - font-family: Tahoma, "MS Sans Serif", sans-serif; -} -.style-playground.theme-win9x .ui-table thead th, -.style-playground.theme-win9x .ui-table td { - font-family: Tahoma, "MS Sans Serif", sans-serif; - font-size: 12px; -} -.style-playground.theme-win9x .ui-table thead th { - border-bottom: 1px solid #808080; - color: #000; -} -.style-playground.theme-win9x .ui-table td { - border-bottom-color: #a8a8a8; -} -.style-playground.theme-win9x .ui-table tbody tr:hover { - background: #dbe8ff; -} -.style-playground.theme-win9x .filters input, -.style-playground.theme-win9x .filters select { - border-radius: 0; - border: 1px solid #808080; - border-top-color: #404040; - border-left-color: #404040; - border-right-color: #ffffff; - border-bottom-color: #ffffff; - background: #fff; - font-family: Tahoma, "MS Sans Serif", sans-serif; -} -.style-playground.theme-win9x .meta { - color: #222; - font-family: Tahoma, "MS Sans Serif", sans-serif; -} - -.style-playground.theme-linen { - --sp-panel: rgba(255, 252, 245, 0.94); - --sp-line: #d8cfbf; - --sp-card: #fffdf7; - --sp-chip-bg: #f8f2e6; - --sp-chip-line: #deceb3; - --sp-table-head: #f8f1e4; - --sp-accent: #215f98; - --sp-accent-line: #174b7a; - --sp-accent-soft: #eaf2fb; - --sp-ghost-text: #2d4960; - --sp-ghost-line: #c7d2de; - --sp-ghost-bg-hover: #edf3f8; - --sp-secondary-bg: #f4f6f8; - --sp-secondary-line: #cfd7e0; -} - -.style-playground.theme-slate { - --sp-panel: rgba(241, 246, 251, 0.94); - --sp-line: #c2cfdb; - --sp-card: #f8fbff; - --sp-chip-bg: #eef4fb; - --sp-chip-line: #c7d6e5; - --sp-table-head: #edf3fa; - --sp-accent: #2c5d88; - --sp-accent-line: #244a6c; - --sp-accent-soft: #e4edf7; - --sp-ghost-text: #28455d; - --sp-ghost-line: #bfd0df; - --sp-ghost-bg-hover: #eaf2fa; - --sp-secondary-bg: #eef3f8; - --sp-secondary-line: #c7d4e0; -} - -.style-playground.theme-signal { - --sp-panel: rgba(255, 251, 245, 0.95); - --sp-line: #dfcfba; - --sp-card: #fffdf8; - --sp-chip-bg: #fff4e7; - --sp-chip-line: #e6cfb2; - --sp-table-head: #fff2e1; - --sp-accent: #c44d1b; - --sp-accent-line: #a54015; - --sp-accent-soft: #fee9df; - --sp-ghost-text: #6a402a; - --sp-ghost-line: #d9c2b2; - --sp-ghost-bg-hover: #fdefe9; - --sp-secondary-bg: #f8efe8; - --sp-secondary-line: #dccbbf; -} - -/* Global demo themes: Vapor Soft (default) + Vapor Night (auto in dark mode). */ -:root { - --vw-bg: #efedf7; - --vw-bg-2: #f4f0fb; - --vw-bg-3: #eef8ff; - --vw-line: #c9bfdf; - --vw-line-soft: #d7cee9; - --vw-text: #2f2843; - --vw-text-soft: #675d82; - --vw-panel-top: rgba(255,255,255,0.86); - --vw-panel-bottom: rgba(241,236,249,0.84); - --vw-card-top: rgba(255,255,255,0.90); - --vw-card-bottom: rgba(239,246,255,0.84); - --vw-btn-line: #bcaedb; - --vw-btn-top: #fff9ff; - --vw-btn-bottom: #efeaf7; - --vw-primary-line: #be90e1; - --vw-primary-top: #ffd9f5; - --vw-primary-mid: #e7c4ff; - --vw-primary-bottom: #a7d8ff; - --vw-table-head-top: #f6f0fb; - --vw-table-head-bottom: #e9e3f4; - --vw-status-ready-bg: #dcf6ec; - --vw-status-ready-line: #9fd7c4; - --vw-status-warning-bg: #f8e9c1; - --vw-status-warning-line: #e0c88f; - --vw-status-review-bg: #ece1ff; - --vw-status-review-line: #c4afea; - --vw-status-failed-bg: #f8dbe6; - --vw-status-failed-line: #e2b4c6; - --shell-height: 64px; - --shell-pad-y: 10px; - --shell-bg-light: - linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08)), - linear-gradient(180deg, rgba(245,240,251,0.82), rgba(232,238,250,0.78)); - --shell-bg-dark: - linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), - linear-gradient(180deg, rgba(36,30,67,0.82), rgba(28,29,60,0.78)); - --shell-border-light: #d7cee9; - --shell-border-dark: #534a8d; - --shell-kicker-light: #807691; - --shell-kicker-dark: #a79ec6; - --shell-title-light: #2f2843; - --shell-title-dark: #f0ebff; - --shell-subtitle-light: #6e6488; - --shell-subtitle-dark: #c4bbdf; - --shell-accent-light: linear-gradient(90deg, #ffd9f3 0%, #e8c9ff 44%, #b8ddff 100%); - --shell-accent-dark: linear-gradient(90deg, #ff96e3 0%, #ca88ff 44%, #79d0ff 100%); - --shell-accent-line-light: #bf92e3; - --shell-accent-line-dark: #cb84ff; - --shell-accent-shadow-light: rgba(191, 146, 227, 0.32); - --shell-accent-shadow-dark: rgba(203, 132, 255, 0.36); - --shell-bg: var(--shell-bg-light); - --shell-border: var(--shell-border-light); - --shell-kicker: var(--shell-kicker-light); - --shell-title: var(--shell-title-light); - --shell-subtitle: var(--shell-subtitle-light); - --shell-accent: var(--shell-accent-light); - --shell-accent-line: var(--shell-accent-line-light); - --shell-accent-shadow: var(--shell-accent-shadow-light); -} - -/* Header color presets for host projects. Apply on html: data-vapor-shell="preset-id". */ -html[data-vapor-shell="miami-sunset"] { - --shell-height: 66px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08)), linear-gradient(180deg, #fbe5f8 0%, #e4ecff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #3e2457 0%, #252c5c 100%); - --shell-border-light: #d8bae8; - --shell-border-dark: #7355b1; - --shell-accent-light: linear-gradient(90deg, #ff7ec7 0%, #cc8dff 52%, #6fd5ff 100%); - --shell-accent-dark: linear-gradient(90deg, #ff5bc8 0%, #b476ff 50%, #4dc8ff 100%); - --shell-accent-line-light: #be74da; - --shell-accent-line-dark: #d97aff; - --shell-accent-shadow-light: rgba(190, 116, 218, 0.35); - --shell-accent-shadow-dark: rgba(217, 122, 255, 0.40); -} -html[data-vapor-shell="neon-grid"] { - --shell-height: 64px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.08)), linear-gradient(180deg, #f5eeff 0%, #e7f5ff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #2f2352 0%, #1f3157 100%); - --shell-border-light: #cdbce7; - --shell-border-dark: #5b5bb0; - --shell-accent-light: linear-gradient(90deg, #ff4fd8 0%, #9e7dff 52%, #3cd6ff 100%); - --shell-accent-dark: linear-gradient(90deg, #ff39cc 0%, #8b68ff 50%, #2bc6ff 100%); - --shell-accent-line-light: #ab6fe7; - --shell-accent-line-dark: #c76fff; - --shell-accent-shadow-light: rgba(171, 111, 231, 0.34); - --shell-accent-shadow-dark: rgba(199, 111, 255, 0.38); -} -html[data-vapor-shell="laser-flamingo"] { - --shell-height: 70px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08)), linear-gradient(180deg, #ffe8f4 0%, #efe8ff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #472441 0%, #2d2a58 100%); - --shell-border-light: #dfb8cf; - --shell-border-dark: #8a4d8a; - --shell-accent-light: linear-gradient(90deg, #ff6fae 0%, #ff8adf 50%, #7cc8ff 100%); - --shell-accent-dark: linear-gradient(90deg, #ff4f99 0%, #eb73ff 50%, #5fb9ff 100%); - --shell-accent-line-light: #d16cae; - --shell-accent-line-dark: #e273e0; - --shell-accent-shadow-light: rgba(209, 108, 174, 0.36); - --shell-accent-shadow-dark: rgba(226, 115, 224, 0.40); -} -html[data-vapor-shell="synth-lagoon"] { - --shell-height: 62px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.08)), linear-gradient(180deg, #e8f6ff 0%, #e9ebff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #233856 0%, #212a53 100%); - --shell-border-light: #b7d5eb; - --shell-border-dark: #4f74b4; - --shell-accent-light: linear-gradient(90deg, #67d7ff 0%, #6ea9ff 50%, #b784ff 100%); - --shell-accent-dark: linear-gradient(90deg, #49c7ff 0%, #5b8fff 50%, #a86fff 100%); - --shell-accent-line-light: #6e9be8; - --shell-accent-line-dark: #8b7bff; - --shell-accent-shadow-light: rgba(110, 155, 232, 0.34); - --shell-accent-shadow-dark: rgba(139, 123, 255, 0.38); -} -html[data-vapor-shell="mall-soft"] { - --shell-height: 68px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08)), linear-gradient(180deg, #fff1f8 0%, #f4f5ff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #3f2f54 0%, #2c3459 100%); - --shell-border-light: #dfc9df; - --shell-border-dark: #73609d; - --shell-accent-light: linear-gradient(90deg, #ffb5d7 0%, #d6b0ff 50%, #9dd8ff 100%); - --shell-accent-dark: linear-gradient(90deg, #ff95ca 0%, #c397ff 50%, #81c8ff 100%); - --shell-accent-line-light: #c79ac8; - --shell-accent-line-dark: #b788ff; - --shell-accent-shadow-light: rgba(199, 154, 200, 0.33); - --shell-accent-shadow-dark: rgba(183, 136, 255, 0.38); -} -html[data-vapor-shell="hologram-sky"] { - --shell-height: 64px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.08)), linear-gradient(180deg, #edf9ff 0%, #ebf1ff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #233a4d 0%, #22325a 100%); - --shell-border-light: #bdd9e6; - --shell-border-dark: #4f78a9; - --shell-accent-light: linear-gradient(90deg, #5ce4ff 0%, #7bbfff 50%, #c28fff 100%); - --shell-accent-dark: linear-gradient(90deg, #3fd5ff 0%, #63a9ff 50%, #ab79ff 100%); - --shell-accent-line-light: #6bb8e1; - --shell-accent-line-dark: #9774ff; - --shell-accent-shadow-light: rgba(107, 184, 225, 0.34); - --shell-accent-shadow-dark: rgba(151, 116, 255, 0.38); -} -html[data-vapor-shell="peach-drive"] { - --shell-height: 72px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08)), linear-gradient(180deg, #fff0e6 0%, #ffe9f5 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #4e2f3f 0%, #383258 100%); - --shell-border-light: #e2c3b5; - --shell-border-dark: #8e5e7c; - --shell-accent-light: linear-gradient(90deg, #ff9a6a 0%, #ff78b2 52%, #8eb8ff 100%); - --shell-accent-dark: linear-gradient(90deg, #ff7e4f 0%, #f661a1 52%, #75a5ff 100%); - --shell-accent-line-light: #d67a7a; - --shell-accent-line-dark: #d56db5; - --shell-accent-shadow-light: rgba(214, 122, 122, 0.34); - --shell-accent-shadow-dark: rgba(213, 109, 181, 0.38); -} -html[data-vapor-shell="ultraviolet-plaza"] { - --shell-height: 66px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.08)), linear-gradient(180deg, #f0e8ff 0%, #e8edff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #2b1f4f 0%, #1f2756 100%); - --shell-border-light: #c9b8eb; - --shell-border-dark: #5d4eae; - --shell-accent-light: linear-gradient(90deg, #b26dff 0%, #ee68ff 52%, #6ec9ff 100%); - --shell-accent-dark: linear-gradient(90deg, #9e59ff 0%, #d853ff 52%, #55bbff 100%); - --shell-accent-line-light: #9f67e9; - --shell-accent-line-dark: #c962ff; - --shell-accent-shadow-light: rgba(159, 103, 233, 0.34); - --shell-accent-shadow-dark: rgba(201, 98, 255, 0.39); -} -html[data-vapor-shell="cyber-mint"] { - --shell-height: 62px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.08)), linear-gradient(180deg, #ebfff7 0%, #ebf9ff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #1f3d3d 0%, #24345a 100%); - --shell-border-light: #b9e2d9; - --shell-border-dark: #4e8a9f; - --shell-accent-light: linear-gradient(90deg, #57f0c1 0%, #6fd8ff 52%, #9d9eff 100%); - --shell-accent-dark: linear-gradient(90deg, #3adcad 0%, #58c8ff 52%, #8e8dff 100%); - --shell-accent-line-light: #62c8b2; - --shell-accent-line-dark: #7fb3ff; - --shell-accent-shadow-light: rgba(98, 200, 178, 0.34); - --shell-accent-shadow-dark: rgba(127, 179, 255, 0.38); -} - -body { - position: relative; - color: var(--vw-text); - background: - radial-gradient(900px 280px at 10% 0%, rgba(255, 185, 236, 0.14), transparent 72%), - radial-gradient(980px 300px at 90% 0%, rgba(126, 220, 255, 0.14), transparent 72%), - linear-gradient(180deg, var(--vw-bg-2) 0%, var(--vw-bg) 58%, var(--vw-bg-3) 100%); -} - -body::before, -body::after { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; -} -body::before { - opacity: 0.14; - background: - radial-gradient(900px 280px at 18% 6%, rgba(255,255,255,0.10), transparent 72%), - linear-gradient(105deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%); -} -body::after { - opacity: 0.72; - clip-path: polygon(0 48%, 100% 48%, 100% 100%, 0 100%); - transform-origin: 50% 100%; - transform: perspective(1100px) rotateX(57deg) scaleX(2.15) scaleY(1.34); - background: - linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255, 192, 233, 0.22) 34%, rgba(182, 234, 255, 0.30) 100%), - radial-gradient(760px 220px at 50% 108%, rgba(222, 162, 255, 0.32), transparent 70%), - radial-gradient(640px 180px at 50% 104%, rgba(122, 221, 255, 0.26), transparent 72%), - repeating-linear-gradient(to right, rgba(255,255,255,0.44) 0 1px, rgba(255,255,255,0) 1px 52px), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.34) 0 1px, rgba(255,255,255,0) 1px 38px); - background-blend-mode: normal, screen, screen, normal, normal; -} - -.demo-topnav, -.app-shell, -.page { - position: relative; - z-index: 1; -} - -.demo-topnav { - background: - linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.20)), - linear-gradient(180deg, rgba(247,242,252,0.88), rgba(234,240,251,0.84)); - border-bottom-color: var(--vw-line-soft); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.65); -} -.demo-topnav-brand, -.demo-topnav-link { - color: #4f4764; - border-color: transparent; -} -.demo-topnav-brand { - border-color: #c9bfde; - background: - linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #faf7fe 0%, #ece8f5 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.86); -} -.demo-topnav-link:hover { - background: rgba(255,255,255,0.38); - border-color: #d1c7e6; -} -.demo-topnav-brand.active, -.demo-topnav-link.active { - color: #31264b; - border-color: #bf92e3; - background: - radial-gradient(140% 90% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.28) 28%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ffd9f3 0%, #e8c9ff 44%, #b8ddff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - 0 0 0 1px rgba(255,255,255,0.14); -} - -.app-shell { - min-height: var(--shell-height); - background: var(--shell-bg); - border-bottom-color: var(--shell-border); -} -.app-shell-kicker { color: var(--shell-kicker); } -.app-shell-title { color: var(--shell-title); } -.app-shell-subtitle { color: var(--shell-subtitle); } -.shell-pill { - border-color: #cdbfe5; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f9f4ff 0%, #ede8f6 100%); - color: #5d5573; -} -.shell-pill-env { border-color: #c9bfe1; } -.shell-pill-db { - border-color: #a9dac9; - color: #3f7364; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f1fff7 0%, #e1f3e8 100%); -} -.shell-pill-user { - border-color: #b8c7f0; - color: #436088; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f1f6ff 0%, #e4ecfb 100%); -} -.theme-switch { - display: inline-flex; - align-items: center; - gap: 0; - margin-left: 4px; - border: 1px solid #cdbfe5; - border-radius: 999px; - overflow: hidden; - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #faf7ff 0%, #ede9f6 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.84); -} -.theme-switch-btn { - appearance: none; - border: 0; - border-left: 1px solid rgba(184, 171, 217, 0.5); - background: transparent; - color: #5f5578; - cursor: pointer; - font: inherit; - font-size: 11px; - font-weight: 700; - line-height: 1; - padding: 5px 9px; -} -.theme-switch-btn:first-child { border-left: 0; } -.theme-switch-btn:hover { background: rgba(255,255,255,0.22); } -.theme-switch-btn.active { - color: #2f2048; - background: - radial-gradient(150% 90% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.26) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffd9f3 0%, #e8c9ff 46%, #b9ddff 100%); -} - -.masthead, -.panel { - border-color: var(--vw-line); - background: - linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.04) 30%, rgba(255,255,255,0) 31%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.18) 0 1px, rgba(199, 185, 231, 0.06) 1px 3px), - linear-gradient(180deg, var(--vw-panel-top) 0%, var(--vw-panel-bottom) 100%); - box-shadow: - 0 8px 16px rgba(116, 102, 165, 0.07), - inset 0 1px 0 rgba(255,255,255,0.80); -} -.card, -.timeline-card, -.table-wrap, -.selected-summary { - border-color: #d2c7e5; - background: - linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.06) 28%, rgba(255,255,255,0) 29%), - linear-gradient(180deg, var(--vw-card-top) 0%, var(--vw-card-bottom) 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.82); -} - -.label { color: #817694; } -h1, h2, h3 { color: #2f2843; } -.lead, .meta, .panel .meta, .filters label { color: var(--vw-text-soft); } - -.chip, -.pill, -.chip-link { - border-color: #d1c3e8; - color: #5b5074; - background: - linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fffaff 0%, #efeaf8 100%); -} -.chip-link:hover, -.pill:hover { - filter: brightness(1.02); -} - -.btn { - border-color: var(--vw-btn-line); - color: #372e4c; - background: - radial-gradient(150% 90% at 50% -8%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.26) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, var(--vw-btn-top) 0%, var(--vw-btn-bottom) 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.90), - inset 0 -1px 0 rgba(188, 176, 216, 0.08), - 0 1px 0 rgba(255,255,255,0.30); - text-shadow: 0 1px 0 rgba(255,255,255,0.60); -} -.btn-primary { - border-color: var(--vw-primary-line); - color: #33204c; - background: - radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.36) 28%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, var(--vw-primary-top) 0%, var(--vw-primary-mid) 48%, var(--vw-primary-bottom) 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(149, 126, 207, 0.12), - 0 1px 0 rgba(255,255,255,0.36), - 0 0 0 1px rgba(255,255,255,0.10); -} -.btn-secondary, -.btn-ghost { - color: #5b5074; -} -.btn-danger, -.tool-btn-danger { - color: #7a3555; - border-color: #d3abc0; - background: - radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.34) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffdce9 0%, #f4c3d8 100%); -} -.btn:hover { filter: brightness(1.02) saturate(1.03); } -.btn:disabled, -.btn[aria-disabled="true"] { - color: #b8b0c8; - border-color: #ddd6e8; -} - -.segmented, -.status-filter-tabs { - border-color: #c1b4db; - background: - linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0)), - #e7e0f2; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.74); -} -.segment { - color: #4a4063; -} -.segment.active, -.pager .current { - border-color: #c391e5; - color: #33224d; - background: - radial-gradient(150% 95% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.28) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffd8f6 0%, #e6c5ff 44%, #b6dcff 100%); -} - -.filters input, -.filters select, -.forms-grid input, -.forms-grid select, -.modal-grid input, -.modal-grid select { - border-color: #bbaed7; - background: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fffcff 0%, #efedf7 100%); - color: #2f2843; -} -.filters input::placeholder, -.forms-grid input::placeholder { color: #a196bc; } - -.ui-table { - border-color: #cfc4e4; - background: rgba(255,255,255,0.58); -} -.ui-table thead th { - color: #665a7f; - border-bottom-color: #d1c5e6; - background: - linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 34%, rgba(255,255,255,0) 35%), - linear-gradient(180deg, var(--vw-table-head-top) 0%, var(--vw-table-head-bottom) 100%); -} -.ui-table th, -.ui-table td { - border-bottom-color: rgba(197, 186, 227, 0.34); -} -.ui-table tbody tr:hover { - background: linear-gradient(90deg, rgba(255, 246, 253, 0.80), rgba(236, 247, 255, 0.80)); -} - -.status-ready { - border-color: var(--vw-status-ready-line); - background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #f0fff8 0%, var(--vw-status-ready-bg) 100%); - color: #327362; -} -.status-warning { - border-color: var(--vw-status-warning-line); - background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #fff8e3 0%, var(--vw-status-warning-bg) 100%); - color: #8d6825; -} -.status-review { - border-color: var(--vw-status-review-line); - background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #f7f1ff 0%, var(--vw-status-review-bg) 100%); - color: #6a4fa2; -} -.status-failed { - border-color: var(--vw-status-failed-line); - background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #fff3f7 0%, var(--vw-status-failed-bg) 100%); - color: #8a435a; -} - -.demo-modal { - border-color: #a895ca; - background: - linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03) 20%, rgba(255,255,255,0) 21%), - linear-gradient(180deg, rgba(247,242,252,0.94), rgba(236,241,252,0.92)); -} -.demo-modal-titlebar { - border-bottom-color: #b8acd5; - background: - linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0.04) 43%), - linear-gradient(180deg, #efe8f9 0%, #dde4f5 100%); -} -.demo-modal-title { color: #31284b; } - -@media (prefers-color-scheme: dark) { - :root { - --vw-bg: #171329; - --vw-bg-2: #1e1736; - --vw-bg-3: #151a31; - --vw-line: #5e52a0; - --vw-line-soft: #534a8d; - --vw-text: #ece8ff; - --vw-text-soft: #c6bde5; - --vw-panel-top: rgba(38, 31, 70, 0.84); - --vw-panel-bottom: rgba(26, 27, 58, 0.82); - --vw-card-top: rgba(45, 35, 79, 0.86); - --vw-card-bottom: rgba(28, 35, 68, 0.82); - --vw-btn-line: #6e62ab; - --vw-btn-top: #4a3a78; - --vw-btn-bottom: #302b5c; - --vw-primary-line: #c57cff; - --vw-primary-top: #ff92e1; - --vw-primary-mid: #cb88ff; - --vw-primary-bottom: #73cdff; - --vw-table-head-top: #473a74; - --vw-table-head-bottom: #2f2c5f; - --shell-bg: var(--shell-bg-dark); - --shell-border: var(--shell-border-dark); - --shell-kicker: var(--shell-kicker-dark); - --shell-title: var(--shell-title-dark); - --shell-subtitle: var(--shell-subtitle-dark); - --shell-accent: var(--shell-accent-dark); - --shell-accent-line: var(--shell-accent-line-dark); - --shell-accent-shadow: var(--shell-accent-shadow-dark); - } - body { - background: - radial-gradient(980px 340px at 12% 2%, rgba(255, 116, 219, 0.18), transparent 72%), - radial-gradient(980px 360px at 88% 4%, rgba(101, 211, 255, 0.16), transparent 72%), - linear-gradient(180deg, var(--vw-bg-2) 0%, var(--vw-bg) 55%, var(--vw-bg-3) 100%); - } - body::before { - opacity: 0.18; - background: - repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, rgba(120, 97, 196, 0.03) 1px 3px), - linear-gradient(105deg, rgba(207, 135, 255, 0.06) 0%, rgba(255,255,255,0) 45%); - } - body::after { - opacity: 0.84; - clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); - transform-origin: 50% 100%; - transform: perspective(1100px) rotateX(57deg) scaleX(2.2) scaleY(1.4); - background: - linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255, 84, 203, 0.10) 26%, rgba(78, 188, 255, 0.12) 100%), - radial-gradient(860px 220px at 50% 106%, rgba(255, 84, 203, 0.22), transparent 70%), - radial-gradient(760px 200px at 50% 108%, rgba(91, 211, 255, 0.22), transparent 72%), - repeating-linear-gradient(to right, rgba(229, 183, 255, 0.34) 0 1px, rgba(255,255,255,0) 1px 52px), - repeating-linear-gradient(to bottom, rgba(151, 230, 255, 0.24) 0 1px, rgba(255,255,255,0) 1px 38px); - background-blend-mode: normal, screen, screen, normal, normal; - } - .demo-topnav { - background: - linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)), - linear-gradient(180deg, rgba(36,30,66,0.86), rgba(28,27,57,0.84)); - border-bottom-color: var(--vw-line-soft); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); - } - .demo-topnav-brand, - .demo-topnav-link { - color: #ddd7f3; - text-shadow: 0 1px 0 rgba(0,0,0,0.18); - } - .demo-topnav-brand { - border-color: #6b5ea7; - background: linear-gradient(180deg, #433873 0%, #302c60 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); - } - .demo-topnav-link:hover { - background: rgba(255,255,255,0.04); - border-color: #5e529a; - } - .demo-topnav-brand.active, - .demo-topnav-link.active { - color: #2a133f; - border-color: #cb84ff; - background: - radial-gradient(150% 95% at 50% -10%, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.12) 28%, rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ff96e3 0%, #ca88ff 44%, #79d0ff 100%); - } - .app-shell { - background: var(--shell-bg); - border-bottom-color: var(--shell-border); - } - .app-shell-kicker { color: var(--shell-kicker); } - .app-shell-title { color: var(--shell-title); } - .app-shell-subtitle { color: var(--shell-subtitle); } - .lead, .meta, .panel .meta, .filters label, .text-link { - color: #d6ceef; - } - .text-link:hover { color: #f1ebff; } - .shell-pill { - border-color: #6b60a8; - color: #ddd8f3; - background: - linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #443873 0%, #302b5f 100%); - } - .shell-pill-db { border-color: #62cfb0; color: #d2fff1; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #24473f 0%, #1f3a35 100%); } - .shell-pill-user { border-color: #78b8ff; color: #d9ecff; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #243f61 0%, #1f3553 100%); } - .theme-switch { - border-color: #6d61aa; - background: - linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #443873 0%, #302b5f 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); - } - .theme-switch-btn { - color: #ddd7f3; - border-left-color: rgba(114, 101, 181, 0.65); - } - .theme-switch-btn:hover { background: rgba(255,255,255,0.05); } - .theme-switch-btn.active { - color: #2a153f; - background: - radial-gradient(150% 90% at 50% -10%, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.12) 28%, rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ff96e3 0%, #ca88ff 44%, #79d0ff 100%); - } - .masthead, .panel { - box-shadow: 0 10px 22px rgba(10,7,25,0.18), inset 0 1px 0 rgba(255,255,255,0.10); - } - .card, .timeline-card, .table-wrap, .selected-summary { - box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); - } - .label { color: #ac9fd0; } - h1, h2, h3 { color: var(--vw-text); } - .lead, .meta, .panel .meta, .filters label { color: var(--vw-text-soft); } - .chip, .pill, .chip-link { - border-color: #6d61aa; - color: #ded8f5; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #463973 0%, #322d60 100%); - } - .btn { - color: #ece7ff; - text-shadow: 0 -1px 0 rgba(0,0,0,0.20); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(59,47,108,0.24); - } - .btn-primary { color: #2a153f; text-shadow: 0 1px 0 rgba(255,255,255,0.28); } - .btn-danger, .tool-btn-danger { color: #ffdced; border-color: #b86191; background: radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 28%, rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #8a2c58 0%, #6f2249 100%); } - .segmented, .status-filter-tabs { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)), #38305f; border-color: #6a5fa6; } - .segment { color: #e7e1fb; text-shadow: 0 -1px 0 rgba(0,0,0,0.20); } - .segment.active, .pager .current { color: #2a153f; text-shadow: 0 1px 0 rgba(255,255,255,0.26); } - .filters input, .filters select, .forms-grid input, .forms-grid select, .modal-grid input, .modal-grid select { - color: #eee9ff; - background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #44376d 0%, #302b5a 100%); - } - .filters input::placeholder, .forms-grid input::placeholder { color: #b8add8; } - .ui-table { background: rgba(38, 31, 68, 0.34); border-color: #6d61aa; } - .ui-table thead th { color: #d8d0f1; border-bottom-color: #6d61aa; } - .ui-table th, .ui-table td { border-bottom-color: rgba(120, 103, 181, 0.26); color: #efeaff; } - .ui-table tbody tr:hover { background: linear-gradient(90deg, rgba(82,57,128,0.26), rgba(40,90,126,0.22)); } - .timeline-card p, - .card p, - .selected-summary p, - .notice { - color: #ddd5f5; - } - .status-ready { color: #d5fff4; border-color: #65d8bc; background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #264f46 0%, #22423d 100%); } - .status-warning { color: #fff0cd; border-color: #efc46f; background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #5b4921 0%, #4d3f1d 100%); } - .status-review { color: #f1e3ff; border-color: #c392ff; background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #48336f 0%, #3d2b60 100%); } - .status-failed { color: #ffe0ec; border-color: #ef90b9; background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #5c2940 0%, #4d2236 100%); } - .demo-modal { border-color: #6b5ea7; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 20%, rgba(255,255,255,0) 21%), linear-gradient(180deg, rgba(42,34,76,0.94), rgba(26,29,58,0.92)); } - .demo-modal-titlebar { border-bottom-color: #6b5ea7; background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0.01) 43%), linear-gradient(180deg, #4b3c79 0%, #343064 100%); } - .demo-modal-title { color: #f0ebff; text-shadow: 0 -1px 0 rgba(0,0,0,0.22); } -} - -html[data-theme="dark"] { - color-scheme: dark; - --vw-bg: #171329; - --vw-bg-2: #1e1736; - --vw-bg-3: #151a31; - --vw-line: #5e52a0; - --vw-line-soft: #534a8d; - --vw-text: #ece8ff; - --vw-text-soft: #c6bde5; - --vw-panel-top: rgba(38, 31, 70, 0.84); - --vw-panel-bottom: rgba(26, 27, 58, 0.82); - --vw-card-top: rgba(45, 35, 79, 0.86); - --vw-card-bottom: rgba(28, 35, 68, 0.82); - --vw-btn-line: #6e62ab; - --vw-btn-top: #4a3a78; - --vw-btn-bottom: #302b5c; - --vw-primary-line: #c57cff; - --vw-primary-top: #ff92e1; - --vw-primary-mid: #cb88ff; - --vw-primary-bottom: #73cdff; - --vw-table-head-top: #473a74; - --vw-table-head-bottom: #2f2c5f; -} -html[data-theme="light"] { - color-scheme: light; - --vw-bg: #efedf7; - --vw-bg-2: #f4f0fb; - --vw-bg-3: #eef8ff; - --vw-line: #c9bfdf; - --vw-line-soft: #d7cee9; - --vw-text: #2f2843; - --vw-text-soft: #675d82; - --vw-panel-top: rgba(255,255,255,0.86); - --vw-panel-bottom: rgba(241,236,249,0.84); - --vw-card-top: rgba(255,255,255,0.90); - --vw-card-bottom: rgba(239,246,255,0.84); - --vw-btn-line: #bcaedb; - --vw-btn-top: #fff9ff; - --vw-btn-bottom: #efeaf7; - --vw-primary-line: #be90e1; - --vw-primary-top: #ffd9f5; - --vw-primary-mid: #e7c4ff; - --vw-primary-bottom: #a7d8ff; - --vw-table-head-top: #f6f0fb; - --vw-table-head-bottom: #e9e3f4; -} - -html[data-theme="dark"] body { - background: - radial-gradient(980px 340px at 12% 2%, rgba(255, 116, 219, 0.18), transparent 72%), - radial-gradient(980px 360px at 88% 4%, rgba(101, 211, 255, 0.16), transparent 72%), - linear-gradient(180deg, #1e1736 0%, #171329 55%, #151a31 100%); -} -html[data-theme="dark"] body::before { - opacity: 0.10; - background: - radial-gradient(920px 300px at 18% 8%, rgba(255,255,255,0.06), transparent 72%), - linear-gradient(105deg, rgba(207, 135, 255, 0.05) 0%, rgba(255,255,255,0) 45%); -} -html[data-theme="dark"] body::after { - opacity: 0.84; - clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); - transform-origin: 50% 100%; - transform: perspective(1100px) rotateX(57deg) scaleX(2.2) scaleY(1.4); - background: - linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255, 84, 203, 0.10) 26%, rgba(78, 188, 255, 0.12) 100%), - radial-gradient(860px 220px at 50% 106%, rgba(255, 84, 203, 0.22), transparent 70%), - radial-gradient(760px 200px at 50% 108%, rgba(91, 211, 255, 0.22), transparent 72%), - repeating-linear-gradient(to right, rgba(229, 183, 255, 0.34) 0 1px, rgba(255,255,255,0) 1px 52px), - repeating-linear-gradient(to bottom, rgba(151, 230, 255, 0.24) 0 1px, rgba(255,255,255,0) 1px 38px); - background-blend-mode: normal, screen, screen, normal, normal; -} -html[data-theme="dark"] .demo-topnav { - background: - linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)), - linear-gradient(180deg, rgba(36,30,66,0.86), rgba(28,27,57,0.84)); - border-bottom-color: #534a8d; -} -html[data-theme="dark"] { - --shell-bg: var(--shell-bg-dark); - --shell-border: var(--shell-border-dark); - --shell-kicker: var(--shell-kicker-dark); - --shell-title: var(--shell-title-dark); - --shell-subtitle: var(--shell-subtitle-dark); - --shell-accent: var(--shell-accent-dark); - --shell-accent-line: var(--shell-accent-line-dark); - --shell-accent-shadow: var(--shell-accent-shadow-dark); -} -html[data-theme="dark"] .demo-topnav-brand, -html[data-theme="dark"] .demo-topnav-link, -html[data-theme="dark"] h1, -html[data-theme="dark"] h2, -html[data-theme="dark"] h3, -html[data-theme="dark"] .masthead h1, -html[data-theme="dark"] .panel-head h2, -html[data-theme="dark"] .panel-subsection .panel-head h2, -html[data-theme="dark"] .masthead .label, -html[data-theme="dark"] .app-shell-title, -html[data-theme="dark"] .ui-table th, -html[data-theme="dark"] .ui-table td { - color: var(--shell-title); -} -html[data-theme="dark"] .demo-topnav-brand, -html[data-theme="dark"] .demo-topnav-link { - text-shadow: 0 1px 0 rgba(0,0,0,0.18); -} -html[data-theme="dark"] .app-shell, -html[data-theme="dark"] .masthead, -html[data-theme="dark"] .panel, -html[data-theme="dark"] .card, -html[data-theme="dark"] .timeline-card, -html[data-theme="dark"] .table-wrap, -html[data-theme="dark"] .selected-summary, -html[data-theme="dark"] .demo-modal { - color: #ece8ff; -} -html[data-theme="dark"] .masthead, -html[data-theme="dark"] .panel { - border-color: var(--vw-line); - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 30%, rgba(255,255,255,0) 31%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(145, 116, 232, 0.03) 1px 3px), - linear-gradient(180deg, var(--vw-panel-top) 0%, var(--vw-panel-bottom) 100%); -} -html[data-theme="dark"] .card, -html[data-theme="dark"] .timeline-card, -html[data-theme="dark"] .table-wrap, -html[data-theme="dark"] .selected-summary { - border-color: #6d61aa; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 28%, rgba(255,255,255,0) 29%), - linear-gradient(180deg, var(--vw-card-top) 0%, var(--vw-card-bottom) 100%); -} -html[data-theme="dark"] .app-shell { - background: var(--shell-bg); - border-bottom-color: var(--shell-border); -} -html[data-theme="dark"] .app-shell-kicker { color: var(--shell-kicker); } -html[data-theme="dark"] .app-shell-subtitle { color: var(--shell-subtitle); } -html[data-theme="dark"] .lead, -html[data-theme="dark"] .meta, -html[data-theme="dark"] .panel .meta, -html[data-theme="dark"] .filters label, -html[data-theme="dark"] .text-link, -html[data-theme="dark"] .card p, -html[data-theme="dark"] .timeline-card p, -html[data-theme="dark"] .selected-summary p, -html[data-theme="dark"] .notice { - color: #d8d0f0; -} -html[data-theme="dark"] .text-link:hover { color: #f1ebff; } - -html[data-theme="light"] .demo-topnav-brand, -html[data-theme="light"] .demo-topnav-link, -html[data-theme="light"] h1, -html[data-theme="light"] h2, -html[data-theme="light"] h3, -html[data-theme="light"] .masthead h1, -html[data-theme="light"] .panel-head h2, -html[data-theme="light"] .masthead .label, -html[data-theme="light"] .app-shell-title, -html[data-theme="light"] .ui-table th, -html[data-theme="light"] .ui-table td { - color: var(--shell-title); - text-shadow: none; -} -html[data-theme="light"] { - --shell-bg: var(--shell-bg-light); - --shell-border: var(--shell-border-light); - --shell-kicker: var(--shell-kicker-light); - --shell-title: var(--shell-title-light); - --shell-subtitle: var(--shell-subtitle-light); - --shell-accent: var(--shell-accent-light); - --shell-accent-line: var(--shell-accent-line-light); - --shell-accent-shadow: var(--shell-accent-shadow-light); -} -html[data-theme="light"] body { - background: - radial-gradient(900px 280px at 10% 0%, rgba(255, 185, 236, 0.14), transparent 72%), - radial-gradient(980px 300px at 90% 0%, rgba(126, 220, 255, 0.14), transparent 72%), - linear-gradient(180deg, #f4f0fb 0%, #efedf7 58%, #eef8ff 100%); -} -html[data-theme="light"] body::before { - opacity: 0.14; - background: - radial-gradient(900px 280px at 18% 6%, rgba(255,255,255,0.10), transparent 72%), - linear-gradient(105deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%); -} -html[data-theme="light"] body::after { - opacity: 0.72; - clip-path: polygon(0 48%, 100% 48%, 100% 100%, 0 100%); - transform-origin: 50% 100%; - transform: perspective(1100px) rotateX(57deg) scaleX(2.15) scaleY(1.34); - background: - linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255, 192, 233, 0.22) 34%, rgba(182, 234, 255, 0.30) 100%), - radial-gradient(760px 220px at 50% 108%, rgba(222, 162, 255, 0.32), transparent 70%), - radial-gradient(640px 180px at 50% 104%, rgba(122, 221, 255, 0.26), transparent 72%), - repeating-linear-gradient(to right, rgba(255,255,255,0.44) 0 1px, rgba(255,255,255,0) 1px 52px), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.34) 0 1px, rgba(255,255,255,0) 1px 38px); - background-blend-mode: normal, screen, screen, normal, normal; -} -html[data-theme="light"] .demo-topnav { - background: - linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.20)), - linear-gradient(180deg, rgba(247,242,252,0.88), rgba(234,240,251,0.84)); - border-bottom-color: #d7cee9; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.65); -} -html[data-theme="light"] .demo-topnav-brand { - color: #4f4764; - border-color: #c9bfde; - background: - linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #faf7fe 0%, #ece8f5 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.86); -} -html[data-theme="light"] .demo-topnav-link { - color: #4f4764; - border-color: transparent; -} -html[data-theme="light"] .demo-topnav-link:hover { - background: rgba(255,255,255,0.38); - border-color: #d1c7e6; -} -html[data-theme="light"] .demo-topnav-brand.active, -html[data-theme="light"] .demo-topnav-link.active { - color: #31264b; - border-color: #bf92e3; - background: - radial-gradient(140% 90% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.28) 28%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ffd9f3 0%, #e8c9ff 44%, #b8ddff 100%); -} -html[data-theme="light"] .app-shell { - background: var(--shell-bg); - border-bottom-color: var(--shell-border); -} -html[data-theme="light"] .app-shell-kicker { color: var(--shell-kicker); } -html[data-theme="light"] .app-shell-title { color: var(--shell-title); } -html[data-theme="light"] .app-shell-subtitle { color: var(--shell-subtitle); } -html[data-theme="light"] .shell-pill { - border-color: #cdbfe5; - color: #5d5573; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f9f4ff 0%, #ede8f6 100%); -} -html[data-theme="light"] .shell-pill-db { - border-color: #a9dac9; - color: #3f7364; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f1fff7 0%, #e1f3e8 100%); -} -html[data-theme="light"] .shell-pill-user { - border-color: #b8c7f0; - color: #436088; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f1f6ff 0%, #e4ecfb 100%); -} -html[data-theme="light"] .theme-switch { - border-color: #cdbfe5; - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #faf7ff 0%, #ede9f6 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.84); -} -html[data-theme="light"] .theme-switch-btn { - color: #5f5578; - border-left-color: rgba(184,171,217,0.5); -} -html[data-theme="light"] .theme-switch-btn:hover { background: rgba(255,255,255,0.22); } -html[data-theme="light"] .theme-switch-btn.active { - color: #2f2048; - background: - radial-gradient(150% 90% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.26) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffd9f3 0%, #e8c9ff 46%, #b9ddff 100%); -} -html[data-theme="light"] .masthead, -html[data-theme="light"] .panel { - border-color: #c9bfdf; - background: - linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.04) 30%, rgba(255,255,255,0) 31%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.18) 0 1px, rgba(199, 185, 231, 0.06) 1px 3px), - linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(241,236,249,0.84) 100%); - box-shadow: 0 8px 16px rgba(116, 102, 165, 0.07), inset 0 1px 0 rgba(255,255,255,0.80); -} -html[data-theme="light"] .card, -html[data-theme="light"] .timeline-card, -html[data-theme="light"] .table-wrap, -html[data-theme="light"] .selected-summary { - border-color: #d2c7e5; - background: - linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.06) 28%, rgba(255,255,255,0) 29%), - linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(239,246,255,0.84) 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.82); -} -html[data-theme="light"] .chip, -html[data-theme="light"] .pill, -html[data-theme="light"] .chip-link { - border-color: #d1c3e8; - color: #5b5074; - background: - linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fffaff 0%, #efeaf8 100%); -} -html[data-theme="light"] .btn { - border-color: #bcaedb; - color: #372e4c; - text-shadow: 0 1px 0 rgba(255,255,255,0.60); - background: - radial-gradient(150% 90% at 50% -8%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.26) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff9ff 0%, #efeaf7 100%); -} -html[data-theme="light"] .btn-primary { - border-color: #be90e1; - color: #33204c; - text-shadow: 0 1px 0 rgba(255,255,255,0.36); - background: - radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.36) 28%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffd9f5 0%, #e7c4ff 48%, #a7d8ff 100%); -} -html[data-theme="light"] .btn-danger, -html[data-theme="light"] .tool-btn-danger { - color: #7a3555; - border-color: #d3abc0; - background: - radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.34) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffdce9 0%, #f4c3d8 100%); -} -html[data-theme="light"] .segmented, -html[data-theme="light"] .status-filter-tabs { - border-color: #c1b4db; - background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0)), #e7e0f2; -} -html[data-theme="light"] .segment { - color: #4a4063; - text-shadow: 0 1px 0 rgba(255,255,255,0.50); -} -html[data-theme="light"] .segment.active, -html[data-theme="light"] .pager .current { - color: #33224d; - text-shadow: 0 1px 0 rgba(255,255,255,0.36); - border-color: #c391e5; -} -html[data-theme="light"] .filters input, -html[data-theme="light"] .filters select, -html[data-theme="light"] .forms-grid input, -html[data-theme="light"] .forms-grid select, -html[data-theme="light"] .modal-grid input, -html[data-theme="light"] .modal-grid select { - color: #2f2843; - background: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fffcff 0%, #efedf7 100%); - border-color: #bbaed7; -} -html[data-theme="light"] .filters input::placeholder, -html[data-theme="light"] .forms-grid input::placeholder { color: #a196bc; } -html[data-theme="light"] .ui-table { - background: rgba(255,255,255,0.58); - border-color: #cfc4e4; -} -html[data-theme="light"] .ui-table thead th { - color: #665a7f; - border-bottom-color: #d1c5e6; - background: - linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 34%, rgba(255,255,255,0) 35%), - linear-gradient(180deg, #f6f0fb 0%, #e9e3f4 100%); -} -html[data-theme="light"] .ui-table th, -html[data-theme="light"] .ui-table td { - color: #2f2843; - border-bottom-color: rgba(197,186,227,0.34); -} -html[data-theme="light"] .ui-table tbody tr:hover { - background: linear-gradient(90deg, rgba(255,246,253,0.80), rgba(236,247,255,0.80)); -} -html[data-theme="light"] .demo-modal { - border-color: #a895ca; - background: - linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03) 20%, rgba(255,255,255,0) 21%), - linear-gradient(180deg, rgba(247,242,252,0.94), rgba(236,241,252,0.92)); -} -html[data-theme="light"] .demo-modal-titlebar { - border-bottom-color: #b8acd5; - background: - linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0.04) 43%), - linear-gradient(180deg, #efe8f9 0%, #dde4f5 100%); -} -html[data-theme="light"] .demo-modal-title { color: #31284b; text-shadow: none; } -html[data-theme="light"] .lead, -html[data-theme="light"] .meta, -html[data-theme="light"] .panel .meta, -html[data-theme="light"] .filters label, -html[data-theme="light"] .text-link, -html[data-theme="light"] .card p, -html[data-theme="light"] .timeline-card p, -html[data-theme="light"] .selected-summary p, -html[data-theme="light"] .notice { - color: #675d82; -} - -@keyframes spin { - to { transform: rotate(360deg); } -} -@media (max-width: 700px) { - .aqua-lion-grid { grid-template-columns: 1fr; } - .aqua-lion-tabs { margin-top: -28px; } - .lion-slider-wide, - .lion-slider-scale, - .lion-progress-wide { grid-column: auto; margin-right: 0; } - .app-shell-inner { flex-direction: column; align-items: stretch; } - .app-shell-statuses { justify-content: flex-start; } - h1 { font-size: 28px; } - .panel-head { align-items: flex-start; flex-direction: column; } - .filters { grid-template-columns: 1fr; } - .forms-grid { grid-template-columns: 1fr; } - .filter-actions { justify-content: flex-start; } - .modal-grid { grid-template-columns: 1fr; } - .timeline-summary-grid { grid-template-columns: 1fr; } - .timeline-drill-grid { grid-template-columns: 1fr; } - .timeline-card-actions { align-items: flex-start; flex-direction: column; } -} - -/* Final dark-mode text lock: prevents late light/base selectors from leaking into auto dark mode. */ -@media (prefers-color-scheme: dark) { - .page h1, - .page h2, - .page h3, - .page .masthead h1, - .page .panel-head h2, - .page .panel-subsection .panel-head h2, - .page .label, - .page .app-shell-title, - .page .lead, - .page .meta, - .page .panel .meta, - .page .filters label, - .page .text-link, - .page .card p, - .page .timeline-card p, - .page .selected-summary p, - .page .notice, - .page .ui-table th, - .page .ui-table td, - .page .ui-table thead th { - color: var(--vw-text) !important; - text-shadow: none; - } - .page .lead, - .page .meta, - .page .panel .meta, - .page .filters label, - .page .text-link, - .page .card p, - .page .timeline-card p, - .page .selected-summary p, - .page .notice { - color: var(--vw-text-soft) !important; - } - .page .text-link:hover { - color: #f4efff !important; - } - #home-design-approach .card, - #home-anti-patterns .card, - #home-bundles .card, - #home-roadmap .card, - #home-workflow .timeline-card { - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 28%, rgba(255,255,255,0) 29%), - linear-gradient(180deg, var(--vw-card-top) 0%, var(--vw-card-bottom) 100%) !important; - border-color: #6d61aa !important; - } - #home-overview.masthead { - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 30%, rgba(255,255,255,0) 31%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(145, 116, 232, 0.03) 1px 3px), - linear-gradient(180deg, var(--vw-panel-top) 0%, var(--vw-panel-bottom) 100%) !important; - border-color: var(--vw-line) !important; - box-shadow: 0 10px 22px rgba(10,7,25,0.18), inset 0 1px 0 rgba(255,255,255,0.10) !important; - } - #home-overview .label { color: #ac9fd0 !important; } - #home-overview h1 { color: var(--vw-text) !important; text-shadow: none !important; } - #home-overview .lead { color: var(--vw-text-soft) !important; } - #home-overview .button-demo-row .chip-link { - border-color: #6d61aa !important; - color: #ded8f5 !important; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #463973 0%, #322d60 100%) !important; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important; - } - #home-design-approach .panel-head h2, - #home-workflow .panel-head h2, - #home-standardizes .panel-head h2, - #home-anti-patterns .panel-head h2, - #home-bundles .panel-head h2, - #home-roadmap .panel-head h2, - #home-design-approach .card h3, - #home-anti-patterns .card h3, - #home-bundles .card h3, - #home-roadmap .card h3, - #home-workflow .timeline-card-top h3 { - color: var(--vw-text) !important; - text-shadow: none !important; - } - #home-design-approach .card p, - #home-anti-patterns .card p, - #home-bundles .card p, - #home-roadmap .card p, - #home-workflow .timeline-card .meta { - color: var(--vw-text-soft) !important; - } - #home-standardizes .chip { - border-color: #6d61aa !important; - color: #ded8f5 !important; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #463973 0%, #322d60 100%) !important; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 0 rgba(0,0,0,0.08) !important; - } - #home-bundles .meta code, - #home-roadmap .meta code { - background: rgba(45, 39, 83, 0.92) !important; - color: #ddd7f2 !important; - border-color: #6d61aa !important; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important; - } -} - -html[data-theme="dark"] #home-overview.masthead { - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 30%, rgba(255,255,255,0) 31%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(145, 116, 232, 0.03) 1px 3px), - linear-gradient(180deg, var(--vw-panel-top) 0%, var(--vw-panel-bottom) 100%) !important; - border-color: var(--vw-line) !important; - box-shadow: 0 10px 22px rgba(10,7,25,0.18), inset 0 1px 0 rgba(255,255,255,0.10) !important; -} -html[data-theme="dark"] #home-overview .label { color: #ac9fd0 !important; } -html[data-theme="dark"] #home-overview h1 { color: var(--vw-text) !important; text-shadow: none !important; } -html[data-theme="dark"] #home-overview .lead { color: var(--vw-text-soft) !important; } -html[data-theme="dark"] #home-overview .button-demo-row .chip-link, -html[data-theme="dark"] #home-standardizes .chip { - border-color: #6d61aa !important; - color: #ded8f5 !important; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #463973 0%, #322d60 100%) !important; -} -html[data-theme="dark"] #home-design-approach .card, -html[data-theme="dark"] #home-anti-patterns .card, -html[data-theme="dark"] #home-bundles .card, -html[data-theme="dark"] #home-roadmap .card, -html[data-theme="dark"] #home-workflow .timeline-card { - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 28%, rgba(255,255,255,0) 29%), - linear-gradient(180deg, var(--vw-card-top) 0%, var(--vw-card-bottom) 100%) !important; - border-color: #6d61aa !important; -} diff --git a/demo/web/static/js/app.js b/demo/web/static/js/app.js deleted file mode 100644 index 2a3e352..0000000 --- a/demo/web/static/js/app.js +++ /dev/null @@ -1,66 +0,0 @@ -(() => { - const root = document.documentElement; - const storageKey = "vapor_shell"; - const queryKey = "vapor_shell"; - const fallbackPreset = "miami-sunset"; - const allowed = new Set([ - "miami-sunset", - "neon-grid", - "laser-flamingo", - "synth-lagoon", - "mall-soft", - "hologram-sky", - "peach-drive", - "ultraviolet-plaza", - "cyber-mint", - ]); - - const normalizePreset = (value) => { - const trimmed = (value || "").trim().toLowerCase(); - if (!trimmed || !allowed.has(trimmed)) { - return ""; - } - return trimmed; - }; - - const setPreset = (value) => { - const preset = normalizePreset(value); - if (!preset) { - return false; - } - root.setAttribute("data-vapor-shell", preset); - return true; - }; - - root.classList.add("js"); - root.setAttribute("data-theme-mode", "auto"); - - const url = new URL(window.location.href); - const fromQuery = normalizePreset(url.searchParams.get(queryKey)); - if (fromQuery) { - setPreset(fromQuery); - try { - window.localStorage.setItem(storageKey, fromQuery); - } catch (_err) { - // Keep behavior deterministic even when storage is blocked. - } - return; - } - - const fromMarkup = normalizePreset(root.getAttribute("data-vapor-shell")); - if (fromMarkup) { - return; - } - - try { - const fromStorage = normalizePreset(window.localStorage.getItem(storageKey)); - if (fromStorage) { - setPreset(fromStorage); - return; - } - } catch (_err) { - // Fallback handled below. - } - - setPreset(fallbackPreset); -})(); diff --git a/demo/web/templates/base.html b/demo/web/templates/base.html deleted file mode 100644 index 0166d5b..0000000 --- a/demo/web/templates/base.html +++ /dev/null @@ -1,413 +0,0 @@ -{{ define "demo_doc_start" }} - - - - - - {{ .Title }} - - - - - {{ template "demo_nav" . }} - {{ template "demo_app_shell" . }} -
-{{ end }} - -{{ define "demo_doc_end" }} -
- - - -{{ end }} - -{{ define "demo_masthead" }} -
-

{{ index . "label" }}

-

{{ index . "title" }}

-

{{ index . "lead" }}

- {{ if index . "back_url" }} -

{{ index . "back_text" }}

- {{ end }} - {{ if index . "links_html" }} - {{ index . "links_html" }} - {{ end }} -
-{{ end }} - -{{ define "demo_app_shell" }} -
-
-
-

Demo Application Shell

-

Universal Operations Console

-

Reference shell for server-rendered Go web apps using shared design-code contracts.

-
-
- ENV: demo - DB: connected - operator@demo · admin -
-
-
-{{ end }} - -{{ define "base.html" }} -{{ template "demo_doc_start" . }} -
-

Submodule-First Design Kit

-

{{ .Title }}

-

A universal design-code workspace for Go web applications: reusable rules, demo-first UI patterns, and canonical development contracts for AI-assisted implementation.

-
- {{ range .Patterns }} - {{ if .Link }} - {{ .Name }} - {{ end }} - {{ end }} -
-
- -
-

Design Approach

-
-
-

Contract First

-

UI behavior is defined as explicit contracts (filters, pagination, modal steps, timeline grouping) before implementation details. Demo pages act as executable specs.

-
-
-

Server-Rendered by Default

-

Patterns target Go server-rendered apps first (net/http or Gin with templates). Interactivity is additive and must preserve deterministic URL/query contracts.

-
-
-

Reusable, Not Branded

-

Shared patterns standardize behavior and structure while leaving visual branding, domain terminology, and business logic to each host project.

-
-
-
- -
-

Development Workflow Standard

-
-
-

1. Describe the contract

-

Update Bible + pattern contract first: routes, query params, states, edge cases, and UI semantics.

-
-
-

2. Implement in demo

-

Build the pattern in the demo app as a live reference page with realistic state transitions and test coverage.

-
-
-

3. Publish as bundle

-

Encode reusable docs and templates in the design kit and expose them as bundles for host repositories.

-
-
-

4. Apply in host repos

-

Use the sync workflow to plan and apply changes, then adapt domain-specific rules without breaking canonical UI contracts.

-
-
-
- -
-

What the Demo Standardizes

-
- URL-driven filters - Server-side pagination - Bulk selection semantics - Modal state machines - Import preview / confirm - CSV export behavior - Operator tooling dashboards - Timeline card grouping - Drilldown UX -
-
- -
-

Anti-Patterns (Do Not Implement)

-
-
-

Page-local filters on paginated tables

-

Do not filter only the currently rendered page slice. Filters must apply to the full dataset/query scope before pagination.

-
-
-

Nested modals

-

Do not open one modal from another modal. Use a single modal state machine with explicit stages (edit, confirm, done).

-
-
-

Implicit export scope

-

Do not export without clear scope selection when ambiguity exists (selected, filtered, all). Make the scope explicit in UI and request.

-
-
-

Undocumented UI contracts

-

Do not implement new interaction behavior without updating the design code (Bible, pattern contract, and demo reference page).

-
-
-
- -
-
-

Bundles

- healthz -
-
- {{ range .Bundles }} -
-
-

{{ .Name }}

- {{ .Status }} -
-

{{ .Summary }}

-

{{ .Bundle }}

- {{ if .Link }} -

Open demo

- {{ end }} -
- {{ end }} -
-
- -
-
-

Pattern Roadmap

-
-
- {{ range .Patterns }} -
-
-

{{ .Name }}

- {{ .Status }} -
-

{{ .Summary }}

-

{{ .Bundle }}

-
- {{ end }} -
-
-{{ template "demo_doc_end" . }} -{{ end }} - -{{ define "demo_nav" }} - -{{ end }} - -{{ define "table_pattern.html" }} -{{ template "demo_doc_start" . }} - {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Server-side filtering and pagination. Filters apply to the full dataset before pagination." "back_url" "/" "back_text" "← Back to catalog") }} - -
-
-
-

Filters

-
- Reset - -
-
-
- - - - -
-
- -
-
-

Canonical List Page

-
- {{ if gt .Pager.TotalItems 0 }} - Showing {{ .Pager.From }}–{{ .Pager.To }} of {{ .Pager.TotalItems }} - {{ else }} - Showing 0 of 0 - {{ end }} -
-
- -
- - - - - - - - - - - - - {{ if .Rows }} - {{ range .Rows }} - - - - - - - - - {{ end }} - {{ else }} - - - - {{ end }} - -
IDNameCategoryStatusOwnerUpdated
{{ .ID }}{{ .Name }}{{ .Category }}{{ .Status }}{{ .Owner }}{{ .Updated }}
No rows match current filters.
-
- - {{ if gt .Pager.TotalPages 1 }} - - {{ end }} -
-
-{{ template "demo_doc_end" . }} -{{ end }} diff --git a/demo/web/templates/controls_pattern.html b/demo/web/templates/controls_pattern.html deleted file mode 100644 index b795e0b..0000000 --- a/demo/web/templates/controls_pattern.html +++ /dev/null @@ -1,135 +0,0 @@ -{{ define "controls_pattern.html" }} -{{ template "demo_doc_start" . }} - {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Canonical actions, segmented filters, row selection and bulk-action control bar." "back_url" "/" "back_text" "← Back to catalog") }} - -
-

Buttons

-
- - - - - - {{ if .SimulateLoading }} - Loading… - {{ else }} - Simulate loading - {{ end }} -
-
- Export - Import - Open modal -
-
- -
-
-
-

Segmented Status Filter

-
{{ .Pager.TotalItems }} filtered · page {{ .Pager.Page }}/{{ .Pager.TotalPages }} · {{ .SelectedCount }} selected
-
- -
- -
-
-

Selection Table

-
Checkbox rows + bulk action preview + global selection across pages
-
- - {{ if .ActionMessage }}
{{ .ActionMessage }}
{{ end }} -

- Visible on this page: {{ .VisibleCount }} · Selected on this page: {{ .SelectedVisible }}{{ if gt .SelectedHidden 0 }} · Selected on other page(s): {{ .SelectedHidden }}{{ end }} -

- - - -
- - - - - - - - - - - - {{ range .Rows }} - - - - - - - - {{ end }} - -
NameCategoryStatus
{{ if .Selected }}☑{{ else }}☐{{ end }}{{ .Name }}{{ .Type }}{{ .Status }} - - -
-
- - {{ if gt .Pager.TotalPages 1 }} - - {{ end }} -
-
-{{ template "demo_doc_end" . }} -{{ end }} diff --git a/demo/web/templates/forms_pattern.html b/demo/web/templates/forms_pattern.html deleted file mode 100644 index 42bc815..0000000 --- a/demo/web/templates/forms_pattern.html +++ /dev/null @@ -1,95 +0,0 @@ -{{ define "forms_pattern.html" }} -{{ template "demo_doc_start" . }} - {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Tabbed/step-based forms with datalist suggestions, inline validation, and explicit review/confirm workflow." "back_url" "/" "back_text" "← Back to catalog") }} - -
-

Mode Switch (Tabs)

-
- Manual register - Import-assisted -
-

Tabs preserve entered values while changing workflow mode.

-
- -
-

Step Flow

-
- Edit - Review - Done -
- {{ if .Message }}
{{ .Message }}
{{ end }} -
- -
-

Form Contract Demo

-
- - - - - - - - - - - - - - - - - - -
- - Stay in edit - Reset -
-
-
- - {{ if or (eq .Step "review") (eq .Step "confirm") }} -
-

{{ if eq .Step "confirm" }}Result Summary{{ else }}Review Summary{{ end }}

-
- - - - - - - - - -
Mode{{ .Mode }}
Server serial{{ if .ServerSerial }}{{ .ServerSerial }}{{ else }}—{{ end }}
Location{{ if .Location }}{{ .Location }}{{ else }}—{{ end }}
Component serial{{ if .ComponentSerial }}{{ .ComponentSerial }}{{ else }}—{{ end }}
Date{{ .EventDate }}
Details{{ if .Details }}{{ .Details }}{{ else }}No note{{ end }}
-
-
- {{ if eq .Step "review" }} - Back to edit - Confirm - {{ else }} - Start new - {{ end }} -
-
- {{ end }} -{{ template "demo_doc_end" . }} -{{ end }} diff --git a/demo/web/templates/io_pattern.html b/demo/web/templates/io_pattern.html deleted file mode 100644 index 940832a..0000000 --- a/demo/web/templates/io_pattern.html +++ /dev/null @@ -1,99 +0,0 @@ -{{ define "io_pattern.html" }} -{{ template "demo_doc_start" . }} - {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Canonical file transfer UX: import preview/confirm and export with explicit scope/format selection." "back_url" "/" "back_text" "← Back to catalog") }} - -
-

Import Workflow

-
{{ .ImportMessage }}
-
- - - - -
- -
-
- -
- - - - - - - - - - - - {{ range .PreviewRows }} - - - - - - - - {{ end }} - -
RowCodeNameQtyValidation
{{ .RowNo }}{{ .ItemCode }}{{ .Name }}{{ .Qty }}{{ .Status }}
-
-
- {{ if eq .ImportMode "preview" }} - Review Import - {{ else }} - Back to preview - Confirm & Import (demo) - {{ end }} -
-
- -
-

Export Workflow

-
{{ .ExportMessage }}
-
- - - - -
- -
-
-
- Download CSV - Reset -
-

Demo export endpoint includes UTF-8 BOM and semicolon delimiter to illustrate spreadsheet compatibility patterns.

-
-{{ template "demo_doc_end" . }} -{{ end }} diff --git a/demo/web/templates/modal_pattern.html b/demo/web/templates/modal_pattern.html deleted file mode 100644 index fbc6f4a..0000000 --- a/demo/web/templates/modal_pattern.html +++ /dev/null @@ -1,74 +0,0 @@ -{{ define "modal_pattern.html" }} -{{ template "demo_doc_start" . }} - {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Single-modal workflow progression: edit → confirm → complete, with explicit cancel/close paths." "back_url" "/" "back_text" "← Back to catalog") }} - - - - - - {{ if .Open }} -
-
-
- -
{{ if eq .Open "delete" }}Confirm Destructive Action{{ else }}Edit Items{{ end }}
-
-
-

{{ .Message }}

- - {{ if eq .Stage "edit" }} -
- - - - -
-
- Cancel - Review Changes -
- {{ else if eq .Stage "confirm" }} -
-

Confirmation Summary

-
    -
  • Selected rows are listed and reviewed before submit.
    • -
  • Destructive actions require explicit confirmation wording.
    • -
  • No nested modals; stay within one modal state machine.
    • -
-
-
- Back - Confirm -
- {{ else }} -
Action completed. Show human-readable summary and next actions.
-
- Done -
- {{ end }} -
-
-
- {{ end }} -{{ template "demo_doc_end" . }} -{{ end }} diff --git a/demo/web/templates/operator_tools_pattern.html b/demo/web/templates/operator_tools_pattern.html deleted file mode 100644 index cc99f43..0000000 --- a/demo/web/templates/operator_tools_pattern.html +++ /dev/null @@ -1,135 +0,0 @@ -{{ define "operator_tools_pattern.html" }} -{{ template "demo_doc_start" . }} - {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Universal operator/admin dashboard pattern: tool queue, batch actions, safety checks, import/export shortcuts, and explicit confirmation paths." "back_url" "/" "back_text" "← Back to catalog") }} - -
-
-
-

Tool Scope Tabs

-
{{ .VisibleCount }} visible jobs · {{ .SelectedCount }} selected
-
- -
- -
-
-

Operations Queue

-
Complex dashboards may include multiple tables; standardize row actions and statuses first.
-
- {{ if .ActionMessage }}
{{ .ActionMessage }}
{{ end }} -

- Selected on this view: {{ .SelectedVisible }}{{ if gt .SelectionOutside 0 }} · Selected outside current filter: {{ .SelectionOutside }}{{ end }} -

-
Batch controls must keep scope/filter context explicit.
- -
- - - - - - - - - - - - - - - - {{ range .Rows }} - - - - - - - - - - - - {{ else }} - - {{ end }} - -
Job IDToolScopeModeStatusOwnerStarted
{{ if .Selected }}☑{{ else }}☐{{ end }}{{ .ID }}{{ .Tool }}{{ .Scope }}{{ .Mode }}{{ .Status }}{{ .Owner }}{{ .StartedAt }} - - - - -
No queued items for this scope/filter combination.
-
-
-
- -
-

Safety Checklist

-
    - {{ range .SafetyChecklist }} -
  • {{ . }}
    • - {{ end }} -
-

Recent Operator Notes

-
    - {{ range .RecentActivityNotes }} -
  • {{ . }}
    • - {{ end }} -
-
-{{ template "demo_doc_end" . }} -{{ end }} diff --git a/demo/web/templates/style_playground_pattern.html b/demo/web/templates/style_playground_pattern.html deleted file mode 100644 index 4a7b2be..0000000 --- a/demo/web/templates/style_playground_pattern.html +++ /dev/null @@ -1,177 +0,0 @@ -{{ define "style_playground_pattern.html" }} -{{ template "demo_doc_start" . }} - {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Experiment with visual directions on identical UI modules. Behavior contracts stay the same; only presentation changes." "back_url" "/" "back_text" "← Back to catalog") }} - -
-
-
-

Theme Presets

-
Current: {{ .StyleLabel }}
-
-
- Linen - Slate - Signal - Y2K Silver - Vapor Soft - Vapor Night - Aqua - Win9x -
-

Use this page to compare visual directions on identical UI modules. Behavior contracts stay the same; only presentation changes.

-
- -
-
-

Component Preview

-
- {{ if .LoadingDemo }} - Stop loading demo - {{ else }} - Simulate loading state - {{ end }} -
-
- -
-
-

Buttons

-
- - - - - {{ if .LoadingDemo }} - Loading… - {{ else }} - - {{ end }} -
-
- -
-

Status + Chips

-
- URL-driven state - Server-rendered - Anchor restore -
-
- ready - warning - review - failed -
-
-
-
- -
-
-

Segmented Status Filter

-
12 filtered • page 1/3 • 0 selected
-
-
-
- - - - -
-
-
- -
-
-

Compact Filter Module

-
- - -
-
-
- - - - - -
-
- -
-
-

Surface + Table Readability

-
Same content under a different visual direction
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
IDNameCategoryStatusOwner
12Rack Controller AlphaComputereadyOps
13Patch Panel GroupNetworkingwarningInfra
14Mapping Repair QueueStoragereviewQA
-
-
- 1 - 2 - - 7 - 8 -
-
-
-{{ template "demo_doc_end" . }} -{{ end }} diff --git a/demo/web/templates/timeline_pattern.html b/demo/web/templates/timeline_pattern.html deleted file mode 100644 index 8029e2c..0000000 --- a/demo/web/templates/timeline_pattern.html +++ /dev/null @@ -1,118 +0,0 @@ -{{ define "timeline_pattern.html" }} -{{ template "demo_doc_start" . }} - {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Grouped timeline cards by day with source/action filters and single drilldown modal." "back_url" "/" "back_text" "← Back to catalog") }} - -
-
-

Timeline Filters

-
- All actions - Installation - Removal - Edit -
-
- All sources - Manual - Ingest - System -
-
- -
-

Grouped Cards

- {{ if .Cards }} -
- {{ range .Cards }} -
-
-
-

{{ .Day }}

-

{{ .Title }}

-
-
- {{ .Action }} - {{ .Source }} -
-
-
-
-
Models / Types
-
{{ range .SummaryLeft }}{{ . }}{{ end }}
-
-
-
Slots / Scope
-
{{ range .SummaryRight }}{{ . }}{{ end }}
-
-
-
- {{ .Count }} event(s) - Open details -
-
- {{ end }} -
- {{ else }} -
No timeline cards match current filters.
- {{ end }} -
-
- - {{ if .OpenCard }} -
-
-
- -
{{ .OpenCard.Title }}
-
-
-

{{ .OpenCard.Day }} · {{ .OpenCard.Source }} · {{ .OpenCard.Action }}

-
- - - - -
-
- - Reset -
-
- -
-
- {{ if .OpenCard.Items }} - {{ range .OpenCard.Items }} - -
{{ .Action }} · {{ .At }}
-
{{ .Entity }} · {{ .Target }}
-
{{ .Slot }} · {{ .Device }} · {{ .Source }}
- - {{ end }} - {{ else }} -
No events match the card filter.
- {{ end }} -
-
- {{ if .ActiveEvent }} -

Event Detail

-
When: {{ .ActiveEvent.At }}
-
Action: {{ .ActiveEvent.Action }}
-
Source: {{ .ActiveEvent.Source }}
-
Entity: {{ .ActiveEvent.Entity }}
-
Target: {{ .ActiveEvent.Target }}
-
Slot / Device: {{ .ActiveEvent.Slot }} · {{ .ActiveEvent.Device }}
-
{{ .ActiveEvent.Detail }}
- {{ else }} -
Select an event to view details.
- {{ end }} -
-
-
-
-
- {{ end }} -{{ template "demo_doc_end" . }} -{{ end }} diff --git a/exports/bundles/ai-rules.yaml b/exports/bundles/ai-rules.yaml deleted file mode 100644 index d9182f5..0000000 --- a/exports/bundles/ai-rules.yaml +++ /dev/null @@ -1,14 +0,0 @@ -{ - "id": "ai-rules", - "version": 1, - "description": "Canonical AI instruction templates and shared architecture doc policy notes.", - "conflict_policy": "merge-manual", - "variables": [ - { "name": "project_name", "required": false, "default": "Project" } - ], - "entries": [ - { "from": "ai/claude/CLAUDE.template.md", "to": "CLAUDE.md", "template": true, "mode": "file" }, - { "from": "ai/codex/AGENTS.template.md", "to": "AGENTS.md", "template": true, "mode": "file" }, - { "from": "ai/shared/ARCH_DOC_POLICY.md", "to": "docs/ARCH_DOC_POLICY.md", "template": false, "mode": "file" } - ] -} diff --git a/exports/bundles/bible-core.yaml b/exports/bundles/bible-core.yaml deleted file mode 100644 index 82a485f..0000000 --- a/exports/bundles/bible-core.yaml +++ /dev/null @@ -1,9 +0,0 @@ -{ - "id": "bible-core", - "version": 1, - "description": "Canonical Bible skeleton for Go web projects using AI coding agents.", - "conflict_policy": "merge-manual", - "entries": [ - { "from": "docs/bible-skeleton", "to": "bible", "mode": "dir" } - ] -} diff --git a/exports/bundles/go-web-skeleton.yaml b/exports/bundles/go-web-skeleton.yaml deleted file mode 100644 index 6dd4d66..0000000 --- a/exports/bundles/go-web-skeleton.yaml +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "go-web-skeleton", - "version": 1, - "description": "Minimal net/http + html/template web skeleton for Go projects.", - "conflict_policy": "merge-manual", - "variables": [ - { "name": "module_path", "required": true }, - { "name": "binary_name", "required": false, "default": "app" }, - { "name": "project_name", "required": false, "default": "Demo" } - ], - "entries": [ - { "from": "scaffolds/go-nethttp-web/cmd/demo-server/main.go.tmpl", "to": "cmd/{{ .binary_name }}/main.go", "template": true, "mode": "file" }, - { "from": "scaffolds/go-nethttp-web/internal/web", "to": "internal/web", "mode": "dir" }, - { "from": "scaffolds/go-nethttp-web/web", "to": "web", "mode": "dir" }, - { "from": "scaffolds/go-nethttp-web/Makefile", "to": "Makefile", "mode": "file" }, - { "from": "scaffolds/go-nethttp-web/README.md", "to": "docs/ui-design-skeleton.md", "mode": "file" } - ] -} diff --git a/exports/bundles/ui-pattern-controls.yaml b/exports/bundles/ui-pattern-controls.yaml deleted file mode 100644 index 26e176e..0000000 --- a/exports/bundles/ui-pattern-controls.yaml +++ /dev/null @@ -1,10 +0,0 @@ -{ - "id": "ui-pattern-controls", - "version": 1, - "description": "Buttons, checkboxes, segmented filters, and bulk-selection control patterns.", - "conflict_policy": "merge-manual", - "entries": [ - { "from": "patterns/controls-selection", "to": "docs/ui-patterns/controls-selection", "mode": "dir" }, - { "from": "patterns/table-management", "to": "docs/ui-patterns/table-management", "mode": "dir" } - ] -} diff --git a/exports/bundles/ui-pattern-forms.yaml b/exports/bundles/ui-pattern-forms.yaml deleted file mode 100644 index ba7b5b4..0000000 --- a/exports/bundles/ui-pattern-forms.yaml +++ /dev/null @@ -1,10 +0,0 @@ -{ - "id": "ui-pattern-forms", - "version": 1, - "description": "Form validation, datalist suggestions, and review/confirm workflow patterns.", - "conflict_policy": "merge-manual", - "entries": [ - { "from": "patterns/forms-validation", "to": "docs/ui-patterns/forms-validation", "mode": "dir" } - ] -} - diff --git a/exports/bundles/ui-pattern-io.yaml b/exports/bundles/ui-pattern-io.yaml deleted file mode 100644 index b5f4c77..0000000 --- a/exports/bundles/ui-pattern-io.yaml +++ /dev/null @@ -1,10 +0,0 @@ -{ - "id": "ui-pattern-io", - "version": 1, - "description": "Import/export workflow patterns for file upload preview and downloads.", - "conflict_policy": "merge-manual", - "entries": [ - { "from": "patterns/import-export", "to": "docs/ui-patterns/import-export", "mode": "dir" } - ] -} - diff --git a/exports/bundles/ui-pattern-modal.yaml b/exports/bundles/ui-pattern-modal.yaml deleted file mode 100644 index 56e9a67..0000000 --- a/exports/bundles/ui-pattern-modal.yaml +++ /dev/null @@ -1,9 +0,0 @@ -{ - "id": "ui-pattern-modal", - "version": 1, - "description": "Modal workflow pattern docs and starter templates.", - "conflict_policy": "merge-manual", - "entries": [ - { "from": "patterns/modal-workflows", "to": "docs/ui-patterns/modal-workflows", "mode": "dir" } - ] -} diff --git a/exports/bundles/ui-pattern-operator-tools.yaml b/exports/bundles/ui-pattern-operator-tools.yaml deleted file mode 100644 index 6cdbfd3..0000000 --- a/exports/bundles/ui-pattern-operator-tools.yaml +++ /dev/null @@ -1,10 +0,0 @@ -{ - "id": "ui-pattern-operator-tools", - "version": 1, - "description": "Universal operator/admin dashboard pattern: queue tables, batch actions, and safety guardrails.", - "conflict_policy": "merge-manual", - "entries": [ - { "from": "patterns/operator-tools", "to": "docs/ui-patterns/operator-tools", "mode": "dir" }, - { "from": "patterns/table-management", "to": "docs/ui-patterns/table-management", "mode": "dir" } - ] -} diff --git a/exports/bundles/ui-pattern-table.yaml b/exports/bundles/ui-pattern-table.yaml deleted file mode 100644 index f4eab10..0000000 --- a/exports/bundles/ui-pattern-table.yaml +++ /dev/null @@ -1,9 +0,0 @@ -{ - "id": "ui-pattern-table", - "version": 1, - "description": "Table + server-side filter + pagination pattern docs and starter templates.", - "conflict_policy": "merge-manual", - "entries": [ - { "from": "patterns/table-pagination", "to": "docs/ui-patterns/table-pagination", "mode": "dir" } - ] -} diff --git a/exports/bundles/ui-pattern-timeline.yaml b/exports/bundles/ui-pattern-timeline.yaml deleted file mode 100644 index fbbcdce..0000000 --- a/exports/bundles/ui-pattern-timeline.yaml +++ /dev/null @@ -1,10 +0,0 @@ -{ - "id": "ui-pattern-timeline", - "version": 1, - "description": "Timeline cards with grouped summaries and drilldown modal patterns.", - "conflict_policy": "merge-manual", - "entries": [ - { "from": "patterns/timeline-cards", "to": "docs/ui-patterns/timeline-cards", "mode": "dir" } - ] -} - diff --git a/exports/bundles/ui-theme-aqua-legacy.yaml b/exports/bundles/ui-theme-aqua-legacy.yaml deleted file mode 100644 index 9db3574..0000000 --- a/exports/bundles/ui-theme-aqua-legacy.yaml +++ /dev/null @@ -1,9 +0,0 @@ -{ - "id": "ui-theme-aqua-legacy", - "version": 1, - "description": "Legacy Aqua theme snapshot bundle for reference/migration, including icon sprite and component chrome archive.", - "conflict_policy": "merge-manual", - "entries": [ - { "from": "patterns/theme-aqua-legacy", "to": "docs/ui-themes/aqua-legacy", "mode": "dir" } - ] -} diff --git a/exports/bundles/ui-theme-vapor.yaml b/exports/bundles/ui-theme-vapor.yaml deleted file mode 100644 index ad31fb9..0000000 --- a/exports/bundles/ui-theme-vapor.yaml +++ /dev/null @@ -1,9 +0,0 @@ -{ - "id": "ui-theme-vapor", - "version": 1, - "description": "Active Vapor theme layer for shared UI primitives, including icon sprite and reusable component chrome.", - "conflict_policy": "merge-manual", - "entries": [ - { "from": "patterns/theme-vapor", "to": "docs/ui-themes/vapor", "mode": "dir" } - ] -} diff --git a/exports/index.yaml b/exports/index.yaml deleted file mode 100644 index 1d304b9..0000000 --- a/exports/index.yaml +++ /dev/null @@ -1,16 +0,0 @@ -{ - "bundles": [ - { "id": "ai-rules", "manifest": "exports/bundles/ai-rules.yaml" }, - { "id": "bible-core", "manifest": "exports/bundles/bible-core.yaml" }, - { "id": "go-web-skeleton", "manifest": "exports/bundles/go-web-skeleton.yaml" }, - { "id": "ui-pattern-controls", "manifest": "exports/bundles/ui-pattern-controls.yaml" }, - { "id": "ui-pattern-forms", "manifest": "exports/bundles/ui-pattern-forms.yaml" }, - { "id": "ui-pattern-io", "manifest": "exports/bundles/ui-pattern-io.yaml" }, - { "id": "ui-pattern-operator-tools", "manifest": "exports/bundles/ui-pattern-operator-tools.yaml" }, - { "id": "ui-pattern-table", "manifest": "exports/bundles/ui-pattern-table.yaml" }, - { "id": "ui-pattern-modal", "manifest": "exports/bundles/ui-pattern-modal.yaml" }, - { "id": "ui-pattern-timeline", "manifest": "exports/bundles/ui-pattern-timeline.yaml" }, - { "id": "ui-theme-vapor", "manifest": "exports/bundles/ui-theme-vapor.yaml" }, - { "id": "ui-theme-aqua-legacy", "manifest": "exports/bundles/ui-theme-aqua-legacy.yaml" } - ] -} diff --git a/exports/schema/bundle-manifest.schema.yaml b/exports/schema/bundle-manifest.schema.yaml deleted file mode 100644 index b84e004..0000000 --- a/exports/schema/bundle-manifest.schema.yaml +++ /dev/null @@ -1,39 +0,0 @@ -$schema: "informational" -title: UI Design Code Bundle Manifest (informal schema) -type: object -required: - - id - - version - - description - - entries -properties: - id: - type: string - version: - type: integer - description: - type: string - conflict_policy: - type: string - enum: [overwrite, skip, merge-manual] - variables: - type: array - items: - type: object - required: [name] - properties: - name: { type: string } - required: { type: boolean } - default: {} - entries: - type: array - items: - type: object - required: [from, to] - properties: - from: { type: string, description: "path under kit/" } - to: { type: string, description: "path under host repo root" } - template: { type: boolean } - mode: { type: string, enum: [file, dir] } - conflict_policy: { type: string, enum: [overwrite, skip, merge-manual] } - diff --git a/go.mod b/go.mod deleted file mode 100644 index 0a0105b..0000000 --- a/go.mod +++ /dev/null @@ -1,3 +0,0 @@ -module git.mchus.pro/mchus/ui-design-code - -go 1.24.0 diff --git a/kit/ai/codex/AGENTS.template.md b/kit/ai/codex/AGENTS.template.md deleted file mode 100644 index 1b9e8f6..0000000 --- a/kit/ai/codex/AGENTS.template.md +++ /dev/null @@ -1,10 +0,0 @@ -# {{ .project_name }} — Agent Instructions - -Read and follow `bible/README.md` as the architecture source of truth. - -## Rules - -- Keep architecture documentation in English. -- Update Bible docs in the same change set as architecture/code contract changes. -- Keep README and agent docs minimal; avoid duplicating Bible architecture content. - diff --git a/kit/ai/shared/ARCH_DOC_POLICY.md b/kit/ai/shared/ARCH_DOC_POLICY.md deleted file mode 100644 index ccf035c..0000000 --- a/kit/ai/shared/ARCH_DOC_POLICY.md +++ /dev/null @@ -1,11 +0,0 @@ -# Architecture Documentation Policy - -This project uses a Bible-style architecture documentation folder as the single source of truth. - -## Mandatory Rules - -- Record architecture decisions before or together with implementation. -- Use English for architecture documentation. -- Remove or update obsolete architectural guidance in the same change. -- Keep non-Bible docs concise and reference the Bible instead of duplicating it. - diff --git a/kit/docs/bible-skeleton/README.md b/kit/docs/bible-skeleton/README.md deleted file mode 100644 index 9a24dbb..0000000 --- a/kit/docs/bible-skeleton/README.md +++ /dev/null @@ -1,20 +0,0 @@ -# Project Bible - -The Bible is the single source of truth for this project's architecture. - -## Documentation Rules - -- All architecture decisions must be recorded in this Bible. -- The documentation language is English only. -- If a decision is superseded, update the Bible immediately and remove or mark obsolete content. -- Do not duplicate architecture documentation in `README.md`, `CLAUDE.md`, or other files. - -## Structure - -- `governance/documentation-policy.md` - mandatory rules for maintaining architecture docs. -- `architecture/system-overview.md` - current scope, boundaries, and high-level system composition. -- `architecture/api-surface.md` - HTTP API and UI route contracts. -- `architecture/runtime-flows.md` - critical runtime behavior and failure invariants. -- `architecture/ui-information-architecture.md` - required UI structure and semantics. -- `decisions/README.md` - how to capture new and updated architecture decisions. - diff --git a/kit/docs/bible-skeleton/architecture/api-surface.md b/kit/docs/bible-skeleton/architecture/api-surface.md deleted file mode 100644 index 8a999b1..0000000 --- a/kit/docs/bible-skeleton/architecture/api-surface.md +++ /dev/null @@ -1,10 +0,0 @@ -# API Surface - -Document all HTTP endpoints and UI routes that are part of the active contract. - -## Rules - -- Keep request/response shapes explicit. -- Record compatibility aliases and deprecations. -- Update this file when route behavior changes. - diff --git a/kit/docs/bible-skeleton/architecture/runtime-flows.md b/kit/docs/bible-skeleton/architecture/runtime-flows.md deleted file mode 100644 index 03711e6..0000000 --- a/kit/docs/bible-skeleton/architecture/runtime-flows.md +++ /dev/null @@ -1,11 +0,0 @@ -# Runtime Flows - -Document the critical runtime flows and failure invariants. - -Recommended sections: - -- Startup flow -- Request handling flow -- Background tasks -- Failure / retry / cancellation behavior - diff --git a/kit/docs/bible-skeleton/architecture/system-overview.md b/kit/docs/bible-skeleton/architecture/system-overview.md deleted file mode 100644 index ff0108c..0000000 --- a/kit/docs/bible-skeleton/architecture/system-overview.md +++ /dev/null @@ -1,32 +0,0 @@ -# System Overview - -## Product - -Describe the product in one paragraph. - -## Active Scope - -- List current in-scope modules/features -- List user-visible surfaces -- List operational responsibilities - -## Explicitly Removed / Out of Scope - -- List legacy or excluded modules to avoid accidental restoration - -## Runtime Composition - -- HTTP server package(s) -- Domain/service orchestration -- Persistence layer(s) -- Migrations / background workers (if any) - -## Local Execution - -- `make run` -- `go run ./cmd/` - -## Verification - -- `go test ./...` - diff --git a/kit/docs/bible-skeleton/architecture/ui-information-architecture.md b/kit/docs/bible-skeleton/architecture/ui-information-architecture.md deleted file mode 100644 index b7c5ef3..0000000 --- a/kit/docs/bible-skeleton/architecture/ui-information-architecture.md +++ /dev/null @@ -1,7 +0,0 @@ -# UI Information Architecture - -Document page structure, required section order, UI interaction contracts, and list/filter/ -pagination behavior. - -Use explicit route names and action contracts so AI agents can implement changes consistently. - diff --git a/kit/docs/bible-skeleton/decisions/README.md b/kit/docs/bible-skeleton/decisions/README.md deleted file mode 100644 index e818e61..0000000 --- a/kit/docs/bible-skeleton/decisions/README.md +++ /dev/null @@ -1,18 +0,0 @@ -# Architecture Decision Records - -Use this directory to capture architecture decisions and significant updates. - -## Required - -- Every architecture decision must be recorded in the Bible. -- If a decision replaces an older one, update the older document in the same change. -- Keep entries short, explicit, and linked to the affected architecture files. - -## Minimal Entry Template - -- Date (`YYYY-MM-DD`) -- Decision -- Context -- Consequences -- Supersedes (if any) - diff --git a/kit/docs/bible-skeleton/governance/documentation-policy.md b/kit/docs/bible-skeleton/governance/documentation-policy.md deleted file mode 100644 index 56427ea..0000000 --- a/kit/docs/bible-skeleton/governance/documentation-policy.md +++ /dev/null @@ -1,21 +0,0 @@ -# Documentation Policy - -## Purpose - -This policy defines how architectural knowledge is captured and maintained. - -## Mandatory Rules - -- Record every architecture decision in the Bible before or together with implementation. -- Use English for all architecture documentation. -- Keep only current architecture in active sections. -- When a solution is replaced, update or remove obsolete guidance in the same change. -- Keep architecture details centralized in `bible/`; other top-level docs should only reference it. - -## Change Workflow - -1. Update the relevant file(s) in `bible/architecture/`. -2. If behavior changed, add or update a decision note in `bible/decisions/`. -3. Remove duplicated or outdated statements from non-Bible docs. -4. Validate consistency against current code paths. - diff --git a/kit/examples/integration/gin-admin-app/README.md b/kit/examples/integration/gin-admin-app/README.md deleted file mode 100644 index 7003bdb..0000000 --- a/kit/examples/integration/gin-admin-app/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# Gin Admin App Integration Notes (Example) - -Suggested use: - -- use `ai-rules` templates only if they do not conflict with existing agent instructions -- reuse UI pattern bundles for admin tables and modal workflows -- keep domain-specific hard rules in project-local Bible docs diff --git a/kit/examples/integration/greenfield-app/README.md b/kit/examples/integration/greenfield-app/README.md deleted file mode 100644 index 5490511..0000000 --- a/kit/examples/integration/greenfield-app/README.md +++ /dev/null @@ -1,10 +0,0 @@ -# Greenfield App Integration Notes (Example) - -Suggested use: - -- apply `ai-rules` -- apply `bible-core` (or merge selectively if a Bible already exists) -- apply `ui-theme-vapor` for active visual baseline (CSS + icon sprite) -- copy selected UI patterns into new modules/pages - -Keep domain-specific business rules in the host project's own Bible. diff --git a/kit/examples/integration/nethttp-enterprise-app/README.md b/kit/examples/integration/nethttp-enterprise-app/README.md deleted file mode 100644 index 9da057d..0000000 --- a/kit/examples/integration/nethttp-enterprise-app/README.md +++ /dev/null @@ -1,9 +0,0 @@ -# net/http Enterprise App Integration Notes (Example) - -This example assumes the host repo already has a mature Bible structure and detailed UI contracts. - -Use this kit primarily for: - -- shared AI instruction wording -- pattern bundles that codify existing host UI contracts -- future cross-project standardization docs diff --git a/kit/patterns/operator-tools/README.md b/kit/patterns/operator-tools/README.md deleted file mode 100644 index 31db3b2..0000000 --- a/kit/patterns/operator-tools/README.md +++ /dev/null @@ -1,13 +0,0 @@ -# Operator Tools Pattern - -Universal pattern for complex operator/admin dashboards in Go web applications. - -This pattern standardizes: - -- scope tabs and queue/status filters -- operations queue tables with row actions -- batch actions with explicit selection -- import/export shortcuts near operator workflows -- safety checklists and confirmation routing - -See `contract.md` for behavior rules. diff --git a/kit/patterns/operator-tools/contract.md b/kit/patterns/operator-tools/contract.md deleted file mode 100644 index 4568912..0000000 --- a/kit/patterns/operator-tools/contract.md +++ /dev/null @@ -1,43 +0,0 @@ -# Contract: Operator Tools Dashboard - -## Shared Base - -- This pattern inherits the shared `table-management` contract: - `kit/patterns/table-management/contract.md`. -- Reuse shared toolbar/table/icon geometry from the base contract first, then define only - operator-specific behavior. - -## Purpose - -Provide a canonical structure for high-density operator/admin screens without encoding -domain-specific terminology or business rules. - -## Required UI Regions - -- Scope tabs (or equivalent segmented navigation) -- Queue/status filters -- Batch action bar with explicit selection count -- Primary queue table/list with stable row actions -- Safety/guardrail region (checklist, warnings, runbook notes) - -## Selection and Batch Actions - -- Batch actions must require explicit selection; never infer hidden rows by default. -- The UI must display selection counts for the current view and, if applicable, outside the current view/filter. -- Destructive or high-impact actions must route through an explicit confirmation step (modal or dedicated confirm state). - -## Status and Queue Semantics - -- Queue/status labels must be consistent across filters, row badges, and summaries. -- Failed items must remain easy to filter and retry without losing current scope context. -- Running/queued states should be visually distinct from done/failed states. - -## Import / Export Placement - -- Import preview and export actions should be discoverable near operator workflows. -- Export scope must remain explicit (`selected`, `filtered`, `all`) when ambiguity exists. - -## Reuse Boundary - -- Keep the pattern generic: host projects provide their own tool names, domain fields, and backend execution logic. -- This contract standardizes interaction semantics and layout zones, not business workflows. diff --git a/kit/patterns/status-indicators/README.md b/kit/patterns/status-indicators/README.md deleted file mode 100644 index 0d5588e..0000000 --- a/kit/patterns/status-indicators/README.md +++ /dev/null @@ -1,4 +0,0 @@ -# Status Indicators Pattern (Planned) - -Reserved for health badges, sync status indicators, and severity labels. - diff --git a/kit/patterns/table-pagination/README.md b/kit/patterns/table-pagination/README.md deleted file mode 100644 index 4e79e6b..0000000 --- a/kit/patterns/table-pagination/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# Table + Pagination Pattern - -This pattern package captures a shared contract for table-based UI pages with server-side -filters and pagination. - -It is derived from mature server-rendered admin UIs and list-page conventions across multiple -Go web codebases. diff --git a/kit/patterns/table-pagination/backend/list_pagination.go.tmpl b/kit/patterns/table-pagination/backend/list_pagination.go.tmpl deleted file mode 100644 index f115a1a..0000000 --- a/kit/patterns/table-pagination/backend/list_pagination.go.tmpl +++ /dev/null @@ -1,3 +0,0 @@ -// Placeholder template for pagination helpers. -// Adapt from existing host codebase conventions (net/http or Gin). - diff --git a/kit/patterns/table-pagination/contract.md b/kit/patterns/table-pagination/contract.md deleted file mode 100644 index b413fc4..0000000 --- a/kit/patterns/table-pagination/contract.md +++ /dev/null @@ -1,27 +0,0 @@ -# Contract: Table + Server-Side Filters + Pagination - -## Required Behavior - -- Filters apply to the full query scope before pagination (not page-local filtering). -- Pagination state is controlled by URL query parameters. -- Changing a filter resets the page parameter to page `1`. -- UI shows a summary (`Showing X–Y of N`) and an explicit active page state in pagination controls. -- Canonical demo visual style uses a centered dot pager while preserving page semantics via URL parameters and accessible labels. -- Demo/base contract includes a `rows per page` control. -- Status badge columns should be centered when the column semantics are status-only values. -- Small modules (no internal scroll, no more than 2 actions) should place actions in the module header row. -- Shared table/filter controls should inherit the repository baseline component theme - (currently Vapor Soft / Vapor Night in the canonical demo/scaffold) rather than redefining - per-pattern primitives. - -## Recommended Query Parameters - -- `page` for single-list pages -- `per_page` when the page-size control is user-visible -- section-specific params (for example `active_page`, `chronology_page`) for multi-list pages - -## Interaction Guardrails - -- Same-page filter/pagination interactions should preserve user reading position (for example via module anchors such as `#table-filters` / `#table-list`). -- Table status badges should remain readable under the shared theme baseline (including tinted badge variants when a host project opts into a legacy or alternate visual preset). -- Dot pager interactions should remain keyboard accessible and expose page meaning via labels/`aria-current`, even if numbers are visually hidden. diff --git a/kit/patterns/table-pagination/static/table.css b/kit/patterns/table-pagination/static/table.css deleted file mode 100644 index 0b39dfa..0000000 --- a/kit/patterns/table-pagination/static/table.css +++ /dev/null @@ -1,2 +0,0 @@ -/* Placeholder styles for table pagination pattern. */ - diff --git a/kit/patterns/table-pagination/templates/table_with_pager.html b/kit/patterns/table-pagination/templates/table_with_pager.html deleted file mode 100644 index a5cdeac..0000000 --- a/kit/patterns/table-pagination/templates/table_with_pager.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/kit/patterns/theme-aqua-legacy/README.md b/kit/patterns/theme-aqua-legacy/README.md deleted file mode 100644 index cb470a1..0000000 --- a/kit/patterns/theme-aqua-legacy/README.md +++ /dev/null @@ -1,18 +0,0 @@ -# Aqua Theme Module (Legacy Archive Layer) - -Status: legacy archive/reference layer (not the active demo/scaffold baseline). - -This directory preserves the Aqua visual language archive for the design code: - -- global visual tokens and component surfaces -- reusable control geometry (buttons, segmented controls, table chrome) -- icon rendering baseline (stroke style + sprite integration) - -Active pattern contracts should target the current baseline and may reference this module only -for migration/comparison purposes. - -Contents: - -- `demo-aqua-freeze.css` — frozen Aqua stylesheet snapshot -- `templates/icon_sprite.html` — canonical icon sprite for reusable action semantics -- `notes.md` — scope and usage policy for this theme module diff --git a/kit/patterns/theme-aqua-legacy/demo-aqua-freeze.css b/kit/patterns/theme-aqua-legacy/demo-aqua-freeze.css deleted file mode 100644 index a3786c9..0000000 --- a/kit/patterns/theme-aqua-legacy/demo-aqua-freeze.css +++ /dev/null @@ -1,3202 +0,0 @@ -:root { - --anchor-offset: clamp(180px, 36vh, 420px); - --bg: #e6e8ee; - --ink: #1f2023; - --muted: #5d646f; - --panel: linear-gradient(180deg, rgba(244, 245, 248, 0.98), rgba(224, 227, 234, 0.96) 55%, rgba(232, 235, 241, 0.97)); - --line: #b9cbe0; - --accent: linear-gradient(180deg, #85b8ef 0%, #93c6fb 26%, #abd8ff 55%, #c7e8ff 82%, #def2ff 100%); - --accent-line: #88a4d4; - --accent-soft: #d8ecff; - --ready: #256b43; - --draft: #8a5a11; - --planned: #5a5f89; -} - -* { box-sizing: border-box; } -.icon-sprite { - position: absolute; - width: 0; - height: 0; - overflow: hidden; -} -html { - scroll-padding-top: var(--anchor-offset); -} -:target { - /* Keep anchored modules below the sticky shell/nav so the module header remains visible. */ - scroll-margin-top: var(--anchor-offset); -} -body { - margin: 0; - color: var(--ink); - background: - radial-gradient(760px 360px at 14% 6%, rgba(255,255,255,0.82), transparent 72%), - radial-gradient(760px 360px at 88% 8%, rgba(154, 203, 247, 0.16), transparent 74%), - linear-gradient(#eef1f6, #dde2ea); - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -.demo-topnav { - position: sticky; - top: 0; - z-index: 20; - background: rgba(236, 240, 246, 0.86); - backdrop-filter: blur(10px); - border-bottom: 1px solid rgba(185, 203, 224, 0.82); -} -.demo-topnav-inner { - max-width: 1040px; - margin: 0 auto; - padding: 8px 16px; - display: flex; - gap: 6px; - flex-wrap: wrap; - align-items: center; -} -.demo-topnav-brand, -.demo-topnav-link { - text-decoration: none; - color: var(--ink); - border: 1px solid transparent; - border-radius: 999px; - padding: 4px 10px; - font-size: 11px; - font-weight: 600; - color: #4c5561; - line-height: 1.1; -} -.demo-topnav-brand { - font-weight: 600; - margin-right: 4px; - border-color: #a8adb6; - background: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 1px rgba(0,0,0,0.04); -} -.demo-topnav-brand.active, -.demo-topnav-link.active { - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.18) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - border-color: #adb2bb; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 1px 1px rgba(0,0,0,0.04); - color: #2f353d; -} -.demo-topnav-link:hover { - background: rgba(255,255,255,0.44); - border-color: rgba(173, 178, 187, 0.75); -} -.page { - max-width: 1040px; - margin: 0 auto; - padding: 20px 16px 56px; -} -.app-shell { - border-bottom: 1px solid rgba(176, 189, 206, 0.78); - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.20) 34%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0)), - rgba(230, 235, 242, 0.84); - backdrop-filter: blur(8px); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.86), - inset 0 -1px 0 rgba(145, 160, 179, 0.10); -} -.app-shell-inner { - max-width: 1040px; - margin: 0 auto; - padding: 10px 16px; - display: flex; - justify-content: space-between; - gap: 14px; - align-items: flex-start; -} -.app-shell-kicker { - margin: 0; - text-transform: uppercase; - letter-spacing: 0.10em; - color: #717986; - font-size: 10px; - font-weight: 600; -} -.app-shell-title { - margin: 1px 0 0; - font-size: 16px; - line-height: 1.08; - font-weight: 700; - color: #2f343b; - text-shadow: 0 1px 0 rgba(255,255,255,0.26); -} -.app-shell-subtitle { - margin: 1px 0 0; - color: var(--muted); - font-size: 11px; - line-height: 1.15; - color: #6b7480; -} -.app-shell-statuses { - display: flex; - flex-wrap: wrap; - gap: 5px; - justify-content: flex-end; - align-items: center; -} -.shell-pill { - display: inline-flex; - align-items: center; - border: 1px solid var(--line); - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - border-radius: 999px; - padding: 3px 9px; - font-size: 10px; - line-height: 1; - font-weight: 600; - white-space: nowrap; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(164, 172, 182, 0.06), - 0 1px 1px rgba(0,0,0,0.03); -} -.shell-pill-env { - border-color: #bbc4cf; - color: #59626f; -} -.shell-pill-db { - border-color: #a8cdae; - color: #3a7446; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #eef8ef 0%, #d9eddc 100%); -} -.shell-pill-user { - border-color: #bdd0e2; - color: #476989; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #edf5ff 0%, #dbeafa 100%); -} -.masthead { - padding: 14px 16px; - border: 1px solid var(--line); - border-radius: 18px; - background: - repeating-linear-gradient(to bottom, rgba(255,255,255,0.22) 0 1px, rgba(183,194,208,0.08) 1px 3px), - var(--panel); - box-shadow: 0 12px 26px rgba(78, 107, 139, 0.10), inset 0 1px 0 rgba(255,255,255,0.96); -} -.label { - margin: 0; - text-transform: uppercase; - letter-spacing: 0.09em; - color: #5f6772; - font-size: 12px; -} -h1 { margin: 6px 0 8px; font-size: 30px; } -.lead { margin: 0; color: var(--muted); } -.panel { - margin-top: 16px; - padding: 14px; - border: 1px solid var(--line); - border-radius: 18px; - background: - repeating-linear-gradient(to bottom, rgba(255,255,255,0.22) 0 1px, rgba(183,194,208,0.08) 1px 3px), - var(--panel); - box-shadow: 0 10px 20px rgba(78, 107, 139, 0.09), inset 0 1px 0 rgba(255,255,255,0.96); -} -.panel-composite { - padding-top: 12px; - padding-bottom: 12px; -} -.panel-subsection { - display: block; -} -.panel-subsection-divider { - margin-top: 12px; - padding-top: 12px; - border-top: 1px solid #c7d3e0; -} -.panel-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - margin-bottom: 10px; -} -.panel-head .button-demo-row { margin-top: 0; } -.panel-head h2 { - margin: 0; - font-size: 16px; - font-weight: 600; - color: #2f3338; - text-shadow: 0 1px 0 rgba(255,255,255,0.45); -} -.pill { - text-decoration: none; - color: var(--ink); - border: 1px solid var(--line); - border-radius: 999px; - padding: 6px 10px; - background: #fff; - font-size: 13px; -} -.grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 12px; -} -.card { - border: 1px solid var(--line); - border-radius: 14px; - background: - linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.0) 29%), - linear-gradient(180deg, rgba(252,252,253,0.99), rgba(240, 244, 249, 0.97) 44%, rgba(228, 238, 248, 0.96) 78%, rgba(221, 234, 248, 0.96)); - padding: 14px; - min-height: 140px; -} -.row { - display: flex; - justify-content: space-between; - gap: 8px; - align-items: start; -} -.row h3 { - margin: 0; - font-size: 17px; - font-weight: 600; - color: #2f3338; - text-shadow: 0 1px 0 rgba(255,255,255,0.40); -} -.card p { margin: 10px 0 0; color: var(--muted); } -.meta { font-size: 12px; color: #666d77; font-weight: 500; } -.masthead h1 { - font-size: 25px; - line-height: 1.08; - font-weight: 700; - color: #272b31; - text-shadow: 0 1px 0 rgba(255,255,255,0.36); -} -.masthead .lead { - font-size: 12px; - line-height: 1.25; - color: #5d6672; -} -.masthead .meta { - margin-top: 8px; -} -.chip-link { - display: inline-flex; - align-items: center; - text-decoration: none; - border: 1px solid #aeb4bd; - border-radius: 999px; - min-height: 24px; - padding: 2px 10px; - color: #545d6a; - font-size: 12px; - font-weight: 600; - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f8f8fa 0%, #ededf0 62%, #e6e6ea 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 1px 0 rgba(255,255,255,0.18); -} -.chip-link:hover { filter: brightness(1.01); } - -/* Home page (catalog) Aqua hierarchy and typography tuning. */ -#home-overview.masthead { - background: - linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.12) 34%, rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.24) 0 1px, rgba(176,191,208,0.08) 1px 3px), - linear-gradient(180deg, rgba(239, 243, 249, 0.98), rgba(225, 231, 239, 0.97)); - border-color: #b8cbe0; - box-shadow: - 0 14px 28px rgba(72, 100, 130, 0.10), - inset 0 1px 0 rgba(255,255,255,0.98), - inset 0 -1px 0 rgba(130, 156, 188, 0.14); -} -#home-overview .label { - color: #6a7280; - letter-spacing: 0.11em; - font-size: 11px; -} -#home-overview h1 { - margin: 5px 0 6px; - font-size: 30px; - line-height: 1.05; - font-weight: 700; - color: #272b31; - text-shadow: 0 1px 0 rgba(255,255,255,0.42); -} -#home-overview .lead { - max-width: 860px; - color: #59616c; - font-size: 13px; - line-height: 1.28; -} -#home-overview .button-demo-row { - gap: 6px; -} -#home-overview .button-demo-row .chip-link { border-color: #b4bcc8; } -#home-overview .button-demo-row .chip-link:hover { - border-color: #aab3bf; -} - -#home-design-approach .card, -#home-anti-patterns .card, -#home-bundles .card, -#home-roadmap .card { - background: - linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.18) 30%, rgba(255,255,255,0)), - linear-gradient(180deg, rgba(246,248,251,0.98), rgba(230,237,245,0.96)); - border-color: #bfd1e3; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.95); -} -#home-design-approach .panel-head h2, -#home-workflow .panel-head h2, -#home-standardizes .panel-head h2, -#home-anti-patterns .panel-head h2, -#home-bundles .panel-head h2, -#home-roadmap .panel-head h2 { - font-size: 17px; - font-weight: 600; - color: #30343a; - text-shadow: 0 1px 0 rgba(255,255,255,0.38); -} -#home-design-approach .panel-head, -#home-workflow .panel-head, -#home-standardizes .panel-head, -#home-anti-patterns .panel-head, -#home-bundles .panel-head, -#home-roadmap .panel-head { - margin-bottom: 10px; -} -#home-design-approach .card h3, -#home-anti-patterns .card h3, -#home-bundles .card h3, -#home-roadmap .card h3 { - font-size: 15px; - font-weight: 600; - line-height: 1.15; - color: #2f3338; -} -#home-design-approach .card p, -#home-anti-patterns .card p, -#home-bundles .card p, -#home-roadmap .card p { - color: #5b6470; - font-size: 13px; - line-height: 1.28; - font-weight: 400; -} - -#home-workflow .timeline-card { - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.12) 28%, rgba(255,255,255,0)), - linear-gradient(180deg, rgba(242,245,249,0.98), rgba(229,235,243,0.96)); - border-color: #becfe1; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.96); -} -#home-workflow .timeline-card-top h3 { - margin: 2px 0 0; - font-size: 15px; - font-weight: 600; - color: #2f3338; -} -#home-workflow .timeline-card .meta { - margin-top: 8px; - color: #5f6773; - font-size: 12px; - line-height: 1.28; - font-weight: 400; -} - -#home-standardizes .chip-row { - gap: 7px; -} -#home-standardizes .chip { - border-color: #b6c7da; - color: #495767; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f9fc 0%, #ebf0f6 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 1px 0 rgba(255,255,255,0.24); -} - -#home-bundles .status, -#home-roadmap .status { - min-width: 58px; - text-align: center; -} -#home-bundles .meta code, -#home-roadmap .meta code { - background: #eef3fb; - color: #666f7c; - border: 1px solid #c4d2e1; - font-size: 12px; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.75); -} -.text-link { - color: #214a78; - text-decoration: none; - border-bottom: 1px solid rgba(33, 74, 120, 0.35); -} -.text-link:hover { border-bottom-color: rgba(33, 74, 120, 0.75); } -.button-demo-row { - display: flex; - gap: 8px; - flex-wrap: wrap; - margin-top: 10px; -} -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - text-decoration: none; - position: relative; - overflow: hidden; - border-radius: 7px; - min-height: 27px; - padding: 2px 11px; - border: 1px solid #9a9ba0; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.20) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #ffffff 0%, #f0f0f2 62%, #e8e8eb 100%); - color: #1b1b1d; - font-size: 13px; - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 500; - cursor: pointer; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.70); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -1px 0 rgba(172,172,176,0.08), - 0 1px 0 rgba(255,255,255,0.42), - 0 1px 1px rgba(0,0,0,0.08); -} -.btn:hover { - filter: brightness(1.01); -} -.btn:disabled { - opacity: 1; - cursor: not-allowed; -} -.btn-primary { - color: #18273d; - text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.20); - border-color: var(--accent-line); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.54) 24%, rgba(255,255,255,0.14) 38%, rgba(255,255,255,0) 39%), - var(--accent); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.96), - 0 1px 0 rgba(255,255,255,0.46), - 0 0 0 1px rgba(181, 213, 246, 0.16); -} -.btn-primary::before { - content: ""; - position: absolute; - left: 6px; - right: 6px; - top: 1px; - height: 36%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.12) 60%, rgba(255,255,255,0)); - pointer-events: none; -} -.btn-primary:hover { filter: brightness(1.01); } -.btn-secondary { - border-color: #a8abb0; - color: #5a6473; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); -} -.btn-secondary:hover { filter: brightness(1.01); } -.btn-danger, -.tool-btn-danger { - border-color: #c79e98; - color: #6f2e2a; - text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%); -} -.btn-danger:hover, -.tool-btn-danger:hover { filter: brightness(1.01); } -.btn-ghost { - border-color: #a8abb0; - color: #636b78; - background: - linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fcfcfd 0%, #f1f1f3 62%, #ebebee 100%); -} -.btn-ghost:hover { - filter: brightness(1.01); -} -.btn-quiet { background: transparent; } -.btn-quiet { border-color: #cfd7e0; color: #2d4960; } -.btn-quiet:hover { background: #edf3f8; border-color: #bccbda; } -.btn-pair { width: 120px; } -.btn.is-loading, -.btn[aria-disabled="true"] { - opacity: 1; - pointer-events: none; - color: #b1b5bc; - border-color: #d0d3d8; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.04) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f7f9 0%, #eceef1 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.84), - 0 1px 0 rgba(255,255,255,0.26); -} -.btn.is-loading::before { - content: ""; - width: 12px; - height: 12px; - border-radius: 50%; - border: 2px solid rgba(45, 73, 96, 0.25); - border-top-color: rgba(45, 73, 96, 0.95); - animation: spin 0.8s linear infinite; -} -.status { - white-space: nowrap; - border-radius: 999px; - padding: 3px 8px; - font-size: 12px; - text-transform: lowercase; - border: 1px solid currentColor; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.72); -} -.status-ready { color: #356941; border-color: #9dc7a5; background: linear-gradient(180deg, #edf8ef 0%, #d8eddd 100%); } -.status-warning { color: #8a6221; border-color: #d8bf7f; background: linear-gradient(180deg, #fff7e6 0%, #f6e6bf 100%); } -.status-review { color: #5c528f; border-color: #b5addc; background: linear-gradient(180deg, #f3efff 0%, #e3dbfb 100%); } -.status-queued { color: #7a5a00; background: #fff6da; } -.status-running { color: #0f5d7a; background: #e7f6fb; } -.status-failed { color: #8b3d39; border-color: #d4aaaa; background: linear-gradient(180deg, #fff0ee 0%, #f4d7d3 100%); } -.status-done { color: #1d6b3b; background: #e9f8ef; } -.status-draft { color: var(--draft); background: #fff5e6; } -.status-planned { color: var(--planned); background: #eff0fb; } -code { - background: #f4ede0; - border-radius: 6px; - padding: 1px 5px; -} -.filters { - display: grid; - grid-template-columns: 2fr 1fr 1fr auto; - gap: 8px; - align-items: end; -} -.filters label { - display: grid; - gap: 4px; - font-size: 12px; - font-weight: 600; - color: #646d79; -} -.filters label > :first-child { - line-height: 1.1; -} -.filters input, -.filters select, -.forms-grid input, -.forms-grid select, -.forms-grid textarea { - width: 100%; - border: 1px solid var(--line); - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfb 0%, #e8e8ea 100%); - border-radius: 6px; - padding: 7px 9px; - color: var(--ink); - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - font-weight: 400; - line-height: 1.2; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.34); -} -.filters input, -.filters select { - height: 32px; - min-height: 32px; - font-size: 12px; - font-weight: 400; -} -.filters input { - padding-top: 0; - padding-bottom: 0; - border-color: #b2becb; - border-radius: 4px; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.12) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ffffff 0%, #eef1f5 100%); -} -.filters select { - padding-top: 0; - padding-bottom: 0; - border-color: #aeb8c4; - border-radius: 6px; - padding-left: 8px; - padding-right: 8px; - -webkit-appearance: menulist; - appearance: auto; - background: - linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #fbfcfe 0%, #eaedf2 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(176, 184, 194, 0.06), - 0 1px 0 rgba(255,255,255,0.20); -} -.filters select:hover { - border-color: #9eacbd; - filter: brightness(1.01); -} -.filters select:focus { - outline: none; - border-color: #86a9d8; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 0 0 2px rgba(120, 170, 232, 0.22); -} -.filters option { - font-weight: 400; -} -.filters input::placeholder { - color: #9aa1ac; -} -.forms-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; -} -.forms-grid label { - display: grid; - gap: 6px; - font-size: 14px; - color: var(--muted); -} -.forms-grid .full-row { - grid-column: 1 / -1; -} -.field-error { - color: #9a2f23; - font-size: 12px; - font-weight: 600; -} -.input-error { - border-color: #d8a29b !important; - background: #fff6f5 !important; -} -.filter-actions { - display: flex; - gap: 8px; - align-items: center; -} -.filter-actions button:not(.btn) { - border: 1px solid #a6aab1; - border-radius: 7px; - min-height: 27px; - padding: 2px 11px; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.20) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #ffffff 0%, #f0f0f2 62%, #e8e8eb 100%); - color: #1b1b1d; - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - font-weight: 500; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.70); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -1px 0 rgba(172,172,176,0.08), - 0 1px 0 rgba(255,255,255,0.42), - 0 1px 1px rgba(0,0,0,0.08); - cursor: pointer; -} -.filter-actions button:not(.btn):hover { - filter: brightness(1.01); -} -.filter-actions .btn { - min-height: 27px; -} -.segmented { - display: inline-flex; - flex-wrap: wrap; - gap: 0; - padding: 5px; - border: 1px solid #98999e; - border-radius: 9px; - background: - linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(168,168,172,0.05) 1px 3px), - #d8d8db; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.78), - 0 1px 1px rgba(0,0,0,0.06); -} -.segmented.segmented-wide { - display: flex; - width: max-content; - max-width: 100%; - margin-left: auto; - margin-right: auto; -} -.segmented.segmented-wide .segment { - flex: 0 0 auto; - min-height: 36px; - padding-top: 8px; - padding-bottom: 8px; -} -.segment { - flex: 1 1 0; - display: inline-flex; - align-items: center; - justify-content: center; - text-decoration: none; - text-align: center; - color: #2f3135; - border: 0; - min-height: 30px; - padding: 6px 12px; - border-radius: 0; - font-size: 13px; - font-weight: 600; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.55); - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.88); -} -.segment + .segment { - border-left: 1px solid #a9aaaf; -} -.segment:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; -} -.segment:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; -} -.segment.active { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - inset 0 -2px 4px rgba(74, 144, 220, 0.16); -} -.notice { - border: 1px solid #d8cfbf; - background: #fbf8f1; - border-radius: 10px; - padding: 10px 12px; - margin-bottom: 12px; - font-size: 14px; - color: #4d453c; -} -.notice.success { - border-color: #b7d9c2; - background: #edf8f1; - color: #23543a; -} -.bulk-bar { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-bottom: 12px; - align-items: center; -} -.operator-toolbar { - display: flex; - flex-wrap: wrap; - gap: 10px; - align-items: center; -} -.operator-scope-toolbar { - margin-top: 4px; -} -.operator-scope-toolbar .tool-group { - flex: 1 1 320px; -} -.table-toolbar { - display: flex; - flex-wrap: wrap; - gap: 0; - align-items: stretch; - padding: 6px; - border: 1px solid #b7bdd0; - border-radius: 12px; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.22) 42%, rgba(255,255,255,0)), - linear-gradient(180deg, #edf1f7 0%, #dfe5ee 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.38); -} -.table-toolbar + .table-wrap { - margin-top: 0; - border-top: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; -} -.table-toolbar { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} -.toolbar-group { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 2px 10px; -} -.toolbar-group + .toolbar-group { - border-left: 1px solid #b6bdd0; -} -.toolbar-group-title { - margin: 0; - font-size: 9px; - font-weight: 700; - letter-spacing: 0.05em; - text-transform: uppercase; - color: #6f7088; - white-space: nowrap; -} -.toolbar-group-buttons { - display: inline-flex; - gap: 6px; - padding: 0; -} -.tool-icon-btn { - width: 34px; - height: 34px; - border: 1px solid #a7acb7; - border-radius: 8px; - text-decoration: none; - display: inline-flex; - align-items: center; - justify-content: center; - color: #2e4f7d; - font-size: 17px; - line-height: 1; - font-family: "Tahoma", "MS Sans Serif", "Lucida Grande", sans-serif; - text-shadow: 0 1px 0 rgba(255,255,255,0.62); - background: - radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.38) 30%, rgba(255,255,255,0.12) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #fdfdff 0%, #e7ebf3 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.95), - inset 0 -1px 0 rgba(164, 173, 188, 0.14), - 0 1px 0 rgba(255,255,255,0.28); -} -.tool-svg { - width: 21px; - height: 21px; - stroke: currentColor; - fill: none; - stroke-width: 1.35; - stroke-linecap: round; - stroke-linejoin: round; - shape-rendering: geometricPrecision; - vector-effect: non-scaling-stroke; -} -.tool-icon-btn:hover { - filter: brightness(1.03); -} -.tool-icon-btn-primary { - border-color: #88a4d4; - color: #244f83; - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); -} -.tool-icon-btn-danger { - border-color: #c79e98; - color: #6f2e2a; - text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%); -} -.tool-group { - display: inline-flex; - flex-wrap: wrap; - gap: 6px; - padding: 4px; - border: 1px solid #b6bbca; - border-radius: 10px; - background: - linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0)), - linear-gradient(180deg, #eef0f4 0%, #e2e6ed 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.86); -} -.tool-btn { - min-height: 30px; - padding: 6px 10px; - border: 1px solid #a6aab5; - border-radius: 7px; - text-decoration: none; - color: #2f3135; - font-size: 13px; - font-weight: 600; - line-height: 1; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - white-space: nowrap; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fafbfc 0%, #e8ebf1 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.90); -} -.tool-btn:hover { - filter: brightness(1.02); -} -.tool-btn.active, -.tool-tab.active { - border-color: #88a4d4; - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.48); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); -} -.tool-btn-primary { - border-color: #88a4d4; - color: #244f83; - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); -} -.tool-icn { - width: 14px; - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 12px; -} -.inline-menu { - position: relative; -} -.inline-menu summary { - list-style: none; -} -.inline-menu summary::-webkit-details-marker { - display: none; -} -.inline-menu[open] summary { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; -} -.inline-menu-list { - position: absolute; - top: calc(100% + 6px); - right: 0; - min-width: 180px; - border: 1px solid var(--line); - border-radius: 12px; - background: #fff; - box-shadow: 0 10px 24px rgba(25, 22, 17, 0.08); - padding: 6px; - display: grid; - gap: 4px; - z-index: 5; -} -.menu-item { - text-decoration: none; - color: var(--ink); - border-radius: 8px; - padding: 8px 10px; - font-size: 13px; -} -.menu-item:hover { - background: #f6f7f9; -} -.menu-item.danger { - color: #8a1f2e; -} -.menu-item.danger:hover { - background: #fdecef; -} -.action-cell { - white-space: nowrap; -} -.action-cell.action-icons { - white-space: nowrap; -} -.action-cell > .icon-link + .icon-link, -.action-cell > .text-link + .text-link { - margin-left: 6px; -} -.action-cell.actions-col .tool-svg { - width: 17px; - height: 17px; -} -.icon-link { - width: 28px; - height: 28px; - border: 1px solid #a8adb8; - border-radius: 7px; - text-decoration: none; - color: #365a8b; - font-size: 15px; - font-weight: 700; - line-height: 1; - display: inline-flex; - align-items: center; - justify-content: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fafbfc 0%, #e8ebf1 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.90); -} -.icon-link:hover { - filter: brightness(1.03); -} -.icon-link-danger { - border-color: #c79e98; - color: #6f2e2a; - text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%); -} -.icon-link-danger:hover { - filter: brightness(1.01); -} -.check-toggle { - text-decoration: none; - display: inline-flex; - align-items: center; - justify-content: center; - width: 30px; - height: 30px; - border: 1px solid var(--line); - border-radius: 8px; - color: var(--ink); - background: #fff; - font-size: 16px; -} -.check-toggle.checked { - background: #edf8f0; - border-color: #b7d9c2; -} -.job-id-cell, -.job-id-cell code { - white-space: nowrap; -} -.table-wrap { - overflow: auto; - border: 1px solid var(--line); - border-radius: 12px; - background: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.18) 20%, rgba(255,255,255,0)), - linear-gradient(180deg, #fbfcfe 0%, #eff3f8 100%); -} -.ui-table { - width: 100%; - border-collapse: collapse; - min-width: 720px; -} -.ui-table th, -.ui-table td { - text-align: left; - padding: 10px 12px; - border-bottom: 1px solid #d9e1eb; - font-size: 13px; -} -.ui-table thead th { - font-size: 12px; - text-transform: uppercase; - letter-spacing: 0.03em; - color: #5d6672; - font-weight: 600; - background: - linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.06) 38%, rgba(255,255,255,0)), - linear-gradient(180deg, #eceef2 0%, #d8dce2 100%); - border-bottom-color: #c5ced8; -} -.ui-table .status-col { - text-align: center; -} -.ui-table th.select-col, -.ui-table td.select-col { - width: 1%; - min-width: 46px; - max-width: 46px; - white-space: nowrap; - text-align: center; - padding-left: 8px; - padding-right: 8px; -} -.ui-table th.actions-col, -.ui-table td.actions-col { - width: 1%; - white-space: nowrap; - text-align: right; - padding-left: 8px; - padding-right: 10px; -} -.ui-table tbody tr:hover { background: linear-gradient(90deg, rgba(245,247,250,0.96), rgba(238,242,247,0.96)); } -.empty-cell { - color: var(--muted); - text-align: center; - padding: 18px 12px; -} -.pager { - display: flex; - flex-wrap: wrap; - gap: 4px; - align-items: center; - margin-top: 10px; -} -.pager a, -.pager .current, -.pager .disabled, -.pager .ellipsis { - border: 1px solid var(--line); - border-radius: 7px; - min-width: 28px; - min-height: 26px; - padding: 4px 8px; - font-size: 12px; - line-height: 1; - display: inline-flex; - align-items: center; - justify-content: center; - text-decoration: none; - color: var(--ink); - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 1px 0 rgba(255,255,255,0.20); -} -.pager .current { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - border-color: #88a4d4; - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); -} -.pager .disabled, -.pager .ellipsis { - color: var(--muted); - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f7f7f9 0%, #eceef1 100%); -} - -.pager.pager-dots { - justify-content: center; - gap: 2px; - margin-top: 12px; -} -.pager.pager-dots a, -.pager.pager-dots .current, -.pager.pager-dots .ellipsis { - position: relative; - min-width: 20px; - width: 20px; - height: 16px; - min-height: 16px; - padding: 0; - border-radius: 999px; - font-size: 0; - line-height: 0; - color: transparent; - text-shadow: none; - overflow: visible; - border: 0; - background: transparent; - box-shadow: none; -} -.pager.pager-dots a::before, -.pager.pager-dots .current::before { - content: ""; - position: absolute; - left: 50%; - top: 50%; - width: 10px; - height: 10px; - transform: translate(-50%, -50%); - border-radius: 999px; -} -.pager.pager-dots a::before { - border: 1px solid #9ca0a8; - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f6f8 0%, #dddddf 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.90), - 0 1px 0 rgba(255,255,255,0.18); -} -.pager.pager-dots a { - transition: - transform 220ms cubic-bezier(0.22, 0.8, 0.2, 1), - box-shadow 220ms cubic-bezier(0.22, 0.8, 0.2, 1), - filter 200ms ease, - border-color 200ms ease; - transform-origin: center center; - will-change: transform; -} -.pager.pager-dots a:hover { - transform: scale(1.24); - filter: brightness(1.03); - z-index: 1; -} -.pager.pager-dots a:hover::before { - border-color: #8e9aac; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.94), - 0 1px 0 rgba(255,255,255,0.22), - 0 2px 5px rgba(104, 121, 146, 0.12); -} -.pager.pager-dots a:active { - transform: scale(0.97); - filter: brightness(0.98); -} -.pager.pager-dots .current { - cursor: pointer; -} -.pager.pager-dots .current::before { - width: 12px; - height: 12px; - border: 1px solid #88a4d4; - background: - radial-gradient(circle at 35% 28%, rgba(255,255,255,0.82) 0 24%, rgba(255,255,255,0.28) 46%, rgba(255,255,255,0) 47%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - 0 0 0 1px rgba(181, 213, 246, 0.20), - 0 1px 4px rgba(92, 150, 212, 0.18); -} -.pager.pager-dots .ellipsis { - width: 24px; - min-width: 24px; - border: 0; - background: - radial-gradient(circle, #9399a3 48%, transparent 52%) 5px 50% / 4px 4px no-repeat, - radial-gradient(circle, #9399a3 48%, transparent 52%) 10px 50% / 4px 4px no-repeat, - radial-gradient(circle, #9399a3 48%, transparent 52%) 15px 50% / 4px 4px no-repeat; - box-shadow: none; -} - -@media (prefers-reduced-motion: reduce) { - .pager.pager-dots a { - transition: none; - } -} -.demo-modal-backdrop { - position: fixed; - inset: 0; - background: rgba(15, 13, 10, 0.45); - display: grid; - place-items: center; - padding: 16px; -} -.demo-modal { - width: min(640px, 100%); - display: flex; - flex-direction: column; - background: - linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)), - #e3e5ea; - border: 1px solid #b4bac4; - border-radius: 7px; - padding: 0; - box-shadow: - 0 20px 60px rgba(15, 13, 10, 0.23), - 0 2px 8px rgba(15, 13, 10, 0.10); - overflow: hidden; -} -.demo-modal-titlebar { - position: relative; - height: 23px; - display: flex; - align-items: center; - justify-content: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.18) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #e4e6ea 0%, #d8dae0 56%, #ced1d7 100%); - border-bottom: 1px solid #a2a7b0; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92); -} -.demo-modal-close-dot { - position: absolute; - left: 10px; - top: 50%; - width: 13px; - height: 13px; - transform: translateY(-50%); - border-radius: 999px; - border: 1px solid #8f2f26; - background: - radial-gradient(circle at 35% 26%, rgba(255,255,255,0.94) 0 18%, rgba(255,255,255,0.34) 30%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 48%), - radial-gradient(circle at 50% 120%, rgba(111, 20, 14, 0.26) 0 45%, rgba(111,20,14,0) 72%), - linear-gradient(180deg, #f2a094 0%, #e06758 44%, #c33f32 72%, #a92820 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.52), - inset 0 -1px 0 rgba(122, 27, 21, 0.18), - 0 1px 1px rgba(0,0,0,0.08), - 0 0 0 1px rgba(255,255,255,0.12); - text-decoration: none; -} -.demo-modal-close-dot:hover { - filter: brightness(1.03) saturate(1.02); -} -.demo-modal-close-dot:focus { - outline: none; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.52), - inset 0 -1px 0 rgba(122, 27, 21, 0.18), - 0 1px 1px rgba(0,0,0,0.08), - 0 0 0 1px rgba(255,255,255,0.12), - 0 0 0 2px rgba(120, 170, 232, 0.26); -} -.demo-modal-title { - max-width: calc(100% - 64px); - padding: 0 12px; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 13px; - font-weight: 600; - letter-spacing: 0; - color: #343942; - text-shadow: 0 1px 0 rgba(255,255,255,0.50); -} -.demo-modal-body { - display: flex; - flex-direction: column; - gap: 10px; - padding: 10px 14px 14px; - background: - repeating-linear-gradient(to bottom, rgba(255,255,255,0.20) 0 1px, rgba(183,194,208,0.07) 1px 3px), - linear-gradient(180deg, rgba(244, 247, 251, 0.98), rgba(231, 237, 245, 0.97)); -} -.demo-modal-body > .button-demo-row:last-child { - margin-top: auto; - padding-top: 4px; -} -.demo-modal .button-demo-row { - justify-content: flex-end; - margin-top: 10px; -} -.demo-modal .button-demo-row.full-row { - justify-content: flex-end; -} -.demo-modal .card { - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.14) 30%, rgba(255,255,255,0)), - linear-gradient(180deg, rgba(248,250,253,0.99), rgba(233,239,247,0.97)); - border-color: #bed0e3; -} -.modal-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; - margin: 8px 0; -} -.modal-grid label { - display: grid; - gap: 4px; - font-size: 11px; - font-weight: 600; - color: #646d79; -} -.modal-grid input, -.modal-grid select { - width: 100%; - border: 1px solid #aeb8c4; - border-radius: 6px; - background: - linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #fbfcfe 0%, #eaedf2 100%); - padding: 6px 8px; - color: var(--ink); - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 12px; - font-weight: 400; - line-height: 1.2; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(176, 184, 194, 0.06), - 0 1px 0 rgba(255,255,255,0.20); -} -.modal-grid input, -.modal-grid select { - height: 30px; - min-height: 30px; -} -.modal-grid input { - padding-top: 0; - padding-bottom: 0; -} -.modal-grid select { - padding-top: 0; - padding-bottom: 0; - -webkit-appearance: menulist; - appearance: auto; -} -.modal-grid select:hover { - border-color: #9eacbd; - filter: brightness(1.01); -} -.modal-grid select:focus, -.modal-grid input:focus { - outline: none; - border-color: #86a9d8; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 0 0 2px rgba(120, 170, 232, 0.22); -} -.checkbox-row { - display: inline-flex !important; - align-items: center; - gap: 8px; - grid-column: 1 / -1; -} -.checkbox-row input { - width: auto; - padding: 0; -} -.timeline-cards { - display: grid; - gap: 12px; -} -.timeline-card { - border: 1px solid var(--line); - border-radius: 14px; - background: #fffdf8; - padding: 14px; -} -.timeline-card-top { - display: flex; - justify-content: space-between; - gap: 12px; - align-items: flex-start; -} -.timeline-card-top h3 { - margin: 4px 0 0; - font-size: 18px; -} -.timeline-day { - margin: 0; - color: var(--muted); - font-size: 12px; - text-transform: uppercase; - letter-spacing: 0.06em; -} -.timeline-meta { - display: flex; - gap: 6px; - flex-wrap: wrap; -} -.timeline-summary-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; - margin-top: 12px; -} -.chip-row { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin-top: 6px; -} -.chip { - display: inline-flex; - align-items: center; - border: 1px solid var(--line); - background: #faf7f0; - border-radius: 999px; - padding: 4px 8px; - font-size: 12px; -} -.timeline-card-actions { - display: flex; - justify-content: space-between; - align-items: center; - gap: 10px; - margin-top: 12px; -} -.timeline-modal { - width: min(980px, 100%); -} -.timeline-drill-grid { - display: grid; - grid-template-columns: 1fr 1.2fr; - gap: 12px; - margin-top: 12px; -} -.timeline-drill-list { - border: 1px solid var(--line); - border-radius: 12px; - background: #fff; - max-height: 420px; - overflow: auto; - padding: 8px; -} -.timeline-item { - display: block; - text-decoration: none; - color: inherit; - border: 1px solid transparent; - border-radius: 10px; - padding: 8px; -} -.timeline-item:hover { - background: #fcf8ef; -} -.timeline-item.active { - border-color: #bad0e6; - background: #f2f7fd; -} -.timeline-item-title { - font-weight: 600; - font-size: 14px; -} -.timeline-item-meta { - margin-top: 2px; - color: var(--muted); - font-size: 12px; -} -.timeline-drill-detail { - border: 1px solid var(--line); - border-radius: 12px; - background: #fff; - padding: 12px; -} - -.style-playground { - --sp-panel: var(--panel); - --sp-line: var(--line); - --sp-card: #fffdf8; - --sp-chip-bg: #faf7f0; - --sp-chip-line: var(--line); - --sp-table-head: #faf6ee; - --sp-accent: var(--accent); - --sp-accent-line: var(--accent-line); - --sp-accent-soft: var(--accent-soft); - --sp-ghost-text: #2d4960; - --sp-ghost-line: #cfd7e0; - --sp-ghost-bg-hover: #edf3f8; - --sp-secondary-bg: #f4f6f8; - --sp-secondary-line: #cfd7e0; -} -.style-playground .panel { - background: var(--sp-panel); - border-color: var(--sp-line); -} -.style-playground .card, -.style-playground .timeline-card { - background: var(--sp-card); - border-color: var(--sp-line); -} -.style-playground .chip { - background: var(--sp-chip-bg); - border-color: var(--sp-chip-line); -} -.style-playground .ui-table thead th { - background: var(--sp-table-head); -} -.style-playground .btn-primary { - background: var(--sp-accent); - border-color: var(--sp-accent-line); -} -.style-playground .btn-secondary { - background: var(--sp-secondary-bg); - border-color: var(--sp-secondary-line); -} -.style-playground .btn-ghost { - color: var(--sp-ghost-text); - border-color: var(--sp-ghost-line); -} -.style-playground .btn-ghost:hover { - background: var(--sp-ghost-bg-hover); -} -.style-playground .pager .current { - background: var(--sp-accent-soft); - border-color: color-mix(in srgb, var(--sp-accent) 20%, white); - color: color-mix(in srgb, var(--sp-accent) 75%, black); -} -.style-playground .segment.active { - border-color: var(--sp-line); - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); -} -.aqua-lion-window { - position: relative; - max-width: 940px; - margin: 0 auto; - border-radius: 10px; - background: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0)), - #d7d7da; - border: 1px solid #b6b6ba; - box-shadow: - 0 22px 34px rgba(0,0,0,0.22), - 0 5px 10px rgba(0,0,0,0.12), - inset 0 1px 0 rgba(255,255,255,0.76); - overflow: hidden; - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -.aqua-lion-window::after { - content: ""; - position: absolute; - right: 9px; - bottom: 8px; - width: 14px; - height: 14px; - background: - linear-gradient(135deg, transparent 52%, rgba(120,120,124,0.7) 53%, rgba(120,120,124,0.7) 56%, transparent 57%), - linear-gradient(135deg, transparent 64%, rgba(146,146,150,0.85) 65%, rgba(146,146,150,0.85) 68%, transparent 69%), - linear-gradient(135deg, transparent 76%, rgba(171,171,175,0.9) 77%, rgba(171,171,175,0.9) 80%, transparent 81%); - pointer-events: none; -} -.aqua-lion-titlebar { - height: 36px; - position: relative; - display: flex; - align-items: center; - justify-content: center; - color: #2c2c2c; - font-size: 12px; - background: - linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #e4e4e7 0%, #d3d3d6 48%, #c9c9cc 100%); - border-bottom: 1px solid #8a8a8f; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(255,255,255,0.32); -} -.aqua-lion-traffic { - position: absolute; - left: 12px; - display: flex; - gap: 7px; -} -.aqua-lion-traffic .dot { - width: 12px; - height: 12px; - border-radius: 50%; - border: 1px solid rgba(0,0,0,0.28); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.75), - 0 1px 0 rgba(255,255,255,0.35); -} -.aqua-lion-traffic .dot.red { - background: radial-gradient(circle at 35% 30%, #ffd0c8 0%, #ef7f67 38%, #ca3e33 70%, #8e251f 100%); -} -.aqua-lion-traffic .dot.yellow { - background: radial-gradient(circle at 35% 30%, #fff4b8 0%, #f2d35f 40%, #d3a22f 72%, #976f16 100%); -} -.aqua-lion-traffic .dot.green { - background: radial-gradient(circle at 35% 30%, #d2f4bc 0%, #8fd85d 42%, #5ca532 72%, #3d6c20 100%); -} -.aqua-lion-title { - font-weight: 400; - letter-spacing: 0.02em; - text-shadow: 0 1px 0 rgba(255,255,255,0.62); -} -.aqua-lion-body { - padding: 14px 14px 16px; - font-size: 12px; - background: - repeating-linear-gradient( - to bottom, - rgba(255,255,255,0.16) 0px, - rgba(255,255,255,0.16) 1px, - rgba(173,173,177,0.10) 1px, - rgba(173,173,177,0.10) 2px - ), - linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0)), - #d8d8db; -} -.aqua-lion-group { - border-radius: 9px; - border: 1px solid #bebec2; - background: - repeating-linear-gradient( - to bottom, - rgba(255,255,255,0.18) 0px, - rgba(255,255,255,0.18) 1px, - rgba(176,176,181,0.10) 1px, - rgba(176,176,181,0.10) 2px - ), - linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.10)), - #d9d9dc; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.82), - 0 1px 0 rgba(255,255,255,0.46), - inset 0 -1px 0 rgba(179,179,184,0.22); - padding: 14px 12px 12px; -} -.aqua-lion-tabs { - display: inline-flex; - margin: -28px auto 10px; - position: relative; - left: 50%; - transform: translateX(-50%); - border-radius: 7px; - border: 1px solid #8c8c90; - overflow: hidden; - box-shadow: - 0 1px 0 rgba(255,255,255,0.58), - 0 1px 2px rgba(0,0,0,0.08); -} -.aqua-lion-tabs .tab { - min-width: 56px; - height: 24px; - border: 0; - font: inherit; - font-size: 11px; - font-weight: 400; - color: #111; - text-shadow: 0 1px 0 rgba(255,255,255,0.65); - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.22) 46%, rgba(255,255,255,0) 47%), - linear-gradient(180deg, #fafafb 0%, #ececef 56%, #e4e4e7 100%); -} -.aqua-lion-tabs .tab + .tab { - border-left: 1px solid #97989d; -} -.aqua-lion-tabs .tab.active { - color: rgba(255,255,255,0.95); - text-shadow: 0 -1px 0 rgba(0,0,0,0.20); - background: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #9e9ea1 0%, #8d8d91 58%, #848489 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.22), - inset 0 -1px 0 rgba(70,70,74,0.38); -} -.aqua-lion-grid { - display: grid; - grid-template-columns: 1.9fr 0.8fr 0.8fr; - gap: 7px 10px; - align-items: center; -} -.lion-input, -.lion-select, -.lion-combo, -.lion-search, -.lion-date, -.lion-mini-btn, -.lion-stepper { - height: 26px; - border-radius: 6px; - border: 1px solid #9b9ca0; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.24) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #fbfbfb 0%, #e8e8ea 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.42); - color: #111; - font: inherit; -} -.lion-input { - width: 100%; - padding: 0 12px; - font-size: 11px; - border-radius: 0; - background: - linear-gradient(180deg, #ffffff, #f3f3f4); - box-shadow: - inset 0 1px 2px rgba(0,0,0,0.14), - 0 1px 0 rgba(255,255,255,0.4); -} -.lion-input::placeholder { color: #a0a0a5; opacity: 1; } -.lion-btn { - position: relative; - overflow: hidden; - height: 26px; - border-radius: 6px; - border: 1px solid #9a9ba0; - width: calc(100% - 8px); - justify-self: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.20) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #ffffff 0%, #f0f0f2 62%, #e8e8eb 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -1px 0 rgba(166,166,170,0.14), - 0 1px 0 rgba(255,255,255,0.42), - 0 1px 1px rgba(0,0,0,0.08); - color: #1b1b1d; - text-shadow: 0 1px 0 rgba(255,255,255,0.70); - font: inherit; - font-size: 13px; - font-weight: 500; - letter-spacing: 0; -} -.lion-btn-default { - border-color: #8aa7d8; - color: #101820; - text-shadow: - 0 1px 0 rgba(255,255,255,0.64), - 0 0 1px rgba(255,255,255,0.28); - background: - radial-gradient(160% 95% at 50% -8%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.62) 22%, rgba(255,255,255,0.16) 36%, rgba(255,255,255,0) 37%), - linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 36%), - linear-gradient(180deg, #8ab9ee 0%, #8fc2f8 26%, #a7d6ff 56%, #c6e8ff 82%, #dff3ff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 2px 0 rgba(255,255,255,0.48), - inset 0 -4px 6px rgba(96, 153, 224, 0.12), - 0 1px 0 rgba(255,255,255,0.46), - 0 0 0 1px rgba(183, 214, 247, 0.20); -} -.lion-btn-default::before { - content: ""; - position: absolute; - left: 6px; - right: 6px; - top: 1px; - height: 48%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.20) 62%, rgba(255,255,255,0)); - pointer-events: none; -} -.lion-btn-default::after { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - box-shadow: - inset 0 0 0 1px rgba(255,255,255,0.14), - inset 0 1px 0 rgba(84, 129, 201, 0.18), - inset 0 -1px 0 rgba(255,255,255,0.10); - pointer-events: none; -} -.lion-btn-bevel { - border-radius: 999px; - border-color: #909196; - background: - linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f6f7 0%, #e5e5e8 58%, #dddddf 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.90), - inset 0 -1px 0 rgba(154,154,159,0.16), - 0 1px 1px rgba(0,0,0,0.06); -} -.lion-btn-square { - border-radius: 0; - border-color: #9a9ba0; - width: 100%; - background: - linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.05) 34%, rgba(255,255,255,0) 35%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.14) 0 1px, rgba(174,174,178,0.10) 1px 2px), - linear-gradient(180deg, #ececee 0%, #d9d9db 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.86), - 0 1px 0 rgba(255,255,255,0.28); -} -.lion-select, -.lion-combo { - display: flex; - align-items: center; - padding: 0 32px 0 10px; - position: relative; - font-size: 11px; - overflow: hidden; -} -.lion-select::before, -.lion-combo::before { - content: ""; - position: absolute; - top: 0; - right: 0; - width: 28px; - height: 100%; - border-left: 1px solid rgba(92, 114, 154, 0.55); - background: - linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ddf2ff 0%, #a4d8ff 36%, #6db8ff 72%, #58a4f1 100%); -} -.lion-select::after, -.lion-combo::after { - position: absolute; - right: 7px; - top: 50%; - color: #111; - font-size: 8px; - line-height: 0.9; - text-align: center; - text-shadow: 0 1px 0 rgba(255,255,255,0.45); -} -.lion-select::after { - content: "▴\A▾"; - white-space: pre; - transform: translateY(-57%); -} -.lion-combo::after { - content: "▾"; - transform: translateY(-50%); -} -.lion-combo { - border-radius: 0; -} -.lion-search { - display: flex; - align-items: center; - border-radius: 999px; - padding: 0 12px 0 32px; - position: relative; - color: #9b9ba1; - font-size: 10px; -} -.lion-search::before { - content: ""; - position: absolute; - left: 11px; - width: 10px; - height: 10px; - border: 1.5px solid #a6a7ad; - border-radius: 50%; -} -.lion-search::after { - content: ""; - position: absolute; - left: 20px; - top: 15px; - width: 6px; - height: 1.5px; - background: #a6a7ad; - transform: rotate(45deg); - border-radius: 2px; -} -.lion-stack { - display: grid; - gap: 4px; -} -.lion-choice { - display: flex; - align-items: center; - gap: 6px; - font-size: 11px; -} -.lion-choice .radio, -.lion-choice .check { - width: 13px; - height: 13px; - border: 1px solid #9a9ba0; - background: linear-gradient(180deg, #fff, #e7e7e9); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.9), - 0 1px 0 rgba(255,255,255,0.32); -} -.lion-choice .radio { border-radius: 50%; position: relative; } -.lion-choice .radio.on::after { - content: ""; - position: absolute; - inset: 2px; - border-radius: 50%; - background: radial-gradient(circle at 30% 30%, #ddf2ff, #79c3ff 60%, #3d7fd4); -} -.lion-choice .check { border-radius: 4px; position: relative; } -.lion-choice .check.on::after { - content: "✓"; - position: absolute; - left: 1px; - top: -3px; - font-size: 13px; - color: #1f5fb0; - font-weight: 700; -} -.lion-date-row { - display: flex; - gap: 4px; - align-items: center; - min-width: 0; -} -.lion-date { - min-width: 72px; - display: flex; - align-items: center; - padding: 0 8px; - border-radius: 0; - font-size: 10px; -} -.lion-stepper { - width: 18px; - display: grid; - place-items: center; - line-height: 0.8; - font-size: 7px; - text-align: center; - border-radius: 999px; - padding-top: 1px; -} -.lion-mini-btn { - width: 18px; - display: grid; - place-items: center; - border-radius: 6px; - font-size: 8px; -} -.lion-help { - width: 20px; - height: 20px; - border-radius: 50%; - border: 1.5px solid #8b68c7; - background: - radial-gradient(circle at 30% 20%, rgba(255,255,255,0.92), rgba(255,255,255,0.28) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffffff, #ece6fb 58%, #ddd1f6); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.9), - 0 1px 0 rgba(255,255,255,0.35); - display: grid; - place-items: center; - font-weight: 700; - font-size: 11px; -} -.lion-round-knob { - width: 30px; - height: 30px; - border-radius: 50%; - border: 1px solid #9d9ea2; - background: - radial-gradient(circle at 38% 26%, rgba(255,255,255,0.96), rgba(255,255,255,0.40) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f6f7, #d7d7d9); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.96), - inset 0 -2px 4px rgba(0,0,0,0.08), - 0 1px 2px rgba(0,0,0,0.12); - justify-self: center; -} -.lion-segmented { - display: inline-grid; - grid-template-columns: repeat(3, 1fr); - border: 1px solid #98999e; - border-radius: 6px; - overflow: hidden; - background: - linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0)), - #d8d8db; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.78), - 0 1px 1px rgba(0,0,0,0.06); -} -.lion-segmented button { - border: 0; - min-width: 0; - height: 22px; - padding: 0 10px; - font-size: 11px; - font: inherit; - font-weight: 400; - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - color: #202124; - text-shadow: 0 1px 0 rgba(255,255,255,0.55); -} -.lion-segmented button + button { - border-left: 1px solid #a9aaaf; -} -.lion-segmented button.active { - background: - radial-gradient(150% 105% at 50% -4%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 30%, rgba(255,255,255,0) 31%), - linear-gradient(180deg, #d6edff 0%, #b2dcff 44%, #8fc7fb 100%); - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - inset 0 -2px 4px rgba(74, 144, 220, 0.16); -} -.lion-slider { - height: 4px; - border-radius: 999px; - background: linear-gradient(180deg, #a4a4a8, #d0d0d4); - border: 1px solid #97989d; - position: relative; - box-shadow: - inset 0 1px 1px rgba(0,0,0,0.18), - 0 1px 0 rgba(255,255,255,0.34); -} -.lion-slider-wide { - grid-column: 2 / 4; - margin-right: 2px; -} -.lion-slider .knob { - position: absolute; - left: 52%; - top: 50%; - width: 17px; - height: 17px; - transform: translate(-50%, -50%); - border-radius: 50%; - border: 1px solid #5b74c7; - background: - radial-gradient(circle at 50% 20%, rgba(255,255,255,0.98), rgba(255,255,255,0.52) 34%, rgba(255,255,255,0) 35%), - radial-gradient(circle at 48% 44%, rgba(196,236,255,0.98) 0%, rgba(124,198,255,0.95) 44%, rgba(84,145,223,0.98) 74%, rgba(72,111,196,1) 100%), - linear-gradient(180deg, #e6f6ff 0%, #9fd7ff 58%, #67afe8 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -2px 3px rgba(42, 98, 188, 0.18), - 0 1px 2px rgba(0,0,0,0.20), - 0 0 0 1px rgba(183, 228, 255, 0.18); -} -.lion-slider .knob::before { - content: ""; - position: absolute; - left: 2px; - right: 2px; - top: 1px; - height: 46%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.42) 58%, rgba(255,255,255,0)); -} -.lion-slider .knob::after { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - box-shadow: - inset 0 0 0 1px rgba(255,255,255,0.16), - inset 0 -1px 0 rgba(46, 87, 165, 0.30); - pointer-events: none; -} -.lion-slider-scale { - grid-column: 2 / 4; - position: relative; - height: 18px; - margin-right: 2px; -} -.lion-slider-scale::before { - content: ""; - position: absolute; - left: 0; - right: 0; - top: 6px; - height: 4px; - border-radius: 999px; - border: 1px solid #98999e; - background: linear-gradient(180deg, #a7a7ab, #d1d1d4); - box-shadow: - inset 0 1px 1px rgba(0,0,0,0.16), - 0 1px 0 rgba(255,255,255,0.32); -} -.lion-slider-scale::after { - content: ""; - position: absolute; - left: 4px; - right: 4px; - bottom: -1px; - height: 6px; - background: - linear-gradient(#8b8c90, #8b8c90) 0 0 / 1px 6px no-repeat, - linear-gradient(#8b8c90, #8b8c90) 50% 0 / 1px 6px no-repeat, - linear-gradient(#8b8c90, #8b8c90) 100% 0 / 1px 6px no-repeat; - opacity: 0.9; -} -.lion-slider-scale .marker { - position: absolute; - left: 47%; - top: -2px; - width: 16px; - height: 12px; - transform: translateX(-50%); - border: 1px solid #5b74c7; - border-radius: 4px 4px 9px 9px; - background: - radial-gradient(circle at 50% 16%, rgba(255,255,255,0.96), rgba(255,255,255,0.40) 34%, rgba(255,255,255,0) 35%), - linear-gradient(180deg, #e4f6ff 0%, #a8dbff 50%, #6fb4ec 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.94), - inset 0 -2px 3px rgba(35, 96, 190, 0.16), - 0 1px 2px rgba(0,0,0,0.20); -} -.lion-slider-scale .marker::before { - content: ""; - position: absolute; - left: 2px; - right: 2px; - top: 1px; - height: 42%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.28) 62%, rgba(255,255,255,0)); -} -.lion-slider-scale .marker::after { - content: ""; - position: absolute; - left: 50%; - top: 100%; - width: 0; - height: 0; - transform: translateX(-50%); - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 7px solid #6fb4ec; - filter: drop-shadow(0 1px 0 #5b74c7); -} -.lion-progress { - height: 8px; - border-radius: 3px; - border: 1px solid #a1a2a6; - background: linear-gradient(180deg, #eeeeef, #d7d7da); - box-shadow: - inset 0 1px 1px rgba(0,0,0,0.12), - 0 1px 0 rgba(255,255,255,0.32); - overflow: hidden; -} -.lion-progress-wide { - grid-column: 1 / -1; - height: 10px; -} -.lion-progress > span { - display: block; - height: 100%; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.12) 45%, rgba(255,255,255,0) 46%), - linear-gradient(180deg, #a6e3ff 0%, #73c5ff 55%, #4aaaf2 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.82), - inset 0 -1px 0 rgba(37, 111, 195, 0.18); -} -.lion-progress-striped > span { - background: - linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.12) 45%, rgba(255,255,255,0) 46%), - repeating-linear-gradient(-45deg, rgba(78, 168, 244, 0.95) 0 12px, rgba(78, 168, 244, 0.95) 12px 18px, rgba(228, 244, 255, 0.98) 18px 30px); -} - -.style-playground.theme-y2k-silver { - position: relative; - --sp-panel: linear-gradient(180deg, rgba(252, 253, 255, 0.96), rgba(227, 232, 240, 0.95) 52%, rgba(241, 243, 248, 0.96)); - --sp-line: #b6becb; - --sp-card: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(233, 237, 244, 0.96) 56%, rgba(248, 249, 252, 0.97)); - --sp-chip-bg: linear-gradient(180deg, #ffffff, #e8ecf3); - --sp-chip-line: #c1c8d4; - --sp-table-head: linear-gradient(180deg, #f4f7fb, #e5eaf2); - --sp-accent: linear-gradient(180deg, #f9fdff 0%, #b9d2ff 18%, #75a0f3 45%, #4a73d8 70%, #7a82b1 100%); - --sp-accent-line: #8090bf; - --sp-accent-soft: #e9effc; - --sp-ghost-text: #475469; - --sp-ghost-line: #b8c1cf; - --sp-ghost-bg-hover: linear-gradient(180deg, #fafcff, #edf1f6); - --sp-secondary-bg: linear-gradient(180deg, #ffffff, #eef2f7); - --sp-secondary-line: #c3ccd8; -} -.style-playground.theme-y2k-silver::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - opacity: 0.35; - background: - radial-gradient(460px 220px at 8% 10%, rgba(255,255,255,0.60), transparent 70%), - radial-gradient(540px 260px at 90% 12%, rgba(188, 205, 241, 0.38), transparent 72%), - linear-gradient(115deg, rgba(255,255,255,0.0) 36%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.0) 62%); -} -.style-playground.theme-y2k-silver > * { position: relative; z-index: 1; } -.style-playground.theme-y2k-silver .panel, -.style-playground.theme-y2k-silver .card, -.style-playground.theme-y2k-silver .table-wrap { - box-shadow: - 0 12px 22px rgba(92, 104, 124, 0.10), - inset 0 1px 0 rgba(255,255,255,0.98), - inset 0 -1px 0 rgba(175, 184, 198, 0.16); -} -.style-playground.theme-y2k-silver .btn { - border-radius: 13px; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.98), - inset 0 -1px 0 rgba(155, 166, 186, 0.18), - 0 2px 0 rgba(135, 145, 164, 0.10), - 0 6px 14px rgba(109, 120, 141, 0.08); -} -.style-playground.theme-y2k-silver .btn-primary { - color: #f9fbff; - text-shadow: 0 1px 0 rgba(53, 73, 122, 0.32); -} -.style-playground.theme-y2k-silver .segment.active, -.style-playground.theme-y2k-silver .pager .current { - background: linear-gradient(180deg, #ffffff, #e7edf7 62%, #dfe6f2); - border-color: #b8c4db; - color: #33425a; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 1px 0 rgba(140, 152, 175, 0.10); -} - -.style-playground.theme-aqua { - position: relative; - --sp-panel: linear-gradient(180deg, rgba(244, 245, 248, 0.98), rgba(224, 227, 234, 0.96) 55%, rgba(232, 235, 241, 0.97)); - --sp-line: #b7c6d8; - --sp-card: linear-gradient(180deg, rgba(252,252,253,0.99), rgba(240, 244, 249, 0.97) 44%, rgba(228, 238, 248, 0.96) 78%, rgba(221, 234, 248, 0.96)); - --sp-chip-bg: linear-gradient(180deg, #ffffff, #f0f4f8 60%, #e8eef5); - --sp-chip-line: #bcccdc; - --sp-table-head: linear-gradient(180deg, #f7fbff, #ebf3fb 45%, #e4eef8 100%); - --sp-accent: linear-gradient(180deg, #eaf9ff 0%, #cbeaff 18%, #93d0ff 42%, #5aaff5 63%, #3a8be4 82%, #3a6ed4 100%); - --sp-accent-line: #4e80c8; - --sp-accent-soft: #d8f0ff; - --sp-ghost-text: #4c6780; - --sp-ghost-line: #b8c8d8; - --sp-ghost-bg-hover: linear-gradient(180deg, #feffff, #f2f6fa 48%, #e8eff6 100%); - --sp-secondary-bg: linear-gradient(180deg, #ffffff 0%, #f4f7fa 42%, #e8eef4 100%); - --sp-secondary-line: #b9c9da; -} -.style-playground.theme-aqua::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - opacity: 0.44; - background: - radial-gradient(620px 320px at 10% 8%, rgba(255,255,255,0.84), transparent 72%), - radial-gradient(640px 320px at 86% 8%, rgba(145, 205, 255, 0.30), transparent 74%), - radial-gradient(700px 360px at 52% 112%, rgba(105, 165, 228, 0.18), transparent 74%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(162,175,194,0.03) 1px 3px), - linear-gradient(115deg, rgba(255,255,255,0.0) 34%, rgba(255,255,255,0.16) 49%, rgba(255,255,255,0.0) 64%); -} -.style-playground.theme-aqua > * { position: relative; z-index: 1; } -.style-playground.theme-aqua { - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -.style-playground.theme-aqua h1, -.style-playground.theme-aqua h2, -.style-playground.theme-aqua h3 { - letter-spacing: 0; -} -.style-playground.theme-aqua .panel-head h2 { - font-size: 19px; - font-weight: 600; - line-height: 1.15; - color: #2f3338; - text-shadow: 0 1px 0 rgba(255,255,255,0.45); -} -.style-playground.theme-aqua .card h3 { - font-size: 17px; - font-weight: 600; - line-height: 1.15; - color: #2f3338; - text-shadow: 0 1px 0 rgba(255,255,255,0.40); -} -.style-playground.theme-aqua .panel .meta { - color: #666d77; - font-size: 12px; - font-weight: 500; -} -.style-playground.theme-aqua #style-presets .meta { - font-size: 11px; - font-weight: 600; -} -.style-playground.theme-aqua .panel, -.style-playground.theme-aqua .card, -.style-playground.theme-aqua .table-wrap { - background-image: - repeating-linear-gradient( - to bottom, - rgba(255,255,255,0.26) 0px, - rgba(255,255,255,0.26) 1px, - rgba(181, 191, 204, 0.10) 1px, - rgba(181, 191, 204, 0.10) 2px - ), - var(--sp-panel); - box-shadow: - 0 12px 22px rgba(78, 107, 139, 0.12), - inset 0 1px 0 rgba(255,255,255,1), - inset 0 -1px 0 rgba(126, 156, 191, 0.16); -} -.style-playground.theme-aqua .panel { - border-color: #b9cbe0; - backdrop-filter: blur(4px); -} -.style-playground.theme-aqua .card, -.style-playground.theme-aqua .table-wrap { - border-color: #c1cfde; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.0) 29%), - repeating-linear-gradient( - to bottom, - rgba(255,255,255,0.26) 0px, - rgba(255,255,255,0.26) 1px, - rgba(188,205,223,0.10) 1px, - rgba(188,205,223,0.10) 3px - ), - var(--sp-card); -} -.style-playground.theme-aqua .btn { - position: relative; - overflow: hidden; - border-radius: 7px; - border-color: #9a9ba0; - min-height: 27px; - padding: 2px 11px; - line-height: 1; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.20) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #ffffff 0%, #f0f0f2 62%, #e8e8eb 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -1px 0 rgba(172,172,176,0.08), - 0 1px 0 rgba(255,255,255,0.42), - 0 1px 1px rgba(0,0,0,0.08); - color: #1b1b1d; - text-shadow: 0 1px 0 rgba(255,255,255,0.70); - font-size: 13px; - font-weight: 500; - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -.style-playground.theme-aqua .btn-primary { - color: #18273d; - text-shadow: - 0 1px 0 rgba(255,255,255,0.56), - 0 0 1px rgba(255,255,255,0.20); - border-color: #88a4d4; - background-image: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.54) 24%, rgba(255,255,255,0.14) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #85b8ef 0%, #93c6fb 26%, #abd8ff 55%, #c7e8ff 82%, #def2ff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.96), - inset 0 1px 0 rgba(255,255,255,0.18), - 0 1px 0 rgba(255,255,255,0.46), - 0 0 0 1px rgba(181, 213, 246, 0.16); -} -.style-playground.theme-aqua .btn-primary::before { - content: ""; - position: absolute; - left: 6px; - right: 6px; - top: 1px; - height: 36%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.12) 60%, rgba(255,255,255,0)); - pointer-events: none; -} -.style-playground.theme-aqua .btn-primary::after { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - box-shadow: - inset 0 0 0 1px rgba(255,255,255,0.10), - inset 0 -1px 0 rgba(255,255,255,0.08); - pointer-events: none; -} -.style-playground.theme-aqua .btn-secondary, -.style-playground.theme-aqua .btn-ghost { - border-color: #a8abb0; - color: #5a6473; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(186, 188, 193, 0.06), - 0 1px 0 rgba(255,255,255,0.36), - 0 1px 1px rgba(0,0,0,0.05); -} -.style-playground.theme-aqua .btn-ghost { - color: #636b78; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fcfcfd 0%, #f1f1f3 62%, #ebebee 100%); -} -.style-playground.theme-aqua .btn-danger { - border-color: #c79e98; - color: #6f2e2a; - text-shadow: - 0 1px 0 rgba(255,255,255,0.56), - 0 0 1px rgba(255,255,255,0.16); - background-image: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.94), - inset 0 1px 0 rgba(255,255,255,0.18), - inset 0 -2px 3px rgba(214, 143, 133, 0.08), - 0 1px 0 rgba(255,255,255,0.40), - 0 0 0 1px rgba(239, 202, 196, 0.18); -} -.style-playground.theme-aqua .btn:disabled, -.style-playground.theme-aqua .btn[aria-disabled="true"] { - color: #b1b5bc; - border-color: #d0d3d8; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.04) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f7f9 0%, #eceef1 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.84), - inset 0 -1px 0 rgba(196, 200, 206, 0.05), - 0 1px 0 rgba(255,255,255,0.26); -} -.style-playground.theme-aqua .btn:hover { - filter: brightness(1.01); -} -.style-playground.theme-aqua .segment { - border-radius: 0; - border-color: transparent; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - color: #202124; - font-weight: 600; - text-shadow: 0 1px 0 rgba(255,255,255,0.55); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88); -} -.style-playground.theme-aqua .segment.active, -.style-playground.theme-aqua .pager .current { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.30) 24%, rgba(255,255,255,0.06) 36%, rgba(255,255,255,0) 37%), - linear-gradient(180deg, #9ecaf4 0%, #acd3f9 30%, #c5e2fb 60%, #dceefc 100%); - border-color: #aec4de; - color: #3d648e; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.86), - inset 0 -1px 2px rgba(108, 164, 223, 0.08); - text-shadow: 0 1px 0 rgba(255,255,255,0.58); -} -.style-playground.theme-aqua #style-presets .segment.active { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.22) 24%, rgba(255,255,255,0.04) 34%, rgba(255,255,255,0) 35%), - linear-gradient(180deg, #b9d6f1 0%, #c6ddf3 36%, #d8e8f7 100%); - border-color: #bdcddd; - color: #486a8f; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.84), - inset 0 -1px 2px rgba(129, 166, 206, 0.06); -} -.style-playground.theme-aqua .chip, -.style-playground.theme-aqua .status { - border-radius: 999px; - border-color: #b7c4d1; - color: #475563; - background: - linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f8fafc 0%, #edf1f5 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.28); -} -.style-playground.theme-aqua .chip:nth-child(1) { - border-color: #9fc4eb; - color: #255c8d; - background: - linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #edf7ff 0%, #dbeeff 100%); -} -.style-playground.theme-aqua .chip:nth-child(2) { - border-color: #b6c8d9; - color: #445869; - background: - linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f4f7fb 0%, #e8edf3 100%); -} -.style-playground.theme-aqua .chip:nth-child(3) { - border-color: #b8d4bb; - color: #3e6d46; - background: - linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #eef8ef 0%, #deefe1 100%); -} -.style-playground.theme-aqua .status-ready { - border-color: #9dc7a5; - color: #356941; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #edf8ef 0%, #d8eddd 100%); -} -.style-playground.theme-aqua .status-warning { - border-color: #d8bf7f; - color: #8a6221; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff7e6 0%, #f6e6bf 100%); -} -.style-playground.theme-aqua .status-review { - border-color: #b5addc; - color: #5c528f; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f3efff 0%, #e3dbfb 100%); -} -.style-playground.theme-aqua .status-failed { - border-color: #d4aaaa; - color: #8b3d39; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff0ee 0%, #f4d7d3 100%); -} -.style-playground.theme-aqua .segmented { - border-radius: 6px; - background: - linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(168,168,172,0.05) 1px 3px), - #d8d8db; - border-color: #98999e; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.78), - 0 1px 1px rgba(0,0,0,0.06); -} -.style-playground.theme-aqua .segmented .segment + .segment { - border-left: 1px solid #a9aaaf; -} -.style-playground.theme-aqua #style-presets .segmented { - border-radius: 6px; - border: 1px solid #9a9ba0; - background: - linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(168,168,172,0.05) 1px 3px), - #d8d8db; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.76), - 0 1px 1px rgba(0,0,0,0.05); - overflow: hidden; -} -.style-playground.theme-aqua #style-presets .segment { - min-height: 30px; - padding: 6px 12px; - border-radius: 0; - border: 0; - font-size: 11px; - font-weight: 600; - color: #2f3135; - text-shadow: 0 1px 0 rgba(255,255,255,0.55); - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88); -} -.style-playground.theme-aqua #style-presets .segment + .segment { - border-left: 1px solid #a9aaaf; -} -.style-playground.theme-aqua #style-presets .segment.active { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - inset 0 -2px 4px rgba(74, 144, 220, 0.16); -} -.style-playground.theme-aqua #style-status-filter .panel-head { - align-items: baseline; -} -.style-playground.theme-aqua #style-status-filter .panel-head .meta { - font-size: 13px; - font-weight: 500; - color: #32363c; -} -.style-playground.theme-aqua #style-status-filter .status-filter-shell { - border: 1px solid #c8c0c9; - border-radius: 14px; - padding: 12px 13px; - display: flex; - justify-content: center; - align-items: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.06) 34%, rgba(255,255,255,0) 35%), - rgba(255,255,255,0.10); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.40), - inset 0 -1px 0 rgba(190,180,192,0.08); -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs { - display: inline-flex; - flex-wrap: wrap; - gap: 0; - border: 1px solid #96979c; - border-radius: 10px; - overflow: hidden; - background: - linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0)), - #d5d5d8; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.80), - inset 0 -1px 0 rgba(167,167,171,0.14), - 0 1px 1px rgba(0,0,0,0.05); -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment { - border: 0; - min-height: 34px; - padding: 7px 18px; - border-radius: 0; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.14) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #f4f4f6 0%, #e2e2e5 100%); - color: #2f3135; - font-size: 14px; - font-weight: 600; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.60); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.82); -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment + .segment { - border-left: 1px solid #b4b5ba; -} -.style-playground.theme-aqua .status-filter-tabs .segment:first-child { - border-top-left-radius: 8px; - border-bottom-left-radius: 8px; -} -.style-playground.theme-aqua .status-filter-tabs .segment:last-child { - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment.active { - background: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #a8a8ac 0%, #95969a 54%, #8d8e93 100%); - color: rgba(255,255,255,0.93); - text-shadow: 0 -1px 0 rgba(0,0,0,0.16); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.18), - inset 1px 0 0 rgba(255,255,255,0.07), - inset -1px 0 0 rgba(72,72,76,0.14), - inset 0 -1px 0 rgba(74,74,78,0.26), - inset 0 -2px 4px rgba(74,72,76,0.10); -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment:first-child { - border-top-left-radius: 7px; - border-bottom-left-radius: 7px; -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment:last-child { - border-top-right-radius: 7px; - border-bottom-right-radius: 7px; -} -.style-playground.theme-aqua .pager a, -.style-playground.theme-aqua .pager .current, -.style-playground.theme-aqua .pager .ellipsis { - border-radius: 6px; - border-color: #98999e; - color: #202124; - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - text-shadow: 0 1px 0 rgba(255,255,255,0.55); -} -.style-playground.theme-aqua .pager .current { - color: #244f83; -} -.style-playground.theme-aqua .filters input, -.style-playground.theme-aqua .filters select { - border-color: #9c9da2; - border-radius: 6px; - color: #1f2023; - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfb 0%, #e8e8ea 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.34); -} -.style-playground.theme-aqua .filters input::placeholder { - color: #9b9ba1; -} -.style-playground.theme-aqua #style-filters .btn-pair { - width: 110px; -} -.style-playground.theme-aqua #style-filters .panel-head .btn { - min-height: 27px; - padding-top: 2px; - padding-bottom: 2px; -} -.style-playground.theme-aqua #style-filters .panel-head .btn-primary { - border-color: #88a4d4; -} -.style-playground.theme-aqua #style-filters .panel-head .btn-ghost { - border-color: #a8abb0; - color: #616978; -} -.style-playground.theme-aqua .filters label, -.style-playground.theme-aqua .panel .meta { - color: #4d5560; -} -.style-playground.theme-aqua .ui-table thead th { - color: #5c6470; - font-size: 12px; - font-weight: 600; - letter-spacing: 0.03em; - border-bottom-color: #c5ced8; - background: - linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.02) 34%, rgba(255,255,255,0) 35%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.12) 0 1px, rgba(174,174,178,0.08) 1px 2px), - linear-gradient(180deg, #ececee 0%, #d9d9db 100%); -} -.style-playground.theme-aqua .ui-table .status-ready { - border-color: #8fbe98; - color: #2f6a3d; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #e4f5e8 0%, #cfe8d6 100%); -} -.style-playground.theme-aqua .ui-table .status-warning { - border-color: #d0b26b; - color: #835b16; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fdf1d2 0%, #f2dfab 100%); -} -.style-playground.theme-aqua .ui-table .status-review { - border-color: #aaa0d8; - color: #5a4e92; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #eee9ff 0%, #ddd3fb 100%); -} -.style-playground.theme-aqua .ui-table .status-failed { - border-color: #cc9b9a; - color: #853734; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fee7e4 0%, #f0cbc6 100%); -} -.style-playground.theme-aqua .ui-table tbody tr:hover { - background: linear-gradient(90deg, rgba(245,247,250,0.96), rgba(238,242,247,0.96)); -} - -/* Legacy Aqua snapshot segmented controls for playground modules. */ -.style-playground.theme-aqua .status-filter-tabs { - display: inline-flex; - flex-wrap: nowrap; - gap: 0; - padding: 5px; - border: 1px solid #98999e; - border-radius: 10px; - overflow: hidden; - background: - linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(168,168,172,0.05) 1px 3px), - #d8d8db; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.78), - 0 1px 1px rgba(0,0,0,0.06); -} -.style-playground.theme-aqua .status-filter-tabs .segment { - min-height: 34px; - padding: 8px 18px; - border: 0; - border-radius: 0; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.14) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #f4f4f6 0%, #e2e2e5 100%); - color: #2f3135; - font-size: 14px; - font-weight: 600; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.60); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.82); -} -.style-playground.theme-aqua .status-filter-tabs .segment + .segment { - border-left: 1px solid #b4b5ba; -} -.style-playground.theme-aqua .status-filter-tabs .segment:first-child { - border-top-left-radius: 7px; - border-bottom-left-radius: 7px; -} -.style-playground.theme-aqua .status-filter-tabs .segment:last-child { - border-top-right-radius: 7px; - border-bottom-right-radius: 7px; -} -.style-playground.theme-aqua .status-filter-tabs-blue .segment.active { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - inset 0 -2px 4px rgba(74, 144, 220, 0.16); -} -.style-playground.theme-aqua .status-filter-tabs-dark .segment.active { - background: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #a8a8ac 0%, #95969a 54%, #8d8e93 100%); - color: rgba(255,255,255,0.93); - text-shadow: 0 -1px 0 rgba(0,0,0,0.16); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.18), - inset 1px 0 0 rgba(255,255,255,0.07), - inset -1px 0 0 rgba(72,72,76,0.14), - inset 0 -1px 0 rgba(74,74,78,0.26), - inset 0 -2px 4px rgba(74,72,76,0.10); -} -.style-playground.theme-aqua #style-status-filter .status-filter-shell { - border: 1px solid #c8c0c9; - border-radius: 14px; - padding: 12px 13px; - display: flex; - justify-content: center; - align-items: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.06) 34%, rgba(255,255,255,0) 35%), - rgba(255,255,255,0.10); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.40), - inset 0 -1px 0 rgba(190,180,192,0.08); -} -.style-playground.theme-aqua #style-presets .status-filter-tabs .segment { - min-height: 30px; - padding: 6px 12px; - font-size: 11px; -} -.style-playground.theme-aqua #style-presets .status-filter-tabs .segment.active { - color: #244f83; -} - -.style-playground.theme-win9x { - position: relative; - --sp-panel: #c0c0c0; - --sp-line: #7f7f7f; - --sp-card: #c0c0c0; - --sp-chip-bg: #d4d0c8; - --sp-chip-line: #808080; - --sp-table-head: #d4d0c8; - --sp-accent: #0a246a; - --sp-accent-line: #00123c; - --sp-accent-soft: #c6d6f7; - --sp-ghost-text: #000; - --sp-ghost-line: #808080; - --sp-ghost-bg-hover: #d4d0c8; - --sp-secondary-bg: #d4d0c8; - --sp-secondary-line: #808080; -} -.style-playground.theme-win9x::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - background: - linear-gradient(rgba(255,255,255,0.05), rgba(0,0,0,0.02)), - radial-gradient(480px 220px at 20% -10%, rgba(255,255,255,0.18), transparent 65%); -} -.style-playground.theme-win9x > * { position: relative; z-index: 1; } -.style-playground.theme-win9x .panel, -.style-playground.theme-win9x .card, -.style-playground.theme-win9x .table-wrap { - border: 1px solid #808080; - border-top-color: #ffffff; - border-left-color: #ffffff; - border-right-color: #404040; - border-bottom-color: #404040; - border-radius: 0; - box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080; -} -.style-playground.theme-win9x .panel { - padding: 14px; -} -.style-playground.theme-win9x .card { - min-height: auto; -} -.style-playground.theme-win9x .btn, -.style-playground.theme-win9x .segment, -.style-playground.theme-win9x .chip, -.style-playground.theme-win9x .pager a, -.style-playground.theme-win9x .pager .current, -.style-playground.theme-win9x .pager .ellipsis { - border-radius: 0; - border: 1px solid #808080; - border-top-color: #ffffff; - border-left-color: #ffffff; - border-right-color: #404040; - border-bottom-color: #404040; - box-shadow: none; -} -.style-playground.theme-win9x .btn { - min-height: 34px; - padding: 6px 12px; - font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif; - font-size: 13px; - background: #d4d0c8; - color: #000; -} -.style-playground.theme-win9x .btn:hover { - background: #e1ddd6; - transform: none; -} -.style-playground.theme-win9x .btn:active { - border-top-color: #404040; - border-left-color: #404040; - border-right-color: #ffffff; - border-bottom-color: #ffffff; - box-shadow: inset 1px 1px 0 #808080; -} -.style-playground.theme-win9x .btn-primary { - background: #0a246a; - color: #fff; - border-top-color: #6f8fd8; - border-left-color: #6f8fd8; - border-right-color: #00123c; - border-bottom-color: #00123c; - text-shadow: none; -} -.style-playground.theme-win9x .btn-secondary, -.style-playground.theme-win9x .btn-ghost { - color: #000; -} -.style-playground.theme-win9x .btn-danger { - background: #b93a32; - color: #fff; - border-top-color: #de8b86; - border-left-color: #de8b86; - border-right-color: #5e1b18; - border-bottom-color: #5e1b18; -} -.style-playground.theme-win9x .segmented { - border-radius: 0; - border: 1px solid #808080; - border-top-color: #404040; - border-left-color: #404040; - border-right-color: #ffffff; - border-bottom-color: #ffffff; - background: #c0c0c0; - padding: 4px; -} -.style-playground.theme-win9x .segment { - padding: 6px 9px; - font-family: Tahoma, "MS Sans Serif", sans-serif; - font-size: 12px; - background: #d4d0c8; - color: #000; -} -.style-playground.theme-win9x .segment.active, -.style-playground.theme-win9x .pager .current { - background: #0a246a; - color: #fff; - border-top-color: #6f8fd8; - border-left-color: #6f8fd8; - border-right-color: #00123c; - border-bottom-color: #00123c; -} -.style-playground.theme-win9x .chip { - background: #d4d0c8; - padding: 3px 8px; - font-family: Tahoma, "MS Sans Serif", sans-serif; - font-size: 11px; -} -.style-playground.theme-win9x .status { - border-radius: 0; - padding: 2px 6px; - font-family: Tahoma, "MS Sans Serif", sans-serif; - font-size: 11px; - text-transform: none; - box-shadow: inset 1px 1px 0 rgba(255,255,255,0.35); -} -.style-playground.theme-win9x .ui-table { - min-width: 0; - font-family: Tahoma, "MS Sans Serif", sans-serif; -} -.style-playground.theme-win9x .ui-table thead th, -.style-playground.theme-win9x .ui-table td { - font-family: Tahoma, "MS Sans Serif", sans-serif; - font-size: 12px; -} -.style-playground.theme-win9x .ui-table thead th { - border-bottom: 1px solid #808080; - color: #000; -} -.style-playground.theme-win9x .ui-table td { - border-bottom-color: #a8a8a8; -} -.style-playground.theme-win9x .ui-table tbody tr:hover { - background: #dbe8ff; -} -.style-playground.theme-win9x .filters input, -.style-playground.theme-win9x .filters select { - border-radius: 0; - border: 1px solid #808080; - border-top-color: #404040; - border-left-color: #404040; - border-right-color: #ffffff; - border-bottom-color: #ffffff; - background: #fff; - font-family: Tahoma, "MS Sans Serif", sans-serif; -} -.style-playground.theme-win9x .meta { - color: #222; - font-family: Tahoma, "MS Sans Serif", sans-serif; -} - -.style-playground.theme-linen { - --sp-panel: rgba(255, 252, 245, 0.94); - --sp-line: #d8cfbf; - --sp-card: #fffdf7; - --sp-chip-bg: #f8f2e6; - --sp-chip-line: #deceb3; - --sp-table-head: #f8f1e4; - --sp-accent: #215f98; - --sp-accent-line: #174b7a; - --sp-accent-soft: #eaf2fb; - --sp-ghost-text: #2d4960; - --sp-ghost-line: #c7d2de; - --sp-ghost-bg-hover: #edf3f8; - --sp-secondary-bg: #f4f6f8; - --sp-secondary-line: #cfd7e0; -} - -.style-playground.theme-slate { - --sp-panel: rgba(241, 246, 251, 0.94); - --sp-line: #c2cfdb; - --sp-card: #f8fbff; - --sp-chip-bg: #eef4fb; - --sp-chip-line: #c7d6e5; - --sp-table-head: #edf3fa; - --sp-accent: #2c5d88; - --sp-accent-line: #244a6c; - --sp-accent-soft: #e4edf7; - --sp-ghost-text: #28455d; - --sp-ghost-line: #bfd0df; - --sp-ghost-bg-hover: #eaf2fa; - --sp-secondary-bg: #eef3f8; - --sp-secondary-line: #c7d4e0; -} - -.style-playground.theme-signal { - --sp-panel: rgba(255, 251, 245, 0.95); - --sp-line: #dfcfba; - --sp-card: #fffdf8; - --sp-chip-bg: #fff4e7; - --sp-chip-line: #e6cfb2; - --sp-table-head: #fff2e1; - --sp-accent: #c44d1b; - --sp-accent-line: #a54015; - --sp-accent-soft: #fee9df; - --sp-ghost-text: #6a402a; - --sp-ghost-line: #d9c2b2; - --sp-ghost-bg-hover: #fdefe9; - --sp-secondary-bg: #f8efe8; - --sp-secondary-line: #dccbbf; -} - -@keyframes spin { - to { transform: rotate(360deg); } -} -@media (max-width: 700px) { - .aqua-lion-grid { grid-template-columns: 1fr; } - .aqua-lion-tabs { margin-top: -28px; } - .lion-slider-wide, - .lion-slider-scale, - .lion-progress-wide { grid-column: auto; margin-right: 0; } - .app-shell-inner { flex-direction: column; align-items: stretch; } - .app-shell-statuses { justify-content: flex-start; } - h1 { font-size: 28px; } - .panel-head { align-items: flex-start; flex-direction: column; } - .filters { grid-template-columns: 1fr; } - .forms-grid { grid-template-columns: 1fr; } - .filter-actions { justify-content: flex-start; } - .modal-grid { grid-template-columns: 1fr; } - .timeline-summary-grid { grid-template-columns: 1fr; } - .timeline-drill-grid { grid-template-columns: 1fr; } - .timeline-card-actions { align-items: flex-start; flex-direction: column; } -} diff --git a/kit/patterns/theme-aqua-legacy/notes.md b/kit/patterns/theme-aqua-legacy/notes.md deleted file mode 100644 index 926ae06..0000000 --- a/kit/patterns/theme-aqua-legacy/notes.md +++ /dev/null @@ -1,23 +0,0 @@ -# Aqua Theme Notes - -This module is a reusable Aqua style archive for design-code consumers. - -## What it captures - -- Aqua-style control surfaces and button hierarchy -- segmented controls and grouped tab geometry -- table/filter/toolbars visual primitives -- icon rendering baseline and shared icon sprite usage -- modal and status component style language - -## How to use - -- Treat this module as a legacy reference snapshot, not the active baseline. -- Pattern contracts should inherit the active baseline first and use this module only when a host - project explicitly opts into Aqua-like styling. -- Do not move new baseline decisions here. - -## Boundary - -- This module standardizes visual language only. -- Domain behavior, labels, and business workflow semantics belong to pattern contracts. diff --git a/kit/patterns/theme-aqua-legacy/templates/icon_sprite.html b/kit/patterns/theme-aqua-legacy/templates/icon_sprite.html deleted file mode 100644 index eff1d2c..0000000 --- a/kit/patterns/theme-aqua-legacy/templates/icon_sprite.html +++ /dev/null @@ -1,103 +0,0 @@ - - diff --git a/kit/patterns/theme-vapor/README.md b/kit/patterns/theme-vapor/README.md deleted file mode 100644 index 8fabb87..0000000 --- a/kit/patterns/theme-vapor/README.md +++ /dev/null @@ -1,17 +0,0 @@ -# Vapor Theme Module (Active Design Layer) - -Status: active visual baseline for reusable UI primitives. - -This module defines the shared Vapor visual language used by the demo and intended host-project -integration: - -- baseline tokens and surface treatment -- reusable component geometry (buttons, segmented controls, table chrome) -- shared icon sprite for table-management and operator workflows - -Contents: - -- `static/vapor.css` - active stylesheet baseline -- `templates/icon_sprite.html` - active icon sprite -- `notes.md` - usage boundaries and integration rules -- `palette-catalog.md` - preset list for app-shell header and accent colors diff --git a/kit/patterns/theme-vapor/notes.md b/kit/patterns/theme-vapor/notes.md deleted file mode 100644 index 56a1990..0000000 --- a/kit/patterns/theme-vapor/notes.md +++ /dev/null @@ -1,28 +0,0 @@ -# Vapor Theme Notes - -This module is the active reusable theme source for design-code consumers. - -## What it captures - -- Vapor control surfaces and button hierarchy -- segmented controls and grouped tab geometry -- table/filter/toolbar primitives -- icon rendering baseline and shared sprite usage -- modal and status component style language -- app-shell color/height presets for host-level branding fit within Vapor aesthetics - -## How to use - -- Use this module as the visual baseline for host projects that adopt the canonical demo style. -- Pattern contracts should reference shared behavior contracts and rely on this module for visual primitives. -- When baseline visuals change, update this module first to keep downstream integration deterministic. -- For shell color selection, use `palette-catalog.md` and set `data-vapor-shell` on ``. -- For runtime switching, the recommended query key is `vapor_shell` (same IDs as the catalog). -- Keep host-specific brand overrides outside this module unless they are reusable presets. - -## Boundary - -- This module standardizes visual language only. -- Domain behavior, labels, and business workflow semantics belong to pattern contracts. -- Preset palette IDs are part of the reusable contract; host projects may choose one, but should not - rename/remove preset IDs in downstream copies without migration notes. diff --git a/kit/patterns/theme-vapor/palette-catalog.md b/kit/patterns/theme-vapor/palette-catalog.md deleted file mode 100644 index b26b65c..0000000 --- a/kit/patterns/theme-vapor/palette-catalog.md +++ /dev/null @@ -1,50 +0,0 @@ -# Vapor Shell Palette Catalog - -This catalog defines reusable `app-shell` presets for host projects that consume `theme-vapor`. - -Apply a preset on the root element: - -```html - -``` - -Optional: host project can override shell height without changing preset IDs: - -```css -:root { --shell-height: 72px; } -``` - -## Selection Approach - -Recommended precedence for host integration: - -1. `?vapor_shell=` query parameter (preview/share links) -2. `localStorage["vapor_shell"]` (remembered user choice) -3. `` static default from server/templates -4. fallback preset: `miami-sunset` - -The scaffold and demo JavaScript implement this precedence. - -## Presets (Header + Accent) - -| Preset ID | Header core | Accent core | Default shell height | -|---|---|---|---| -| `miami-sunset` | `#fbe5f8` | `#ff7ec7` | `66px` | -| `neon-grid` | `#f5eeff` | `#ff4fd8` | `64px` | -| `laser-flamingo` | `#ffe8f4` | `#ff6fae` | `70px` | -| `synth-lagoon` | `#e8f6ff` | `#67d7ff` | `62px` | -| `mall-soft` | `#fff1f8` | `#ffb5d7` | `68px` | -| `hologram-sky` | `#edf9ff` | `#5ce4ff` | `64px` | -| `peach-drive` | `#fff0e6` | `#ff9a6a` | `72px` | -| `ultraviolet-plaza` | `#f0e8ff` | `#b26dff` | `66px` | -| `cyber-mint` | `#ebfff7` | `#57f0c1` | `62px` | - -## Token Surface - -Each preset resolves these tokens in `static/vapor.css`: - -- `--shell-height` -- `--shell-bg-light`, `--shell-bg-dark` -- `--shell-border-light`, `--shell-border-dark` -- `--shell-accent-light`, `--shell-accent-dark` -- `--shell-accent-line-light`, `--shell-accent-line-dark` diff --git a/kit/patterns/theme-vapor/static/vapor.css b/kit/patterns/theme-vapor/static/vapor.css deleted file mode 100644 index 8f7aa7a..0000000 --- a/kit/patterns/theme-vapor/static/vapor.css +++ /dev/null @@ -1,4995 +0,0 @@ -:root { - --anchor-offset: clamp(180px, 36vh, 420px); - --bg: #e6e8ee; - --ink: #1f2023; - --muted: #5d646f; - --panel: linear-gradient(180deg, rgba(244, 245, 248, 0.98), rgba(224, 227, 234, 0.96) 55%, rgba(232, 235, 241, 0.97)); - --line: #b9cbe0; - --accent: linear-gradient(180deg, #85b8ef 0%, #93c6fb 26%, #abd8ff 55%, #c7e8ff 82%, #def2ff 100%); - --accent-line: #88a4d4; - --accent-soft: #d8ecff; - --ready: #256b43; - --draft: #8a5a11; - --planned: #5a5f89; -} - -* { box-sizing: border-box; } -.icon-sprite { - position: absolute; - width: 0; - height: 0; - overflow: hidden; -} -html { - scroll-padding-top: var(--anchor-offset); -} -:target { - /* Keep anchored modules below the sticky shell/nav so the module header remains visible. */ - scroll-margin-top: var(--anchor-offset); -} -body { - margin: 0; - color: var(--ink); - background: - radial-gradient(760px 360px at 14% 6%, rgba(255,255,255,0.82), transparent 72%), - radial-gradient(760px 360px at 88% 8%, rgba(154, 203, 247, 0.16), transparent 74%), - linear-gradient(#eef1f6, #dde2ea); - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -.demo-topnav { - position: sticky; - top: 0; - z-index: 20; - background: rgba(236, 240, 246, 0.86); - backdrop-filter: blur(10px); - border-bottom: 1px solid rgba(185, 203, 224, 0.82); -} -.demo-topnav-inner { - max-width: 1040px; - margin: 0 auto; - padding: 8px 16px; - display: flex; - gap: 6px; - flex-wrap: wrap; - align-items: center; -} -.demo-topnav-brand, -.demo-topnav-link { - text-decoration: none; - color: var(--ink); - border: 1px solid transparent; - border-radius: 999px; - padding: 4px 10px; - font-size: 11px; - font-weight: 600; - color: #4c5561; - line-height: 1.1; -} -.demo-topnav-brand { - font-weight: 600; - margin-right: 4px; - border-color: #a8adb6; - background: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 1px rgba(0,0,0,0.04); -} -.demo-topnav-brand.active, -.demo-topnav-link.active { - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.18) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - border-color: #adb2bb; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 1px 1px rgba(0,0,0,0.04); - color: #2f353d; -} -.demo-topnav-link:hover { - background: rgba(255,255,255,0.44); - border-color: rgba(173, 178, 187, 0.75); -} -.page { - max-width: 1040px; - margin: 0 auto; - padding: 20px 16px 56px; -} -.app-shell { - position: relative; - min-height: var(--shell-height, 64px); - border-bottom: 1px solid rgba(176, 189, 206, 0.78); - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.20) 34%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0)), - rgba(230, 235, 242, 0.84); - backdrop-filter: blur(8px); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.86), - inset 0 -1px 0 rgba(145, 160, 179, 0.10); -} -.app-shell::after { - content: ""; - position: absolute; - left: 0; - right: 0; - bottom: -1px; - height: 3px; - background: var(--shell-accent, linear-gradient(90deg, #ffd9f3 0%, #e8c9ff 44%, #b8ddff 100%)); - border-top: 1px solid var(--shell-accent-line, #bf92e3); - box-shadow: 0 0 16px var(--shell-accent-shadow, rgba(191, 146, 227, 0.32)); - pointer-events: none; -} -.app-shell-inner { - max-width: 1040px; - margin: 0 auto; - padding: var(--shell-pad-y, 10px) 16px; - display: flex; - justify-content: space-between; - gap: 14px; - align-items: flex-start; -} -.app-shell-kicker { - margin: 0; - text-transform: uppercase; - letter-spacing: 0.10em; - color: var(--shell-kicker, #717986); - font-size: 10px; - font-weight: 600; -} -.app-shell-title { - margin: 1px 0 0; - font-size: 16px; - line-height: 1.08; - font-weight: 700; - color: var(--shell-title, #2f343b); - text-shadow: 0 1px 0 rgba(255,255,255,0.26); -} -.app-shell-subtitle { - margin: 1px 0 0; - font-size: 11px; - line-height: 1.15; - color: var(--shell-subtitle, #6b7480); -} -.app-shell-statuses { - display: flex; - flex-wrap: wrap; - gap: 5px; - justify-content: flex-end; - align-items: center; -} -.theme-switch { - display: inline-flex; - align-items: center; - gap: 0; - margin-left: 4px; - border: 1px solid #cdbfe5; - border-radius: 999px; - overflow: hidden; - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #faf7ff 0%, #ede9f6 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.84); -} -.theme-switch-btn { - appearance: none; - border: 0; - border-left: 1px solid rgba(184, 171, 217, 0.5); - background: transparent; - color: #5f5578; - cursor: pointer; - font: inherit; - font-size: 11px; - font-weight: 700; - line-height: 1; - padding: 5px 9px; -} -.theme-switch-btn:first-child { border-left: 0; } -.theme-switch-btn:hover { background: rgba(255,255,255,0.22); } -.theme-switch-btn.active { - color: #2f2048; - background: - radial-gradient(150% 90% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.26) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffd9f3 0%, #e8c9ff 46%, #b9ddff 100%); -} -.shell-pill { - display: inline-flex; - align-items: center; - border: 1px solid var(--line); - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - border-radius: 999px; - padding: 3px 9px; - font-size: 10px; - line-height: 1; - font-weight: 600; - white-space: nowrap; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(164, 172, 182, 0.06), - 0 1px 1px rgba(0,0,0,0.03); -} -.shell-pill-env { - border-color: #bbc4cf; - color: #59626f; -} -.shell-pill-db { - border-color: #a8cdae; - color: #3a7446; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #eef8ef 0%, #d9eddc 100%); -} -.shell-pill-user { - border-color: #bdd0e2; - color: #476989; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #edf5ff 0%, #dbeafa 100%); -} -.masthead { - padding: 14px 16px; - border: 1px solid var(--line); - border-radius: 18px; - background: - repeating-linear-gradient(to bottom, rgba(255,255,255,0.22) 0 1px, rgba(183,194,208,0.08) 1px 3px), - var(--panel); - box-shadow: 0 12px 26px rgba(78, 107, 139, 0.10), inset 0 1px 0 rgba(255,255,255,0.96); -} -.label { - margin: 0; - text-transform: uppercase; - letter-spacing: 0.09em; - color: #5f6772; - font-size: 12px; -} -h1 { margin: 6px 0 8px; font-size: 30px; } -.lead { margin: 0; color: var(--muted); } -.panel { - margin-top: 16px; - padding: 14px; - border: 1px solid var(--line); - border-radius: 18px; - background: - repeating-linear-gradient(to bottom, rgba(255,255,255,0.22) 0 1px, rgba(183,194,208,0.08) 1px 3px), - var(--panel); - box-shadow: 0 10px 20px rgba(78, 107, 139, 0.09), inset 0 1px 0 rgba(255,255,255,0.96); -} -.panel-composite { - padding-top: 12px; - padding-bottom: 12px; -} -.panel-subsection { - display: block; -} -.panel-subsection-divider { - margin-top: 12px; - padding-top: 12px; - border-top: 1px solid #c7d3e0; -} -.panel-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - margin-bottom: 10px; -} -.panel-head .button-demo-row { margin-top: 0; } -.panel-head h2 { - margin: 0; - font-size: 16px; - font-weight: 600; - color: #2f3338; - text-shadow: 0 1px 0 rgba(255,255,255,0.45); -} -.pill { - text-decoration: none; - color: var(--ink); - border: 1px solid var(--line); - border-radius: 999px; - padding: 6px 10px; - background: #fff; - font-size: 13px; -} -.grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 12px; -} -.card { - border: 1px solid var(--line); - border-radius: 14px; - background: - linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.0) 29%), - linear-gradient(180deg, rgba(252,252,253,0.99), rgba(240, 244, 249, 0.97) 44%, rgba(228, 238, 248, 0.96) 78%, rgba(221, 234, 248, 0.96)); - padding: 14px; - min-height: 140px; -} -.row { - display: flex; - justify-content: space-between; - gap: 8px; - align-items: start; -} -.row h3 { - margin: 0; - font-size: 17px; - font-weight: 600; - color: #2f3338; - text-shadow: 0 1px 0 rgba(255,255,255,0.40); -} -.card p { margin: 10px 0 0; color: var(--muted); } -.meta { font-size: 12px; color: #666d77; font-weight: 500; } -.masthead h1 { - font-size: 25px; - line-height: 1.08; - font-weight: 700; - color: #272b31; - text-shadow: 0 1px 0 rgba(255,255,255,0.36); -} -.masthead .lead { - font-size: 12px; - line-height: 1.25; - color: #5d6672; -} -.masthead .meta { - margin-top: 8px; -} -.chip-link { - display: inline-flex; - align-items: center; - text-decoration: none; - border: 1px solid #aeb4bd; - border-radius: 999px; - min-height: 24px; - padding: 2px 10px; - color: #545d6a; - font-size: 12px; - font-weight: 600; - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f8f8fa 0%, #ededf0 62%, #e6e6ea 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 1px 0 rgba(255,255,255,0.18); -} -.chip-link:hover { filter: brightness(1.01); } - -/* Home page (catalog) Aqua hierarchy and typography tuning. */ -#home-overview.masthead { - background: - linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.12) 34%, rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.24) 0 1px, rgba(176,191,208,0.08) 1px 3px), - linear-gradient(180deg, rgba(239, 243, 249, 0.98), rgba(225, 231, 239, 0.97)); - border-color: #b8cbe0; - box-shadow: - 0 14px 28px rgba(72, 100, 130, 0.10), - inset 0 1px 0 rgba(255,255,255,0.98), - inset 0 -1px 0 rgba(130, 156, 188, 0.14); -} -#home-overview .label { - color: #6a7280; - letter-spacing: 0.11em; - font-size: 11px; -} -#home-overview h1 { - margin: 5px 0 6px; - font-size: 30px; - line-height: 1.05; - font-weight: 700; - color: #272b31; - text-shadow: 0 1px 0 rgba(255,255,255,0.42); -} -#home-overview .lead { - max-width: 860px; - color: #59616c; - font-size: 13px; - line-height: 1.28; -} -#home-overview .button-demo-row { - gap: 6px; -} -#home-overview .button-demo-row .chip-link { border-color: #b4bcc8; } -#home-overview .button-demo-row .chip-link:hover { - border-color: #aab3bf; -} - -#home-design-approach .card, -#home-anti-patterns .card, -#home-bundles .card, -#home-roadmap .card { - background: - linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.18) 30%, rgba(255,255,255,0)), - linear-gradient(180deg, rgba(246,248,251,0.98), rgba(230,237,245,0.96)); - border-color: #bfd1e3; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.95); -} -#home-design-approach .panel-head h2, -#home-workflow .panel-head h2, -#home-standardizes .panel-head h2, -#home-anti-patterns .panel-head h2, -#home-bundles .panel-head h2, -#home-roadmap .panel-head h2 { - font-size: 17px; - font-weight: 600; - color: #30343a; - text-shadow: 0 1px 0 rgba(255,255,255,0.38); -} -#home-design-approach .panel-head, -#home-workflow .panel-head, -#home-standardizes .panel-head, -#home-anti-patterns .panel-head, -#home-bundles .panel-head, -#home-roadmap .panel-head { - margin-bottom: 10px; -} -#home-design-approach .card h3, -#home-anti-patterns .card h3, -#home-bundles .card h3, -#home-roadmap .card h3 { - font-size: 15px; - font-weight: 600; - line-height: 1.15; - color: #2f3338; -} -#home-design-approach .card p, -#home-anti-patterns .card p, -#home-bundles .card p, -#home-roadmap .card p { - color: #5b6470; - font-size: 13px; - line-height: 1.28; - font-weight: 400; -} - -#home-workflow .timeline-card { - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.12) 28%, rgba(255,255,255,0)), - linear-gradient(180deg, rgba(242,245,249,0.98), rgba(229,235,243,0.96)); - border-color: #becfe1; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.96); -} -#home-workflow .timeline-card-top h3 { - margin: 2px 0 0; - font-size: 15px; - font-weight: 600; - color: #2f3338; -} -#home-workflow .timeline-card .meta { - margin-top: 8px; - color: #5f6773; - font-size: 12px; - line-height: 1.28; - font-weight: 400; -} - -#home-standardizes .chip-row { - gap: 7px; -} -#home-standardizes .chip { - border-color: #b6c7da; - color: #495767; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f9fc 0%, #ebf0f6 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 1px 0 rgba(255,255,255,0.24); -} - -#home-bundles .status, -#home-roadmap .status { - min-width: 58px; - text-align: center; -} -#home-bundles .meta code, -#home-roadmap .meta code { - background: #eef3fb; - color: #666f7c; - border: 1px solid #c4d2e1; - font-size: 12px; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.75); -} -.text-link { - color: #214a78; - text-decoration: none; - border-bottom: 1px solid rgba(33, 74, 120, 0.35); -} -.text-link:hover { border-bottom-color: rgba(33, 74, 120, 0.75); } -.button-demo-row { - display: flex; - gap: 8px; - flex-wrap: wrap; - margin-top: 10px; -} -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - text-decoration: none; - position: relative; - overflow: hidden; - border-radius: 7px; - min-height: 27px; - padding: 2px 11px; - border: 1px solid #9a9ba0; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.20) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #ffffff 0%, #f0f0f2 62%, #e8e8eb 100%); - color: #1b1b1d; - font-size: 13px; - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 500; - cursor: pointer; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.70); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -1px 0 rgba(172,172,176,0.08), - 0 1px 0 rgba(255,255,255,0.42), - 0 1px 1px rgba(0,0,0,0.08); -} -.btn:hover { - filter: brightness(1.01); -} -.btn:disabled { - opacity: 1; - cursor: not-allowed; -} -.btn-primary { - color: #18273d; - text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.20); - border-color: var(--accent-line); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.54) 24%, rgba(255,255,255,0.14) 38%, rgba(255,255,255,0) 39%), - var(--accent); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.96), - 0 1px 0 rgba(255,255,255,0.46), - 0 0 0 1px rgba(181, 213, 246, 0.16); -} -.btn-primary::before { - content: ""; - position: absolute; - left: 6px; - right: 6px; - top: 1px; - height: 36%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.12) 60%, rgba(255,255,255,0)); - pointer-events: none; -} -.btn-primary:hover { filter: brightness(1.01); } -.btn-secondary { - border-color: #a8abb0; - color: #5a6473; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); -} -.btn-secondary:hover { filter: brightness(1.01); } -.btn-danger, -.tool-btn-danger { - border-color: #c79e98; - color: #6f2e2a; - text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%); -} -.btn-danger:hover, -.tool-btn-danger:hover { filter: brightness(1.01); } -.btn-ghost { - border-color: #a8abb0; - color: #636b78; - background: - linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fcfcfd 0%, #f1f1f3 62%, #ebebee 100%); -} -.btn-ghost:hover { - filter: brightness(1.01); -} -.btn-quiet { background: transparent; } -.btn-quiet { border-color: #cfd7e0; color: #2d4960; } -.btn-quiet:hover { background: #edf3f8; border-color: #bccbda; } -.btn-pair { width: 120px; } -.btn.is-loading, -.btn[aria-disabled="true"] { - opacity: 1; - pointer-events: none; - color: #b1b5bc; - border-color: #d0d3d8; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.04) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f7f9 0%, #eceef1 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.84), - 0 1px 0 rgba(255,255,255,0.26); -} -.btn.is-loading::before { - content: ""; - width: 12px; - height: 12px; - border-radius: 50%; - border: 2px solid rgba(45, 73, 96, 0.25); - border-top-color: rgba(45, 73, 96, 0.95); - animation: spin 0.8s linear infinite; -} -.status { - white-space: nowrap; - border-radius: 999px; - padding: 3px 8px; - font-size: 12px; - text-transform: lowercase; - border: 1px solid currentColor; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.72); -} -.status-ready { color: #356941; border-color: #9dc7a5; background: linear-gradient(180deg, #edf8ef 0%, #d8eddd 100%); } -.status-warning { color: #8a6221; border-color: #d8bf7f; background: linear-gradient(180deg, #fff7e6 0%, #f6e6bf 100%); } -.status-review { color: #5c528f; border-color: #b5addc; background: linear-gradient(180deg, #f3efff 0%, #e3dbfb 100%); } -.status-queued { color: #7a5a00; background: #fff6da; } -.status-running { color: #0f5d7a; background: #e7f6fb; } -.status-failed { color: #8b3d39; border-color: #d4aaaa; background: linear-gradient(180deg, #fff0ee 0%, #f4d7d3 100%); } -.status-done { color: #1d6b3b; background: #e9f8ef; } -.status-draft { color: var(--draft); background: #fff5e6; } -.status-planned { color: var(--planned); background: #eff0fb; } -code { - background: #f4ede0; - border-radius: 6px; - padding: 1px 5px; -} -.filters { - display: grid; - grid-template-columns: 2fr 1fr 1fr auto; - gap: 8px; - align-items: end; -} -.filters label { - display: grid; - gap: 4px; - font-size: 12px; - font-weight: 600; - color: #646d79; -} -.filters label > :first-child { - line-height: 1.1; -} -.filters input, -.filters select, -.forms-grid input, -.forms-grid select, -.forms-grid textarea { - width: 100%; - border: 1px solid var(--line); - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfb 0%, #e8e8ea 100%); - border-radius: 6px; - padding: 7px 9px; - color: var(--ink); - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - font-weight: 400; - line-height: 1.2; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.34); -} -.filters input, -.filters select { - height: 32px; - min-height: 32px; - font-size: 12px; - font-weight: 400; -} -.filters input { - padding-top: 0; - padding-bottom: 0; - border-color: #b2becb; - border-radius: 4px; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.12) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ffffff 0%, #eef1f5 100%); -} -.filters select { - padding-top: 0; - padding-bottom: 0; - border-color: #aeb8c4; - border-radius: 6px; - padding-left: 8px; - padding-right: 8px; - -webkit-appearance: menulist; - appearance: auto; - background: - linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #fbfcfe 0%, #eaedf2 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(176, 184, 194, 0.06), - 0 1px 0 rgba(255,255,255,0.20); -} -.filters select:hover { - border-color: #9eacbd; - filter: brightness(1.01); -} -.filters select:focus { - outline: none; - border-color: #86a9d8; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 0 0 2px rgba(120, 170, 232, 0.22); -} -.filters option { - font-weight: 400; -} -.filters input::placeholder { - color: #9aa1ac; -} -.forms-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; -} -.forms-grid label { - display: grid; - gap: 6px; - font-size: 14px; - color: var(--muted); -} -.forms-grid .full-row { - grid-column: 1 / -1; -} -.field-error { - color: #9a2f23; - font-size: 12px; - font-weight: 600; -} -.input-error { - border-color: #d8a29b !important; - background: #fff6f5 !important; -} -.filter-actions { - display: flex; - gap: 8px; - align-items: center; -} -.filter-actions button:not(.btn) { - border: 1px solid #a6aab1; - border-radius: 7px; - min-height: 27px; - padding: 2px 11px; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.20) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #ffffff 0%, #f0f0f2 62%, #e8e8eb 100%); - color: #1b1b1d; - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - font-weight: 500; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.70); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -1px 0 rgba(172,172,176,0.08), - 0 1px 0 rgba(255,255,255,0.42), - 0 1px 1px rgba(0,0,0,0.08); - cursor: pointer; -} -.filter-actions button:not(.btn):hover { - filter: brightness(1.01); -} -.filter-actions .btn { - min-height: 27px; -} -.segmented { - display: inline-flex; - flex-wrap: wrap; - gap: 0; - padding: 5px; - border: 1px solid #98999e; - border-radius: 9px; - background: - linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(168,168,172,0.05) 1px 3px), - #d8d8db; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.78), - 0 1px 1px rgba(0,0,0,0.06); -} -.segmented.segmented-wide { - display: flex; - width: max-content; - max-width: 100%; - margin-left: auto; - margin-right: auto; -} -.segmented.segmented-wide .segment { - flex: 0 0 auto; - min-height: 36px; - padding-top: 8px; - padding-bottom: 8px; -} -.segment { - flex: 1 1 0; - display: inline-flex; - align-items: center; - justify-content: center; - text-decoration: none; - text-align: center; - color: #2f3135; - border: 0; - min-height: 30px; - padding: 6px 12px; - border-radius: 0; - font-size: 13px; - font-weight: 600; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.55); - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.88); -} -.segment + .segment { - border-left: 1px solid #a9aaaf; -} -.segment:first-child { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; -} -.segment:last-child { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; -} -.segment.active { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - inset 0 -2px 4px rgba(74, 144, 220, 0.16); -} -.notice { - border: 1px solid #d8cfbf; - background: #fbf8f1; - border-radius: 10px; - padding: 10px 12px; - margin-bottom: 12px; - font-size: 14px; - color: #4d453c; -} -.notice.success { - border-color: #b7d9c2; - background: #edf8f1; - color: #23543a; -} -.bulk-bar { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-bottom: 12px; - align-items: center; -} -.operator-toolbar { - display: flex; - flex-wrap: wrap; - gap: 10px; - align-items: center; -} -.operator-scope-toolbar { - margin-top: 4px; -} -.operator-scope-toolbar .tool-group { - flex: 1 1 320px; -} -.table-toolbar { - display: flex; - flex-wrap: wrap; - gap: 0; - align-items: stretch; - padding: 6px; - border: 1px solid #b7bdd0; - border-radius: 12px; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.22) 42%, rgba(255,255,255,0)), - linear-gradient(180deg, #edf1f7 0%, #dfe5ee 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.38); -} -.table-toolbar + .table-wrap { - margin-top: 0; - border-top: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; -} -.table-toolbar { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} -.toolbar-group { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 2px 10px; -} -.toolbar-group + .toolbar-group { - border-left: 1px solid #b6bdd0; -} -.toolbar-group-title { - margin: 0; - font-size: 9px; - font-weight: 700; - letter-spacing: 0.05em; - text-transform: uppercase; - color: #6f7088; - white-space: nowrap; -} -.toolbar-group-buttons { - display: inline-flex; - gap: 6px; - padding: 0; -} -.tool-icon-btn { - width: 34px; - height: 34px; - border: 1px solid #a7acb7; - border-radius: 8px; - text-decoration: none; - display: inline-flex; - align-items: center; - justify-content: center; - color: #2e4f7d; - font-size: 17px; - line-height: 1; - font-family: "Tahoma", "MS Sans Serif", "Lucida Grande", sans-serif; - text-shadow: 0 1px 0 rgba(255,255,255,0.62); - background: - radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.38) 30%, rgba(255,255,255,0.12) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #fdfdff 0%, #e7ebf3 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.95), - inset 0 -1px 0 rgba(164, 173, 188, 0.14), - 0 1px 0 rgba(255,255,255,0.28); -} -.tool-svg { - width: 21px; - height: 21px; - stroke: currentColor; - fill: none; - stroke-width: 1.35; - stroke-linecap: round; - stroke-linejoin: round; - shape-rendering: geometricPrecision; - vector-effect: non-scaling-stroke; -} -.tool-icon-btn:hover { - filter: brightness(1.03); -} -.tool-icon-btn-primary { - border-color: #88a4d4; - color: #244f83; - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); -} -.tool-icon-btn-danger { - border-color: #c79e98; - color: #6f2e2a; - text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%); -} -.tool-group { - display: inline-flex; - flex-wrap: wrap; - gap: 6px; - padding: 4px; - border: 1px solid #b6bbca; - border-radius: 10px; - background: - linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0)), - linear-gradient(180deg, #eef0f4 0%, #e2e6ed 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.86); -} -.tool-btn { - min-height: 30px; - padding: 6px 10px; - border: 1px solid #a6aab5; - border-radius: 7px; - text-decoration: none; - color: #2f3135; - font-size: 13px; - font-weight: 600; - line-height: 1; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - white-space: nowrap; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fafbfc 0%, #e8ebf1 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.90); -} -.tool-btn:hover { - filter: brightness(1.02); -} -.tool-btn.active, -.tool-tab.active { - border-color: #88a4d4; - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.48); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); -} -.tool-btn-primary { - border-color: #88a4d4; - color: #244f83; - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); -} -.tool-icn { - width: 14px; - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 12px; -} -.inline-menu { - position: relative; -} -.inline-menu summary { - list-style: none; -} -.inline-menu summary::-webkit-details-marker { - display: none; -} -.inline-menu[open] summary { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; -} -.inline-menu-list { - position: absolute; - top: calc(100% + 6px); - right: 0; - min-width: 180px; - border: 1px solid var(--line); - border-radius: 12px; - background: #fff; - box-shadow: 0 10px 24px rgba(25, 22, 17, 0.08); - padding: 6px; - display: grid; - gap: 4px; - z-index: 5; -} -.menu-item { - text-decoration: none; - color: var(--ink); - border-radius: 8px; - padding: 8px 10px; - font-size: 13px; -} -.menu-item:hover { - background: #f6f7f9; -} -.menu-item.danger { - color: #8a1f2e; -} -.menu-item.danger:hover { - background: #fdecef; -} -.action-cell { - white-space: nowrap; -} -.action-cell.action-icons { - white-space: nowrap; -} -.action-cell > .icon-link + .icon-link, -.action-cell > .text-link + .text-link { - margin-left: 6px; -} -.action-cell.actions-col .tool-svg { - width: 17px; - height: 17px; -} -.icon-link { - width: 28px; - height: 28px; - border: 1px solid #a8adb8; - border-radius: 7px; - text-decoration: none; - color: #365a8b; - font-size: 15px; - font-weight: 700; - line-height: 1; - display: inline-flex; - align-items: center; - justify-content: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fafbfc 0%, #e8ebf1 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.90); -} -.icon-link:hover { - filter: brightness(1.03); -} -.icon-link-danger { - border-color: #c79e98; - color: #6f2e2a; - text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16); - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%); -} -.icon-link-danger:hover { - filter: brightness(1.01); -} -.check-toggle { - text-decoration: none; - display: inline-flex; - align-items: center; - justify-content: center; - width: 30px; - height: 30px; - border: 1px solid var(--line); - border-radius: 8px; - color: var(--ink); - background: #fff; - font-size: 16px; -} -.check-toggle.checked { - background: #edf8f0; - border-color: #b7d9c2; -} -.job-id-cell, -.job-id-cell code { - white-space: nowrap; -} -.table-wrap { - overflow: auto; - border: 1px solid var(--line); - border-radius: 12px; - background: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.18) 20%, rgba(255,255,255,0)), - linear-gradient(180deg, #fbfcfe 0%, #eff3f8 100%); -} -.ui-table { - width: 100%; - border-collapse: collapse; - min-width: 720px; -} -.ui-table th, -.ui-table td { - text-align: left; - padding: 10px 12px; - border-bottom: 1px solid #d9e1eb; - font-size: 13px; -} -.ui-table thead th { - font-size: 12px; - text-transform: uppercase; - letter-spacing: 0.03em; - color: #5d6672; - font-weight: 600; - background: - linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.06) 38%, rgba(255,255,255,0)), - linear-gradient(180deg, #eceef2 0%, #d8dce2 100%); - border-bottom-color: #c5ced8; -} -.ui-table .status-col { - text-align: center; -} -.ui-table th.select-col, -.ui-table td.select-col { - width: 1%; - min-width: 46px; - max-width: 46px; - white-space: nowrap; - text-align: center; - padding-left: 8px; - padding-right: 8px; -} -.ui-table th.actions-col, -.ui-table td.actions-col { - width: 1%; - white-space: nowrap; - text-align: right; - padding-left: 8px; - padding-right: 10px; -} -.ui-table tbody tr:hover { background: linear-gradient(90deg, rgba(245,247,250,0.96), rgba(238,242,247,0.96)); } -.empty-cell { - color: var(--muted); - text-align: center; - padding: 18px 12px; -} -.pager { - display: flex; - flex-wrap: wrap; - gap: 4px; - align-items: center; - margin-top: 10px; -} -.pager a, -.pager .current, -.pager .disabled, -.pager .ellipsis { - border: 1px solid var(--line); - border-radius: 7px; - min-width: 28px; - min-height: 26px; - padding: 4px 8px; - font-size: 12px; - line-height: 1; - display: inline-flex; - align-items: center; - justify-content: center; - text-decoration: none; - color: var(--ink); - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 1px 0 rgba(255,255,255,0.20); -} -.pager .current { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - border-color: #88a4d4; - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); -} -.pager .disabled, -.pager .ellipsis { - color: var(--muted); - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f7f7f9 0%, #eceef1 100%); -} - -.pager.pager-dots { - justify-content: center; - gap: 2px; - margin-top: 12px; -} -.pager.pager-dots a, -.pager.pager-dots .current, -.pager.pager-dots .ellipsis { - position: relative; - min-width: 20px; - width: 20px; - height: 16px; - min-height: 16px; - padding: 0; - border-radius: 999px; - font-size: 0; - line-height: 0; - color: transparent; - text-shadow: none; - overflow: visible; - border: 0; - background: transparent; - box-shadow: none; -} -.pager.pager-dots a::before, -.pager.pager-dots .current::before { - content: ""; - position: absolute; - left: 50%; - top: 50%; - width: 10px; - height: 10px; - transform: translate(-50%, -50%); - border-radius: 999px; -} -.pager.pager-dots a::before { - border: 1px solid #9ca0a8; - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f6f8 0%, #dddddf 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.90), - 0 1px 0 rgba(255,255,255,0.18); -} -.pager.pager-dots a { - transition: - transform 220ms cubic-bezier(0.22, 0.8, 0.2, 1), - box-shadow 220ms cubic-bezier(0.22, 0.8, 0.2, 1), - filter 200ms ease, - border-color 200ms ease; - transform-origin: center center; - will-change: transform; -} -.pager.pager-dots a:hover { - transform: scale(1.24); - filter: brightness(1.03); - z-index: 1; -} -.pager.pager-dots a:hover::before { - border-color: #8e9aac; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.94), - 0 1px 0 rgba(255,255,255,0.22), - 0 2px 5px rgba(104, 121, 146, 0.12); -} -.pager.pager-dots a:active { - transform: scale(0.97); - filter: brightness(0.98); -} -.pager.pager-dots .current { - cursor: pointer; -} -.pager.pager-dots .current::before { - width: 12px; - height: 12px; - border: 1px solid #88a4d4; - background: - radial-gradient(circle at 35% 28%, rgba(255,255,255,0.82) 0 24%, rgba(255,255,255,0.28) 46%, rgba(255,255,255,0) 47%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - 0 0 0 1px rgba(181, 213, 246, 0.20), - 0 1px 4px rgba(92, 150, 212, 0.18); -} -.pager.pager-dots .ellipsis { - width: 24px; - min-width: 24px; - border: 0; - background: - radial-gradient(circle, #9399a3 48%, transparent 52%) 5px 50% / 4px 4px no-repeat, - radial-gradient(circle, #9399a3 48%, transparent 52%) 10px 50% / 4px 4px no-repeat, - radial-gradient(circle, #9399a3 48%, transparent 52%) 15px 50% / 4px 4px no-repeat; - box-shadow: none; -} - -@media (prefers-reduced-motion: reduce) { - .pager.pager-dots a { - transition: none; - } -} -.demo-modal-backdrop { - position: fixed; - inset: 0; - background: rgba(15, 13, 10, 0.45); - display: grid; - place-items: center; - padding: 16px; -} -.demo-modal { - width: min(640px, 100%); - display: flex; - flex-direction: column; - background: - linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)), - #e3e5ea; - border: 1px solid #b4bac4; - border-radius: 7px; - padding: 0; - box-shadow: - 0 20px 60px rgba(15, 13, 10, 0.23), - 0 2px 8px rgba(15, 13, 10, 0.10); - overflow: hidden; -} -.demo-modal-titlebar { - position: relative; - height: 23px; - display: flex; - align-items: center; - justify-content: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.18) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #e4e6ea 0%, #d8dae0 56%, #ced1d7 100%); - border-bottom: 1px solid #a2a7b0; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92); -} -.demo-modal-close-dot { - position: absolute; - left: 10px; - top: 50%; - width: 13px; - height: 13px; - transform: translateY(-50%); - border-radius: 999px; - border: 1px solid #8f2f26; - background: - radial-gradient(circle at 35% 26%, rgba(255,255,255,0.94) 0 18%, rgba(255,255,255,0.34) 30%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 48%), - radial-gradient(circle at 50% 120%, rgba(111, 20, 14, 0.26) 0 45%, rgba(111,20,14,0) 72%), - linear-gradient(180deg, #f2a094 0%, #e06758 44%, #c33f32 72%, #a92820 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.52), - inset 0 -1px 0 rgba(122, 27, 21, 0.18), - 0 1px 1px rgba(0,0,0,0.08), - 0 0 0 1px rgba(255,255,255,0.12); - text-decoration: none; -} -.demo-modal-close-dot:hover { - filter: brightness(1.03) saturate(1.02); -} -.demo-modal-close-dot:focus { - outline: none; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.52), - inset 0 -1px 0 rgba(122, 27, 21, 0.18), - 0 1px 1px rgba(0,0,0,0.08), - 0 0 0 1px rgba(255,255,255,0.12), - 0 0 0 2px rgba(120, 170, 232, 0.26); -} -.demo-modal-title { - max-width: calc(100% - 64px); - padding: 0 12px; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 13px; - font-weight: 600; - letter-spacing: 0; - color: #343942; - text-shadow: 0 1px 0 rgba(255,255,255,0.50); -} -.demo-modal-body { - display: flex; - flex-direction: column; - gap: 10px; - padding: 10px 14px 14px; - background: - repeating-linear-gradient(to bottom, rgba(255,255,255,0.20) 0 1px, rgba(183,194,208,0.07) 1px 3px), - linear-gradient(180deg, rgba(244, 247, 251, 0.98), rgba(231, 237, 245, 0.97)); -} -.demo-modal-body > .button-demo-row:last-child { - margin-top: auto; - padding-top: 4px; -} -.demo-modal .button-demo-row { - justify-content: flex-end; - margin-top: 10px; -} -.demo-modal .button-demo-row.full-row { - justify-content: flex-end; -} -.demo-modal .card { - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.14) 30%, rgba(255,255,255,0)), - linear-gradient(180deg, rgba(248,250,253,0.99), rgba(233,239,247,0.97)); - border-color: #bed0e3; -} -.modal-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; - margin: 8px 0; -} -.modal-grid label { - display: grid; - gap: 4px; - font-size: 11px; - font-weight: 600; - color: #646d79; -} -.modal-grid input, -.modal-grid select { - width: 100%; - border: 1px solid #aeb8c4; - border-radius: 6px; - background: - linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #fbfcfe 0%, #eaedf2 100%); - padding: 6px 8px; - color: var(--ink); - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 12px; - font-weight: 400; - line-height: 1.2; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(176, 184, 194, 0.06), - 0 1px 0 rgba(255,255,255,0.20); -} -.modal-grid input, -.modal-grid select { - height: 30px; - min-height: 30px; -} -.modal-grid input { - padding-top: 0; - padding-bottom: 0; -} -.modal-grid select { - padding-top: 0; - padding-bottom: 0; - -webkit-appearance: menulist; - appearance: auto; -} -.modal-grid select:hover { - border-color: #9eacbd; - filter: brightness(1.01); -} -.modal-grid select:focus, -.modal-grid input:focus { - outline: none; - border-color: #86a9d8; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 0 0 2px rgba(120, 170, 232, 0.22); -} -.checkbox-row { - display: inline-flex !important; - align-items: center; - gap: 8px; - grid-column: 1 / -1; -} -.checkbox-row input { - width: auto; - padding: 0; -} -.timeline-cards { - display: grid; - gap: 12px; -} -.timeline-card { - border: 1px solid var(--line); - border-radius: 14px; - background: #fffdf8; - padding: 14px; -} -.timeline-card-top { - display: flex; - justify-content: space-between; - gap: 12px; - align-items: flex-start; -} -.timeline-card-top h3 { - margin: 4px 0 0; - font-size: 18px; -} -.timeline-day { - margin: 0; - color: var(--muted); - font-size: 12px; - text-transform: uppercase; - letter-spacing: 0.06em; -} -.timeline-meta { - display: flex; - gap: 6px; - flex-wrap: wrap; -} -.timeline-summary-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; - margin-top: 12px; -} -.chip-row { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin-top: 6px; -} -.chip { - display: inline-flex; - align-items: center; - border: 1px solid var(--line); - background: #faf7f0; - border-radius: 999px; - padding: 4px 8px; - font-size: 12px; -} -.timeline-card-actions { - display: flex; - justify-content: space-between; - align-items: center; - gap: 10px; - margin-top: 12px; -} -.timeline-modal { - width: min(980px, 100%); -} -.timeline-drill-grid { - display: grid; - grid-template-columns: 1fr 1.2fr; - gap: 12px; - margin-top: 12px; -} -.timeline-drill-list { - border: 1px solid var(--line); - border-radius: 12px; - background: #fff; - max-height: 420px; - overflow: auto; - padding: 8px; -} -.timeline-item { - display: block; - text-decoration: none; - color: inherit; - border: 1px solid transparent; - border-radius: 10px; - padding: 8px; -} -.timeline-item:hover { - background: #fcf8ef; -} -.timeline-item.active { - border-color: #bad0e6; - background: #f2f7fd; -} -.timeline-item-title { - font-weight: 600; - font-size: 14px; -} -.timeline-item-meta { - margin-top: 2px; - color: var(--muted); - font-size: 12px; -} -.timeline-drill-detail { - border: 1px solid var(--line); - border-radius: 12px; - background: #fff; - padding: 12px; -} - -.style-playground { - --sp-panel: var(--panel); - --sp-line: var(--line); - --sp-card: #fffdf8; - --sp-chip-bg: #faf7f0; - --sp-chip-line: var(--line); - --sp-table-head: #faf6ee; - --sp-accent: var(--accent); - --sp-accent-line: var(--accent-line); - --sp-accent-soft: var(--accent-soft); - --sp-ghost-text: #2d4960; - --sp-ghost-line: #cfd7e0; - --sp-ghost-bg-hover: #edf3f8; - --sp-secondary-bg: #f4f6f8; - --sp-secondary-line: #cfd7e0; -} -.style-playground .panel { - background: var(--sp-panel); - border-color: var(--sp-line); -} -.style-playground .card, -.style-playground .timeline-card { - background: var(--sp-card); - border-color: var(--sp-line); -} -.style-playground .chip { - background: var(--sp-chip-bg); - border-color: var(--sp-chip-line); -} -.style-playground .ui-table thead th { - background: var(--sp-table-head); -} -.style-playground .btn-primary { - background: var(--sp-accent); - border-color: var(--sp-accent-line); -} -.style-playground .btn-secondary { - background: var(--sp-secondary-bg); - border-color: var(--sp-secondary-line); -} -.style-playground .btn-ghost { - color: var(--sp-ghost-text); - border-color: var(--sp-ghost-line); -} -.style-playground .btn-ghost:hover { - background: var(--sp-ghost-bg-hover); -} -.style-playground .pager .current { - background: var(--sp-accent-soft); - border-color: color-mix(in srgb, var(--sp-accent) 20%, white); - color: color-mix(in srgb, var(--sp-accent) 75%, black); -} -.style-playground .segment.active { - border-color: var(--sp-line); - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); -} -.aqua-lion-window { - position: relative; - max-width: 940px; - margin: 0 auto; - border-radius: 10px; - background: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0)), - #d7d7da; - border: 1px solid #b6b6ba; - box-shadow: - 0 22px 34px rgba(0,0,0,0.22), - 0 5px 10px rgba(0,0,0,0.12), - inset 0 1px 0 rgba(255,255,255,0.76); - overflow: hidden; - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -.aqua-lion-window::after { - content: ""; - position: absolute; - right: 9px; - bottom: 8px; - width: 14px; - height: 14px; - background: - linear-gradient(135deg, transparent 52%, rgba(120,120,124,0.7) 53%, rgba(120,120,124,0.7) 56%, transparent 57%), - linear-gradient(135deg, transparent 64%, rgba(146,146,150,0.85) 65%, rgba(146,146,150,0.85) 68%, transparent 69%), - linear-gradient(135deg, transparent 76%, rgba(171,171,175,0.9) 77%, rgba(171,171,175,0.9) 80%, transparent 81%); - pointer-events: none; -} -.aqua-lion-titlebar { - height: 36px; - position: relative; - display: flex; - align-items: center; - justify-content: center; - color: #2c2c2c; - font-size: 12px; - background: - linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #e4e4e7 0%, #d3d3d6 48%, #c9c9cc 100%); - border-bottom: 1px solid #8a8a8f; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(255,255,255,0.32); -} -.aqua-lion-traffic { - position: absolute; - left: 12px; - display: flex; - gap: 7px; -} -.aqua-lion-traffic .dot { - width: 12px; - height: 12px; - border-radius: 50%; - border: 1px solid rgba(0,0,0,0.28); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.75), - 0 1px 0 rgba(255,255,255,0.35); -} -.aqua-lion-traffic .dot.red { - background: radial-gradient(circle at 35% 30%, #ffd0c8 0%, #ef7f67 38%, #ca3e33 70%, #8e251f 100%); -} -.aqua-lion-traffic .dot.yellow { - background: radial-gradient(circle at 35% 30%, #fff4b8 0%, #f2d35f 40%, #d3a22f 72%, #976f16 100%); -} -.aqua-lion-traffic .dot.green { - background: radial-gradient(circle at 35% 30%, #d2f4bc 0%, #8fd85d 42%, #5ca532 72%, #3d6c20 100%); -} -.aqua-lion-title { - font-weight: 400; - letter-spacing: 0.02em; - text-shadow: 0 1px 0 rgba(255,255,255,0.62); -} -.aqua-lion-body { - padding: 14px 14px 16px; - font-size: 12px; - background: - repeating-linear-gradient( - to bottom, - rgba(255,255,255,0.16) 0px, - rgba(255,255,255,0.16) 1px, - rgba(173,173,177,0.10) 1px, - rgba(173,173,177,0.10) 2px - ), - linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0)), - #d8d8db; -} -.aqua-lion-group { - border-radius: 9px; - border: 1px solid #bebec2; - background: - repeating-linear-gradient( - to bottom, - rgba(255,255,255,0.18) 0px, - rgba(255,255,255,0.18) 1px, - rgba(176,176,181,0.10) 1px, - rgba(176,176,181,0.10) 2px - ), - linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.10)), - #d9d9dc; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.82), - 0 1px 0 rgba(255,255,255,0.46), - inset 0 -1px 0 rgba(179,179,184,0.22); - padding: 14px 12px 12px; -} -.aqua-lion-tabs { - display: inline-flex; - margin: -28px auto 10px; - position: relative; - left: 50%; - transform: translateX(-50%); - border-radius: 7px; - border: 1px solid #8c8c90; - overflow: hidden; - box-shadow: - 0 1px 0 rgba(255,255,255,0.58), - 0 1px 2px rgba(0,0,0,0.08); -} -.aqua-lion-tabs .tab { - min-width: 56px; - height: 24px; - border: 0; - font: inherit; - font-size: 11px; - font-weight: 400; - color: #111; - text-shadow: 0 1px 0 rgba(255,255,255,0.65); - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.22) 46%, rgba(255,255,255,0) 47%), - linear-gradient(180deg, #fafafb 0%, #ececef 56%, #e4e4e7 100%); -} -.aqua-lion-tabs .tab + .tab { - border-left: 1px solid #97989d; -} -.aqua-lion-tabs .tab.active { - color: rgba(255,255,255,0.95); - text-shadow: 0 -1px 0 rgba(0,0,0,0.20); - background: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #9e9ea1 0%, #8d8d91 58%, #848489 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.22), - inset 0 -1px 0 rgba(70,70,74,0.38); -} -.aqua-lion-grid { - display: grid; - grid-template-columns: 1.9fr 0.8fr 0.8fr; - gap: 7px 10px; - align-items: center; -} -.lion-input, -.lion-select, -.lion-combo, -.lion-search, -.lion-date, -.lion-mini-btn, -.lion-stepper { - height: 26px; - border-radius: 6px; - border: 1px solid #9b9ca0; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.24) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #fbfbfb 0%, #e8e8ea 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.42); - color: #111; - font: inherit; -} -.lion-input { - width: 100%; - padding: 0 12px; - font-size: 11px; - border-radius: 0; - background: - linear-gradient(180deg, #ffffff, #f3f3f4); - box-shadow: - inset 0 1px 2px rgba(0,0,0,0.14), - 0 1px 0 rgba(255,255,255,0.4); -} -.lion-input::placeholder { color: #a0a0a5; opacity: 1; } -.lion-btn { - position: relative; - overflow: hidden; - height: 26px; - border-radius: 6px; - border: 1px solid #9a9ba0; - width: calc(100% - 8px); - justify-self: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.20) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #ffffff 0%, #f0f0f2 62%, #e8e8eb 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -1px 0 rgba(166,166,170,0.14), - 0 1px 0 rgba(255,255,255,0.42), - 0 1px 1px rgba(0,0,0,0.08); - color: #1b1b1d; - text-shadow: 0 1px 0 rgba(255,255,255,0.70); - font: inherit; - font-size: 13px; - font-weight: 500; - letter-spacing: 0; -} -.lion-btn-default { - border-color: #8aa7d8; - color: #101820; - text-shadow: - 0 1px 0 rgba(255,255,255,0.64), - 0 0 1px rgba(255,255,255,0.28); - background: - radial-gradient(160% 95% at 50% -8%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.62) 22%, rgba(255,255,255,0.16) 36%, rgba(255,255,255,0) 37%), - linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 36%), - linear-gradient(180deg, #8ab9ee 0%, #8fc2f8 26%, #a7d6ff 56%, #c6e8ff 82%, #dff3ff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 2px 0 rgba(255,255,255,0.48), - inset 0 -4px 6px rgba(96, 153, 224, 0.12), - 0 1px 0 rgba(255,255,255,0.46), - 0 0 0 1px rgba(183, 214, 247, 0.20); -} -.lion-btn-default::before { - content: ""; - position: absolute; - left: 6px; - right: 6px; - top: 1px; - height: 48%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.20) 62%, rgba(255,255,255,0)); - pointer-events: none; -} -.lion-btn-default::after { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - box-shadow: - inset 0 0 0 1px rgba(255,255,255,0.14), - inset 0 1px 0 rgba(84, 129, 201, 0.18), - inset 0 -1px 0 rgba(255,255,255,0.10); - pointer-events: none; -} -.lion-btn-bevel { - border-radius: 999px; - border-color: #909196; - background: - linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f6f7 0%, #e5e5e8 58%, #dddddf 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.90), - inset 0 -1px 0 rgba(154,154,159,0.16), - 0 1px 1px rgba(0,0,0,0.06); -} -.lion-btn-square { - border-radius: 0; - border-color: #9a9ba0; - width: 100%; - background: - linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.05) 34%, rgba(255,255,255,0) 35%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.14) 0 1px, rgba(174,174,178,0.10) 1px 2px), - linear-gradient(180deg, #ececee 0%, #d9d9db 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.86), - 0 1px 0 rgba(255,255,255,0.28); -} -.lion-select, -.lion-combo { - display: flex; - align-items: center; - padding: 0 32px 0 10px; - position: relative; - font-size: 11px; - overflow: hidden; -} -.lion-select::before, -.lion-combo::before { - content: ""; - position: absolute; - top: 0; - right: 0; - width: 28px; - height: 100%; - border-left: 1px solid rgba(92, 114, 154, 0.55); - background: - linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ddf2ff 0%, #a4d8ff 36%, #6db8ff 72%, #58a4f1 100%); -} -.lion-select::after, -.lion-combo::after { - position: absolute; - right: 7px; - top: 50%; - color: #111; - font-size: 8px; - line-height: 0.9; - text-align: center; - text-shadow: 0 1px 0 rgba(255,255,255,0.45); -} -.lion-select::after { - content: "▴\A▾"; - white-space: pre; - transform: translateY(-57%); -} -.lion-combo::after { - content: "▾"; - transform: translateY(-50%); -} -.lion-combo { - border-radius: 0; -} -.lion-search { - display: flex; - align-items: center; - border-radius: 999px; - padding: 0 12px 0 32px; - position: relative; - color: #9b9ba1; - font-size: 10px; -} -.lion-search::before { - content: ""; - position: absolute; - left: 11px; - width: 10px; - height: 10px; - border: 1.5px solid #a6a7ad; - border-radius: 50%; -} -.lion-search::after { - content: ""; - position: absolute; - left: 20px; - top: 15px; - width: 6px; - height: 1.5px; - background: #a6a7ad; - transform: rotate(45deg); - border-radius: 2px; -} -.lion-stack { - display: grid; - gap: 4px; -} -.lion-choice { - display: flex; - align-items: center; - gap: 6px; - font-size: 11px; -} -.lion-choice .radio, -.lion-choice .check { - width: 13px; - height: 13px; - border: 1px solid #9a9ba0; - background: linear-gradient(180deg, #fff, #e7e7e9); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.9), - 0 1px 0 rgba(255,255,255,0.32); -} -.lion-choice .radio { border-radius: 50%; position: relative; } -.lion-choice .radio.on::after { - content: ""; - position: absolute; - inset: 2px; - border-radius: 50%; - background: radial-gradient(circle at 30% 30%, #ddf2ff, #79c3ff 60%, #3d7fd4); -} -.lion-choice .check { border-radius: 4px; position: relative; } -.lion-choice .check.on::after { - content: "✓"; - position: absolute; - left: 1px; - top: -3px; - font-size: 13px; - color: #1f5fb0; - font-weight: 700; -} -.lion-date-row { - display: flex; - gap: 4px; - align-items: center; - min-width: 0; -} -.lion-date { - min-width: 72px; - display: flex; - align-items: center; - padding: 0 8px; - border-radius: 0; - font-size: 10px; -} -.lion-stepper { - width: 18px; - display: grid; - place-items: center; - line-height: 0.8; - font-size: 7px; - text-align: center; - border-radius: 999px; - padding-top: 1px; -} -.lion-mini-btn { - width: 18px; - display: grid; - place-items: center; - border-radius: 6px; - font-size: 8px; -} -.lion-help { - width: 20px; - height: 20px; - border-radius: 50%; - border: 1.5px solid #8b68c7; - background: - radial-gradient(circle at 30% 20%, rgba(255,255,255,0.92), rgba(255,255,255,0.28) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffffff, #ece6fb 58%, #ddd1f6); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.9), - 0 1px 0 rgba(255,255,255,0.35); - display: grid; - place-items: center; - font-weight: 700; - font-size: 11px; -} -.lion-round-knob { - width: 30px; - height: 30px; - border-radius: 50%; - border: 1px solid #9d9ea2; - background: - radial-gradient(circle at 38% 26%, rgba(255,255,255,0.96), rgba(255,255,255,0.40) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f6f7, #d7d7d9); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.96), - inset 0 -2px 4px rgba(0,0,0,0.08), - 0 1px 2px rgba(0,0,0,0.12); - justify-self: center; -} -.lion-segmented { - display: inline-grid; - grid-template-columns: repeat(3, 1fr); - border: 1px solid #98999e; - border-radius: 6px; - overflow: hidden; - background: - linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0)), - #d8d8db; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.78), - 0 1px 1px rgba(0,0,0,0.06); -} -.lion-segmented button { - border: 0; - min-width: 0; - height: 22px; - padding: 0 10px; - font-size: 11px; - font: inherit; - font-weight: 400; - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - color: #202124; - text-shadow: 0 1px 0 rgba(255,255,255,0.55); -} -.lion-segmented button + button { - border-left: 1px solid #a9aaaf; -} -.lion-segmented button.active { - background: - radial-gradient(150% 105% at 50% -4%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 30%, rgba(255,255,255,0) 31%), - linear-gradient(180deg, #d6edff 0%, #b2dcff 44%, #8fc7fb 100%); - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - inset 0 -2px 4px rgba(74, 144, 220, 0.16); -} -.lion-slider { - height: 4px; - border-radius: 999px; - background: linear-gradient(180deg, #a4a4a8, #d0d0d4); - border: 1px solid #97989d; - position: relative; - box-shadow: - inset 0 1px 1px rgba(0,0,0,0.18), - 0 1px 0 rgba(255,255,255,0.34); -} -.lion-slider-wide { - grid-column: 2 / 4; - margin-right: 2px; -} -.lion-slider .knob { - position: absolute; - left: 52%; - top: 50%; - width: 17px; - height: 17px; - transform: translate(-50%, -50%); - border-radius: 50%; - border: 1px solid #5b74c7; - background: - radial-gradient(circle at 50% 20%, rgba(255,255,255,0.98), rgba(255,255,255,0.52) 34%, rgba(255,255,255,0) 35%), - radial-gradient(circle at 48% 44%, rgba(196,236,255,0.98) 0%, rgba(124,198,255,0.95) 44%, rgba(84,145,223,0.98) 74%, rgba(72,111,196,1) 100%), - linear-gradient(180deg, #e6f6ff 0%, #9fd7ff 58%, #67afe8 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -2px 3px rgba(42, 98, 188, 0.18), - 0 1px 2px rgba(0,0,0,0.20), - 0 0 0 1px rgba(183, 228, 255, 0.18); -} -.lion-slider .knob::before { - content: ""; - position: absolute; - left: 2px; - right: 2px; - top: 1px; - height: 46%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.42) 58%, rgba(255,255,255,0)); -} -.lion-slider .knob::after { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - box-shadow: - inset 0 0 0 1px rgba(255,255,255,0.16), - inset 0 -1px 0 rgba(46, 87, 165, 0.30); - pointer-events: none; -} -.lion-slider-scale { - grid-column: 2 / 4; - position: relative; - height: 18px; - margin-right: 2px; -} -.lion-slider-scale::before { - content: ""; - position: absolute; - left: 0; - right: 0; - top: 6px; - height: 4px; - border-radius: 999px; - border: 1px solid #98999e; - background: linear-gradient(180deg, #a7a7ab, #d1d1d4); - box-shadow: - inset 0 1px 1px rgba(0,0,0,0.16), - 0 1px 0 rgba(255,255,255,0.32); -} -.lion-slider-scale::after { - content: ""; - position: absolute; - left: 4px; - right: 4px; - bottom: -1px; - height: 6px; - background: - linear-gradient(#8b8c90, #8b8c90) 0 0 / 1px 6px no-repeat, - linear-gradient(#8b8c90, #8b8c90) 50% 0 / 1px 6px no-repeat, - linear-gradient(#8b8c90, #8b8c90) 100% 0 / 1px 6px no-repeat; - opacity: 0.9; -} -.lion-slider-scale .marker { - position: absolute; - left: 47%; - top: -2px; - width: 16px; - height: 12px; - transform: translateX(-50%); - border: 1px solid #5b74c7; - border-radius: 4px 4px 9px 9px; - background: - radial-gradient(circle at 50% 16%, rgba(255,255,255,0.96), rgba(255,255,255,0.40) 34%, rgba(255,255,255,0) 35%), - linear-gradient(180deg, #e4f6ff 0%, #a8dbff 50%, #6fb4ec 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.94), - inset 0 -2px 3px rgba(35, 96, 190, 0.16), - 0 1px 2px rgba(0,0,0,0.20); -} -.lion-slider-scale .marker::before { - content: ""; - position: absolute; - left: 2px; - right: 2px; - top: 1px; - height: 42%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.28) 62%, rgba(255,255,255,0)); -} -.lion-slider-scale .marker::after { - content: ""; - position: absolute; - left: 50%; - top: 100%; - width: 0; - height: 0; - transform: translateX(-50%); - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 7px solid #6fb4ec; - filter: drop-shadow(0 1px 0 #5b74c7); -} -.lion-progress { - height: 8px; - border-radius: 3px; - border: 1px solid #a1a2a6; - background: linear-gradient(180deg, #eeeeef, #d7d7da); - box-shadow: - inset 0 1px 1px rgba(0,0,0,0.12), - 0 1px 0 rgba(255,255,255,0.32); - overflow: hidden; -} -.lion-progress-wide { - grid-column: 1 / -1; - height: 10px; -} -.lion-progress > span { - display: block; - height: 100%; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.12) 45%, rgba(255,255,255,0) 46%), - linear-gradient(180deg, #a6e3ff 0%, #73c5ff 55%, #4aaaf2 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.82), - inset 0 -1px 0 rgba(37, 111, 195, 0.18); -} -.lion-progress-striped > span { - background: - linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.12) 45%, rgba(255,255,255,0) 46%), - repeating-linear-gradient(-45deg, rgba(78, 168, 244, 0.95) 0 12px, rgba(78, 168, 244, 0.95) 12px 18px, rgba(228, 244, 255, 0.98) 18px 30px); -} - -.style-playground.theme-y2k-silver { - position: relative; - --sp-panel: linear-gradient(180deg, rgba(252, 253, 255, 0.96), rgba(227, 232, 240, 0.95) 52%, rgba(241, 243, 248, 0.96)); - --sp-line: #b6becb; - --sp-card: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(233, 237, 244, 0.96) 56%, rgba(248, 249, 252, 0.97)); - --sp-chip-bg: linear-gradient(180deg, #ffffff, #e8ecf3); - --sp-chip-line: #c1c8d4; - --sp-table-head: linear-gradient(180deg, #f4f7fb, #e5eaf2); - --sp-accent: linear-gradient(180deg, #f9fdff 0%, #b9d2ff 18%, #75a0f3 45%, #4a73d8 70%, #7a82b1 100%); - --sp-accent-line: #8090bf; - --sp-accent-soft: #e9effc; - --sp-ghost-text: #475469; - --sp-ghost-line: #b8c1cf; - --sp-ghost-bg-hover: linear-gradient(180deg, #fafcff, #edf1f6); - --sp-secondary-bg: linear-gradient(180deg, #ffffff, #eef2f7); - --sp-secondary-line: #c3ccd8; -} -.style-playground.theme-y2k-silver::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - opacity: 0.35; - background: - radial-gradient(460px 220px at 8% 10%, rgba(255,255,255,0.60), transparent 70%), - radial-gradient(540px 260px at 90% 12%, rgba(188, 205, 241, 0.38), transparent 72%), - linear-gradient(115deg, rgba(255,255,255,0.0) 36%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.0) 62%); -} -.style-playground.theme-y2k-silver > * { position: relative; z-index: 1; } -.style-playground.theme-y2k-silver .panel, -.style-playground.theme-y2k-silver .card, -.style-playground.theme-y2k-silver .table-wrap { - box-shadow: - 0 12px 22px rgba(92, 104, 124, 0.10), - inset 0 1px 0 rgba(255,255,255,0.98), - inset 0 -1px 0 rgba(175, 184, 198, 0.16); -} -.style-playground.theme-y2k-silver .btn { - border-radius: 13px; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.98), - inset 0 -1px 0 rgba(155, 166, 186, 0.18), - 0 2px 0 rgba(135, 145, 164, 0.10), - 0 6px 14px rgba(109, 120, 141, 0.08); -} -.style-playground.theme-y2k-silver .btn-primary { - color: #f9fbff; - text-shadow: 0 1px 0 rgba(53, 73, 122, 0.32); -} -.style-playground.theme-y2k-silver .segment.active, -.style-playground.theme-y2k-silver .pager .current { - background: linear-gradient(180deg, #ffffff, #e7edf7 62%, #dfe6f2); - border-color: #b8c4db; - color: #33425a; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 1px 0 rgba(140, 152, 175, 0.10); -} - -.style-playground.theme-vaporwave { - position: relative; - --sp-panel: linear-gradient(180deg, rgba(252, 248, 255, 0.86), rgba(234, 240, 255, 0.84) 46%, rgba(239, 250, 255, 0.82)); - --sp-line: #c7bddf; - --sp-card: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245, 236, 252, 0.88) 48%, rgba(234, 246, 255, 0.88)); - --sp-chip-bg: linear-gradient(180deg, #fffaff, #efe7fb); - --sp-chip-line: #d1c4ea; - --sp-table-head: linear-gradient(180deg, #fff8ff, #efe6fb 44%, #e8f4ff); - --sp-accent: linear-gradient(180deg, #ffe8fb 0%, #f2c8ff 22%, #d79eff 48%, #8fd7ff 76%, #76b7ff 100%); - --sp-accent-line: #ac84d6; - --sp-accent-soft: #f6e9ff; - --sp-ghost-text: #5b5073; - --sp-ghost-line: #cabdde; - --sp-ghost-bg-hover: linear-gradient(180deg, #fff8ff, #f4ecfb); - --sp-secondary-bg: linear-gradient(180deg, #fffaff, #f0ebf8); - --sp-secondary-line: #cfc3e1; -} -.style-playground.theme-vaporwave::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - opacity: 0.78; - background: - radial-gradient(680px 300px at 8% -4%, rgba(255, 184, 232, 0.28), transparent 70%), - radial-gradient(700px 340px at 92% 0%, rgba(129, 224, 255, 0.24), transparent 72%), - radial-gradient(640px 300px at 50% 110%, rgba(182, 151, 255, 0.18), transparent 74%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(170, 160, 214, 0.03) 1px 3px), - linear-gradient(180deg, rgba(255, 249, 255, 0.28), rgba(233, 244, 255, 0.16)), - linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 48%, rgba(255,255,255,0) 100%); -} -.style-playground.theme-vaporwave::after { - content: ""; - position: fixed; - inset: -8% -12%; - pointer-events: none; - z-index: 0; - opacity: 0.28; - background: - radial-gradient(900px 320px at 14% 10%, rgba(255, 171, 236, 0.20), transparent 72%), - radial-gradient(920px 340px at 86% 12%, rgba(123, 220, 255, 0.20), transparent 72%), - radial-gradient(680px 260px at 50% 92%, rgba(196, 155, 255, 0.14), transparent 74%), - linear-gradient(110deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 42%), - linear-gradient(180deg, rgba(255, 248, 255, 0.10), rgba(232, 245, 255, 0.04)); - background-size: - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%; - background-position: - center, - center, - center, - center, - center, - center, - center; - background-blend-mode: screen, screen, screen, soft-light, normal; - filter: saturate(1.06) contrast(1.02); -} -.style-playground.theme-vaporwave > * { position: relative; z-index: 1; } -.style-playground.theme-vaporwave { - font-family: "Trebuchet MS", "Lucida Grande", "Verdana", sans-serif; - color: #2d2740; -} -.style-playground.theme-vaporwave .panel, -.style-playground.theme-vaporwave .card, -.style-playground.theme-vaporwave .table-wrap { - border-color: #cbbde4; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.54), rgba(255,255,255,0.12) 30%, rgba(255,255,255,0) 31%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.22) 0 1px, rgba(206, 188, 236, 0.08) 1px 3px), - var(--sp-panel); - box-shadow: - 0 12px 24px rgba(96, 86, 142, 0.10), - 0 0 0 1px rgba(255,255,255,0.40), - inset 0 1px 0 rgba(255,255,255,0.90), - inset 0 -1px 0 rgba(163, 146, 212, 0.10); -} -.style-playground.theme-vaporwave .card, -.style-playground.theme-vaporwave .table-wrap { - background-image: - linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.10) 30%, rgba(255,255,255,0) 31%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.20) 0 1px, rgba(204, 191, 233, 0.08) 1px 3px), - var(--sp-card); -} -.style-playground.theme-vaporwave .panel-head h2, -.style-playground.theme-vaporwave .card h3 { - color: #342d49; - text-shadow: 0 1px 0 rgba(255,255,255,0.55); -} -.style-playground.theme-vaporwave .meta { - color: #6b6088; -} -.style-playground.theme-vaporwave .btn { - border-radius: 10px; - border-color: #baabd8; - color: #332a4a; - background-image: - radial-gradient(160% 90% at 50% -8%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.36) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff8ff 0%, #f3ebfb 58%, #e9edf8 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(184, 171, 217, 0.10), - 0 1px 0 rgba(255,255,255,0.35), - 0 4px 10px rgba(143, 132, 188, 0.08); -} -.style-playground.theme-vaporwave .btn:hover { - filter: brightness(1.02) saturate(1.04); -} -.style-playground.theme-vaporwave .btn-primary { - color: #2a1e42; - border-color: #b58dd9; - text-shadow: 0 1px 0 rgba(255,255,255,0.50); - background-image: - radial-gradient(150% 95% at 50% -10%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.46) 26%, rgba(255,255,255,0.12) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ffd7f6 0%, #f2b8ff 28%, #d9adff 52%, #a9d7ff 78%, #8ec5ff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.96), - inset 0 -1px 0 rgba(136, 115, 190, 0.10), - 0 1px 0 rgba(255,255,255,0.42), - 0 0 0 1px rgba(238, 197, 255, 0.18); -} -.style-playground.theme-vaporwave .btn-secondary, -.style-playground.theme-vaporwave .btn-ghost { - color: #5a5074; - border-color: #c8bce0; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fdfbff 0%, #f1ecf8 100%); -} -.style-playground.theme-vaporwave .btn-danger { - color: #742f50; - border-color: #d3a3bf; - background-image: - radial-gradient(150% 95% at 50% -10%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.40) 26%, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ffd8e9 0%, #f5bfd8 52%, #eed0dc 100%); -} -.style-playground.theme-vaporwave .btn:disabled, -.style-playground.theme-vaporwave .btn[aria-disabled="true"] { - color: #b8b1c7; - border-color: #ddd6e8; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.06) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #faf9fc 0%, #f0eef4 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.82); -} -.style-playground.theme-vaporwave .segmented { - border-color: #bcaed9; - border-radius: 10px; - background: - linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(191, 175, 230, 0.05) 1px 3px), - #e5dff0; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.80), - 0 1px 0 rgba(255,255,255,0.36); -} -.style-playground.theme-vaporwave .segment { - color: #43395f; - border-color: transparent; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #faf8fd 0%, #ece8f4 100%); - text-shadow: 0 1px 0 rgba(255,255,255,0.60); -} -.style-playground.theme-vaporwave .segment.active, -.style-playground.theme-vaporwave .pager .current { - color: #2f2850; - border-color: #c297ea; - background: - radial-gradient(150% 95% at 50% -10%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.34) 25%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ffd8f6 0%, #e6c3ff 42%, #b7d8ff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.84), - inset 0 -1px 2px rgba(145, 132, 211, 0.10); -} -.style-playground.theme-vaporwave .chip, -.style-playground.theme-vaporwave .status { - border-color: #cebde7; - color: #584f73; - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fffafe 0%, #f1ebf8 100%); -} -.style-playground.theme-vaporwave .chip:nth-child(1) { - border-color: #b7c8f5; - color: #36538b; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #eff4ff 0%, #dfe9ff 100%); -} -.style-playground.theme-vaporwave .chip:nth-child(2) { - border-color: #d8bee8; - color: #6c4f86; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff4ff 0%, #efe4fb 100%); -} -.style-playground.theme-vaporwave .chip:nth-child(3) { - border-color: #bde1d8; - color: #3f736a; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f1fffb 0%, #def7ef 100%); -} -.style-playground.theme-vaporwave .status-ready { - border-color: #a9d7c7; - color: #327363; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ebfff8 0%, #d2f2e8 100%); -} -.style-playground.theme-vaporwave .status-warning { - border-color: #e0c798; - color: #8c6727; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff6de 0%, #f4e4b6 100%); -} -.style-playground.theme-vaporwave .status-review { - border-color: #c6afe9; - color: #6b4da0; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f7efff 0%, #e9ddff 100%); -} -.style-playground.theme-vaporwave .status-failed { - border-color: #e0b5c2; - color: #8c4459; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff0f6 0%, #f4d7e1 100%); -} -.style-playground.theme-vaporwave .filters input, -.style-playground.theme-vaporwave .filters select { - border-color: #b8abd6; - color: #2f2844; - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fffcff 0%, #eeecf7 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.28); -} -.style-playground.theme-vaporwave .filters input::placeholder { - color: #9d93b5; -} -.style-playground.theme-vaporwave .ui-table thead th { - color: #64597d; - border-bottom-color: #d1c4e6; - background: - linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.02) 34%, rgba(255,255,255,0) 35%), - linear-gradient(180deg, #f5f0fb 0%, #e9e3f4 45%, #e4eef8 100%); -} -.style-playground.theme-vaporwave .ui-table tbody tr:hover { - background: linear-gradient(90deg, rgba(255, 244, 253, 0.92), rgba(236, 248, 255, 0.92)); -} -.style-playground.theme-vaporwave .status-filter-shell { - border-color: #d6c4ea; - background: - linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.08) 34%, rgba(255,255,255,0) 35%), - rgba(255,255,255,0.14); -} -.style-playground.theme-vaporwave .status-filter-tabs-dark .segment.active { - color: #fff8ff; - text-shadow: 0 -1px 0 rgba(0,0,0,0.18); - background: - linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #9d95b2 0%, #8b839d 52%, #7f778f 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.16), - inset 0 -1px 0 rgba(70,63,89,0.26); -} - -.style-playground.theme-vaporwave-night { - position: relative; - --sp-panel: linear-gradient(180deg, rgba(33, 26, 63, 0.84), rgba(26, 23, 56, 0.82) 45%, rgba(21, 28, 58, 0.84)); - --sp-line: #6557a0; - --sp-card: linear-gradient(180deg, rgba(43, 33, 77, 0.90), rgba(31, 28, 68, 0.88) 48%, rgba(24, 36, 68, 0.88)); - --sp-chip-bg: linear-gradient(180deg, #3c2f69, #2e2858); - --sp-chip-line: #6e60b3; - --sp-table-head: linear-gradient(180deg, #42346f, #312b5d 46%, #273a68); - --sp-accent: linear-gradient(180deg, #ff7bd8 0%, #f35cff 28%, #b86dff 58%, #5fc9ff 86%, #46a8ff 100%); - --sp-accent-line: #b86cff; - --sp-accent-soft: #3f326e; - --sp-ghost-text: #ddd8ef; - --sp-ghost-line: #6b5ea6; - --sp-ghost-bg-hover: linear-gradient(180deg, #443871, #312b5f); - --sp-secondary-bg: linear-gradient(180deg, #4a3a78, #312c5f); - --sp-secondary-line: #6f63ad; -} -.style-playground.theme-vaporwave-night::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - opacity: 0.96; - background: - radial-gradient(900px 380px at 50% -8%, rgba(255, 110, 220, 0.18), transparent 70%), - radial-gradient(700px 320px at 12% 10%, rgba(98, 217, 255, 0.14), transparent 72%), - radial-gradient(700px 320px at 88% 12%, rgba(183, 114, 255, 0.16), transparent 72%), - linear-gradient(180deg, rgba(15,12,29,0.16), rgba(11,10,24,0.26)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.035) 0 1px, rgba(110, 86, 188, 0.03) 1px 3px); -} -.style-playground.theme-vaporwave-night::after { - content: ""; - position: fixed; - inset: -10% -14%; - pointer-events: none; - z-index: 0; - opacity: 0.30; - background: - radial-gradient(980px 340px at 14% 10%, rgba(255, 124, 226, 0.18), transparent 72%), - radial-gradient(980px 360px at 86% 12%, rgba(95, 204, 255, 0.16), transparent 72%), - radial-gradient(820px 300px at 50% 95%, rgba(168, 113, 255, 0.14), transparent 74%), - linear-gradient(92deg, rgba(177, 120, 255, 0.09) 0%, rgba(255,255,255,0) 50%), - linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); - background-size: - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%, - 100% 100%; - background-position: - center, - center, - center, - center, - center, - center, - center; - background-blend-mode: screen, screen, screen, soft-light, normal; - filter: saturate(1.10) contrast(1.05); -} -.style-playground.theme-vaporwave-night > * { position: relative; z-index: 1; } -.style-playground.theme-vaporwave-night { - color: #ece8ff; - font-family: "Trebuchet MS", "Lucida Grande", "Verdana", sans-serif; -} -.style-playground.theme-vaporwave-night .panel, -.style-playground.theme-vaporwave-night .card, -.style-playground.theme-vaporwave-night .table-wrap { - border-color: #5f53a1; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 26%, rgba(255,255,255,0) 27%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(145, 116, 232, 0.03) 1px 3px), - var(--sp-panel); - box-shadow: - 0 16px 28px rgba(10, 7, 25, 0.28), - 0 0 0 1px rgba(235, 214, 255, 0.04), - inset 0 1px 0 rgba(255,255,255,0.12), - inset 0 -1px 0 rgba(91, 72, 152, 0.18); -} -.style-playground.theme-vaporwave-night .card, -.style-playground.theme-vaporwave-night .table-wrap { - background-image: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 26%, rgba(255,255,255,0) 27%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, rgba(145, 116, 232, 0.03) 1px 3px), - var(--sp-card); -} -.style-playground.theme-vaporwave-night .panel-head h2, -.style-playground.theme-vaporwave-night .card h3 { - color: #f1ecff; - text-shadow: 0 1px 0 rgba(0,0,0,0.30); -} -.style-playground.theme-vaporwave-night .meta, -.style-playground.theme-vaporwave-night .filters label { - color: #c6bde5; -} -.style-playground.theme-vaporwave-night .btn { - border-color: #7265b4; - color: #f0eaff; - background-image: - radial-gradient(150% 90% at 50% -8%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 26%, rgba(255,255,255,0) 40%), - linear-gradient(180deg, #493b79 0%, #352f67 62%, #2f2a5d 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.16), - inset 0 -1px 0 rgba(58, 45, 108, 0.24), - 0 1px 0 rgba(255,255,255,0.04), - 0 6px 14px rgba(8, 6, 22, 0.22); - text-shadow: 0 -1px 0 rgba(0,0,0,0.22); -} -.style-playground.theme-vaporwave-night .btn:hover { - filter: brightness(1.04) saturate(1.08); -} -.style-playground.theme-vaporwave-night .btn-primary { - color: #2c153f; - text-shadow: 0 1px 0 rgba(255,255,255,0.28); - border-color: #c97af8; - background-image: - radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.04) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ff9be5 0%, #ee74ff 28%, #c680ff 58%, #77d8ff 88%, #66beff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.34), - inset 0 -1px 0 rgba(109, 64, 179, 0.18), - 0 0 0 1px rgba(248, 126, 252, 0.10), - 0 0 18px rgba(164, 115, 255, 0.16); -} -.style-playground.theme-vaporwave-night .btn-secondary, -.style-playground.theme-vaporwave-night .btn-ghost { - color: #e5ddfb; - border-color: #6e61aa; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #453872 0%, #312b5e 100%); -} -.style-playground.theme-vaporwave-night .btn-danger { - color: #ffdbe9; - border-color: #b65c8f; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #8a2b56 0%, #702349 100%); -} -.style-playground.theme-vaporwave-night .btn:disabled, -.style-playground.theme-vaporwave-night .btn[aria-disabled="true"] { - color: #9b93b8; - border-color: #5d5580; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #372f52 0%, #2d2944 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); -} -.style-playground.theme-vaporwave-night .segmented { - border-color: #6e63ab; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, rgba(118, 95, 194, 0.03) 1px 3px), - #352d59; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); -} -.style-playground.theme-vaporwave-night .segment { - color: #ece6ff; - text-shadow: 0 -1px 0 rgba(0,0,0,0.20); - background-image: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #473a75 0%, #322d61 100%); -} -.style-playground.theme-vaporwave-night .segment.active, -.style-playground.theme-vaporwave-night .pager .current { - color: #240f36; - text-shadow: 0 1px 0 rgba(255,255,255,0.26); - border-color: #cf83ff; - background: - radial-gradient(150% 95% at 50% -10%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.16) 28%, rgba(255,255,255,0.04) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ff9be3 0%, #ea7aff 34%, #b98bff 66%, #7dd7ff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.30), - 0 0 12px rgba(181, 114, 255, 0.14); -} -.style-playground.theme-vaporwave-night .chip, -.style-playground.theme-vaporwave-night .status { - color: #e4ddfb; - border-color: #6e63aa; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #473a73 0%, #322d5f 100%); -} -.style-playground.theme-vaporwave-night .chip:nth-child(1) { - border-color: #6fb4ff; - color: #d9ecff; -} -.style-playground.theme-vaporwave-night .chip:nth-child(2) { - border-color: #c18cff; - color: #f1deff; -} -.style-playground.theme-vaporwave-night .chip:nth-child(3) { - border-color: #7ddbcf; - color: #d8fff7; -} -.style-playground.theme-vaporwave-night .status-ready { - border-color: #63d7b9; - color: #d4fff6; -} -.style-playground.theme-vaporwave-night .status-warning { - border-color: #f0c46f; - color: #fff0cc; -} -.style-playground.theme-vaporwave-night .status-review { - border-color: #c291ff; - color: #f1e1ff; -} -.style-playground.theme-vaporwave-night .status-failed { - border-color: #ef8eb5; - color: #ffe0ec; -} -.style-playground.theme-vaporwave-night .filters input, -.style-playground.theme-vaporwave-night .filters select { - border-color: #6d62aa; - color: #f0eaff; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #43376d 0%, #2f2a59 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); -} -.style-playground.theme-vaporwave-night .filters input::placeholder { - color: #bdb2df; -} -.style-playground.theme-vaporwave-night .ui-table thead th { - color: #d7d0f1; - border-bottom-color: #6d60aa; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 34%, rgba(255,255,255,0) 35%), - linear-gradient(180deg, #463a74 0%, #312d61 46%, #2a3964 100%); -} -.style-playground.theme-vaporwave-night .ui-table td { - color: #efeafd; - border-bottom-color: rgba(120, 103, 181, 0.28); -} -.style-playground.theme-vaporwave-night .ui-table tbody tr:hover { - background: linear-gradient(90deg, rgba(81, 57, 126, 0.36), rgba(42, 92, 126, 0.28)); -} -.style-playground.theme-vaporwave-night .status-filter-shell { - border-color: #6f62aa; - background: - linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 34%, rgba(255,255,255,0) 35%), - rgba(60, 44, 104, 0.34); -} -.style-playground.theme-vaporwave-night .status-filter-tabs-dark .segment.active { - color: #fff4fe; - text-shadow: 0 -1px 0 rgba(42, 19, 63, 0.22); - border-color: #cf83ff; - background: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #d080ff 0%, #b37bff 48%, #8bbfff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.18), - 0 0 10px rgba(197, 114, 255, 0.16); -} - -.style-playground.theme-aqua { - position: relative; - --sp-panel: linear-gradient(180deg, rgba(244, 245, 248, 0.98), rgba(224, 227, 234, 0.96) 55%, rgba(232, 235, 241, 0.97)); - --sp-line: #b7c6d8; - --sp-card: linear-gradient(180deg, rgba(252,252,253,0.99), rgba(240, 244, 249, 0.97) 44%, rgba(228, 238, 248, 0.96) 78%, rgba(221, 234, 248, 0.96)); - --sp-chip-bg: linear-gradient(180deg, #ffffff, #f0f4f8 60%, #e8eef5); - --sp-chip-line: #bcccdc; - --sp-table-head: linear-gradient(180deg, #f7fbff, #ebf3fb 45%, #e4eef8 100%); - --sp-accent: linear-gradient(180deg, #eaf9ff 0%, #cbeaff 18%, #93d0ff 42%, #5aaff5 63%, #3a8be4 82%, #3a6ed4 100%); - --sp-accent-line: #4e80c8; - --sp-accent-soft: #d8f0ff; - --sp-ghost-text: #4c6780; - --sp-ghost-line: #b8c8d8; - --sp-ghost-bg-hover: linear-gradient(180deg, #feffff, #f2f6fa 48%, #e8eff6 100%); - --sp-secondary-bg: linear-gradient(180deg, #ffffff 0%, #f4f7fa 42%, #e8eef4 100%); - --sp-secondary-line: #b9c9da; -} -.style-playground.theme-aqua::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - opacity: 0.44; - background: - radial-gradient(620px 320px at 10% 8%, rgba(255,255,255,0.84), transparent 72%), - radial-gradient(640px 320px at 86% 8%, rgba(145, 205, 255, 0.30), transparent 74%), - radial-gradient(700px 360px at 52% 112%, rgba(105, 165, 228, 0.18), transparent 74%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(162,175,194,0.03) 1px 3px), - linear-gradient(115deg, rgba(255,255,255,0.0) 34%, rgba(255,255,255,0.16) 49%, rgba(255,255,255,0.0) 64%); -} -.style-playground.theme-aqua > * { position: relative; z-index: 1; } -.style-playground.theme-aqua { - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -.style-playground.theme-aqua h1, -.style-playground.theme-aqua h2, -.style-playground.theme-aqua h3 { - letter-spacing: 0; -} -.style-playground.theme-aqua .panel-head h2 { - font-size: 19px; - font-weight: 600; - line-height: 1.15; - color: #2f3338; - text-shadow: 0 1px 0 rgba(255,255,255,0.45); -} -.style-playground.theme-aqua .card h3 { - font-size: 17px; - font-weight: 600; - line-height: 1.15; - color: #2f3338; - text-shadow: 0 1px 0 rgba(255,255,255,0.40); -} -.style-playground.theme-aqua .panel .meta { - color: #666d77; - font-size: 12px; - font-weight: 500; -} -.style-playground.theme-aqua #style-presets .meta { - font-size: 11px; - font-weight: 600; -} -.style-playground.theme-aqua .panel, -.style-playground.theme-aqua .card, -.style-playground.theme-aqua .table-wrap { - background-image: - repeating-linear-gradient( - to bottom, - rgba(255,255,255,0.26) 0px, - rgba(255,255,255,0.26) 1px, - rgba(181, 191, 204, 0.10) 1px, - rgba(181, 191, 204, 0.10) 2px - ), - var(--sp-panel); - box-shadow: - 0 12px 22px rgba(78, 107, 139, 0.12), - inset 0 1px 0 rgba(255,255,255,1), - inset 0 -1px 0 rgba(126, 156, 191, 0.16); -} -.style-playground.theme-aqua .panel { - border-color: #b9cbe0; - backdrop-filter: blur(4px); -} -.style-playground.theme-aqua .card, -.style-playground.theme-aqua .table-wrap { - border-color: #c1cfde; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.0) 29%), - repeating-linear-gradient( - to bottom, - rgba(255,255,255,0.26) 0px, - rgba(255,255,255,0.26) 1px, - rgba(188,205,223,0.10) 1px, - rgba(188,205,223,0.10) 3px - ), - var(--sp-card); -} -.style-playground.theme-aqua .btn { - position: relative; - overflow: hidden; - border-radius: 7px; - border-color: #9a9ba0; - min-height: 27px; - padding: 2px 11px; - line-height: 1; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.20) 44%, rgba(255,255,255,0) 45%), - linear-gradient(180deg, #ffffff 0%, #f0f0f2 62%, #e8e8eb 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.97), - inset 0 -1px 0 rgba(172,172,176,0.08), - 0 1px 0 rgba(255,255,255,0.42), - 0 1px 1px rgba(0,0,0,0.08); - color: #1b1b1d; - text-shadow: 0 1px 0 rgba(255,255,255,0.70); - font-size: 13px; - font-weight: 500; - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -.style-playground.theme-aqua .btn-primary { - color: #18273d; - text-shadow: - 0 1px 0 rgba(255,255,255,0.56), - 0 0 1px rgba(255,255,255,0.20); - border-color: #88a4d4; - background-image: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.54) 24%, rgba(255,255,255,0.14) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #85b8ef 0%, #93c6fb 26%, #abd8ff 55%, #c7e8ff 82%, #def2ff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.96), - inset 0 1px 0 rgba(255,255,255,0.18), - 0 1px 0 rgba(255,255,255,0.46), - 0 0 0 1px rgba(181, 213, 246, 0.16); -} -.style-playground.theme-aqua .btn-primary::before { - content: ""; - position: absolute; - left: 6px; - right: 6px; - top: 1px; - height: 36%; - border-radius: 999px; - background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.12) 60%, rgba(255,255,255,0)); - pointer-events: none; -} -.style-playground.theme-aqua .btn-primary::after { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - box-shadow: - inset 0 0 0 1px rgba(255,255,255,0.10), - inset 0 -1px 0 rgba(255,255,255,0.08); - pointer-events: none; -} -.style-playground.theme-aqua .btn-secondary, -.style-playground.theme-aqua .btn-ghost { - border-color: #a8abb0; - color: #5a6473; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(186, 188, 193, 0.06), - 0 1px 0 rgba(255,255,255,0.36), - 0 1px 1px rgba(0,0,0,0.05); -} -.style-playground.theme-aqua .btn-ghost { - color: #636b78; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fcfcfd 0%, #f1f1f3 62%, #ebebee 100%); -} -.style-playground.theme-aqua .btn-danger { - border-color: #c79e98; - color: #6f2e2a; - text-shadow: - 0 1px 0 rgba(255,255,255,0.56), - 0 0 1px rgba(255,255,255,0.16); - background-image: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.94), - inset 0 1px 0 rgba(255,255,255,0.18), - inset 0 -2px 3px rgba(214, 143, 133, 0.08), - 0 1px 0 rgba(255,255,255,0.40), - 0 0 0 1px rgba(239, 202, 196, 0.18); -} -.style-playground.theme-aqua .btn:disabled, -.style-playground.theme-aqua .btn[aria-disabled="true"] { - color: #b1b5bc; - border-color: #d0d3d8; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.04) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f6f7f9 0%, #eceef1 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.84), - inset 0 -1px 0 rgba(196, 200, 206, 0.05), - 0 1px 0 rgba(255,255,255,0.26); -} -.style-playground.theme-aqua .btn:hover { - filter: brightness(1.01); -} -.style-playground.theme-aqua .segment { - border-radius: 0; - border-color: transparent; - background-image: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - color: #202124; - font-weight: 600; - text-shadow: 0 1px 0 rgba(255,255,255,0.55); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88); -} -.style-playground.theme-aqua .segment.active, -.style-playground.theme-aqua .pager .current { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.30) 24%, rgba(255,255,255,0.06) 36%, rgba(255,255,255,0) 37%), - linear-gradient(180deg, #9ecaf4 0%, #acd3f9 30%, #c5e2fb 60%, #dceefc 100%); - border-color: #aec4de; - color: #3d648e; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.86), - inset 0 -1px 2px rgba(108, 164, 223, 0.08); - text-shadow: 0 1px 0 rgba(255,255,255,0.58); -} -.style-playground.theme-aqua #style-presets .segment.active { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.22) 24%, rgba(255,255,255,0.04) 34%, rgba(255,255,255,0) 35%), - linear-gradient(180deg, #b9d6f1 0%, #c6ddf3 36%, #d8e8f7 100%); - border-color: #bdcddd; - color: #486a8f; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.84), - inset 0 -1px 2px rgba(129, 166, 206, 0.06); -} -.style-playground.theme-aqua .chip, -.style-playground.theme-aqua .status { - border-radius: 999px; - border-color: #b7c4d1; - color: #475563; - background: - linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f8fafc 0%, #edf1f5 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.28); -} -.style-playground.theme-aqua .chip:nth-child(1) { - border-color: #9fc4eb; - color: #255c8d; - background: - linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #edf7ff 0%, #dbeeff 100%); -} -.style-playground.theme-aqua .chip:nth-child(2) { - border-color: #b6c8d9; - color: #445869; - background: - linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f4f7fb 0%, #e8edf3 100%); -} -.style-playground.theme-aqua .chip:nth-child(3) { - border-color: #b8d4bb; - color: #3e6d46; - background: - linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #eef8ef 0%, #deefe1 100%); -} -.style-playground.theme-aqua .status-ready { - border-color: #9dc7a5; - color: #356941; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #edf8ef 0%, #d8eddd 100%); -} -.style-playground.theme-aqua .status-warning { - border-color: #d8bf7f; - color: #8a6221; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff7e6 0%, #f6e6bf 100%); -} -.style-playground.theme-aqua .status-review { - border-color: #b5addc; - color: #5c528f; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f3efff 0%, #e3dbfb 100%); -} -.style-playground.theme-aqua .status-failed { - border-color: #d4aaaa; - color: #8b3d39; - background: - linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff0ee 0%, #f4d7d3 100%); -} -.style-playground.theme-aqua .segmented { - border-radius: 6px; - background: - linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(168,168,172,0.05) 1px 3px), - #d8d8db; - border-color: #98999e; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.78), - 0 1px 1px rgba(0,0,0,0.06); -} -.style-playground.theme-aqua .segmented .segment + .segment { - border-left: 1px solid #a9aaaf; -} -.style-playground.theme-aqua #style-presets .segmented { - border-radius: 6px; - border: 1px solid #9a9ba0; - background: - linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(168,168,172,0.05) 1px 3px), - #d8d8db; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.76), - 0 1px 1px rgba(0,0,0,0.05); - overflow: hidden; -} -.style-playground.theme-aqua #style-presets .segment { - min-height: 30px; - padding: 6px 12px; - border-radius: 0; - border: 0; - font-size: 11px; - font-weight: 600; - color: #2f3135; - text-shadow: 0 1px 0 rgba(255,255,255,0.55); - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88); -} -.style-playground.theme-aqua #style-presets .segment + .segment { - border-left: 1px solid #a9aaaf; -} -.style-playground.theme-aqua #style-presets .segment.active { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - inset 0 -2px 4px rgba(74, 144, 220, 0.16); -} -.style-playground.theme-aqua #style-status-filter .panel-head { - align-items: baseline; -} -.style-playground.theme-aqua #style-status-filter .panel-head .meta { - font-size: 13px; - font-weight: 500; - color: #32363c; -} -.style-playground.theme-aqua #style-status-filter .status-filter-shell { - border: 1px solid #c8c0c9; - border-radius: 14px; - padding: 12px 13px; - display: flex; - justify-content: center; - align-items: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.06) 34%, rgba(255,255,255,0) 35%), - rgba(255,255,255,0.10); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.40), - inset 0 -1px 0 rgba(190,180,192,0.08); -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs { - display: inline-flex; - flex-wrap: wrap; - gap: 0; - border: 1px solid #96979c; - border-radius: 10px; - overflow: hidden; - background: - linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0)), - #d5d5d8; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.80), - inset 0 -1px 0 rgba(167,167,171,0.14), - 0 1px 1px rgba(0,0,0,0.05); -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment { - border: 0; - min-height: 34px; - padding: 7px 18px; - border-radius: 0; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.14) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #f4f4f6 0%, #e2e2e5 100%); - color: #2f3135; - font-size: 14px; - font-weight: 600; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.60); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.82); -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment + .segment { - border-left: 1px solid #b4b5ba; -} -.style-playground.theme-aqua .status-filter-tabs .segment:first-child { - border-top-left-radius: 8px; - border-bottom-left-radius: 8px; -} -.style-playground.theme-aqua .status-filter-tabs .segment:last-child { - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment.active { - background: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #a8a8ac 0%, #95969a 54%, #8d8e93 100%); - color: rgba(255,255,255,0.93); - text-shadow: 0 -1px 0 rgba(0,0,0,0.16); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.18), - inset 1px 0 0 rgba(255,255,255,0.07), - inset -1px 0 0 rgba(72,72,76,0.14), - inset 0 -1px 0 rgba(74,74,78,0.26), - inset 0 -2px 4px rgba(74,72,76,0.10); -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment:first-child { - border-top-left-radius: 7px; - border-bottom-left-radius: 7px; -} -.style-playground.theme-aqua #style-status-filter .status-filter-tabs .segment:last-child { - border-top-right-radius: 7px; - border-bottom-right-radius: 7px; -} -.style-playground.theme-aqua .pager a, -.style-playground.theme-aqua .pager .current, -.style-playground.theme-aqua .pager .ellipsis { - border-radius: 6px; - border-color: #98999e; - color: #202124; - background: - linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #efeff1 0%, #dbdbdd 100%); - text-shadow: 0 1px 0 rgba(255,255,255,0.55); -} -.style-playground.theme-aqua .pager .current { - color: #244f83; -} -.style-playground.theme-aqua .filters input, -.style-playground.theme-aqua .filters select { - border-color: #9c9da2; - border-radius: 6px; - color: #1f2023; - background: - linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fbfbfb 0%, #e8e8ea 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - 0 1px 0 rgba(255,255,255,0.34); -} -.style-playground.theme-aqua .filters input::placeholder { - color: #9b9ba1; -} -.style-playground.theme-aqua #style-filters .btn-pair { - width: 110px; -} -.style-playground.theme-aqua #style-filters .panel-head .btn { - min-height: 27px; - padding-top: 2px; - padding-bottom: 2px; -} -.style-playground.theme-aqua #style-filters .panel-head .btn-primary { - border-color: #88a4d4; -} -.style-playground.theme-aqua #style-filters .panel-head .btn-ghost { - border-color: #a8abb0; - color: #616978; -} -.style-playground.theme-aqua .filters label, -.style-playground.theme-aqua .panel .meta { - color: #4d5560; -} -.style-playground.theme-aqua .ui-table thead th { - color: #5c6470; - font-size: 12px; - font-weight: 600; - letter-spacing: 0.03em; - border-bottom-color: #c5ced8; - background: - linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.02) 34%, rgba(255,255,255,0) 35%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.12) 0 1px, rgba(174,174,178,0.08) 1px 2px), - linear-gradient(180deg, #ececee 0%, #d9d9db 100%); -} -.style-playground.theme-aqua .ui-table .status-ready { - border-color: #8fbe98; - color: #2f6a3d; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #e4f5e8 0%, #cfe8d6 100%); -} -.style-playground.theme-aqua .ui-table .status-warning { - border-color: #d0b26b; - color: #835b16; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fdf1d2 0%, #f2dfab 100%); -} -.style-playground.theme-aqua .ui-table .status-review { - border-color: #aaa0d8; - color: #5a4e92; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #eee9ff 0%, #ddd3fb 100%); -} -.style-playground.theme-aqua .ui-table .status-failed { - border-color: #cc9b9a; - color: #853734; - background: - linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fee7e4 0%, #f0cbc6 100%); -} -.style-playground.theme-aqua .ui-table tbody tr:hover { - background: linear-gradient(90deg, rgba(245,247,250,0.96), rgba(238,242,247,0.96)); -} - -/* Aqua-first authoritative segmented controls for playground modules. */ -.style-playground.theme-aqua .status-filter-tabs { - display: inline-flex; - flex-wrap: nowrap; - gap: 0; - padding: 5px; - border: 1px solid #98999e; - border-radius: 10px; - overflow: hidden; - background: - linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0)), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(168,168,172,0.05) 1px 3px), - #d8d8db; - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.78), - 0 1px 1px rgba(0,0,0,0.06); -} -.style-playground.theme-aqua .status-filter-tabs .segment { - min-height: 34px; - padding: 8px 18px; - border: 0; - border-radius: 0; - background: - linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.14) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #f4f4f6 0%, #e2e2e5 100%); - color: #2f3135; - font-size: 14px; - font-weight: 600; - line-height: 1; - text-shadow: 0 1px 0 rgba(255,255,255,0.60); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.82); -} -.style-playground.theme-aqua .status-filter-tabs .segment + .segment { - border-left: 1px solid #b4b5ba; -} -.style-playground.theme-aqua .status-filter-tabs .segment:first-child { - border-top-left-radius: 7px; - border-bottom-left-radius: 7px; -} -.style-playground.theme-aqua .status-filter-tabs .segment:last-child { - border-top-right-radius: 7px; - border-bottom-right-radius: 7px; -} -.style-playground.theme-aqua .status-filter-tabs-blue .segment.active { - background: - radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%), - linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%); - color: #244f83; - text-shadow: 0 1px 0 rgba(255,255,255,0.52); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - inset 0 -2px 4px rgba(74, 144, 220, 0.16); -} -.style-playground.theme-aqua .status-filter-tabs-dark .segment.active { - background: - linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #a8a8ac 0%, #95969a 54%, #8d8e93 100%); - color: rgba(255,255,255,0.93); - text-shadow: 0 -1px 0 rgba(0,0,0,0.16); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.18), - inset 1px 0 0 rgba(255,255,255,0.07), - inset -1px 0 0 rgba(72,72,76,0.14), - inset 0 -1px 0 rgba(74,74,78,0.26), - inset 0 -2px 4px rgba(74,72,76,0.10); -} -.style-playground.theme-aqua #style-status-filter .status-filter-shell { - border: 1px solid #c8c0c9; - border-radius: 14px; - padding: 12px 13px; - display: flex; - justify-content: center; - align-items: center; - background: - linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.06) 34%, rgba(255,255,255,0) 35%), - rgba(255,255,255,0.10); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.40), - inset 0 -1px 0 rgba(190,180,192,0.08); -} -.style-playground.theme-aqua #style-presets .status-filter-tabs .segment { - min-height: 30px; - padding: 6px 12px; - font-size: 11px; -} -.style-playground.theme-aqua #style-presets .status-filter-tabs .segment.active { - color: #244f83; -} - -.style-playground.theme-win9x { - position: relative; - --sp-panel: #c0c0c0; - --sp-line: #7f7f7f; - --sp-card: #c0c0c0; - --sp-chip-bg: #d4d0c8; - --sp-chip-line: #808080; - --sp-table-head: #d4d0c8; - --sp-accent: #0a246a; - --sp-accent-line: #00123c; - --sp-accent-soft: #c6d6f7; - --sp-ghost-text: #000; - --sp-ghost-line: #808080; - --sp-ghost-bg-hover: #d4d0c8; - --sp-secondary-bg: #d4d0c8; - --sp-secondary-line: #808080; -} -.style-playground.theme-win9x::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; - background: - linear-gradient(rgba(255,255,255,0.05), rgba(0,0,0,0.02)), - radial-gradient(480px 220px at 20% -10%, rgba(255,255,255,0.18), transparent 65%); -} -.style-playground.theme-win9x > * { position: relative; z-index: 1; } -.style-playground.theme-win9x .panel, -.style-playground.theme-win9x .card, -.style-playground.theme-win9x .table-wrap { - border: 1px solid #808080; - border-top-color: #ffffff; - border-left-color: #ffffff; - border-right-color: #404040; - border-bottom-color: #404040; - border-radius: 0; - box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080; -} -.style-playground.theme-win9x .panel { - padding: 14px; -} -.style-playground.theme-win9x .card { - min-height: auto; -} -.style-playground.theme-win9x .btn, -.style-playground.theme-win9x .segment, -.style-playground.theme-win9x .chip, -.style-playground.theme-win9x .pager a, -.style-playground.theme-win9x .pager .current, -.style-playground.theme-win9x .pager .ellipsis { - border-radius: 0; - border: 1px solid #808080; - border-top-color: #ffffff; - border-left-color: #ffffff; - border-right-color: #404040; - border-bottom-color: #404040; - box-shadow: none; -} -.style-playground.theme-win9x .btn { - min-height: 34px; - padding: 6px 12px; - font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif; - font-size: 13px; - background: #d4d0c8; - color: #000; -} -.style-playground.theme-win9x .btn:hover { - background: #e1ddd6; - transform: none; -} -.style-playground.theme-win9x .btn:active { - border-top-color: #404040; - border-left-color: #404040; - border-right-color: #ffffff; - border-bottom-color: #ffffff; - box-shadow: inset 1px 1px 0 #808080; -} -.style-playground.theme-win9x .btn-primary { - background: #0a246a; - color: #fff; - border-top-color: #6f8fd8; - border-left-color: #6f8fd8; - border-right-color: #00123c; - border-bottom-color: #00123c; - text-shadow: none; -} -.style-playground.theme-win9x .btn-secondary, -.style-playground.theme-win9x .btn-ghost { - color: #000; -} -.style-playground.theme-win9x .btn-danger { - background: #b93a32; - color: #fff; - border-top-color: #de8b86; - border-left-color: #de8b86; - border-right-color: #5e1b18; - border-bottom-color: #5e1b18; -} -.style-playground.theme-win9x .segmented { - border-radius: 0; - border: 1px solid #808080; - border-top-color: #404040; - border-left-color: #404040; - border-right-color: #ffffff; - border-bottom-color: #ffffff; - background: #c0c0c0; - padding: 4px; -} -.style-playground.theme-win9x .segment { - padding: 6px 9px; - font-family: Tahoma, "MS Sans Serif", sans-serif; - font-size: 12px; - background: #d4d0c8; - color: #000; -} -.style-playground.theme-win9x .segment.active, -.style-playground.theme-win9x .pager .current { - background: #0a246a; - color: #fff; - border-top-color: #6f8fd8; - border-left-color: #6f8fd8; - border-right-color: #00123c; - border-bottom-color: #00123c; -} -.style-playground.theme-win9x .chip { - background: #d4d0c8; - padding: 3px 8px; - font-family: Tahoma, "MS Sans Serif", sans-serif; - font-size: 11px; -} -.style-playground.theme-win9x .status { - border-radius: 0; - padding: 2px 6px; - font-family: Tahoma, "MS Sans Serif", sans-serif; - font-size: 11px; - text-transform: none; - box-shadow: inset 1px 1px 0 rgba(255,255,255,0.35); -} -.style-playground.theme-win9x .ui-table { - min-width: 0; - font-family: Tahoma, "MS Sans Serif", sans-serif; -} -.style-playground.theme-win9x .ui-table thead th, -.style-playground.theme-win9x .ui-table td { - font-family: Tahoma, "MS Sans Serif", sans-serif; - font-size: 12px; -} -.style-playground.theme-win9x .ui-table thead th { - border-bottom: 1px solid #808080; - color: #000; -} -.style-playground.theme-win9x .ui-table td { - border-bottom-color: #a8a8a8; -} -.style-playground.theme-win9x .ui-table tbody tr:hover { - background: #dbe8ff; -} -.style-playground.theme-win9x .filters input, -.style-playground.theme-win9x .filters select { - border-radius: 0; - border: 1px solid #808080; - border-top-color: #404040; - border-left-color: #404040; - border-right-color: #ffffff; - border-bottom-color: #ffffff; - background: #fff; - font-family: Tahoma, "MS Sans Serif", sans-serif; -} -.style-playground.theme-win9x .meta { - color: #222; - font-family: Tahoma, "MS Sans Serif", sans-serif; -} - -.style-playground.theme-linen { - --sp-panel: rgba(255, 252, 245, 0.94); - --sp-line: #d8cfbf; - --sp-card: #fffdf7; - --sp-chip-bg: #f8f2e6; - --sp-chip-line: #deceb3; - --sp-table-head: #f8f1e4; - --sp-accent: #215f98; - --sp-accent-line: #174b7a; - --sp-accent-soft: #eaf2fb; - --sp-ghost-text: #2d4960; - --sp-ghost-line: #c7d2de; - --sp-ghost-bg-hover: #edf3f8; - --sp-secondary-bg: #f4f6f8; - --sp-secondary-line: #cfd7e0; -} - -.style-playground.theme-slate { - --sp-panel: rgba(241, 246, 251, 0.94); - --sp-line: #c2cfdb; - --sp-card: #f8fbff; - --sp-chip-bg: #eef4fb; - --sp-chip-line: #c7d6e5; - --sp-table-head: #edf3fa; - --sp-accent: #2c5d88; - --sp-accent-line: #244a6c; - --sp-accent-soft: #e4edf7; - --sp-ghost-text: #28455d; - --sp-ghost-line: #bfd0df; - --sp-ghost-bg-hover: #eaf2fa; - --sp-secondary-bg: #eef3f8; - --sp-secondary-line: #c7d4e0; -} - -.style-playground.theme-signal { - --sp-panel: rgba(255, 251, 245, 0.95); - --sp-line: #dfcfba; - --sp-card: #fffdf8; - --sp-chip-bg: #fff4e7; - --sp-chip-line: #e6cfb2; - --sp-table-head: #fff2e1; - --sp-accent: #c44d1b; - --sp-accent-line: #a54015; - --sp-accent-soft: #fee9df; - --sp-ghost-text: #6a402a; - --sp-ghost-line: #d9c2b2; - --sp-ghost-bg-hover: #fdefe9; - --sp-secondary-bg: #f8efe8; - --sp-secondary-line: #dccbbf; -} - -/* Global demo themes: Vapor Soft (default) + Vapor Night (auto in dark mode). */ -:root { - --vw-bg: #efedf7; - --vw-bg-2: #f4f0fb; - --vw-bg-3: #eef8ff; - --vw-line: #c9bfdf; - --vw-line-soft: #d7cee9; - --vw-text: #2f2843; - --vw-text-soft: #675d82; - --vw-panel-top: rgba(255,255,255,0.86); - --vw-panel-bottom: rgba(241,236,249,0.84); - --vw-card-top: rgba(255,255,255,0.90); - --vw-card-bottom: rgba(239,246,255,0.84); - --vw-btn-line: #bcaedb; - --vw-btn-top: #fff9ff; - --vw-btn-bottom: #efeaf7; - --vw-primary-line: #be90e1; - --vw-primary-top: #ffd9f5; - --vw-primary-mid: #e7c4ff; - --vw-primary-bottom: #a7d8ff; - --vw-table-head-top: #f6f0fb; - --vw-table-head-bottom: #e9e3f4; - --vw-status-ready-bg: #dcf6ec; - --vw-status-ready-line: #9fd7c4; - --vw-status-warning-bg: #f8e9c1; - --vw-status-warning-line: #e0c88f; - --vw-status-review-bg: #ece1ff; - --vw-status-review-line: #c4afea; - --vw-status-failed-bg: #f8dbe6; - --vw-status-failed-line: #e2b4c6; - --shell-height: 64px; - --shell-pad-y: 10px; - --shell-bg-light: - linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08)), - linear-gradient(180deg, rgba(245,240,251,0.82), rgba(232,238,250,0.78)); - --shell-bg-dark: - linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), - linear-gradient(180deg, rgba(36,30,67,0.82), rgba(28,29,60,0.78)); - --shell-border-light: #d7cee9; - --shell-border-dark: #534a8d; - --shell-kicker-light: #807691; - --shell-kicker-dark: #a79ec6; - --shell-title-light: #2f2843; - --shell-title-dark: #f0ebff; - --shell-subtitle-light: #6e6488; - --shell-subtitle-dark: #c4bbdf; - --shell-accent-light: linear-gradient(90deg, #ffd9f3 0%, #e8c9ff 44%, #b8ddff 100%); - --shell-accent-dark: linear-gradient(90deg, #ff96e3 0%, #ca88ff 44%, #79d0ff 100%); - --shell-accent-line-light: #bf92e3; - --shell-accent-line-dark: #cb84ff; - --shell-accent-shadow-light: rgba(191, 146, 227, 0.32); - --shell-accent-shadow-dark: rgba(203, 132, 255, 0.36); - --shell-bg: var(--shell-bg-light); - --shell-border: var(--shell-border-light); - --shell-kicker: var(--shell-kicker-light); - --shell-title: var(--shell-title-light); - --shell-subtitle: var(--shell-subtitle-light); - --shell-accent: var(--shell-accent-light); - --shell-accent-line: var(--shell-accent-line-light); - --shell-accent-shadow: var(--shell-accent-shadow-light); -} - -/* Header color presets for host projects. Apply on html: data-vapor-shell="preset-id". */ -html[data-vapor-shell="miami-sunset"] { - --shell-height: 66px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08)), linear-gradient(180deg, #fbe5f8 0%, #e4ecff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #3e2457 0%, #252c5c 100%); - --shell-border-light: #d8bae8; - --shell-border-dark: #7355b1; - --shell-accent-light: linear-gradient(90deg, #ff7ec7 0%, #cc8dff 52%, #6fd5ff 100%); - --shell-accent-dark: linear-gradient(90deg, #ff5bc8 0%, #b476ff 50%, #4dc8ff 100%); - --shell-accent-line-light: #be74da; - --shell-accent-line-dark: #d97aff; - --shell-accent-shadow-light: rgba(190, 116, 218, 0.35); - --shell-accent-shadow-dark: rgba(217, 122, 255, 0.40); -} -html[data-vapor-shell="neon-grid"] { - --shell-height: 64px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.08)), linear-gradient(180deg, #f5eeff 0%, #e7f5ff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #2f2352 0%, #1f3157 100%); - --shell-border-light: #cdbce7; - --shell-border-dark: #5b5bb0; - --shell-accent-light: linear-gradient(90deg, #ff4fd8 0%, #9e7dff 52%, #3cd6ff 100%); - --shell-accent-dark: linear-gradient(90deg, #ff39cc 0%, #8b68ff 50%, #2bc6ff 100%); - --shell-accent-line-light: #ab6fe7; - --shell-accent-line-dark: #c76fff; - --shell-accent-shadow-light: rgba(171, 111, 231, 0.34); - --shell-accent-shadow-dark: rgba(199, 111, 255, 0.38); -} -html[data-vapor-shell="laser-flamingo"] { - --shell-height: 70px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08)), linear-gradient(180deg, #ffe8f4 0%, #efe8ff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #472441 0%, #2d2a58 100%); - --shell-border-light: #dfb8cf; - --shell-border-dark: #8a4d8a; - --shell-accent-light: linear-gradient(90deg, #ff6fae 0%, #ff8adf 50%, #7cc8ff 100%); - --shell-accent-dark: linear-gradient(90deg, #ff4f99 0%, #eb73ff 50%, #5fb9ff 100%); - --shell-accent-line-light: #d16cae; - --shell-accent-line-dark: #e273e0; - --shell-accent-shadow-light: rgba(209, 108, 174, 0.36); - --shell-accent-shadow-dark: rgba(226, 115, 224, 0.40); -} -html[data-vapor-shell="synth-lagoon"] { - --shell-height: 62px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.08)), linear-gradient(180deg, #e8f6ff 0%, #e9ebff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #233856 0%, #212a53 100%); - --shell-border-light: #b7d5eb; - --shell-border-dark: #4f74b4; - --shell-accent-light: linear-gradient(90deg, #67d7ff 0%, #6ea9ff 50%, #b784ff 100%); - --shell-accent-dark: linear-gradient(90deg, #49c7ff 0%, #5b8fff 50%, #a86fff 100%); - --shell-accent-line-light: #6e9be8; - --shell-accent-line-dark: #8b7bff; - --shell-accent-shadow-light: rgba(110, 155, 232, 0.34); - --shell-accent-shadow-dark: rgba(139, 123, 255, 0.38); -} -html[data-vapor-shell="mall-soft"] { - --shell-height: 68px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08)), linear-gradient(180deg, #fff1f8 0%, #f4f5ff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #3f2f54 0%, #2c3459 100%); - --shell-border-light: #dfc9df; - --shell-border-dark: #73609d; - --shell-accent-light: linear-gradient(90deg, #ffb5d7 0%, #d6b0ff 50%, #9dd8ff 100%); - --shell-accent-dark: linear-gradient(90deg, #ff95ca 0%, #c397ff 50%, #81c8ff 100%); - --shell-accent-line-light: #c79ac8; - --shell-accent-line-dark: #b788ff; - --shell-accent-shadow-light: rgba(199, 154, 200, 0.33); - --shell-accent-shadow-dark: rgba(183, 136, 255, 0.38); -} -html[data-vapor-shell="hologram-sky"] { - --shell-height: 64px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.08)), linear-gradient(180deg, #edf9ff 0%, #ebf1ff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #233a4d 0%, #22325a 100%); - --shell-border-light: #bdd9e6; - --shell-border-dark: #4f78a9; - --shell-accent-light: linear-gradient(90deg, #5ce4ff 0%, #7bbfff 50%, #c28fff 100%); - --shell-accent-dark: linear-gradient(90deg, #3fd5ff 0%, #63a9ff 50%, #ab79ff 100%); - --shell-accent-line-light: #6bb8e1; - --shell-accent-line-dark: #9774ff; - --shell-accent-shadow-light: rgba(107, 184, 225, 0.34); - --shell-accent-shadow-dark: rgba(151, 116, 255, 0.38); -} -html[data-vapor-shell="peach-drive"] { - --shell-height: 72px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08)), linear-gradient(180deg, #fff0e6 0%, #ffe9f5 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #4e2f3f 0%, #383258 100%); - --shell-border-light: #e2c3b5; - --shell-border-dark: #8e5e7c; - --shell-accent-light: linear-gradient(90deg, #ff9a6a 0%, #ff78b2 52%, #8eb8ff 100%); - --shell-accent-dark: linear-gradient(90deg, #ff7e4f 0%, #f661a1 52%, #75a5ff 100%); - --shell-accent-line-light: #d67a7a; - --shell-accent-line-dark: #d56db5; - --shell-accent-shadow-light: rgba(214, 122, 122, 0.34); - --shell-accent-shadow-dark: rgba(213, 109, 181, 0.38); -} -html[data-vapor-shell="ultraviolet-plaza"] { - --shell-height: 66px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.08)), linear-gradient(180deg, #f0e8ff 0%, #e8edff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #2b1f4f 0%, #1f2756 100%); - --shell-border-light: #c9b8eb; - --shell-border-dark: #5d4eae; - --shell-accent-light: linear-gradient(90deg, #b26dff 0%, #ee68ff 52%, #6ec9ff 100%); - --shell-accent-dark: linear-gradient(90deg, #9e59ff 0%, #d853ff 52%, #55bbff 100%); - --shell-accent-line-light: #9f67e9; - --shell-accent-line-dark: #c962ff; - --shell-accent-shadow-light: rgba(159, 103, 233, 0.34); - --shell-accent-shadow-dark: rgba(201, 98, 255, 0.39); -} -html[data-vapor-shell="cyber-mint"] { - --shell-height: 62px; - --shell-bg-light: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.08)), linear-gradient(180deg, #ebfff7 0%, #ebf9ff 100%); - --shell-bg-dark: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), linear-gradient(180deg, #1f3d3d 0%, #24345a 100%); - --shell-border-light: #b9e2d9; - --shell-border-dark: #4e8a9f; - --shell-accent-light: linear-gradient(90deg, #57f0c1 0%, #6fd8ff 52%, #9d9eff 100%); - --shell-accent-dark: linear-gradient(90deg, #3adcad 0%, #58c8ff 52%, #8e8dff 100%); - --shell-accent-line-light: #62c8b2; - --shell-accent-line-dark: #7fb3ff; - --shell-accent-shadow-light: rgba(98, 200, 178, 0.34); - --shell-accent-shadow-dark: rgba(127, 179, 255, 0.38); -} - -body { - position: relative; - color: var(--vw-text); - background: - radial-gradient(900px 280px at 10% 0%, rgba(255, 185, 236, 0.14), transparent 72%), - radial-gradient(980px 300px at 90% 0%, rgba(126, 220, 255, 0.14), transparent 72%), - linear-gradient(180deg, var(--vw-bg-2) 0%, var(--vw-bg) 58%, var(--vw-bg-3) 100%); -} - -body::before, -body::after { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - z-index: 0; -} -body::before { - opacity: 0.14; - background: - radial-gradient(900px 280px at 18% 6%, rgba(255,255,255,0.10), transparent 72%), - linear-gradient(105deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%); -} -body::after { - opacity: 0.72; - clip-path: polygon(0 48%, 100% 48%, 100% 100%, 0 100%); - transform-origin: 50% 100%; - transform: perspective(1100px) rotateX(57deg) scaleX(2.15) scaleY(1.34); - background: - linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255, 192, 233, 0.22) 34%, rgba(182, 234, 255, 0.30) 100%), - radial-gradient(760px 220px at 50% 108%, rgba(222, 162, 255, 0.32), transparent 70%), - radial-gradient(640px 180px at 50% 104%, rgba(122, 221, 255, 0.26), transparent 72%), - repeating-linear-gradient(to right, rgba(255,255,255,0.44) 0 1px, rgba(255,255,255,0) 1px 52px), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.34) 0 1px, rgba(255,255,255,0) 1px 38px); - background-blend-mode: normal, screen, screen, normal, normal; -} - -.demo-topnav, -.app-shell, -.page { - position: relative; - z-index: 1; -} - -.demo-topnav { - background: - linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.20)), - linear-gradient(180deg, rgba(247,242,252,0.88), rgba(234,240,251,0.84)); - border-bottom-color: var(--vw-line-soft); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.65); -} -.demo-topnav-brand, -.demo-topnav-link { - color: #4f4764; - border-color: transparent; -} -.demo-topnav-brand { - border-color: #c9bfde; - background: - linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #faf7fe 0%, #ece8f5 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.86); -} -.demo-topnav-link:hover { - background: rgba(255,255,255,0.38); - border-color: #d1c7e6; -} -.demo-topnav-brand.active, -.demo-topnav-link.active { - color: #31264b; - border-color: #bf92e3; - background: - radial-gradient(140% 90% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.28) 28%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ffd9f3 0%, #e8c9ff 44%, #b8ddff 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.88), - 0 0 0 1px rgba(255,255,255,0.14); -} - -.app-shell { - min-height: var(--shell-height); - background: var(--shell-bg); - border-bottom-color: var(--shell-border); -} -.app-shell-kicker { color: var(--shell-kicker); } -.app-shell-title { color: var(--shell-title); } -.app-shell-subtitle { color: var(--shell-subtitle); } -.shell-pill { - border-color: #cdbfe5; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f9f4ff 0%, #ede8f6 100%); - color: #5d5573; -} -.shell-pill-env { border-color: #c9bfe1; } -.shell-pill-db { - border-color: #a9dac9; - color: #3f7364; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f1fff7 0%, #e1f3e8 100%); -} -.shell-pill-user { - border-color: #b8c7f0; - color: #436088; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f1f6ff 0%, #e4ecfb 100%); -} -.theme-switch { - display: inline-flex; - align-items: center; - gap: 0; - margin-left: 4px; - border: 1px solid #cdbfe5; - border-radius: 999px; - overflow: hidden; - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #faf7ff 0%, #ede9f6 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.84); -} -.theme-switch-btn { - appearance: none; - border: 0; - border-left: 1px solid rgba(184, 171, 217, 0.5); - background: transparent; - color: #5f5578; - cursor: pointer; - font: inherit; - font-size: 11px; - font-weight: 700; - line-height: 1; - padding: 5px 9px; -} -.theme-switch-btn:first-child { border-left: 0; } -.theme-switch-btn:hover { background: rgba(255,255,255,0.22); } -.theme-switch-btn.active { - color: #2f2048; - background: - radial-gradient(150% 90% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.26) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffd9f3 0%, #e8c9ff 46%, #b9ddff 100%); -} - -.masthead, -.panel { - border-color: var(--vw-line); - background: - linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.04) 30%, rgba(255,255,255,0) 31%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.18) 0 1px, rgba(199, 185, 231, 0.06) 1px 3px), - linear-gradient(180deg, var(--vw-panel-top) 0%, var(--vw-panel-bottom) 100%); - box-shadow: - 0 8px 16px rgba(116, 102, 165, 0.07), - inset 0 1px 0 rgba(255,255,255,0.80); -} -.card, -.timeline-card, -.table-wrap, -.selected-summary { - border-color: #d2c7e5; - background: - linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.06) 28%, rgba(255,255,255,0) 29%), - linear-gradient(180deg, var(--vw-card-top) 0%, var(--vw-card-bottom) 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.82); -} - -.label { color: #817694; } -h1, h2, h3 { color: #2f2843; } -.lead, .meta, .panel .meta, .filters label { color: var(--vw-text-soft); } - -.chip, -.pill, -.chip-link { - border-color: #d1c3e8; - color: #5b5074; - background: - linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fffaff 0%, #efeaf8 100%); -} -.chip-link:hover, -.pill:hover { - filter: brightness(1.02); -} - -.btn { - border-color: var(--vw-btn-line); - color: #372e4c; - background: - radial-gradient(150% 90% at 50% -8%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.26) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, var(--vw-btn-top) 0%, var(--vw-btn-bottom) 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.90), - inset 0 -1px 0 rgba(188, 176, 216, 0.08), - 0 1px 0 rgba(255,255,255,0.30); - text-shadow: 0 1px 0 rgba(255,255,255,0.60); -} -.btn-primary { - border-color: var(--vw-primary-line); - color: #33204c; - background: - radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.36) 28%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, var(--vw-primary-top) 0%, var(--vw-primary-mid) 48%, var(--vw-primary-bottom) 100%); - box-shadow: - inset 0 1px 0 rgba(255,255,255,0.92), - inset 0 -1px 0 rgba(149, 126, 207, 0.12), - 0 1px 0 rgba(255,255,255,0.36), - 0 0 0 1px rgba(255,255,255,0.10); -} -.btn-secondary, -.btn-ghost { - color: #5b5074; -} -.btn-danger, -.tool-btn-danger { - color: #7a3555; - border-color: #d3abc0; - background: - radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.34) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffdce9 0%, #f4c3d8 100%); -} -.btn:hover { filter: brightness(1.02) saturate(1.03); } -.btn:disabled, -.btn[aria-disabled="true"] { - color: #b8b0c8; - border-color: #ddd6e8; -} - -.segmented, -.status-filter-tabs { - border-color: #c1b4db; - background: - linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0)), - #e7e0f2; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.74); -} -.segment { - color: #4a4063; -} -.segment.active, -.pager .current { - border-color: #c391e5; - color: #33224d; - background: - radial-gradient(150% 95% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.28) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffd8f6 0%, #e6c5ff 44%, #b6dcff 100%); -} - -.filters input, -.filters select, -.forms-grid input, -.forms-grid select, -.modal-grid input, -.modal-grid select { - border-color: #bbaed7; - background: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fffcff 0%, #efedf7 100%); - color: #2f2843; -} -.filters input::placeholder, -.forms-grid input::placeholder { color: #a196bc; } - -.ui-table { - border-color: #cfc4e4; - background: rgba(255,255,255,0.58); -} -.ui-table thead th { - color: #665a7f; - border-bottom-color: #d1c5e6; - background: - linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 34%, rgba(255,255,255,0) 35%), - linear-gradient(180deg, var(--vw-table-head-top) 0%, var(--vw-table-head-bottom) 100%); -} -.ui-table th, -.ui-table td { - border-bottom-color: rgba(197, 186, 227, 0.34); -} -.ui-table tbody tr:hover { - background: linear-gradient(90deg, rgba(255, 246, 253, 0.80), rgba(236, 247, 255, 0.80)); -} - -.status-ready { - border-color: var(--vw-status-ready-line); - background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #f0fff8 0%, var(--vw-status-ready-bg) 100%); - color: #327362; -} -.status-warning { - border-color: var(--vw-status-warning-line); - background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #fff8e3 0%, var(--vw-status-warning-bg) 100%); - color: #8d6825; -} -.status-review { - border-color: var(--vw-status-review-line); - background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #f7f1ff 0%, var(--vw-status-review-bg) 100%); - color: #6a4fa2; -} -.status-failed { - border-color: var(--vw-status-failed-line); - background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #fff3f7 0%, var(--vw-status-failed-bg) 100%); - color: #8a435a; -} - -.demo-modal { - border-color: #a895ca; - background: - linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03) 20%, rgba(255,255,255,0) 21%), - linear-gradient(180deg, rgba(247,242,252,0.94), rgba(236,241,252,0.92)); -} -.demo-modal-titlebar { - border-bottom-color: #b8acd5; - background: - linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0.04) 43%), - linear-gradient(180deg, #efe8f9 0%, #dde4f5 100%); -} -.demo-modal-title { color: #31284b; } - -@media (prefers-color-scheme: dark) { - :root { - --vw-bg: #171329; - --vw-bg-2: #1e1736; - --vw-bg-3: #151a31; - --vw-line: #5e52a0; - --vw-line-soft: #534a8d; - --vw-text: #ece8ff; - --vw-text-soft: #c6bde5; - --vw-panel-top: rgba(38, 31, 70, 0.84); - --vw-panel-bottom: rgba(26, 27, 58, 0.82); - --vw-card-top: rgba(45, 35, 79, 0.86); - --vw-card-bottom: rgba(28, 35, 68, 0.82); - --vw-btn-line: #6e62ab; - --vw-btn-top: #4a3a78; - --vw-btn-bottom: #302b5c; - --vw-primary-line: #c57cff; - --vw-primary-top: #ff92e1; - --vw-primary-mid: #cb88ff; - --vw-primary-bottom: #73cdff; - --vw-table-head-top: #473a74; - --vw-table-head-bottom: #2f2c5f; - --shell-bg: var(--shell-bg-dark); - --shell-border: var(--shell-border-dark); - --shell-kicker: var(--shell-kicker-dark); - --shell-title: var(--shell-title-dark); - --shell-subtitle: var(--shell-subtitle-dark); - --shell-accent: var(--shell-accent-dark); - --shell-accent-line: var(--shell-accent-line-dark); - --shell-accent-shadow: var(--shell-accent-shadow-dark); - } - body { - background: - radial-gradient(980px 340px at 12% 2%, rgba(255, 116, 219, 0.18), transparent 72%), - radial-gradient(980px 360px at 88% 4%, rgba(101, 211, 255, 0.16), transparent 72%), - linear-gradient(180deg, var(--vw-bg-2) 0%, var(--vw-bg) 55%, var(--vw-bg-3) 100%); - } - body::before { - opacity: 0.18; - background: - repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, rgba(120, 97, 196, 0.03) 1px 3px), - linear-gradient(105deg, rgba(207, 135, 255, 0.06) 0%, rgba(255,255,255,0) 45%); - } - body::after { - opacity: 0.84; - clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); - transform-origin: 50% 100%; - transform: perspective(1100px) rotateX(57deg) scaleX(2.2) scaleY(1.4); - background: - linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255, 84, 203, 0.10) 26%, rgba(78, 188, 255, 0.12) 100%), - radial-gradient(860px 220px at 50% 106%, rgba(255, 84, 203, 0.22), transparent 70%), - radial-gradient(760px 200px at 50% 108%, rgba(91, 211, 255, 0.22), transparent 72%), - repeating-linear-gradient(to right, rgba(229, 183, 255, 0.34) 0 1px, rgba(255,255,255,0) 1px 52px), - repeating-linear-gradient(to bottom, rgba(151, 230, 255, 0.24) 0 1px, rgba(255,255,255,0) 1px 38px); - background-blend-mode: normal, screen, screen, normal, normal; - } - .demo-topnav { - background: - linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)), - linear-gradient(180deg, rgba(36,30,66,0.86), rgba(28,27,57,0.84)); - border-bottom-color: var(--vw-line-soft); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); - } - .demo-topnav-brand, - .demo-topnav-link { - color: #ddd7f3; - text-shadow: 0 1px 0 rgba(0,0,0,0.18); - } - .demo-topnav-brand { - border-color: #6b5ea7; - background: linear-gradient(180deg, #433873 0%, #302c60 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); - } - .demo-topnav-link:hover { - background: rgba(255,255,255,0.04); - border-color: #5e529a; - } - .demo-topnav-brand.active, - .demo-topnav-link.active { - color: #2a133f; - border-color: #cb84ff; - background: - radial-gradient(150% 95% at 50% -10%, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.12) 28%, rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ff96e3 0%, #ca88ff 44%, #79d0ff 100%); - } - .app-shell { - background: var(--shell-bg); - border-bottom-color: var(--shell-border); - } - .app-shell-kicker { color: var(--shell-kicker); } - .app-shell-title { color: var(--shell-title); } - .app-shell-subtitle { color: var(--shell-subtitle); } - .lead, .meta, .panel .meta, .filters label, .text-link { - color: #d6ceef; - } - .text-link:hover { color: #f1ebff; } - .shell-pill { - border-color: #6b60a8; - color: #ddd8f3; - background: - linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #443873 0%, #302b5f 100%); - } - .shell-pill-db { border-color: #62cfb0; color: #d2fff1; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #24473f 0%, #1f3a35 100%); } - .shell-pill-user { border-color: #78b8ff; color: #d9ecff; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #243f61 0%, #1f3553 100%); } - .theme-switch { - border-color: #6d61aa; - background: - linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #443873 0%, #302b5f 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); - } - .theme-switch-btn { - color: #ddd7f3; - border-left-color: rgba(114, 101, 181, 0.65); - } - .theme-switch-btn:hover { background: rgba(255,255,255,0.05); } - .theme-switch-btn.active { - color: #2a153f; - background: - radial-gradient(150% 90% at 50% -10%, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.12) 28%, rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ff96e3 0%, #ca88ff 44%, #79d0ff 100%); - } - .masthead, .panel { - box-shadow: 0 10px 22px rgba(10,7,25,0.18), inset 0 1px 0 rgba(255,255,255,0.10); - } - .card, .timeline-card, .table-wrap, .selected-summary { - box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); - } - .label { color: #ac9fd0; } - h1, h2, h3 { color: var(--vw-text); } - .lead, .meta, .panel .meta, .filters label { color: var(--vw-text-soft); } - .chip, .pill, .chip-link { - border-color: #6d61aa; - color: #ded8f5; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #463973 0%, #322d60 100%); - } - .btn { - color: #ece7ff; - text-shadow: 0 -1px 0 rgba(0,0,0,0.20); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(59,47,108,0.24); - } - .btn-primary { color: #2a153f; text-shadow: 0 1px 0 rgba(255,255,255,0.28); } - .btn-danger, .tool-btn-danger { color: #ffdced; border-color: #b86191; background: radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 28%, rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #8a2c58 0%, #6f2249 100%); } - .segmented, .status-filter-tabs { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)), #38305f; border-color: #6a5fa6; } - .segment { color: #e7e1fb; text-shadow: 0 -1px 0 rgba(0,0,0,0.20); } - .segment.active, .pager .current { color: #2a153f; text-shadow: 0 1px 0 rgba(255,255,255,0.26); } - .filters input, .filters select, .forms-grid input, .forms-grid select, .modal-grid input, .modal-grid select { - color: #eee9ff; - background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #44376d 0%, #302b5a 100%); - } - .filters input::placeholder, .forms-grid input::placeholder { color: #b8add8; } - .ui-table { background: rgba(38, 31, 68, 0.34); border-color: #6d61aa; } - .ui-table thead th { color: #d8d0f1; border-bottom-color: #6d61aa; } - .ui-table th, .ui-table td { border-bottom-color: rgba(120, 103, 181, 0.26); color: #efeaff; } - .ui-table tbody tr:hover { background: linear-gradient(90deg, rgba(82,57,128,0.26), rgba(40,90,126,0.22)); } - .timeline-card p, - .card p, - .selected-summary p, - .notice { - color: #ddd5f5; - } - .status-ready { color: #d5fff4; border-color: #65d8bc; background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #264f46 0%, #22423d 100%); } - .status-warning { color: #fff0cd; border-color: #efc46f; background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #5b4921 0%, #4d3f1d 100%); } - .status-review { color: #f1e3ff; border-color: #c392ff; background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #48336f 0%, #3d2b60 100%); } - .status-failed { color: #ffe0ec; border-color: #ef90b9; background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 43%), linear-gradient(180deg, #5c2940 0%, #4d2236 100%); } - .demo-modal { border-color: #6b5ea7; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 20%, rgba(255,255,255,0) 21%), linear-gradient(180deg, rgba(42,34,76,0.94), rgba(26,29,58,0.92)); } - .demo-modal-titlebar { border-bottom-color: #6b5ea7; background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0.01) 43%), linear-gradient(180deg, #4b3c79 0%, #343064 100%); } - .demo-modal-title { color: #f0ebff; text-shadow: 0 -1px 0 rgba(0,0,0,0.22); } -} - -html[data-theme="dark"] { - color-scheme: dark; - --vw-bg: #171329; - --vw-bg-2: #1e1736; - --vw-bg-3: #151a31; - --vw-line: #5e52a0; - --vw-line-soft: #534a8d; - --vw-text: #ece8ff; - --vw-text-soft: #c6bde5; - --vw-panel-top: rgba(38, 31, 70, 0.84); - --vw-panel-bottom: rgba(26, 27, 58, 0.82); - --vw-card-top: rgba(45, 35, 79, 0.86); - --vw-card-bottom: rgba(28, 35, 68, 0.82); - --vw-btn-line: #6e62ab; - --vw-btn-top: #4a3a78; - --vw-btn-bottom: #302b5c; - --vw-primary-line: #c57cff; - --vw-primary-top: #ff92e1; - --vw-primary-mid: #cb88ff; - --vw-primary-bottom: #73cdff; - --vw-table-head-top: #473a74; - --vw-table-head-bottom: #2f2c5f; -} -html[data-theme="light"] { - color-scheme: light; - --vw-bg: #efedf7; - --vw-bg-2: #f4f0fb; - --vw-bg-3: #eef8ff; - --vw-line: #c9bfdf; - --vw-line-soft: #d7cee9; - --vw-text: #2f2843; - --vw-text-soft: #675d82; - --vw-panel-top: rgba(255,255,255,0.86); - --vw-panel-bottom: rgba(241,236,249,0.84); - --vw-card-top: rgba(255,255,255,0.90); - --vw-card-bottom: rgba(239,246,255,0.84); - --vw-btn-line: #bcaedb; - --vw-btn-top: #fff9ff; - --vw-btn-bottom: #efeaf7; - --vw-primary-line: #be90e1; - --vw-primary-top: #ffd9f5; - --vw-primary-mid: #e7c4ff; - --vw-primary-bottom: #a7d8ff; - --vw-table-head-top: #f6f0fb; - --vw-table-head-bottom: #e9e3f4; -} - -html[data-theme="dark"] body { - background: - radial-gradient(980px 340px at 12% 2%, rgba(255, 116, 219, 0.18), transparent 72%), - radial-gradient(980px 360px at 88% 4%, rgba(101, 211, 255, 0.16), transparent 72%), - linear-gradient(180deg, #1e1736 0%, #171329 55%, #151a31 100%); -} -html[data-theme="dark"] body::before { - opacity: 0.10; - background: - radial-gradient(920px 300px at 18% 8%, rgba(255,255,255,0.06), transparent 72%), - linear-gradient(105deg, rgba(207, 135, 255, 0.05) 0%, rgba(255,255,255,0) 45%); -} -html[data-theme="dark"] body::after { - opacity: 0.84; - clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); - transform-origin: 50% 100%; - transform: perspective(1100px) rotateX(57deg) scaleX(2.2) scaleY(1.4); - background: - linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255, 84, 203, 0.10) 26%, rgba(78, 188, 255, 0.12) 100%), - radial-gradient(860px 220px at 50% 106%, rgba(255, 84, 203, 0.22), transparent 70%), - radial-gradient(760px 200px at 50% 108%, rgba(91, 211, 255, 0.22), transparent 72%), - repeating-linear-gradient(to right, rgba(229, 183, 255, 0.34) 0 1px, rgba(255,255,255,0) 1px 52px), - repeating-linear-gradient(to bottom, rgba(151, 230, 255, 0.24) 0 1px, rgba(255,255,255,0) 1px 38px); - background-blend-mode: normal, screen, screen, normal, normal; -} -html[data-theme="dark"] .demo-topnav { - background: - linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)), - linear-gradient(180deg, rgba(36,30,66,0.86), rgba(28,27,57,0.84)); - border-bottom-color: #534a8d; -} -html[data-theme="dark"] { - --shell-bg: var(--shell-bg-dark); - --shell-border: var(--shell-border-dark); - --shell-kicker: var(--shell-kicker-dark); - --shell-title: var(--shell-title-dark); - --shell-subtitle: var(--shell-subtitle-dark); - --shell-accent: var(--shell-accent-dark); - --shell-accent-line: var(--shell-accent-line-dark); - --shell-accent-shadow: var(--shell-accent-shadow-dark); -} -html[data-theme="dark"] .demo-topnav-brand, -html[data-theme="dark"] .demo-topnav-link, -html[data-theme="dark"] h1, -html[data-theme="dark"] h2, -html[data-theme="dark"] h3, -html[data-theme="dark"] .masthead h1, -html[data-theme="dark"] .panel-head h2, -html[data-theme="dark"] .panel-subsection .panel-head h2, -html[data-theme="dark"] .masthead .label, -html[data-theme="dark"] .app-shell-title, -html[data-theme="dark"] .ui-table th, -html[data-theme="dark"] .ui-table td { - color: var(--shell-title); -} -html[data-theme="dark"] .demo-topnav-brand, -html[data-theme="dark"] .demo-topnav-link { - text-shadow: 0 1px 0 rgba(0,0,0,0.18); -} -html[data-theme="dark"] .app-shell, -html[data-theme="dark"] .masthead, -html[data-theme="dark"] .panel, -html[data-theme="dark"] .card, -html[data-theme="dark"] .timeline-card, -html[data-theme="dark"] .table-wrap, -html[data-theme="dark"] .selected-summary, -html[data-theme="dark"] .demo-modal { - color: #ece8ff; -} -html[data-theme="dark"] .masthead, -html[data-theme="dark"] .panel { - border-color: var(--vw-line); - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 30%, rgba(255,255,255,0) 31%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(145, 116, 232, 0.03) 1px 3px), - linear-gradient(180deg, var(--vw-panel-top) 0%, var(--vw-panel-bottom) 100%); -} -html[data-theme="dark"] .card, -html[data-theme="dark"] .timeline-card, -html[data-theme="dark"] .table-wrap, -html[data-theme="dark"] .selected-summary { - border-color: #6d61aa; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 28%, rgba(255,255,255,0) 29%), - linear-gradient(180deg, var(--vw-card-top) 0%, var(--vw-card-bottom) 100%); -} -html[data-theme="dark"] .app-shell { - background: var(--shell-bg); - border-bottom-color: var(--shell-border); -} -html[data-theme="dark"] .app-shell-kicker { color: var(--shell-kicker); } -html[data-theme="dark"] .app-shell-subtitle { color: var(--shell-subtitle); } -html[data-theme="dark"] .lead, -html[data-theme="dark"] .meta, -html[data-theme="dark"] .panel .meta, -html[data-theme="dark"] .filters label, -html[data-theme="dark"] .text-link, -html[data-theme="dark"] .card p, -html[data-theme="dark"] .timeline-card p, -html[data-theme="dark"] .selected-summary p, -html[data-theme="dark"] .notice { - color: #d8d0f0; -} -html[data-theme="dark"] .text-link:hover { color: #f1ebff; } - -html[data-theme="light"] .demo-topnav-brand, -html[data-theme="light"] .demo-topnav-link, -html[data-theme="light"] h1, -html[data-theme="light"] h2, -html[data-theme="light"] h3, -html[data-theme="light"] .masthead h1, -html[data-theme="light"] .panel-head h2, -html[data-theme="light"] .masthead .label, -html[data-theme="light"] .app-shell-title, -html[data-theme="light"] .ui-table th, -html[data-theme="light"] .ui-table td { - color: var(--shell-title); - text-shadow: none; -} -html[data-theme="light"] { - --shell-bg: var(--shell-bg-light); - --shell-border: var(--shell-border-light); - --shell-kicker: var(--shell-kicker-light); - --shell-title: var(--shell-title-light); - --shell-subtitle: var(--shell-subtitle-light); - --shell-accent: var(--shell-accent-light); - --shell-accent-line: var(--shell-accent-line-light); - --shell-accent-shadow: var(--shell-accent-shadow-light); -} -html[data-theme="light"] body { - background: - radial-gradient(900px 280px at 10% 0%, rgba(255, 185, 236, 0.14), transparent 72%), - radial-gradient(980px 300px at 90% 0%, rgba(126, 220, 255, 0.14), transparent 72%), - linear-gradient(180deg, #f4f0fb 0%, #efedf7 58%, #eef8ff 100%); -} -html[data-theme="light"] body::before { - opacity: 0.14; - background: - radial-gradient(900px 280px at 18% 6%, rgba(255,255,255,0.10), transparent 72%), - linear-gradient(105deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%); -} -html[data-theme="light"] body::after { - opacity: 0.72; - clip-path: polygon(0 48%, 100% 48%, 100% 100%, 0 100%); - transform-origin: 50% 100%; - transform: perspective(1100px) rotateX(57deg) scaleX(2.15) scaleY(1.34); - background: - linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255, 192, 233, 0.22) 34%, rgba(182, 234, 255, 0.30) 100%), - radial-gradient(760px 220px at 50% 108%, rgba(222, 162, 255, 0.32), transparent 70%), - radial-gradient(640px 180px at 50% 104%, rgba(122, 221, 255, 0.26), transparent 72%), - repeating-linear-gradient(to right, rgba(255,255,255,0.44) 0 1px, rgba(255,255,255,0) 1px 52px), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.34) 0 1px, rgba(255,255,255,0) 1px 38px); - background-blend-mode: normal, screen, screen, normal, normal; -} -html[data-theme="light"] .demo-topnav { - background: - linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.20)), - linear-gradient(180deg, rgba(247,242,252,0.88), rgba(234,240,251,0.84)); - border-bottom-color: #d7cee9; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.65); -} -html[data-theme="light"] .demo-topnav-brand { - color: #4f4764; - border-color: #c9bfde; - background: - linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #faf7fe 0%, #ece8f5 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.86); -} -html[data-theme="light"] .demo-topnav-link { - color: #4f4764; - border-color: transparent; -} -html[data-theme="light"] .demo-topnav-link:hover { - background: rgba(255,255,255,0.38); - border-color: #d1c7e6; -} -html[data-theme="light"] .demo-topnav-brand.active, -html[data-theme="light"] .demo-topnav-link.active { - color: #31264b; - border-color: #bf92e3; - background: - radial-gradient(140% 90% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.28) 28%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 41%), - linear-gradient(180deg, #ffd9f3 0%, #e8c9ff 44%, #b8ddff 100%); -} -html[data-theme="light"] .app-shell { - background: var(--shell-bg); - border-bottom-color: var(--shell-border); -} -html[data-theme="light"] .app-shell-kicker { color: var(--shell-kicker); } -html[data-theme="light"] .app-shell-title { color: var(--shell-title); } -html[data-theme="light"] .app-shell-subtitle { color: var(--shell-subtitle); } -html[data-theme="light"] .shell-pill { - border-color: #cdbfe5; - color: #5d5573; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f9f4ff 0%, #ede8f6 100%); -} -html[data-theme="light"] .shell-pill-db { - border-color: #a9dac9; - color: #3f7364; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f1fff7 0%, #e1f3e8 100%); -} -html[data-theme="light"] .shell-pill-user { - border-color: #b8c7f0; - color: #436088; - background: - linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #f1f6ff 0%, #e4ecfb 100%); -} -html[data-theme="light"] .theme-switch { - border-color: #cdbfe5; - background: - linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #faf7ff 0%, #ede9f6 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.84); -} -html[data-theme="light"] .theme-switch-btn { - color: #5f5578; - border-left-color: rgba(184,171,217,0.5); -} -html[data-theme="light"] .theme-switch-btn:hover { background: rgba(255,255,255,0.22); } -html[data-theme="light"] .theme-switch-btn.active { - color: #2f2048; - background: - radial-gradient(150% 90% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.26) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffd9f3 0%, #e8c9ff 46%, #b9ddff 100%); -} -html[data-theme="light"] .masthead, -html[data-theme="light"] .panel { - border-color: #c9bfdf; - background: - linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.04) 30%, rgba(255,255,255,0) 31%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.18) 0 1px, rgba(199, 185, 231, 0.06) 1px 3px), - linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(241,236,249,0.84) 100%); - box-shadow: 0 8px 16px rgba(116, 102, 165, 0.07), inset 0 1px 0 rgba(255,255,255,0.80); -} -html[data-theme="light"] .card, -html[data-theme="light"] .timeline-card, -html[data-theme="light"] .table-wrap, -html[data-theme="light"] .selected-summary { - border-color: #d2c7e5; - background: - linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.06) 28%, rgba(255,255,255,0) 29%), - linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(239,246,255,0.84) 100%); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.82); -} -html[data-theme="light"] .chip, -html[data-theme="light"] .pill, -html[data-theme="light"] .chip-link { - border-color: #d1c3e8; - color: #5b5074; - background: - linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fffaff 0%, #efeaf8 100%); -} -html[data-theme="light"] .btn { - border-color: #bcaedb; - color: #372e4c; - text-shadow: 0 1px 0 rgba(255,255,255,0.60); - background: - radial-gradient(150% 90% at 50% -8%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.26) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fff9ff 0%, #efeaf7 100%); -} -html[data-theme="light"] .btn-primary { - border-color: #be90e1; - color: #33204c; - text-shadow: 0 1px 0 rgba(255,255,255,0.36); - background: - radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.36) 28%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffd9f5 0%, #e7c4ff 48%, #a7d8ff 100%); -} -html[data-theme="light"] .btn-danger, -html[data-theme="light"] .tool-btn-danger { - color: #7a3555; - border-color: #d3abc0; - background: - radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.34) 28%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #ffdce9 0%, #f4c3d8 100%); -} -html[data-theme="light"] .segmented, -html[data-theme="light"] .status-filter-tabs { - border-color: #c1b4db; - background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0)), #e7e0f2; -} -html[data-theme="light"] .segment { - color: #4a4063; - text-shadow: 0 1px 0 rgba(255,255,255,0.50); -} -html[data-theme="light"] .segment.active, -html[data-theme="light"] .pager .current { - color: #33224d; - text-shadow: 0 1px 0 rgba(255,255,255,0.36); - border-color: #c391e5; -} -html[data-theme="light"] .filters input, -html[data-theme="light"] .filters select, -html[data-theme="light"] .forms-grid input, -html[data-theme="light"] .forms-grid select, -html[data-theme="light"] .modal-grid input, -html[data-theme="light"] .modal-grid select { - color: #2f2843; - background: - linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #fffcff 0%, #efedf7 100%); - border-color: #bbaed7; -} -html[data-theme="light"] .filters input::placeholder, -html[data-theme="light"] .forms-grid input::placeholder { color: #a196bc; } -html[data-theme="light"] .ui-table { - background: rgba(255,255,255,0.58); - border-color: #cfc4e4; -} -html[data-theme="light"] .ui-table thead th { - color: #665a7f; - border-bottom-color: #d1c5e6; - background: - linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 34%, rgba(255,255,255,0) 35%), - linear-gradient(180deg, #f6f0fb 0%, #e9e3f4 100%); -} -html[data-theme="light"] .ui-table th, -html[data-theme="light"] .ui-table td { - color: #2f2843; - border-bottom-color: rgba(197,186,227,0.34); -} -html[data-theme="light"] .ui-table tbody tr:hover { - background: linear-gradient(90deg, rgba(255,246,253,0.80), rgba(236,247,255,0.80)); -} -html[data-theme="light"] .demo-modal { - border-color: #a895ca; - background: - linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03) 20%, rgba(255,255,255,0) 21%), - linear-gradient(180deg, rgba(247,242,252,0.94), rgba(236,241,252,0.92)); -} -html[data-theme="light"] .demo-modal-titlebar { - border-bottom-color: #b8acd5; - background: - linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.14) 42%, rgba(255,255,255,0.04) 43%), - linear-gradient(180deg, #efe8f9 0%, #dde4f5 100%); -} -html[data-theme="light"] .demo-modal-title { color: #31284b; text-shadow: none; } -html[data-theme="light"] .lead, -html[data-theme="light"] .meta, -html[data-theme="light"] .panel .meta, -html[data-theme="light"] .filters label, -html[data-theme="light"] .text-link, -html[data-theme="light"] .card p, -html[data-theme="light"] .timeline-card p, -html[data-theme="light"] .selected-summary p, -html[data-theme="light"] .notice { - color: #675d82; -} - -@keyframes spin { - to { transform: rotate(360deg); } -} -@media (max-width: 700px) { - .aqua-lion-grid { grid-template-columns: 1fr; } - .aqua-lion-tabs { margin-top: -28px; } - .lion-slider-wide, - .lion-slider-scale, - .lion-progress-wide { grid-column: auto; margin-right: 0; } - .app-shell-inner { flex-direction: column; align-items: stretch; } - .app-shell-statuses { justify-content: flex-start; } - h1 { font-size: 28px; } - .panel-head { align-items: flex-start; flex-direction: column; } - .filters { grid-template-columns: 1fr; } - .forms-grid { grid-template-columns: 1fr; } - .filter-actions { justify-content: flex-start; } - .modal-grid { grid-template-columns: 1fr; } - .timeline-summary-grid { grid-template-columns: 1fr; } - .timeline-drill-grid { grid-template-columns: 1fr; } - .timeline-card-actions { align-items: flex-start; flex-direction: column; } -} - -/* Final dark-mode text lock: prevents late light/base selectors from leaking into auto dark mode. */ -@media (prefers-color-scheme: dark) { - .page h1, - .page h2, - .page h3, - .page .masthead h1, - .page .panel-head h2, - .page .panel-subsection .panel-head h2, - .page .label, - .page .app-shell-title, - .page .lead, - .page .meta, - .page .panel .meta, - .page .filters label, - .page .text-link, - .page .card p, - .page .timeline-card p, - .page .selected-summary p, - .page .notice, - .page .ui-table th, - .page .ui-table td, - .page .ui-table thead th { - color: var(--vw-text) !important; - text-shadow: none; - } - .page .lead, - .page .meta, - .page .panel .meta, - .page .filters label, - .page .text-link, - .page .card p, - .page .timeline-card p, - .page .selected-summary p, - .page .notice { - color: var(--vw-text-soft) !important; - } - .page .text-link:hover { - color: #f4efff !important; - } - #home-design-approach .card, - #home-anti-patterns .card, - #home-bundles .card, - #home-roadmap .card, - #home-workflow .timeline-card { - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 28%, rgba(255,255,255,0) 29%), - linear-gradient(180deg, var(--vw-card-top) 0%, var(--vw-card-bottom) 100%) !important; - border-color: #6d61aa !important; - } - #home-overview.masthead { - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 30%, rgba(255,255,255,0) 31%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(145, 116, 232, 0.03) 1px 3px), - linear-gradient(180deg, var(--vw-panel-top) 0%, var(--vw-panel-bottom) 100%) !important; - border-color: var(--vw-line) !important; - box-shadow: 0 10px 22px rgba(10,7,25,0.18), inset 0 1px 0 rgba(255,255,255,0.10) !important; - } - #home-overview .label { color: #ac9fd0 !important; } - #home-overview h1 { color: var(--vw-text) !important; text-shadow: none !important; } - #home-overview .lead { color: var(--vw-text-soft) !important; } - #home-overview .button-demo-row .chip-link { - border-color: #6d61aa !important; - color: #ded8f5 !important; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #463973 0%, #322d60 100%) !important; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important; - } - #home-design-approach .panel-head h2, - #home-workflow .panel-head h2, - #home-standardizes .panel-head h2, - #home-anti-patterns .panel-head h2, - #home-bundles .panel-head h2, - #home-roadmap .panel-head h2, - #home-design-approach .card h3, - #home-anti-patterns .card h3, - #home-bundles .card h3, - #home-roadmap .card h3, - #home-workflow .timeline-card-top h3 { - color: var(--vw-text) !important; - text-shadow: none !important; - } - #home-design-approach .card p, - #home-anti-patterns .card p, - #home-bundles .card p, - #home-roadmap .card p, - #home-workflow .timeline-card .meta { - color: var(--vw-text-soft) !important; - } - #home-standardizes .chip { - border-color: #6d61aa !important; - color: #ded8f5 !important; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #463973 0%, #322d60 100%) !important; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 0 rgba(0,0,0,0.08) !important; - } - #home-bundles .meta code, - #home-roadmap .meta code { - background: rgba(45, 39, 83, 0.92) !important; - color: #ddd7f2 !important; - border-color: #6d61aa !important; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important; - } -} - -html[data-theme="dark"] #home-overview.masthead { - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 30%, rgba(255,255,255,0) 31%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(145, 116, 232, 0.03) 1px 3px), - linear-gradient(180deg, var(--vw-panel-top) 0%, var(--vw-panel-bottom) 100%) !important; - border-color: var(--vw-line) !important; - box-shadow: 0 10px 22px rgba(10,7,25,0.18), inset 0 1px 0 rgba(255,255,255,0.10) !important; -} -html[data-theme="dark"] #home-overview .label { color: #ac9fd0 !important; } -html[data-theme="dark"] #home-overview h1 { color: var(--vw-text) !important; text-shadow: none !important; } -html[data-theme="dark"] #home-overview .lead { color: var(--vw-text-soft) !important; } -html[data-theme="dark"] #home-overview .button-demo-row .chip-link, -html[data-theme="dark"] #home-standardizes .chip { - border-color: #6d61aa !important; - color: #ded8f5 !important; - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 43%), - linear-gradient(180deg, #463973 0%, #322d60 100%) !important; -} -html[data-theme="dark"] #home-design-approach .card, -html[data-theme="dark"] #home-anti-patterns .card, -html[data-theme="dark"] #home-bundles .card, -html[data-theme="dark"] #home-roadmap .card, -html[data-theme="dark"] #home-workflow .timeline-card { - background: - linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 28%, rgba(255,255,255,0) 29%), - linear-gradient(180deg, var(--vw-card-top) 0%, var(--vw-card-bottom) 100%) !important; - border-color: #6d61aa !important; -} diff --git a/kit/patterns/theme-vapor/templates/icon_sprite.html b/kit/patterns/theme-vapor/templates/icon_sprite.html deleted file mode 100644 index e1bf385..0000000 --- a/kit/patterns/theme-vapor/templates/icon_sprite.html +++ /dev/null @@ -1,102 +0,0 @@ - diff --git a/kit/patterns/timeline-cards/README.md b/kit/patterns/timeline-cards/README.md deleted file mode 100644 index 14dc1c2..0000000 --- a/kit/patterns/timeline-cards/README.md +++ /dev/null @@ -1,12 +0,0 @@ -# Timeline Cards Pattern - -Canonical timeline UX for operational history views: - -- cards grouped by day -- summary chips for aggregated actions -- source labels (`ingest`, `manual`, `system`, etc.) -- single drilldown modal (no nested modals) -- in-card search/filtering for event lists - -This pattern is intended for history/audit/timeline surfaces in server-rendered Go web UIs. - diff --git a/kit/patterns/timeline-cards/contract.md b/kit/patterns/timeline-cards/contract.md deleted file mode 100644 index 08867c4..0000000 --- a/kit/patterns/timeline-cards/contract.md +++ /dev/null @@ -1,29 +0,0 @@ -# Contract: Timeline Cards + Drilldown - -## Card Grouping - -- Render timeline as grouped cards (typically by day), not raw event rows. -- Correlated or visually equivalent events may be collapsed into one card with counts. -- Card summaries should be human-readable and avoid repeating page-scope identity labels. - -## Filters - -- Timeline filters are server-side when timeline is paginated or large. -- Filters should preserve grouping semantics and timezone behavior. -- Scope-invariant filters may be hidden on entity detail pages. - -## Drilldown - -- One card opens one drilldown modal/panel. -- Drilldown contains: - - event list (left/top) - - selected event details (right/bottom) -- No nested modal inside drilldown. -- Card-local search/filter may be applied within the drilldown. - -## UX Rules - -- Use human-readable source labels. -- Prefer action-oriented card titles (`Installed N components`, `Removed N components`). -- Empty states must explain whether filters removed all results. - diff --git a/kit/scaffolds/go-nethttp-web/Makefile b/kit/scaffolds/go-nethttp-web/Makefile deleted file mode 100644 index b3e2ce9..0000000 --- a/kit/scaffolds/go-nethttp-web/Makefile +++ /dev/null @@ -1,12 +0,0 @@ -run: - go run ./cmd/demo-server - -build: - go build ./cmd/demo-server - -test: - go test ./... - -fmt: - gofmt -w $$(find . -name '*.go' -type f) - diff --git a/kit/scaffolds/go-nethttp-web/README.md b/kit/scaffolds/go-nethttp-web/README.md deleted file mode 100644 index f453812..0000000 --- a/kit/scaffolds/go-nethttp-web/README.md +++ /dev/null @@ -1,15 +0,0 @@ -# Go net/http Web Skeleton - -Minimal starter skeleton for a Go web app using: - -- `net/http` -- `html/template` -- embedded templates and static assets - -This scaffold is intended as a starting point that host repositories can adapt. - -Vapor shell preset integration is included: - -- default preset via `` -- runtime override via `?vapor_shell=` -- persisted selection via `localStorage["vapor_shell"]` diff --git a/kit/scaffolds/go-nethttp-web/internal/web/handlers.go.tmpl b/kit/scaffolds/go-nethttp-web/internal/web/handlers.go.tmpl deleted file mode 100644 index ace2bdb..0000000 --- a/kit/scaffolds/go-nethttp-web/internal/web/handlers.go.tmpl +++ /dev/null @@ -1,23 +0,0 @@ -package web - -import ( - "net/http" -) - -type IndexViewData struct { - Title string -} - -func (s *Server) handleIndex(w http.ResponseWriter, r *http.Request) { - if r.URL.Path != "/" { - http.NotFound(w, r) - return - } - _ = s.render(w, "base.html", IndexViewData{Title: "Home"}) -} - -func (s *Server) handleHealthz(w http.ResponseWriter, r *http.Request) { - w.WriteHeader(http.StatusOK) - _, _ = w.Write([]byte("ok")) -} - diff --git a/kit/scaffolds/go-nethttp-web/internal/web/server.go.tmpl b/kit/scaffolds/go-nethttp-web/internal/web/server.go.tmpl deleted file mode 100644 index 3e69355..0000000 --- a/kit/scaffolds/go-nethttp-web/internal/web/server.go.tmpl +++ /dev/null @@ -1,37 +0,0 @@ -package web - -import ( - "html/template" - "io/fs" - "net/http" - - appweb "{{ .module_path }}/web" -) - -type Server struct { - mux *http.ServeMux - tmpl *template.Template -} - -func NewServer() (*Server, error) { - tmpl, err := parseTemplates() - if err != nil { - return nil, err - } - s := &Server{ - mux: http.NewServeMux(), - tmpl: tmpl, - } - s.registerRoutes() - return s, nil -} - -func (s *Server) Handler() http.Handler { return s.mux } - -func (s *Server) registerRoutes() { - s.mux.HandleFunc("/", s.handleIndex) - s.mux.HandleFunc("/healthz", s.handleHealthz) - staticFS, _ := fs.Sub(appweb.Assets, "static") - s.mux.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.FS(staticFS)))) -} - diff --git a/kit/scaffolds/go-nethttp-web/internal/web/templates.go.tmpl b/kit/scaffolds/go-nethttp-web/internal/web/templates.go.tmpl deleted file mode 100644 index 96864f0..0000000 --- a/kit/scaffolds/go-nethttp-web/internal/web/templates.go.tmpl +++ /dev/null @@ -1,27 +0,0 @@ -package web - -import ( - "fmt" - "html/template" - "net/http" - - appweb "{{ .module_path }}/web" -) - -func parseTemplates() (*template.Template, error) { - t, err := template.ParseFS(appweb.Assets, "templates/*.html") - if err != nil { - return nil, fmt.Errorf("parse templates: %w", err) - } - return t, nil -} - -func (s *Server) render(w http.ResponseWriter, name string, data any) error { - w.Header().Set("Content-Type", "text/html; charset=utf-8") - if err := s.tmpl.ExecuteTemplate(w, name, data); err != nil { - http.Error(w, "template error", http.StatusInternalServerError) - return fmt.Errorf("render %s: %w", name, err) - } - return nil -} - diff --git a/kit/scaffolds/go-nethttp-web/web/embed.go b/kit/scaffolds/go-nethttp-web/web/embed.go deleted file mode 100644 index 9ffa03f..0000000 --- a/kit/scaffolds/go-nethttp-web/web/embed.go +++ /dev/null @@ -1,9 +0,0 @@ -package web - -import "embed" - -// Assets contains templates and static files. -// -//go:embed templates/* static/* -var Assets embed.FS - diff --git a/kit/scaffolds/go-nethttp-web/web/static/css/app.css b/kit/scaffolds/go-nethttp-web/web/static/css/app.css deleted file mode 100644 index 32466d6..0000000 --- a/kit/scaffolds/go-nethttp-web/web/static/css/app.css +++ /dev/null @@ -1,46 +0,0 @@ -:root { - --bg: #e6e8ee; - --ink: #1f2023; - --muted: #5d646f; - --card: linear-gradient(180deg, rgba(252,252,253,0.99), rgba(240, 244, 249, 0.97) 44%, rgba(228, 238, 248, 0.96) 78%, rgba(221, 234, 248, 0.96)); - --line: #b9cbe0; - --accent: linear-gradient(180deg, #85b8ef 0%, #93c6fb 26%, #abd8ff 55%, #c7e8ff 82%, #def2ff 100%); - --accent-line: #88a4d4; -} - -* { box-sizing: border-box; } -body { - margin: 0; - font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif; - background: - radial-gradient(760px 360px at 14% 6%, rgba(255,255,255,0.82), transparent 72%), - radial-gradient(760px 360px at 88% 8%, rgba(154, 203, 247, 0.16), transparent 74%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, rgba(170,182,198,0.03) 1px 3px), - linear-gradient(#eef1f6, #dde2ea); - color: var(--ink); -} -.shell { - max-width: 880px; - margin: 0 auto; - padding: 24px 16px 48px; -} -.hero { margin-bottom: 16px; } -.eyebrow { - margin: 0; - color: #5f6772; - text-transform: uppercase; - letter-spacing: 0.08em; - font-size: 12px; -} -h1 { margin: 6px 0 0; font-size: 32px; } -.card { - background: - linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.0) 29%), - repeating-linear-gradient(to bottom, rgba(255,255,255,0.26) 0 1px, rgba(188,205,223,0.10) 1px 3px), - var(--card); - border: 1px solid var(--line); - border-radius: 14px; - padding: 16px; - box-shadow: 0 10px 20px rgba(78, 107, 139, 0.09), inset 0 1px 0 rgba(255,255,255,0.96); -} -code { background: #eef3fb; padding: 1px 5px; border-radius: 6px; } diff --git a/kit/scaffolds/go-nethttp-web/web/static/js/app.js b/kit/scaffolds/go-nethttp-web/web/static/js/app.js deleted file mode 100644 index 716c6e7..0000000 --- a/kit/scaffolds/go-nethttp-web/web/static/js/app.js +++ /dev/null @@ -1,65 +0,0 @@ -(() => { - const root = document.documentElement; - const storageKey = "vapor_shell"; - const queryKey = "vapor_shell"; - const fallbackPreset = "miami-sunset"; - const allowed = new Set([ - "miami-sunset", - "neon-grid", - "laser-flamingo", - "synth-lagoon", - "mall-soft", - "hologram-sky", - "peach-drive", - "ultraviolet-plaza", - "cyber-mint", - ]); - - const normalizePreset = (value) => { - const trimmed = (value || "").trim().toLowerCase(); - if (!trimmed || !allowed.has(trimmed)) { - return ""; - } - return trimmed; - }; - - const setPreset = (value) => { - const preset = normalizePreset(value); - if (!preset) { - return false; - } - root.setAttribute("data-vapor-shell", preset); - return true; - }; - - root.classList.add("js"); - - const url = new URL(window.location.href); - const fromQuery = normalizePreset(url.searchParams.get(queryKey)); - if (fromQuery) { - setPreset(fromQuery); - try { - window.localStorage.setItem(storageKey, fromQuery); - } catch (_err) { - // Keep behavior deterministic even when storage is blocked. - } - return; - } - - const fromMarkup = normalizePreset(root.getAttribute("data-vapor-shell")); - if (fromMarkup) { - return; - } - - try { - const fromStorage = normalizePreset(window.localStorage.getItem(storageKey)); - if (fromStorage) { - setPreset(fromStorage); - return; - } - } catch (_err) { - // Fallback handled below. - } - - setPreset(fallbackPreset); -})(); diff --git a/kit/scaffolds/go-nethttp-web/web/templates/base.html b/kit/scaffolds/go-nethttp-web/web/templates/base.html deleted file mode 100644 index 2c8e412..0000000 --- a/kit/scaffolds/go-nethttp-web/web/templates/base.html +++ /dev/null @@ -1,21 +0,0 @@ -{{ define "base.html" }} - - - - - - {{ .Title }} - - - -
-
-

Go Web Scaffold

-

{{ .Title }}

-
- {{ template "content" . }} -
- - - -{{ end }} diff --git a/kit/scaffolds/go-nethttp-web/web/templates/index.html b/kit/scaffolds/go-nethttp-web/web/templates/index.html deleted file mode 100644 index ccadb19..0000000 --- a/kit/scaffolds/go-nethttp-web/web/templates/index.html +++ /dev/null @@ -1,11 +0,0 @@ -{{ define "content" }} -
-

Minimal net/http + html/template scaffold.

-
    -
  • GET / page
    • -
  • GET /healthz healthcheck
    • -
  • /static/* embedded assets
    • -
-
-{{ end }} - diff --git a/releases/v0.1.0/RELEASE_NOTES.md b/releases/v0.1.0/RELEASE_NOTES.md deleted file mode 100644 index c23cc84..0000000 --- a/releases/v0.1.0/RELEASE_NOTES.md +++ /dev/null @@ -1,31 +0,0 @@ -# Release v0.1.0 - -Date: 2026-02-28 - -## Highlights - -- Initial public release of the submodule-first UI design kit for Go web projects. -- Added bundle-driven distribution (`exports/`) and `designsync` workflow (`list`, `validate`, - `plan`, `apply`). -- Established active Vapor visual baseline and canonical architecture/source maps in `bible/`. -- Added reusable Vapor shell palette presets with tokenized header height and accent styling. -- Standardized host integration approach for Vapor preset selection: - `?vapor_shell` -> `localStorage["vapor_shell"]` -> ``. - -## Included Surface - -- Reusable kit assets and patterns in `kit/` -- Bundle manifests and schema in `exports/` -- `designsync` tooling in `tools/designsync` -- Reference demo app in `demo/` - -## Validation - -- `./designsync validate` passed (12 bundles validated) -- `go test ./...` passed -- `cd demo && go test ./...` passed - -## Upgrade Notes - -- No previous tag exists; this is the baseline release. -- Host projects should pin submodule to tag `v0.1.0`.