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 {
background-color: black;
background-color: transparent;
border: 1px solid black;
width: calc(100% - 0.188rem);
height: 100%;
@ -200,22 +200,31 @@
z-index: 10;
}
.status-bar.Online {
background-color: black;
}
.status-bar.Unknown {
background-color: transparent;
background: radial-gradient(circle at center, rgb(235, 235, 235) 3px, transparent 3px);
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 {
background-color: white;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
background-size: 8px 8px;
}
.status-bar.Offline {
background-color: white;
}
.status-bar.Offline::before {
content: "✕";
position: absolute;
@ -449,8 +458,8 @@
<div class="combobox" style="position: absolute; right: 2rem; top: 2rem">
<button class="combobox-trigger">
<span
>{{ if eq .Theme "colored-dark" }} colored dark {{ else if eq .Theme "ctp-latte" }} ctp latte {{ else if eq .Theme "ctp-frappe" }} ctp
frappé {{ else if eq .Theme "ctp-macchiato" }} ctp macchiato {{ else if eq .Theme "ctp-mocha" }} ctp mocha {{ else }} {{ .Theme }} {{ end
>{{ if eq .Theme "color-dark" }} color dark {{ else if eq .Theme "ctp-latte" }} ctp latte {{ else if eq .Theme "ctp-frappe" }} ctp frappé
{{ else if eq .Theme "ctp-macchiato" }} ctp macchiato {{ else if eq .Theme "ctp-mocha" }} ctp mocha {{ else }} {{ .Theme }} {{ end
}}</span
>
<!-- 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=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=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-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 }}'

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

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

4
www/themes/color.css
View file

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

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

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

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

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

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

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

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

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

15
www/themes/monochrome.css
View file

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