mirror of
https://github.com/smittix/intercept.git
synced 2026-04-25 07:10:00 -07:00
dc0850d339
.logo span { display: inline } in dashboard CSS had specificity (0,1,1),
overriding .brand-i { display: inline-block } at (0,1,0). Inline elements
ignore width/height, so the SVG rendered at intrinsic size (~80px tall).
Added .logo .brand-i selector at (0,2,0) to retain inline-block display.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1163 lines
26 KiB
CSS
1163 lines
26 KiB
CSS
/**
|
|
* INTERCEPT Layout Styles
|
|
* Global layout structure: header, navigation, sidebar, main content
|
|
* Requires: variables.css, base.css, components.css
|
|
*/
|
|
|
|
/* ============================================
|
|
APP SHELL
|
|
============================================ */
|
|
.app-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.app-main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ============================================
|
|
GLOBAL HEADER
|
|
============================================ */
|
|
.app-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: var(--header-height);
|
|
padding: 0 var(--space-4);
|
|
background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
|
|
border-bottom: 1px solid var(--border-color);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: var(--z-sticky);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.app-header::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.app-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.app-header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
/* Logo */
|
|
.app-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
text-decoration: none;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.app-logo-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.app-logo-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.app-logo-title {
|
|
font-size: var(--text-lg);
|
|
font-weight: var(--font-bold);
|
|
line-height: 1.2;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Branded "i" — inline SVG that matches the logo icon.
|
|
Sized to 0.9em so it sits naturally alongside text at any font-size.
|
|
Uses .logo .brand-i (0,2,0) to beat .logo span (0,1,1) in dashboard CSS
|
|
which otherwise forces display:inline and breaks width/height. */
|
|
.brand-i,
|
|
.logo .brand-i {
|
|
display: inline-block;
|
|
width: 0.55em;
|
|
height: 0.9em;
|
|
vertical-align: baseline;
|
|
position: relative;
|
|
top: 0.05em;
|
|
}
|
|
.brand-i svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.app-logo-tagline {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* Page title in header */
|
|
.app-header-title {
|
|
font-size: var(--text-lg);
|
|
font-weight: var(--font-semibold);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.app-header-subtitle {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
margin-left: var(--space-2);
|
|
}
|
|
|
|
/* Header utilities */
|
|
.header-utilities {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.header-clock {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.header-clock-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* ============================================
|
|
GLOBAL NAVIGATION
|
|
============================================ */
|
|
.app-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 0 var(--space-4);
|
|
height: var(--nav-height);
|
|
gap: var(--space-1);
|
|
overflow-x: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.app-nav::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.app-nav::-webkit-scrollbar {
|
|
height: 0;
|
|
}
|
|
|
|
/* Nav groups */
|
|
.nav-group {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
/* Dropdown trigger */
|
|
.nav-dropdown-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-3);
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--font-medium);
|
|
color: var(--text-secondary);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-dropdown-trigger:hover {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-dropdown-trigger.active {
|
|
background: var(--accent-cyan-dim);
|
|
color: var(--accent-cyan);
|
|
}
|
|
|
|
.nav-dropdown-arrow {
|
|
width: 12px;
|
|
height: 12px;
|
|
transition: transform var(--transition-fast);
|
|
}
|
|
|
|
.nav-group.open .nav-dropdown-arrow {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Dropdown menu */
|
|
.nav-dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
min-width: 180px;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-lg);
|
|
padding: var(--space-1);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(-4px);
|
|
transition: all var(--transition-fast);
|
|
z-index: var(--z-dropdown);
|
|
}
|
|
|
|
.nav-group.open .nav-dropdown-menu {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(4px);
|
|
}
|
|
|
|
/* Nav items */
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-3);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
border: none;
|
|
background: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: var(--accent-cyan-dim);
|
|
color: var(--accent-cyan);
|
|
}
|
|
|
|
.nav-item-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Nav divider */
|
|
.nav-divider {
|
|
width: 1px;
|
|
height: 24px;
|
|
background: var(--border-color);
|
|
margin: 0 var(--space-2);
|
|
}
|
|
|
|
/* Nav utilities (right side) */
|
|
.nav-utilities {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-left: auto;
|
|
padding-left: var(--space-4);
|
|
}
|
|
|
|
.nav-tool-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-tool-btn:hover {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* ============================================
|
|
MOBILE NAVIGATION
|
|
============================================ */
|
|
.mobile-nav {
|
|
display: none;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: var(--space-2) var(--space-3);
|
|
overflow-x: auto;
|
|
gap: var(--space-2);
|
|
position: relative;
|
|
}
|
|
|
|
.mobile-nav::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
|
|
opacity: 0.45;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mobile-nav::-webkit-scrollbar {
|
|
height: 0;
|
|
}
|
|
|
|
.mobile-nav-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
padding: var(--space-2) var(--space-3);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--font-medium);
|
|
color: var(--text-secondary);
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.mobile-nav-btn:hover,
|
|
.mobile-nav-btn.active {
|
|
background: var(--accent-cyan-dim);
|
|
border-color: var(--accent-cyan);
|
|
color: var(--accent-cyan);
|
|
}
|
|
|
|
/* Hamburger button */
|
|
.hamburger-btn {
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 6px;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hamburger-btn span {
|
|
display: block;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: var(--text-secondary);
|
|
border-radius: 1px;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.hamburger-btn.open span:nth-child(1) {
|
|
transform: rotate(45deg) translate(4px, 4px);
|
|
}
|
|
|
|
.hamburger-btn.open span:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.hamburger-btn.open span:nth-child(3) {
|
|
transform: rotate(-45deg) translate(4px, -4px);
|
|
}
|
|
|
|
/* ============================================
|
|
CONTENT LAYOUTS
|
|
============================================ */
|
|
|
|
/* Main content with optional sidebar */
|
|
.content-wrapper {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.app-sidebar {
|
|
width: var(--sidebar-width);
|
|
background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
|
|
border-right: 1px solid var(--border-color);
|
|
overflow-y: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar-section {
|
|
padding: var(--space-4);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.sidebar-section:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.sidebar-section-title {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--font-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
/* Main content area */
|
|
.app-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.app-content-full {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* ============================================
|
|
DASHBOARD LAYOUTS
|
|
============================================ */
|
|
|
|
/* Full-screen dashboard (maps, etc.) */
|
|
.dashboard-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboard-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-2) var(--space-4);
|
|
background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
|
|
border-bottom: 1px solid var(--border-color);
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.dashboard-header::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
|
|
opacity: 0.55;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dashboard-header-logo {
|
|
font-size: var(--text-lg);
|
|
font-weight: var(--font-bold);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-header-logo span {
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--font-normal);
|
|
color: var(--text-dim);
|
|
margin-left: var(--space-2);
|
|
}
|
|
|
|
.dashboard-main {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.dashboard-map {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.dashboard-sidebar {
|
|
width: 320px;
|
|
background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
|
|
border-left: 1px solid var(--border-color);
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3);
|
|
}
|
|
|
|
/* ============================================
|
|
PAGE LAYOUTS
|
|
============================================ */
|
|
.page-container {
|
|
max-width: var(--content-max-width);
|
|
margin: 0 auto;
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: var(--text-3xl);
|
|
font-weight: var(--font-bold);
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.page-description {
|
|
font-size: var(--text-base);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE BREAKPOINTS
|
|
============================================ */
|
|
@media (max-width: 1024px) {
|
|
.app-sidebar {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: var(--z-fixed);
|
|
transform: translateX(-100%);
|
|
transition: transform var(--transition-base);
|
|
}
|
|
|
|
.app-sidebar.open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.dashboard-sidebar {
|
|
width: 280px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.app-nav {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-nav {
|
|
display: flex;
|
|
}
|
|
|
|
.hamburger-btn {
|
|
display: flex;
|
|
}
|
|
|
|
.app-header {
|
|
padding: 0 var(--space-3);
|
|
}
|
|
|
|
.app-logo-text {
|
|
display: none;
|
|
}
|
|
|
|
.header-utilities {
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.page-container {
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.dashboard-sidebar {
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: var(--z-fixed);
|
|
transform: translateX(100%);
|
|
transition: transform var(--transition-base);
|
|
}
|
|
|
|
.dashboard-sidebar.open {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
OVERLAY (for mobile drawers)
|
|
============================================ */
|
|
.drawer-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: calc(var(--z-fixed) - 1);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.drawer-overlay.visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* ============================================
|
|
BACK LINK
|
|
============================================ */
|
|
.back-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.back-link:hover {
|
|
color: var(--accent-cyan);
|
|
}
|
|
|
|
/* ============================================
|
|
MODE NAVIGATION (from index.css)
|
|
Used by nav.html partial across all pages
|
|
============================================ */
|
|
|
|
/* NAVIGATION
|
|
Mode nav bar, dropdowns, utilities, theme/effects toggles
|
|
============================================ */
|
|
|
|
/* Mode Navigation Bar */
|
|
.mode-nav {
|
|
display: none;
|
|
background: linear-gradient(180deg, rgba(17, 22, 32, 0.92), rgba(15, 20, 28, 0.88));
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 0 20px;
|
|
position: relative;
|
|
z-index: var(--z-sticky);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.mode-nav::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.mode-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 44px;
|
|
}
|
|
}
|
|
|
|
.mode-nav-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.mode-nav-label {
|
|
font-size: 9px;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-right: 8px;
|
|
font-weight: 500;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.mode-nav-divider {
|
|
width: 1px;
|
|
height: 24px;
|
|
background: var(--border-color);
|
|
margin: 0 12px;
|
|
}
|
|
|
|
.mode-nav-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 14px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-lg);
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.mode-nav-btn .nav-label {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.mode-nav-btn:hover {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.mode-nav-btn.active {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
border-color: var(--accent-cyan);
|
|
box-shadow: inset 0 -2px 0 var(--accent-cyan);
|
|
}
|
|
|
|
.mode-nav-btn.active .nav-icon {
|
|
color: var(--accent-cyan);
|
|
}
|
|
|
|
.mode-nav-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.nav-action-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 14px;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-lg);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.nav-action-btn .nav-label {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.nav-action-btn:hover {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--accent-cyan);
|
|
}
|
|
|
|
/* Dropdown Navigation */
|
|
.mode-nav-dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.mode-nav-dropdown-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 14px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-lg);
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.mode-nav-dropdown-btn .nav-label {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.mode-nav-dropdown-btn .dropdown-arrow {
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-left: 4px;
|
|
transition: transform 0.2s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mode-nav-dropdown-btn .dropdown-arrow svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.mode-nav-dropdown-btn:hover {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.mode-nav-dropdown.open .mode-nav-dropdown-btn {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.mode-nav-dropdown.open .dropdown-arrow {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.mode-nav-dropdown.has-active .mode-nav-dropdown-btn {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
border-color: var(--accent-cyan);
|
|
box-shadow: inset 0 -2px 0 var(--accent-cyan);
|
|
}
|
|
|
|
.mode-nav-dropdown.has-active .mode-nav-dropdown-btn .nav-icon {
|
|
color: var(--accent-cyan);
|
|
}
|
|
|
|
.mode-nav-dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
margin-top: 4px;
|
|
min-width: 180px;
|
|
background: var(--surface-glass);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-lg);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(-8px);
|
|
transition: all var(--transition-fast);
|
|
z-index: var(--z-dropdown);
|
|
padding: 6px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.mode-nav-dropdown.open .mode-nav-dropdown-menu {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.mode-nav-dropdown-menu .mode-nav-btn {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.mode-nav-dropdown-menu .mode-nav-btn:hover {
|
|
background: var(--bg-elevated);
|
|
}
|
|
|
|
.mode-nav-dropdown-menu .mode-nav-btn.active {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
box-shadow: inset 0 -2px 0 var(--accent-cyan);
|
|
}
|
|
|
|
/* Focus-visible states for nav elements */
|
|
.mode-nav-btn:focus-visible,
|
|
.mode-nav-dropdown-btn:focus-visible,
|
|
.nav-action-btn:focus-visible,
|
|
.nav-tool-btn:focus-visible {
|
|
outline: 2px solid var(--accent-cyan);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Nav Bar Utilities (clock, theme, tools) */
|
|
.nav-utilities {
|
|
display: none;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.nav-utilities {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.nav-clock {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-clock .utc-label {
|
|
font-size: 9px;
|
|
color: var(--text-dim);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.nav-clock .utc-time {
|
|
color: var(--accent-cyan);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-divider {
|
|
width: 1px;
|
|
height: 20px;
|
|
background: var(--border-color);
|
|
}
|
|
|
|
.nav-tools {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-tool-btn {
|
|
width: 28px;
|
|
height: 28px;
|
|
min-width: 28px;
|
|
border-radius: var(--radius-lg);
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-tool-btn:hover {
|
|
background: var(--bg-tertiary);
|
|
border-color: var(--accent-cyan);
|
|
color: var(--accent-cyan);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* Nav tool button SVG sizing */
|
|
.nav-tool-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.nav-tool-btn .icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-tool-btn .icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
/* Theme toggle icon states */
|
|
.nav-tool-btn .icon-sun,
|
|
.nav-tool-btn .icon-moon {
|
|
position: absolute;
|
|
transition: opacity 0.2s, transform 0.2s;
|
|
}
|
|
|
|
.nav-tool-btn .icon-sun {
|
|
opacity: 0;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.nav-tool-btn .icon-moon {
|
|
opacity: 1;
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
[data-theme="light"] .nav-tool-btn .icon-sun {
|
|
opacity: 1;
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
[data-theme="light"] .nav-tool-btn .icon-moon {
|
|
opacity: 0;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* Effects/animations toggle icon states */
|
|
.nav-tool-btn .icon-effects-off {
|
|
display: none;
|
|
}
|
|
|
|
[data-animations="off"] .nav-tool-btn .icon-effects-on {
|
|
display: none;
|
|
}
|
|
|
|
[data-animations="off"] .nav-tool-btn .icon-effects-off {
|
|
display: flex;
|
|
}
|
|
|
|
/* Dashboard Button in Nav */
|
|
a.nav-dashboard-btn,
|
|
a.nav-dashboard-btn:link,
|
|
a.nav-dashboard-btn:visited {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 12px;
|
|
border-radius: var(--radius-lg);
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.nav-dashboard-btn:hover {
|
|
background: var(--bg-tertiary);
|
|
border-color: var(--accent-cyan);
|
|
color: var(--accent-cyan);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.nav-dashboard-btn .icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.nav-dashboard-btn .icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.nav-dashboard-btn .nav-label {
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* ---- Light theme nav overrides ---- */
|
|
[data-theme="light"] .mode-nav {
|
|
background: linear-gradient(180deg, rgba(240, 244, 250, 0.97) 0%, rgba(232, 238, 247, 0.95) 100%);
|
|
}
|
|
|
|
[data-theme="light"] .mode-nav-btn:hover {
|
|
background: rgba(220, 230, 244, 0.8);
|
|
}
|
|
|
|
[data-theme="light"] .mode-nav-btn.active {
|
|
background: rgba(220, 230, 244, 0.9);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="light"] .mode-nav-dropdown-btn:hover,
|
|
[data-theme="light"] .mode-nav-dropdown.open .mode-nav-dropdown-btn,
|
|
[data-theme="light"] .mode-nav-dropdown.has-active .mode-nav-dropdown-btn {
|
|
background: rgba(220, 230, 244, 0.9);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="light"] .mode-nav-dropdown-menu {
|
|
background: rgba(248, 250, 253, 0.99);
|
|
box-shadow: 0 16px 36px rgba(18, 40, 66, 0.15);
|
|
}
|
|
|
|
[data-theme="light"] .mode-nav-dropdown-menu .mode-nav-btn:hover {
|
|
background: rgba(220, 230, 244, 0.85);
|
|
}
|
|
|
|
[data-theme="light"] .mode-nav-dropdown-menu .mode-nav-btn.active {
|
|
background: rgba(220, 230, 244, 0.95);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
[data-theme="light"] .nav-tool-btn {
|
|
background: rgba(235, 241, 250, 0.7);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
[data-theme="light"] .nav-tool-btn:hover {
|
|
background: rgba(220, 230, 244, 0.9);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
[data-theme="light"] .nav-action-btn {
|
|
background: rgba(235, 241, 250, 0.85);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
[data-theme="light"] .nav-action-btn:hover {
|
|
background: rgba(220, 230, 244, 0.95);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
[data-theme="light"] a.nav-dashboard-btn,
|
|
[data-theme="light"] a.nav-dashboard-btn:link,
|
|
[data-theme="light"] a.nav-dashboard-btn:visited {
|
|
background: rgba(235, 241, 250, 0.7);
|
|
border-color: var(--border-color);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
[data-theme="light"] a.nav-dashboard-btn:hover {
|
|
background: rgba(220, 230, 244, 0.9);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|