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:
@@ -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; });
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user