/* ============================================================================= WCP360 Prototype - Main Stylesheet Dark theme with blue/cyan accents. Zero external dependencies. This file contains: CSS variables, reset, layout, auth layout, grid system, page headers, responsive rules, overlay, scrollbar, and utility classes. PHP Conversion Note: This file can be used as-is in the PHP application. All class names use the wcp- prefix and BEM naming convention matching the PHP views. ============================================================================= */ /* ----------------------------------------------------------------------------- CSS Custom Properties (Design Tokens) These variables define the entire color palette, typography, spacing, and sizing for the WCP360 dark theme. Override these to create alternate themes. ----------------------------------------------------------------------------- */ :root { /* -- Backgrounds -- */ --bg-primary: #0f1117; --bg-secondary: #1a1d27; --bg-tertiary: #242836; --bg-card: #1e2230; --bg-input: #2a2e3d; --bg-hover: #2d3244; /* -- Text Colors -- */ --text-primary: #e4e6ed; --text-secondary: #9ca3b4; --text-muted: #6b7280; --text-inverse: #0f1117; /* -- Accent (Primary Blue) -- */ --accent: #3b82f6; --accent-hover: #2563eb; --accent-light: rgba(59, 130, 246, 0.15); /* -- Semantic Colors -- */ --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #06b6d4; /* -- Named Color Aliases (used by PHP views) -- */ --wcp-accent: #3b82f6; --wcp-accent-light: rgba(59, 130, 246, 0.15); --wcp-blue: #3b82f6; --wcp-green: #22c55e; --wcp-orange: #f59e0b; --wcp-purple: #a855f7; /* -- Borders -- */ --border: #2d3244; --border-light: #363b4e; /* -- Shadows -- */ --shadow: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4); /* -- Border Radius -- */ --radius: 8px; --radius-sm: 4px; --radius-lg: 12px; /* -- Layout Dimensions -- */ --sidebar-width: 260px; --topbar-height: 56px; /* -- Typography -- */ /* NOTE: Production should self-host these fonts instead of using Google Fonts CDN */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* -- Transitions -- */ --transition: 0.2s ease; } /* ----------------------------------------------------------------------------- Light Theme Applied when is set. Overrides all color variables for a clean light appearance. Toggle is handled by main.js and persisted in localStorage. ----------------------------------------------------------------------------- */ [data-theme="light"] { /* -- Backgrounds -- */ --bg-primary: #f5f7fa; --bg-secondary: #ffffff; --bg-tertiary: #edf0f5; --bg-card: #ffffff; --bg-input: #f0f2f7; --bg-hover: #e8eaf0; /* -- Text Colors -- */ --text-primary: #1a1d27; --text-secondary: #5a6275; --text-muted: #8892a4; --text-inverse: #ffffff; /* -- Accent stays the same -- */ --accent: #2563eb; --accent-hover: #1d4ed8; --accent-light: rgba(37, 99, 235, 0.1); /* -- Semantic Colors (slightly adjusted for light bg) -- */ --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0891b2; /* -- Named Color Aliases -- */ --wcp-accent: #2563eb; --wcp-accent-light: rgba(37, 99, 235, 0.1); --wcp-blue: #2563eb; --wcp-green: #16a34a; --wcp-orange: #d97706; --wcp-purple: #7c3aed; /* -- Borders -- */ --border: #dfe3eb; --border-light: #e8ecf2; /* -- Shadows -- */ --shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1); } /* Light theme scrollbar overrides */ [data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-primary); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #c4c9d4; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a0a7b5; } /* ----------------------------------------------------------------------------- Reset & Base Styles ----------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-hover); } code, pre { font-family: var(--font-mono); font-size: 0.9em; } code { background: var(--bg-input); padding: 2px 6px; border-radius: var(--radius-sm); } pre { background: var(--bg-tertiary); padding: 1rem; border-radius: var(--radius); overflow-x: auto; } h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; } h1 { font-size: 1.75rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.15rem; } img { max-width: 100%; height: auto; } /* ----------------------------------------------------------------------------- Layout System The main layout uses a sidebar + main content pattern. PHP equivalent:
wraps sidebar + wcp-main ----------------------------------------------------------------------------- */ .wcp-layout { display: flex; min-height: 100vh; } /* -- Sidebar -- */ .wcp-sidebar { width: var(--sidebar-width); background: var(--bg-secondary); border-right: 1px solid var(--border); position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 100; transition: transform var(--transition); display: flex; flex-direction: column; } /* Sidebar brand / logo area */ .wcp-sidebar__brand { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .wcp-sidebar__logo { display: flex; align-items: center; justify-content: center; color: var(--accent); } .wcp-sidebar__title { font-size: 1.25rem; font-weight: 700; color: var(--accent); letter-spacing: 0.5px; } /* Sidebar navigation */ .wcp-sidebar__nav { padding: 0.75rem 0; flex: 1; overflow-y: auto; } .wcp-sidebar__list { list-style: none; padding: 0; margin: 0; } .wcp-sidebar__item { /* Each nav item container */ } .wcp-sidebar__link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1.25rem; color: var(--text-secondary); transition: all var(--transition); border-left: 3px solid transparent; font-size: 0.9rem; text-decoration: none; } .wcp-sidebar__link:hover { background: var(--bg-hover); color: var(--text-primary); } /* Active sidebar item */ .wcp-sidebar__item--active .wcp-sidebar__link { background: var(--accent-light); color: var(--accent); border-left-color: var(--accent); } /* Sidebar icons */ .wcp-sidebar__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.7; } .wcp-sidebar__icon svg { width: 20px; height: 20px; } .wcp-sidebar__item--active .wcp-sidebar__icon { opacity: 1; } .wcp-sidebar__label { /* Nav item text label */ } /* Sidebar section headers (grouping nav items) */ .wcp-sidebar__section { padding: 0.75rem 1.25rem 0.35rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-top: 0.5rem; } .wcp-sidebar__section:first-child { margin-top: 0; } /* -- Collapsible Sidebar Groups -- */ .wcp-sidebar__group { list-style: none; } .wcp-sidebar__group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.75rem 1.25rem 0.35rem; background: none; border: none; cursor: pointer; margin-top: 0.5rem; transition: color var(--transition); } .wcp-sidebar__group-toggle:hover { color: var(--text-secondary); } .wcp-sidebar__section-text { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); } .wcp-sidebar__group-toggle:hover .wcp-sidebar__section-text { color: var(--text-secondary); } .wcp-sidebar__chevron { color: var(--text-muted); transition: transform 0.25s ease; flex-shrink: 0; } .wcp-sidebar__group--collapsed .wcp-sidebar__chevron { transform: rotate(-90deg); } .wcp-sidebar__group-items { list-style: none; padding: 0; margin: 0; overflow: hidden; max-height: 500px; transition: max-height 0.3s ease, opacity 0.25s ease; opacity: 1; } .wcp-sidebar__group--collapsed .wcp-sidebar__group-items { max-height: 0; opacity: 0; } /* Sidebar footer (version info) */ .wcp-sidebar__footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); flex-shrink: 0; } .wcp-sidebar__version { font-size: 0.75rem; color: var(--text-muted); } /* -- Main Content Area -- */ .wcp-main { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-height: 100vh; } /* -- Top Bar -- */ .wcp-topbar { height: var(--topbar-height); background: var(--bg-secondary); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; position: sticky; top: 0; z-index: 50; flex-shrink: 0; } .wcp-topbar__left { display: flex; align-items: center; gap: 1rem; } .wcp-topbar__center { display: flex; align-items: center; } .wcp-topbar__right { display: flex; align-items: center; gap: 1rem; } /* Mobile hamburger toggle */ .wcp-topbar__toggle { display: none; /* Hidden on desktop, shown on mobile */ background: none; border: none; color: var(--text-primary); cursor: pointer; padding: 0.5rem; border-radius: var(--radius-sm); transition: background var(--transition); } .wcp-topbar__toggle:hover { background: var(--bg-hover); } .wcp-topbar__brand { font-weight: 700; color: var(--accent); font-size: 1rem; display: none; /* Shown only on mobile when sidebar is hidden */ } /* Hostname display */ .wcp-topbar__hostname { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); } /* User dropdown area */ .wcp-topbar__user { position: relative; } .wcp-topbar__user-btn { display: flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.35rem 0.75rem; cursor: pointer; color: var(--text-secondary); font-family: var(--font-sans); font-size: 0.85rem; transition: all var(--transition); } .wcp-topbar__user-btn:hover { background: var(--bg-hover); border-color: var(--border-light); } /* User avatar circle */ .wcp-topbar__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } .wcp-topbar__username { color: var(--text-primary); font-weight: 500; } .wcp-topbar__role { /* Uses .wcp-badge classes */ } .wcp-topbar__caret { opacity: 0.5; transition: transform var(--transition); } .wcp-topbar__user.wcp-topbar__user--open .wcp-topbar__caret { transform: rotate(180deg); } /* -- Content Area -- */ .wcp-content { flex: 1; padding: 1.5rem; max-width: 1400px; width: 100%; } /* -- Footer -- */ .wcp-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-muted); text-align: center; flex-shrink: 0; } /* -- Overlay (for mobile sidebar) -- */ .wcp-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 99; opacity: 0; transition: opacity var(--transition); pointer-events: none; } .wcp-overlay--visible { opacity: 1; pointer-events: auto; } /* ----------------------------------------------------------------------------- Auth Layout Centered card layout for login, 2FA, and password reset pages. PHP equivalent: layouts/auth.php ----------------------------------------------------------------------------- */ .wcp-body--auth { /* Auth pages have no sidebar/topbar */ } .wcp-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-primary); padding: 2rem; } .wcp-auth__container { width: 100%; max-width: 420px; text-align: center; } /* Auth brand / logo */ .wcp-auth__brand { margin-bottom: 2rem; } .wcp-auth__logo { display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--accent); } .wcp-auth__title { font-size: 2rem; font-weight: 700; color: var(--accent); letter-spacing: 1px; } .wcp-auth__subtitle { color: var(--text-muted); font-size: 0.95rem; margin-top: 0.25rem; } /* Auth card (login form container) */ .wcp-auth__card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-lg); text-align: left; } .wcp-auth__heading { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; text-align: center; } .wcp-auth__text { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.5rem; text-align: center; } .wcp-auth__footer { margin-top: 2rem; font-size: 0.8rem; color: var(--text-muted); } .wcp-auth__link { display: block; text-align: center; margin-top: 1rem; font-size: 0.85rem; color: var(--text-muted); } .wcp-auth__link:hover { color: var(--accent); } /* ----------------------------------------------------------------------------- Page Header Used at the top of every content page (title + optional action buttons). ----------------------------------------------------------------------------- */ .wcp-page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .wcp-page-header__left { /* Title + subtitle container */ } .wcp-page-header__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; } .wcp-page-header__subtitle { color: var(--text-muted); font-size: 0.9rem; } .wcp-page-header__actions { display: flex; gap: 0.5rem; align-items: center; } /* ----------------------------------------------------------------------------- Grid System Simple responsive grid layouts using CSS Grid. ----------------------------------------------------------------------------- */ .wcp-grid { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; } .wcp-grid--2 { grid-template-columns: repeat(2, 1fr); } .wcp-grid--3 { grid-template-columns: repeat(3, 1fr); } .wcp-grid--4 { grid-template-columns: repeat(4, 1fr); } /* ----------------------------------------------------------------------------- Responsive Styles ----------------------------------------------------------------------------- */ /* Tablet breakpoint */ @media (max-width: 1024px) { .wcp-grid--4 { grid-template-columns: repeat(2, 1fr); } .wcp-grid--3 { grid-template-columns: repeat(2, 1fr); } } /* Mobile breakpoint */ @media (max-width: 768px) { /* Sidebar slides off-screen on mobile */ .wcp-sidebar { transform: translateX(-100%); } .wcp-sidebar.wcp-sidebar--open { transform: translateX(0); } .wcp-main { margin-left: 0; } /* Show mobile toggle and brand */ .wcp-topbar__toggle { display: flex; } .wcp-topbar__brand { display: block; } /* Stack grids on mobile */ .wcp-grid--2, .wcp-grid--3, .wcp-grid--4 { grid-template-columns: 1fr; } /* Reduce content padding */ .wcp-content { padding: 1rem; } /* Page header stacks */ .wcp-page-header { flex-direction: column; } } /* Small mobile */ @media (max-width: 480px) { .wcp-auth__card { padding: 1.5rem; } .wcp-topbar { padding: 0 1rem; } .wcp-topbar__hostname { display: none; } } /* ----------------------------------------------------------------------------- Scrollbar Styling (Webkit browsers) ----------------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Firefox scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg-primary); } /* ----------------------------------------------------------------------------- Utility Classes ----------------------------------------------------------------------------- */ .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-info { color: var(--info); } .text-center { text-align: center; } .text-right { text-align: right; } .text-small { font-size: 0.8rem; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .hidden { display: none !important; } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; }