/* skin-board.css — สกิน Monday (โครง/สีแบบบอร์ด) ของ CampOS * * ⭐ เปิดด้วย ใน index.html · ถอดคืนหน้าตาเดิม = ลบ attribute นั้นตัวเดียว * ⭐ ไม่แตะ logic — ทับ token --c-* ของ app.css + class ที่ shell.js ใส่ไว้ให้ (sk-*) * 🚨 กฎสีตาม house-style: แดง = ผิด/เลยกำหนด · ส้ม = รอ/เตือน · เขียว = เสร็จ/ผ่าน · เทา = ยังไม่เริ่ม * สีแอป (--ac) ใช้แยก "กลุ่ม" เท่านั้น ❌ ห้ามเอาไปบอกดี/ไม่ดี * 🚨 ลำดับ: กฎฐาน (.sk-stat) ต้องมาก่อนกฎโทน (.sk-ok …) — สลับแล้วสีทั้งระบบกลายเป็นเทา * ต้นแบบ: ~/.claude/skills/monday-design (ทาง B ดัดแปลง — โครง DOM ของ CampOS ไม่เหมือน puisabpak) */ html[data-skin="board"] { /* แบรนด์ — เปลี่ยนสีทั้งระบบที่ 5 บรรทัดนี้เท่านั้น */ --sk-primary: #0073ea; --sk-primary-dk: #0060b9; --sk-primary-rgb: 0 115 234; --sk-sel: #cce5ff; --sk-side: #f6f7fb; --sk-line: #d0d4e4; --sk-hover: #f5f6f8; --g-green: #00c875; --g-red: #e2445c; --g-orange: #fdab3d; --g-grey: #c4c4c4; --g-blue: #579bfc; --g-purple: #a25ddc; --g-teal: #00a9a1; --g-dgreen: #037f4c; --g-dark: #676879; --c-ink: 50 51 56; /* #323338 */ --c-muted: 103 104 121; /* #676879 */ --c-faint: 150 153 166; /* #9699a6 */ --c-line: 120 126 150; /* ฐานเส้น — ใช้ที่ alpha ต่ำ ≈ #d0d4e4 */ --c-surface: 255 255 255; --c-card: 255 255 255; --c-accent: var(--sk-primary-rgb); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04); --shadow-md: 0 6px 20px rgb(0 0 0 / 0.08); } /* ── ตัวอักษร: Figtree (ละติน/ตัวเลข) + Anuphan (ไทย) ── */ html[data-skin="board"] body { font-family: "Figtree", "Anuphan", system-ui, sans-serif; background: #fff; } html[data-skin="board"] .font-display, html[data-skin="board"] .cf-stat-num, html[data-skin="board"] .cf-eyebrow, html[data-skin="board"] .cf-ava, html[data-skin="board"] .cf-code { font-family: "Figtree", "Anuphan", system-ui, sans-serif; letter-spacing: 0; } html[data-skin="board"] .font-display.font-bold { font-weight: 600; } html[data-skin="board"] main > * { animation: none; } /* บอร์ดไม่ลอยขึ้นทีละชั้น — เปิดแล้วนิ่ง */ /* ── เนื้อหากว้างขึ้น (บอร์ดต้องการความกว้าง) ── */ html[data-skin="board"] main { max-width: 1440px; padding-top: 22px; } html[data-skin="board"] #topbar > div > div, html[data-skin="board"] #foot .max-w-6xl { max-width: 1440px; } /* ── เมนูข้าง = workspace ── */ html[data-skin="board"] #side > div { background: var(--sk-side); border-right: 1px solid var(--sk-line); } html[data-skin="board"] #drawer { background: var(--sk-side); } html[data-skin="board"] .sk-nav { border-radius: 6px; padding: 6px 10px; align-items: center; } html[data-skin="board"] .sk-nav:hover { background: rgb(var(--c-ink) / 0.06); } html[data-skin="board"] .sk-nav .sk-nav-sub { display: none; } /* Monday: เมนูบรรทัดเดียว คำอธิบายอยู่ในหน้า */ html[data-skin="board"] .sk-nav.is-on { background: var(--sk-sel); } html[data-skin="board"] .sk-nav.is-on, html[data-skin="board"] .sk-nav.is-on .sk-nav-ic { color: var(--sk-primary); } html[data-skin="board"] .sk-nav .sk-nav-ic { margin-top: 0; } html[data-skin="board"] .sk-group-label { display: flex; align-items: center; gap: 7px; letter-spacing: .04em; text-transform: none; font-size: 12px; color: rgb(var(--c-muted)); } html[data-skin="board"] .sk-group-label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--ac, var(--sk-primary)); flex: none; } html[data-skin="board"] .sk-app-ic { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: #fff; background: var(--ac, var(--sk-primary)); } html[data-skin="board"] .cf-mark { border: 0; border-radius: 8px; background: var(--sk-primary); color: #fff; } /* ── แถบบน ── */ html[data-skin="board"] #topbar > div { background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--sk-line); } html[data-skin="board"] .sk-crumb-sep { color: rgb(var(--c-faint)); } /* ── หัวหน้า ── */ html[data-skin="board"] .sk-head h1 { font-size: 24px; font-weight: 600; } html[data-skin="board"] .sk-head p { font-size: 14px; } /* ── ปุ่ม ── */ html[data-skin="board"] .sk-btn { border-radius: 4px; min-height: 36px; } html[data-skin="board"] .sk-btn-primary { background: var(--sk-primary); color: #fff; opacity: 1; } html[data-skin="board"] .sk-btn-primary:hover { background: var(--sk-primary-dk); } html[data-skin="board"] .sk-btn-ghost { border: 1px solid var(--sk-line); background: #fff; } html[data-skin="board"] .sk-btn-ghost:hover { background: var(--sk-hover); } html[data-skin="board"] .cf-btn { border-radius: 4px; border-color: var(--sk-line); box-shadow: none; } html[data-skin="board"] .cf-btn:hover { background: var(--sk-hover); box-shadow: none; } html[data-skin="board"] .cf-btn-primary { background: var(--sk-primary); border-color: var(--sk-primary); color: #fff; } html[data-skin="board"] .cf-btn-primary:hover { background: var(--sk-primary-dk); border-color: var(--sk-primary-dk); } /* ── ช่องกรอก / การ์ด / KPI ── */ html[data-skin="board"] .cf-input { border-radius: 4px; border-color: var(--sk-line); } html[data-skin="board"] .cf-input:hover { border-color: rgb(var(--c-ink) / 0.45); } html[data-skin="board"] .cf-input:focus { border-color: var(--sk-primary); box-shadow: 0 0 0 3px rgb(var(--sk-primary-rgb) / 0.15); } html[data-skin="board"] .cf-card { border-radius: 8px; border-color: var(--sk-line); box-shadow: none; } html[data-skin="board"] a.cf-card:hover, html[data-skin="board"] .cf-card-hover:hover { box-shadow: var(--shadow-md); border-color: var(--sk-line); } html[data-skin="board"] .cf-stat { border-radius: 8px; border-color: var(--sk-line); box-shadow: none; border-left-width: 4px; } html[data-skin="board"] .cf-stat::before { display: none; } html[data-skin="board"] .cf-stat-safe { border-left-color: var(--g-green); } html[data-skin="board"] .cf-stat-warn { border-left-color: var(--g-orange); } html[data-skin="board"] .cf-stat-bad { border-left-color: var(--g-red); } html[data-skin="board"] .cf-stat-ink { border-left-color: var(--g-dark); } html[data-skin="board"] .cf-stat-num { font-size: 1.6rem; font-weight: 600; } html[data-skin="board"] .cf-chip, html[data-skin="board"] .cf-zone { border-radius: 4px; } html[data-skin="board"] .cf-iconbox { border-radius: 6px; border-color: var(--sk-line); box-shadow: none; } html[data-skin="board"] .cf-eyebrow { color: rgb(var(--c-faint)); letter-spacing: .06em; font-weight: 500; } html[data-skin="board"] .hair, html[data-skin="board"] .hair-b, html[data-skin="board"] .hair-t, html[data-skin="board"] .hair-r { border-color: var(--sk-line); } /* ── ตาราง = บอร์ด: เส้นทุกช่อง · แถบสีกลุ่มซ้าย · แถวสูง 38px ── */ html[data-skin="board"] .sk-board { border-radius: 8px; border-left: 6px solid var(--ac, var(--sk-primary)); } html[data-skin="board"] .sk-board .cf-table th { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: rgb(var(--c-muted)); background: #fff; border: 1px solid var(--sk-line); border-top: 0; padding: 8px 12px; text-align: center; } html[data-skin="board"] .sk-board .cf-table td { border: 1px solid var(--sk-line); padding: 8px 12px; height: 38px; vertical-align: middle; } html[data-skin="board"] .sk-board .cf-table tr > :first-child { border-left: 0; } html[data-skin="board"] .sk-board .cf-table tr > :last-child { border-right: 0; } html[data-skin="board"] .sk-board .cf-table tbody tr:last-child td { border-bottom: 0; } html[data-skin="board"] .sk-board .cf-table tbody tr:hover { background: var(--sk-hover); } html[data-skin="board"] .sk-board .cf-table th:first-child { text-align: left; } /* ── ช่องสถานะ: สีทึบ ตัวขาว (ฐานก่อน โทนหลัง) ── */ html[data-skin="board"] .sk-stat { border-radius: 4px; color: #fff; font-weight: 500; min-width: 92px; justify-content: center; padding: 4px 10px; white-space: nowrap; line-height: 1.35; } html[data-skin="board"] .sk-stat.sk-ok { background: var(--g-green); color: #fff; } html[data-skin="board"] .sk-stat.sk-warn { background: var(--g-orange); color: #fff; } html[data-skin="board"] .sk-stat.sk-bad { background: var(--g-red); color: #fff; } html[data-skin="board"] .sk-stat.sk-ink { background: var(--g-grey); color: #fff; } /* ขารับ/ขาส่งกลับ (feedback 26 ก.ย.) — ฟ้า/ม่วง ไม่ชนสีสถานะ */ html[data-skin="board"] .sk-stat.sk-legpick { background: var(--g-blue); color: #fff; } html[data-skin="board"] .sk-stat.sk-legdrop { background: var(--g-purple); color: #fff; } /* ── กล่องลอย = แผงเลื่อนจากขวา (จอกว้าง) · มือถือเต็มจอ ── */ @media (min-width: 1024px) { html[data-skin="board"] #ov { justify-content: flex-end; align-items: stretch; padding: 0; } html[data-skin="board"] #modal, html[data-skin="board"] #modal.modal-bare { width: min(680px, 100vw); max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; border-left: 1px solid var(--sk-line); background: #fff; overflow-y: auto; } html[data-skin="board"] #modal.modal-bare > .cf-card { width: 100% !important; max-width: 100%; border: 0; border-radius: 0; box-shadow: none; } @media (prefers-reduced-motion: no-preference) { html[data-skin="board"] #ov:not(.hidden) #modal { animation: sk-slide .22s ease-out; } } } @keyframes sk-slide { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } } @media (max-width: 1023px) { html[data-skin="board"] #modal { border-radius: 8px; } } /* ── หน้าแรก (launcher) = แถวแอปกะทัดรัด ไอคอนซ้าย สีตามแอป ── */ html[data-skin="board"] .sk-launch-grid { gap: 14px; } html[data-skin="board"] .sk-app-card { border-radius: 10px; border-color: var(--sk-line); border-top: 4px solid var(--ac, var(--sk-primary)); } html[data-skin="board"] .sk-app-card:hover { background: var(--sk-hover); border-color: var(--sk-line); border-top-color: var(--ac, var(--sk-primary)); box-shadow: none; } html[data-skin="board"] .sk-app-card .cf-mark { width: 44px; height: 44px; border-radius: 10px; background: var(--ac, var(--sk-primary)); } /* ── มือถือ ── */ @media (max-width: 640px) { html[data-skin="board"] .sk-head h1 { font-size: 20px; } html[data-skin="board"] .cf-stat-num { font-size: 1.3rem; } html[data-skin="board"] .sk-board .cf-table td { border: 0; height: auto; } html[data-skin="board"] .sk-board .cf-table tr { border-bottom: 1px solid var(--sk-line); } html[data-skin="board"] .sk-launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html[data-skin="board"] .sk-app-card { padding: 12px; gap: 10px; } html[data-skin="board"] .sk-app-card .cf-mark { width: 32px; height: 32px; } html[data-skin="board"] .sk-app-card .sk-app-sub, html[data-skin="board"] .sk-app-card .sk-app-stats, html[data-skin="board"] .sk-app-card .sk-app-alerts { display: none; } html[data-skin="board"] .cf-input { font-size: 16px; } }