mirror of
https://github.com/diegosouzapw/OmniRoute.git
synced 2026-08-22 23:22:09 +03:00
591 lines
20 KiB
CSS
591 lines
20 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);
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* 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; }
|