/* ========================= ROOT VARIABLES (Light Mode) ========================= */ :root { /* Colors - Accent (Yellow) */ --color-accent: #ffd60a; --color-accent-light: #ffe680; --color-accent-dark: #cc8800; --color-accent-container: #fff1c2; --color-on-accent: #000000; --color-on-accent-container: #664d00; /* Colors - Status */ --color-success: #28a745; --color-success-light: #34d399; --color-success-dark: #058f35; --color-error: #d73a49; --color-error-light: #ff6b6b; --color-error-dark: #d73a49; --color-warning: #ffc53b; --color-warning-light: #ffd60a; --color-warning-dark: #cc8800; --color-info: #0366d6; --color-info-light: #5eb3ff; --color-info-dark: #0256b8; /* Colors - Neutral (Light Mode) */ --color-bg: #ffffff; --color-surface: #f6f8fa; --color-surface-2: #eff2f5; --color-surface-3: #e1e4e8; --color-border: #d1d5da; --color-border-light: #e1e4e8; --color-text-primary: #24292e; --color-text-secondary: #666666; --color-text-tertiary: #999999; --color-text-inverse: #ffffff; } /* ========================= DARK MODE (OLED Black) ========================= */ [data-theme="dark"] { /* Colors - Accent (Yellow - adapted for dark) */ --color-accent: #ffd60a; --color-accent-light: #ffe680; --color-accent-dark: #ffed4e; --color-accent-container: #664d00; --color-on-accent: #000000; --color-on-accent-container: #fff1c2; /* Colors - Neutral (Dark Mode - OLED) */ --color-bg: #000000; --color-surface: #0f0f0f; --color-surface-2: #1a1a1a; --color-surface-3: #262626; --color-border: #333333; --color-border-light: #404040; --color-text-primary: #ffffff; --color-text-secondary: #b0b0b0; --color-text-tertiary: #808080; --color-text-inverse: #000000; } /* ========================= NATIVE COMPONENT FIXES ========================= */ /* Retained explicitly to handle custom border styles injected by the parser script */ .border-left-4 { border-left-width: 4px; } /* Clean printing abstraction override layer */ @media print { .theme-toggle, form, header, nav, .filter-section { display: none !important; } } .mobile-translation-card { touch-action: pan-y; transition: opacity 240ms ease, transform 240ms ease; } .mobile-translation-card textarea { resize: vertical; min-height: 96px; } .mobile-nav-btn { touch-action: manipulation; } .mobile-card-enter-left { opacity: 0; transform: translateX(18px); } .mobile-card-enter-right { opacity: 0; transform: translateX(-18px); } .mobile-card-active { opacity: 1; transform: translateX(0); } /* ========================= RTL (Right-to-Left) SUPPORT Triggered automatically when langs.js sets for Arabic, Hebrew, Persian, Urdu, etc. (improvement #14). ========================= */ html[dir="rtl"] body { text-align: right; } /* Mirror directional icons that should flip with the script. */ html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-arrow-left { transform: scaleX(-1); } html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-chevron-left { transform: scaleX(-1); } /* Keep the fixed-position About FAB in the visually correct corner. */ html[dir="rtl"] a[data-mode-link="about"] { right: auto; left: 1rem; } /* Make sure table layouts read naturally in RTL. */ html[dir="rtl"] table { direction: rtl; } html[dir="rtl"] table thead th, html[dir="rtl"] table tbody td { text-align: right; } /* Keep numeric and monospaced content (URLs, IDs, hashes) left-to-right even inside an RTL document. */ html[dir="rtl"] .font-mono, html[dir="rtl"] code, html[dir="rtl"] .whitespace-pre-wrap { direction: ltr; unicode-bidi: embed; text-align: left; } /* Text input padding should swap in RTL so the caret starts on the right. */ html[dir="rtl"] input[type="text"], html[dir="rtl"] textarea { text-align: right; } /* Search input icon: was on the left (pl-3); mirror to the right in RTL. */ html[dir="rtl"] .relative .absolute.inset-y-0.left-0 { left: auto; right: 0; } html[dir="rtl"] .relative input.pl-9 { padding-left: 0.75rem; padding-right: 2.25rem; } /* Status pill / badges stay left-aligned within an RTL cell. */ html[dir="rtl"] .badge, html[dir="rtl"] [data-active="true"] { direction: ltr; }