/* ═══════════════════════════════════════ SHARED THEME — Admin Guru Kurikulum Merdeka Versi : 1.0 Tanggal : 21 Maret 2026 Inspirasi: GNOME Appearance Settings Palette: - Biru struktural : #1a365d (dokumen) - Emerald accent : #059669 (education green) - Dark background : #1a1a1a (GNOME dark) - Light background: #f6f5f4 (GNOME light) CARA PAKAI DI SETIAP APLIKASI: 1. Tambahkan di HTML: 2. Toggle dark mode via JavaScript: document.documentElement .setAttribute('data-theme', 'dark') 3. Toggle light mode: document.documentElement .removeAttribute('data-theme') 4. Baca preferensi tersimpan: const tema = localStorage .getItem('admin-guru-theme') || 'light' if (tema === 'dark') document.documentElement .setAttribute('data-theme', 'dark') ═══════════════════════════════════════ */ /* ════════════════════════════════════════ LIGHT MODE — Default ════════════════════════════════════════ */ :root { /* ── Warna Struktural (Biru Pendidikan) ── */ --color-primary : #1a365d; --color-primary-mid : #2c5aa0; --color-primary-light : #e6f2ff; --color-primary-xlight : #f0f7ff; /* ── Warna Accent (Emerald Education) ── */ --color-accent : #059669; --color-accent-hover : #047857; --color-accent-light : #d1fae5; --color-accent-text : #ffffff; /* ── Background UI (GNOME Light Style) ── */ --color-bg-app : #f6f5f4; --color-bg-panel : #ffffff; --color-bg-section : #fafafa; --color-bg-hover : #f0efee; --color-border-panel : #deddda; --color-border-input : #c0bfbc; /* ── Teks ── */ --color-text-primary : #2c3e50; --color-text-secondary : #77767b; --color-text-label : #3d3d3d; --color-text-muted : #9a9996; --color-text-inverse : #ffffff; /* ── Tombol Primer (Emerald) ── */ --color-btn-primary : #059669; --color-btn-primary-hv : #047857; --color-btn-primary-txt: #ffffff; /* ── Tombol Sekunder (Biru) ── */ --color-btn-secondary : #1a365d; --color-btn-secondary-hv: #2c5aa0; --color-btn-secondary-txt: #ffffff; /* ── Tombol Success (Hijau) ── */ --color-btn-success : #2e7d32; --color-btn-success-hv : #1b5e20; --color-btn-success-txt: #ffffff; /* ── Tombol Danger (Merah) ── */ --color-btn-danger : #e53935; --color-btn-danger-hv : #c62828; --color-btn-danger-txt : #ffffff; /* ── Tombol Netral ── */ --color-btn-neutral : #f0efee; --color-btn-neutral-hv : #deddda; --color-btn-neutral-txt: #3d3d3d; /* ── Status & Notifikasi ── */ --color-success-bg : #e8f5e9; --color-success-border : #a5d6a7; --color-success-text : #2e7d32; --color-info-bg : #e6f2ff; --color-info-border : #90caf9; --color-info-text : #1a365d; --color-warning-bg : #d1fae5; --color-warning-border : #059669; --color-warning-text : #064e3b; --color-error-bg : #fff5f5; --color-error-border : #e53935; --color-error-text : #c62828; /* ── Area Preview Dokumen ── */ --color-bg-preview : #dde1e7; --color-shadow-card : rgba(0,0,0,0.12); --color-shadow-panel : rgba(0,0,0,0.08); /* ── Drawer & Modal ── */ --color-bg-drawer : #ffffff; --color-bg-drawer-hdr : #1a365d; --color-text-drawer-hdr: #ffffff; --color-border-drawer : #deddda; /* ── Panel Header Aplikasi ── */ --color-bg-app-header : #1a365d; --color-text-app-header: #ffffff; --color-accent-app-hdr : #059669; /* ── Prompt & Code Area ── */ --color-bg-prompt : #fafafa; --color-bg-prompt-hdr : #1a365d; --color-text-prompt-hdr: #ffffff; --color-bg-code : #f8f8f8; --color-border-code : #e0e0e0; /* Stepper indicator */ --color-stepper-active: #e67e22; --color-stepper-active-hv: rgba(230,126,34,0.15); --color-stepper-done: #2e7d32; --color-stepper-default: var(--color-border-panel); /* Form spacing */ --form-group-gap: 12px; --form-label-gap: 5px; --form-input-padding-v: 8px; --form-input-padding-h: 10px; --form-section-gap: 12px; --form-container-padding: 16px; --form-banner-gap: 16px; /* ── Spacing ── */ --spacing-xs : 4px; --spacing-sm : 8px; --spacing-md : 14px; --spacing-lg : 20px; --spacing-xl : 24px; --spacing-2xl : 32px; /* ── Border Radius ── */ --radius-xs : 2px; --radius-sm : 4px; --radius-md : 6px; --radius-lg : 8px; --radius-xl : 12px; --radius-full : 9999px; /* ── Typography ── */ --font-ui: 'Montserrat', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', 'Liberation Sans', 'Cantarell', sans-serif; --font-mono : 'Courier New', monospace; --font-size-xs : 10px; --font-size-sm : 11px; --font-size-md : 13px; --font-size-lg : 14px; --font-size-xl : 16px; --font-size-2xl : 19px; --font-weight-normal : 400; --font-weight-medium : 500; --font-weight-bold : 700; --line-height-tight : 1.3; --line-height-normal : 1.5; --line-height-relaxed : 1.7; /* ── Transisi ── */ --transition-fast : 0.15s ease; --transition-normal : 0.2s ease; --transition-slow : 0.3s ease; /* ── Z-index ── */ --z-dropdown : 10; --z-drawer : 100; --z-modal : 200; --z-toast : 300; /* ── Sidebar (Light Mode - Clean Slate) ── */ --color-bg-sidebar : #f8fafc; --color-text-sidebar : #475569; --color-text-sidebar-hover : #1e293b; --color-text-sidebar-label : #64748b; --color-border-sidebar : #e2e8f0; --color-sidebar-divider : #e2e8f0; --color-sidebar-hover-bg : #e2e8f0; --color-sidebar-active-bg : #d1fae5; --color-sidebar-active-text : #059669; --color-sidebar-name : #1e293b; --color-sidebar-value : #475569; } /* ════════════════════════════════════════════ NAVIGASI TAB — Shared Button Styles Dipakai oleh semua modul untuk tombol Lanjut / Sebelumnya antar tab. ════════════════════════════════════════════ */ .btn-nav-wrapper { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-sm, 8px); padding-top: var(--spacing-md, 14px); margin-top: var(--spacing-md, 14px); border-top: 1px dashed var(--color-border-panel, #deddda); } .btn-nav-wrapper.nav-end { justify-content: flex-end; } .btn-nav-wrapper.nav-start { justify-content: flex-start; } .btn-nav-next, .btn-nav-prev { display: inline-flex; align-items: center; gap: var(--spacing-xs, 4px); padding: 10px 20px; border: none; border-radius: var(--radius-md, 6px); font-size: var(--font-size-md, 13px); font-weight: var(--font-weight-medium, 500); font-family: var(--font-ui, system-ui); cursor: pointer; transition: background var(--transition-fast, 0.15s ease), transform var(--transition-fast, 0.15s ease); } .btn-nav-next { background: var(--color-btn-primary, #059669); color: var(--color-btn-primary-txt, #ffffff); margin-left: auto; } .btn-nav-next:hover { background: var(--color-btn-primary-hv, #047857); transform: translateX(2px); } .btn-nav-prev { background: var(--color-btn-neutral, #f0efee); color: var(--color-btn-neutral-txt, #3d3d3d); } .btn-nav-prev:hover { background: var(--color-btn-neutral-hv, #deddda); transform: translateX(-2px); } /* Dark mode override */ [data-theme="dark"] .btn-nav-wrapper { border-top-color: var(--color-border-panel); } [data-theme="dark"] .btn-nav-prev { background: var(--color-btn-neutral); color: var(--color-btn-neutral-txt); } [data-theme="dark"] .btn-nav-prev:hover { background: var(--color-btn-neutral-hv); } /* ════════════════════════════════════════ DARK MODE — GNOME Dark Inspired ════════════════════════════════════════ */ [data-theme="dark"] { /* ── Warna Struktural (Blue-Charcoal Unified) ── */ --color-primary : #7eb8f7; --color-primary-mid : #5a9fd4; --color-primary-light : #1e3a5f; --color-primary-xlight : #162a47; /* ── Warna Accent (Emerald — tetap sebagai identitas) ── */ --color-accent : #10b981; --color-accent-hover : #059669; --color-accent-light : #1a4d3e; --color-accent-text : #ffffff; /* ── Background UI (Blue-Charcoal Unified) ── */ --color-bg-app : #0b1220; --color-bg-surface : #111a2b; --color-bg-panel : #13203a; --color-bg-section : #1a2847; --color-bg-hover : #1f2d4a; --color-border-soft : #24324a; --color-border-panel : #2a3a56; --color-border-input : #334466; /* ── Teks (Blue-Charcoal Unified) ── */ --color-text-primary : #e6edf8; --color-text-secondary : #9fb0c9; --color-text-label : #b8c5d9; --color-text-muted : #6b7a99; --color-text-inverse : #0b1220; /* ── Tombol Primer (Emerald) ── */ --color-btn-primary : #10b981; --color-btn-primary-hv : #059669; --color-btn-primary-txt: #ffffff; /* ── Tombol Sekunder (Blue) ── */ --color-btn-secondary : #5a9fd4; --color-btn-secondary-hv: #7eb8f7; --color-btn-secondary-txt: #0b1220; /* ── Tombol Success ── */ --color-btn-success : #10b981; --color-btn-success-hv : #059669; --color-btn-success-txt: #ffffff; /* ── Tombol Danger ── */ --color-btn-danger : #ef5350; --color-btn-danger-hv : #f44336; --color-btn-danger-txt : #ffffff; /* ── Tombol Netral ── */ --color-btn-neutral : #1f2d4a; --color-btn-neutral-hv : #2a3a56; --color-btn-neutral-txt: #e6edf8; /* ── Status & Notifikasi (Blue-Charcoal Unified) ── */ --color-success-bg : #1a3d2e; --color-success-border : #10b981; --color-success-text : #6ee7b7; --color-info-bg : #1e3a5f; --color-info-border : #5a9fd4; --color-info-text : #7eb8f7; --color-warning-bg : #1a4d3e; --color-warning-border : #10b981; --color-warning-text : #6ee7b7; --color-error-bg : #3d1a1a; --color-error-border : #ef5350; --color-error-text : #ef9a9a; /* ── Area Preview Dokumen ── */ --color-bg-preview : #0f1825; --color-shadow-card : rgba(0,0,0,0.5); --color-shadow-panel : rgba(0,0,0,0.4); /* ── Drawer & Modal (Blue-Charcoal Unified) ── */ --color-bg-drawer : #13203a; --color-bg-drawer-hdr : #0b1220; --color-text-drawer-hdr: #e6edf8; --color-border-drawer : #24324a; /* ── Panel Header Aplikasi ── */ --color-bg-app-header : #0b1220; --color-text-app-header: #e6edf8; --color-accent-app-hdr : #10b981; /* ── Prompt & Code Area ── */ --color-bg-prompt : #1a2847; --color-bg-prompt-hdr : #0b1220; --color-text-prompt-hdr: #e6edf8; --color-bg-code : #0f1825; --color-border-code : #24324a; /* ── Sidebar (Blue-Charcoal Unified - sama keluarga dengan main) ── */ --color-bg-sidebar : #0b1220; --color-text-sidebar : #9fb0c9; --color-text-sidebar-hover : #e6edf8; --color-text-sidebar-label : #6b7a99; --color-border-sidebar : #1f2d4a; --color-sidebar-divider : #1f2d4a; --color-sidebar-hover-bg : #1a2847; --color-sidebar-active-bg : #10b981; --color-sidebar-active-text : #ffffff; --color-sidebar-name : #e6edf8; --color-sidebar-value : #9fb0c9; /* Stepper indicator - dark mode */ --color-stepper-active: #f0a050; --color-stepper-active-hv: rgba(240,160,80,0.15); --color-stepper-done: #4caf50; --color-stepper-default: var(--color-border-panel); } /* ════════════════════════════════════════ UTILITY & GLOBAL RULES ════════════════════════════════════════ */ /* Transisi smooth saat ganti tema */ *, *::before, *::after { transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-fast); } /* Elemen yang tidak perlu transisi tema */ img, video, canvas, svg, .page, .page * { transition: none !important; } /* ── Scrollbar Tema ── */ :root { scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-bg-section); } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--color-bg-section); } ::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: var(--radius-sm); } ::-webkit-scrollbar-thumb:hover { background: var(--color-accent-hover); } /* ════════════════════════════════════════ RESPONSIVE FOUNDATION — Mobile-First Ditambahkan: 2026-04-07 Referensi: refact_Responsiveness-ui/ux.md Phase 1 ════════════════════════════════════════ */ /* ── 1. Global Overflow Prevention ── */ html, body { overflow-x: hidden; max-width: 100vw; } /* Safe content wrapper */ .main-content, .panel-content, .tab-panel { overflow-x: hidden; max-width: 100%; } /* Exception: Elements yang memang perlu horizontal scroll */ .alur-flow, .stepper-nav, .thumbnail-strip, .code-block { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Images & media responsive default */ img, video, canvas, svg, iframe { max-width: 100%; height: auto; } /* Pre & code blocks */ pre, code { max-width: 100%; overflow-x: auto; } /* ── 2. Fluid Typography ── */ html { font-size: clamp(13px, 0.9vw + 9px, 16px); } .page-title { font-size: clamp(18px, 2.5vw, 28px); } .page-subtitle { font-size: clamp(11px, 1.2vw, 14px); } /* ── 3. Standard Breakpoint System ── */ /* Mobile kecil - iPhone SE, Galaxy small (≤375px) */ @media (max-width: 375px) { .app-header { padding: 0 12px; } .main-content { padding: 16px; } .page-title { font-size: 18px; } .guru-name, .guru-sub { display: none; } .logo-sub { display: none; } .app-name { font-size: clamp(13px, 3.5vw, 16px); } } /* Mobile normal - iPhone 12/13/14, Android (≤480px) */ @media (max-width: 480px) { .main-content { padding: 16px; } .page-title { font-size: 20px; } .page-subtitle { font-size: 12px; } .app-card-name { font-size: 12px; } .app-card-desc { font-size: 11px; } /* Sidebar collapse untuk mobile */ .sidebar { position: fixed; left: 0; top: 52px; bottom: 0; z-index: 99; transform: translateX(-100%); transition: transform 0.3s ease; } .sidebar.open { transform: translateX(0); } /* Grid stacking */ .top-section { grid-template-columns: 1fr; } .bottom-row { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } /* Button text hide, icon only */ .btn-feedback-trigger span, .btn-logout span { display: none; } .btn-feedback-trigger, .btn-logout { padding: 8px; } /* Modal responsive */ .modal-content, .modal-dialog { width: 95%; max-height: 90vh; } .modal-header { padding: 12px 16px; } .modal-body { padding: 12px 16px; } .modal-title { font-size: 14px; } /* Prevent iOS zoom on input focus */ .form-input, .form-group input, .form-group select, .form-group textarea { font-size: 16px; } } /* Tablet - iPad, Android tablet (≤768px) */ @media (max-width: 768px) { .app-header { padding: 0 16px; gap: 8px; } .sidebar { width: 180px; } .sekolah-info-container { width: 100%; } .main-content { padding: 20px; } .apps-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } } /* Laptop kecil / Tablet landscape (≤1024px) */ @media (max-width: 1024px) { .sidebar { width: 180px; } .top-section { grid-template-columns: 1fr; } .sekolah-info-container { order: -1; } .main-content { padding: 24px; } .apps-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; } } /* Laptop normal - 13" and above (≤1280px) */ @media (max-width: 1280px) { .main-content { padding: 28px; } .apps-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } } /* ── 4. Sidebar Toggle Utilities ── */ .sidebar-toggle-mobile { display: none; position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 12px; background: var(--color-primary, #1a365d); color: var(--color-text-inverse, #ffffff); border: none; border-radius: var(--radius-sm, 4px); cursor: pointer; font-size: 16px; line-height: 1; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } @media (max-width: 480px) { .sidebar-toggle-mobile { display: flex; align-items: center; justify-content: center; } } /* Overlay for mobile sidebar */ .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 98; opacity: 0; transition: opacity 0.3s ease; } .sidebar-overlay.active { display: block; opacity: 1; } /* ── 5. Responsive Utility Classes ── */ /* Visibility utilities */ @media (max-width: 480px) { .hide-mobile { display: none !important; } } @media (min-width: 481px) { .show-mobile { display: none !important; } } @media (max-width: 768px) { .hide-tablet { display: none !important; } } @media (min-width: 769px) { .show-tablet { display: none !important; } } /* Full width utility untuk mobile */ .full-width-mobile { width: 100%; } @media (max-width: 480px) { .full-width-mobile { max-width: 100%; margin-left: 0; margin-right: 0; } } /* ════════════════════════════════════════ Print — Selalu Light Mode ════════════════════════════════════════ */ @media print { :root, [data-theme="dark"] { --color-bg-app : #ffffff !important; --color-bg-panel : #ffffff !important; --color-bg-section : #ffffff !important; --color-text-primary : #000000 !important; --color-text-secondary : #333333 !important; } /* Hide non-printable elements */ .sidebar, .app-header, .sidebar-toggle-mobile, .sidebar-overlay, button, .btn { display: none !important; } /* Reset layout untuk print */ .main-content { padding: 0 !important; margin: 0 !important; } }