/** * ============================================================================= * STANDALONE PAGE BASE STYLES * ============================================================================= * * Minimal design tokens for standalone pages (login, MFA, password reset, etc.) * that are NOT included within index.php and need their own document structure. * * This file provides: * - Core CSS variables for light/dark mode * - Basic typography and layout styles * - Form component styles * * USAGE: * Standalone pages should load ONLY this file (not theme-dark.css): * * * Dark mode is controlled via data-theme="dark" on the element. * ============================================================================= */ /* ============================================================================= LIGHT MODE (Default) ============================================================================= */ :root { /* ------------------------------------------------------------------------- COLOR PALETTE ------------------------------------------------------------------------- */ --color-primary: #2284B5; --color-primary-hover: #1a6d94; --color-primary-light: rgba(34, 132, 181, 0.1); --color-success: #28a745; --color-success-hover: #218838; --color-success-light: rgba(40, 167, 69, 0.1); --color-warning: #f59e0b; --color-warning-hover: #d97706; --color-warning-light: rgba(245, 158, 11, 0.1); --color-danger: #dc3545; --color-danger-hover: #c82333; --color-danger-light: rgba(220, 53, 69, 0.1); /* ------------------------------------------------------------------------- TEXT COLORS ------------------------------------------------------------------------- */ --text-primary: #212529; --text-secondary: #495057; --text-muted: #6c757d; --text-inverse: #ffffff; /* ------------------------------------------------------------------------- BACKGROUND COLORS ------------------------------------------------------------------------- */ --bg-page: #f5f5f7; --bg-card: #ffffff; --bg-subtle: #f8f9fa; --bg-hover: #e9ecef; --bg-input: #ffffff; --bg-header: #e9ecef; /* ------------------------------------------------------------------------- BORDER COLORS ------------------------------------------------------------------------- */ --border-default: #dee2e6; --border-input: #ced4da; --border-input-focus: var(--color-primary); --border-accent: #339966; /* ------------------------------------------------------------------------- COMPONENT SPECIFIC ------------------------------------------------------------------------- */ --btn-primary-bg: var(--color-primary); --btn-primary-hover: var(--color-primary-hover); --error-bg: #ffebee; --error-color: #c62828; --success-bg: #e8f5e9; --success-color: #2e7d32; --info-bg: #e3f2fd; --info-color: #1565c0; /* ------------------------------------------------------------------------- SHADOWS & EFFECTS ------------------------------------------------------------------------- */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); /* ------------------------------------------------------------------------- TYPOGRAPHY ------------------------------------------------------------------------- */ --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace; } /* ============================================================================= DARK MODE ============================================================================= */ [data-theme="dark"] { /* ------------------------------------------------------------------------- COLOR PALETTE ------------------------------------------------------------------------- */ --color-primary: #4a9fd4; --color-primary-hover: #6bb3e0; --color-primary-light: rgba(74, 159, 212, 0.15); --color-success: #4ade80; --color-success-hover: #86efac; --color-success-light: rgba(74, 222, 128, 0.15); --color-warning: #fbbf24; --color-warning-hover: #fcd34d; --color-warning-light: rgba(251, 191, 36, 0.15); --color-danger: #f87171; --color-danger-hover: #fca5a5; --color-danger-light: rgba(248, 113, 113, 0.15); /* ------------------------------------------------------------------------- TEXT COLORS ------------------------------------------------------------------------- */ --text-primary: #f3f4f6; --text-secondary: #d1d5db; --text-muted: #9ca3af; --text-inverse: #111827; /* ------------------------------------------------------------------------- BACKGROUND COLORS ------------------------------------------------------------------------- */ --bg-page: #111827; --bg-card: #1f2937; --bg-subtle: #374151; --bg-hover: #374151; --bg-input: #374151; --bg-header: #0f172a; /* ------------------------------------------------------------------------- BORDER COLORS ------------------------------------------------------------------------- */ --border-default: #374151; --border-input: #4b5563; --border-input-focus: var(--color-primary); --border-accent: var(--color-primary); /* ------------------------------------------------------------------------- COMPONENT SPECIFIC ------------------------------------------------------------------------- */ --error-bg: rgba(248, 113, 113, 0.15); --error-color: #fca5a5; --success-bg: rgba(74, 222, 128, 0.15); --success-color: #86efac; --info-bg: rgba(56, 189, 248, 0.15); --info-color: #7dd3fc; /* ------------------------------------------------------------------------- SHADOWS & EFFECTS ------------------------------------------------------------------------- */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); } /* ============================================================================= BASE STYLES ============================================================================= */ * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: var(--font-family-base); font-size: 14px; background-color: var(--bg-page); color: var(--text-primary); min-height: 100vh; display: flex; align-items: center; justify-content: center; line-height: 1.5; } /* ============================================================================= CONTAINER STYLES ============================================================================= */ .standalone-container { width: 100%; max-width: 400px; margin: 20px; background-color: var(--bg-card); border-radius: 8px; box-shadow: var(--shadow-lg); overflow: hidden; } .standalone-container.wide { max-width: 500px; } .standalone-header { background-color: var(--bg-header); border-bottom: 2px solid var(--border-accent); padding: 20px; text-align: center; } .standalone-header h1 { margin: 0; font-size: 24px; font-weight: 600; color: var(--text-primary); } .standalone-header p { margin: 5px 0 0; font-size: 12px; color: var(--text-muted); } .standalone-header .icon { font-size: 48px; margin-bottom: 10px; } .standalone-content { padding: 30px; } .standalone-footer { padding: 0 30px 30px; text-align: center; font-size: 12px; } .standalone-footer a { color: var(--color-primary); text-decoration: none; } .standalone-footer a:hover { text-decoration: underline; } /* ============================================================================= FORM STYLES ============================================================================= */ .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 13px; color: var(--text-primary); } .form-group input[type="text"], .form-group input[type="password"], .form-group input[type="email"], .form-group textarea, .form-group select { width: 100%; padding: 12px; font-size: 14px; font-family: var(--font-family-base); border: 1px solid var(--border-input); border-radius: 4px; background-color: var(--bg-input); color: var(--text-primary); transition: border-color 0.2s, box-shadow 0.2s; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--border-input-focus); box-shadow: 0 0 0 3px var(--color-primary-light); } .form-group input::placeholder { color: var(--text-muted); } /* Code input (for MFA, verification codes) */ .code-input { font-size: 24px; font-family: var(--font-family-mono); text-align: center; letter-spacing: 8px; border-width: 2px; } /* Secret key display */ .secret-key { background-color: var(--bg-subtle); padding: 12px; border-radius: 4px; font-family: var(--font-family-mono); font-size: 16px; text-align: center; letter-spacing: 2px; margin: 15px 0; border: 1px solid var(--border-default); color: var(--text-primary); } /* ============================================================================= BUTTON STYLES ============================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 14px; font-size: 16px; font-weight: 600; font-family: var(--font-family-base); border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s, transform 0.1s; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { color: var(--text-inverse); background-color: var(--btn-primary-bg); } .btn-primary:hover { background-color: var(--btn-primary-hover); } .btn-secondary { color: var(--text-primary); background-color: var(--bg-subtle); border: 1px solid var(--border-default); } .btn-secondary:hover { background-color: var(--bg-hover); } /* ============================================================================= CHECKBOX STYLES ============================================================================= */ .checkbox-label { display: flex; align-items: center; cursor: pointer; font-size: 13px; color: var(--text-primary); } .checkbox-label input[type="checkbox"] { width: 16px; height: 16px; margin-right: 8px; cursor: pointer; accent-color: var(--color-primary); } /* ============================================================================= MESSAGE STYLES ============================================================================= */ .message, .error-message, .success-message, .info-message, .warning-message { padding: 12px; border-radius: 4px; margin-bottom: 20px; font-size: 13px; } .error-message { background-color: var(--error-bg); color: var(--error-color); } .success-message { background-color: var(--success-bg); color: var(--success-color); } .info-message { background-color: var(--info-bg); color: var(--info-color); } .info-message a, .success-message a { color: inherit; font-weight: 600; } .warning-message, .required-notice { background-color: var(--color-warning-light); color: var(--color-warning); } /* ============================================================================= STEP INDICATOR STYLES (for MFA setup, etc.) ============================================================================= */ .step { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid var(--border-default); } .step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .step-number { display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; background-color: var(--color-primary); color: var(--text-inverse); border-radius: 50%; font-weight: bold; margin-right: 10px; } .step-title { font-weight: bold; font-size: 15px; margin-bottom: 15px; color: var(--text-primary); } /* ============================================================================= QR CODE CONTAINER ============================================================================= */ .qr-container { text-align: center; margin: 20px 0; } .qr-container img { border: 4px solid var(--bg-card); border-radius: 8px; box-shadow: var(--shadow-sm); } /* ============================================================================= HELPER TEXT ============================================================================= */ .help-text { font-size: 12px; color: var(--text-muted); margin-top: 8px; } .app-list { font-size: 12px; color: var(--text-muted); margin: 10px 0; padding-left: 20px; } /* ============================================================================= THEME TOGGLE ============================================================================= */ .theme-toggle { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 20px; cursor: pointer; padding: 8px; border-radius: 4px; opacity: 0.7; color: var(--text-primary); } .theme-toggle:hover { opacity: 1; background-color: var(--bg-hover); } /* ============================================================================= LINK DIVIDER ============================================================================= */ .link-divider { margin: 0 8px; color: var(--border-default); }