mirror of
https://github.com/diegosouzapw/OmniRoute.git
synced 2026-07-31 04:12:10 +03:00
76a07cf7a5
Release v3.8.24 — see CHANGELOG.md [3.8.24] for the full notes and the PR description for the contributors hall. Integration of release/v3.8.24 into main.
437 lines
11 KiB
CSS
437 lines
11 KiB
CSS
@import "tailwindcss";
|
||
@import "fumadocs-ui/css/neutral.css";
|
||
@import "fumadocs-ui/css/preset.css";
|
||
/* Self-hosted Material Symbols icon font (#3695): the Google Fonts CDN
|
||
(fonts.googleapis.com) is blocked in some networks (e.g. mainland China),
|
||
which made every icon ligature fall back to its literal text name and broke
|
||
the layout. Bundling the font locally removes that runtime CDN dependency.
|
||
The bundled @font-face uses family "Material Symbols Outlined", matching the
|
||
.material-symbols-outlined rule defined later in this file. */
|
||
@import "material-symbols/outlined.css";
|
||
@source "../../node_modules/fumadocs-ui/css/generated/*.css";
|
||
|
||
/* 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 "../../node_modules/fumadocs-ui/dist/**/*.js";
|
||
@source not "../../*.sqlite*";
|
||
@source not "../../.claude*";
|
||
@source not "../../.claude-memory";
|
||
|
||
@custom-variant dark (&:where(.dark, .dark *));
|
||
|
||
/* Fumadocs sidebar width override */
|
||
:root {
|
||
--fd-sidebar-width: 220px;
|
||
}
|
||
|
||
/* OpenClaw × ClawHub Color Palette */
|
||
:root {
|
||
--desktop-safe-top: 0px;
|
||
--desktop-safe-bottom: 0px;
|
||
color-scheme: light;
|
||
|
||
/* 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-card: #ffffff;
|
||
--color-sidebar: #f5f5fa;
|
||
--color-border: rgba(0, 0, 0, 0.08);
|
||
--color-text-main: #1a1a2e;
|
||
--color-text-primary: #1a1a2e;
|
||
--color-text-muted: #71717a;
|
||
|
||
/* Fumadocs light theme */
|
||
--color-fd-background: #f9f9fb;
|
||
--color-fd-foreground: #1a1a2e;
|
||
--color-fd-muted: #f0f0f5;
|
||
--color-fd-muted-foreground: #71717a;
|
||
--color-fd-popover: #ffffff;
|
||
--color-fd-popover-foreground: #1a1a2e;
|
||
--color-fd-card: #ffffff;
|
||
--color-fd-card-foreground: #1a1a2e;
|
||
--color-fd-border: rgba(0, 0, 0, 0.08);
|
||
--color-fd-primary: #e54d5e;
|
||
--color-fd-primary-foreground: #ffffff;
|
||
--color-fd-secondary: #f0f0f5;
|
||
--color-fd-secondary-foreground: #1a1a2e;
|
||
--color-fd-accent: rgba(229, 77, 94, 0.08);
|
||
--color-fd-accent-foreground: #1a1a2e;
|
||
--color-fd-ring: #e54d5e;
|
||
|
||
/* 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-scheme: dark;
|
||
--color-bg: #0b0e14;
|
||
--color-bg-alt: #111520;
|
||
--color-bg-primary: #0b0e14;
|
||
--color-bg-subtle: #111520;
|
||
--color-surface: #161b22;
|
||
--color-card: #161b22;
|
||
--color-sidebar: #10141e;
|
||
--color-border: rgba(255, 255, 255, 0.08);
|
||
--color-text-main: #e6e6ef;
|
||
--color-text-primary: #e6e6ef;
|
||
--color-text-muted: #a1a1aa;
|
||
|
||
/* Fumadocs theme mapping */
|
||
--color-fd-background: #0b0e14;
|
||
--color-fd-foreground: #e6e6ef;
|
||
--color-fd-muted: #111520;
|
||
--color-fd-muted-foreground: #a1a1aa;
|
||
--color-fd-popover: #161b22;
|
||
--color-fd-popover-foreground: #e6e6ef;
|
||
--color-fd-card: #161b22;
|
||
--color-fd-card-foreground: #e6e6ef;
|
||
--color-fd-border: rgba(255, 255, 255, 0.08);
|
||
--color-fd-primary: #e54d5e;
|
||
--color-fd-primary-foreground: #ffffff;
|
||
--color-fd-secondary: #111520;
|
||
--color-fd-secondary-foreground: #e6e6ef;
|
||
--color-fd-accent: rgba(229, 77, 94, 0.12);
|
||
--color-fd-accent-foreground: #e6e6ef;
|
||
--color-fd-ring: #e54d5e;
|
||
|
||
/* 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-card: var(--color-card);
|
||
--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 */
|
||
}
|
||
}
|
||
|
||
/* Fix for native dropdown options visibility in dark mode */
|
||
select option {
|
||
background-color: var(--color-surface);
|
||
color: var(--color-text-main);
|
||
}
|
||
|
||
/* ReactFlow Controls (zoom +/- buttons) dark mode theming */
|
||
.react-flow__controls-button {
|
||
background-color: var(--color-surface);
|
||
border-bottom-color: var(--color-border);
|
||
fill: var(--color-text-main);
|
||
}
|
||
|
||
.react-flow__controls-button:hover {
|
||
background-color: var(--color-bg-subtle);
|
||
}
|
||
|
||
.react-flow__controls-button svg {
|
||
fill: var(--color-text-main);
|
||
}
|