style: mystical dark palette — deeper bg + purple chart colors

- Body/card backgrounds tinted deep purple (#120918 / #1e1330)
  instead of sterile gray-blue
- Chart colors: fuchsia+cyan for performance, violet+amber for
  network, layered purples for the players donut

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
2026-06-13 18:34:20 +02:00
co-authored by Copilot
parent 7010562dae
commit 396d45fb4e
2 changed files with 7 additions and 5 deletions
+4 -2
View File
@@ -49,7 +49,7 @@ function ServerInfoPage(params, container) {
nv.addGraph(function () { nv.addGraph(function () {
var perfChart = nv.models.multiChart() var perfChart = nv.models.multiChart()
.margin({ top: 30, right: 75, bottom: 40, left: 75 }) .margin({ top: 30, right: 75, bottom: 40, left: 75 })
.color(['darkred', 'yellowgreen']); .color(['#e879f9', '#22d3ee']);
perfChart.yAxis1.axisLabel('Framerate').tickFormat(d3.format(',d')); perfChart.yAxis1.axisLabel('Framerate').tickFormat(d3.format(',d'));
perfChart.yAxis2.axisLabel('Entities').tickFormat(d3.format(',d')); perfChart.yAxis2.axisLabel('Entities').tickFormat(d3.format(',d'));
perfChart.xAxis.axisLabel('Time').tickFormat(function (d) { return d3.time.format('%H:%M:%S')(new Date(d)); }); perfChart.xAxis.axisLabel('Time').tickFormat(function (d) { return d3.time.format('%H:%M:%S')(new Date(d)); });
@@ -66,7 +66,8 @@ function ServerInfoPage(params, container) {
nv.addGraph(function () { nv.addGraph(function () {
var netChart = nv.models.stackedAreaChart() var netChart = nv.models.stackedAreaChart()
.margin({ top: 0, right: 75, bottom: 40, left: 75 }); .margin({ top: 0, right: 75, bottom: 40, left: 75 })
.color(['#c084fc', '#fbbf24']);
netChart.yAxis.axisLabel('Network').tickFormat(function (bytes) { netChart.yAxis.axisLabel('Network').tickFormat(function (bytes) {
var fmt = d3.format('.0f'); var fmt = d3.format('.0f');
if (bytes < 1024) return fmt(bytes) + 'B'; if (bytes < 1024) return fmt(bytes) + 'B';
@@ -92,6 +93,7 @@ function ServerInfoPage(params, container) {
.donut(true) .donut(true)
.duration(500) .duration(500)
.height(250) .height(250)
.color(['#a78bfa', '#7c3aed', '#e879f9', '#2d1f3d'])
.margin({ top: 0, right: 75, bottom: 0, left: 75 }); .margin({ top: 0, right: 75, bottom: 0, left: 75 });
playersChart.pie.startAngle(function (d) { return d.startAngle / 2 - Math.PI / 2; }); playersChart.pie.startAngle(function (d) { return d.startAngle / 2 - Math.PI / 2; });
playersChart.pie.endAngle(function (d) { return d.endAngle / 2 - Math.PI / 2; }); playersChart.pie.endAngle(function (d) { return d.endAngle / 2 - Math.PI / 2; });
+3 -3
View File
@@ -1,12 +1,12 @@
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700); @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
:root { :root {
--rcon-bg: #252830; --rcon-bg: #120918;
--rcon-text: #cfd2da; --rcon-text: #cfd2da;
--rcon-accent: #8b5cf6; --rcon-accent: #8b5cf6;
--rcon-card-bg: #434857; --rcon-card-bg: #1e1330;
/* Override BS5 dark theme body background */ /* Override BS5 dark theme body background */
--bs-body-bg: #252830; --bs-body-bg: #120918;
} }
body { body {