/* ============================================================= CrewClock Theme v2 — ธีมกลางยกระดับทุกหน้า ถูกฉีดเข้า อัตโนมัติผ่าน i18n.php (หลัง CSS ของแต่ละหน้า จึงชนะ style เดิมโดยไม่ต้องแก้ไฟล์รายหน้า) Palette: Ink #0B1B33 · Blue #1F79F6 · Green #16C784 · Paper #F4F7FB ============================================================= */ :root{ --cc-ink:#0B1B33; --cc-blue:#1F79F6; --cc-deep:#1554B8; --cc-green:#16C784; --cc-paper:#F4F7FB; --cc-line:#E3E9F2; --cc-text:#182437; --cc-muted:#5B6B82; /* ทับตัวแปรเดิมของระบบ */ --wm-primary:var(--cc-blue); --wm-primary-dark:var(--cc-deep); --wm-bg:var(--cc-paper); --wm-text-main:var(--cc-text); --wm-text-muted:var(--cc-muted); } body{ background:var(--cc-paper) !important; color:var(--cc-text); font-family:'Sarabun',system-ui,sans-serif !important; } h1,h2,h3,h4,h5,h6,.navbar-brand,.btn,.fw-semibold,.fw-bold{ font-family:'Anuphan','Sarabun',sans-serif !important; } /* ---------- แถบเมนู: เส้นสแกน น้ำเงิน→เขียว (ลายเซ็นของแบรนด์) ---------- */ .wm-header, header .navbar, body > header{ background:#fff !important; border-bottom:1px solid var(--cc-line) !important; box-shadow:0 1px 8px rgba(11,27,51,.05); position:relative; } .wm-header::before, body > header::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--cc-blue) 0%,var(--cc-blue) 60%,var(--cc-green) 100%); } .navbar-brand{ font-weight:700 !important; color:var(--cc-ink) !important; letter-spacing:-.01em; } .navbar-nav .nav-link{ color:var(--cc-muted) !important; font-weight:500; font-size:.92rem; border-radius:10px; padding:.45rem .85rem !important; transition:all .15s; } .navbar-nav .nav-link:hover{ color:var(--cc-ink) !important; background:var(--cc-paper); } .navbar-nav .nav-link.active{ color:var(--cc-deep) !important; background:#EAF2FE; } /* ---------- การ์ด ---------- */ .card, .wm-card, .today-card, .card-cc{ border:1px solid var(--cc-line) !important; border-radius:16px !important; box-shadow:0 1px 4px rgba(11,27,51,.05) !important; transition:box-shadow .18s ease, transform .18s ease; } .card:hover, .wm-card:hover{ box-shadow:0 8px 24px rgba(11,27,51,.09) !important; } .card-header, .wm-card-header{ background:#fff !important; border-bottom:1px solid var(--cc-line) !important; border-radius:16px 16px 0 0 !important; font-family:'Anuphan',sans-serif; font-weight:600; color:var(--cc-ink); } /* ---------- ปุ่ม ---------- */ .btn{ border-radius:12px !important; font-weight:600 !important; } .btn-primary, .btn-wm-primary, .btn-cc{ background:linear-gradient(135deg,var(--cc-blue),var(--cc-deep)) !important; border:none !important; color:#fff !important; box-shadow:0 4px 14px rgba(31,121,246,.28); transition:transform .12s ease, box-shadow .12s ease; } .btn-primary:hover, .btn-wm-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(31,121,246,.36); } .btn-success{ background:var(--cc-green) !important; border:none !important; } .btn-outline-secondary{ border-radius:12px !important; } @media (prefers-reduced-motion:reduce){ .btn-primary:hover,.btn-wm-primary:hover,.card:hover{ transform:none; } } /* ---------- ตาราง ---------- */ .table{ border-color:var(--cc-line); background:#fff; border-radius:12px; overflow:hidden; } .table thead th, .table > :not(caption) > * > th{ background:var(--cc-ink) !important; color:#fff !important; font-family:'Anuphan',sans-serif; font-weight:600; font-size:.85rem; border:none !important; padding:.7rem .85rem; } .table tbody tr:hover{ background:#F0F6FF; } .table td{ vertical-align:middle; border-color:#EEF2F8 !important; } /* ---------- ฟอร์ม ---------- */ .form-control, .form-select{ border-radius:10px !important; border-color:var(--cc-line) !important; padding:.55rem .8rem; } .form-control:focus, .form-select:focus{ border-color:var(--cc-blue) !important; box-shadow:0 0 0 .2rem rgba(31,121,246,.15) !important; } .form-label{ font-weight:500; font-size:.88rem; color:var(--cc-text); } /* ---------- badge / alert ---------- */ .badge{ border-radius:999px !important; font-weight:600 !important; padding:.4em .75em !important; } .bg-primary{ background:var(--cc-blue) !important; } .bg-success, .badge-in{ background:#DDF7EC !important; color:#0B7A52 !important; } .alert{ border-radius:14px !important; border:none !important; } .alert-danger{ background:#FDECEC; color:#8E1B1B; } .alert-info{ background:#EAF2FE; color:var(--cc-deep); } .alert-warning{ background:#FFF7E6; color:#7A5200; } /* ---------- สถานะที่ใช้บ่อยในระบบเวลา ---------- */ .text-success{ color:var(--cc-green) !important; } .text-primary{ color:var(--cc-deep) !important; } /* ---------- ปุ่มสลับภาษา (จาก i18n) ให้เข้าธีม ---------- */ body > div[style*="position:fixed"][style*="bottom:14px"] a{ font-family:'Anuphan',sans-serif; } /* ---------- scrollbar ---------- */ ::-webkit-scrollbar{ width:9px; height:9px; } ::-webkit-scrollbar-thumb{ background:#C6D2E2; border-radius:99px; } ::-webkit-scrollbar-thumb:hover{ background:#A9BAD1; } ::-webkit-scrollbar-track{ background:transparent; } /* ---------- โฟกัสคีย์บอร์ด ---------- */ :focus-visible{ outline:3px solid var(--cc-blue) !important; outline-offset:2px; border-radius:6px; }