style: deeper purple + remove redundant page title
- Darkened primary from #8b5cf6 to #6d28d9 (violet-700) to better complement the dark theme - Removed <h1> page title — the sidebar active highlight already tells you which tab you're on - Cleaned up related CSS and elTitle plumbing in app.js Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
+5
-6
@@ -11,11 +11,11 @@
|
|||||||
<style>
|
<style>
|
||||||
/* Mystical purple primary override for Bootstrap 5.3 */
|
/* Mystical purple primary override for Bootstrap 5.3 */
|
||||||
[data-bs-theme="dark"] {
|
[data-bs-theme="dark"] {
|
||||||
--bs-primary: #8b5cf6;
|
--bs-primary: #6d28d9;
|
||||||
--bs-primary-rgb: 139, 92, 246;
|
--bs-primary-rgb: 109, 40, 217;
|
||||||
--bs-primary-text-emphasis: #b794f4;
|
--bs-primary-text-emphasis: #a78bfa;
|
||||||
--bs-primary-bg-subtle: rgba(139, 92, 246, 0.15);
|
--bs-primary-bg-subtle: rgba(109, 40, 217, 0.15);
|
||||||
--bs-primary-border-subtle: rgba(139, 92, 246, 0.3);
|
--bs-primary-border-subtle: rgba(109, 40, 217, 0.3);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@@ -42,7 +42,6 @@
|
|||||||
<ul class="nav flex-column nav-sidebar" id="sidebar-nav"></ul>
|
<ul class="nav flex-column nav-sidebar" id="sidebar-nav"></ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-10">
|
<div class="col-md-10">
|
||||||
<h1 id="page-title"></h1>
|
|
||||||
<div id="app-view"></div>
|
<div id="app-view"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -8,7 +8,6 @@
|
|||||||
var elConnected = document.getElementById('app-connected');
|
var elConnected = document.getElementById('app-connected');
|
||||||
var elHeader = document.getElementById('server-header');
|
var elHeader = document.getElementById('server-header');
|
||||||
var elSidebar = document.getElementById('sidebar-nav');
|
var elSidebar = document.getElementById('sidebar-nav');
|
||||||
var elTitle = document.getElementById('page-title');
|
|
||||||
|
|
||||||
// ---- Sidebar navigation ----
|
// ---- Sidebar navigation ----
|
||||||
var navPages = [
|
var navPages = [
|
||||||
@@ -30,7 +29,6 @@
|
|||||||
|
|
||||||
function setActivePage(title) {
|
function setActivePage(title) {
|
||||||
window._currentPage = title;
|
window._currentPage = title;
|
||||||
elTitle.textContent = title;
|
|
||||||
if (Rcon.isConnected()) renderSidebar(Rcon.getAddress());
|
if (Rcon.isConnected()) renderSidebar(Rcon.getAddress());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
:root {
|
:root {
|
||||||
--rcon-bg: #252830;
|
--rcon-bg: #252830;
|
||||||
--rcon-text: #cfd2da;
|
--rcon-text: #cfd2da;
|
||||||
--rcon-accent: #a78bfa;
|
--rcon-accent: #8b5cf6;
|
||||||
--rcon-card-bg: #434857;
|
--rcon-card-bg: #434857;
|
||||||
/* Override BS5 dark theme body background */
|
/* Override BS5 dark theme body background */
|
||||||
--bs-body-bg: #252830;
|
--bs-body-bg: #252830;
|
||||||
@@ -41,7 +41,7 @@ a:hover { color: #fff; text-decoration: none; }
|
|||||||
.nav-sidebar .nav-link:hover,
|
.nav-sidebar .nav-link:hover,
|
||||||
.nav-sidebar .nav-link.active {
|
.nav-sidebar .nav-link.active {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #8b5cf6;
|
background-color: #6d28d9;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fade utility */
|
/* Fade utility */
|
||||||
@@ -78,7 +78,7 @@ a:hover { color: #fff; text-decoration: none; }
|
|||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-color: var(--rcon-accent);
|
border-color: var(--rcon-accent);
|
||||||
box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
|
box-shadow: 0 0 0 0.2rem rgba(109, 40, 217, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cards — override BS dark-theme bg to our darker shade */
|
/* Cards — override BS dark-theme bg to our darker shade */
|
||||||
@@ -111,13 +111,6 @@ a:hover { color: #fff; text-decoration: none; }
|
|||||||
color: rgba(255, 255, 255, 0.85);
|
color: rgba(255, 255, 255, 0.85);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Page title */
|
|
||||||
#page-title {
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Chart SVGs */
|
/* Chart SVGs */
|
||||||
#chart-performance,
|
#chart-performance,
|
||||||
#chart-network,
|
#chart-network,
|
||||||
|
|||||||
Reference in New Issue
Block a user