/* SMK Virtual Lab - gaya aplikasi Warna tema berasal dari identitas sekolah: --svl-primary, --svl-secondary (diset di ). */ :root { --svl-sidebar-w: 264px; --svl-sidebar-bg: #0F172A; --svl-sidebar-fg: #CBD5E1; --svl-bg: #F4F6FB; --svl-radius: 14px; --bs-body-bg: var(--svl-bg); --bs-border-radius: 10px; --bs-border-radius-lg: var(--svl-radius); } /* Tombol & komponen mengikuti warna sekolah */ .btn-primary { --bs-btn-bg: var(--svl-primary); --bs-btn-border-color: var(--svl-primary); --bs-btn-color: var(--svl-on-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--svl-primary) 86%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--svl-primary) 86%, #000); --bs-btn-hover-color: var(--svl-on-primary); --bs-btn-active-bg: color-mix(in srgb, var(--svl-primary) 78%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--svl-primary) 78%, #000); --bs-btn-active-color: var(--svl-on-primary); --bs-btn-disabled-bg: var(--svl-primary); --bs-btn-disabled-border-color: var(--svl-primary); --bs-btn-disabled-color: var(--svl-on-primary); --bs-btn-focus-shadow-rgb: var(--svl-primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--svl-primary); --bs-btn-border-color: var(--svl-primary); --bs-btn-hover-bg: var(--svl-primary); --bs-btn-hover-border-color: var(--svl-primary); --bs-btn-hover-color: var(--svl-on-primary); --bs-btn-active-bg: var(--svl-primary); --bs-btn-active-color: var(--svl-on-primary); } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--svl-primary-rgb), .55); box-shadow: 0 0 0 .2rem rgba(var(--svl-primary-rgb), .18); } .form-check-input:checked { background-color: var(--svl-primary); border-color: var(--svl-primary); } .text-primary { color: var(--svl-primary) !important; } .bg-primary { background-color: var(--svl-primary) !important; } .min-w-0 { min-width: 0; } /* ---------- Shell aplikasi ---------- */ .svl-shell { display: flex; min-height: 100vh; } .svl-sidebar { background: var(--svl-sidebar-bg); color: var(--svl-sidebar-fg); } /* Bootstrap memberi .offcanvas-lg background transparent !important di >= lg; timpa dengan selektor lebih spesifik */ .svl-shell .svl-sidebar.offcanvas-lg { background-color: var(--svl-sidebar-bg) !important; } @media (min-width: 992px) { .svl-sidebar { width: var(--svl-sidebar-w); flex: 0 0 var(--svl-sidebar-w); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; } } @media (max-width: 991.98px) { .svl-sidebar.offcanvas-lg { --bs-offcanvas-width: 280px; --bs-offcanvas-bg: var(--svl-sidebar-bg); } .svl-sidebar .offcanvas-body, .svl-sidebar { display: flex; flex-direction: column; } } .svl-brand { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); } .svl-brand-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; background: #fff; padding: 3px; flex: 0 0 40px; } .svl-brand-app { font-weight: 700; color: #fff; font-size: .95rem; line-height: 1.2; } .svl-brand-school { font-size: .78rem; color: #94A3B8; max-width: 170px; } .svl-nav { padding: .75rem .6rem; flex: 1 1 auto; } .svl-nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #64748B; padding: 1rem .75rem .35rem; font-weight: 600; } .svl-nav-link { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; margin-bottom: 2px; border-radius: 10px; color: var(--svl-sidebar-fg); text-decoration: none; font-size: .92rem; transition: background .15s, color .15s; } .svl-nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; } .svl-nav-link:hover { background: rgba(255,255,255,.06); color: #fff; } .svl-nav-link.active { background: var(--svl-primary); color: var(--svl-on-primary); box-shadow: 0 6px 16px -6px rgba(var(--svl-primary-rgb), .7); } .svl-sidebar-foot { padding: .75rem 1rem; font-size: .72rem; color: #475569; border-top: 1px solid rgba(255,255,255,.06); } .svl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .svl-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid #E5E7EB; } .svl-page-title { font-size: 1.1rem; font-weight: 700; margin: 0; } .svl-user-btn { display: flex; align-items: center; gap: .6rem; border: 1px solid transparent; padding: .3rem .5rem; } .svl-user-btn:hover { background: #F1F5F9; } .svl-user-name { max-width: 180px; font-size: .88rem; } .svl-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: .85rem; background: rgba(var(--svl-primary-rgb), .12); color: var(--svl-primary); flex: 0 0 36px; } .svl-content { padding: 1rem; flex: 1 1 auto; } @media (min-width: 992px) { .svl-content { padding: 1.5rem 1.75rem; } } .svl-footer { padding: 1rem 1.75rem; font-size: .8rem; color: #94A3B8; } /* ---------- Kartu & komponen ---------- */ .card { border-radius: var(--svl-radius); } .svl-card { background: #fff; border: 1px solid #E8ECF3; border-radius: var(--svl-radius); } .svl-stat { padding: 1rem 1.1rem; display: flex; align-items: center; gap: .9rem; height: 100%; } .svl-stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex: 0 0 46px; background: rgba(var(--svl-primary-rgb), .1); color: var(--svl-primary); } .svl-stat-value { font-size: 1.45rem; font-weight: 800; line-height: 1.1; } .svl-stat-label { font-size: .8rem; color: #64748B; } .svl-section-title { font-size: .95rem; font-weight: 700; margin-bottom: .75rem; } /* Kartu level / XP (dashboard siswa) */ .svl-hero { border-radius: var(--svl-radius); color: var(--svl-on-primary); padding: 1.25rem; background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.18) 0, transparent 55%), linear-gradient(135deg, var(--svl-primary), color-mix(in srgb, var(--svl-primary) 55%, #0F172A)); } .svl-hero .progress { height: 10px; background: rgba(255,255,255,.25); border-radius: 99px; } .svl-hero .progress-bar { background: var(--svl-secondary); border-radius: 99px; } .svl-level-badge { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; background: rgba(255,255,255,.18); flex: 0 0 64px; } /* ---------- Halaman login ---------- */ .svl-auth { background: var(--svl-bg); } .svl-auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr; } @media (min-width: 992px) { .svl-auth-wrap { grid-template-columns: 1.1fr 1fr; } } .svl-auth-brand { color: var(--svl-on-primary); display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; background: radial-gradient(90% 90% at 90% 10%, rgba(255,255,255,.16) 0, transparent 60%), linear-gradient(145deg, var(--svl-primary), color-mix(in srgb, var(--svl-primary) 45%, #0B1220)); } .svl-auth-brand-inner { max-width: 440px; text-align: center; } .svl-auth-logo { width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: 24px; padding: 8px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.45); margin-bottom: 1rem; } @media (min-width: 992px) { .svl-auth-logo { width: 128px; height: 128px; } } .svl-auth-app { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; } .svl-auth-school { font-size: 1rem; opacity: .9; } .svl-auth-tagline { margin: .9rem 0 0; opacity: .85; font-style: italic; } .svl-auth-features { list-style: none; padding: 0; margin: 1.75rem 0 0; gap: .6rem; justify-content: center; flex-wrap: wrap; } .svl-auth-features li { background: rgba(255,255,255,.14); border-radius: 99px; padding: .35rem .8rem; font-size: .85rem; } .svl-auth-features i { margin-right: .35rem; } .svl-auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; } .svl-auth-card { width: 100%; max-width: 400px; } .svl-auth-foot { margin-top: 1.5rem; font-size: .78rem; color: #94A3B8; text-align: center; } /* ---------- Wizard setup ---------- */ .svl-setup { background: var(--svl-bg); } .svl-steps { display: flex; list-style: none; padding: 0; margin: 0 0 1.25rem; gap: .5rem; counter-reset: s; } .svl-steps li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; position: relative; color: #94A3B8; font-size: .8rem; } .svl-steps li:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 2px; background: #E2E8F0; } .svl-steps li.done:not(:last-child)::after { background: var(--svl-primary); } .svl-step-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #E2E8F0; color: #475569; position: relative; z-index: 1; } .svl-steps li.current { color: #0F172A; font-weight: 600; } .svl-steps li.current .svl-step-dot { background: var(--svl-primary); color: var(--svl-on-primary); box-shadow: 0 0 0 5px rgba(var(--svl-primary-rgb), .18); } .svl-steps li.done .svl-step-dot { background: var(--svl-primary); color: var(--svl-on-primary); } @media (max-width: 575.98px) { .svl-step-label { display: none; } .svl-steps li.current .svl-step-label { display: block; } } /* ---------- Identitas sekolah ---------- */ .svl-logo-box { width: 112px; height: 112px; border-radius: 16px; border: 1px dashed #CBD5E1; background: #F8FAFC; display: grid; place-items: center; overflow: hidden; flex: 0 0 112px; } .svl-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; } .svl-preview { border-radius: var(--svl-radius); overflow: hidden; border: 1px solid #E2E8F0; } .svl-preview-top { padding: 1rem; color: var(--p-on, #fff); background: linear-gradient(145deg, var(--p, #1D4ED8), color-mix(in srgb, var(--p, #1D4ED8) 45%, #0B1220)); } .svl-preview-body { padding: 1rem; background: #fff; } .svl-preview .svl-preview-btn { background: var(--p, #1D4ED8); color: var(--p-on, #fff); border: 0; border-radius: 8px; padding: .35rem .8rem; font-size: .85rem; } .svl-preview .svl-preview-chip { background: var(--s, #F59E0B); border-radius: 99px; padding: .15rem .6rem; font-size: .75rem; color: #111827; } .form-control-color { width: 3rem; } /* ---------- Halaman error ---------- */ .svl-error { min-height: 100vh; display: grid; place-items: center; background: var(--svl-bg); padding: 1rem; } .svl-error-card { background: #fff; border-radius: var(--svl-radius); padding: 2rem; max-width: 440px; text-align: center; box-shadow: 0 10px 30px -15px rgba(15,23,42,.25); } .svl-error-code { font-size: 3.5rem; font-weight: 800; color: var(--svl-primary); line-height: 1; margin-bottom: .5rem; } /* Animasi secukupnya, hormati preferensi pengguna */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---------- Kartu akun (cetak) ---------- */ .svl-cred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; } .svl-cred-card { background: #fff; border: 1px dashed #94A3B8; border-radius: 10px; padding: .8rem .9rem; break-inside: avoid; } .svl-cred-note { margin-top: .4rem; font-size: .72rem; color: #B45309; } @media print { .svl-sidebar, .svl-topbar, .svl-footer, .alert, .d-print-none { display: none !important; } .svl-content { padding: 0 !important; } body { background: #fff !important; } .svl-cred-grid { grid-template-columns: repeat(3, 1fr); gap: 6mm; } .svl-cred-card { border-color: #000; } }