angryzero/rust-rcon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: mystical purple primary + container-fluid full-width

Browse Source 
- Override Bootstrap 5.3 dark-theme --bs-primary to #8b5cf6 (violet)
- Update rcon.css accent, sidebar, and focus-ring to match purple
- Switch all containers from fixed-width to container-fluid

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
angryzero
2026-06-13 18:30:42 +02:00
co-authored by Copilot
parent f4e7dd5bb6
commit dc39322fa3
2 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+13 -3
View File
@@ -8,12 +8,22 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<link href="rcon.css" rel="stylesheet"> <link href="rcon.css" rel="stylesheet">
<style>
/* Mystical purple primary override for Bootstrap 5.3 */
[data-bs-theme="dark"] {
--bs-primary: #8b5cf6;
--bs-primary-rgb: 139, 92, 246;
--bs-primary-text-emphasis: #b794f4;
--bs-primary-bg-subtle: rgba(139, 92, 246, 0.15);
--bs-primary-border-subtle: rgba(139, 92, 246, 0.3);
}
</style>
</head> </head>
<body data-bs-theme="dark"> <body data-bs-theme="dark">
<!-- Server info header: single-line navbar, no hamburger --> <!-- Server info header: single-line navbar, no hamburger -->
<nav class="navbar navbar-dark bg-primary" id="server-header" style="display:none"> <nav class="navbar navbar-dark bg-primary" id="server-header" style="display:none">
<div class="container flex-nowrap"> <div class="container-fluid flex-nowrap">
<a class="navbar-brand me-3" href="#" id="header-hostname"></a> <a class="navbar-brand me-3" href="#" id="header-hostname"></a>
<span class="navbar-text me-2 small" title="Uptime" id="header-uptime"></span> <span class="navbar-text me-2 small" title="Uptime" id="header-uptime"></span>
<span class="navbar-text me-2 small" title="Map Name" id="header-map"></span> <span class="navbar-text me-2 small" title="Map Name" id="header-map"></span>
@@ -26,7 +36,7 @@
<!-- Main layout: hidden until connected --> <!-- Main layout: hidden until connected -->
<div id="app-connected" style="display:none"> <div id="app-connected" style="display:none">
<div class="container"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-md-2"> <div class="col-md-2">
<ul class="nav flex-column nav-sidebar" id="sidebar-nav"></ul> <ul class="nav flex-column nav-sidebar" id="sidebar-nav"></ul>
@@ -40,7 +50,7 @@
</div> </div>
<!-- Connect page: shown when not connected --> <!-- Connect page: shown when not connected -->
<div id="app-connect" class="container"></div> <div id="app-connect" class="container-fluid"></div>
<!-- Bootstrap 5 JS (vanilla, no jQuery needed) --> <!-- Bootstrap 5 JS (vanilla, no jQuery needed) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
rcon.css
+3 -3
View File
@@ -3,7 +3,7 @@
:root { :root {
--rcon-bg: #252830; --rcon-bg: #252830;
--rcon-text: #cfd2da; --rcon-text: #cfd2da;
--rcon-accent: #1ca8dd; --rcon-accent: #a78bfa;
--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: #428bca; background-color: #8b5cf6;
} }
/* 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(28, 168, 221, 0.25); box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
} }
/* Cards — override BS dark-theme bg to our darker shade */ /* Cards — override BS dark-theme bg to our darker shade */