/* * Twenty Sixteen Child — Dark/Light + Mood system * ------------------------------------------------- * Contract ตัวแปร 7 ตัว: --bg --surface --fg --muted --line --accent --accent-fg * theme = light | dark (attribute data-theme บน ) * mood = 1 | 2 | 3 (attribute data-mood บน ) * mood1 = #5d310e (สีเดิม) · mood2 = #f15a24 · mood3 = #4a4a48 * โหลดหลัง parent+child style.css → override ชนะด้วย specificity html[data-theme] */ /* ============ NEUTRALS ตามโหมด (light/dark) ============ */ :root, html[data-theme="light"] { --bg: #ffffff; --surface: #f7f7f7; --fg: #1a1a1a; --muted: #686868; --line: #d1d1d1; --accent-fg: #ffffff; --accent-hover: color-mix(in srgb, var(--accent) 80%, #000); } html[data-theme="dark"] { --bg: #17181a; --surface: #202225; --fg: #e6e3de; --muted: #a2a2a5; --line: #3a3b3e; --accent-fg: #ffffff; --accent-hover: color-mix(in srgb, var(--accent) 78%, #fff); } /* ============ ACCENT ตาม mood (× theme เพื่อคุม contrast) ============ */ :root, html[data-mood="1"] { --accent:#5d310e; --accent-fg:#ffffff; } html[data-mood="2"] { --accent:#f15a24; --accent-fg:#ffffff; } html[data-mood="3"] { --accent:#4a4a48; --accent-fg:#ffffff; } /* dark: accent เข้มไป → สว่างขึ้นให้ลิงก์/ปุ่มยังอ่านออกบนพื้นมืด */ html[data-theme="dark"][data-mood="1"] { --accent:#c8813f; --accent-fg:#1b1208; } html[data-theme="dark"][data-mood="2"] { --accent:#ff7a4d; --accent-fg:#241007; } html[data-theme="dark"][data-mood="3"] { --accent:#b3b3b0; --accent-fg:#1a1a1a; } /* ============================================================ * CHILD SURFACES (header / footer / topbar / body / grid) * ยก hardcode ใน style.css มาผูก var — header/footer gradient * ไล่โทนจาก --accent อัตโนมัติทุก mood * ============================================================ */ html[data-theme] body { background: var(--bg); color: var(--fg); } html[data-theme] .site-inner { background: var(--surface); } /* header + footer: gradient สร้างจาก accent (ขอบบนสว่าง / เส้น 2px เข้ม / ตัวหลัก accent) */ html[data-theme] .site-header, html[data-theme] .site-footer { background-color: var(--accent); background-image: linear-gradient( to bottom, color-mix(in srgb, var(--accent) 62%, #fff) 0%, color-mix(in srgb, var(--accent) 70%, #000) 2px, var(--accent) 92px, var(--accent) 100% ); } html[data-theme] .site-branding .site-title a { color: var(--accent-fg); } html[data-theme] .site-branding .site-title a:hover, html[data-theme] .site-branding .site-title a:focus { color: color-mix(in srgb, var(--accent-fg) 78%, var(--accent)); } html[data-theme] .site-description { color: color-mix(in srgb, var(--accent-fg) 88%, var(--accent)); } html[data-theme] .site-info a { color: color-mix(in srgb, var(--accent-fg) 72%, var(--accent)); } html[data-theme] .site-info a:hover, html[data-theme] .site-info a:focus { color: var(--accent-fg); } /* topbar (แถบดำด้านบน) — คงโทนเข้มของตัวเอง แต่ผูก surface ใน dark */ html[data-theme="dark"] .site-topbar { background: #0f1113; } html[data-theme] .search-box { background: var(--surface); } html[data-theme] .search-field { color: var(--fg); } html[data-theme] .search-box .search-submit { background: none; border: 0; color: var(--muted); } html[data-theme] .search-box .search-submit:hover { background: none; color: var(--fg); } /* gridload cards */ html[data-theme] .gridload figure { background: var(--accent); } html[data-theme] .gridload figure h2 { background-color: color-mix(in srgb, var(--fg) 88%, #000); } html[data-theme] figure.effect-terry p a { color: var(--accent); } /* ============================================================ * PARENT twentysixteen — map พาเลต 8 สี → var (ครอบทุกโหมด) * #1a1a1a→fg · #686868→muted · #d1d1d1→line * #007acc→accent · #fff→surface · #f7f7f7/#f1f1f1→bg * prefix html[data-theme] เพื่อชนะ specificity ของ parent * ============================================================ */ /* พื้น/โครง */ html[data-theme] .site-content, html[data-theme] .content-area, html[data-theme] .content-bottom-widgets, html[data-theme] .site-main article, html[data-theme] .page-content, html[data-theme] .entry-content, html[data-theme] .entry-summary { color: var(--fg); } html[data-theme] .site-main .sticky, html[data-theme] .widget, html[data-theme] .comment-list article { background: transparent; } /* ลิงก์เนื้อหา */ html[data-theme] .entry-content a, html[data-theme] .entry-summary a, html[data-theme] .comment-content a, html[data-theme] .widget a, html[data-theme] .page-content a { color: var(--accent); } html[data-theme] .entry-content a:hover, html[data-theme] .entry-summary a:hover, html[data-theme] .comment-content a:hover, html[data-theme] .widget a:hover, html[data-theme] .page-content a:hover { color: var(--accent-hover); } /* หัวข้อ / entry title */ html[data-theme] h1, html[data-theme] h2, html[data-theme] h3, html[data-theme] h4, html[data-theme] h5, html[data-theme] h6, html[data-theme] .entry-title, html[data-theme] .page-title { color: var(--fg); } html[data-theme] .entry-title a { color: var(--fg); } html[data-theme] .entry-title a:hover, html[data-theme] .entry-title a:focus { color: var(--accent); } /* ข้อความรอง */ html[data-theme] .entry-footer, html[data-theme] .entry-footer a, html[data-theme] .comment-metadata, html[data-theme] .comment-metadata a, html[data-theme] .comment-awaiting-moderation, html[data-theme] .comment-reply-link, html[data-theme] .posted-on, html[data-theme] .byline, html[data-theme] .cat-links, html[data-theme] .tags-links, html[data-theme] .wp-caption-text, html[data-theme] .gallery-caption, html[data-theme] .page-links, html[data-theme] .site-info { color: var(--muted); } /* เส้นขอบ */ html[data-theme] hr { background-color: var(--line); } html[data-theme] .entry-footer, html[data-theme] .comments-area, html[data-theme] .comment-list article, html[data-theme] .comment-list .pingback, html[data-theme] .comment-list .trackback, html[data-theme] .page-header, html[data-theme] .post-navigation, html[data-theme] .image-navigation, html[data-theme] .pagination, html[data-theme] .widget, html[data-theme] table, html[data-theme] th, html[data-theme] td, html[data-theme] .site-main .comment-navigation, html[data-theme] .comment-list + .comment-respond, html[data-theme] fieldset { border-color: var(--line); } /* blockquote / code / pre */ html[data-theme] blockquote { color: var(--muted); border-color: var(--accent); } html[data-theme] code, html[data-theme] kbd, html[data-theme] pre, html[data-theme] tt, html[data-theme] var { background: var(--surface); color: var(--fg); } /* ฟอร์ม */ html[data-theme] input[type="text"], html[data-theme] input[type="email"], html[data-theme] input[type="url"], html[data-theme] input[type="password"], html[data-theme] input[type="search"], html[data-theme] input[type="number"], html[data-theme] input[type="tel"], html[data-theme] input[type="date"], html[data-theme] textarea, html[data-theme] select { background: var(--surface); color: var(--fg); border-color: var(--line); } html[data-theme] ::placeholder { color: var(--muted); } /* ปุ่ม → ตาม accent */ html[data-theme] button, html[data-theme] input[type="button"], html[data-theme] input[type="reset"], html[data-theme] input[type="submit"], html[data-theme] .button, html[data-theme] .wp-block-button__link { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } html[data-theme] button:hover, html[data-theme] input[type="submit"]:hover, html[data-theme] .button:hover { background: var(--accent-hover); color: var(--accent-fg); } /* pagination current / nav */ html[data-theme] .pagination .page-numbers.current, html[data-theme] .pagination .current { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } html[data-theme] .pagination .page-numbers { border-color: var(--line); color: var(--fg); } /* sidebar widgets */ html[data-theme] .widget-title { color: var(--fg); } html[data-theme] .widget_recent_entries a, html[data-theme] .widget li a { color: var(--accent); } /* ============================================================ * TOPBAR TICKER (ข้อความวิ่งโพสต์ล่าสุด — หยุดเมื่อ hover) * ============================================================ */ .topbar-link { display: flex; align-items: center; gap: 10px; min-width: 0; /* ให้ ticker ตัดล้นได้ */ overflow: hidden; } .ticker-label { flex: none; font-size: 11px; font-weight: 700; color: #fff; background: rgba(255,255,255,.16); padding: 2px 8px; border-radius: 3px; line-height: 1.6; white-space: nowrap; } .ticker { flex: 1; min-width: 0; overflow: hidden; position: relative; } .ticker-track { display: inline-flex; align-items: center; gap: 30px; white-space: nowrap; will-change: transform; animation: topbar-ticker 45s linear infinite; } /* หยุดเมื่อชี้เมาส์ */ .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-item { color: #d7d7d7; text-decoration: none; font-size: 13px; white-space: nowrap; } .ticker-item:hover { color: #fff; text-decoration: underline; } .ticker-item .fa { opacity: .6; font-size: 11px; } @keyframes topbar-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } /* ทำซ้ำ 2 ชุด → ครึ่ง = 1 รอบพอดี */ } /* reduced-motion (หรือ Windows ปิด Animation effects) → ไม่หยุดสนิท แค่ช้าลง ไม่ใช้ animation:none ไม่งั้นจะนิ่งบนเครื่องที่ปิด animation effects */ @media (prefers-reduced-motion: reduce) { .ticker-track { animation-duration: 90s; } } @media (max-width: 768px) { .ticker-label { display: none; } /* จอเล็ก: ซ่อนป้าย เหลือข้อความวิ่ง */ } /* ============================================================ * TOGGLE UI (topbar) * ============================================================ */ .theme-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 0 6px 0 12px; } /* ปุ่มมืด/สว่างพักไว้ก่อน — อนาคตเปิดใช้ ลบบรรทัด display:none ออก */ #mode-toggle { display: none; } /* NOTE: prefix html[data-theme] .theme-controls เพื่อชนะกฎปุ่มของ parent (html[data-theme] button { background:var(--accent) }) ไม่งั้น swatch ทุกปุ่มจะโดนทับเป็นสี accent เดียวกันหมด */ html[data-theme] .theme-controls .tc-btn { background: none; border: 0; color: #ddd; cursor: pointer; font-size: 15px; line-height: 1; padding: 4px; border-radius: 4px; } html[data-theme] .theme-controls .tc-btn:hover { color: #fff; background: rgba(255,255,255,.12); } .mood-picker { display: flex; align-items: center; gap: 5px; } html[data-theme] .theme-controls .mood-swatch { width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent; background: var(--sw); cursor: pointer; padding: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.35); } html[data-theme] .theme-controls .mood-swatch:hover { transform: scale(1.12); } html[data-theme] .theme-controls .mood-swatch.is-active { border-color: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); } @media (max-width: 768px) { .theme-controls { padding: 0 4px; gap: 7px; } }