/* ========================================================================= PhotoVault dark theme Design tokens + Bootstrap 5.3 dark-mode variable overrides so every Bootstrap component (cards, forms, modals, dropdowns, tables, alerts) inherits this palette automatically via [data-bs-theme="dark"] on . ========================================================================= */ :root { --pv-bg: #0a0b10; --pv-bg-elevated: #101218; --pv-surface: #14161d; --pv-surface-2: #1b1e27; --pv-border: #262a36; --pv-border-strong: #323848; --pv-text: #f2f3f5; --pv-text-muted: #9099a8; --pv-text-faint: #6b7280; --pv-accent: #3b82f6; --pv-accent-hover: #2f6fe0; --pv-accent-soft: rgba(59, 130, 246, 0.16); --pv-radius-pill: 999px; --pv-radius-lg: 1rem; --pv-radius-md: 0.75rem; /* Bootstrap primary tracks our accent everywhere (buttons, links, badges, focus rings). */ --bs-primary: var(--pv-accent); --bs-primary-rgb: 59, 130, 246; --bs-font-sans-serif: "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; } [data-bs-theme="dark"] { color-scheme: dark; --bs-body-bg: var(--pv-bg); --bs-body-color: var(--pv-text); --bs-emphasis-color: #ffffff; --bs-secondary-color: var(--pv-text-muted); --bs-secondary-bg: var(--pv-surface-2); --bs-tertiary-bg: var(--pv-surface); --bs-border-color: var(--pv-border); --bs-border-color-translucent: var(--pv-border); --bs-link-color: var(--pv-accent); --bs-link-hover-color: #63a0ff; --bs-link-color-rgb: 59, 130, 246; --bs-link-hover-color-rgb: 99, 160, 255; --bs-primary-bg-subtle: var(--pv-accent-soft); --bs-primary-border-subtle: #1d3a6b; } html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } html { position: relative; min-height: 100%; } body { margin-bottom: 60px; background-color: var(--pv-bg); background-image: radial-gradient(60rem 30rem at 50% -10%, rgba(59, 130, 246, 0.12), transparent 60%); background-repeat: no-repeat; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus { box-shadow: 0 0 0 0.2rem var(--pv-accent-soft); } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* --- Buttons: rounded-pill everywhere, solid blue primary ------------------ */ .btn { border-radius: var(--pv-radius-pill); font-weight: 600; padding-left: 1.1rem; padding-right: 1.1rem; } .btn-sm { padding-left: 0.85rem; padding-right: 0.85rem; } .btn-primary { background-color: var(--pv-accent); border-color: var(--pv-accent); } .btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color: var(--pv-accent-hover) !important; border-color: var(--pv-accent-hover) !important; } .btn-outline-primary { color: var(--pv-accent); border-color: var(--pv-accent); } .btn-outline-primary:hover { background-color: var(--pv-accent); border-color: var(--pv-accent); } .btn-outline-secondary { color: var(--pv-text); border-color: var(--pv-border-strong); } .btn-outline-secondary:hover { background-color: var(--pv-surface-2); border-color: var(--pv-border-strong); color: var(--pv-text); } .btn-link { text-decoration: none; } /* --- Cards / surfaces ------------------------------------------------------ */ .card { background-color: var(--pv-surface); border: 1px solid var(--pv-border); border-radius: var(--pv-radius-lg); } .form-control, .form-select { background-color: var(--pv-surface-2); border-color: var(--pv-border-strong); color: var(--pv-text); } .form-control:focus, .form-select:focus { background-color: var(--pv-surface-2); color: var(--pv-text); border-color: var(--pv-accent); } .form-control::placeholder { color: var(--pv-text-faint); } .modal-content { background-color: var(--pv-surface); border: 1px solid var(--pv-border); } .dropdown-menu { background-color: var(--pv-surface); border: 1px solid var(--pv-border); } .dropdown-item { color: var(--pv-text); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--pv-surface-2); color: var(--pv-text); } .table { --bs-table-bg: transparent; --bs-table-border-color: var(--pv-border); color: var(--pv-text); } .breadcrumb-item + .breadcrumb-item::before { color: var(--pv-text-faint); } /* --- Navbar ----------------------------------------------------------------- */ .navbar.pv-navbar { background-color: var(--pv-bg-elevated); border-bottom: 1px solid var(--pv-border); } .pv-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--pv-text) !important; font-weight: 700; font-size: 1.15rem; } .pv-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.6rem; background-color: var(--pv-accent); color: #fff; flex-shrink: 0; } .pv-navbar .nav-link { color: var(--pv-text-muted); font-weight: 500; } .pv-navbar .nav-link:hover, .pv-navbar .nav-link.active { color: var(--pv-text); } .pv-lang-toggle { display: inline-flex; border: 1px solid var(--pv-border-strong); border-radius: var(--pv-radius-pill); overflow: hidden; } .pv-lang-toggle button { border: none; background: transparent; color: var(--pv-text-muted); font-weight: 600; font-size: 0.8rem; padding: 0.3rem 0.7rem; } .pv-lang-toggle button.active { background-color: var(--pv-surface-2); color: var(--pv-text); } .pv-avatar { width: 2rem; height: 2rem; border-radius: 50%; background-color: var(--pv-surface-2); border: 1px solid var(--pv-border-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--pv-text-muted); font-size: 0.9rem; flex-shrink: 0; } /* --- Hero (Home page) -------------------------------------------------------- */ .pv-hero { text-align: center; padding: 3rem 1rem 2rem; } .pv-hero h1 { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.02em; color: var(--pv-text); } @media (min-width: 768px) { .pv-hero h1 { font-size: 3.5rem; } } .pv-hero h1 .accent { color: var(--pv-accent); } .pv-hero p { color: var(--pv-text-muted); font-size: 1.05rem; max-width: 40rem; margin: 0.75rem auto 0; } /* --- Dropzone / upload card --------------------------------------------------- */ .dropzone { border: 1px solid var(--pv-border); border-radius: var(--pv-radius-lg); padding: 3rem 1.5rem; text-align: center; cursor: pointer; background-color: var(--pv-surface); transition: background-color .15s ease-in-out, border-color .15s ease-in-out; } .dropzone.dragover { background-color: var(--pv-accent-soft); border-color: var(--pv-accent); } .dropzone .pv-dropzone-icon { width: 3.25rem; height: 3.25rem; border-radius: 50%; background-color: var(--pv-surface-2); color: var(--pv-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .dropzone .pv-dropzone-title { font-weight: 700; color: var(--pv-text); font-size: 1.05rem; } .dropzone .pv-dropzone-hint { color: var(--pv-text-muted); font-size: 0.85rem; margin-bottom: 1rem; } /* --- Empty state (reused on My Library / My Clips / Trash when nothing there) - */ .pv-empty-state { border: 1px solid var(--pv-border); border-radius: var(--pv-radius-lg); background-color: var(--pv-surface); text-align: center; padding: 4rem 1.5rem; } .pv-empty-state .pv-empty-icon { width: 3.25rem; height: 3.25rem; border-radius: 50%; background-color: var(--pv-surface-2); color: var(--pv-text-muted); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .pv-empty-state .pv-empty-title { font-weight: 700; color: var(--pv-text); font-size: 1.05rem; } .pv-empty-state .pv-empty-hint { color: var(--pv-text-muted); font-size: 0.9rem; margin-bottom: 1.25rem; } /* --- Media grid -------------------------------------------------------------- */ .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } .media-tile { border: 1px solid var(--pv-border); border-radius: var(--pv-radius-md); overflow: hidden; background: var(--pv-surface); } .media-tile .thumb { height: 110px; background: var(--pv-surface-2) center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--pv-text); font-size: 1.75rem; } .media-tile .body { padding: 0.6rem; } .media-tile .name { font-size: 0.8rem; color: var(--pv-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .folder-tile { cursor: pointer; } .draggable-item { cursor: grab; } .draggable-item:active { cursor: grabbing; } .drop-target.dragover { outline: 2px dashed var(--pv-accent); outline-offset: 2px; background-color: var(--pv-accent-soft); } @media (max-width: 576px) { .media-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.6rem; } }