trafficlunar/statsys
1
0
Fork 0
mirror of https://github.com/trafficlunar/statsys.git synced 2026-03-28 11:13:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: improve unknown status indicator

Browse source
This commit is contained in:
trafficlunar 2025-12-15 17:13:05 +00:00
parent b6cf11f680
commit 76c7823583
8 changed files with 39 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
www/index.html
View file

@ -163,7 +163,7 @@
} }
.status-bar { .status-bar {
background-color: black; background-color: transparent;
border: 1px solid black; border: 1px solid black;
width: calc(100% - 0.188rem); width: calc(100% - 0.188rem);
height: 100%; height: 100%;
@ -200,22 +200,31 @@
z-index: 10; z-index: 10;
} }
.status-bar.Online {
background-color: black;
}
.status-bar.Unknown { .status-bar.Unknown {
background-color: transparent;
background: radial-gradient(circle at center, rgb(235, 235, 235) 3px, transparent 3px);
border: 0; border: 0;
} }
.status-bar.Unknown::before {
content: "";
width: 6px;
height: 6px;
border-radius: 100%;
background: rgb(235, 235, 235);
position: absolute;
inset: 0;
margin: auto;
}
.status-bar.Degraded { .status-bar.Degraded {
background-color: white; background-color: white;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
background-size: 8px 8px; background-size: 8px 8px;
} }
.status-bar.Offline {
background-color: white;
}
.status-bar.Offline::before { .status-bar.Offline::before {
content: "✕"; content: "✕";
position: absolute; position: absolute;
@ -449,8 +458,8 @@
<div class="combobox" style="position: absolute; right: 2rem; top: 2rem"> <div class="combobox" style="position: absolute; right: 2rem; top: 2rem">
<button class="combobox-trigger"> <button class="combobox-trigger">
<span <span
>{{ if eq .Theme "colored-dark" }} colored dark {{ else if eq .Theme "ctp-latte" }} ctp latte {{ else if eq .Theme "ctp-frappe" }} ctp >{{ if eq .Theme "color-dark" }} color dark {{ else if eq .Theme "ctp-latte" }} ctp latte {{ else if eq .Theme "ctp-frappe" }} ctp frappé
frappé {{ else if eq .Theme "ctp-macchiato" }} ctp macchiato {{ else if eq .Theme "ctp-mocha" }} ctp mocha {{ else }} {{ .Theme }} {{ end {{ else if eq .Theme "ctp-macchiato" }} ctp macchiato {{ else if eq .Theme "ctp-mocha" }} ctp mocha {{ else }} {{ .Theme }} {{ end
}}</span }}</span
> >
<!-- arrow icon --> <!-- arrow icon -->
@ -465,7 +474,7 @@
<a href="/?theme=monochrome&view={{ .View }}" class='combobox-option {{ if eq .Theme "monochrome" }}selected{{ end }}'>monochrome</a> <a href="/?theme=monochrome&view={{ .View }}" class='combobox-option {{ if eq .Theme "monochrome" }}selected{{ end }}'>monochrome</a>
<a href="/?theme=inverted&view={{ .View }}" class='combobox-option {{ if eq .Theme "inverted" }}selected{{ end }}'>inverted</a> <a href="/?theme=inverted&view={{ .View }}" class='combobox-option {{ if eq .Theme "inverted" }}selected{{ end }}'>inverted</a>
<a href="/?theme=color&view={{ .View }}" class='combobox-option {{ if eq .Theme "color" }}selected{{ end }}'>color</a> <a href="/?theme=color&view={{ .View }}" class='combobox-option {{ if eq .Theme "color" }}selected{{ end }}'>color</a>
<a href="/?theme=colored-dark&view={{ .View }}" class='combobox-option {{ if eq .Theme "colored-dark" }}selected{{ end }}'>colored dark</a> <a href="/?theme=color-dark&view={{ .View }}" class='combobox-option {{ if eq .Theme "color-dark" }}selected{{ end }}'>color dark</a>
<a href="/?theme=ctp-latte&view={{ .View }}" class='combobox-option {{ if eq .Theme "ctp-latte" }}selected{{ end }}'>ctp latte</a> <a href="/?theme=ctp-latte&view={{ .View }}" class='combobox-option {{ if eq .Theme "ctp-latte" }}selected{{ end }}'>ctp latte</a>
<a href="/?theme=ctp-frappe&view={{ .View }}" class='combobox-option {{ if eq .Theme "ctp-frappe" }}selected{{ end }}'>ctp frappé</a> <a href="/?theme=ctp-frappe&view={{ .View }}" class='combobox-option {{ if eq .Theme "ctp-frappe" }}selected{{ end }}'>ctp frappé</a>
<a href="/?theme=ctp-macchiato&view={{ .View }}" class='combobox-option {{ if eq .Theme "ctp-macchiato" }}selected{{ end }}' <a href="/?theme=ctp-macchiato&view={{ .View }}" class='combobox-option {{ if eq .Theme "ctp-macchiato" }}selected{{ end }}'

4
www/themes/color-dark.css
View file

@ -60,8 +60,8 @@ hr {
border-color: #059669; border-color: #059669;
} }
.status-bar.Unknown { .status-bar.Unknown::before {
background: radial-gradient(circle at center, #475569 3px, transparent 3px); background-color: #475569;
} }
.status-bar.Degraded { .status-bar.Degraded {

4
www/themes/color.css
View file

@ -85,8 +85,8 @@ hr {
color: white; color: white;
} }
.status-bar.Unknown { .status-bar.Unknown::before {
background: radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 3px, transparent 3px); background-color: rgba(0, 0, 0, 0.1);
} }
.bars-footer { .bars-footer {

4
www/themes/ctp-frappe.css
View file

@ -64,8 +64,8 @@ hr {
background-color: #81c563; background-color: #81c563;
} }
.status-bar.Unknown { .status-bar.Unknown::before {
background: radial-gradient(circle at center, #414559 3px, transparent 3px); /* Surface0 */ background-color: #414559; /* Surface0 */
} }
.status-bar.Degraded { .status-bar.Degraded {

4
www/themes/ctp-latte.css
View file

@ -64,8 +64,8 @@ hr {
background-color: #357a22; background-color: #357a22;
} }
.status-bar.Unknown { .status-bar.Unknown::before {
background: radial-gradient(circle at center, #ccd0da 3px, transparent 3px); /* Surface0 */ background-color: #ccd0da; /* Surface0 */
} }
.status-bar.Degraded { .status-bar.Degraded {

4
www/themes/ctp-macchiato.css
View file

@ -64,8 +64,8 @@ hr {
background-color: #8bd074; background-color: #8bd074;
} }
.status-bar.Unknown { .status-bar.Unknown::before {
background: radial-gradient(circle at center, #363a4f 3px, transparent 3px); /* Surface0 */ background-color: #363a4f; /* Surface0 */
} }
.status-bar.Degraded { .status-bar.Degraded {

4
www/themes/ctp-mocha.css
View file

@ -64,8 +64,8 @@ hr {
background-color: #8ad882; background-color: #8ad882;
} }
.status-bar.Unknown { .status-bar.Unknown::before {
background: radial-gradient(circle at center, #313244 3px, transparent 3px); /* Surface0 */ background-color: #313244; /* Surface0 */
} }
.status-bar.Degraded { .status-bar.Degraded {

15
www/themes/monochrome.css
View file

@ -43,7 +43,6 @@ hr {
} }
.status-bar { .status-bar {
background-color: black;
border: 1px solid black; border: 1px solid black;
} }
@ -57,15 +56,17 @@ hr {
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
} }
.status-bar.Unknown { .status-bar.Online {
background-color: transparent; background-color: black;
background: radial-gradient(circle at center, rgb(235, 235, 235) 3px, transparent 3px); }
.status-bar.Unknown::before {
background-color: rgb(235, 235, 235);
} }
.status-bar.Degraded { .status-bar.Degraded {
background-image: linear-gradient(to bottom, transparent 30%, white 30%), linear-gradient(to right, transparent 40%, white 40%); background-color: white;
background-size: 6px 7px; background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
background-position: 3px 4px;
} }
.status-bar.Offline { .status-bar.Offline {