/* * Hikamsmart Studio — Sidebar v2 PWA stylesheet * Scope : semua selector pakai prefix .hk-* (tidak menyentuh CSS view existing) * Format : mobile-first, gradually enhanced di breakpoint ≥640px * Dependsi : assets/js/app.js (Step 4) untuk toggle .hk-drawer-open di * Versi : v2.0 */ /* ==================================================================== * 1. DESIGN TOKENS (CSS Variables) * ==================================================================== */ :root { --hk-primary: #2383e2; --hk-primary-dark: #1a72cf; --hk-primary-light: #e8f1fc; --hk-primary-soft: #f4f9fe; --hk-text: #37352f; --hk-text-muted: #787774; --hk-text-inverse: #ffffff; --hk-bg: #ffffff; --hk-bg-soft: #f7f7f5; --hk-bg-overlay: rgba(15, 15, 15, 0.45); --hk-border: #ececea; --hk-border-strong: #d3d3d0; --hk-danger: #e03e3e; --hk-danger-light: #fce5e5; --hk-radius: 8px; --hk-radius-sm: 6px; --hk-radius-lg: 12px; --hk-shadow-drawer: 0 8px 24px rgba(0, 0, 0, 0.12); --hk-shadow-topbar: 0 1px 3px rgba(0, 0, 0, 0.04); --hk-shadow-popup: 0 4px 12px rgba(0, 0, 0, 0.08); --hk-drawer-width: 280px; --hk-topbar-height: 56px; --hk-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --hk-font-mono: 'SF Mono', Menlo, Monaco, Consolas, monospace; --hk-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); --hk-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --hk-z-topbar: 40; --hk-z-scrim: 50; --hk-z-drawer: 60; --hk-z-toast: 80; } /* ==================================================================== * 2. BODY (cuma offset untuk sticky topbar + lock scroll saat drawer) * ==================================================================== */ body.hk-has-topbar { padding-top: var(--hk-topbar-height); padding-top: calc(var(--hk-topbar-height) + env(safe-area-inset-top, 0px)); } body.hk-drawer-open { overflow: hidden; /* lock scroll saat drawer terbuka */ touch-action: none; } /* ==================================================================== * 3. TOPBAR * ==================================================================== */ .hk-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--hk-z-topbar); height: var(--hk-topbar-height); background: var(--hk-bg); border-bottom: 1px solid var(--hk-border); box-shadow: var(--hk-shadow-topbar); font-family: var(--hk-font); color: var(--hk-text); padding-top: env(safe-area-inset-top, 0px); /* iOS safe area: address bar / notch */ } .hk-topbar-inner { display: flex; align-items: center; gap: 8px; height: var(--hk-topbar-height); padding: 0 12px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); max-width: 1400px; margin: 0 auto; } .hk-hamburger, .hk-topbar-back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--hk-text); border-radius: var(--hk-radius-sm); cursor: pointer; transition: background var(--hk-transition-fast), color var(--hk-transition-fast); text-decoration: none; flex-shrink: 0; } .hk-hamburger:hover, .hk-topbar-back:hover { background: var(--hk-bg-soft); color: var(--hk-primary); } .hk-hamburger:active, .hk-topbar-back:active { background: var(--hk-primary-light); } .hk-hamburger:focus-visible, .hk-topbar-back:focus-visible { outline: 2px solid var(--hk-primary); outline-offset: 2px; } .hk-topbar-brand { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--hk-text); font-weight: 600; font-size: 16px; padding: 4px 8px; border-radius: var(--hk-radius-sm); transition: background var(--hk-transition-fast); flex-shrink: 0; } .hk-topbar-brand:hover { background: var(--hk-bg-soft); } .hk-topbar-logo { font-size: 20px; line-height: 1; } .hk-topbar-brandname { white-space: nowrap; } .hk-topbar-divider { color: var(--hk-text-muted); font-size: 18px; font-weight: 300; margin: 0 2px; flex-shrink: 0; } .hk-topbar-title { font-size: 15px; font-weight: 500; color: var(--hk-text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } .hk-topbar-spacer { flex: 1; } .hk-topbar-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .hk-topbar-action { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--hk-radius-sm); text-decoration: none; color: var(--hk-text); font-size: 14px; font-weight: 500; transition: background var(--hk-transition-fast), color var(--hk-transition-fast); } .hk-topbar-action:hover { background: var(--hk-primary-light); color: var(--hk-primary-dark); } .hk-topbar-action-lbl { display: none; } .hk-topbar-link.hk-topbar-primary { background: var(--hk-primary); color: var(--hk-text-inverse); } .hk-topbar-link.hk-topbar-primary:hover { background: var(--hk-primary-dark); color: var(--hk-text-inverse); } .hk-topbar-avatar-link { display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: 50%; text-decoration: none; transition: background var(--hk-transition-fast); } .hk-topbar-avatar-link:hover { background: var(--hk-bg-soft); } .hk-topbar-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--hk-primary); color: var(--hk-text-inverse); border-radius: 50%; font-weight: 600; font-size: 13px; line-height: 1; } /* ==================================================================== * 4. DRAWER (off-canvas) * ==================================================================== */ .hk-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: var(--hk-drawer-width); max-width: 88vw; z-index: var(--hk-z-drawer); background: var(--hk-bg); color: var(--hk-text); font-family: var(--hk-font); display: flex; flex-direction: column; box-shadow: var(--hk-shadow-drawer); transform: translateX(-100%); transition: transform var(--hk-transition); will-change: transform; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); overscroll-behavior: contain; } body.hk-drawer-open .hk-drawer { transform: translateX(0); } .hk-drawer[aria-hidden="false"] { transform: translateX(0); /* fallback kalau body class belum di-toggle */ } /* === drawer header === */ .hk-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--hk-border); flex-shrink: 0; } .hk-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hk-text); } .hk-brand-logo { font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--hk-primary-light); border-radius: var(--hk-radius); } .hk-brand-name { display: flex; flex-direction: column; line-height: 1.1; } .hk-brand-name strong { font-size: 15px; font-weight: 600; color: var(--hk-text); } .hk-brand-name small { font-size: 11px; color: var(--hk-text-muted); } .hk-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; background: transparent; color: var(--hk-text-muted); border-radius: var(--hk-radius-sm); cursor: pointer; transition: background var(--hk-transition-fast), color var(--hk-transition-fast); } .hk-drawer-close:hover { background: var(--hk-bg-soft); color: var(--hk-text); } .hk-drawer-close:focus-visible { outline: 2px solid var(--hk-primary); outline-offset: 2px; } /* === drawer nav === */ .hk-drawer-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px; -webkit-overflow-scrolling: touch; } .hk-drawer-nav::-webkit-scrollbar { width: 6px; } .hk-drawer-nav::-webkit-scrollbar-thumb { background: var(--hk-border-strong); border-radius: 3px; } .hk-nav-section { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hk-text-muted); font-weight: 600; padding: 14px 12px 6px; } .hk-nav-section:first-child { padding-top: 6px; } .hk-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--hk-radius-sm); text-decoration: none; color: var(--hk-text); font-size: 14px; font-weight: 500; line-height: 1.3; transition: background var(--hk-transition-fast), color var(--hk-transition-fast); min-height: 40px; position: relative; } .hk-nav-item:hover { background: var(--hk-bg-soft); } .hk-nav-item.hk-active { background: var(--hk-primary-light); color: var(--hk-primary-dark); font-weight: 600; } .hk-nav-item.hk-active::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--hk-primary); border-radius: 0 3px 3px 0; } .hk-nav-item:focus-visible { outline: 2px solid var(--hk-primary); outline-offset: -2px; } .hk-nav-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 18px; line-height: 1; flex-shrink: 0; } .hk-nav-lbl { flex: 1; min-width: 0; } .hk-nav-chev { font-size: 12px; color: var(--hk-text-muted); flex-shrink: 0; } .hk-nav-primary { background: var(--hk-primary); color: var(--hk-text-inverse); margin-top: 4px; } .hk-nav-primary:hover { background: var(--hk-primary-dark); color: var(--hk-text-inverse); } .hk-nav-primary.hk-active { background: var(--hk-primary-dark); color: var(--hk-text-inverse); } .hk-nav-danger:hover { background: var(--hk-danger-light); color: var(--hk-danger); } .hk-nav-sub { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px 28px; border-left: 1px solid var(--hk-border); margin: 2px 0 4px 18px; } .hk-nav-subitem { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--hk-radius-sm); text-decoration: none; color: var(--hk-text-muted); font-size: 13px; transition: background var(--hk-transition-fast), color var(--hk-transition-fast); min-height: 32px; } .hk-nav-subitem:hover { background: var(--hk-bg-soft); color: var(--hk-text); } .hk-nav-subitem.hk-active { color: var(--hk-primary-dark); font-weight: 600; background: var(--hk-primary-soft); } /* === drawer footer === */ .hk-drawer-foot { border-top: 1px solid var(--hk-border); padding: 12px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; background: var(--hk-bg-soft); } .hk-user-card { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--hk-radius); } .hk-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--hk-primary); color: var(--hk-text-inverse); border-radius: 50%; font-weight: 600; font-size: 14px; flex-shrink: 0; } .hk-avatar-guest { background: var(--hk-bg); color: var(--hk-text); border: 1px solid var(--hk-border-strong); font-size: 18px; } .hk-user-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .hk-user-name { font-size: 13px; font-weight: 600; color: var(--hk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hk-user-role { font-size: 11px; color: var(--hk-text-muted); } .hk-install-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--hk-primary); background: transparent; color: var(--hk-primary); border-radius: var(--hk-radius-sm); cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; transition: background var(--hk-transition-fast), color var(--hk-transition-fast); } .hk-install-btn:hover { background: var(--hk-primary); color: var(--hk-text-inverse); } .hk-drawer-version { font-size: 10px; color: var(--hk-text-muted); text-align: center; opacity: 0.8; } /* ==================================================================== * 5. SCRIM (backdrop hitam tembus pandang) * ==================================================================== */ .hk-scrim { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: var(--hk-z-scrim); background: var(--hk-bg-overlay); opacity: 0; pointer-events: none; transition: opacity var(--hk-transition); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } body.hk-drawer-open .hk-scrim { opacity: 1; pointer-events: auto; } .hk-scrim[hidden] { display: block; } /* override hidden — visibility controlled by opacity + pointer-events */ /* ==================================================================== * 6. RESPONSIVE * ==================================================================== */ @media (min-width: 640px) { .hk-topbar-action-lbl { display: inline; } .hk-topbar-inner { padding: 0 20px; gap: 12px; } } @media (max-width: 480px) { .hk-topbar-brandname { display: none; } .hk-topbar-divider { display: none; } .hk-topbar-title { font-size: 14px; } } /* ==================================================================== * 7. UTILITY (opsional, untuk page yang pakai sidebar) * ==================================================================== */ .hk-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ==================================================================== * 8. REDUCED MOTION (a11y) * ==================================================================== */ @media (prefers-reduced-motion: reduce) { .hk-drawer, .hk-scrim, .hk-nav-item, .hk-hamburger, .hk-topbar-action { transition-duration: 0ms !important; } } /* ==================================================================== * 9. PWA STANDALONE TWEAKS * Saat dipakai sebagai PWA terinstall (display:standalone), * hilangkan padding top tambahan karena iOS Safari sudah handle * ==================================================================== */ @media (display-mode: standalone) { .hk-topbar { padding-top: env(safe-area-inset-top, 0px); } } /* === Flash & Alert === */ .hk-alert { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--hk-radius, 8px); font-size: 14px; margin-bottom: 16px; border: 1px solid transparent; line-height: 1.4; } .hk-alert-success { background: #e7f6ec; border-color: #b8e0c2; color: #1f6f3e; } .hk-alert-error { background: #fdecea; border-color: #f5b7b1; color: #a93226; } .hk-alert-icon { flex: 0 0 auto; font-size: 16px; line-height: 1; } /* ═══════════════════════════════════════════════════════ * AUTH PAGES (login, register, landing CTA) * Halaman publik tanpa drawer — layout center, kartu putih * ═══════════════════════════════════════════════════════ */ /* Wrap card di tengah viewport */ .hk-auth-wrap { max-width: 420px; margin: 8vh auto; padding: 32px 28px; background: var(--hk-bg, #ffffff); border: 1px solid var(--hk-border, #ececea); border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; color: var(--hk-text, #37352f); } @media (max-width: 480px) { .hk-auth-wrap { margin: 4vh 16px; padding: 24px 20px; border-radius: 10px; } } /* Judul halaman */ .hk-auth-title { margin: 0 0 24px 0; font-size: 22px; font-weight: 600; text-align: center; color: var(--hk-text, #37352f); letter-spacing: -0.01em; } /* Form wrapper */ .hk-auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; } /* Field (label + input) */ .hk-field { display: flex; flex-direction: column; gap: 6px; } .hk-field > span { font-size: 13px; font-weight: 500; color: var(--hk-text-muted, #787774); letter-spacing: 0.01em; } .hk-field > input { width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit; color: var(--hk-text, #37352f); background: #fff; border: 1px solid var(--hk-border, #ececea); border-radius: var(--hk-radius, 8px); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; box-sizing: border-box; } .hk-field > input:hover { border-color: #d3d3d1; } .hk-field > input:focus { border-color: var(--hk-primary, #2383e2); box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.15); } .hk-field > input:disabled { background: var(--hk-bg-soft, #f7f7f5); cursor: not-allowed; } /* Tombol */ .hk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; font-size: 14px; font-weight: 600; font-family: inherit; border: 1px solid transparent; border-radius: var(--hk-radius, 8px); cursor: pointer; transition: background 0.15s ease, transform 0.05s ease; text-decoration: none; box-sizing: border-box; } .hk-btn:active { transform: translateY(1px); } .hk-btn-primary { background: var(--hk-primary, #2383e2); color: #fff; margin-top: 4px; } .hk-btn-primary:hover { background: var(--hk-primary-dark, #1a72cf); } .hk-btn-secondary { background: var(--hk-bg-soft, #f7f7f5); color: var(--hk-text, #37352f); border-color: var(--hk-border, #ececea); } .hk-btn-secondary:hover { background: #efefed; } /* Footer link (Daftar di sini / Sudah punya akun) */ .hk-auth-foot { margin: 20px 0 0 0; font-size: 13px; text-align: center; color: var(--hk-text-muted, #787774); } .hk-auth-foot a { color: var(--hk-primary, #2383e2); text-decoration: none; font-weight: 500; } .hk-auth-foot a:hover { text-decoration: underline; } /* ═══════════════════════════════════════════════════════ * ALERT (flash success, error, warning, info) * Bisa dipakai di mana saja, tidak khusus auth * ═══════════════════════════════════════════════════════ */ .hk-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 13.5px; line-height: 1.45; border-radius: var(--hk-radius, 8px); border: 1px solid transparent; font-family: inherit; } .hk-alert-icon { flex: 0 0 auto; font-size: 16px; line-height: 1.3; } .hk-alert-success { background: #e7f6ec; border-color: #b8e0c2; color: #1f6f3e; } .hk-alert-error { background: #fdecea; border-color: #f5b7b1; color: #a93226; } .hk-alert-warning { background: #fef6e0; border-color: #f3d77e; color: #8a5a00; } .hk-alert-info { background: var(--hk-primary-light, #e8f1fc); border-color: #b8d4f0; color: #1a4d80; } /* ═══════════════════════════════════════════════════════ * CSS VARIABLES (kalau belum di-define di atas file) * Pastikan blok :root ini cuma sekali. Kalau sudah ada * di awal app.css, hapus blok di bawah ini. * ═══════════════════════════════════════════════════════ */ :root { --hk-primary: #2383e2; --hk-primary-dark: #1a72cf; --hk-primary-light: #e8f1fc; --hk-text: #37352f; --hk-text-muted: #787774; --hk-bg: #ffffff; --hk-bg-soft: #f7f7f5; --hk-border: #ececea; --hk-radius: 8px; } /* ========================================================= HK FORM (Gen Video form) ========================================================= */ .hk-main { margin-left: var(--hk-drawer-width, 280px); padding-top: var(--hk-topbar-height, 56px); } @media (max-width: 1024px) { .hk-main { margin-left: 0; } } .hk-page { max-width: 1200px; margin: 0 auto; padding: 24px; } .hk-page-narrow { max-width: 760px; } .hk-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .hk-page-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hk-primary, #2383e2); margin-bottom: 4px; } .hk-page-title { margin: 0; font-size: 28px; font-weight: 700; } .hk-page-sub { margin: 6px 0 0; color: var(--hk-muted, #787774); font-size: 14px; } .hk-back-link { font-size: 13px; color: var(--hk-muted); text-decoration: none; } .hk-back-link:hover { color: var(--hk-primary); } .hk-form { display: flex; flex-direction: column; gap: 18px; background: #fff; border: 1px solid var(--hk-border, #ececea); border-radius: 12px; padding: 24px; } .hk-field { display: flex; flex-direction: column; gap: 6px; } .hk-label { font-size: 14px; font-weight: 600; } .hk-hint { font-size: 12px; color: var(--hk-muted, #787774); font-weight: normal; } .hk-req { color: var(--hk-danger, #e03e3e); } .hk-textarea, .hk-select, .hk-input { padding: 10px 12px; border: 1px solid var(--hk-border, #ececea); border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical; background: #fff; color: var(--hk-text); } .hk-textarea:focus, .hk-select:focus, .hk-input:focus { outline: none; border-color: var(--hk-primary, #2383e2); box-shadow: 0 0 0 3px rgba(35,131,226,.1); } .hk-char-counter { font-size: 11px; color: var(--hk-muted); text-align: right; } .hk-collapse summary { font-size: 13px; color: var(--hk-muted); cursor: pointer; user-select: none; padding: 6px 0; } .hk-collapse summary:hover { color: var(--hk-text); } .hk-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .hk-grid-2-1 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; } @media (max-width: 900px) { .hk-grid-2-1 { grid-template-columns: 1fr; } } .hk-checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .hk-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; } .hk-btn-danger { color: var(--hk-danger, #e03e3e); } /* Upload box */ .hk-upload-box { border: 2px dashed var(--hk-border, #ececea); border-radius: 12px; padding: 20px; text-align: center; transition: border-color .15s, background .15s; background: #fafafa; } .hk-upload-box:hover { border-color: var(--hk-primary, #2383e2); background: #fbfdff; } .hk-upload-trigger { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; } .hk-upload-trigger strong { font-size: 14px; } .hk-upload-trigger small { font-size: 12px; color: var(--hk-muted); } .hk-upload-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .hk-upload-thumb { width: 100px; } .hk-upload-thumb img { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid var(--hk-border); } .hk-upload-thumb span { font-size: 10px; color: var(--hk-muted); display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Radio cards */ .hk-radio-group { display: flex; flex-direction: column; gap: 8px; } .hk-radio-card { display: flex; gap: 12px; padding: 12px; border: 1.5px solid var(--hk-border, #ececea); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; } .hk-radio-card:hover { border-color: var(--hk-primary, #2383e2); } .hk-radio-card input[type="radio"]:checked + div { color: var(--hk-primary); } .hk-radio-card:has(input:checked) { border-color: var(--hk-primary); background: #fbfdff; } .hk-radio-card strong { font-size: 14px; display: block; } .hk-radio-card small { font-size: 12px; color: var(--hk-muted); display: block; margin-top: 2px; } /* Toggle group (Fast/Standard) */ .hk-toggle-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hk-toggle-btn { padding: 12px; border: 1.5px solid var(--hk-border, #ececea); border-radius: 10px; text-align: center; cursor: pointer; transition: all .15s; } .hk-toggle-btn input { display: none; } .hk-toggle-btn:hover { border-color: var(--hk-primary); } .hk-toggle-btn.hk-toggle-active { border-color: var(--hk-primary); background: #fbfdff; color: var(--hk-primary); } .hk-toggle-btn.hk-toggle-disabled { opacity: .4; cursor: not-allowed; } .hk-toggle-btn small { font-size: 11px; color: var(--hk-muted); } /* Alerts */ .hk-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } .hk-alert-success { background: #e8f7ed; color: #218358; border: 1px solid #c3e6cd; } .hk-alert-error { background: #fdecec; color: #c43030; border: 1px solid #f0c5c5; } .hk-alert-warn { background: #fef6e0; color: #8b6b14; border: 1px solid #f0dca8; } /* Empty state */ .hk-empty { text-align: center; padding: 60px 20px; background: #fff; border: 1px dashed var(--hk-border); border-radius: 12px; } .hk-empty h3 { margin: 12px 0 4px; } .hk-empty p { color: var(--hk-muted); margin-bottom: 20px; } /* Video card grid */ .hk-grid-video { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .hk-video-card { display: block; background: #fff; border: 1px solid var(--hk-border); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; } .hk-video-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); } .hk-video-thumb { position: relative; aspect-ratio: 9 / 16; background: #f5f5f3; overflow: hidden; } .hk-video-thumb video, .hk-video-thumb img { width: 100%; height: 100%; object-fit: cover; } .hk-video-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 48px; opacity: .3; } .hk-video-play, .hk-video-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.6); color: #fff; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; } .hk-video-meta { padding: 12px; } .hk-video-prompt { font-size: 13px; font-weight: 500; line-height: 1.35; min-height: 35px; } .hk-video-info { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 6px; } .hk-video-date { font-size: 11px; color: var(--hk-muted); } /* Badges & tags */ .hk-badge { font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .hk-badge-success { background: #e8f7ed; color: #218358; } .hk-badge-danger { background: #fdecec; color: #c43030; } .hk-badge-info { background: #e8f1fc; color: #1a72cf; } .hk-badge-warn { background: #fef6e0; color: #8b6b14; } .hk-tag { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: #f4f4f2; color: var(--hk-muted); } /* Video detail */ .hk-card { background: #fff; border: 1px solid var(--hk-border); border-radius: 12px; padding: 20px; } .hk-card-sub { padding: 16px; } .hk-card-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; } .hk-video-main { width: 100%; max-height: 80vh; border-radius: 8px; background: #000; } .hk-video-actions { display: flex; gap: 8px; margin-top: 12px; } .hk-status-progress, .hk-status-fail { text-align: center; padding: 40px 20px; } .hk-status-progress h3 { margin: 12px 0 4px; } .hk-status-progress small { color: var(--hk-muted); display: block; margin-top: 8px; } .hk-spinner { width: 48px; height: 48px; border: 4px solid #f0f0ee; border-top-color: var(--hk-primary, #2383e2); border-radius: 50%; animation: hkSpin 1s linear infinite; margin: 0 auto; } @keyframes hkSpin { to { transform: rotate(360deg); } } .hk-meta-row { padding: 8px 0; border-bottom: 1px solid #f4f4f2; font-size: 13px; } .hk-meta-row:last-child { border-bottom: none; } .hk-meta-label { display: block; font-size: 11px; color: var(--hk-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; } .hk-meta-val { display: block; } .hk-prompt-box { background: #fafafa; padding: 8px 10px; border-radius: 6px; font-size: 13px; line-height: 1.4; max-height: 200px; overflow-y: auto; } .hk-meta-images { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .hk-meta-images img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--hk-border); } /* === Drawer: Gen Video sub-sub menu === */ .hk-drawer-toggle { width:100%; text-align:left; background:none; border:none; cursor:pointer; font:inherit; } .hk-drawer-toggle .hk-drawer-chev { margin-left:auto; transition:transform 0.2s; font-size:11px; color:#9b9a97; } .hk-drawer-toggle.is-open .hk-drawer-chev { transform:rotate(180deg); } .hk-drawer-sub { list-style:none; padding:0; margin:0; max-height:0; overflow:hidden; transition:max-height 0.25s ease-out; } .hk-drawer-sub.is-open { max-height:500px; } .hk-drawer-subitem { display:flex; align-items:center; gap:8px; padding:7px 12px 7px 32px; color:#37352f; text-decoration:none; font-size:13px; border-radius:6px; margin:1px 6px; width:calc(100% - 12px); background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; } .hk-drawer-subitem:hover { background:#f4f4f2; } .hk-drawer-subitem.is-active { background:#e8f2fc; color:#2383e2; font-weight:600; } .hk-drawer-subtoggle .hk-drawer-chev-sm { margin-left:auto; transition:transform 0.18s; font-size:10px; color:#9b9a97; } .hk-drawer-subtoggle.is-open .hk-drawer-chev-sm { transform:rotate(90deg); } .hk-drawer-subsub { list-style:none; padding:0; margin:0; max-height:0; overflow:hidden; transition:max-height 0.22s ease-out; } .hk-drawer-subsub.is-open { max-height:300px; } .hk-drawer-subsubitem { display:flex; align-items:center; gap:6px; padding:6px 12px 6px 52px; color:#37352f; text-decoration:none; font-size:12.5px; border-radius:6px; margin:1px 6px; } .hk-drawer-subsubitem:hover { background:#f4f4f2; } .hk-drawer-subsubitem.is-active { background:#e8f2fc; color:#2383e2; font-weight:600; } .hk-tag { display:inline-block; padding:1px 5px; border-radius:999px; font-size:8px; font-weight:700; letter-spacing:0.04em; margin-left:auto; } .hk-tag-hot { background:#fde8e6; color:#c4341d; } .hk-tag-pro { background:#ede9fe; color:#6d28d9; } .hk-tag-new { background:#dffae0; color:#0f7a3b; }