/** * Palavi Library - Design System (Theme Variables + Shared Components) * ------------------------------------------------------------------ * Built in: Module 4 (Authentication System), extended in later modules. * Visually redesigned in response to a full UI/UX overhaul request: * refined color/elevation/motion tokens, kept every existing class * name (.glass-card, .btn-brand, .badge-soft, ...) so admin.css/ * user.css/reader.css and the ~80 pages that reference them all pick * up the new look with zero markup changes. * ------------------------------------------------------------------ * Defines light/dark CSS custom properties on * and the reusable component classes used by every card, sidebar, and * modal across admin/ and user/. */ :root { /* Brand - matches the PALAVI logo's navy + sky-blue palette (assets/images/logo/Logo.png) rather than a generic purple/teal. */ --brand-primary: #1E5AA8; --brand-primary-dark: #123F7D; --brand-secondary: #6FC3E8; --brand-accent: #38BDF8; --brand-gradient: linear-gradient(135deg, #1E5AA8 0%, #6FC3E8 100%); --brand-gradient-warm: linear-gradient(135deg, #FF6FB5 0%, #FDCB6E 100%); /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* Radius scale */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; /* Motion */ --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 0.15s; --duration-base: 0.25s; --duration-slow: 0.45s; /* Light theme (default) */ --bg-body: #F3F4FC; --bg-surface: #FFFFFF; --bg-glass: rgba(255, 255, 255, 0.68); --bg-glass-strong: rgba(255, 255, 255, 0.9); --border-glass: rgba(30, 90, 168, 0.14); --text-primary: #191A2B; --text-secondary: #4A4E6A; --text-muted: #7C7F9C; --shadow-xs: 0 1px 2px rgba(31, 30, 74, 0.06); --shadow-sm: 0 4px 14px rgba(31, 30, 74, 0.08); --shadow-md: 0 10px 28px rgba(31, 30, 74, 0.12); --shadow-lg: 0 20px 48px rgba(31, 30, 74, 0.16); --shadow-glow: 0 10px 30px rgba(30, 90, 168, 0.28); --shadow-glass: var(--shadow-md); --success: #00B894; --danger: #FF5D73; --warning: #F5A623; --info: #4C8DFF; } [data-theme="dark"] { --bg-body: #10111D; --bg-surface: #191B2C; --bg-glass: rgba(32, 34, 54, 0.68); --bg-glass-strong: rgba(32, 34, 54, 0.92); --border-glass: rgba(255, 255, 255, 0.08); --text-primary: #F1F2FA; --text-secondary: #A6A9C4; --text-muted: #6C6F8E; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55); --shadow-glow: 0 10px 34px rgba(30, 90, 168, 0.38); --shadow-glass: var(--shadow-md); } * { scrollbar-width: thin; scrollbar-color: var(--border-glass) transparent; } body { background-color: var(--bg-body); color: var(--text-primary); transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------- Glassmorphism / card utility classes --------------------------------------------------------------- */ .glass-card { background: var(--bg-glass); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); box-shadow: var(--shadow-glass); transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), background-color var(--duration-base) ease, border-color var(--duration-base) ease; } a.glass-card:hover, .glass-card.is-interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .glass-card-strong { background: var(--bg-glass-strong); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); box-shadow: var(--shadow-glass); } .glass-panel-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg-body); } .glass-blob { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.22; animation: blob-drift 18s var(--ease-standard) infinite alternate; } .glass-blob-1 { width: 440px; height: 440px; background: var(--brand-primary); top: -120px; left: -100px; } .glass-blob-2 { width: 400px; height: 400px; background: var(--brand-secondary); bottom: -140px; right: -100px; animation-delay: -6s; } @keyframes blob-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(30px, 20px) scale(1.08); } } /* Buttons */ .btn-brand { background: var(--brand-gradient); background-size: 160% 160%; border: none; color: #fff; font-weight: 600; border-radius: var(--radius-md); padding: 0.65rem 1.35rem; transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), background-position var(--duration-slow) ease; } .btn-brand:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); background-position: 100% 0; color: #fff; } .btn-brand:active { transform: translateY(0) scale(0.98); } .btn-brand:focus-visible, .btn-outline-secondary:focus-visible, .form-control-glass:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } /* Round icon-button shell, shared by the theme toggle and any other * circular icon link/button (e.g. the topbar notification bell). * IMPORTANT: only .theme-toggle-btn is the JS hook theme-switcher.js * targets (by that exact class) to swap the icon on click - anything * that is NOT the actual theme toggle must use .icon-btn instead, or * theme-switcher.js will overwrite its icon with the sun/moon glyph * and toggle the site theme when clicked (this happened for real: the * notification bell used to share .theme-toggle-btn and silently * rendered as a second moon icon - see admin/includes/topbar.php). */ .theme-toggle-btn, .icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-glass); background: var(--bg-glass); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) ease; } .theme-toggle-btn:hover { transform: scale(1.08) rotate(-8deg); box-shadow: var(--shadow-sm); } .icon-btn:hover { transform: scale(1.08); box-shadow: var(--shadow-sm); color: var(--text-primary); } /* Form controls that fit the glass aesthetic */ .form-control-glass { background: var(--bg-glass-strong); border: 1px solid var(--border-glass); color: var(--text-primary); border-radius: var(--radius-md); transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; } .form-control-glass:focus { background: var(--bg-glass-strong); color: var(--text-primary); border-color: var(--brand-primary); box-shadow: 0 0 0 0.2rem rgba(30, 90, 168, 0.18); } .form-control-glass::placeholder { color: var(--text-muted); } /* Skeleton loading shimmer (used from Module 5 onward) */ .skeleton { background: linear-gradient(90deg, var(--bg-glass) 25%, var(--bg-glass-strong) 37%, var(--bg-glass) 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite; border-radius: var(--radius-sm); } @keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* --------------------------------------------------------------- Entrance animations - applied broadly via a couple of small, deliberately-scoped utility classes rather than a blanket selector, so unrelated layout (e.g. plain Bootstrap `.row`) is never affected. --------------------------------------------------------------- */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .admin-main > *, .user-main > * { animation: fade-in-up var(--duration-slow) var(--ease-standard) both; } /* Toasts get a livelier entrance than Bootstrap's default fade */ .toast.show { animation: fade-in-up var(--duration-base) var(--ease-standard) both; } /* --------------------------------------------------------------- Modernized status pill, shape + color variants both defined here (moved from admin.css - user/*.php pages use these same .badge-soft-* classes just as much as admin does, e.g. book-detail.php's access-type badge and tickets' status pills, but never load admin.css, so every colored badge on the user side was silently rendering with no background/color at all). --------------------------------------------------------------- */ .badge-soft { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; line-height: 1.4; } .badge-soft::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* An icon inside the pill (e.g. book-detail.php's rating/reads/pages chips) already conveys what the dot bullet is for - drop the dot rather than show both. */ .badge-soft:has(i)::before { content: none; } .badge-soft-success { background: rgba(0, 184, 148, 0.14); color: var(--success); } .badge-soft-danger { background: rgba(255, 93, 115, 0.14); color: var(--danger); } .badge-soft-warning { background: rgba(245, 166, 35, 0.16); color: #a6690e; } .badge-soft-info { background: rgba(76, 141, 255, 0.14); color: var(--info); } .badge-soft-muted { background: var(--bg-glass); color: var(--text-muted); } [data-theme="dark"] .badge-soft-warning { color: #f5b955; } [data-theme="dark"] .badge-soft-info { color: #8ab4ff; } /* --------------------------------------------------------------- Dashboard-style content panel (moved from admin.css for the same reason as .badge-soft-* above - user/*.php pages, e.g. profile.php/book-detail.php/subscription.php, use .dashboard-panel/-title/-subtitle extensively and were silently getting zero padding/typography from it). --------------------------------------------------------------- */ /* No height:100% here on purpose - of ~50 pages using .dashboard-panel, only 2 actually want equal-height stretching (a row of pricing/plan cards) and both already opt in explicitly with Bootstrap's own .h-100 utility class. Baking height:100% into the base class instead made every *standalone* panel vulnerable to the same bug repeatedly this session (admin/tickets/view.php, profile.php, book-detail.php, subscription.php): .user-main/.admin-main get stretched to at least 100vh by their own parent's flex row (sidebar has height:100vh), so a lone first-child panel with height:100% would claim that entire stretched height, leaving a large blank gap and pushing every sibling below it down. Pages that DO want two panels to match height side by side (e.g. admin/index.php's chart/activity rows) add .h-100 in their own markup instead. */ .dashboard-panel { padding: 22px; } .dashboard-panel-title { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); margin-bottom: 4px; letter-spacing: -0.01em; } .dashboard-panel-subtitle { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 18px; } /* --------------------------------------------------------------- Simple content table (moved from admin.css - user/subscription.php, downloads.php, and invoices.php reuse these same classes for their server-rendered history tables, same reasoning as .dashboard-panel above). The admin-only mobile "card" breakpoint stays in admin.css, since it needs a data-label attribute only the admin AdminDataTable JS engine stamps on - these server-rendered tables fall back to plain .table-responsive horizontal scroll on mobile instead. --------------------------------------------------------------- */ .admin-table-wrapper { padding: 0; overflow: hidden; } .admin-table-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 18px 20px; } .admin-table { width: 100%; margin-bottom: 0; color: var(--text-primary); border-collapse: separate; border-spacing: 0; } .admin-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--border-glass); padding: 12px 20px; white-space: nowrap; cursor: pointer; user-select: none; } .admin-table thead th.sortable:hover { color: var(--brand-primary); } .admin-table thead th i.sort-icon { font-size: 0.7rem; margin-left: 4px; opacity: 0.5; } .admin-table tbody td { padding: 14px 20px; border-bottom: 1px solid var(--border-glass); vertical-align: middle; font-size: 0.9rem; } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-table tbody tr { transition: background-color var(--duration-fast) ease; } .admin-table tbody tr:hover { background: var(--bg-glass); } .table-cover-thumb { width: 40px; height: 56px; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow-xs); } .admin-pagination-footer { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 20px; font-size: 0.85rem; color: var(--text-secondary); } /* The real logo (assets/images/logo/Logo.png) already includes the * "Palavi Mobile Library" wordmark baked into the image itself, so * unlike the old .brand-icon + .brand-name pair it replaces in the * admin/user sidebars, this is used alone - no separate text label * needed alongside it. Shared here (loaded by both admin.css and * user.css) since both sidebars use the identical markup/sizing. */ .sidebar-logo-img { height: 40px; width: auto; display: block; background: transparent; border-radius: 8px; } /* Same reasoning as .auth-logo-img in auth.css: the logo's artwork is * dark blue on transparent, so it needs a light backing to read * clearly against the dark sidebar theme - light mode needs none. */ [data-theme="dark"] .sidebar-logo-img { background: #fff; padding: 4px; } /* --------------------------------------------------------------- Topbar profile button / avatar / notification dot - shared by admin/includes/topbar.php AND user/includes/topbar.php. These used to live in admin.css only under "admin-*" names; user/includes/ topbar.php referenced those same class names even though user pages never load admin.css, so the avatar/notification dot silently rendered unstyled on the user side. Defined once here (loaded by both admin.css and user.css) under neutral names instead. --------------------------------------------------------------- */ /* Small numeric count bubble on an icon button - shared by the notification bell (live-updated by assets/js/common/ notification-poller.js's short-polling loop) and the cart icon (updated inline by whatever action just changed the cart). "9+" once it clips, matching the same overflow convention used elsewhere in this app for large counts. */ .count-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg-glass); animation: pulse-dot 1.8s ease infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 2px var(--bg-glass), 0 0 0 0 rgba(255, 93, 115, 0.5); } 50% { box-shadow: 0 0 0 2px var(--bg-glass), 0 0 0 5px rgba(255, 93, 115, 0); } } .profile-btn { display: flex; align-items: center; gap: 10px; border: none; background: var(--bg-glass); border-radius: var(--radius-md); padding: 6px 12px 6px 6px; color: var(--text-primary); transition: background-color var(--duration-fast) ease; } .profile-btn:hover { background: var(--bg-glass-strong); } /* Always visible (not display:none'd away on mobile) so the profile button/name stays reachable at every viewport width - narrow phones just get an ellipsis instead of the name disappearing entirely. */ .profile-btn-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* sidebar nav accordion - collapsible section groups (admin + user sidebars share these). Font styling is spelled out explicitly (matching admin.css's .admin-nav-section-title) rather than `font: inherit` - as a