/* ========================================================================== SANCTUM — modern-theme.css สกินที่สอง "โมเดิร์น" — ซ้อนทับ terminal-theme.css โดยไม่แก้ไฟล์เดิมสักบรรทัด วิธีทำงาน: ทุกอย่างในไฟล์นี้ถูกล็อกไว้ใต้ :root[data-skin="modern"] ถ้าไม่มีแอตทริบิวต์นั้นที่แท็ก ไฟล์นี้จะไม่มีผลอะไรเลย ธีมเทอร์มินัลเดิมจึงยังเป็นค่าตั้งต้นเสมอ สองมิติที่แยกจากกัน: data-skin = terminal | modern (ภาษาภาพ: รูปทรง ฟอนต์ เงา) data-theme = dark | light (ความสว่าง) รวมกันได้ 4 หน้าตา โดยเขียนเพิ่มแค่ชุดตัวแปร ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Sarabun:wght@400;500;600;700&family=Noto+Serif+Thai:wght@500;600;700&display=swap'); /* -------------------------------------------------------------------------- 1. TOKENS — โหมดสว่าง (ค่าตั้งต้นของสกินนี้) -------------------------------------------------------------------------- */ :root[data-skin="modern"] { /* พื้นเป็นครีมอุ่นแบบเดียวกับโหมดสว่างเดิม แต่สว่างขึ้นให้โปร่งกว่า แล้วให้การ์ดเป็นขาวสนิท — การ์ดจึงลอยขึ้นจากพื้นด้วยสีตัวเอง ไม่ใช่ด้วยเงาอย่างเดียว */ --c-bg: #fbf9f4; --c-surface: #ffffff; --c-surface-hi: #f0ebe0; --c-border: #e8e1d3; --c-border-hi: #d3c9b6; --c-text: #241f1a; --c-text-dim: #5f564c; --c-text-faint: #948a7d; /* สีสถานะ — ปรับความหมายใหม่ตามระบบแบบทดสอบปรนัยที่ตรวจอัตโนมัติ ปลดล็อกแล้ว = ชมพูอิฐ (สีเดียวกับดินเผาแต่หมุนไปทางม่วง จึงเป็นญาติกับพื้นครีม) ยังไม่ปลดล็อก = เทาอุ่น ใช้ทั้ง locked และ ready เพราะจากสายตาคนอ่านมันคือเรื่องเดียวกัน ให้ตอบใหม่ = แดง เหมือนเดิม รอตรวจ = ส้ม เหลือไว้ให้บทเก่าที่ยังไม่มีแบบทดสอบปรนัย (เขียนตอบแล้วรอกัปตันตรวจ) */ --c-locked: #948a7d; --c-ready: #948a7d; --c-pending: #96590a; --c-granted: #a8506b; --c-denied: #b3261e; /* ดินเผา — สีประจำ Sanctum เดิม ไม่เปลี่ยนแบรนด์ เปลี่ยนแค่รูปทรง */ --c-accent: #a94a28; --c-accent-soft: rgba(217, 119, 87, 0.14); --btn-fill: #b4502b; --btn-fill-hi: #93401f; --btn-ink: #ffffff; /* ฟอนต์ — --f-mono ถูกอ้างถึงทั่วระบบอยู่แล้ว จึงชี้มันไปที่ฟอนต์ sans แทน ส่วนโค้ดกับสูตรยังต้องเป็น mono จริง จึงแยกออกมาเป็น --f-code */ /* ท้ายสายมีฟอนต์สัญลักษณ์ไว้รองรับอักขระคณิตศาสตร์ที่ฟอนต์หลักไม่มี (≠ ≤ ≥ ∈ ∑) ไม่งั้นเบราว์เซอร์จะวาดเป็นกล่องสี่เหลี่ยมเปล่า */ --f-body: "Plus Jakarta Sans", "Sarabun", system-ui, -apple-system, "Segoe UI Symbol", "Noto Sans Math", "DejaVu Sans", sans-serif; --f-display: "Fraunces", "Noto Serif Thai", Georgia, serif; --f-code: "JetBrains Mono", "IBM Plex Mono", "IBM Plex Sans Thai", Consolas, monospace; --f-mono: var(--f-body); /* รูปทรง — มนขึ้นทั้งระบบ ปุ่มมนสุดขอบ */ --radius: 12px; --radius-lg: 20px; --btn-radius: 999px; /* เงา — แหล่งแสงเดียวจากด้านบน เงาทอดลงล่างทางเดียว (ไม่ใช่ neumorphism) */ --shadow-soft: 0 1px 2px rgba(60, 45, 33, 0.05), 0 12px 32px -18px rgba(60, 45, 33, 0.28); --shadow-lift: 0 10px 22px -10px rgba(169, 74, 40, 0.45); --shadow-pop: 0 18px 44px -20px rgba(60, 45, 33, 0.38); /* ป้ายกำกับเลิกเป็นตัวพิมพ์ใหญ่ถ่างตัว กลายเป็นข้อความปกติที่หนาขึ้น */ --label-transform: none; --label-tracking: 0.01em; /* แถบสถานะกลายเป็นแถบลอย จึงต้องเผื่อที่ว่างใต้หน้ามากกว่าเดิม */ --statusline-h: 4.25rem; --dur: 200ms; } /* -------------------------------------------------------------------------- 2. TOKENS — โหมดมืดของสกินโมเดิร์น ม่วงกลางคืน ไม่ใช่เทาอมน้ำเงินแบบเทอร์มินัล -------------------------------------------------------------------------- */ :root[data-skin="modern"][data-theme="dark"] { /* ดำอมน้ำตาล ไม่ใช่เทาอมน้ำเงินแบบเทอร์มินัล — อยู่ตระกูลเดียวกับพื้นครีม */ --c-bg: #1c1917; --c-surface: #242020; --c-surface-hi: #2e2926; --c-border: #3a3330; --c-border-hi: #4d443f; --c-text: #f0eae2; --c-text-dim: #b3a89c; --c-text-faint: #857a6e; --c-locked: #857a6e; --c-ready: #857a6e; --c-pending: #e0a458; --c-granted: #e08aa2; --c-denied: #e0666e; /* ดินเผาบนพื้นมืดต้องสว่างและอิ่มขึ้น ไม่งั้นจะจมหายไปกับพื้น */ --c-accent: #e08256; --c-accent-soft: rgba(224, 130, 86, 0.14); --btn-fill: #c4603a; --btn-fill-hi: #d9714a; --btn-ink: #ffffff; --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px -20px rgba(0, 0, 0, 0.85); --shadow-lift: 0 10px 22px -10px rgba(196, 96, 58, 0.5); --shadow-pop: 0 18px 44px -18px rgba(0, 0, 0, 0.9); } /* -------------------------------------------------------------------------- 3. BASE -------------------------------------------------------------------------- */ :root[data-skin="modern"] body { font-family: var(--f-body); font-size: 1rem; letter-spacing: 0; } /* เส้นสแกน CRT เป็นภาษาของเทอร์มินัล ไม่ใช่ของสกินนี้ */ :root[data-skin="modern"] body::before { display: none; } /* เคยมีวงแสงสีจาง ๆ ติดมุมขวาบนไว้ตรงนี้ ถอดออกแล้ว — ของที่ติดตายอยู่มุมจอ ตลอดเวลาที่เลื่อนอ่านมีแต่ดึงสายตา และไม่ได้สื่อความหมายอะไรกับเนื้อหา */ :root[data-skin="modern"] h1, :root[data-skin="modern"] h2, :root[data-skin="modern"] h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; } :root[data-skin="modern"] h4 { font-weight: 700; } /* โค้ดต้องเป็น mono จริงเสมอ ไม่ว่าสกินไหน หมายเหตุสำคัญ: ห้ามยุ่งกับ font-family ของ .katex เด็ดขาด KaTeX วาดสัญลักษณ์คณิตศาสตร์ (≠ ≤ ∈ ∑ ฯลฯ) จากฟอนต์ KaTeX_* ของตัวเอง ถ้าไปทับด้วยฟอนต์อื่น สัญลักษณ์ที่ฟอนต์นั้นไม่มีจะกลายเป็นกล่องสี่เหลี่ยมทันที */ :root[data-skin="modern"] code, :root[data-skin="modern"] pre { font-family: var(--f-code); } /* ห้ามแตะ border ของลิงก์ที่สวมคลาส .btn เด็ดขาด — ปุ่มพวกนั้นใช้ border ทั้ง 4 ด้าน วาดเป็นกรอบแคปซูล ถ้าไปทับด้านล่างให้ใสจะเห็นกรอบขาดครึ่ง (ลิงก์ทั่วไปมีเส้นใต้ใสอยู่แล้วจาก terminal-theme.css จึงไม่ต้องเขียนซ้ำ) */ /* -------------------------------------------------------------------------- 4. SIGNATURE — prompt + statusline ▸ ของเทอร์มินัลถูกแทนด้วยจุดกลมเล็ก ๆ สีแอ็กเซนต์ -------------------------------------------------------------------------- */ :root[data-skin="modern"] .prompt { display: flex; align-items: center; gap: var(--s-2); color: var(--c-text-dim); font-size: var(--t-sm); font-weight: 600; letter-spacing: var(--label-tracking); text-transform: var(--label-transform); } :root[data-skin="modern"] .prompt::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background-color: var(--c-accent); } /* แถบสถานะ: จากแถบเต็มความกว้างแบบ tmux → แคปซูลลอยกลางจอ */ :root[data-skin="modern"] .statusline { left: 50%; right: auto; bottom: var(--s-4); transform: translateX(-50%); width: min(46rem, calc(100% - var(--s-8))); height: 2.75rem; padding: 0 var(--s-4); border: 1px solid var(--c-border); border-radius: 999px; background-color: var(--c-surface); box-shadow: var(--shadow-soft); font-size: var(--t-sm); letter-spacing: 0; backdrop-filter: blur(8px); } :root[data-skin="modern"] .statusline__key { color: var(--c-text-faint); font-weight: 600; } :root[data-skin="modern"] .statusline__toggle { padding: var(--s-1) var(--s-3); border-radius: 999px; background-color: var(--c-surface-hi); color: var(--c-text-dim); font-family: var(--f-body); font-weight: 600; white-space: nowrap; } :root[data-skin="modern"] .statusline__toggle:hover { background-color: var(--c-accent-soft); color: var(--c-accent); } /* -------------------------------------------------------------------------- 5. PANEL / CARD — มีสีพื้นผิวของตัวเอง + เงาทิศเดียว -------------------------------------------------------------------------- */ :root[data-skin="modern"] .panel, :root[data-skin="modern"] .card, :root[data-skin="modern"] .hub-panel, :root[data-skin="modern"] .editor { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } :root[data-skin="modern"] .modal__box { border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); } :root[data-skin="modern"] .panel__head, :root[data-skin="modern"] .card__head { border-bottom-color: var(--c-border); } /* -------------------------------------------------------------------------- 6. BADGE — จากกรอบบาง ๆ เป็นชิปพื้นนุ่ม -------------------------------------------------------------------------- */ :root[data-skin="modern"] .badge { padding: var(--s-1) var(--s-3); border-color: transparent; border-radius: 999px; background-color: color-mix(in srgb, currentColor 13%, transparent); font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--label-tracking); text-transform: var(--label-transform); } :root[data-skin="modern"] .badge::before { font-size: 0.55em; } /* -------------------------------------------------------------------------- 7. FORM -------------------------------------------------------------------------- */ :root[data-skin="modern"] .field__label, :root[data-skin="modern"] .quiz-edit-q__label { color: var(--c-text-dim); font-size: var(--t-sm); font-weight: 600; letter-spacing: var(--label-tracking); text-transform: var(--label-transform); } :root[data-skin="modern"] .input, :root[data-skin="modern"] .textarea, :root[data-skin="modern"] .sel__button { padding: var(--s-3) var(--s-4); border-radius: var(--radius); background-color: var(--c-bg); font-family: var(--f-body); } :root[data-skin="modern"] .textarea { font-family: var(--f-body); } :root[data-skin="modern"] .input:focus, :root[data-skin="modern"] .textarea:focus { box-shadow: 0 0 0 4px var(--c-accent-soft); } /* เมนูเลือกที่วาดเอง */ :root[data-skin="modern"] .sel__menu { padding: var(--s-2); border-radius: var(--radius); box-shadow: var(--shadow-pop); } :root[data-skin="modern"] .sel__item { padding: var(--s-2) var(--s-3); border-radius: 8px; } /* ตัวเลือกที่เลือกอยู่บอกด้วยสีอย่างเดียว ไม่ต้องมีเครื่องหมายถูกนำหน้า (▸ ของธีมคลาสสิกก็ถูกยกเลิกตรงนี้ด้วย ไม่งั้นจะติดมาทั้งสองสกิน) */ :root[data-skin="modern"] .sel__item--on::before { content: none; } /* -------------------------------------------------------------------------- 8. BUTTON — แคปซูล ปุ่มหลักทึบสี ยกตัวขึ้นตอนชี้ -------------------------------------------------------------------------- */ :root[data-skin="modern"] .btn { padding: var(--s-3) var(--s-6); border-radius: var(--btn-radius); font-family: var(--f-body); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; text-transform: none; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } :root[data-skin="modern"] .btn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--c-border-hi); color: var(--c-accent); } :root[data-skin="modern"] .btn--primary { background-color: var(--btn-fill); border-color: transparent; color: var(--btn-ink); box-shadow: var(--shadow-lift); } :root[data-skin="modern"] .btn--primary:hover:not(:disabled) { background-color: var(--btn-fill-hi); color: var(--btn-ink); } :root[data-skin="modern"] .btn--grant { background-color: var(--c-granted); border-color: transparent; color: #ffffff; } :root[data-skin="modern"] .btn--deny { background-color: var(--c-denied); border-color: transparent; color: #ffffff; } :root[data-skin="modern"] .btn--grant:hover:not(:disabled), :root[data-skin="modern"] .btn--deny:hover:not(:disabled) { color: #ffffff; filter: brightness(1.08); } :root[data-skin="modern"] .nav__toggle { border-radius: var(--btn-radius); font-family: var(--f-body); } /* หมายเหตุ: .nav__items เป็นกล่องจริง ๆ เฉพาะตอนยุบเป็นเมนูแฮมเบอร์เกอร์บนจอเล็ก บนจอกว้างมันเป็นแค่แถวของปุ่ม จึงต้องไม่ใส่พื้น ขอบ หรือเงาให้มันที่นี่ */ @media (max-width: 45rem) { :root[data-skin="modern"] .nav__items { padding: var(--s-2); border-radius: var(--radius); box-shadow: var(--shadow-pop); } } :root[data-skin="modern"] .modal__close { font-family: var(--f-body); } /* -------------------------------------------------------------------------- 9. MESSAGE — จากขีดซ้ายบาง ๆ เป็นกล่องพื้นนุ่ม -------------------------------------------------------------------------- */ :root[data-skin="modern"] .msg { border-left-width: 3px; border-radius: var(--radius); padding: var(--s-4); } :root[data-skin="modern"] .msg--ok { background-color: color-mix(in srgb, var(--c-granted) 8%, var(--c-surface)); } :root[data-skin="modern"] .msg--warn { background-color: color-mix(in srgb, var(--c-pending) 8%, var(--c-surface)); } :root[data-skin="modern"] .msg--error { background-color: color-mix(in srgb, var(--c-denied) 8%, var(--c-surface)); } /* -------------------------------------------------------------------------- 10. หน้า LOGIN -------------------------------------------------------------------------- */ :root[data-skin="modern"] .login__head { text-align: center; } /* ป้ายหน้าประตูแบบถ่างตัวอักษร → ชื่อแบรนด์ตัว serif */ :root[data-skin="modern"] .wordmark { font-family: var(--f-display); font-size: 2.75rem; font-weight: 700; letter-spacing: -0.02em; text-indent: 0; text-transform: none; } :root[data-skin="modern"] .wordmark__sub { color: var(--c-text-dim); font-size: var(--t-sm); letter-spacing: 0.02em; } /* บรรทัดบูต → ชิปสถานะเรียงแนวนอน ใช้มาร์กอัปเดิมทั้งหมด */ :root[data-skin="modern"] .boot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); font-size: var(--t-xs); } :root[data-skin="modern"] .boot__line { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border-radius: 999px; background-color: var(--c-surface-hi); color: var(--c-text-dim); font-weight: 500; } /* ตัวอักษร ok / -- ถูกแทนด้วยจุดกลมสีเดียวกัน */ :root[data-skin="modern"] .boot__ok, :root[data-skin="modern"] .boot__wait { font-size: 0; } :root[data-skin="modern"] .boot__ok::before, :root[data-skin="modern"] .boot__wait::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; } :root[data-skin="modern"] .login__note { text-align: center; font-size: var(--t-sm); } :root[data-skin="modern"] .login__switch { border-bottom: 0; color: var(--c-accent); font-family: var(--f-body); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- 11. หน้า DASHBOARD -------------------------------------------------------------------------- */ /* หัวข้อของหน้าเครื่องมือ (รายการบท / Learning Hub) ใช้ฟอนต์เดียวกับส่วนติดต่อผู้ใช้ ไม่ใช่ฟอนต์ serif ของเนื้อหา — เพราะทั้งหน้านี้มีแต่ปุ่ม เมนู และรายการที่เป็น sans ถ้ามี serif โผล่มาตัวเดียวใหญ่ ๆ มันจะกลายเป็นเสียงแปลกปลอมที่ไม่มีอะไรรองรับ (serif เก็บไว้ใช้กับ "เอกสาร" คือชื่อบทเรียนและหัวข้อในหน้าอ่าน ซึ่งมีทั้งหน้าเป็นพวกเดียวกัน) */ :root[data-skin="modern"] .board__title, :root[data-skin="modern"] .admin-head__title { font-family: var(--f-body); font-size: 2.125rem; font-weight: 700; letter-spacing: -0.035em; } :root[data-skin="modern"] .subject__title { font-family: var(--f-body); letter-spacing: -0.01em; } /* แถวบทเรียน — ขีดบอกสถานะเปลี่ยนจาก "ขอบซ้ายของการ์ด" เป็น "แท่งมนที่ลอยอยู่ข้างใน" เหตุผล: ขอบที่ชนมุมมนจะถูกไล่ความหนาจนเรียวที่ปลายทั้งสองข้าง ยิ่งมุมมนโต ยิ่งเห็นชัด พอทำเป็นแท่งอิสระที่มีมุมมนของตัวเอง รูปทรงจึงคมทุกขนาดและดูเป็นของที่ตั้งใจวาง */ :root[data-skin="modern"] .lesson { position: relative; padding-left: 26px; border-radius: var(--radius); border-left-width: 1px; border-left-color: var(--c-border); background-color: var(--c-surface); box-shadow: var(--shadow-soft); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } :root[data-skin="modern"] .lesson::before { content: ""; position: absolute; left: 10px; top: 50%; width: 4px; height: 58%; transform: translateY(-50%); border-radius: 999px; background-color: var(--c-border-hi); } :root[data-skin="modern"] .lesson--locked::before { background-color: var(--c-locked); } :root[data-skin="modern"] .lesson--ready::before { background-color: var(--c-ready); } :root[data-skin="modern"] .lesson--pending::before { background-color: var(--c-pending); } :root[data-skin="modern"] .lesson--granted::before { background-color: var(--c-granted); } :root[data-skin="modern"] .lesson--denied::before { background-color: var(--c-denied); } /* ในแถวบทเรียน ให้แท่งสีเป็นตัวบอกสถานะ ส่วนป้ายเป็นตัวอธิบายเป็นคำ จึงถอดพื้นสีกับจุดนำหน้าของป้ายออก ไม่ให้สองอย่างตะโกนสีเดียวกันพร้อมกัน */ :root[data-skin="modern"] .lesson .badge { padding-left: 0; padding-right: 0; background: none; color: var(--c-text-faint); font-weight: 500; } :root[data-skin="modern"] .lesson .badge::before { content: none; } :root[data-skin="modern"] .lesson--open:hover { transform: translateX(3px); border-color: var(--c-border-hi); } :root[data-skin="modern"] .lesson__name { font-weight: 600; } :root[data-skin="modern"] .picker__count { color: var(--c-text-faint); } /* -------------------------------------------------------------------------- 12. หน้า LESSON -------------------------------------------------------------------------- */ :root[data-skin="modern"] .lesson-head__title { font-family: var(--f-display); font-size: 2rem; letter-spacing: -0.02em; } :root[data-skin="modern"] .lesson-head__back, :root[data-skin="modern"] .source__link, :root[data-skin="modern"] .files__link { font-weight: 600; } /* ปุ่มลอยสองปุ่ม — ตอนนี้ข้างในเป็น SVG แล้ว ขนาดจึงคุมจาก .icon ใน lesson.css ที่นี่เหลือแค่เรื่องเงาให้เข้ากับสกิน */ :root[data-skin="modern"] .floating-back, :root[data-skin="modern"] .toc-open { box-shadow: var(--shadow-pop); } :root[data-skin="modern"] .floating-back { border-radius: 50%; } :root[data-skin="modern"] .reading-progress__fill { background-color: var(--c-accent); } :root[data-skin="modern"] .cta, :root[data-skin="modern"] .source, :root[data-skin="modern"] .files, :root[data-skin="modern"] .toc, :root[data-skin="modern"] .quiz-q { border-radius: var(--radius); } /* สารบัญลอยข้างเนื้อหา — ไม่ทำเป็นการ์ด เพราะกล่องที่ไม่มีพื้นแต่มีเงา จะกลายเป็นเงาลอยเปล่า ๆ ใช้เส้นรางแนวตั้งบอกขอบเขตแทน แล้วให้หัวข้อ ที่กำลังอ่านอยู่เป็นขีดสีบนรางนั้น */ :root[data-skin="modern"] .toc { box-shadow: none; border-radius: 0; } :root[data-skin="modern"] .toc > .prompt { margin-bottom: var(--s-3); } :root[data-skin="modern"] .toc__list { border-left: 1px solid var(--c-border); } :root[data-skin="modern"] .toc__item + .toc__item { margin-top: 0; } :root[data-skin="modern"] .toc__link { margin-left: -1px; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-left: 2px solid transparent; color: var(--c-text-dim); font-size: var(--t-sm); line-height: 1.5; text-wrap: pretty; } :root[data-skin="modern"] .toc__link:hover { color: var(--c-text); border-left-color: var(--c-border-hi); } :root[data-skin="modern"] .toc__link.is-active { color: var(--c-accent); border-left-color: var(--c-accent); font-weight: 700; } :root[data-skin="modern"] .toc__item--sub .toc__link { padding-top: var(--s-1); padding-bottom: var(--s-1); padding-left: var(--s-6); font-size: var(--t-xs); color: var(--c-text-faint); } :root[data-skin="modern"] .toc__item--sub .toc__link:hover, :root[data-skin="modern"] .toc__item--sub .toc__link.is-active { color: var(--c-accent); } /* หมายเหตุ: การจัดกล่อง .source .cta .files .answer ให้อยู่คอลัมน์เดียวกับเนื้อความ ย้ายไปแก้ที่ต้นเหตุใน lesson.css แล้ว เพราะเป็นเรื่องเลย์เอาต์ที่ทั้งสองสกินใช้ร่วมกัน ไม่ใช่เรื่องของสกินใดสกินหนึ่ง */ /* เนื้อหาบทเรียน — หัวข้อเป็น serif ตัวเนื้อความเป็น sans อ่านยาว ๆ สบายกว่า mono */ /* ขนาดตัวอักษรของหน้าอ่าน — 16.5px (กัปตันเลือกเองจากหน้าเทียบฟอนต์) เขียนเป็น rem ไม่ใช่ px เพื่อให้ยังขยายตามการตั้งค่าขนาดตัวอักษรของเบราว์เซอร์ได้ */ :root[data-skin="modern"] .reader { font-size: 1.03125rem; line-height: 1.85; } :root[data-skin="modern"] .reader h1, :root[data-skin="modern"] .reader h2, :root[data-skin="modern"] .reader h3 { font-family: var(--f-display); letter-spacing: -0.02em; } :root[data-skin="modern"] .reader h1 { font-size: 2.125rem; } :root[data-skin="modern"] .reader h2 { font-size: 1.625rem; } :root[data-skin="modern"] .reader h3 { font-size: 1.1875rem; } /* ขีดสีที่หัวมุมซ้ายของ h2 → กลายเป็นแท่งมนสั้น ๆ */ :root[data-skin="modern"] .reader h2::before { top: -2px; width: 3rem; height: 4px; border-radius: 999px; } /* ▸ หน้า h3 เป็นภาษาของเทอร์มินัล สกินนี้ให้หัวข้อยืนด้วยฟอนต์แทน */ :root[data-skin="modern"] .reader h3::before { content: none; } :root[data-skin="modern"] .reader h4 { color: var(--c-accent); font-size: var(--t-sm); letter-spacing: 0.02em; text-transform: none; } :root[data-skin="modern"] .reader a { border-bottom-style: solid; border-bottom-color: var(--c-border-hi); } :root[data-skin="modern"] .reader a:hover { border-bottom-color: var(--c-accent); } :root[data-skin="modern"] .quiz-q--correct, :root[data-skin="modern"] .quiz-q--wrong { border-radius: var(--radius); } /* -------------------------------------------------------------------------- 13. หน้า ADMIN -------------------------------------------------------------------------- */ :root[data-skin="modern"] .row, :root[data-skin="modern"] .fold, :root[data-skin="modern"] .tutors__row, :root[data-skin="modern"] .quiz-edit-q, :root[data-skin="modern"] .quiz-edit-choice { border-radius: var(--radius); } :root[data-skin="modern"] .row__title { font-weight: 600; } /* สารบัญ Learning Hub — จากปุ่มเหลี่ยมเรียงกัน เป็นแท็บแคปซูล */ :root[data-skin="modern"] .hub-menu { gap: var(--s-3); padding: var(--s-3) 0; border-bottom-color: var(--c-border); } :root[data-skin="modern"] .hub-menu__link { padding: var(--s-2) var(--s-4); border-radius: 999px; border-color: transparent; background-color: var(--c-surface-hi); font-family: var(--f-body); font-weight: 600; } :root[data-skin="modern"] .hub-menu__link:hover { background-color: var(--c-accent-soft); border-color: transparent; } :root[data-skin="modern"] .hub-menu__link.is-active { background-color: var(--btn-fill); border-color: transparent; color: var(--btn-ink); box-shadow: var(--shadow-lift); } /* ตารางภาพรวม — เก็บมุมให้มนแล้วตัดขอบในออก เหลือเส้นคั่นแนวนอนพอ */ :root[data-skin="modern"] .overview table { border-collapse: separate; border-spacing: 0; } :root[data-skin="modern"] .overview th, :root[data-skin="modern"] .overview td { border-width: 0 0 1px 0; padding: var(--s-3); } :root[data-skin="modern"] .overview th:first-child { border-top-left-radius: var(--radius); } :root[data-skin="modern"] .overview th:last-child { border-top-right-radius: var(--radius); } /* การ์ดคำตอบรอตรวจ — ขีดสีซ้ายหนาขึ้นและมนไปกับการ์ด */ :root[data-skin="modern"] .card { border-left-width: 4px; } :root[data-skin="modern"] .card__answer { border-radius: var(--radius); font-family: var(--f-body); } /* จุดสรุปสถานะยังเป็นจุด แต่ไม่ต้องเป็นสี่เหลี่ยมคม */ :root[data-skin="modern"] .overview__dot { border-radius: 50%; } /* -------------------------------------------------------------------------- 15. จอเล็ก -------------------------------------------------------------------------- */ @media (max-width: 40rem) { :root[data-skin="modern"] .wordmark { font-size: 2.125rem; letter-spacing: -0.02em; } :root[data-skin="modern"] .board__title, :root[data-skin="modern"] .admin-head__title, :root[data-skin="modern"] .lesson-head__title { font-size: 1.625rem; } :root[data-skin="modern"] .reader { font-size: 1rem; } :root[data-skin="modern"] .reader h1 { font-size: 1.75rem; } :root[data-skin="modern"] .reader h2 { font-size: 1.375rem; } /* แถบสถานะบนมือถือ — ตัด "กรอบ" ทิ้ง เหลือแต่ของที่กดได้ ข้อความ user / lesson / state เป็นข้อมูลประกอบที่หาอ่านได้จากหัวหน้าอยู่แล้ว แต่ปุ่มสองปุ่มไม่มีที่อื่นให้อยู่ จึงยกพื้นที่ทั้งแถบให้ปุ่มไปเลย */ :root[data-skin="modern"] .statusline { width: auto; left: 50%; right: auto; bottom: var(--s-2); gap: var(--s-2); padding: 0 var(--s-2); font-size: var(--t-xs); } :root[data-skin="modern"] .statusline > span:not(.statusline__spacer) { display: none; } :root[data-skin="modern"] .statusline__toggle { padding: var(--s-1) var(--s-3); } /* แถบล่างรวม — สูงขึ้นเล็กน้อยเพื่อให้ไอคอนกับปุ่มมีที่หายใจ และกว้างพอใส่ทั้งสี่หน้าที่ */ :root[data-skin="modern"] .statusline--bar { width: min(24rem, calc(100% - var(--s-4))); height: 3.25rem; padding: 0 var(--s-3); } } /* -------------------------------------------------------------------------- 16. เบราว์เซอร์ที่ยังไม่รองรับ color-mix — ถอยไปใช้พื้นเรียบแทน -------------------------------------------------------------------------- */ @supports not (background-color: color-mix(in srgb, red 10%, white)) { :root[data-skin="modern"] .badge { background-color: var(--c-surface-hi); } :root[data-skin="modern"] .msg--ok, :root[data-skin="modern"] .msg--warn, :root[data-skin="modern"] .msg--error { background-color: var(--c-surface); } }