/* ========================================================================= Stylesheet.html ไฟล์รวมรูปแบบ (CSS) ทั้งหมดของเว็บแอป — แก้ไขหน้าตาเว็บได้ที่ไฟล์นี้ไฟล์เดียว ------------------------------------------------------------------------- โครงสร้างไฟล์ (แบ่งเป็น 10 ส่วน): [1] TOKENS ตัวแปรสีกลาง + ขนาดตัวอักษร (ควบคุมด้วย JS) [2] THEMES ชุดโทนสี 5 เฉด (ocean / forest / sunset / grape / rose) [3] NIGHT MODE โหมดกลางคืน (ทำงานร่วมกับทั้ง 5 เฉดสี) [4] BASE รีเซ็ต + พื้นฐานตัวอักษร [5] HEADER แถบหัวเว็บ + แผงควบคุม (ขนาดอักษร/สี/โหมดกลางคืน) [6] TABS แถบแท็บเนื้อหา [7] CARDS กล่องเนื้อหา, กล่องนิยาม, กล่องข้อควรจำ [8] INTERACTIVE ไดอะแกรมกดได้, การ์ดพลิก, accordion, ควิซ [9] UTILITIES คลาสช่วยจัดวาง, ตาราง, รูปภาพ, ลิงก์ข้าม [10] RESPONSIVE ปรับสำหรับจอมือถือ + การพิมพ์ ========================================================================= */ /* ========================= [1] TOKENS: ตัวแปรกลาง ========================= */ /* --fs-base คือขนาดตัวอักษรฐาน ปุ่ม A- / A / A+ จะแก้ค่านี้ผ่าน JavaScript ทุกขนาดตัวอักษรในเว็บอ้างอิงเป็น em/rem จึงขยาย-ย่อตามกันทั้งหน้า */ :root{ --fs-base: 17px; --radius-s: 8px; --radius-m: 14px; --radius-l: 22px; --gap-xs: 6px; --gap-s: 12px; --gap-m: 20px; --gap-l: 32px; --shadow-s: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow-m: 0 4px 16px rgba(0,0,0,.10); --shadow-l: 0 12px 36px rgba(0,0,0,.14); --speed: .25s; /* สีพื้นกลาง (โหมดกลางวัน) — โหมดกลางคืนจะเขียนทับใน [3] */ --bg: #f5f7fa; --surface: #ffffff; --surface-2: #eef2f7; --text: #1a2230; --text-soft: #55637a; --border: #dde4ee; --code-bg: #eef2f7; } /* ==================== [2] THEMES: ชุดโทนสี 5 เฉด ======================== */ /* วิธีเปลี่ยนสี: JS จะตั้งค่า แต่ละชุดกำหนด 6 ตัวแปร: --brand สีหลัก (ปุ่ม, แท็บที่เลือก, หัวข้อ) --brand-dark สีหลักเข้ม (ขอบ, ตัวอักษรบนพื้นอ่อน) --brand-soft สีหลักอ่อนมาก (พื้นหลังกล่อง highlight) --accent สีรอง ใช้เน้นจุดสำคัญ/คำตอบถูก --accent-soft สีรองอ่อน --grad ไล่เฉดสีสำหรับแถบหัวเว็บ */ html[data-theme="ocean"]{ --brand:#1565c0; --brand-dark:#0b3d78; --brand-soft:#e3f0fd; --accent:#00acc1; --accent-soft:#dff6f9; --grad: linear-gradient(135deg,#0b3d78 0%,#1565c0 55%,#00acc1 100%); } html[data-theme="forest"]{ --brand:#2e7d32; --brand-dark:#1b4d20; --brand-soft:#e6f4e7; --accent:#9ccc65; --accent-soft:#f0f8e6; --grad: linear-gradient(135deg,#1b4d20 0%,#2e7d32 55%,#7cb342 100%); } html[data-theme="sunset"]{ --brand:#e65100; --brand-dark:#9e3800; --brand-soft:#fff0e3; --accent:#f9a825; --accent-soft:#fff8e1; --grad: linear-gradient(135deg,#9e3800 0%,#e65100 55%,#f9a825 100%); } html[data-theme="grape"]{ --brand:#6a1b9a; --brand-dark:#43106b; --brand-soft:#f3e8f9; --accent:#ab47bc; --accent-soft:#f9edfc; --grad: linear-gradient(135deg,#43106b 0%,#6a1b9a 55%,#ab47bc 100%); } html[data-theme="rose"]{ --brand:#ad1457; --brand-dark:#78003c; --brand-soft:#fce4ec; --accent:#ec407a; --accent-soft:#fdeaf1; --grad: linear-gradient(135deg,#78003c 0%,#ad1457 55%,#ec407a 100%); } /* ==================== [3] NIGHT MODE: โหมดกลางคืน ======================= */ /* JS ตั้งค่า — เขียนทับเฉพาะ "สีพื้น/สีตัวอักษร" ส่วน --brand ของแต่ละเฉดยังทำงานอยู่ จึงได้ 5 เฉดสี x 2 โหมด = 10 แบบ */ html[data-mode="dark"]{ --bg: #0f141c; --surface: #171f2b; --surface-2: #1f2937; --text: #e8eef7; --text-soft: #9fb0c7; --border: #2b3646; --code-bg: #1f2937; --shadow-s: 0 1px 3px rgba(0,0,0,.5); --shadow-m: 0 4px 16px rgba(0,0,0,.55); --shadow-l: 0 12px 36px rgba(0,0,0,.6); } /* ในโหมดกลางคืน สีหลักต้องสว่างขึ้นเพื่อให้อ่านง่ายบนพื้นเข้ม */ html[data-mode="dark"][data-theme="ocean"] { --brand:#5aa9f5; --brand-dark:#8cc5fa; --brand-soft:#12314f; --accent:#4dd0e1; --accent-soft:#0e3238; } html[data-mode="dark"][data-theme="forest"]{ --brand:#7cc47f; --brand-dark:#a5d6a7; --brand-soft:#16321a; --accent:#c5e1a5; --accent-soft:#1d3319; } html[data-mode="dark"][data-theme="sunset"]{ --brand:#ff9d4d; --brand-dark:#ffbe80; --brand-soft:#3a1f0a; --accent:#ffca62; --accent-soft:#3a2d0a; } html[data-mode="dark"][data-theme="grape"] { --brand:#c07de0; --brand-dark:#d7a5ee; --brand-soft:#2e1240; --accent:#e099f0; --accent-soft:#331442; } html[data-mode="dark"][data-theme="rose"] { --brand:#f06292; --brand-dark:#f8a0bd; --brand-soft:#3d0f24; --accent:#ff8fb1; --accent-soft:#40122a; } /* รูปภาพโครงสร้างเคมีแบบลายเส้น (พื้นขาว-เส้นดำ) — กลับสีให้กลืนกับพื้นมืด */ html[data-mode="dark"] .chem-img{ filter: invert(.9) hue-rotate(180deg) saturate(1.15); } /* ยกเว้นภาพเรนเดอร์สามมิติ (ball-and-stick) ที่มีสีจริงของอะตอม — คงสีเดิมไว้บนพื้นขาว */ html[data-mode="dark"] .chem-img.photo{ filter:none; background:#fff; } /* ========================== [4] BASE: พื้นฐาน =========================== */ *,*::before,*::after{ box-sizing:border-box; } html{ font-size: var(--fs-base); scroll-behavior:smooth; } body{ margin:0; font-family:'Sarabun','Noto Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:var(--text); line-height:1.75; transition: background var(--speed), color var(--speed); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ line-height:1.4; margin:0 0 .6em; font-weight:700; } h2{ font-size:1.5rem; color:var(--brand); } h3{ font-size:1.2rem; color:var(--brand-dark); } p{ margin:0 0 1em; } sub,sup{ font-size:.7em; } a{ color:var(--brand); } img{ max-width:100%; height:auto; } ::selection{ background:var(--brand); color:#fff; } .wrap{ max-width:1080px; margin:0 auto; padding:0 var(--gap-m); } /* ============= [5] HEADER + CONTROL PANEL: หัวเว็บ/แผงควบคุม ============ */ .site-header{ background:var(--grad); color:#fff; padding: var(--gap-l) 0 var(--gap-m); box-shadow:var(--shadow-m); } .site-header .eyebrow{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; opacity:.85; margin:0 0 .4em; } .site-header h1{ font-size:1.85rem; margin:0 0 .25em; color:#fff; } .site-header .byline{ font-size:.88rem; opacity:.9; margin:0; } /* แผงควบคุม: ปุ่มขนาดอักษร + จานสี 5 เฉด + สวิตช์กลางคืน */ .controls{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-s); margin-top:var(--gap-m); background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(6px); border-radius:var(--radius-l); padding:10px 16px; } .ctl-group{ display:flex; align-items:center; gap:8px; } .ctl-label{ font-size:.76rem; opacity:.9; letter-spacing:.04em; } .ctl-sep{ width:1px; height:24px; background:rgba(255,255,255,.3); } .fs-btn{ border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.12); color:#fff; cursor:pointer; border-radius:var(--radius-s); padding:4px 11px; font-family:inherit; line-height:1.4; transition:var(--speed); } .fs-btn:hover{ background:rgba(255,255,255,.3); } .fs-btn.sm{ font-size:.8rem; } .fs-btn.md{ font-size:1rem; } .fs-btn.lg{ font-size:1.2rem; } #fsReadout{ font-size:.78rem; min-width:44px; text-align:center; opacity:.9; } /* จานสี: วงกลม 5 วง แสดงสีจริงของแต่ละธีม */ .swatch{ width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid rgba(255,255,255,.55); padding:0; transition:var(--speed); } .swatch:hover{ transform:scale(1.18); } .swatch[aria-pressed="true"]{ box-shadow:0 0 0 3px #fff; transform:scale(1.12); } .sw-ocean { background:linear-gradient(135deg,#0b3d78,#00acc1); } .sw-forest{ background:linear-gradient(135deg,#1b4d20,#7cb342); } .sw-sunset{ background:linear-gradient(135deg,#9e3800,#f9a825); } .sw-grape { background:linear-gradient(135deg,#43106b,#ab47bc); } .sw-rose { background:linear-gradient(135deg,#78003c,#ec407a); } .mode-btn{ border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.12); color:#fff; cursor:pointer; border-radius:var(--radius-l); padding:5px 14px; font-family:inherit; font-size:.82rem; display:flex; align-items:center; gap:6px; transition:var(--speed); } .mode-btn:hover{ background:rgba(255,255,255,.3); } /* แถบความคืบหน้า: นับแท็บที่ผู้เรียนเปิดอ่านแล้ว */ .progress-line{ height:4px; background:rgba(255,255,255,.22); border-radius:4px; overflow:hidden; margin-top:14px; } .progress-fill{ height:100%; width:0; background:#fff; transition:width .4s ease; } .progress-text{ font-size:.74rem; opacity:.85; margin-top:5px; } /* ========================= [6] TABS: แถบแท็บ ============================ */ .tabbar{ position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow-s); } .tabbar-inner{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:thin; padding:8px 0; } .tab{ flex:0 0 auto; cursor:pointer; border:none; background:transparent; color:var(--text-soft); font-family:inherit; font-size:.9rem; padding:9px 15px; border-radius:var(--radius-l); white-space:nowrap; display:flex; align-items:center; gap:7px; transition:var(--speed); } .tab:hover{ background:var(--surface-2); color:var(--text); } .tab[aria-selected="true"]{ background:var(--brand); color:#fff; box-shadow:var(--shadow-s); } .tab .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:0; transition:var(--speed); } .tab.visited .dot{ opacity:1; } .tab[aria-selected="true"] .dot{ background:#fff; } .panel{ display:none; animation:fadeUp .35s ease; padding: var(--gap-l) 0 64px; } .panel.active{ display:block; } @keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} } /* ======================== [7] CARDS: กล่องเนื้อหา ======================= */ .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:var(--gap-m); box-shadow:var(--shadow-s); margin-bottom:var(--gap-m); } .card-title{ display:flex; align-items:center; gap:10px; margin:0 0 var(--gap-s); font-size:1.15rem; color:var(--brand); } .card-title .ico{ width:34px; height:34px; flex:0 0 34px; border-radius:10px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; font-size:1rem; } /* กล่องนิยามศัพท์ */ .def{ background:var(--brand-soft); border-left:5px solid var(--brand); border-radius:0 var(--radius-s) var(--radius-s) 0; padding:14px 18px; margin:var(--gap-s) 0; } .def .term{ font-weight:700; color:var(--brand-dark); display:block; margin-bottom:3px; } /* กล่องข้อควรจำ / เกร็ดน่ารู้ */ .note{ background:var(--accent-soft); border:1px dashed var(--accent); border-radius:var(--radius-s); padding:14px 18px; margin:var(--gap-s) 0; } .note strong{ color:var(--brand-dark); } /* กล่องวัตถุประสงค์แบบมีหมายเลข */ .obj-list{ list-style:none; padding:0; margin:0; counter-reset:obj; } .obj-list li{ counter-increment:obj; position:relative; padding:14px 16px 14px 60px; margin-bottom:10px; background:var(--surface-2); border-radius:var(--radius-s); border-left:4px solid var(--brand); } .obj-list li::before{ content:counter(obj); position:absolute; left:16px; top:14px; width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.9rem; } /* ================= [8] INTERACTIVE: ส่วนโต้ตอบกับผู้เรียน ============== */ /* --- 8.1 ไดอะแกรมกดได้ (กดที่หมู่เคมี แล้วคำอธิบายจะแสดงด้านล่าง) --- */ .hotspot-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-m); align-items:start; } .hotspot-figure{ position:relative; background:var(--surface-2); border-radius:var(--radius-m); padding:var(--gap-m); text-align:center; } .hotspot-btns{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; } .hs-btn{ cursor:pointer; font-family:inherit; font-size:.85rem; border:2px solid var(--brand); background:transparent; color:var(--brand); border-radius:var(--radius-l); padding:6px 14px; transition:var(--speed); } .hs-btn:hover{ background:var(--brand-soft); } .hs-btn[aria-pressed="true"]{ background:var(--brand); color:#fff; } .hs-detail{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:var(--gap-m); min-height:180px; } .hs-detail h4{ color:var(--brand); margin-top:0; } /* --- 8.2 การ์ดพลิก (กดเพื่อดูคำตอบ) --- */ .flip-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--gap-s); } .flip{ perspective:1000px; height:170px; cursor:pointer; } .flip-inner{ position:relative; width:100%; height:100%; transition:transform .6s; transform-style:preserve-3d; } .flip.on .flip-inner{ transform:rotateY(180deg); } .flip-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--radius-m); padding:16px; display:grid; place-items:center; text-align:center; box-shadow:var(--shadow-s); font-size:.92rem; } .flip-front{ background:var(--brand); color:#fff; font-weight:700; } .flip-back{ background:var(--surface); color:var(--text); border:2px solid var(--brand); transform:rotateY(180deg); overflow:auto; line-height:1.6; } /* --- 8.3 Accordion (กดเพื่อกาง/ยุบเนื้อหาเสริม) --- */ .acc{ border:1px solid var(--border); border-radius:var(--radius-s); margin-bottom:10px; overflow:hidden; background:var(--surface); } .acc-head{ width:100%; text-align:left; cursor:pointer; font-family:inherit; font-size:.96rem; font-weight:600; color:var(--text); background:var(--surface-2); border:none; padding:13px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px; } .acc-head:hover{ color:var(--brand); } .acc-head .chev{ transition:transform var(--speed); color:var(--brand); } .acc.open .acc-head .chev{ transform:rotate(90deg); } .acc-body{ display:none; padding:16px; border-top:1px solid var(--border); } .acc.open .acc-body{ display:block; } /* --- 8.4 ควิซ --- */ .quiz-q{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:var(--gap-m); margin-bottom:var(--gap-s); } .quiz-q .qtext{ font-weight:600; margin-bottom:12px; } .quiz-q .qtext .qnum{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--brand); color:#fff; font-size:.82rem; margin-right:9px; vertical-align:middle; } .opt{ display:block; width:100%; text-align:left; font-family:inherit; font-size:.93rem; cursor:pointer; background:var(--surface-2); color:var(--text); border:2px solid transparent; border-radius:var(--radius-s); padding:11px 14px; margin-bottom:8px; transition:var(--speed); } .opt:hover:not(:disabled){ border-color:var(--brand); } .opt:disabled{ cursor:default; } .opt.correct{ background:#1b8a3d; border-color:#1b8a3d; color:#fff; } .opt.wrong{ background:#c62828; border-color:#c62828; color:#fff; } .feedback{ font-size:.88rem; margin-top:10px; padding:11px 14px; border-radius:var(--radius-s); display:none; } .feedback.show{ display:block; } .feedback.ok{ background:var(--accent-soft); border-left:4px solid #1b8a3d; } .feedback.no{ background:var(--accent-soft); border-left:4px solid #c62828; } .score-box{ background:var(--grad); color:#fff; border-radius:var(--radius-m); padding:var(--gap-m); text-align:center; margin-bottom:var(--gap-m); } .score-box .big{ font-size:2.4rem; font-weight:700; line-height:1.1; } /* ==================== [9] UTILITIES: คลาสช่วยจัดวาง ==================== */ .fig{ text-align:center; margin:var(--gap-m) 0; } .fig img{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-s); padding:12px; box-shadow:var(--shadow-s); } .fig figcaption{ font-size:.84rem; color:var(--text-soft); margin-top:10px; line-height:1.6; } /* ลิงก์ข้ามแท็บ — กดแล้วกระโดดไปแท็บอื่นทันที */ .xlink{ cursor:pointer; color:var(--brand); font-weight:600; border-bottom:2px dotted var(--brand); text-decoration:none; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; font-size:inherit; padding:0 1px; } .xlink:hover{ background:var(--brand-soft); } .xlink::after{ content:" ↗"; font-size:.8em; } /* คำศัพท์ที่มีคำอธิบายป๊อปอัป (tooltip) */ .gloss{ border-bottom:2px dotted var(--accent); cursor:help; position:relative; font-weight:600; } .gloss:hover::after{ content:attr(data-tip); position:absolute; left:50%; bottom:130%; transform:translateX(-50%); width:250px; z-index:99; background:var(--text); color:var(--bg); font-weight:400; font-size:.8rem; line-height:1.55; padding:9px 12px; border-radius:var(--radius-s); box-shadow:var(--shadow-m); } table{ width:100%; border-collapse:collapse; margin:var(--gap-s) 0; font-size:.92rem; } th,td{ border:1px solid var(--border); padding:10px 13px; text-align:left; vertical-align:top; } th{ background:var(--brand); color:#fff; font-weight:600; } tbody tr:nth-child(even){ background:var(--surface-2); } .chip{ display:inline-block; background:var(--brand-soft); color:var(--brand-dark); border-radius:var(--radius-l); padding:3px 12px; font-size:.8rem; margin:0 5px 5px 0; } .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-s); } .muted{ color:var(--text-soft); font-size:.88rem; } .center{ text-align:center; } kbd,code{ background:var(--code-bg); border-radius:5px; padding:2px 7px; font-size:.88em; font-family:ui-monospace,Menlo,Consolas,monospace; } .site-footer{ background:var(--surface); border-top:1px solid var(--border); padding:var(--gap-m) 0; text-align:center; color:var(--text-soft); font-size:.84rem; } /* ==================== [10] RESPONSIVE + PRINT ========================== */ @media (max-width: 820px){ .ctl-sep{ display:none; } /* บนมือถือแผงควบคุมขึ้นบรรทัดใหม่ ไม่ต้องมีเส้นคั่น */ .hotspot-wrap, .grid-2{ grid-template-columns:1fr; } .site-header h1{ font-size:1.4rem; } .controls{ border-radius:var(--radius-m); } :root{ --gap-l:22px; --gap-m:15px; } } @media print{ .tabbar,.controls,.progress-line,.progress-text,.site-footer{ display:none !important; } .panel{ display:block !important; page-break-after:always; } body{ background:#fff; color:#000; } } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }