mirror of
https://github.com/diegosouzapw/OmniRoute.git
synced 2026-09-18 04:42:30 +03:00
073b98462d
UI completa do Orchestration Canvas sobre o modelo da parte 1: página /dashboard/orchestration com abas em URL (Agents=grafo vivo via FlowCanvas, Routing=ComboLiveStudio intocado, Overview=contadores+kanban com totais reais sob cap), drawer de detalhe com approve/cancel (unwrap por fonte verificado contra as rotas reais, erros client-safe, prUrl https-only), i18n com traduções REAIS em 43 locales, entrada no sidebar. Ciclo SDD: 9 tasks TDD com review por task (Task 15 com fix round: Critical A2A unwrap + rewrite de lint + guard XSS), review final whole-branch (Ready to merge, 0 Critical/Important, refactor de complexity provado behavior-preserving), 3 fixes de CI validados RED→GREEN. CI: tudo verde. Crédito do conceito visual: design da PR #11815.
830 lines
21 KiB
CSS
830 lines
21 KiB
CSS
@import "tailwindcss" source(none);
|
||
@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";
|
||
/* react18-json-view (request/response JSON tree in RequestLoggerDetail) — imported here
|
||
instead of in the component so node:test / esbuild never see a .css import. */
|
||
@import "react18-json-view/src/style.css";
|
||
@import "react18-json-view/src/dark.css";
|
||
@source "../../node_modules/fumadocs-ui/css/generated/*.css";
|
||
|
||
/* Keep Tailwind v4 from scanning the entire repository. The UI lives in the
|
||
App Router and shared component trees; third-party Fumadocs sources remain
|
||
explicit because node_modules is ignored by automatic detection. */
|
||
@source "../app";
|
||
@source "../shared";
|
||
@source "../../node_modules/fumadocs-ui/dist/**/*.js";
|
||
|
||
@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);
|
||
|
||
/* Graph-paper wallpaper grid — shared visual identity with the marketing site
|
||
(_mono_repo/omnirouteSite/css). Light theme values. Rendered by body::before.
|
||
Opacity tuned up from the site's 0.045 so the wallpaper is actually visible on
|
||
the dense dashboard (cards/chrome cover most of the viewport). */
|
||
--grid-line: rgba(0, 0, 0, 0.07);
|
||
--grid-size: 32px;
|
||
--section-alt: rgba(0, 0, 0, 0.022);
|
||
|
||
/* Identity tokens mirrored from the site. Definitions only in this phase —
|
||
components are repointed to them in a later phase. */
|
||
--surface-2: #f5f5fa;
|
||
--radius: 14px;
|
||
--radius-control: 9px;
|
||
--grad-brand: linear-gradient(135deg, var(--color-primary), var(--color-accent-light));
|
||
|
||
/* Data-table surfaces — theme-aware. The DARK values (in .dark below) exactly mirror
|
||
the previous hardcoded rgba in DataTable.tsx so dark stays byte-identical; these
|
||
light values are the fix (the old code was always-dark via dead var fallbacks). */
|
||
--table-header-bg: rgba(249, 249, 251, 0.95);
|
||
--table-row-zebra: rgba(0, 0, 0, 0.02);
|
||
--table-row-hover: rgba(0, 0, 0, 0.04);
|
||
--table-cell-border: rgba(0, 0, 0, 0.04);
|
||
/* Selected row — an accent tint that reads on both themes (inherited by .dark). */
|
||
--table-row-selected: rgba(99, 102, 241, 0.1);
|
||
}
|
||
|
||
.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);
|
||
|
||
/* Graph-paper wallpaper grid — dark theme values (tuned up from 0.035 for visibility). */
|
||
--grid-line: rgba(255, 255, 255, 0.06);
|
||
--section-alt: rgba(255, 255, 255, 0.018);
|
||
--surface-2: #1c2230;
|
||
|
||
/* Data-table surfaces — dark = the exact old hardcoded values (byte-identical). */
|
||
--table-header-bg: rgba(15, 15, 25, 0.95);
|
||
--table-row-zebra: rgba(255, 255, 255, 0.02);
|
||
--table-row-hover: rgba(255, 255, 255, 0.04);
|
||
--table-cell-border: rgba(255, 255, 255, 0.04);
|
||
}
|
||
|
||
@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;
|
||
/* Monospace stack (parity with the site) — code blocks, IDs, endpoints, terminals */
|
||
--font-mono: ui-monospace, "JetBrains Mono", "Fira Code", "SF Mono", monospace;
|
||
|
||
/* Nested surface (enables bg-surface-2) */
|
||
--color-surface-2: var(--surface-2);
|
||
|
||
/* Semantic radius scale → rounded-card (surfaces, 14px) / rounded-control (controls,
|
||
9px). Custom names so the default rounded-sm/md/lg/xl utilities stay untouched. */
|
||
--radius-card: var(--radius);
|
||
--radius-control: var(--radius-control);
|
||
}
|
||
|
||
/* ── 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;
|
||
}
|
||
|
||
/* Graph-paper wallpaper grid — one fixed, full-viewport layer behind every screen
|
||
(dashboard, auth, error pages). A z-index:-1 ::before paints above body's own
|
||
background but below all in-flow content, so it shows through any transparent
|
||
wrapper without lowering text contrast. Mirrors the marketing site exactly. */
|
||
body::before {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: -1;
|
||
pointer-events: none;
|
||
background-image:
|
||
linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
|
||
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
|
||
background-size: var(--grid-size) var(--grid-size);
|
||
}
|
||
|
||
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 */
|
||
:where(.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;
|
||
}
|
||
|
||
/* react18-json-view fold control: the SVG chevron itself is ~14px, too small
|
||
a touch target on mobile. Padding + a matching negative margin grows the
|
||
hit area without shifting sibling layout -- unlike the row-level icon this
|
||
replaces (see the reverted react-json-view-lite alignment attempt), this
|
||
click target is a trailing decoration appended after the object/array's
|
||
opening brace, not a leading element sibling keys align against, so
|
||
padding it here cannot reproduce that regression. */
|
||
.jv-size-chevron {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 10px 4px;
|
||
margin: -10px -4px;
|
||
}
|
||
|
||
/* 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);
|
||
}
|
||
|
||
/* React Flow loads its component stylesheet after this global file in some
|
||
bundles, so direct background/fill declarations can lose to its shorthand
|
||
rules. Override the supported theme variables on our canvas instead. */
|
||
.react-flow.omniroute-flow {
|
||
--xy-controls-button-background-color: var(--color-surface);
|
||
--xy-controls-button-background-color-hover: var(--color-bg-subtle);
|
||
--xy-controls-button-color: var(--color-text-main);
|
||
--xy-controls-button-color-hover: var(--color-text-main);
|
||
--xy-controls-button-border-color: var(--color-border);
|
||
}
|
||
|
||
/* Desktop sidebar visibility must not depend on Tailwind's hidden/lg:flex cascade
|
||
(ordering/specificity can collapse it). Explicit class + 1024px media query. */
|
||
.dashboard-sidebar-desktop {
|
||
display: none;
|
||
min-height: 0;
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.dashboard-sidebar-desktop {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════
|
||
RTL (Right-to-Left) Compatibility — fixes #7680
|
||
═══════════════════════════════════════════════════════════════ */
|
||
html[dir="rtl"] .text-left {
|
||
text-align: start;
|
||
}
|
||
html[dir="rtl"] .text-right {
|
||
text-align: end;
|
||
}
|
||
html[dir="rtl"] .ml-0 {
|
||
--rtl-ms: 0;
|
||
}
|
||
html[dir="rtl"] .ml-0\.5 {
|
||
--rtl-ms: 0.5;
|
||
}
|
||
html[dir="rtl"] .ml-1 {
|
||
--rtl-ms: 1;
|
||
}
|
||
html[dir="rtl"] .ml-1\.5 {
|
||
--rtl-ms: 1.5;
|
||
}
|
||
html[dir="rtl"] .ml-2 {
|
||
--rtl-ms: 2;
|
||
}
|
||
html[dir="rtl"] .ml-3 {
|
||
--rtl-ms: 3;
|
||
}
|
||
html[dir="rtl"] .ml-4 {
|
||
--rtl-ms: 4;
|
||
}
|
||
html[dir="rtl"] .ml-5 {
|
||
--rtl-ms: 5;
|
||
}
|
||
html[dir="rtl"] .ml-6 {
|
||
--rtl-ms: 6;
|
||
}
|
||
html[dir="rtl"] .ml-7 {
|
||
--rtl-ms: 7;
|
||
}
|
||
html[dir="rtl"] :is(.ml-0, .ml-0\.5, .ml-1, .ml-1\.5, .ml-2, .ml-3, .ml-4, .ml-5, .ml-6, .ml-7) {
|
||
margin-left: 0;
|
||
margin-inline-start: calc(var(--spacing) * var(--rtl-ms));
|
||
}
|
||
html[dir="rtl"] .ml-auto {
|
||
margin-left: 0;
|
||
margin-inline-start: auto;
|
||
}
|
||
html[dir="rtl"] .mr-0\.5 {
|
||
--rtl-me: 0.5;
|
||
}
|
||
html[dir="rtl"] .mr-1 {
|
||
--rtl-me: 1;
|
||
}
|
||
html[dir="rtl"] .mr-2 {
|
||
--rtl-me: 2;
|
||
}
|
||
html[dir="rtl"] .mr-3 {
|
||
--rtl-me: 3;
|
||
}
|
||
html[dir="rtl"] :is(.mr-0\.5, .mr-1, .mr-2, .mr-3) {
|
||
margin-right: 0;
|
||
margin-inline-end: calc(var(--spacing) * var(--rtl-me));
|
||
}
|
||
html[dir="rtl"] .mr-auto {
|
||
margin-right: 0;
|
||
margin-inline-end: auto;
|
||
}
|
||
html[dir="rtl"] .pl-1 {
|
||
--rtl-ps: 1;
|
||
}
|
||
html[dir="rtl"] .pl-2 {
|
||
--rtl-ps: 2;
|
||
}
|
||
html[dir="rtl"] .pl-3 {
|
||
--rtl-ps: 3;
|
||
}
|
||
html[dir="rtl"] .pl-4 {
|
||
--rtl-ps: 4;
|
||
}
|
||
html[dir="rtl"] .pl-5 {
|
||
--rtl-ps: 5;
|
||
}
|
||
html[dir="rtl"] .pl-6 {
|
||
--rtl-ps: 6;
|
||
}
|
||
html[dir="rtl"] .pl-7 {
|
||
--rtl-ps: 7;
|
||
}
|
||
html[dir="rtl"] .pl-8 {
|
||
--rtl-ps: 8;
|
||
}
|
||
html[dir="rtl"] .pl-9 {
|
||
--rtl-ps: 9;
|
||
}
|
||
html[dir="rtl"] .pl-10 {
|
||
--rtl-ps: 10;
|
||
}
|
||
html[dir="rtl"] .pl-12 {
|
||
--rtl-ps: 12;
|
||
}
|
||
html[dir="rtl"] :is(.pl-1, .pl-2, .pl-3, .pl-4, .pl-5, .pl-6, .pl-7, .pl-8, .pl-9, .pl-10, .pl-12) {
|
||
padding-left: 0;
|
||
padding-inline-start: calc(var(--spacing) * var(--rtl-ps));
|
||
}
|
||
html[dir="rtl"] .pr-1 {
|
||
--rtl-pe: 1;
|
||
}
|
||
html[dir="rtl"] .pr-2 {
|
||
--rtl-pe: 2;
|
||
}
|
||
html[dir="rtl"] .pr-2\.5 {
|
||
--rtl-pe: 2.5;
|
||
}
|
||
html[dir="rtl"] .pr-3 {
|
||
--rtl-pe: 3;
|
||
}
|
||
html[dir="rtl"] .pr-4 {
|
||
--rtl-pe: 4;
|
||
}
|
||
html[dir="rtl"] .pr-9 {
|
||
--rtl-pe: 9;
|
||
}
|
||
html[dir="rtl"] .pr-10 {
|
||
--rtl-pe: 10;
|
||
}
|
||
html[dir="rtl"] :is(.pr-1, .pr-2, .pr-2\.5, .pr-3, .pr-4, .pr-9, .pr-10) {
|
||
padding-right: 0;
|
||
padding-inline-end: calc(var(--spacing) * var(--rtl-pe));
|
||
}
|
||
html[dir="rtl"] .left-0 {
|
||
--rtl-is: 0;
|
||
}
|
||
html[dir="rtl"] .left-0\.5 {
|
||
--rtl-is: calc(var(--spacing) * 0.5);
|
||
}
|
||
html[dir="rtl"] .left-1 {
|
||
--rtl-is: calc(var(--spacing) * 1);
|
||
}
|
||
html[dir="rtl"] .left-1\.5 {
|
||
--rtl-is: calc(var(--spacing) * 1.5);
|
||
}
|
||
html[dir="rtl"] .left-2 {
|
||
--rtl-is: calc(var(--spacing) * 2);
|
||
}
|
||
html[dir="rtl"] .left-2\.5 {
|
||
--rtl-is: calc(var(--spacing) * 2.5);
|
||
}
|
||
html[dir="rtl"] .left-3 {
|
||
--rtl-is: calc(var(--spacing) * 3);
|
||
}
|
||
html[dir="rtl"] .left-5 {
|
||
--rtl-is: calc(var(--spacing) * 5);
|
||
}
|
||
html[dir="rtl"] .left-1\/4 {
|
||
--rtl-is: 25%;
|
||
}
|
||
html[dir="rtl"] .left-1\/2 {
|
||
--rtl-is: 50%;
|
||
}
|
||
html[dir="rtl"] .left-\[16\%\] {
|
||
--rtl-is: 16%;
|
||
}
|
||
html[dir="rtl"]
|
||
:is(
|
||
.left-0,
|
||
.left-0\.5,
|
||
.left-1,
|
||
.left-1\.5,
|
||
.left-2,
|
||
.left-2\.5,
|
||
.left-3,
|
||
.left-5,
|
||
.left-1\/4,
|
||
.left-1\/2,
|
||
.left-\[16\%\]
|
||
) {
|
||
left: auto;
|
||
inset-inline-start: var(--rtl-is);
|
||
}
|
||
html[dir="rtl"] .right-0 {
|
||
--rtl-ie: 0;
|
||
}
|
||
html[dir="rtl"] .right-1 {
|
||
--rtl-ie: calc(var(--spacing) * 1);
|
||
}
|
||
html[dir="rtl"] .right-2 {
|
||
--rtl-ie: calc(var(--spacing) * 2);
|
||
}
|
||
html[dir="rtl"] .right-3 {
|
||
--rtl-ie: calc(var(--spacing) * 3);
|
||
}
|
||
html[dir="rtl"] .right-4 {
|
||
--rtl-ie: calc(var(--spacing) * 4);
|
||
}
|
||
html[dir="rtl"] .right-1\/4 {
|
||
--rtl-ie: 25%;
|
||
}
|
||
html[dir="rtl"] .right-\[16\%\] {
|
||
--rtl-ie: 16%;
|
||
}
|
||
html[dir="rtl"] .-right-2\.5 {
|
||
--rtl-ie: calc(var(--spacing) * -2.5);
|
||
}
|
||
html[dir="rtl"] .-right-20 {
|
||
--rtl-ie: calc(var(--spacing) * -20);
|
||
}
|
||
html[dir="rtl"]
|
||
:is(
|
||
.right-0,
|
||
.right-1,
|
||
.right-2,
|
||
.right-3,
|
||
.right-4,
|
||
.right-1\/4,
|
||
.right-\[16\%\],
|
||
.-right-2\.5,
|
||
.-right-20
|
||
) {
|
||
right: auto;
|
||
inset-inline-end: var(--rtl-ie);
|
||
}
|
||
html[dir="rtl"] .border-l-2 {
|
||
--rtl-bw: 2px;
|
||
}
|
||
html[dir="rtl"] .border-l-4 {
|
||
--rtl-bw: 4px;
|
||
}
|
||
html[dir="rtl"] .border-l-\[3px\] {
|
||
--rtl-bw: 3px;
|
||
}
|
||
html[dir="rtl"] :is(.border-l-2, .border-l-4, .border-l-\[3px\]) {
|
||
border-left-width: 0;
|
||
border-inline-start-width: var(--rtl-bw);
|
||
}
|
||
html[dir="rtl"] .border-l-primary {
|
||
border-left-color: var(--color-border);
|
||
border-inline-start-color: var(--color-primary);
|
||
}
|
||
html[dir="rtl"] .border-r {
|
||
border-right-width: 0;
|
||
border-inline-end-width: 1px;
|
||
}
|
||
html[dir="rtl"] .last\:border-r-0:last-child {
|
||
border-left-width: 0;
|
||
}
|
||
html[dir="rtl"] .rounded-r-lg {
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
border-start-end-radius: var(--radius-lg);
|
||
border-end-end-radius: var(--radius-lg);
|
||
}
|
||
html[dir="rtl"] .translate-x-0\.5 {
|
||
--rtl-tx: -0.5;
|
||
}
|
||
html[dir="rtl"] .translate-x-1 {
|
||
--rtl-tx: -1;
|
||
}
|
||
html[dir="rtl"] .translate-x-4 {
|
||
--rtl-tx: -4;
|
||
}
|
||
html[dir="rtl"] .translate-x-5 {
|
||
--rtl-tx: -5;
|
||
}
|
||
html[dir="rtl"] .translate-x-6 {
|
||
--rtl-tx: -6;
|
||
}
|
||
html[dir="rtl"]
|
||
:is(.translate-x-0\.5, .translate-x-1, .translate-x-4, .translate-x-5, .translate-x-6) {
|
||
translate: calc(var(--spacing) * var(--rtl-tx)) var(--tw-translate-y);
|
||
}
|
||
html[dir="rtl"] .-translate-x-1\/2 {
|
||
translate: 50% var(--tw-translate-y);
|
||
}
|
||
@media (min-width: 48rem) {
|
||
html[dir="rtl"] .md\:ml-2 {
|
||
margin-left: 0;
|
||
margin-inline-start: calc(var(--spacing) * 2);
|
||
}
|
||
html[dir="rtl"] .md\:ml-auto {
|
||
margin-left: 0;
|
||
margin-inline-start: auto;
|
||
}
|
||
html[dir="rtl"] .md\:pl-6 {
|
||
padding-left: 0;
|
||
padding-inline-start: calc(var(--spacing) * 6);
|
||
}
|
||
}
|
||
html[dir="rtl"] :where(code, pre, kbd, samp, input[type="email"], input[type="url"]) {
|
||
direction: ltr;
|
||
text-align: left;
|
||
}
|
||
html[dir="rtl"] :where(.material-symbols-outlined, .traffic-lights, .react-flow) {
|
||
direction: ltr;
|
||
}
|
||
|
||
/* Orchestration Canvas: honor prefers-reduced-motion (spec §6). Scoped so the
|
||
other xyflow surfaces keep their current behavior until elevation #4 lands. */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.orchestration-canvas .animate-ping {
|
||
animation: none;
|
||
}
|
||
.orchestration-canvas .react-flow__edge.animated path {
|
||
animation: none;
|
||
stroke-dasharray: none;
|
||
}
|
||
}
|