diegosouzapw
ea61d00cf7
## New Features - Combo Builder v2 wizard UI (multi-stage: Basics → Steps → Strategy → Review) - Combo Step Architecture Schema v2 (ComboModelStep, ComboRefStep, pinned accounts) - Composite Tiers system for tiered model routing with fallback chains - Model Capabilities Registry (unified resolver merging specs + registry + synced data) - Observability module (buildHealthPayload, buildTelemetryPayload, buildSessionsSummary) - Session & Quota Monitor panels on Health dashboard - Combo Health per-target analytics via resolveNestedComboTargets() - Combo Builder Options API (GET /api/combos/builder/options) ## Performance - Middleware lazy loading (apiAuth, db/settings, modelSyncScheduler) - E2E auth bypass mode (NEXT_PUBLIC_OMNIROUTE_E2E_MODE) ## Bug Fixes - P2C credential selection with quota headroom awareness - Fixed-account combo steps bypass model cooldowns/circuit breakers - Combo metrics per-target tracking (byTarget with executionKey) - Call logs schema expansion (7 new columns + composite index) - Quota monitor lifecycle enrichment (status, snapshots, summary) - Codex quota fetcher hardening ## Maintenance - DB migration 021 (combo_call_log_targets) - Combo CRUD normalization on read - Playwright config + build script improvements - OpenAPI spec version sync to 3.6.4 ## Tests - 16 new test suites + 12 existing test updates - 86 files changed, +8318 -1378 lines
359 lines
8.2 KiB
CSS
359 lines
8.2 KiB
CSS
@import "tailwindcss";
|
||
|
||
/* Tailwind v4 auto-detection cannot scan directories with parentheses
|
||
(e.g. Next.js route groups like "(dashboard)"). Explicit @source
|
||
directives ensure all utility classes in route groups are included. */
|
||
@source "../app/(dashboard)";
|
||
@source not "../../*.sqlite*";
|
||
@source not "../../.claude*";
|
||
@source not "../../.claude-memory";
|
||
|
||
@custom-variant dark (&:where(.dark, .dark *));
|
||
|
||
/* OpenClaw × ClawHub Color Palette */
|
||
:root {
|
||
--desktop-safe-top: 0px;
|
||
--desktop-safe-bottom: 0px;
|
||
|
||
/* Primary - Coral Red (OpenClaw) */
|
||
--color-primary: #e54d5e;
|
||
--color-primary-hover: #c93d4e;
|
||
|
||
/* Accent - Indigo/Violet (buttons, links, gradients) */
|
||
--color-accent: #6366f1;
|
||
--color-accent-hover: #8b5cf6;
|
||
--color-accent-light: #a855f7;
|
||
|
||
/* Semantic */
|
||
--color-error: #ef4444;
|
||
--color-success: #22c55e;
|
||
--color-warning: #f59e0b;
|
||
|
||
/* Traffic lights */
|
||
--color-traffic-red: #ff5f56;
|
||
--color-traffic-yellow: #ffbd2e;
|
||
--color-traffic-green: #27c93f;
|
||
|
||
/* Light theme */
|
||
--color-bg: #f9f9fb;
|
||
--color-bg-alt: #f0f0f5;
|
||
--color-bg-primary: #f9f9fb;
|
||
--color-bg-subtle: #f0f0f5;
|
||
--color-surface: #ffffff;
|
||
--color-sidebar: rgba(245, 245, 250, 0.8);
|
||
--color-border: rgba(0, 0, 0, 0.08);
|
||
--color-text-main: #1a1a2e;
|
||
--color-text-primary: #1a1a2e;
|
||
--color-text-muted: #71717a;
|
||
|
||
/* Shadows */
|
||
--shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.015);
|
||
--shadow-warm: 0 2px 12px -2px rgba(229, 77, 94, 0.12);
|
||
--shadow-elevated: 0 12px 28px -4px rgba(20, 20, 40, 0.06);
|
||
}
|
||
|
||
.dark {
|
||
/* Dark theme (ClawHub deep) */
|
||
--color-bg: #0b0e14;
|
||
--color-bg-alt: #111520;
|
||
--color-bg-primary: #0b0e14;
|
||
--color-bg-subtle: #111520;
|
||
--color-surface: #161b22;
|
||
--color-sidebar: rgba(16, 20, 30, 0.8);
|
||
--color-border: rgba(255, 255, 255, 0.08);
|
||
--color-text-main: #e6e6ef;
|
||
--color-text-primary: #e6e6ef;
|
||
--color-text-muted: #a1a1aa;
|
||
|
||
/* Dark shadows */
|
||
--shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
--shadow-warm: 0 2px 12px -2px rgba(229, 77, 94, 0.15);
|
||
--shadow-elevated: 0 12px 28px -4px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
@theme inline {
|
||
/* Primary */
|
||
--color-primary: var(--color-primary);
|
||
--color-primary-hover: var(--color-primary-hover);
|
||
|
||
/* Accent */
|
||
--color-accent: var(--color-accent);
|
||
--color-accent-hover: var(--color-accent-hover);
|
||
--color-accent-light: var(--color-accent-light);
|
||
|
||
/* Semantic */
|
||
--color-error: var(--color-error);
|
||
--color-success: var(--color-success);
|
||
--color-warning: var(--color-warning);
|
||
|
||
/* Auto-switch colors (use CSS variables from :root/.dark) */
|
||
--color-bg: var(--color-bg);
|
||
--color-bg-primary: var(--color-bg-primary);
|
||
--color-bg-subtle: var(--color-bg-subtle);
|
||
--color-surface: var(--color-surface);
|
||
--color-sidebar: var(--color-sidebar);
|
||
--color-border: var(--color-border);
|
||
--color-text-main: var(--color-text-main);
|
||
--color-text-primary: var(--color-text-primary);
|
||
--color-text-muted: var(--color-text-muted);
|
||
|
||
/* Static colors (for explicit light/dark usage) */
|
||
--color-bg-light: #f9f9fb;
|
||
--color-bg-dark: #0b0e14;
|
||
--color-surface-light: #ffffff;
|
||
--color-surface-dark: #161b22;
|
||
--color-sidebar-light: #ededf2;
|
||
--color-sidebar-dark: #111520;
|
||
--color-border-light: #e2e2ea;
|
||
--color-border-dark: #2d333b;
|
||
--color-text-main-light: #1a1a2e;
|
||
--color-text-main-dark: #e6e6ef;
|
||
--color-text-muted-light: #71717a;
|
||
--color-text-muted-dark: #a1a1aa;
|
||
|
||
/* Shadows */
|
||
--shadow-soft: var(--shadow-soft);
|
||
--shadow-warm: var(--shadow-warm);
|
||
--shadow-elevated: var(--shadow-elevated);
|
||
|
||
/* Font - macOS system fonts */
|
||
--font-sans:
|
||
-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
|
||
}
|
||
|
||
/* ── Focus Indicators (U-3) ── */
|
||
:root {
|
||
--focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
|
||
}
|
||
|
||
/* Visible focus ring on keyboard navigation only */
|
||
:focus-visible {
|
||
outline: none;
|
||
box-shadow: var(--focus-ring);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* Utility class for custom focus ring */
|
||
.focus-ring:focus-visible {
|
||
outline: none;
|
||
box-shadow: var(--focus-ring);
|
||
}
|
||
|
||
/* Remove focus ring from mouse clicks */
|
||
:focus:not(:focus-visible) {
|
||
outline: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Base styles */
|
||
body {
|
||
background-color: var(--color-bg);
|
||
color: var(--color-text-main);
|
||
font-family: var(--font-sans);
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
body.electron-macos {
|
||
--desktop-safe-top: 30px;
|
||
--desktop-safe-bottom: 8px;
|
||
}
|
||
|
||
/* Selection — with fallback for browsers that don't support color-mix() */
|
||
::selection {
|
||
background-color: rgba(229, 77, 94, 0.22);
|
||
background-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
/* Global custom scrollbar — thin, minimal, theme-aware */
|
||
*::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
*::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
*::-webkit-scrollbar-thumb {
|
||
background-color: rgba(156, 163, 175, 0.2);
|
||
border-radius: 9999px;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
*::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgba(156, 163, 175, 0.45);
|
||
}
|
||
|
||
*::-webkit-scrollbar-corner {
|
||
background: transparent;
|
||
}
|
||
|
||
/* Dark theme scrollbar — slightly brighter thumb */
|
||
.dark *::-webkit-scrollbar-thumb {
|
||
background-color: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.dark *::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
/* Firefox support */
|
||
* {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
|
||
}
|
||
|
||
.dark * {
|
||
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
|
||
}
|
||
|
||
/* Keep .custom-scrollbar alias for backward compatibility */
|
||
.custom-scrollbar {
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
/* Hero gradient */
|
||
.bg-hero-gradient {
|
||
background: linear-gradient(180deg, #f0f0f5 0%, #f9f9fb 100%);
|
||
}
|
||
|
||
.dark .bg-hero-gradient {
|
||
background: linear-gradient(180deg, #111520 0%, #0b0e14 100%);
|
||
}
|
||
|
||
/* Material Symbols */
|
||
.material-symbols-outlined {
|
||
font-family: "Material Symbols Outlined", sans-serif !important;
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
font-size: 24px;
|
||
line-height: 1;
|
||
letter-spacing: normal;
|
||
text-transform: none;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
word-wrap: normal;
|
||
direction: ltr;
|
||
font-feature-settings: "liga";
|
||
-webkit-font-feature-settings: "liga";
|
||
-webkit-font-smoothing: antialiased;
|
||
font-variation-settings:
|
||
"FILL" 0,
|
||
"wght" 400,
|
||
"GRAD" 0,
|
||
"opsz" 24;
|
||
user-select: none;
|
||
}
|
||
|
||
/* Ensure icon clicks always bubble to the parent button */
|
||
button .material-symbols-outlined,
|
||
[role="button"] .material-symbols-outlined {
|
||
pointer-events: none;
|
||
}
|
||
|
||
.material-symbols-outlined.fill-1 {
|
||
font-variation-settings:
|
||
"FILL" 1,
|
||
"wght" 400,
|
||
"GRAD" 0,
|
||
"opsz" 24;
|
||
}
|
||
|
||
/* Animations */
|
||
@keyframes spin {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.animate-spin {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
.animate-pulse {
|
||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||
}
|
||
|
||
@keyframes border-glow {
|
||
0%,
|
||
100% {
|
||
box-shadow:
|
||
0 0 5px rgba(229, 77, 94, 0.3),
|
||
0 0 10px rgba(229, 77, 94, 0.2);
|
||
border-color: rgba(229, 77, 94, 0.5);
|
||
}
|
||
50% {
|
||
box-shadow:
|
||
0 0 10px rgba(229, 77, 94, 0.5),
|
||
0 0 20px rgba(229, 77, 94, 0.3);
|
||
border-color: rgba(229, 77, 94, 0.8);
|
||
}
|
||
}
|
||
|
||
.animate-border-glow {
|
||
animation: border-glow 2s ease-in-out infinite;
|
||
}
|
||
|
||
/* macOS Vibrancy/Blur Effect */
|
||
.bg-vibrancy {
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
background: rgba(255, 255, 255, 0.72);
|
||
}
|
||
|
||
.dark .bg-vibrancy {
|
||
background: rgba(16, 20, 30, 0.72);
|
||
}
|
||
|
||
/* macOS Traffic Lights */
|
||
.traffic-lights {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.traffic-light {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.traffic-light.red {
|
||
background: var(--color-traffic-red);
|
||
}
|
||
|
||
.traffic-light.yellow {
|
||
background: var(--color-traffic-yellow);
|
||
}
|
||
|
||
.traffic-light.green {
|
||
background: var(--color-traffic-green);
|
||
}
|
||
|
||
/* ── Mobile Layout Fixes (Issue #659) ── */
|
||
@media (max-width: 768px) {
|
||
.ant-table-wrapper {
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
max-width: 100vw;
|
||
}
|
||
|
||
.ant-table {
|
||
min-width: 600px; /* Prevent columns from crushing together */
|
||
}
|
||
}
|