/* ========================================================= MOTYW CIEMNY - STRONY LOGOWANIA I ODZYSKIWANIA HASLA Plik: theme-login.css Obie strony maja wlasny, niezalezny uklad i style osadzone w , dlatego ich ciemny wariant opisujemy osobno. Paleta i sam przelacznik pochodza z theme.css. ========================================================= */ /* przelacznik nie ma tu paska gornego - siedzi w rogu ekranu */ .theme-switch-floating { position: absolute; top: 22px; right: 22px; z-index: 3; } /* na odzyskiwaniu hasla prawy gorny rog karty zajmuje "X", wiec przelacznik idzie na lewa strone */ .theme-switch-floating-left { right: auto; left: 22px; } html[data-bs-theme="dark"] body { color: var(--app-ink); background: radial-gradient(circle at top left, rgba(52, 115, 186, .20), transparent 34%), radial-gradient(circle at bottom right, rgba(91, 155, 234, .10), transparent 30%), linear-gradient(135deg, #0b1220 0%, #131c2e 100%); } html[data-bs-theme="dark"] .login-page::before, html[data-bs-theme="dark"] .reset-page::before { background: rgba(52, 115, 186, .16); } html[data-bs-theme="dark"] .login-page::after, html[data-bs-theme="dark"] .reset-page::after { background: rgba(91, 155, 234, .08); } html[data-bs-theme="dark"] .login-card, html[data-bs-theme="dark"] .reset-card { background: rgba(19, 28, 46, .92); border-color: rgba(38, 51, 74, .9); box-shadow: 0 28px 80px rgba(0, 0, 0, .5); } html[data-bs-theme="dark"] .login-title, html[data-bs-theme="dark"] .reset-title { color: var(--app-ink); } html[data-bs-theme="dark"] .reset-subtitle { color: var(--app-muted); } html[data-bs-theme="dark"] .login-badge, html[data-bs-theme="dark"] .reset-badge { background: rgba(52, 115, 186, .18); color: #7fb4f2; } /* przyciski nawigacyjne karty odzyskiwania hasla */ html[data-bs-theme="dark"] .close-btn { background: var(--app-surface-2); border-color: var(--app-border); color: #9fb0c8; } html[data-bs-theme="dark"] .close-btn:hover { background: var(--app-surface-3); border-color: rgba(91, 155, 234, .4); color: #7fb4f2; } html[data-bs-theme="dark"] .back-btn { color: #9fb0c8; } html[data-bs-theme="dark"] .back-btn:hover { color: #7fb4f2; } html[data-bs-theme="dark"] .form-label { color: #b9c6d8; } /* ========================= POLA FORMULARZA Bootstrap 5.0.2 nie ma wlasnego trybu ciemnego, wiec tla pol ustawiamy tutaj recznie. ========================= */ html[data-bs-theme="dark"] .input-group { background: var(--app-surface-2); border-color: var(--app-border); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); } html[data-bs-theme="dark"] .input-group:focus-within { border-color: var(--app-accent); box-shadow: 0 0 0 4px rgba(91, 155, 234, .22); } html[data-bs-theme="dark"] .input-group-text { background: var(--app-surface-2); color: #9fb0c8; } html[data-bs-theme="dark"] .custom-input, html[data-bs-theme="dark"] .custom-input:focus { background: var(--app-surface-2); color: var(--app-ink); } html[data-bs-theme="dark"] .custom-input::placeholder { color: #6f7f96; } html[data-bs-theme="dark"] .toggle-password { color: #9fb0c8; } html[data-bs-theme="dark"] .form-check-input { background-color: var(--app-surface-3); border-color: var(--app-border); } html[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); } html[data-bs-theme="dark"] .form-check-label, html[data-bs-theme="dark"] .forgot-link { color: #a9b8cd; } html[data-bs-theme="dark"] .forgot-link:hover { color: #7fb4f2; } html[data-bs-theme="dark"] .login-btn, html[data-bs-theme="dark"] .reset-btn { background: var(--app-accent); color: #fff; } html[data-bs-theme="dark"] .login-btn:hover:not(:disabled), html[data-bs-theme="dark"] .reset-btn:hover:not(:disabled) { background: #7fb4f2; color: #fff; } /* ========================= KOMUNIKATY I MODAL ========================= */ html[data-bs-theme="dark"] .alert-danger { background: #3a1b1e; color: #f2a3a8; } html[data-bs-theme="dark"] .alert-success { background: #16301f; color: #7fd6a0; } html[data-bs-theme="dark"] .field-message { color: #f28b93; } html[data-bs-theme="dark"] .login-loading-modal, html[data-bs-theme="dark"] .reset-loading-modal { background: var(--app-surface); box-shadow: 0 28px 80px rgba(0, 0, 0, .6); } html[data-bs-theme="dark"] .login-loading-modal h5, html[data-bs-theme="dark"] .reset-loading-modal h5 { color: var(--app-ink); } html[data-bs-theme="dark"] .login-loading-modal p, html[data-bs-theme="dark"] .reset-loading-modal p { color: var(--app-muted); } html[data-bs-theme="dark"] .login-spinner, html[data-bs-theme="dark"] .reset-spinner { border-color: rgba(91, 155, 234, .22); border-top-color: var(--app-accent); }