/* ========================================================================== Liquid Glass UI Theme Guidelines Implementation Inspired by Apple visionOS & macOS Materials (NavTech HRMS Theme) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); /* --- 1. Root Base Variables (Light & Default Tokens) --- */ :root { --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif; /* Default Light Theme Variables */ --color-ink-950: #0f172a; --color-ink-900: #1e293b; --color-ink-500: #475569; --color-ink-400: #64748b; --color-ink-300: #94a3b8; --color-separator: rgba(0, 0, 0, 0.12); /* Status Tokens */ --color-approved: #16803c; --color-approved-bg: rgba(22, 128, 60, 0.18); --color-rejected: #d5333a; --color-rejected-bg: rgba(213, 51, 58, 0.18); --color-pending: #6b7280; --color-pending-bg: rgba(107, 114, 128, 0.18); --color-accent: #0a84ff; --color-aws-orange: #ff9900; /* Backdrops (Crisp Desk Background Photo) */ --bg-app-wallpaper: url('/images/desk-white-bg.jpg') center/cover no-repeat fixed; --bg-scrim-tint: rgba(255, 255, 255, 0.25); --material-bg: rgba(255, 255, 255, 0.72); --material-thin-bg: rgba(255, 255, 255, 0.85); --material-thick-bg: rgba(15, 23, 42, 0.08); --glass-bg: rgba(255, 255, 255, 0.68); --glass-solid-bg: rgba(255, 255, 255, 0.95); --catch: rgba(255, 255, 255, 0.8); --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); --border-radius-xl: 24px; --border-radius-lg: 18px; --border-radius-md: 12px; --border-radius-sm: 8px; } /* --- Dark Theme Overrides (.theme-dark on or ) --- */ :root.theme-dark, html.theme-dark, body.theme-dark, .theme-dark { --color-ink-950: #ffffff; --color-ink-900: rgba(255, 255, 255, 0.92); --color-ink-500: rgba(255, 255, 255, 0.72); --color-ink-400: rgba(255, 255, 255, 0.52); --color-ink-300: rgba(255, 255, 255, 0.32); --color-separator: rgba(255, 255, 255, 0.15); /* High-Contrast Vibrant Blue for Dark Mode */ --color-accent: #38bdf8; --color-approved: #34d399; --color-approved-bg: rgba(52, 211, 153, 0.22); --bg-app-wallpaper: url('/images/desk-white-bg.jpg') center/cover no-repeat fixed; --bg-scrim-tint: rgba(10, 14, 18, 0.45); --material-bg: rgba(18, 22, 26, 0.68); --material-thin-bg: rgba(28, 33, 38, 0.75); --material-thick-bg: rgba(255, 255, 255, 0.14); --glass-bg: rgba(18, 22, 26, 0.72); --glass-solid-bg: rgba(15, 18, 22, 0.95); --catch: rgba(255, 255, 255, 0.25); --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.25); } .theme-dark .text-primary, .theme-dark a.text-primary, .theme-dark .text-info, .theme-dark a.text-info { color: #38bdf8 !important; } .theme-dark a:not(.btn):not(.sidebar-nav-item) { color: #38bdf8; } .theme-dark .badge-accent { background: rgba(56, 189, 248, 0.22); color: #38bdf8; } /* --- 2. Base Reset & 3-Layer Backdrop --- */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; padding: 0.85rem 1.25rem; font-family: var(--font-sans); background: var(--bg-app-wallpaper); color: var(--color-ink-900); min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.3s ease, color 0.3s ease; } /* 3-Layer Backdrop System */ .app-backdrop { position: fixed; inset: 0; z-index: -1; background: var(--bg-app-wallpaper); } .app-backdrop::after { content: ''; position: absolute; inset: 0; background: var(--bg-scrim-tint); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); transition: background 0.3s ease; } /* --- 3. Typography --- */ h1, h2, h3, h4, h5, h6 { color: var(--color-ink-950); font-weight: 600; margin: 0 0 0.4rem 0; letter-spacing: -0.01em; } p, span, label, div { color: var(--color-ink-900); } .text-muted { color: var(--color-ink-500) !important; } .text-secondary { color: var(--color-ink-400) !important; } /* --- 4. VisionOS Glass Materials --- */ .glass { position: relative; background: var(--glass-bg); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--color-separator); box-shadow: var(--glass-shadow); border-radius: var(--border-radius-xl); transition: background 0.3s ease, border-color 0.3s ease; } .glass-solid { position: relative; background: var(--glass-solid-bg); border: 1px solid var(--color-separator); box-shadow: var(--glass-shadow); border-radius: var(--border-radius-xl); } .material { position: relative; background: var(--material-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--color-separator); border-radius: var(--border-radius-xl); box-shadow: var(--glass-shadow); padding: 1.5rem; transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; } .material-thin { background: var(--material-thin-bg); border: 1px solid var(--color-separator); border-radius: var(--border-radius-lg); padding: 1rem; } .material-thick { background: var(--material-thick-bg); border: 1px solid var(--color-separator); border-radius: var(--border-radius-lg); padding: 1rem; } /* Specular Top Rim Specular Lighting */ .glass::before, .material::before, .app-sidebar-panel::before, .top-header-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--catch) 30%, var(--catch) 70%, transparent 100%); border-top-left-radius: inherit; border-top-right-radius: inherit; pointer-events: none; opacity: 0.85; } /* --- 5. Application Structure --- */ .app-wrapper { display: flex; flex-direction: row; align-items: stretch; gap: 1.25rem; min-height: calc(100vh - 2rem); width: 100%; max-width: 100%; margin: 0; } /* Left Sidebar Panel */ .app-sidebar-panel { width: 260px; min-width: 260px; background: var(--glass-bg); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--color-separator); border-radius: var(--border-radius-xl); box-shadow: var(--glass-shadow); padding: 1.25rem 0.85rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; transition: background 0.3s ease; } @media (min-width: 992px) { .app-sidebar-panel { position: sticky; top: 0.85rem; height: calc(100vh - 1.7rem); max-height: calc(100vh - 1.7rem); overflow-y: auto; flex-shrink: 0; } } .sidebar-nav-list { display: flex; flex-direction: column; gap: 0.2rem; } .sidebar-nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; border-radius: 9999px; /* Capsule pill */ color: var(--color-ink-900); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: all 0.2s ease; } .sidebar-nav-item:hover { background: rgba(125, 125, 125, 0.12); color: var(--color-ink-950); } .sidebar-nav-item.active { background: var(--material-thick-bg); color: var(--color-ink-950); font-weight: 600; box-shadow: inset 0 1px 0 var(--catch); } .theme-dark .sidebar-nav-item.active { background: rgba(255, 255, 255, 0.18); color: #ffffff; } .sidebar-footer { padding-top: 1rem; border-top: 1px solid var(--color-separator); } /* Right Content Area */ .app-main-content { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; } /* Top Header Panel */ .top-header-panel { background: var(--glass-bg); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--color-separator); border-radius: var(--border-radius-xl); box-shadow: var(--glass-shadow); padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1020; transition: background 0.3s ease; } .top-header-panel .dropdown-menu { z-index: 1060 !important; background: var(--glass-solid-bg) !important; border: 1px solid var(--color-separator) !important; backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important; } .top-header-title { font-size: 1.15rem; font-weight: 600; margin: 0; } .top-header-subtitle { font-size: 0.78rem; color: var(--color-ink-500); margin: 0; } /* Header User Profile Badge */ .user-profile-badge { display: flex; align-items: center; gap: 0.75rem; background: var(--material-thick-bg); padding: 0.35rem 0.85rem; border-radius: 9999px; border: 1px solid var(--color-separator); transition: all 0.2s ease; } .user-profile-badge:hover { background: rgba(125, 125, 125, 0.2); } .notification-bell-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--material-thick-bg); border: 1px solid var(--color-separator); display: flex; align-items: center; justify-content: center; color: var(--color-ink-950); cursor: pointer; } .notification-bell-btn .bell-badge { position: absolute; top: -2px; right: -2px; width: 16px; height: 16px; background: #d5333a; color: white; border-radius: 50%; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .user-avatar-circle { width: 34px; height: 34px; border-radius: 50%; background: var(--color-accent); color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; } /* --- 6. Sub-navigation Pills Control --- */ .subnav-pill-container { display: inline-flex; background: var(--material-thick-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 0.3rem; border-radius: 9999px; border: 1px solid var(--color-separator); gap: 0.25rem; } .subnav-pill-item { padding: 0.45rem 1.25rem; border-radius: 9999px; color: var(--color-ink-900); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: all 0.2s ease; cursor: pointer; border: none; background: transparent; } .subnav-pill-item:hover { color: var(--color-ink-950); } .subnav-pill-item.active { background: var(--material-bg); color: var(--color-ink-950); font-weight: 600; box-shadow: inset 0 1px 0 var(--catch); } .theme-dark .subnav-pill-item.active { background: rgba(255, 255, 255, 0.18); color: #ffffff; } /* --- 7. Buttons (.btn) & Controls --- */ .btn { font-family: var(--font-sans); font-weight: 500; font-size: 0.85rem; min-height: 40px; padding: 0.45rem 1.25rem; border-radius: 9999px; border: 1px solid var(--color-separator); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; transition: all 0.2s ease; text-decoration: none; color: var(--color-ink-950); background: var(--material-thin-bg); box-shadow: inset 0 1px 0 var(--catch); } .btn-ghost { background: var(--material-thick-bg); color: var(--color-ink-950); } .btn-ghost:hover { background: rgba(125, 125, 125, 0.2); color: var(--color-ink-950); } .btn-primary { background: var(--color-accent); color: #ffffff; border-color: var(--color-accent); } .btn-primary:hover { opacity: 0.9; box-shadow: 0 4px 16px rgba(10, 132, 255, 0.4); } .btn-destructive { background: rgba(213, 51, 58, 0.15); color: var(--color-rejected); border-color: rgba(213, 51, 58, 0.3); } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge-approved, .badge-running { background: var(--color-approved-bg); color: var(--color-approved); } .badge-rejected, .badge-stopped { background: var(--color-rejected-bg); color: var(--color-rejected); } .badge-pending { background: var(--color-pending-bg); color: var(--color-pending); } .badge-accent { background: rgba(10, 132, 255, 0.18); color: var(--color-accent); } .badge-aws { background: rgba(255, 153, 0, 0.18); color: var(--color-aws-orange); } /* Form Controls & Tables */ .form-control, .form-select { font-family: var(--font-sans); background: var(--material-thin-bg); border: 1px solid var(--color-separator); color: var(--color-ink-950); border-radius: var(--border-radius-md); padding: 0.55rem 1rem; font-size: 0.85rem; } .form-control:focus, .form-select:focus { background: var(--material-thin-bg); border-color: var(--color-accent); color: var(--color-ink-950); box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2); } .table-custom { width: 100%; border-collapse: separate; border-spacing: 0 0.5rem; } .table-custom th { color: var(--color-ink-500); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.75rem 1rem; } .table-custom td { background: var(--material-thin-bg); color: var(--color-ink-900); padding: 1rem; font-size: 0.875rem; border-top: 1px solid var(--color-separator); border-bottom: 1px solid var(--color-separator); vertical-align: middle; } .table-custom tr td:first-child { border-left: 1px solid var(--color-separator); border-top-left-radius: var(--border-radius-md); border-bottom-left-radius: var(--border-radius-md); } .table-custom tr td:last-child { border-right: 1px solid var(--color-separator); border-top-right-radius: var(--border-radius-md); border-bottom-right-radius: var(--border-radius-md); } .table-custom tr:hover td { background: var(--material-thick-bg); } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-ink-300); border-radius: 9999px; } /* ========================================================================== Responsive Design & Mobile Adaptations (Desktop, Tablet, Mobile) ========================================================================== */ /* Mobile Backdrop Overlay for Off-Canvas Sidebar */ .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1040; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .sidebar-backdrop.show { opacity: 1; visibility: visible; } /* Large Screens & Tablets (< 992px) */ @media (max-width: 991.98px) { body { padding: 0.75rem; } .app-wrapper { flex-direction: column; gap: 1rem; min-height: calc(100vh - 1.5rem); } .app-sidebar-panel { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; min-width: 280px; z-index: 1050; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 0 var(--border-radius-xl) var(--border-radius-xl) 0; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); background: var(--glass-solid-bg); } .app-sidebar-panel.mobile-open { transform: translateX(0); } .top-header-panel { padding: 0.85rem 1rem; } .material { padding: 1.15rem; } } /* Tablets & Mobile Screens (< 768px) */ @media (max-width: 767.98px) { body { padding: 0.5rem; } .top-header-panel { border-radius: var(--border-radius-lg); } .top-header-title { font-size: 1.1rem; } .material { padding: 1rem; border-radius: var(--border-radius-lg); } .btn-group { flex-wrap: wrap; } .table-custom th, .table-custom td { padding: 0.65rem 0.75rem; font-size: 0.8rem; white-space: nowrap; } } /* Small Mobile Screens (< 576px) */ @media (max-width: 575.98px) { body { padding: 0.35rem; } .material { padding: 0.85rem; } .user-profile-badge { padding: 0.25rem; } .user-avatar-circle { width: 32px; height: 32px; font-size: 0.75rem; } .btn { padding: 0.4rem 0.85rem; font-size: 0.8rem; min-height: 38px; } .modal-dialog { margin: 0.5rem; max-width: calc(100vw - 1rem); } .modal-content { padding: 1rem !important; } } /* Universal Table Responsiveness */ .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 0.5rem; border-radius: var(--border-radius-md); }