@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ============================================================================ * cad-theme.css — "CAD Minimal" theme for the Roof Truss Calculator * * Loaded by: index.html (Truss) — replaces fut-theme.css for this app only * Look: minimal structural-design-software — flat surfaces, hairline * borders, one engineering-blue accent, readable Sarabun type, * tabular JetBrains Mono numerals, subtle drafting grid. * * Modes: 3 themes — dark (default) / light / system * theme-switcher.js toggles `class="cad-light"` on ; * "system" resolves via matchMedia and updates live. * * Strategy: same proven pattern as fut-theme.css — hijack the app's CSS * variables at :root, then high-specificity !important overrides * for the hardcoded bits (Tailwind utilities, JS-generated HTML). * ========================================================================== */ /* ============================================================ * 1. Design tokens * ========================================================================== */ :root{ color-scheme: dark; /* --- CAD dark (default) --- */ --c-bg: #14161a; /* app backdrop */ --c-panel: #1c1f25; /* base surface */ --c-panel2: #23272e; /* raised surface / table header */ --c-hover: #2a2f37; --c-line: #343a43; /* hairline borders */ --c-line-2: #454c57; /* stronger border / focus edge */ --c-text: #e8ebef; --c-text-2: #c3c9d1; --c-mute: #98a1ac; --c-faint: #6d7681; --c-accent: #5b9dff; /* engineering blue */ --c-accent-bg: rgba(91,157,255,.13); --c-accent2: #b39dfa; /* secondary (moment/violet family) */ --c-good: #4ade80; --c-warn: #fbbf24; --c-bad: #f87171; --c-good-bg: rgba(74,222,128,.12); --c-warn-bg: rgba(251,191,36,.12); --c-bad-bg: rgba(248,113,113,.12); --c-grid-line: rgba(255,255,255,.045); --c-grid-bg: #191c21; --c-shadow: none; --cad-font: 'Sarabun', -apple-system, 'Segoe UI', 'Noto Sans Thai', sans-serif; --cad-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace; /* --- hijack app variables (base :root in index.html) --- */ --bg: var(--c-bg) !important; --panel: var(--c-panel) !important; --panel2: var(--c-panel2) !important; --line: var(--c-line) !important; --accent: var(--c-accent) !important; --accent2: var(--c-accent2) !important; --good: var(--c-good) !important; --warn: var(--c-warn) !important; --bad: var(--c-bad) !important; --text: var(--c-text) !important; --mute: var(--c-mute) !important; } /* --- CAD light (drafting paper) — theme-switcher toggles html.cad-light --- */ html.cad-light{ color-scheme: light; --c-bg: #eef0f3; --c-panel: #ffffff; --c-panel2: #f4f6f8; --c-hover: #eaedf1; --c-line: #d7dbe1; --c-line-2: #b9c0c9; --c-text: #1e2430; --c-text-2: #3a4350; --c-mute: #5d6673; --c-faint: #8a94a1; --c-accent: #185fd6; --c-accent-bg: rgba(24,95,214,.10); --c-accent2: #6d4fc9; --c-good: #158445; --c-warn: #a16207; --c-bad: #cf3535; --c-good-bg: rgba(21,132,69,.10); --c-warn-bg: rgba(161,98,7,.11); --c-bad-bg: rgba(207,53,53,.10); --c-grid-line: rgba(30,36,48,.06); --c-grid-bg: #f8f9fb; --c-shadow: 0 1px 3px rgba(20,26,38,.07); } /* ============================================================ * 2. Document & body — flat, readable type (bigger than before) * ========================================================================== */ html{ background: var(--c-bg) !important; } html, body{ font-family: var(--cad-font) !important; font-size: 15.5px !important; /* เดิม 13.5px — ใหญ่ขึ้นอ่านง่าย */ line-height: 1.5 !important; color: var(--c-text) !important; background: var(--c-bg) !important; -webkit-font-smoothing: antialiased !important; text-rendering: optimizeLegibility !important; letter-spacing: 0 !important; } .mono, .num, td.num, th.num{ font-family: var(--cad-mono) !important; font-variant-numeric: tabular-nums !important; } /* ============================================================ * 3. Headings — clear hierarchy, no uppercase, no condensed face * ========================================================================== */ h1, h2, h3, h4, h5, h6{ font-family: var(--cad-font) !important; color: var(--c-text) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.25 !important; } h1{ font-size: 22px !important; } h2{ font-size: 19px !important; } h3{ font-size: 16.5px !important; } h4{ font-size: 15px !important; } .small, .muted, .sub, .mute{ color: var(--c-mute) !important; } /* semantic result colors */ .ok { color: var(--c-good) !important; } .bad { color: var(--c-bad) !important; } .warn{ color: var(--c-warn) !important; } .ten { color: var(--c-bad) !important; } /* tension */ .com { color: var(--c-good) !important; } /* compression */ /* ============================================================ * 4. Font-size bumps for tiny Tailwind utilities (คงโครงสร้าง DOM เดิม) * ========================================================================== */ .text-\[9px\] { font-size: 11px !important; } .text-\[10px\]{ font-size: 11.5px !important; } .text-\[10\.5px\]{ font-size: 12px !important; } .text-\[11px\]{ font-size: 12.5px !important; } .text-\[11\.5px\]{ font-size: 12.5px !important; } .text-\[12px\]{ font-size: 13px !important; } .text-\[13px\]{ font-size: 14px !important; } .text-xs{ font-size: 13px !important; } .text-sm{ font-size: 14.5px !important; } /* ============================================================ * 5. Form controls — clear, calm, larger * ========================================================================== */ input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="search"], input:not([type]), select, textarea, .input, .select{ font-family: var(--cad-font) !important; font-size: 14.5px !important; /* เดิม 12.5px */ font-weight: 500 !important; color: var(--c-text) !important; background: var(--c-panel) !important; border: 1px solid var(--c-line-2) !important; border-radius: 6px !important; padding: 7px 10px !important; min-height: 34px !important; line-height: 1.4 !important; outline: none !important; box-shadow: none !important; transition: border-color .12s, box-shadow .12s !important; } input::placeholder, textarea::placeholder{ color: var(--c-faint) !important; } input:focus, select:focus, textarea:focus, .input:focus, .select:focus{ border-color: var(--c-accent) !important; background: var(--c-panel) !important; box-shadow: 0 0 0 3px var(--c-accent-bg) !important; } select option{ background: var(--c-panel) !important; color: var(--c-text) !important; } /* native checkbox / radio / range — minimal, accent-tinted */ input[type="checkbox"], input[type="radio"]{ accent-color: var(--c-accent) !important; width: 16px !important; height: 16px !important; min-height: 0 !important; padding: 0 !important; border-radius: 3px !important; cursor: pointer !important; } input[type="range"]{ accent-color: var(--c-accent) !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* validation error state (both modes) */ .input.input-error, .select.input-error{ border-color: var(--c-bad) !important; background: var(--c-bad-bg) !important; box-shadow: 0 0 0 3px var(--c-bad-bg) !important; } #inputValidationBanner, .validation-banner{ background: var(--c-bad-bg) !important; border: 1px solid var(--c-bad) !important; color: var(--c-text) !important; border-radius: 8px !important; box-shadow: none !important; } .validation-banner strong{ color: var(--c-bad) !important; } /* ============================================================ * 6. Buttons — rectangular, flat, obvious primary * ========================================================================== */ button, .btn{ font-family: var(--cad-font) !important; font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--c-text) !important; padding: 8px 14px !important; min-height: 34px !important; line-height: 1.3 !important; border: 1px solid var(--c-line-2) !important; border-radius: 6px !important; cursor: pointer !important; background: var(--c-panel) !important; clip-path: none !important; box-shadow: none !important; transition: background .12s, border-color .12s, color .12s !important; } button:hover, .btn:hover{ background: var(--c-hover) !important; border-color: var(--c-line-2) !important; box-shadow: none !important; filter: none !important; transform: none !important; } button:active, .btn:active{ transform: translateY(1px) !important; } button:disabled, .btn:disabled{ opacity: .45 !important; cursor: default !important; } /* primary action — solid engineering blue */ button.btn-primary, .btn.btn-primary, button.primary, button[data-variant="primary"], button#btn-unified-pdf, button#btn-pdf, button#btn-report, button[onclick*="export"], button[onclick*="calculate"], button[onclick*="recalc"]{ color: #ffffff !important; background: var(--c-accent) !important; border-color: var(--c-accent) !important; } button.btn-primary:hover, .btn.btn-primary:hover, button#btn-unified-pdf:hover, button[onclick*="export"]:hover, button[onclick*="calculate"]:hover, button[onclick*="recalc"]:hover{ filter: brightness(1.08) !important; box-shadow: none !important; } .btn-secondary{ background: var(--c-panel) !important; color: var(--c-mute) !important; } .btn-ghost{ background: transparent !important; color: var(--c-accent) !important; border-color: var(--c-line-2) !important; } .btn-ghost:hover{ background: var(--c-accent-bg) !important; } .view-btn{ font-size: 12.5px !important; padding: 5px 12px !important; min-height: 28px !important; clip-path: none !important; border-radius: 5px !important; background: var(--c-panel) !important; color: var(--c-mute) !important; } .view-btn.active{ background: var(--c-accent) !important; color: #fff !important; border-color: var(--c-accent) !important; box-shadow: none !important; } /* ============================================================ * 7. Tabs — flat underline (drafting-software style) * ========================================================================== */ .tabs{ border-bottom: 1px solid var(--c-line) !important; gap: 2px !important; } .tab{ font-family: var(--cad-font) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; /* เดิม 12.5px */ color: var(--c-mute) !important; background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding: 9px 14px !important; } .tab:hover{ color: var(--c-text) !important; background: var(--c-hover) !important; } .tab.active{ color: var(--c-accent) !important; background: transparent !important; border-bottom: 2px solid var(--c-accent) !important; } .tab.active::after{ content: none !important; } /* ============================================================ * 8. Panels & cards — flat surface, hairline border, no glow * ========================================================================== */ .panel, .section, .card, .svg-container{ background: var(--c-panel) !important; border: 1px solid var(--c-line) !important; border-radius: 10px !important; color: var(--c-text) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: var(--c-shadow) !important; } .panel::before, .card::before{ content: none !important; } .section-title{ font-family: var(--cad-font) !important; color: var(--c-mute) !important; font-weight: 700 !important; letter-spacing: .02em !important; text-transform: none !important; font-size: 13px !important; } .card .label{ color: var(--c-mute) !important; font-family: var(--cad-font) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.35 !important; } .label{ color: var(--c-mute) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.35 !important; } .card .value{ color: var(--c-text) !important; font-family: var(--cad-mono) !important; font-weight: 700 !important; font-size: 20px !important; font-variant-numeric: tabular-nums !important; } .card .unit{ color: var(--c-mute) !important; font-weight: 500 !important; } .card.good{ border-left: 3px solid var(--c-good) !important; } .card.warn{ border-left: 3px solid var(--c-warn) !important; } .card.bad { border-left: 3px solid var(--c-bad) !important; } .metric{ background: var(--c-panel2) !important; border: 1px solid var(--c-line) !important; border-radius: 6px !important; padding: 8px 13px !important; } .metric .v{ color: var(--c-text) !important; font-family: var(--cad-mono) !important; font-weight: 700 !important; } .metric .l{ color: var(--c-mute) !important; } .note{ background: var(--c-warn-bg) !important; border-left: 3px solid var(--c-warn) !important; color: var(--c-text-2) !important; border-radius: 6px !important; } /* chip */ .chip{ background: var(--c-panel2) !important; color: var(--c-text-2) !important; border: 1px solid var(--c-line) !important; border-radius: 999px !important; font-family: var(--cad-font) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 500 !important; } /* formula box */ .formula{ background: var(--c-panel2) !important; color: var(--c-text) !important; border: 1px solid var(--c-line) !important; border-left: 3px solid var(--c-accent) !important; border-radius: 6px !important; font-family: var(--cad-mono) !important; font-size: 13.5px !important; } .formula-title{ color: var(--c-accent) !important; font-family: var(--cad-font) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important; } /* ============================================================ * 9. Tables — readable data grid (bigger type, neutral header) * ========================================================================== */ table, .tbl, table.r{ background: var(--c-panel) !important; border: 1px solid var(--c-line) !important; border-collapse: separate !important; border-spacing: 0 !important; border-radius: 8px !important; overflow: hidden !important; font-size: 13.5px !important; /* เดิม 12px */ } th, td, .tbl th, .tbl td, table.r th, table.r td{ border: 0 !important; border-bottom: 1px solid var(--c-line) !important; padding: 8px 11px !important; color: var(--c-text) !important; text-align: left !important; vertical-align: middle !important; } tr:last-child td{ border-bottom: 0 !important; } th, .tbl th, table.r th{ background: var(--c-panel2) !important; color: var(--c-text-2) !important; font-family: var(--cad-font) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; } tbody tr:hover td, .tbl tr:hover td, table.r tr:hover td{ background: var(--c-hover) !important; } /* ============================================================ * 10. Badges / status — flat pills, no clip-path * ========================================================================== */ .status, .badge{ font-family: var(--cad-font) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: .01em !important; font-size: 11.5px !important; padding: 2.5px 10px !important; border-radius: 5px !important; clip-path: none !important; } .status.pass, .badge.ok{ background: var(--c-good-bg) !important; color: var(--c-good) !important; border: 1px solid var(--c-good) !important; box-shadow: none !important; } .status.fail, .badge.no{ background: var(--c-bad-bg) !important; color: var(--c-bad) !important; border: 1px solid var(--c-bad) !important; box-shadow: none !important; } .badge.warn{ background: var(--c-warn-bg) !important; color: var(--c-warn) !important; border: 1px solid var(--c-warn) !important; box-shadow: none !important; } /* ============================================================ * 11. App chrome — header, back bar, dropdown pops, sidebar * ========================================================================== */ header.sticky, header[class*="sticky"], header.app-header{ background: var(--c-panel) !important; border-bottom: 1px solid var(--c-line) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } .w-10.h-10{ background: var(--c-accent) !important; box-shadow: none !important; } aside, .sidebar{ background: var(--c-panel) !important; border-right: 1px solid var(--c-line) !important; color: var(--c-text) !important; } /* header dropdown pop (ข้อมูลโครงการ / บันทึก-ไฟล์) */ .hdr-pop{ background: var(--c-panel) !important; border: 1px solid var(--c-line-2) !important; border-radius: 10px !important; box-shadow: 0 12px 34px rgba(0,0,0,.28) !important; } .hdr-menu[open] > summary{ color: var(--c-accent) !important; border-color: var(--c-accent) !important; } /* suite back bar — คงน้ำเงินแบรนด์ อ่านชัดทั้ง 2 โหมด */ .suite-backbar{ background: #0C447C !important; color: #fff !important; font-size: 13.5px !important; } /* ============================================================ * 12. Drafting grid + diagram surfaces * ========================================================================== */ .gridbg{ background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px) !important; background-size: 20px 20px !important; background-color: var(--c-grid-bg) !important; } /* ============================================================ * 13. Tailwind colour-utility remaps (JS-generated HTML ทั้งแอป) * ========================================================================== */ [class*="text-slate-"]{ color: var(--c-mute) !important; } .text-slate-100, .text-slate-200, .text-slate-300, .text-white{ color: var(--c-text-2) !important; } [class*="text-cyan-"], [class*="text-sky-"], [class*="text-blue-"]{ color: var(--c-accent) !important; } [class*="text-violet-"], [class*="text-purple-"]{ color: var(--c-accent2) !important; } [class*="text-emerald-"], [class*="text-green-"]{ color: var(--c-good) !important; } [class*="text-rose-"], [class*="text-red-"], [class*="text-pink-"]{ color: var(--c-bad) !important; } [class*="text-amber-"], [class*="text-yellow-"]{ color: var(--c-warn) !important; } [class*="bg-slate-"]{ background-color: var(--c-panel2) !important; } [class*="bg-gradient-"]{ background-image: none !important; background-color: var(--c-panel2) !important; } [class*="border-slate-"], [class*="border-cyan-"]{ border-color: var(--c-line) !important; } .font-semibold, .font-bold, .font-extrabold{ color: var(--c-text) !important; } /* ============================================================ * 14. details, code, scrollbars, selection, loading * ========================================================================== */ details > summary{ color: var(--c-accent) !important; font-weight: 600 !important; } details > summary::before{ color: var(--c-accent) !important; } svg{ background: transparent !important; } code, pre{ font-family: var(--cad-mono) !important; color: var(--c-text) !important; background: var(--c-panel2) !important; border-radius: 4px !important; padding: 1px 5px !important; } pre{ padding: 10px 12px !important; border: 1px solid var(--c-line) !important; } ::selection{ background: var(--c-accent-bg) !important; color: var(--c-text) !important; } *::-webkit-scrollbar{ width: 10px !important; height: 10px !important; } *::-webkit-scrollbar-track{ background: transparent !important; } *::-webkit-scrollbar-thumb{ background: var(--c-line-2) !important; background-clip: padding-box !important; border: 2.5px solid transparent !important; border-radius: 10px !important; min-height: 30px !important; } *::-webkit-scrollbar-thumb:hover{ background: var(--c-faint) !important; background-clip: padding-box !important; } *::-webkit-scrollbar-corner{ background: transparent !important; } .loading{ background: color-mix(in srgb, var(--c-bg) 82%, transparent) !important; } .spinner{ border-color: var(--c-line) !important; border-top-color: var(--c-accent) !important; } /* ============================================================ * 15. Theme switcher FAB (สร้างโดย theme-switcher.js เวอร์ชัน 3 โหมด) * ========================================================================== */ #scth-fab .scth-btn{ display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; background: var(--c-panel) !important; border: 1px solid var(--c-line-2) !important; color: var(--c-text) !important; font-size: 18px !important; cursor: pointer !important; box-shadow: 0 2px 10px rgba(0,0,0,.22) !important; user-select: none !important; } #scth-fab .scth-btn:hover{ background: var(--c-hover) !important; } #scth-fab .scth-panel{ position: absolute; right: 0; bottom: 50px; width: 190px; background: var(--c-panel) !important; border: 1px solid var(--c-line-2) !important; border-radius: 10px !important; box-shadow: 0 12px 34px rgba(0,0,0,.30) !important; padding: 5px !important; font-size: 14px !important; } #scth-fab .scth-head{ font-size: 11.5px !important; font-weight: 700 !important; color: var(--c-faint) !important; padding: 7px 10px 4px !important; } #scth-fab .scth-opt{ display: flex !important; align-items: center !important; gap: 9px !important; padding: 8px 10px !important; border-radius: 7px !important; color: var(--c-text) !important; cursor: pointer !important; } #scth-fab .scth-opt:hover{ background: var(--c-hover) !important; } #scth-fab .scth-opt.on{ background: var(--c-accent-bg) !important; color: var(--c-accent) !important; } #scth-fab .scth-opt .scth-chk{ margin-left: auto !important; visibility: hidden; font-weight: 800 !important; } #scth-fab .scth-opt.on .scth-chk{ visibility: visible; color: var(--c-accent) !important; } /* ============================================================ * 16. Mobile refinements (คง breakpoint เดิมของแอป) * ========================================================================== */ @media (max-width: 640px){ html, body{ font-size: 15px !important; } .header-actions .btn, .header-actions details > summary{ min-height: 40px !important; } table.r th, table.r td{ padding: 7px 9px !important; font-size: 13px !important; } .tab{ font-size: 13.5px !important; padding: 9px 11px !important; } }