/* ============================================================= CBT GANISPH — Global UI Stylesheet Brand: #1b356a (primary) · #1b1b1b (dark) · #ffffff (light) Font: Manrope (Google Fonts) ============================================================= */ /* ── 1. CSS Variables ──────────────────────────────────────── */ :root { --color-primary: #1b356a; --color-primary-dark:#152a54; --color-dark: #1b1b1b; --color-light: #ffffff; --color-bg-auth: linear-gradient(135deg, #e8eef6 0%, #c5d5eb 100%); --shadow-card: 0 10px 25px rgba(0, 0, 0, 0.1); --radius-card: 15px; } /* ── 2. Global Font ────────────────────────────────────────── */ /* Set di body + form elements (tidak inherit otomatis di beberapa browser). JANGAN gunakan * !important — akan override font-family FA pada ::before/::after. */ body, input, select, textarea, button { font-family: 'Manrope', sans-serif; } /* ── 3. Sidebar — Active Nav ───────────────────────────────── */ /* Sidebar pakai background gelap — gunakan putih transparan agar kontras, bukan primary (#1b356a) yang akan hilang di atas dark background. */ .nav-pills .nav-link.active { background-color: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; border-radius: 0 !important; margin: 0 !important; box-shadow: none; border-left: 3px solid #ffffff; } .nav-treeview { margin-left: 10px; } .nav-treeview .nav-link { font-size: 0.9rem; border-radius: 8px; } .nav-sidebar .nav-item .nav-link { border-radius: 8px; margin: 0 5px; transition: all 0.2s ease-in-out; } .nav-sidebar .nav-item .nav-link:hover:not(.active) { background-color: rgba(255, 255, 255, 0.1) !important; color: #fff !important; border-radius: 8px; } /* ── 4. Brand / Logo ───────────────────────────────────────── */ .brand-link { border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding: 15px 10px !important; } body:not(.sidebar-collapse) .brand-logo-mini { display: none !important; } body:not(.sidebar-collapse) .brand-logo-normal { display: inline-block !important; } body:not(.sidebar-collapse) .brand-logo-fallback{ display: none; } body.sidebar-collapse .brand-logo-normal, body.sidebar-collapse .brand-logo-fallback { display: none !important; } body.sidebar-collapse .brand-logo-mini { display: inline-block !important; } .brand-logo-normal:not([src]), .brand-logo-normal[src=""] { display: none !important; } .brand-logo-normal:not([src]) + .brand-logo-fallback, .brand-logo-normal[src=""] + .brand-logo-fallback { display: inline-block !important; font-weight: 700; font-size: 18px; } /* ── 5. Navbar ─────────────────────────────────────────────── */ .navbar-center { position: absolute; left: 50%; transform: translateX(-50%); } .navbar-title { font-weight: 700; font-size: 20px; letter-spacing: 1px; color: #1b1b1b; white-space: nowrap; } /* ── 6. Layout / Content ───────────────────────────────────── */ .content-wrapper { background-color: #f4f6f9; } /* ── 6b. Modal Fix — AdminLTE stacking context ─────────────── */ /* AdminLTE .content-wrapper punya CSS transition yang membentuk stacking context baru. Bootstrap menaruh .modal-backdrop langsung di , sehingga backdrop menutupi modal yang terjebak di dalam stacking context .content-wrapper. Fix: paksa .modal dan .modal-backdrop pakai position:fixed agar berada di root stacking context. */ .modal { position: fixed !important; } .modal-backdrop { position: fixed !important; z-index: 1040 !important; } .main-sidebar .sidebar { padding-top: 7px; } .sidebar-custom { position: absolute; bottom: 10px; width: 100%; padding: 10px 15px; background: rgba(0, 0, 0, 0.1); } /* ── 7. Responsive / Mobile ────────────────────────────────── */ @media (max-width: 767.98px) { .navbar-nav.ml-auto { display: none !important; } .navbar-title { font-size: 16px; } .table { font-size: 13px; } .brand-link { text-align: center; } .brand-text { display: none; } } /* ── 8. Row Status (Peserta) ───────────────────────────────── */ .flash-active { background-color: #f8d7da !important; animation: cbt-flash 1.2s infinite; } @keyframes cbt-flash { 0% { opacity: 1; } 50% { opacity: .6; } 100% { opacity: 1; } } .row-disabled { background-color: #f1f1f1; color: #888; } .row-active { background-color: #fff3cd; animation: cbt-flash-yellow 1.4s infinite; } .row-progress { background-color: #dbeafe; } .row-finished { background-color: #d1fae5; } @keyframes cbt-flash-yellow { 0% { opacity: 1; } 50% { opacity: .65; } 100% { opacity: 1; } } /* ── 9. Tables ─────────────────────────────────────────────── */ .table td, .table th { vertical-align: middle; } /* ── 10. Auth Pages — Layout ───────────────────────────────── */ body.login-page { background: var(--color-bg-auth); min-height: 100vh; display: flex; align-items: center; justify-content: center; } body.register-page { background: var(--color-bg-auth); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px 0; } .login-box { width: 450px; max-width: 95%; } .register-box{ width: 700px; max-width: 95%; } /* ── 11. Auth Pages — Card ─────────────────────────────────── */ body.login-page .card, body.register-page .card { border-top: 5px solid var(--color-primary); border-radius: var(--radius-card); box-shadow: var(--shadow-card); border-bottom: none; border-left: none; border-right: none; } body.login-page .card-header, body.register-page .card-header { background: transparent; border-bottom: none; padding-top: 30px; padding-bottom: 10px; } /* ── 12. Auth Pages — Inputs ───────────────────────────────── */ body.login-page .input-group-text, body.register-page .input-group-text { background-color: #f8f9fa; border-right: none; color: #6c757d; } body.login-page .form-control, body.register-page .form-control { border-left: none; } body.login-page .form-control:focus, body.register-page .form-control:focus { border-color: #ced4da; box-shadow: none; } body.register-page select.form-control, body.register-page textarea.form-control { border-left: 1px solid #ced4da; border-radius: 5px; } body.register-page .input-group select.form-control { border-left: none; border-radius: 0 5px 5px 0; } .toggle-password { cursor: pointer; background-color: #ffffff; border-left: none; } .toggle-password:hover { color: var(--color-primary); } /* ── 13. Auth Pages — Buttons ──────────────────────────────── */ .btn-login, .btn-register { background-color: var(--color-primary); border-color: var(--color-primary); color: #ffffff; font-weight: bold; letter-spacing: 1px; transition: all 0.3s; border-radius: 5px; } .btn-login { padding: 10px; } .btn-register{ padding: 12px; font-size: 1.1rem; } .btn-login:hover, .btn-register:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #ffffff; box-shadow: 0 4px 10px rgba(27, 53, 106, 0.35); } /* Override .btn-primary for auth pages to use brand color */ body.login-page .btn-primary, body.register-page .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); font-weight: bold; } body.login-page .btn-primary:hover, body.register-page .btn-primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); } /* ── 14. Auth Pages — Links & Typography ───────────────────── */ .forgot-link { color: #6c757d; font-size: 0.9rem; text-decoration: none; transition: 0.3s; } .forgot-link:hover { color: var(--color-primary); text-decoration: underline; } .login-link { color: var(--color-primary); font-weight: bold; text-decoration: none; } .login-link:hover { text-decoration: underline; } .form-section-title { color: var(--color-primary); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; margin-bottom: 15px; margin-top: 10px; border-bottom: 2px solid #c5d5eb; padding-bottom: 5px; display: inline-block; } /* ── 15. OTP Step Indicator ────────────────────────────────── */ .step-indicator { display: flex; justify-content: space-around; margin-bottom: 20px; font-size: 12px; } .step { text-align: center; } .step-number { display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background: #e8eef6; color: var(--color-primary); font-weight: bold; margin-bottom: 5px; } .step.active .step-number { background: var(--color-primary); color: #ffffff; } .step.done .step-number { background: #28a745; color: #ffffff; } .step-label { display: block; margin-top: 5px; }