.login-box { width: 400px; margin: 7% auto; animation: login-fade-in .45s ease-out; } @keyframes login-fade-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* * Accent color themes. Picked on the login page (theme-swatch buttons), * persisted in the `accentTheme` cookie (app.js), and applied to every * layout's as `theme-` - so the same accent color carries into * the authenticated app (sidebar active item, primary buttons/badges), not * just the login screen. `--accent`/`--accent-dark` drive the login * gradient; the flat `--accent` alone drives in-app overrides below. */ .theme-default { --accent: #4e73df; --accent-dark: #6f42c1; --accent-rgb: 78, 115, 223; } .theme-ocean { --accent: #0ea5e9; --accent-dark: #0891b2; --accent-rgb: 14, 165, 233; } .theme-emerald { --accent: #10b981; --accent-dark: #059669; --accent-rgb: 16, 185, 129; } .theme-sunset { --accent: #f59e0b; --accent-dark: #ef4444; --accent-rgb: 245, 158, 11; } .theme-rose { --accent: #ec4899; --accent-dark: #8b5cf6; --accent-rgb: 236, 72, 153; } body.login-page { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); } body.login-page.dark-mode { background: linear-gradient(135deg, #1f2937 0%, #0f1115 100%); } .theme-picker { display: flex; justify-content: center; gap: .6rem; margin-bottom: 1.25rem; } .theme-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); padding: 0; cursor: pointer; background: linear-gradient(135deg, var(--swatch-accent) 0%, var(--swatch-accent-dark) 100%); transition: transform .15s ease, border-color .15s ease; } .theme-swatch:hover { transform: scale(1.15); } .theme-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); } .theme-swatch-default { --swatch-accent: #4e73df; --swatch-accent-dark: #6f42c1; } .theme-swatch-ocean { --swatch-accent: #0ea5e9; --swatch-accent-dark: #0891b2; } .theme-swatch-emerald { --swatch-accent: #10b981; --swatch-accent-dark: #059669; } .theme-swatch-sunset { --swatch-accent: #f59e0b; --swatch-accent-dark: #ef4444; } .theme-swatch-rose { --swatch-accent: #ec4899; --swatch-accent-dark: #8b5cf6; } /* In-app accent overrides - same --accent variable, applied to the elements AdminLTE hardcodes to Bootstrap blue (#007bff). */ .theme-default .btn-primary, .theme-ocean .btn-primary, .theme-emerald .btn-primary, .theme-sunset .btn-primary, .theme-rose .btn-primary { background-color: var(--accent); border-color: var(--accent); } .theme-default .bg-primary, .theme-ocean .bg-primary, .theme-emerald .bg-primary, .theme-sunset .bg-primary, .theme-rose .bg-primary, .theme-default .badge-primary, .theme-ocean .badge-primary, .theme-emerald .badge-primary, .theme-sunset .badge-primary, .theme-rose .badge-primary { background-color: var(--accent) !important; } .theme-default .text-primary, .theme-ocean .text-primary, .theme-emerald .text-primary, .theme-sunset .text-primary, .theme-rose .text-primary { color: var(--accent) !important; } .theme-default .nav-sidebar > .nav-item > .nav-link.active, .theme-ocean .nav-sidebar > .nav-item > .nav-link.active, .theme-emerald .nav-sidebar > .nav-item > .nav-link.active, .theme-sunset .nav-sidebar > .nav-item > .nav-link.active, .theme-rose .nav-sidebar > .nav-item > .nav-link.active { background-color: var(--accent); } .login-logo-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto .6rem; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 1.4rem; color: #fff; } .login-card { border: none; border-radius: 1rem; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .25); } .login-card-body { padding: 2rem 2rem 1.5rem; } .login-label { font-size: .78rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; } /* Icon-inside-input pattern (pill-shaped, single seamless border) instead of Bootstrap's boxy input-group-prepend, which reads as two square-cornered fields glued together. */ .login-field { position: relative; } .login-field-icon { position: absolute; top: 50%; left: 1.1rem; transform: translateY(-50%); color: #adb5bd; font-size: .9rem; pointer-events: none; } .login-input { border-radius: 2rem; padding: .65rem 1.1rem .65rem 2.7rem; border: 1px solid #dee2e6; transition: border-color .15s ease, box-shadow .15s ease; } .login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .25); } .login-submit-btn { border-radius: 2rem; padding: .65rem 1rem; font-weight: 600; transition: transform .15s ease, box-shadow .15s ease; } .login-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); } .login-footer-text { text-align: center; color: rgba(255, 255, 255, .85); margin-top: 1.25rem; font-size: .82rem; } .dark-mode .login-card { background-color: #1e2124; } .dark-mode .login-box-msg { color: #adb5bd; } .dark-mode .login-input { background-color: #26292c; border-color: #3a3f44; color: #e9ecef; } .dark-mode .login-input::placeholder { color: #6c757d; } /* Custom "Ingat saya" checkbox - AdminLTE's icheck-primary class needs a separate icheck-bootstrap.css this project doesn't vendor, so without this it silently falls back to the browser's plain square checkbox. Built here with no extra dependency: native stays for a11y/keyboard/click handling, visually hidden, with an adjacent rendering the rounded, theme-colored box via the :checked sibling selector. */ .login-checkbox { display: inline-flex; align-items: center; cursor: pointer; color: #6c757d; font-size: .9rem; user-select: none; } .login-checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .login-checkbox-box { position: relative; display: inline-block; flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-right: .5rem; border: 1.5px solid #ced4da; border-radius: .35rem; background: #fff; transition: background-color .15s ease, border-color .15s ease; } .login-checkbox-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity .1s ease; } .login-checkbox input[type="checkbox"]:checked + .login-checkbox-box { background-color: var(--accent); border-color: var(--accent); } .login-checkbox input[type="checkbox"]:checked + .login-checkbox-box::after { opacity: 1; } .login-checkbox input[type="checkbox"]:focus-visible + .login-checkbox-box { box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .25); } .dark-mode .login-checkbox { color: #adb5bd; } .dark-mode .login-checkbox-box { background: #26292c; border-color: #3a3f44; } .user-panel .image { width: 2.1rem; height: 2.1rem; } .table-actions .btn { margin-right: .25rem; } .quota-bar { height: 6px; } #importProgressWrap { display: none; } .cursor-pointer { cursor: pointer; }