mirror of
https://github.com/smittix/intercept.git
synced 2026-05-29 20:39:26 -07:00
Move time, theme, deps, and help to nav bar
Relocate header utilities (UTC clock, theme toggle, dependencies button, help button) to the navigation bar. Elements are grouped logically with the clock on its own and tool buttons together, all aligned to the far right of the nav bar. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
@@ -737,6 +737,112 @@ header h1 {
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Nav Bar Utilities (clock, theme, tools) */
|
||||
.nav-utilities {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.nav-utilities {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-clock {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.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: 4px;
|
||||
}
|
||||
|
||||
.nav-tool-btn {
|
||||
width: 28px;
|
||||
height: 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;
|
||||
}
|
||||
|
||||
.nav-tool-btn:hover {
|
||||
background: var(--bg-elevated);
|
||||
border-color: var(--border-color);
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* Deps button status colors */
|
||||
#depsBtn.all-ok {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
#depsBtn.has-missing {
|
||||
color: var(--accent-orange);
|
||||
}
|
||||
|
||||
.version-badge {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 500;
|
||||
@@ -860,43 +966,6 @@ header h1 .tagline {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* UTC Clock in header */
|
||||
.header-clock {
|
||||
position: static;
|
||||
transform: none;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.header-clock {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
transform: translateY(-50%);
|
||||
font-size: 12px;
|
||||
gap: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header-clock .utc-time {
|
||||
color: var(--accent-cyan);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-clock .utc-label {
|
||||
font-size: 9px;
|
||||
color: var(--text-dim);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Active mode indicator */
|
||||
.active-mode-indicator {
|
||||
display: inline-flex;
|
||||
@@ -921,89 +990,6 @@ header h1 .tagline {
|
||||
animation: pulse-glow 2s infinite;
|
||||
}
|
||||
|
||||
.help-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 20px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.help-btn:hover {
|
||||
border-color: var(--accent-cyan);
|
||||
color: var(--accent-cyan);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
#depsBtn {
|
||||
right: 60px;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 100px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
border-color: var(--accent-cyan);
|
||||
color: var(--accent-cyan);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.theme-toggle .icon-sun,
|
||||
.theme-toggle .icon-moon {
|
||||
position: absolute;
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.theme-toggle .icon-sun {
|
||||
opacity: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.theme-toggle .icon-moon {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-toggle .icon-sun {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-toggle .icon-moon {
|
||||
opacity: 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.help-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
|
||||
@@ -198,17 +198,6 @@
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<!-- UTC Clock -->
|
||||
<div class="header-clock hide-mobile">
|
||||
<span class="utc-label">UTC</span>
|
||||
<span class="utc-time" id="headerUtcTime">--:--:--</span>
|
||||
</div>
|
||||
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle Light/Dark Theme">
|
||||
<span class="icon-moon">🌙</span>
|
||||
<span class="icon-sun">☀️</span>
|
||||
</button>
|
||||
<button class="help-btn" onclick="showDependencies()" title="Check Tool Dependencies" id="depsBtn" style="margin-right: 5px;">🔧</button>
|
||||
<button class="help-btn" onclick="showHelp()" title="Help & Documentation">?</button>
|
||||
<div class="logo">
|
||||
<svg width="50" height="50" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Signal brackets - left side -->
|
||||
@@ -392,6 +381,21 @@
|
||||
<span class="nav-icon">🖥️</span><span class="nav-label">Full Dashboard</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav-utilities">
|
||||
<div class="nav-clock">
|
||||
<span class="utc-label">UTC</span>
|
||||
<span class="utc-time" id="headerUtcTime">--:--:--</span>
|
||||
</div>
|
||||
<div class="nav-divider"></div>
|
||||
<div class="nav-tools">
|
||||
<button class="nav-tool-btn" onclick="toggleTheme()" title="Toggle Light/Dark Theme">
|
||||
<span class="icon-moon">🌙</span>
|
||||
<span class="icon-sun">☀️</span>
|
||||
</button>
|
||||
<button class="nav-tool-btn" onclick="showDependencies()" title="Check Tool Dependencies" id="depsBtn">🔧</button>
|
||||
<button class="nav-tool-btn" onclick="showHelp()" title="Help & Documentation">?</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Navigation Bar (simplified mode switching) -->
|
||||
|
||||
Reference in New Issue
Block a user