mirror of
https://github.com/smittix/intercept.git
synced 2026-04-25 07:10:00 -07:00
951 lines
20 KiB
CSS
951 lines
20 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: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: var(--z-sticky);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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-tertiary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 0 var(--space-4);
|
|
height: var(--nav-height);
|
|
gap: var(--space-1);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.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-card);
|
|
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-tertiary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: var(--space-2) var(--space-3);
|
|
overflow-x: auto;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.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: var(--bg-secondary);
|
|
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: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.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: var(--bg-secondary);
|
|
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
|
|
============================================ */
|
|
|
|
/* Mode Navigation Bar */
|
|
.mode-nav {
|
|
display: none;
|
|
background: #151a23 !important; /* Explicit color - forced to ensure consistency */
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 0 20px;
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
.mode-nav-divider {
|
|
width: 1px;
|
|
height: 24px;
|
|
background: var(--border-color);
|
|
margin: 0 12px;
|
|
}
|
|
|
|
.mode-nav-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 14px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.mode-nav-btn .nav-icon {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.mode-nav-btn .nav-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.mode-nav-btn .nav-label {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.mode-nav-btn:hover {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.mode-nav-btn.active {
|
|
background: var(--accent-cyan);
|
|
color: var(--bg-primary);
|
|
border-color: var(--accent-cyan);
|
|
}
|
|
|
|
.mode-nav-btn.active .nav-icon {
|
|
filter: brightness(0);
|
|
}
|
|
|
|
.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(--accent-cyan);
|
|
border-radius: 4px;
|
|
color: var(--accent-cyan);
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.nav-action-btn .nav-icon {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.nav-action-btn .nav-label {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.nav-action-btn:hover {
|
|
background: var(--accent-cyan);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
/* Dropdown Navigation */
|
|
.mode-nav-dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.mode-nav-dropdown-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 14px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.mode-nav-dropdown-btn:hover {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.mode-nav-dropdown-btn .nav-icon {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.mode-nav-dropdown-btn .nav-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.mode-nav-dropdown-btn .nav-label {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.mode-nav-dropdown-btn .dropdown-arrow {
|
|
font-size: 8px;
|
|
margin-left: 4px;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.mode-nav-dropdown-btn .dropdown-arrow svg {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
.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(--accent-cyan);
|
|
color: var(--bg-primary);
|
|
border-color: var(--accent-cyan);
|
|
}
|
|
|
|
.mode-nav-dropdown.has-active .mode-nav-dropdown-btn .nav-icon {
|
|
filter: brightness(0);
|
|
}
|
|
|
|
.mode-nav-dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
margin-top: 4px;
|
|
min-width: 180px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(-8px);
|
|
transition: all 0.15s ease;
|
|
z-index: 1000;
|
|
padding: 6px;
|
|
}
|
|
|
|
.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: 4px;
|
|
margin: 0;
|
|
}
|
|
|
|
.mode-nav-dropdown-menu .mode-nav-btn:hover {
|
|
background: var(--bg-elevated);
|
|
}
|
|
|
|
.mode-nav-dropdown-menu .mode-nav-btn.active {
|
|
background: var(--accent-cyan);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
/* 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: 4px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-tool-btn:hover {
|
|
background: var(--bg-elevated);
|
|
border-color: var(--border-color);
|
|
color: var(--accent-cyan);
|
|
}
|
|
|
|
.nav-tool-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.nav-tool-btn .icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* Theme toggle icon states in nav bar */
|
|
.nav-tool-btn .icon-sun,
|
|
.nav-tool-btn .icon-moon {
|
|
position: absolute;
|
|
transition: opacity 0.2s, transform 0.2s;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.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 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;
|
|
}
|