/* ========================================================================== ตารางเรียน MWIT — style.css ระบบสี: ใช้ data-theme="light" | "dark" บน ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,600;1,700&display=swap'); :root{ --accent: #2451C4; --accent-bright: #4A72E0; --accent-ink: #FFFFFF; --gold: #E29A2E; --mint: #1E9E7C; --coral: #D8492F; --radius-lg: 22px; --radius-md: 14px; --radius-sm: 9px; --font-display: 'Kanit', sans-serif; --font-body: 'Kanit', sans-serif; --font-mono: 'Kanit', sans-serif; --shadow-soft: 0 10px 30px -12px rgba(20,23,28,0.18); } /* ให้เบราว์เซอร์ animate สี --accent / --accent-bright แบบไล่เฉดจริง ๆ (ใช้กับโหมดรุ้ง) */ @property --accent{ syntax: ''; inherits: true; initial-value: #2451C4; } @property --accent-bright{ syntax: ''; inherits: true; initial-value: #4A72E0; } html[data-theme="light"]{ --bg-image: url('../assets/background.webp'); --bg: #F3F3F3; --surface: rgba(255,255,255,0.70); --surface-faint: rgba(255,255,255,0.42); --surface-solid: #FFFFFF; --surface-strong: rgba(255,255,255,0.92); --border: rgba(20,23,28,0.09); --border-strong: rgba(20,23,28,0.16); --ink: #14171C; --ink-muted: #5B6270; --ink-faint: #8A909B; --accent: #2451C4; --shadow-soft: 0 10px 30px -14px rgba(20,23,28,0.22); } html[data-theme="dark"]{ --bg-image: url('../assets/background-dark.webp'); --bg: #090d16; --surface: rgba(30,48,80,0.28); --surface-faint: rgba(30,48,80,0.16); --surface-solid: #111827; --surface-strong: rgba(18,28,51,0.92); --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.15); --ink: #F0F1F3; --ink-muted: #94a3b8; --ink-faint: #64748b; --accent: #3b82f6; --accent-bright: #60a5fa; --shadow-soft: 0 25px 50px -12px rgba(0,0,0,0.5), 0 0 30px rgba(37,99,235,0.15), inset 0 1px 0 rgba(255,255,255,0.08); } /* ========================================================================== โหมดสีรุ้งสุดๆ (Rainbow / Pride) — data-theme="rainbow" สี accent ทั้งแอปไล่เฉดสีธงไพรด์วนลูปอัตโนมัติ ผ่าน @property ด้านบน ตกแต่งเพิ่ม: ลายทางสีรุ้งพื้นหลัง, ขอบการ์ดไล่สีรอบด้าน, โลโก้ไล่สี, เส้นใต้ topbar ไล่สี และปุ่ม/แท็บที่ active เป็นไล่สีแทนสีทึบ ========================================================================== */ html[data-theme="rainbow"]{ --bg-image: url('../assets/background.webp'); --bg: #F6F1FC; --surface: rgba(255,255,255,0.72); --surface-faint: rgba(255,255,255,0.45); --surface-solid: #FFFFFF; --surface-strong: rgba(255,255,255,0.92); --border: rgba(20,23,28,0.10); --border-strong: rgba(20,23,28,0.18); --ink: #14171C; --ink-muted: #5B6270; --ink-faint: #8A909B; --accent-ink: #FFFFFF; --shadow-soft: 0 14px 34px -14px rgba(150,60,220,0.32); --rainbow-colors: #E40303, #FF8C00, #FFED00, #008026, #004DFF, #732982, #E40303; animation: rainbowCycle 8s linear infinite; } /* ปิดอนิเมชั่นไล่สีตอนเลือกกราฟิกต่ำ (เพื่อประสิทธิภาพ) แต่ยังคงสีสวยแบบนิ่ง */ html[data-graphics="low"][data-theme="rainbow"]{ animation: none; --accent: #D6249F; --accent-bright: #F06FC2; } @keyframes rainbowCycle{ 0% { --accent: #E40303; --accent-bright: color-mix(in srgb, #E40303 55%, white); } 16.6% { --accent: #FF8C00; --accent-bright: color-mix(in srgb, #FF8C00 55%, white); } 33.3% { --accent: #FFED00; --accent-bright: color-mix(in srgb, #FFED00 55%, white); } 50% { --accent: #008026; --accent-bright: color-mix(in srgb, #008026 55%, white); } 66.6% { --accent: #004DFF; --accent-bright: color-mix(in srgb, #004DFF 55%, white); } 83.3% { --accent: #732982; --accent-bright: color-mix(in srgb, #732982 55%, white); } 100% { --accent: #E40303; --accent-bright: color-mix(in srgb, #E40303 55%, white); } } /* ลายทางสีรุ้งจาง ๆ ปูพื้นหลังทั้งหน้า */ html[data-theme="rainbow"] .container{ position: relative; } html[data-theme="rainbow"] .container::before{ content: ''; position: absolute; inset: -18px -16px; z-index: -1; background: repeating-linear-gradient(135deg, var(--rainbow-colors) 0 42px); background-size: 600% 600%; opacity: .16; border-radius: 28px; pointer-events: none; animation: rainbowStripeShift 26s linear infinite; } @keyframes rainbowStripeShift{ 0%{ background-position: 0% 0%; } 100%{ background-position: 300% 300%; } } /* โลโก้ตัวอักษรไล่สีรุ้งแบบเคลื่อนไหว */ html[data-theme="rainbow"] .brand-text .brand-title{ background: linear-gradient(90deg, var(--rainbow-colors)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbowTextShift 5s linear infinite; } @keyframes rainbowTextShift{ 0%{ background-position: 0% 50%; } 100%{ background-position: 300% 50%; } } /* เส้นไล่สีรุ้งใต้ topbar ทั้งแถบ */ html[data-theme="rainbow"] .topbar{ position: relative; padding-bottom: 12px; } html[data-theme="rainbow"] .topbar::after{ content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--rainbow-colors)); background-size: 300% 100%; animation: rainbowTextShift 5s linear infinite; } /* การ์ดหลัก (hero): ขอบไล่สีรุ้งรอบด้าน แบบเคลื่อนไหว */ html[data-theme="rainbow"] .hero{ border: 3px solid transparent; border-radius: var(--radius-lg); background-image: linear-gradient(var(--surface), var(--surface)), linear-gradient(120deg, var(--rainbow-colors)); background-origin: padding-box, border-box; background-clip: padding-box, border-box; background-repeat: no-repeat; background-size: 100% 100%, 400% 400%; animation: rainbowBorderShift 9s ease infinite; } @keyframes rainbowBorderShift{ 0%{ background-position: 0% 0%, 0% 50%; } 50%{ background-position: 0% 0%, 100% 50%; } 100%{ background-position: 0% 0%, 0% 50%; } } /* ปุ่ม/แท็บที่ active: ไล่สีรุ้งแทนสีทึบ */ html[data-theme="rainbow"] .day-tab.active, html[data-theme="rainbow"] .week-pill.active, html[data-theme="rainbow"] .segmented button.active, html[data-theme="rainbow"] .csel-option.active, html[data-theme="rainbow"] .csel-tab.active, html[data-theme="rainbow"] .csel-grid-btn.active, html[data-theme="rainbow"] .modal-toolbar button.active{ background: linear-gradient(120deg, var(--rainbow-colors)); background-size: 300% 300%; border-color: transparent; color: #FFFFFF; animation: rainbowBorderShift 6s ease infinite; } /* ออร่าแสงพื้นหลังไล่เฉดสีรอบจอ ให้ไหวมากขึ้น */ html[data-theme="rainbow"] body::before, html[data-theme="rainbow"] body::after{ opacity: .30; animation: rainbowAura 10s linear infinite; } @keyframes rainbowAura{ 0%{ filter: blur(140px) hue-rotate(0deg); } 100%{ filter: blur(140px) hue-rotate(360deg); } } *{ box-sizing: border-box; } html, body{ margin: 0; padding: 0; } body{ min-height: 100vh; background-color: var(--bg); background-image: var(--bg-image); background-size: cover; background-position: center top; background-attachment: fixed; color: var(--ink); font-family: var(--font-body); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; position: relative; } /* ออร่าแสงสีฟ้า/ม่วงแบบธีมมืดต้นฉบับ (ซ่อนในโหมดสว่าง) */ body::before, body::after{ content: ''; position: fixed; width: 420px; height: 420px; border-radius: 999px; filter: blur(140px); opacity: 0; z-index: 0; pointer-events: none; transition: opacity .3s ease; } body::before{ background: #2563eb; top: -120px; left: -120px; } body::after{ background: #9333ea; right: -120px; bottom: -120px; } html[data-theme="dark"] body::before, html[data-theme="dark"] body::after{ opacity: .22; } ::selection{ background: var(--accent); color: var(--accent-ink); } a{ color: inherit; } button, select, input, textarea{ font-family: inherit; color: inherit; } .container{ max-width: 880px; margin: 0 auto; padding: 18px 16px 64px; position: relative; z-index: 1; } /* ---------- Top bar ---------- */ .topbar{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .brand{ display: flex; align-items: center; gap: 10px; } .brand-mark{ height: 34px; width: auto; max-width: 120px; object-fit: contain; flex-shrink: 0; padding: 6px 8px; border-radius: 11px; background: var(--surface-solid); border: 1px solid var(--border); } .brand-text .brand-title{ font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.1; } .brand-text .brand-sub{ font-size: 12px; color: var(--ink-muted); font-family: var(--font-mono); } .topbar-controls{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .select-pill, .icon-btn{ appearance: none; -webkit-appearance: none; border: 1px solid var(--border-strong); background: var(--surface-solid); color: var(--ink); border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, transform .1s ease; } .select-pill:hover, .icon-btn:hover{ border-color: var(--accent); } .csel-trigger:hover{ border-color: var(--accent); } .select-pill:active, .icon-btn:active{ transform: scale(0.97); } .icon-btn{ padding: 9px 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; position: relative; white-space: nowrap; } .settings-wrap{ position: relative; display: inline-block; } .settings-btn{ width: 38px; height: 38px; padding: 0 !important; } .settings-panel{ position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 220px; background: var(--surface-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow-soft); } .settings-panel[hidden]{ display: none; } .settings-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; } .settings-row + .settings-row{ border-top: 1px solid var(--border); } .settings-label{ font-size: 12.5px; color: var(--ink-muted); font-weight: 600; } .settings-link{ display: block; width: 100%; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; padding: 6px 0; } .settings-link:hover{ text-decoration: underline; } .segmented{ display: flex; border: 1px solid var(--border-strong); border-radius: 999px; } .segmented button{ border: none; background: var(--surface-solid); color: var(--ink-muted); padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; } .segmented button:first-child{ border-radius: 999px 0 0 999px; } .segmented button:last-child{ border-radius: 0 999px 999px 0; } .segmented button.active{ background: var(--accent); color: var(--accent-ink); } /* ---------- Custom select (แทน native