/* ═══════════════════════════════════════════════════════════════════════════ FileHost - app.css Design tokens drive all theming. Toggle data-bs-theme on to switch. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Design tokens ─────────────────────────────────────────────────────────── */ [data-bs-theme="dark"] { --fh-bg: #0d0d0d; --fh-bg-elevated: #161616; --fh-bg-sunken: #0a0a0a; --fh-surface: #1e1e1e; --fh-border: #2a2a2a; --fh-border-light: #333333; --fh-text: #e8e8e8; --fh-text-muted: #6c757d; --fh-text-subtle: #4a4a4a; --fh-primary: #4f6df5; --fh-primary-glow: rgba(79, 109, 245, 0.15); --fh-success-glow: rgba(25, 135, 84, 0.2); --fh-navbar-bg: #111111; --fh-footer-bg: transparent; } [data-bs-theme="light"] { --fh-bg: #f5f5f5; --fh-bg-elevated: #ffffff; --fh-bg-sunken: #ebebeb; --fh-surface: #ffffff; --fh-border: #dee2e6; --fh-border-light: #e9ecef; --fh-text: #1a1a1a; --fh-text-muted: #6c757d; --fh-text-subtle: #adb5bd; --fh-primary: #3d5be0; --fh-primary-glow: rgba(61, 91, 224, 0.1); --fh-success-glow: rgba(25, 135, 84, 0.1); --fh-navbar-bg: #ffffff; --fh-footer-bg: transparent; } /* ── Base ───────────────────────────────────────────────────────────────────── */ body { background-color: var(--fh-bg); color: var(--fh-text); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; transition: background-color 0.2s ease, color 0.2s ease; } /* ── Navbar ─────────────────────────────────────────────────────────────────── */ .fh-navbar { background-color: var(--fh-navbar-bg) !important; border-bottom: 1px solid var(--fh-border); } [data-bs-theme="light"] .navbar-toggler-icon { filter: none; } /* ── Theme toggle button ────────────────────────────────────────────────────── */ .fh-theme-btn { background: transparent; border: 1px solid var(--fh-border); color: var(--fh-text-muted); border-radius: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s, background-color 0.15s; } .fh-theme-btn:hover { border-color: var(--fh-primary); color: var(--fh-primary); background-color: var(--fh-primary-glow); } /* ── Cards ──────────────────────────────────────────────────────────────────── */ .card { background-color: var(--fh-surface) !important; border-color: var(--fh-border) !important; } /* ── Footer ─────────────────────────────────────────────────────────────────── */ .fh-footer { background-color: var(--fh-footer-bg); border-top: 1px solid var(--fh-border); color: var(--fh-text-muted); font-size: .8125rem; } .fh-footer-inner { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; } /* Top row: brand + nav together, centred */ .fh-footer-top { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0; } /* Brand */ .fh-footer-brand { display: inline-flex; align-items: center; font-weight: 700; font-size: .875rem; color: var(--fh-text-muted); text-decoration: none; transition: color 0.15s; letter-spacing: -.01em; padding: .1rem .35rem; } .fh-footer-brand:hover { color: var(--fh-primary); } /* Nav row (now inside fh-footer-top) */ .fh-footer-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; } .fh-footer-link { color: var(--fh-text-muted); text-decoration: none; padding: .1rem .35rem; border-radius: 4px; transition: color 0.15s; } .fh-footer-link:hover { color: var(--fh-primary); } .fh-footer-sep { color: var(--fh-text-subtle); user-select: none; padding: 0 .1rem; } /* Social icons row */ .fh-footer-social { display: flex; align-items: center; gap: .5rem; } .fh-social-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--fh-card-bg); border: 1px solid var(--fh-border); color: var(--fh-text-muted); text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } .fh-social-btn:hover { background: #5865F2; border-color: #5865F2; color: #fff; } /* Copyright */ .fh-footer-copy { margin: 0; color: var(--fh-text-subtle); font-size: .75rem; } /* ── Forms ──────────────────────────────────────────────────────────────────── */ [data-bs-theme="light"] .form-control, [data-bs-theme="light"] .form-select { background-color: #fff; border-color: var(--fh-border); color: var(--fh-text); } [data-bs-theme="light"] .form-control:focus, [data-bs-theme="light"] .form-select:focus { border-color: var(--fh-primary); box-shadow: 0 0 0 0.2rem var(--fh-primary-glow); } /* ── Drop zone ──────────────────────────────────────────────────────────────── */ .border-dashed { border-style: dashed !important; } #drop-zone { transition: border-color 0.2s, background-color 0.2s; } #drop-zone:hover, #drop-zone.drag-over { border-color: var(--fh-primary) !important; background-color: var(--fh-primary-glow); } /* ── Tables ─────────────────────────────────────────────────────────────────── */ .table > :not(caption) > * > * { vertical-align: middle; } /* Prevent text overflow in table cells only */ .table .text-truncate { max-width: 1px; width: 100%; } /* ── Pagination ─────────────────────────────────────────────────────────────── */ .pagination .page-link { background-color: var(--fh-surface); border-color: var(--fh-border); color: var(--fh-text); } .pagination .page-item.active .page-link { background-color: var(--fh-primary); border-color: var(--fh-primary); } /* ── Badges ─────────────────────────────────────────────────────────────────── */ .admin-badge { background: linear-gradient(135deg, #f5a623, #e8850a); color: #000; padding: 2px 8px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } /* ── Progress bars ──────────────────────────────────────────────────────────── */ .progress { border-radius: 2px; } /* ── Sticky sidebar ─────────────────────────────────────────────────────────── */ @media (max-width: 991px) { .sticky-top { position: relative !important; top: auto !important; } } /* ── Utility ────────────────────────────────────────────────────────────────── */ .font-monospace { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; } /* ── Semantic surface utilities (theme-aware replacements for bg-dark etc.) ─── */ .fh-card { background-color: var(--fh-surface) !important; border-color: var(--fh-border) !important; } .fh-input { background-color: var(--fh-bg-elevated) !important; border-color: var(--fh-border) !important; color: var(--fh-text) !important; } .fh-input:focus { background-color: var(--fh-bg-elevated) !important; border-color: var(--fh-primary) !important; color: var(--fh-text) !important; box-shadow: 0 0 0 0.2rem var(--fh-primary-glow) !important; } .fh-subtle { background-color: var(--fh-bg-elevated) !important; border-color: var(--fh-border) !important; } .fh-divider { border-color: var(--fh-border) !important; } /* Override Bootstrap's hardcoded dark form controls when used in views */ [data-bs-theme="light"] .form-control.bg-dark, [data-bs-theme="light"] .form-control.bg-secondary { background-color: #fff !important; border-color: var(--fh-border) !important; color: var(--fh-text) !important; } [data-bs-theme="light"] .form-control.bg-dark:focus, [data-bs-theme="light"] .form-control.bg-secondary:focus { background-color: #fff !important; box-shadow: 0 0 0 0.2rem var(--fh-primary-glow) !important; } [data-bs-theme="light"] .card.bg-dark, [data-bs-theme="light"] .card.bg-secondary { background-color: #fff !important; border-color: var(--fh-border) !important; } [data-bs-theme="light"] .card.bg-secondary.bg-opacity-25 { background-color: #f8f9fa !important; } [data-bs-theme="light"] .border-secondary { border-color: var(--fh-border) !important; } [data-bs-theme="light"] .text-white { color: var(--fh-text) !important; } [data-bs-theme="light"] .navbar-dark .navbar-nav .nav-link { color: var(--fh-text); } [data-bs-theme="light"] .table { color: var(--fh-text); } [data-bs-theme="light"] .table-dark { background-color: var(--fh-surface); color: var(--fh-text); } [data-bs-theme="light"] hr { border-color: var(--fh-border); } /* ── Navbar logout button - ensure white text on hover ──────────────────────── */ .btn-outline-danger.nav-link:hover, .btn-outline-danger.nav-link:focus, .btn-outline-danger.nav-link:active { color: #ffffff !important; } /* ── Navbar register button - outline at rest, filled on hover ───────────────── */ .fh-btn-nav { color: var(--fh-primary) !important; } .fh-btn-nav:hover, .fh-btn-nav:focus, .fh-btn-nav:active, .fh-btn-nav:hover *, .fh-btn-nav:focus *, .fh-btn-nav:active * { background-color: var(--fh-primary) !important; border-color: var(--fh-primary) !important; color: #ffffff !important; } /* ── Badges ─────────────────────────────────────────────────────────────────── */ .fh-badge-private { background-color: var(--fh-border); border: 1px solid var(--fh-border-light); color: var(--fh-text); font-weight: 500; } .fh-badge-region { background-color: var(--fh-surface); border: 1px solid var(--fh-border); color: var(--fh-text); font-weight: 500; } .fh-badge-active { background-color: #198754; color: #ffffff; font-weight: 500; } .fh-badge-suspended { background-color: #dc3545; color: #ffffff; font-weight: 500; } /* ── Info icon - darker blue for legibility in light mode ────────────────────── */ .fh-text-info { color: #0d6efd !important; } [data-bs-theme="dark"] .fh-text-info { color: #0dcaf0 !important; } /* ══════════════════════════════════════════════════════════════════════════════ LIGHT MODE - single consolidated override block Principle: use Bootstrap CSS custom properties where they exist, referencing fh-* design tokens throughout so all colours stay in sync with the theme. ══════════════════════════════════════════════════════════════════════════════ */ /* Root token overrides */ [data-bs-theme="light"] { --bs-dark-rgb: 255, 255, 255; --bs-secondary-rgb: 248, 249, 250; --bs-dark-text-emphasis: var(--fh-text); --bs-secondary-text-emphasis: var(--fh-text-muted); --bs-body-bg: var(--fh-bg); --bs-body-color: var(--fh-text); --bs-border-color: var(--fh-border); } /* Cards */ [data-bs-theme="light"] .card { --bs-card-bg: var(--fh-surface); --bs-card-border-color: var(--fh-border); --bs-card-color: var(--fh-text); } [data-bs-theme="light"] .card-header { background-color: var(--fh-bg-sunken) !important; border-color: var(--fh-border) !important; color: var(--fh-text) !important; } [data-bs-theme="light"] .card-footer { background-color: var(--fh-bg-sunken) !important; border-color: var(--fh-border) !important; color: var(--fh-text-muted) !important; } /* Form controls */ [data-bs-theme="light"] .form-control, [data-bs-theme="light"] .form-select, [data-bs-theme="light"] textarea.form-control { background-color: var(--fh-surface) !important; border-color: var(--fh-border) !important; color: var(--fh-text) !important; } [data-bs-theme="light"] .form-control:focus, [data-bs-theme="light"] .form-select:focus { border-color: var(--fh-primary) !important; box-shadow: 0 0 0 0.2rem var(--fh-primary-glow) !important; } /* text-white - remap to body text in light mode, but preserve true white inside coloured containers */ [data-bs-theme="light"] .text-white { color: var(--fh-text) !important; } [data-bs-theme="light"] a.text-white { color: var(--fh-primary) !important; } [data-bs-theme="light"] .bg-primary .text-white, [data-bs-theme="light"] .bg-danger .text-white, [data-bs-theme="light"] .bg-success .text-white, [data-bs-theme="light"] .bg-warning .text-white { color: #ffffff !important; } /* Borders */ [data-bs-theme="light"] .border-secondary { --bs-border-color: var(--fh-border); border-color: var(--fh-border) !important; } /* Tables */ [data-bs-theme="light"] .table { --bs-table-bg: var(--fh-surface); --bs-table-striped-bg: var(--fh-bg-sunken); --bs-table-hover-bg: var(--fh-bg-elevated); --bs-table-color: var(--fh-text); --bs-table-border-color: var(--fh-border); --bs-table-striped-color: var(--fh-text); --bs-table-hover-color: var(--fh-text); } /* Modals */ [data-bs-theme="light"] .modal-content { --bs-modal-bg: var(--fh-surface); --bs-modal-color: var(--fh-text); --bs-modal-border-color: var(--fh-border); } [data-bs-theme="light"] .modal-header, [data-bs-theme="light"] .modal-footer { background-color: var(--fh-bg-sunken) !important; border-color: var(--fh-border) !important; } /* Pagination */ [data-bs-theme="light"] .pagination { --bs-pagination-bg: var(--fh-surface); --bs-pagination-border-color: var(--fh-border); --bs-pagination-color: var(--fh-primary); --bs-pagination-hover-bg: var(--fh-bg-elevated); --bs-pagination-hover-color: var(--fh-primary); --bs-pagination-hover-border-color: var(--fh-border); --bs-pagination-active-bg: var(--fh-primary); --bs-pagination-active-border-color: var(--fh-primary); } /* Accordion */ [data-bs-theme="light"] .accordion { --bs-accordion-bg: var(--fh-surface); --bs-accordion-border-color: var(--fh-border); --bs-accordion-btn-bg: var(--fh-surface); --bs-accordion-btn-color: var(--fh-text); --bs-accordion-active-bg: var(--fh-bg-sunken); --bs-accordion-active-color: var(--fh-text); } /* Mass action bar */ [data-bs-theme="light"] #massBar { background-color: #fffbeb !important; border-color: #ffc107 !important; } /* Monospace textareas (ad HTML fields etc) */ [data-bs-theme="light"] textarea.font-monospace { background-color: var(--fh-bg-sunken) !important; color: var(--fh-text) !important; }