/* ============================================================ Denobulus Admin Login — DirectAdmin Evolution-inspired style Loaded only on /admin/login/ via default/structure_admin_login.pdt ============================================================ */ /* ── Reset / base ─────────────────────────────────────────── */ html, body { height: 100%; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; min-height: 100vh; } /* ── Full-viewport SVG background ──────────────────────────── Default (auto / light) uses the light SVG. .theme-dark swaps to the dark SVG. The JS in theme-login.js adds these classes to /. ──────────────────────────────────────────────────────────── */ html, body { background-image: url('../images/background-light.svg') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; background-color: #f0f4f8 !important; min-height: 100vh !important; } html.theme-light, body.theme-light { background-image: url('../images/background-light.svg') !important; background-color: #f0f4f8 !important; } html.theme-dark, body.theme-dark { background-image: url('../images/background-dark.svg') !important; background-color: #000000 !important; background-size: cover !important; background-attachment: fixed !important; } @media (prefers-color-scheme: dark) { html.theme-auto, body.theme-auto { background-image: url('../images/background-dark.svg') !important; background-color: #000000 !important; background-size: cover !important; background-attachment: fixed !important; } } @media (prefers-color-scheme: light) { html.theme-auto, body.theme-auto { background-image: url('../images/background-light.svg') !important; background-color: #f0f4f8 !important; } } /* ── Layout: center the login card ───────────────────────────*/ .login-page-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem 1rem; box-sizing: border-box; position: relative; } /* ── Login card ──────────────────────────────────────────────*/ .da-login-card { width: 100%; max-width: 420px; border-radius: 16px; padding: 2.5rem 2rem 2rem; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18); background: rgba(255, 255, 255, 0.97); color: #1a1a2e; box-sizing: border-box; } html.theme-dark .da-login-card, body.theme-dark .da-login-card { background: rgba(22, 28, 45, 0.97); color: #e6edf3; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: dark) { html.theme-auto .da-login-card, body.theme-auto .da-login-card { background: rgba(22, 28, 45, 0.97); color: #e6edf3; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55); } } /* ── Logo ────────────────────────────────────────────────────*/ .da-login-logo { display: block; margin: 0 auto 1.5rem; max-height: 56px; max-width: 200px; object-fit: contain; } /* ── Heading ─────────────────────────────────────────────────*/ .da-login-card h2 { text-align: center; font-size: 1.25rem; font-weight: 600; margin: 0 0 1.5rem; color: inherit; } /* ── Form labels ─────────────────────────────────────────────*/ .da-login-card label { display: block; font-size: 0.82rem; font-weight: 500; margin-bottom: 0.35rem; color: #444; } html.theme-dark .da-login-card label, body.theme-dark .da-login-card label { color: #adbac7; } @media (prefers-color-scheme: dark) { html.theme-auto .da-login-card label, body.theme-auto .da-login-card label { color: #adbac7; } } /* ── Inputs ──────────────────────────────────────────────────*/ .da-login-card .form-control, .da-login-card input[type="text"], .da-login-card input[type="password"] { width: 100%; padding: 0.6rem 0.85rem; font-size: 0.9rem; border-radius: 8px; border: 1px solid #d0d7de; background: #fff; color: #1a1a2e; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; outline: none; appearance: none; } .da-login-card .form-control:focus, .da-login-card input[type="text"]:focus, .da-login-card input[type="password"]:focus { border-color: #2162a3; box-shadow: 0 0 0 3px rgba(33, 98, 163, 0.18); } html.theme-dark .da-login-card .form-control, html.theme-dark .da-login-card input[type="text"], html.theme-dark .da-login-card input[type="password"], body.theme-dark .da-login-card .form-control, body.theme-dark .da-login-card input[type="text"], body.theme-dark .da-login-card input[type="password"] { background: rgba(255, 255, 255, 0.06); border-color: rgba(230, 237, 243, 0.18); color: #e6edf3; } html.theme-dark .da-login-card .form-control:focus, html.theme-dark .da-login-card input[type="text"]:focus, html.theme-dark .da-login-card input[type="password"]:focus, body.theme-dark .da-login-card .form-control:focus, body.theme-dark .da-login-card input[type="text"]:focus, body.theme-dark .da-login-card input[type="password"]:focus { border-color: #4a90d9; box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.22); } @media (prefers-color-scheme: dark) { html.theme-auto .da-login-card .form-control, html.theme-auto .da-login-card input[type="text"], html.theme-auto .da-login-card input[type="password"], body.theme-auto .da-login-card .form-control, body.theme-auto .da-login-card input[type="text"], body.theme-auto .da-login-card input[type="password"] { background: rgba(255, 255, 255, 0.06); border-color: rgba(230, 237, 243, 0.18); color: #e6edf3; } html.theme-auto .da-login-card .form-control:focus, body.theme-auto .da-login-card .form-control:focus { border-color: #4a90d9; box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.22); } } /* ── Form groups ─────────────────────────────────────────────*/ .da-form-group { margin-bottom: 1.1rem; } /* ── Input group (icon + field) ──────────────────────────────*/ .da-input-group { display: flex; align-items: stretch; border-radius: 8px; overflow: hidden; border: 1px solid #d0d7de; transition: border-color 0.15s, box-shadow 0.15s; } .da-input-group:focus-within { border-color: #2162a3; box-shadow: 0 0 0 3px rgba(33, 98, 163, 0.18); } html.theme-dark .da-input-group, body.theme-dark .da-input-group { border-color: rgba(230, 237, 243, 0.18); } html.theme-dark .da-input-group:focus-within, body.theme-dark .da-input-group:focus-within { border-color: #4a90d9; box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.22); } @media (prefers-color-scheme: dark) { html.theme-auto .da-input-group, body.theme-auto .da-input-group { border-color: rgba(230, 237, 243, 0.18) !important; } html.theme-auto .da-input-group:focus-within, body.theme-auto .da-input-group:focus-within { border-color: #4a90d9 !important; box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.22) !important; } html.theme-auto .da-input-group .da-input-icon, body.theme-auto .da-input-group .da-input-icon { color: #adbac7; border-right-color: rgba(230, 237, 243, 0.18) !important; } html.theme-auto .da-input-group .da-btn-toggle-pw, body.theme-auto .da-input-group .da-btn-toggle-pw { border-left-color: rgba(230, 237, 243, 0.18) !important; color: #adbac7; } } .da-input-group .da-input-icon { display: flex; align-items: center; padding: 0 0.75rem; background: transparent; color: #6e7d8a; border-right: 1px solid #d0d7de; flex-shrink: 0; } html.theme-dark .da-input-group .da-input-icon, body.theme-dark .da-input-group .da-input-icon { color: #adbac7; border-right-color: rgba(230, 237, 243, 0.18); } .da-input-group .form-control, .da-input-group input[type="text"], .da-input-group input[type="password"] { flex: 1; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0.6rem 0.85rem; } /* Password toggle button inside input group */ .da-input-group .da-btn-toggle-pw { background: transparent; border: none; border-left: 1px solid #d0d7de; padding: 0 0.75rem; color: #6e7d8a; cursor: pointer; flex-shrink: 0; transition: color 0.15s; } .da-input-group .da-btn-toggle-pw:hover { color: #2162a3; } html.theme-dark .da-input-group .da-btn-toggle-pw, body.theme-dark .da-input-group .da-btn-toggle-pw { border-left-color: rgba(230, 237, 243, 0.18); color: #adbac7; } /* ── Remember me checkbox row ────────────────────────────────*/ .da-remember-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; font-size: 0.875rem; color: #555; } html.theme-dark .da-remember-row, body.theme-dark .da-remember-row { color: #adbac7; } @media (prefers-color-scheme: dark) { html.theme-auto .da-remember-row, body.theme-auto .da-remember-row { color: #adbac7; } } /* ── Submit button ───────────────────────────────────────────*/ .da-btn-submit { width: 100%; padding: 0.7rem 1rem; font-size: 0.95rem; font-weight: 600; border-radius: 8px; border: none; background: #2162a3; color: #fff; cursor: pointer; transition: background 0.18s, box-shadow 0.18s; letter-spacing: 0.01em; } .da-btn-submit:hover { background: #1a4f87; box-shadow: 0 2px 8px rgba(33,98,163,0.28); } .da-btn-submit:active { background: #153f6b; } /* ── Card footer / links ─────────────────────────────────────*/ .da-login-footer { text-align: center; margin-top: 1.25rem; font-size: 0.82rem; } .da-login-footer a { color: #2162a3; text-decoration: none; } .da-login-footer a:hover { text-decoration: underline; } html.theme-dark .da-login-footer a, body.theme-dark .da-login-footer a { color: #79aadd; } @media (prefers-color-scheme: dark) { html.theme-auto .da-login-footer a, body.theme-auto .da-login-footer a { color: #79aadd; } } /* ── Alert / error messages ──────────────────────────────────*/ .da-login-card .alert, .da-login-card .message-error, .da-login-card .message-success { border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.875rem; margin-bottom: 1rem; } /* ── Theme mode switcher — top-right, fixed ────────────────── Three circular icon buttons: Light / System / Dark Matches DA Evolution style. ──────────────────────────────────────────────────────────── */ .da-theme-switcher { position: fixed; top: 1rem; right: 1.25rem; z-index: 9999; display: flex; gap: 0.55rem; align-items: center; } .da-theme-btn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35); background: transparent; color: rgba(255, 255, 255, 0.45); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; outline: none; position: relative; } .da-theme-btn:hover { background: transparent; border-color: rgba(255, 255, 255, 0.9); color: #ffffff; box-shadow: none; } .da-theme-btn.active { background: #2162a3; border-color: #2162a3; color: #fff; box-shadow: 0 2px 8px rgba(33, 98, 163, 0.35); } .da-theme-btn.active:hover { background: #1a4f8a; border-color: #1a4f8a; color: #fff; } /* Dark mode: same treatment — bg is already dark so same white-faded style works */ html.theme-dark .da-theme-btn, body.theme-dark .da-theme-btn { background: transparent; border-color: rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.45); } html.theme-dark .da-theme-btn:hover, body.theme-dark .da-theme-btn:hover { background: transparent; border-color: rgba(255, 255, 255, 0.9); color: #ffffff; } html.theme-dark .da-theme-btn.active, body.theme-dark .da-theme-btn.active { background: #4a90d9; border-color: #4a90d9; color: #fff; box-shadow: 0 2px 8px rgba(74, 144, 217, 0.38); } @media (prefers-color-scheme: dark) { html.theme-auto .da-theme-btn.active, body.theme-auto .da-theme-btn.active { background: #4a90d9; border-color: #4a90d9; color: #fff; box-shadow: 0 2px 8px rgba(74, 144, 217, 0.38); } } /* Tooltip via CSS */ .da-theme-btn::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 7px); right: 50%; transform: translateX(50%); background: rgba(22, 28, 45, 0.88); color: #e6edf3; font-size: 0.72rem; white-space: nowrap; padding: 3px 8px; border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 10000; } .da-theme-btn:hover::after { opacity: 1; } /* ── Responsive ──────────────────────────────────────────────*/ @media (max-width: 480px) { .da-login-card { border-radius: 12px; padding: 2rem 1.25rem 1.5rem; } .da-theme-switcher { top: 0.65rem; right: 0.75rem; } } /* ── Hide old Blesta login-box styles so they don't interfere ─*/ .login-box, .card-login, .vertical-center { all: unset; }