/**
* PhotoTouch Admin — style.css
* Single consolidated stylesheet.
* Bootstrap 5 + Font Awesome 5 required.
* Light / dark themes via data-theme="dark|light" on .
* OS preference honoured automatically; localStorage persists the toggle.
*
* Sections:
* 1. Design Tokens – dark (default)
* 2. Light theme overrides
* 3. OS preference fallback
* 4. Base / body / typography
* 5. Login / auth layout
* 6. Premium card (glassmorphism)
* 7. Form controls
* 8. Buttons
* 9. Sticky nav (.siteMessage)
* 10. Footer (#footer)
* 11. Content cards (.card, .dspBox, .toolBar, .card-toolbar)
* 12. Tables
* 13. Alerts & messages
* 14. Modals & popups
* 15. Utility / layout helpers
* 16. Notification boxes
* 17. Views-clean utilities (migrated)
* 18. Animations
* 19. Responsive / media queries
* 20. Content view utilities (migrated inline styles)
* 21. Marketing — Media Library + Template Gallery
* 22. Components — status badges, .important, empty states, nav links
* 23. Layout Shell — #topbar + #sidebar + #app-shell
* 30. Dashboard — nav cards + stat cards
* 41. Registration — CSV preview, search result, stat skeleton
*/
/* ═══════════════════════════════════════════════════════════════════
0. SELF-HOSTED FONT — Plus Jakarta Sans (replaces Google Fonts CDN)
═══════════════════════════════════════════════════════════════════ */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('/assets/fonts/plus-jakarta-sans-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('/assets/fonts/plus-jakarta-sans-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* ═══════════════════════════════════════════════════════════════════
1. DESIGN TOKENS — DARK (DEFAULT)
═══════════════════════════════════════════════════════════════════ */
:root {
/* Brand */
--brand: #7c3aed;
--brand-shadow: rgba(124, 58, 237, 0.30);
--brand-glow: rgba(124, 58, 237, 0.16);
/* Background layers */
--bg-top: #071a2c;
--bg-mid: #061525;
--bg-bot: #030a12;
/* Surfaces */
--surface: rgba(11, 11, 11, 0.82);
--surface-hover: rgba(255, 255, 255, 0.04);
--border: rgba(255, 255, 255, 0.08);
/* Text */
--text: #ffffff;
--muted: rgba(255, 255, 255, 0.58);
/* Semantic */
--color-success: #86efac;
--color-danger: #fca5a5;
--color-warning: #fbbf24;
--color-info: #67e8f9;
--bg-success: rgba(34, 197, 94, 0.15);
--bg-danger: rgba(239, 68, 68, 0.15);
--border-success: rgba(34, 197, 94, 0.30);
--border-danger: rgba(239, 68, 68, 0.30);
/* Misc */
--radius-card: 16px;
--radius-premium: 32px;
--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.40);
--shadow-premium: 0 18px 50px rgba(0, 0, 0, 0.55);
/* Component geometry */
--radius-btn: 8px;
--radius-btn-sm: 6px;
--radius-input: 8px;
/* Brand interaction */
--brand-hover: #6d28d9;
}
/* ═══════════════════════════════════════════════════════════════════
2. LIGHT THEME OVERRIDES [data-theme="light"] on
═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
--bg-top: #eef2ff;
--bg-mid: #e0e7ff;
--bg-bot: #dbeafe;
--surface: rgba(255, 255, 255, 0.80);
--surface-hover: rgba(0, 0, 0, 0.04);
--border: rgba(0, 0, 0, 0.10);
--text: #0f172a;
--muted: rgba(15, 23, 42, 0.55);
--color-success: #166534;
--color-danger: #991b1b;
--color-warning: #92400e;
--color-info: #0e7490;
--bg-success: rgba(34, 197, 94, 0.12);
--bg-danger: rgba(239, 68, 68, 0.10);
--border-success: rgba(34, 197, 94, 0.25);
--border-danger: rgba(239, 68, 68, 0.25);
--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-premium: 0 12px 40px rgba(0, 0, 0, 0.12);
}
/* ═══════════════════════════════════════════════════════════════════
3. OS PREFERENCE FALLBACK
Applied when user has NOT manually set a theme via the toggle.
═══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--bg-top: #eef2ff;
--bg-mid: #e0e7ff;
--bg-bot: #dbeafe;
--surface: rgba(255, 255, 255, 0.80);
--surface-hover: rgba(0, 0, 0, 0.04);
--border: rgba(0, 0, 0, 0.10);
--text: #0f172a;
--muted: rgba(15, 23, 42, 0.55);
--color-success: #166534;
--color-danger: #991b1b;
--color-warning: #92400e;
--color-info: #0e7490;
--bg-success: rgba(34, 197, 94, 0.12);
--bg-danger: rgba(239, 68, 68, 0.10);
--border-success: rgba(34, 197, 94, 0.25);
--border-danger: rgba(239, 68, 68, 0.25);
--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-premium: 0 12px 40px rgba(0, 0, 0, 0.12);
}
}
/* ═══════════════════════════════════════════════════════════════════
4. BASE / BODY / TYPOGRAPHY
═══════════════════════════════════════════════════════════════════ */
html, body {
min-height: 100%;
}
body {
font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--text);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
background:
radial-gradient(circle at 15% 10%, rgba(124, 58, 237, 0.14), transparent 45%),
radial-gradient(circle at 80% 0%, rgba(0, 255, 180, 0.06), transparent 40%),
radial-gradient(circle at 50% 120%, rgba(0, 140, 255, 0.08), transparent 55%),
linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bot) 100%) !important;
transition: background 0.3s ease, color 0.2s ease;
}
/* Light theme adjusts radial glow opacity */
[data-theme="light"] body {
background:
radial-gradient(circle at 15% 10%, rgba(124, 58, 237, 0.08), transparent 45%),
radial-gradient(circle at 80% 0%, rgba(0, 200, 140, 0.06), transparent 40%),
linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bot) 100%) !important;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) body {
background:
radial-gradient(circle at 15% 10%, rgba(124, 58, 237, 0.08), transparent 45%),
radial-gradient(circle at 80% 0%, rgba(0, 200, 140, 0.06), transparent 40%),
linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bot) 100%) !important;
}
}
h1, h2, h3, h4, h5, h6 { color: var(--text); }
h1 { font-size: 1.75rem; font-weight: 800; margin-bottom: 1rem; }
h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.75rem; }
h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.65rem; }
h4 { font-size: 1.0rem; font-weight: 700; margin-bottom: 0.5rem; }
h5 { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.5rem; }
h6 { font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-bottom: 0.4rem; }
/* Section label — #title div placed inside .toolBar cards */
#title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
}
#subtitle { color: var(--muted); font-size: 0.9rem; }
/* Legacy selector aliases kept for backwards compat with content views */
.subtitle { color: var(--muted); font-size: 0.85rem; }
.tinyfont { font-size: 10px; color: var(--muted); }
.text-small { font-size: 0.8rem; opacity: 0.8; }
.redprint { color: #f87171; }
a { color: var(--muted); transition: color 0.2s; }
a:hover { color: var(--text); }
pre {
white-space: pre-wrap;
word-wrap: break-word;
color: var(--text);
}
hr {
border-color: var(--border);
margin-top: 10px;
margin-bottom: 10px;
}
/* ── 4b. Bootstrap utility overrides — theme-aware ─────────────── */
/* BS 5.0.2 hard-codes these with !important in light-mode colours. */
.text-muted { color: var(--muted) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }
/* Border utilities — use theme border colour */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: var(--border) !important; }
/* ═══════════════════════════════════════════════════════════════════
5. LOGIN / AUTH LAYOUT
═══════════════════════════════════════════════════════════════════ */
body.login-page #maincontent {
display: flex;
align-items: center;
justify-content: center;
padding: 0 !important;
background: transparent !important;
position: relative;
z-index: 2;
}
body.login-page #maincontent > .container {
width: 100%;
}
.login-shell {
margin: 0 auto;
}
@media (min-width: 992px) {
.login-shell { max-width: 520px; }
}
.login-form-wrap {
max-width: 420px;
margin: 0 auto;
position: relative;
z-index: 1;
text-align: left;
}
.help-links {
margin-top: 16px;
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
text-align: center;
}
[data-theme="light"] .help-links { color: var(--muted); }
.help-links a {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
font-weight: 900;
}
[data-theme="light"] .help-links a { color: var(--brand); }
.help-links a:hover { color: #fff; }
[data-theme="light"] .help-links a:hover { color: var(--text); }
/* ── Password reset: input icon sizing (replaces inline style) ─── */
.premium-card .input-group-text i.fas,
.premium-card .input-group-text i.far {
font-size: 18px;
}
/* ── Password reset: account disambiguation buttons ────────────── */
.reset-account-btn {
display: block;
width: 100%;
text-align: left;
padding: 12px 16px;
border: 1px solid var(--border);
border-radius: 12px;
background: transparent;
color: var(--text);
transition: background 0.2s, border-color 0.2s;
}
.reset-account-btn:hover,
.reset-account-btn:focus {
background: rgba(124, 58, 237, 0.10);
border-color: var(--brand);
color: var(--text);
}
[data-theme="light"] .reset-account-btn {
border-color: rgba(0, 0, 0, 0.12);
background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .reset-account-btn:hover,
[data-theme="light"] .reset-account-btn:focus {
background: rgba(124, 58, 237, 0.08);
border-color: var(--brand);
}
.reset-account-type { font-size: 0.82em; }
.reset-hint-text { font-size: 0.9em; }
/* ── Password reset: success alert on login page ─────────────── */
.premium-card .alert-success {
border-radius: 16px;
border: 1px solid rgba(34, 197, 94, 0.25);
background: rgba(34, 197, 94, 0.10);
color: #4ade80;
}
[data-theme="light"] .premium-card .alert-success {
color: #166534;
background: rgba(34, 197, 94, 0.08);
border-color: rgba(34, 197, 94, 0.25);
}
/* ═══════════════════════════════════════════════════════════════════
6. PREMIUM CARD (GLASSMORPHISM)
═══════════════════════════════════════════════════════════════════ */
.premium-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-premium);
padding: 34px 34px 30px;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), var(--shadow-premium);
position: relative;
overflow: hidden;
transition: background 0.3s ease, border-color 0.3s ease;
}
.premium-card::before {
content: "";
position: absolute;
top: -25%;
left: -20%;
width: 60%;
height: 60%;
background: radial-gradient(circle, var(--brand-glow) 0%, transparent 60%);
pointer-events: none;
}
.card-icon {
position: relative;
z-index: 1;
font-size: 42px;
color: var(--brand);
margin-bottom: 10px;
}
.card-title {
position: relative;
z-index: 1;
font-weight: 900;
font-size: 26px;
margin: 0 0 6px 0;
color: var(--text);
}
.card-subtitle {
position: relative;
z-index: 1;
color: var(--muted);
margin-bottom: 18px;
}
@media (max-width: 480px) {
.premium-card {
padding: 26px 20px 22px;
border-radius: 26px;
}
}
/* ═══════════════════════════════════════════════════════════════════
7. FORM CONTROLS
═══════════════════════════════════════════════════════════════════ */
/* Premium card inputs */
.premium-card .input-group {
width: 100%;
border-radius: 18px;
overflow: hidden;
}
.premium-card .input-group-text {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-right: 0;
color: rgba(255, 255, 255, 0.65);
padding: 0 12px;
min-width: 46px;
}
[data-theme="light"] .premium-card .input-group-text {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.12);
color: var(--muted);
}
.premium-card .form-control {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
color: #fff;
height: 48px;
padding: 12px 14px;
box-shadow: none;
}
[data-theme="light"] .premium-card .form-control {
background: rgba(255, 255, 255, 0.70);
border-color: rgba(0, 0, 0, 0.12);
color: var(--text);
}
.premium-card .input-group-text + .form-control {
border-left: 0;
}
.premium-card .form-control:focus {
border-color: rgba(124, 58, 237, 0.55);
box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.18);
outline: none;
}
.premium-card .alert {
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92);
}
[data-theme="light"] .premium-card .alert {
border-color: rgba(0, 0, 0, 0.10);
background: rgba(0, 0, 0, 0.04);
color: var(--text);
}
/* General form controls (admin views) */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
textarea {
background: var(--surface-hover);
border: 1px solid var(--border);
color: var(--text);
border-radius: var(--radius-input);
padding: 0.5rem 0.75rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus,
select:focus,
textarea:focus {
border-color: rgba(124, 58, 237, 0.5);
box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
outline: none;
}
input::placeholder,
textarea::placeholder {
color: var(--muted);
}
/* Bootstrap form-control inside dark/light contexts */
.form-control,
.form-select {
background-color: var(--surface-hover);
border-color: var(--border);
color: var(--text);
}
.form-control:focus,
.form-select:focus {
background-color: var(--surface-hover);
border-color: rgba(124, 58, 237, 0.5);
color: var(--text);
box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}
.form-control::placeholder { color: var(--muted); }
/* Input size helpers (from views-clean) */
.input-wide { width: 180px; }
.input-small { width: 80px; }
.select-large { width: 190px; height: 40px; }
/* Larger text input used in settings/main popup forms */
.biginput { width: 100%; max-width: 400px; }
/* Real-time validation indicator span (admin create/edit forms) */
.fieldCheck {
display: inline-block;
margin-left: 6px;
font-size: 0.78rem;
font-weight: 600;
vertical-align: middle;
}
.fieldCheck.ok { color: var(--color-success); }
.fieldCheck.error { color: var(--color-danger); }
/* ═══════════════════════════════════════════════════════════════════
8. BUTTONS
═══════════════════════════════════════════════════════════════════ */
/* ── 8a. CTA Brand Button (login, major CTAs — pill shape) ───── */
.btn-brand {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
border: none;
border-radius: 999px;
padding: 13px 24px;
font-weight: 700;
letter-spacing: 0.3px;
background: var(--brand);
box-shadow: 0 6px 20px var(--brand-shadow);
color: #fff;
cursor: pointer;
transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-brand:hover,
.btn-brand:focus {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: 0 10px 28px var(--brand-shadow);
color: #fff;
outline: none;
}
.btn-brand:active { transform: translateY(0); filter: brightness(0.97); }
/* ── 8b. Bootstrap overrides ──────────────────────────────────── */
.btn-primary {
background: var(--brand);
border-color: var(--brand);
border-radius: var(--radius-btn);
font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background: var(--brand-hover);
border-color: var(--brand-hover);
box-shadow: 0 4px 12px var(--brand-shadow);
}
.btn-secondary {
background: var(--surface-hover);
border-color: var(--border);
color: var(--text);
border-radius: var(--radius-btn);
font-weight: 600;
}
.btn-secondary:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.20);
color: var(--text);
}
[data-theme="light"] .btn-secondary:hover {
background: rgba(0,0,0,0.05);
border-color: rgba(0,0,0,0.18);
}
.btn-outline-secondary {
border-color: var(--border);
color: var(--muted);
border-radius: var(--radius-btn);
font-weight: 600;
}
.btn-outline-secondary:hover {
background: var(--surface-hover);
color: var(--text);
border-color: rgba(255,255,255,0.20);
}
[data-theme="light"] .btn-outline-secondary:hover {
border-color: rgba(0,0,0,0.18);
}
.btn-danger { border-radius: var(--radius-btn); font-weight: 600; }
.btn-sm { border-radius: calc(var(--radius-btn) - 2px); }
.btn-link { text-decoration: none; }
/* ── 8c. Native input/button base (not Bootstrap .btn) ───────── */
input[type="submit"],
input[type="button"],
button:not([class*="btn"]) {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: var(--surface-hover);
border: 1px solid var(--border);
color: var(--text);
border-radius: var(--radius-btn);
padding: 0.38rem 0.9rem;
font-size: 0.85rem;
font-weight: 600;
line-height: 1.5;
cursor: pointer;
transition: background 0.18s, border-color 0.18s, color 0.18s;
white-space: nowrap;
vertical-align: middle;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:not([class*="btn"]):hover {
background: rgba(124, 58, 237, 0.10);
border-color: rgba(124, 58, 237, 0.45);
color: var(--text);
}
input[type="submit"]:active,
input[type="button"]:active,
button:not([class*="btn"]):active {
background: rgba(124, 58, 237, 0.16);
}
input[type="submit"]:disabled,
input[type="button"]:disabled,
button:not([class*="btn"]):disabled {
opacity: 0.38;
cursor: not-allowed;
pointer-events: none;
}
[data-theme="light"] input[type="submit"],
[data-theme="light"] input[type="button"],
[data-theme="light"] button:not([class*="btn"]) {
background: rgba(255,255,255,0.75);
border-color: rgba(0,0,0,0.14);
color: var(--text);
}
[data-theme="light"] input[type="submit"]:hover,
[data-theme="light"] input[type="button"]:hover,
[data-theme="light"] button:not([class*="btn"]):hover {
background: rgba(124, 58, 237, 0.07);
border-color: rgba(124, 58, 237, 0.40);
}
/* ── 8d. .button – legacy alias for form action buttons ──────── */
.button {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: var(--surface-hover);
border: 1px solid var(--border);
color: var(--text);
border-radius: var(--radius-btn);
padding: 0.38rem 0.9rem;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: background 0.18s, border-color 0.18s;
white-space: nowrap;
}
.button:hover {
background: rgba(124, 58, 237, 0.10);
border-color: rgba(124, 58, 237, 0.45);
color: var(--text);
}
/* ── 8e. .smallbutton – compact contextual buttons (New, Share…) */
.smallbutton {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
border-radius: var(--radius-btn-sm);
padding: 0.2rem 0.65rem;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.5;
cursor: pointer;
transition: background 0.18s, border-color 0.18s, color 0.18s;
white-space: nowrap;
}
.smallbutton:hover {
background: rgba(124, 58, 237, 0.10);
border-color: var(--brand);
color: var(--text);
}
[data-theme="light"] .smallbutton {
border-color: rgba(0,0,0,0.16);
color: var(--muted);
}
[data-theme="light"] .smallbutton:hover {
background: rgba(124, 58, 237, 0.07);
border-color: var(--brand);
color: var(--brand);
}
/* ── 8f. Admin badge / warning button ────────────────────────── */
.adm-btn {
display: inline-flex;
align-items: center;
padding: 2px 12px;
border-radius: var(--radius-btn-sm);
border: 1px solid var(--color-warning);
background: transparent;
color: var(--color-warning) !important;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.3px;
cursor: pointer;
transition: background 0.18s, color 0.18s;
}
.adm-btn:hover {
background: rgba(251, 191, 36, 0.15);
color: #fff !important;
}
/* ── 8g. Theme toggle ─────────────────────────────────────────── */
button#theme-toggle {
background: none !important;
border: none !important;
box-shadow: none !important;
color: var(--muted);
padding: 0;
cursor: pointer;
transition: color 0.2s;
line-height: 1;
display: inline-flex;
align-items: center;
}
button#theme-toggle:hover {
background: none !important;
border: none !important;
color: var(--text);
}
/* ═══════════════════════════════════════════════════════════════════
9. STICKY NAV (.siteMessage)
═══════════════════════════════════════════════════════════════════ */
.siteMessage {
display: block;
position: sticky;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background: var(--surface);
border-bottom: 1px solid var(--border);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
text-align: left;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
transition: background 0.3s ease, border-color 0.3s ease;
}
[data-theme="light"] .siteMessage {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.siteMessage .wrapper {
padding: 16px 20px;
}
.siteMessage .top.wrapper {
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.siteMessage a {
color: var(--muted);
font-weight: 500;
text-decoration: none !important;
transition: color 0.2s;
}
.siteMessage a:hover { color: var(--text); }
.siteMessage a.important { color: #f87171; }
.siteMessage a.important:hover { color: #fca5a5; }
[data-theme="light"] .siteMessage a.important { color: #dc2626; }
[data-theme="light"] .siteMessage a.important:hover { color: #991b1b; }
.siteMessage .btn-outline-warning {
color: var(--color-warning) !important;
border-color: var(--color-warning);
}
.siteMessage .btn-outline-warning:hover {
background: rgba(251, 191, 36, 0.15);
color: var(--text) !important;
}
/* Underline hover animation */
.underline {
display: inline-block;
position: relative;
color: var(--muted);
transition: color 0.2s;
}
.underline:hover { color: var(--text); }
.underline::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: -4px;
left: 0;
background-color: var(--text);
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.underline:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
a.important.underline::after {
background-color: #f87171;
}
[data-theme="light"] a.important.underline::after {
background-color: #dc2626;
}
#greeting { color: var(--muted); }
/* Scroll-float class applied by JS */
.navbar-fixed {
position: fixed;
top: 0;
z-index: 998;
width: 100%;
transition: all 0.3s ease-in;
}
/* ═══════════════════════════════════════════════════════════════════
10. FOOTER (#footer)
═══════════════════════════════════════════════════════════════════ */
#footer {
background: rgba(3, 3, 3, 0.72);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
border-top: 1px solid var(--border);
box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.45);
color: rgba(255, 255, 255, 0.70);
padding: 26px 0 14px;
transition: background 0.3s ease;
}
[data-theme="light"] #footer {
background: rgba(240, 244, 255, 0.85);
color: var(--muted);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}
#footer,
#footer * { text-shadow: none; }
#footer .bottomtext { padding-left: 0; padding-right: 0; }
#footer .row { margin-left: 0; margin-right: 0; }
#footer a {
color: rgba(255, 255, 255, 0.70);
text-decoration: none !important;
font-weight: 900;
letter-spacing: 0.6px;
}
#footer a:hover { color: #fff; }
[data-theme="light"] #footer a { color: var(--muted); }
[data-theme="light"] #footer a:hover { color: var(--text); }
#footer i { color: rgba(255, 255, 255, 0.50); margin-right: 8px; }
[data-theme="light"] #footer i { color: var(--muted); }
#footer .border-start { border-color: var(--border) !important; }
#footer .status-wrap {
display: inline-block;
padding: 10px 12px;
border-radius: 16px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.03);
}
#footer iframe { display: block; max-width: 100%; }
#footer .poweredby,
#footer .text-muted {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--border);
text-align: center;
color: rgba(255, 255, 255, 0.55) !important;
font-size: 10px !important;
font-weight: 900 !important;
letter-spacing: 0.8px;
}
[data-theme="light"] #footer .poweredby,
[data-theme="light"] #footer .text-muted {
color: var(--muted) !important;
}
/* Modal backdrop height fix (was inline in footer_view) */
.modal-backdrop { height: 100%; }
/* Legacy footer classes from global.css */
.bottom {
background-color: var(--surface);
text-align: center;
width: 100%;
}
.bottomtext {
color: var(--text);
text-align: center;
margin: 0 auto;
width: 100%;
padding: 20px;
}
/* ═══════════════════════════════════════════════════════════════════
11. CONTENT AREA CARDS
═══════════════════════════════════════════════════════════════════ */
#maincontent {
position: relative;
/* z-index removed — it created a stacking context that trapped Bootstrap modals
below the modal-backdrop. position:relative alone is fine. */
padding: 1.5rem 0 2rem;
background: transparent !important;
min-height: calc(100vh - 360px);
}
.container { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; }
.pagecontainer { max-width: 100%; }
/* .sizecontainer is an alias for .container */
.sizecontainer { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; }
/* Bootstrap .card – dark/light adaptation */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
color: var(--text);
/* overflow:visible so dropdown menus can escape the card boundary.
Table cards use .table-responsive for their own overflow clipping. */
overflow: visible;
transition: background 0.3s ease, border-color 0.3s ease;
}
/* Re-clip cards that wrap tables so corner cells don't poke out */
.card.p-0 { overflow: hidden; }
.card-body { color: var(--text); padding: 1.25rem 1.5rem; }
.card-header {
background: var(--surface-hover);
border-bottom: 1px solid var(--border);
color: var(--text);
font-weight: 700;
padding: 0.75rem 1.5rem;
}
/* card-toolbar, toolBar, dspBox — legacy + new aliases */
.card-toolbar,
.card-content,
.toolBar,
.dspBox {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
color: var(--text);
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
transition: background 0.3s ease, border-color 0.3s ease;
}
.card-toolbar,
.toolBar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.card-toolbar input[type="button"],
.card-toolbar .btn,
.toolBar input[type="button"],
.toolBar .btn {
border-radius: var(--radius-btn);
font-weight: 600;
}
/* Settings page tab strip — toolbar nav between sub-pages */
.settingTab {
display: inline-flex;
flex-wrap: wrap;
gap: 0.35rem;
align-items: center;
}
/* Inactive tab — ghost outline style */
.settingTab input[type="button"],
.settingTab .btn {
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
border-radius: var(--radius-btn-sm);
padding: 0.28rem 0.85rem;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.settingTab input[type="button"]:hover,
.settingTab .btn:hover {
background: var(--surface-hover);
border-color: rgba(255,255,255,0.20);
color: var(--text);
}
[data-theme="light"] .settingTab input[type="button"]:hover {
background: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.18);
}
/* Active tab — DISABLED attribute marks the current page */
.settingTab input[type="button"]:disabled,
.settingTab input[type="button"][disabled] {
opacity: 1 !important;
pointer-events: none;
cursor: default;
background: rgba(124, 58, 237, 0.15) !important;
border-color: rgba(124, 58, 237, 0.40) !important;
color: var(--brand) !important;
font-weight: 700;
}
[data-theme="light"] .settingTab input[type="button"]:disabled,
[data-theme="light"] .settingTab input[type="button"][disabled] {
background: rgba(124, 58, 237, 0.08) !important;
border-color: rgba(124, 58, 237, 0.30) !important;
color: var(--brand) !important;
}
.v-page-wrap { padding: 10px; }
/* Section helpers */
.sectionBlock { margin-top: 15px; }
.editpayment { border-left: 10px solid orange; margin-bottom: 50px; }
.greybgbox { border-radius: 2px; background: var(--surface-hover); border: 1px solid var(--border); }
.whitebgbox { background: var(--surface); }
/* ── Settings section container ──────────────────────────────── */
.settingsbox {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
box-shadow: var(--shadow-card);
transition: background 0.3s ease, border-color 0.3s ease;
}
/* Section heading inside .settingsbox (e.g. "Slideshow Settings") */
.settingsbox > h5,
.settingsbox > h4 {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 1rem;
padding-bottom: 0.65rem;
border-bottom: 1px solid var(--border);
overflow: hidden; /* clearfix for .fright children */
}
/* Form row — label + input side by side */
.settingsrow {
display: flex;
align-items: flex-start;
padding: 0.6rem 0;
gap: 1rem;
}
/* Separator variant */
.settingsborder {
border-bottom: 1px solid var(--border);
}
.settingsrow.settingsborder:last-child {
border-bottom: none;
}
/* Label column */
.settingsfieldname {
flex: 0 0 200px;
font-size: 0.83rem;
font-weight: 600;
color: var(--muted);
padding-top: 0.3rem;
line-height: 1.4;
}
/* Value / input column */
.settingsfield {
flex: 1;
font-size: 0.875rem;
color: var(--text);
min-width: 0;
}
/* Account/admin label/entry fields */
.labelfield { font-weight: 800; color: var(--text); }
.entryfield { font-weight: 400; color: var(--muted); }
.labelfieldDescription { font-weight: 400; color: var(--muted); }
.sectionexplination { font-weight: 400; color: var(--muted); font-size: 1em; padding: 15px; }
.test-account { color: var(--muted); font-weight: 800; }
/* Payment section spacing */
#PAYPAL, #STRIPE, #WORLDPAY { margin-top: 25px; margin-bottom: 25px; }
/* Popular link style */
a.popularLink {
color: var(--muted);
text-transform: uppercase;
font-weight: 400;
font-size: 0.9em;
border-bottom: 1px dotted var(--muted);
transition: all 0.3s ease-in;
}
a.popularLink:hover {
color: var(--text);
border-bottom-color: var(--text);
}
/* ═══════════════════════════════════════════════════════════════════
12. TABLES
═══════════════════════════════════════════════════════════════════ */
.table {
color: var(--text);
--bs-table-bg: transparent;
--bs-table-border-color: var(--border);
--bs-table-color: var(--text);
--bs-table-striped-color: var(--text);
--bs-table-hover-color: var(--text);
}
.table th,
.table td {
border-color: var(--border);
padding: 0.6rem 0.75rem;
color: var(--text);
}
.table thead th {
background: var(--surface-hover);
color: var(--muted);
font-weight: 700;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05em;
}
th { text-align: left; }
/* Legacy border table */
.tableBorder {
border-collapse: collapse;
width: 100%;
color: var(--text);
}
.tableBorder td,
.tableBorder th {
padding: 0.5rem 0.75rem;
border: 1px solid var(--border);
text-align: left;
}
.tableBorder .tableTitle { background: var(--surface-hover); color: var(--muted); font-weight: 700; }
/* tableWithColor */
.tableWithColor td,
.tableWithColor th { vertical-align: middle; }
/* Section heading rows */
.tableTitle {
border-bottom: 1px solid var(--border);
color: var(--muted);
font-size: 14px;
line-height: 16px;
font-weight: bold;
}
.tableSubTitle,
.tableSubTitleTop {
border-bottom: 1px solid var(--border);
background: var(--surface-hover);
color: var(--muted);
font-size: 12px;
line-height: 14px;
font-weight: bold;
}
.tableSubTitleTop { border-top: 1px solid var(--border); border-bottom: none; }
#sideTitle { padding: 5px; color: var(--text); font-size: 16px; font-weight: bold; line-height: 18px; }
/* Table row styles */
.tablerow td { border-bottom: 1px solid var(--border); padding: 3px; }
.tablerow { border-bottom: 1px solid var(--border); padding: 3px; }
.tablerowtitle { display: inline-block; width: 200px; line-height: 40px; }
.tablerowcontent { padding: 5px; }
/* Location row – gradient hover */
.locationRow {
border-left: rgba(0, 0, 0, 0) 8px solid;
border-right: var(--surface) 12px solid;
}
.locationRow:hover {
border-left: #ff8f00 8px solid;
border-right: var(--surface) 12px solid;
background: linear-gradient(to right, rgba(255, 143, 0, 1) 0%, rgba(254, 164, 1, 1) 4%, rgba(255, 233, 0, 0) 75%);
}
/* table-centered helper (from views-clean) */
.table-centered { margin: 0 auto; border-collapse: collapse; width: 100%; }
.table-head-row { font-weight: bold; border-top: 1px solid var(--border); }
.table-heading { width: 100%; border-bottom: 1px solid var(--border); }
.row-border-bottom { border-bottom: 1px solid var(--border); }
.cell-border-right { border-right: 1px solid var(--border); }
.cell-pad-right { padding-right: 5px; }
/* .h3-border-bottom — used as thead | class in tableWithColor tables */
.h3-border-bottom {
border-bottom: 2px solid var(--border);
background: var(--surface-hover);
color: var(--muted);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.55rem 0.75rem;
}
/* Soft bottom border for two-column data rows (admin_view, etc.) */
.tableBorderBottomSoft {
border-bottom: 1px solid var(--border);
padding: 0.5rem 0.75rem;
vertical-align: middle;
}
/* Row hover highlight — modern admin feel */
.table tbody tr:hover > td,
.tableWithColor tbody tr:hover > td {
background: var(--surface-hover);
transition: background 0.12s;
}
[data-theme="light"] .table tbody tr:hover > td,
[data-theme="light"] .tableWithColor tbody tr:hover > td {
background: rgba(0,0,0,0.025);
}
/* Clickable rows (.chk class used on | elements) */
tr.chk { cursor: pointer; }
/* Bootstrap equivalents: prefer d-table, border-* utilities over the above in new views */
/* ═══════════════════════════════════════════════════════════════════
13. ALERTS & MESSAGES
═══════════════════════════════════════════════════════════════════ */
.msg,
.errmsg {
padding: 0.75rem 1rem;
border-radius: 12px;
margin-bottom: 1rem;
}
.msg {
background: var(--bg-success);
border: 1px solid var(--border-success);
color: var(--color-success);
}
.errmsg {
background: var(--bg-danger);
border: 1px solid var(--border-danger);
color: var(--color-danger);
}
.alert { border-radius: 12px; }
/* Padded message utility */
.padded-message { padding: 2px; margin: 10px auto; }
/* ═══════════════════════════════════════════════════════════════════
14. MODALS & POPUPS
═══════════════════════════════════════════════════════════════════ */
.modal-content {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
color: var(--text);
transition: background 0.3s ease;
}
[data-theme="light"] .modal-content {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.modal-header { border-bottom: 1px solid var(--border); color: var(--text); }
.modal-footer { border-top: 1px solid var(--border); }
.modal .btn-close { filter: invert(1); opacity: 0.8; }
[data-theme="light"] .modal .btn-close { filter: none; }
.modal .btn-secondary {
background: var(--surface-hover);
border-color: var(--border);
color: var(--text);
}
.modal .btn-primary { background: var(--brand); border-color: var(--brand); }
/* Legacy popup window */
#backgroundPopup {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
z-index: 10;
}
.popupWindow {
display: none;
position: fixed;
width: 600px;
z-index: 9999;
padding: 0;
font-size: 0.875rem;
text-align: left;
overflow: visible;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
color: var(--text);
}
.popupWindowFull {
display: none;
position: fixed;
width: 100%; height: 100%;
z-index: 9999;
padding: 0; margin: 0;
font-size: 0.875rem;
text-align: left;
overflow: visible;
color: var(--text);
}
.popupWindowClose {
position: absolute;
right: -8px; top: -8px;
font-size: 0.875rem;
line-height: 1;
font-weight: 700;
display: block;
}
.popupWindowClose a { color: var(--muted); }
.popupWindowClose a:hover { color: var(--text); }
.popupWindowCookie {
display: none;
position: fixed;
bottom: 0; left: 0;
width: 100%;
min-height: 120px;
z-index: 9999;
margin: 0;
padding: 20px;
font-size: 0.875rem;
text-align: center;
overflow: visible;
color: var(--muted);
background: var(--surface);
backdrop-filter: blur(16px);
box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
/* ═══════════════════════════════════════════════════════════════════
15. UTILITY / LAYOUT HELPERS
═══════════════════════════════════════════════════════════════════ */
/* .hidden keeps display:none for JS; use Bootstrap d-none in new views */
.hidden {
display: none !important;
visibility: hidden !important;
}
.loading { display: none; text-align: center; }
/* Collapse icon rotation (Bootstrap data-bs-toggle) */
[data-bs-toggle="collapse"][aria-expanded="true"] > .js-rotate-if-collapsed {
transition: transform 0.3s ease-in-out;
transform: rotate(359deg);
color: #f87171;
}
/* Back-to-top button */
#back-top {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 20;
}
#back-top a {
width: 56px;
display: block;
text-align: center;
font-size: 11px;
border-radius: 50%;
text-decoration: none;
color: var(--muted);
transition: color 0.3s, background 0.3s;
}
#back-top a:hover { color: var(--text); }
/* Section / block layout (legacy .block used in some admin views) */
.block {
display: inline-block;
text-align: left;
padding-left: 10px;
margin-left: 10px;
width: 45%;
vertical-align: top;
}
@media only screen and (max-width: 960px) {
.block { width: 100%; }
}
.blockContainer { margin: 20% auto; }
@media only screen and (max-width: 960px) {
.blockContainer { margin: 25px auto; }
}
.wrapper { padding: 20px; padding-bottom: 30px; }
/* JS-toggled visibility */
.thidden { display: none !important; }
/* Float helper (used by .smallbutton inside h5 headings, etc.) */
.fright { float: right; }
/* Form button containers inside legacy popups/forms */
.subnavbutton,
.navbutton {
display: block;
margin-top: 0.5rem;
}
/* Linked actions inside .navbutton */
.navbutton a {
display: inline-block;
color: var(--muted);
font-weight: 600;
font-size: 0.875rem;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-btn-sm);
text-decoration: none;
transition: color 0.18s, background 0.18s;
}
.navbutton a:hover {
color: var(--text);
background: var(--surface-hover);
}
/* Popup content wrapper */
.popupwindowcontent {
padding: 0.5rem 0;
}
/* Section */
.section {
width: 95%;
margin: 0 auto;
padding: 10px 0;
overflow: hidden;
}
/* Legacy view-subtitle helpers (from views-clean) */
.view-subtitle { text-align: left; margin-left: 10px; }
.subtitle-pad { padding: 5px; }
/* ═══════════════════════════════════════════════════════════════════
16. NOTIFICATION BOXES
═══════════════════════════════════════════════════════════════════ */
.notificationBox,
.warningBox {
display: block;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem 1.25rem;
margin-bottom: 10px;
transition: box-shadow 0.3s, background 0.3s;
}
.notificationBox:hover,
.warningBox:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.30);
}
[data-theme="light"] .notificationBox:hover,
[data-theme="light"] .warningBox:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}
/* ═══════════════════════════════════════════════════════════════════
17. VIEWS-CLEAN UTILITIES (MIGRATED)
These were previously in views-clean.css. Prefer Bootstrap 5
equivalents in new views (e.g. .overflow-hidden → Bootstrap's class).
═══════════════════════════════════════════════════════════════════ */
/* Image preview grid item */
.image-preview-wrapper {
position: relative;
width: 230px;
height: 280px;
float: left; /* Consider flex/grid in new views */
padding: 2px;
margin: 5px;
}
.img-max { max-width: 200px; max-height: 200px; }
/* button wrapper */
.button-wrapper { width: 200px; }
.btn-search {
position: relative;
float: left; /* Use float-start in new views */
width: 200px;
}
/* dspBox position reset (admin content wrapper) */
.dspBox { margin-top: 20px; position: relative; }
/* ═══════════════════════════════════════════════════════════════════
18. ANIMATIONS
═══════════════════════════════════════════════════════════════════ */
/* Greeting fade – used in all navbar views */
@keyframes text-fade {
0% { opacity: 0; }
25% { opacity: 1; }
50% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#greeting {
opacity: 0;
transition: opacity 1s ease;
animation: text-fade 7.5s ease-in-out infinite;
}
/* Dropzone passing-through (retained from dropzone context) */
@keyframes passing-through {
0% { opacity: 0; transform: translateY(40px); }
30% { opacity: 1; transform: translateY(0px); }
70% { opacity: 1; transform: translateY(0px); }
100% { opacity: 0; transform: translateY(-40px); }
}
@keyframes slide-in {
0% { opacity: 0; transform: translateY(40px); }
30% { opacity: 1; transform: translateY(0px); }
}
@keyframes pulse-glow {
0% { box-shadow: 0 0 0 0 var(--brand-shadow); }
70% { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0); }
100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}
/* ═══════════════════════════════════════════════════════════════════
19. RESPONSIVE / MEDIA QUERIES
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
#footer .border-start {
border-left: 0 !important;
text-align: left !important;
}
.tablerowtitle { width: 140px; }
}
@media (max-width: 480px) {
.premium-card {
padding: 26px 20px 22px;
border-radius: 26px;
}
.siteMessage .wrapper { padding: 10px 14px; }
}
@media (max-width: 960px) {
.block { width: 100%; }
.blockContainer { margin: 25px auto; }
}
/* ═══════════════════════════════════════════════════════════════════
20. CONTENT VIEW UTILITIES
Styles extracted from inline