/* theme.css — ชุดสี/ตัวอักษร/ส่วนประกอบกลาง "แหล่งเดียว" ของทั้งแอป v2 (29 ก.ค.69) — ยกเครื่องเป็นธีม Emerald Green ตามที่เจ้าของสั่ง วิธีใช้: เป็นอันแรกใน ⚠ หน้าไหนที่ยังประกาศ :root ของตัวเองไว้ สีใหม่จะไม่มีผล (ของหน้าชนะเพราะมาทีหลัง) → ต้องลบ :root ของหน้านั้นออก แล้วให้ใช้ตัวแปรจากไฟล์นี้แทน */ :root { /* ── แบรนด์ (Emerald Green) ── */ --pri: #087A55; /* สีหลัก — ปุ่ม/ลิงก์/สถานะสำเร็จ */ --pri-d: #07583F; /* เข้ม — hover, หัวเรื่องเน้น */ --pri-l: #0FA070; /* อ่อน — เส้นเน้น/ไอคอน */ --pri-pale: #E8F5EF; /* พื้นอ่อน — เมนูที่เลือกอยู่, badge สำเร็จ */ --pri-pale2: #D3EBE0; /* พื้นอ่อน (เข้มขึ้นนิด) — hover ของพื้นอ่อน */ /* ── สีเน้น (ใช้กับไอคอนหมวด/กราฟ/ชิป — ค่าตรงตามภาพตัวอย่าง) ── */ --acc-amber: #F59E0B; --acc-blue: #3882F6; --acc-red: #EF4444; --acc-violet: #8B5CF6; --acc-slate: #64748B; /* ── กลาง ── */ --ink: #0F172A; /* ตัวอักษรหลัก */ --ink2: #334155; /* ตัวอักษรรอง */ --mut: #64748B; /* คำอธิบาย */ --mut2: #94A3B8; /* จาง — placeholder */ --line2: #CBD5E1; /* เส้นเข้ม — ขอบช่องกรอก */ --line: #E2E8F0; /* เส้นปกติ — ขอบการ์ด/ตาราง */ --bg: #F1F5F9; /* พื้นหลังหน้า */ --bg2: #F8FAFC; /* พื้นหัวตาราง/แถบย่อย */ --card: #FFFFFF; /* ── สีสถานะสำหรับ "ตัวอักษร" (เข้มกว่าสีเน้น เพื่อให้อ่านออกบนพื้นอ่อน) ── */ --ok: #087A55; --ok-bg: #E8F5EF; --red: #DC2626; --red-bg: #FEE2E2; --amber: #B45309; --amber-bg: #FEF3C7; --blue: #1D4ED8; --blue-bg: #E0EDFE; --violet: #6D28D9; --violet-bg: #EDE9FE; /* ── รูปทรง/เงา/ตัวอักษร ── */ --font: 'Sarabun', 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif; --r: 12px; --r-sm: 9px; --r-lg: 16px; --shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05); --shadow-md: 0 4px 14px rgba(15,23,42,.10); --shadow-lg: 0 14px 40px rgba(15,23,42,.16); /* ── แถบเมนูซ้าย (shell.js) — พื้นเขียว Emerald ตามภาพที่เจ้าของส่งมา ── */ --side-bg: #087A55; /* พื้นแถบ */ --side-ink: #EAF6F1; /* ชื่อกลุ่ม */ --side-ink2: #C2E2D4; /* เมนูย่อย */ --side-hover: rgba(255,255,255,.12); --side-on: rgba(255,255,255,.17); /* กลุ่มที่เปิดอยู่ */ --side-line: rgba(255,255,255,.17); /* ความกว้างแถบเมนูซ้ายปัจจุบัน — shell.js เป็นคนตั้งค่า หน้าไหนมีแถบ fixed เต็มความกว้าง (เช่น bulk bar) ให้ใช้ left:var(--gs-w,0) */ --gs-w: 0px; /* ── ชื่อเดิมที่หน้าเก่า ๆ อ้างอยู่ (map มาที่ชุดใหม่ ไม่ต้องไล่แก้ทุกที่พร้อมกัน) ── */ --green: var(--pri); --green-dark: var(--pri-d); --green-bg: var(--pri-pale); --green-pale: var(--pri-pale); --pri2: var(--pri-d); --dark: var(--pri-d); --tint: var(--pri-pale); --grey-bg: #F1F5F9; --err: var(--red); } /* ไอคอนเส้นอยู่ที่ /icons.css (คลาส .ic / .ic-xxx) — โหลดคู่กับไฟล์นี้ทุกหน้า */ /* ── ตัวอักษร: H1 32/Bold · H2 24/Bold · H3 18/SemiBold · Body 16/14 · Caption 12 ── */ .gmt-h1 { font-size: 32px; font-weight: 700; line-height: 1.25; margin: 0 0 6px; color: var(--ink); } .gmt-h2 { font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; color: var(--ink); } .gmt-h3 { font-size: 18px; font-weight: 600; line-height: 1.35; margin: 0 0 5px; color: var(--ink); } .gmt-body-lg { font-size: 16px; font-weight: 400; } .gmt-cap { font-size: 12px; color: var(--mut); } /* ── พื้นฐานที่ทุกหน้าเขียนซ้ำ ── */ .gmt-body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 14.5px; } .gmt-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow); } .gmt-btn { border: 1.5px solid var(--pri); background: var(--pri); color: #fff; border-radius: var(--r-sm); padding: 8px 15px; font: inherit; font-weight: 700; cursor: pointer; transition: background .12s, border-color .12s; } .gmt-btn:hover:not(:disabled) { background: var(--pri-d); border-color: var(--pri-d); } .gmt-btn:disabled { opacity: .45; cursor: default; } .gmt-btn.line { background: #fff; color: var(--pri); } .gmt-btn.line:hover:not(:disabled) { background: var(--pri-pale); } .gmt-btn.sm { padding: 5px 11px; font-size: 12.5px; } .gmt-btn.red { background: var(--red); border-color: var(--red); } .gmt-btn.red:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; } .gmt-badge { display: inline-block; border-radius: 10px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #eef2f7; color: #475569; } .gmt-badge.ok { background: var(--ok-bg); color: var(--ok); } .gmt-badge.warn { background: var(--amber-bg); color: var(--amber); } .gmt-badge.bad { background: var(--red-bg); color: var(--red); } .gmt-badge.info { background: var(--blue-bg); color: var(--blue); } .gmt-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--pri); border-radius: 50%; animation: gmtsp .7s linear infinite; vertical-align: -2px; } @keyframes gmtsp { to { transform: rotate(360deg); } } .gmt-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 26px 12px; z-index: 80; } .gmt-modal.on { display: flex; } .gmt-sheet { background: var(--card); border-radius: var(--r-lg); padding: 18px; max-width: 760px; width: 100%; position: relative; box-shadow: var(--shadow-lg); } .gmt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .gmt-table th { background: var(--bg2); text-align: left; padding: 6px 8px; font-size: 12px; color: var(--mut); white-space: nowrap; border-bottom: 1px solid var(--line); } .gmt-table td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: top; } .gmt-table td.num, .gmt-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .gmt-mut { color: var(--mut); font-size: 12.5px; } .gmt-neg { color: var(--red); }