/* =========================================================== FINAL THEME — Sage + selectable fonts (Baloo 2 / Zen Maru Gothic) Package: N3 Bunpou (22 bab) Di-load PALING AKHIR agar mengalahkan: - style.css (sistem --pink / --accent-*) - n3-override.css (sistem --n3-primary / --n3-accent / --n3-plus-*, termasuk font-family !important yang tadinya fixed ke Noto Serif JP) progress.js sekarang punya opsi "Baloo 2" (Gaya Huruf Arti) dan panel baru "Gaya Huruf Jepang" (Noto Serif JP / Zen Maru Gothic), keduanya men-set --latin-font / --jp-font langsung di , yang otomatis menang atas default :root di bawah ini. =========================================================== */ /* ── Fonts (diimpor supaya tersedia sebagai pilihan di panel ⚙️) ── */ @import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Baloo+2:wght@400;500;600;700;800&display=swap'); :root { /* Default sebelum progress.js meng-apply preferensi tersimpan; nilainya disamakan dengan _defaultPrefs di progress.js. */ --jp-font: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho Pro', serif; --latin-font: 'Inter', 'Segoe UI', Arial, sans-serif; /* Sage/teal palette — dipakai HANYA sebagai warna kanji default (word-jp, highlight) saat user belum memilih warna kustom di panel ⚙️. */ --sage: #4E8B7A; --sage-dark: #35634F; --sage-light: #E4EFE9; --sage-soft: #F2F7F4; --sage-accent: #C9A24B; /* UI accent — dipakai untuk tombol navigasi, border card, TOC, dll. Gaya "outline putih-bersih": nyaris putih dengan border abu tipis dan teks gelap, TIDAK memengaruhi warna kanji di kartu belajar. */ --ui-accent: #6b7280; --ui-accent-dark: #374151; --ui-accent-light: #f4f4f5; --ui-accent-soft: #fafafa; --ui-border: rgba(107,114,128,0.35); --ui-fill: #ffffff; --ui-fill-text: #374151; } [data-theme="dark"] { --sage: #6FBBA0; --sage-dark: #9FD8C0; --sage-light: #16221d; --sage-soft: #131c18; --sage-accent: #D9B968; --ui-accent: #9ca3af; --ui-accent-dark: #e5e7eb; --ui-accent-light: #26282d; --ui-accent-soft: #1d1e24; --ui-border: rgba(156,163,175,0.35); --ui-fill: #1d1e24; --ui-fill-text: #e5e7eb; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sage: #6FBBA0; --sage-dark: #9FD8C0; --sage-light: #16221d; --sage-soft: #131c18; --sage-accent: #D9B968; --ui-accent: #9ca3af; --ui-accent-dark: #e5e7eb; --ui-accent-light: #26282d; --ui-accent-soft: #1d1e24; --ui-border: rgba(156,163,175,0.35); --ui-fill: #1d1e24; --ui-fill-text: #e5e7eb; } } body.sepia-mode { --sage: #6d7d4f; --sage-dark: #4a5636; --sage-light: #e2ddc0; --sage-soft: #ece6c9; --sage-accent: #8a8a44; --ui-accent: #8a7f6a; --ui-accent-dark: #4a3f2e; --ui-accent-light: #f1ead8; --ui-accent-soft: #f6f0e0; --ui-border: rgba(138,127,106,0.35); --ui-fill: #faf3e3; --ui-fill-text: #4a3f2e; } /* ── Font application ── n3-override.css line 387-400 hardcodes 'Noto Serif JP' !important on Japanese-text selectors, which blocked the Gaya Huruf Jepang panel option (progress.js now sets --jp-font dynamically). Re-declare the same selector list here (loads after n3-override.css) so it follows the live --jp-font variable instead of a fixed font. ── */ body, .latin, .word-id-ind, .example-id, .dialogue-id, button, input, select, textarea, .plus-box, .plus-box table, .plus-box th, .plus-box td, .plus-box tr, .warning-note { font-family: var(--latin-font) !important; } .word-jp, .word-jp *, .example-jp, .example-jp *, .dialogue, .dialogue *, .sec-kanji, .sj-label, .sr-jp, .bm-jp, .review-card-jp, #section-indicator .si-text, .chapter-kanji, .chap-kanji, .toc-kanji, .plus-box [lang="ja"], .warning-note [lang="ja"], ruby, rt, rb, .book-header h1 { font-family: var(--jp-font) !important; } /* ── Override style.css pink system → sage (tetap dipakai sbg warna kanji default) ── */ :root, [data-theme="dark"], body.sepia-mode { --pink: var(--sage) !important; --pink-soft: var(--sage-soft) !important; --accent-purple: var(--sage-accent) !important; --accent-purple-bg: var(--sage-accent) !important; --accent-blue: var(--sage) !important; } /* ── Override n3-override.css blue/purple system → sage ── Catatan: --n3-primary-dark juga jadi fallback warna kanji (word-jp/highlight) saat user belum pilih warna kustom, jadi TIDAK diubah ke ui-accent di sini. Elemen UI murni (tombol nav, TOC, border card) di-override terpisah di bawah dengan selector spesifik supaya tidak ikut mengubah warna kanji. */ :root, [data-theme="dark"], body.sepia-mode { --n3-primary: var(--sage) !important; --n3-primary-dark: var(--sage-dark) !important; --n3-primary-light: var(--sage-light) !important; --n3-accent: var(--sage-accent) !important; --n3-toc-hover: var(--sage-soft) !important; --n3-example-bg: var(--sage-soft) !important; --n3-tip-bg: var(--sage-soft) !important; --n3-plus-bg: var(--sage-soft) !important; --n3-plus-border: rgba(78,139,122,0.35) !important; --n3-highlight-bg: rgba(201,162,75,0.35) !important; } /* Border kiri example-box dilembutkan — sebelumnya solid --n3-primary (pink jenuh penuh), sekarang pink pudar supaya tidak "berteriak" bersamaan dengan judul & highlight yang juga pink. */ .example-box { border-left-color: rgba(78,139,122,0.4) !important; } [data-theme="dark"] .example-box, :root:not([data-theme="light"]) .example-box { border-left-color: rgba(78,139,122,0.3) !important; } /* ── Hardcoded sepia .book-header (n3-override.css line 426 bypasses variables) ── */ body.sepia-mode .book-header { background: var(--sage-dark) !important; } /* ── learned-state green stays distinguishable from sage accent ── */ :root, [data-theme="dark"], body.sepia-mode { --learned-border: #4caf50 !important; } /* ── Inline-styled footer in bab-*.html (hardcoded #1976d2/#e3f2fd) ── */ footer[style*="1976d2"] { background: var(--sage-soft) !important; border-top-color: var(--sage) !important; } footer[style*="1976d2"] div[style*="1976d2"] { color: var(--sage-dark) !important; } /* ── Sepia hardcodes for TOC elements that bypass CSS variables ── */ body.sepia-mode .toc h2, body.sepia-mode .toc-kanji, body.sepia-mode .nav-title { color: var(--sage-dark) !important; } body.sepia-mode .toc-num, body.sepia-mode .chapter-num-badge { background: var(--sage-dark) !important; } /* ═══════════════════════════════════════════════════════════════ UI ACCENT OVERRIDE — gaya "outline putih-bersih" untuk elemen UI (tombol navigasi, TOC, border card). Sengaja TIDAK memakai --sage supaya warna kanji di kartu belajar (word-jp/highlight) tidak ikut berubah — itu tetap dikendalikan panel ⚙️ Warna Kanji seperti biasa. ═══════════════════════════════════════════════════════════════ */ /* Tombol navigasi atas/bawah (← Bab N / Bab N →, Awal, dsb.) */ .page-nav a:not(.disabled), .bottom-nav a:not(.disabled) { color: var(--ui-fill-text) !important; border-color: var(--ui-border) !important; } .bottom-nav a:not(.disabled):not(.home) { background: var(--ui-fill) !important; color: var(--ui-fill-text) !important; border: 1px solid var(--ui-border) !important; } .nav-title { color: var(--ui-fill-text) !important; } /* Toggle tema (☀️/🌙) dan tombol gear pengaturan */ .theme-toggle, #reading-toolbar-btn { border-color: var(--ui-border) !important; color: var(--ui-fill-text) !important; } /* TOC (Daftar Bab) card & quick-link */ .toc-row { border-color: var(--ui-border) !important; } .toc-row:hover, a.toc-row:hover, a.toc-row:focus-visible { background: var(--ui-accent-soft) !important; } .toc-num { background: var(--ui-fill) !important; color: var(--ui-fill-text) !important; border: 1px solid var(--ui-border) !important; } /* Border kiri example-box & card lain yang sebelumnya ikut --sage */ .example-box { border-left-color: var(--ui-border) !important; } [data-theme="dark"] .example-box, :root:not([data-theme="light"]) .example-box { border-left-color: var(--ui-border) !important; } /* Chapter card / TOC index.html — outline putih-abu (chapter-num-badge SENGAJA tidak disentuh di sini karena index.html sudah punya styling terracotta sendiri lewat --washi-brand). */ .chapter-card, .quick-link, .guide-card, .guide-card > .guide-summary { background: var(--ui-fill) !important; border: 1px solid var(--ui-border) !important; } .chapter-list { background: transparent !important; border: 1px solid var(--ui-border) !important; } .guide-body { background: transparent !important; } .quick-link:hover { background: var(--ui-accent-soft) !important; color: var(--ui-fill-text) !important; }