mirror of
https://github.com/trafficlunar/statsys.git
synced 2026-03-28 11:13:17 +00:00
feat: themes
This commit is contained in:
parent
b36ac9523c
commit
0942761cd8
14 changed files with 1133 additions and 50 deletions
|
|
@ -1,5 +1,6 @@
|
|||
# TBA - monochrome status page
|
||||
<h1 align="center">statsys</h1>
|
||||
|
||||
TODO: thumbnail
|
||||
|
||||
<p style="text-align: center">The cutest lightweight monochrome status page</p>
|
||||
<p align="center">The cutest lightweight status page</p>
|
||||
<h4 align="center"><a href="https://status.trafficlunar.net">view demo</a> | <a href="#install">install</a></h4>
|
||||
|
|
|
|||
16
config.toml
16
config.toml
|
|
@ -9,16 +9,24 @@ link_url = "https://trafficlunar.net"
|
|||
# Users can still switch views manually
|
||||
#
|
||||
# Available options:
|
||||
# 'minutes' - past 30 minutes
|
||||
# 'hours' - past 24 hours
|
||||
# 'days' - past 30 days
|
||||
# "minutes" - past 30 minutes
|
||||
# "hours" - past 24 hours
|
||||
# "days" - past 30 days
|
||||
default_view = "hours"
|
||||
|
||||
# Default theme for the status page
|
||||
# Available themes: https://github.com/trafficlunar/statsys/tree/main/www/themes
|
||||
# Defaults to "monochrome"
|
||||
default_theme = "color"
|
||||
# Set to true to allow users to switch the theme
|
||||
# Defaults to true
|
||||
enable_theme_switcher = true
|
||||
|
||||
# List of services to monitor
|
||||
[[services]]
|
||||
name = "website"
|
||||
url = "http://localhost:9999/up"
|
||||
# Response time (in milliseconds) after which the service is considered "Degraded"
|
||||
# Response time (milliseconds) after which the service is marked as "Degraded"
|
||||
# Defaults to 1000ms
|
||||
latency_threshold = 1000
|
||||
|
||||
|
|
|
|||
|
|
@ -14,11 +14,13 @@ type ServiceConfig struct {
|
|||
}
|
||||
|
||||
type Config struct {
|
||||
Title string `toml:"title"`
|
||||
LinkText string `toml:"link_text"`
|
||||
LinkUrl string `toml:"link_url"`
|
||||
DefaultView string `toml:"default_view"`
|
||||
Services []ServiceConfig `toml:"services"`
|
||||
Title string `toml:"title"`
|
||||
LinkText string `toml:"link_text"`
|
||||
LinkUrl string `toml:"link_url"`
|
||||
DefaultView string `toml:"default_view"`
|
||||
DefaultTheme string `toml:"default_theme"`
|
||||
EnableThemeSwitcher bool `toml:"enable_theme_switcher"`
|
||||
Services []ServiceConfig `toml:"services"`
|
||||
}
|
||||
|
||||
var config Config
|
||||
|
|
@ -36,6 +38,7 @@ func LoadConfig() {
|
|||
templateData.Title = config.Title
|
||||
templateData.LinkText = config.LinkText
|
||||
templateData.LinkUrl = config.LinkUrl
|
||||
templateData.EnableThemeSwitcher = config.EnableThemeSwitcher
|
||||
templateData.Services = make([]Service, len(config.Services))
|
||||
for index, ser := range config.Services {
|
||||
// default to 1000ms
|
||||
|
|
|
|||
25
src/http.go
25
src/http.go
|
|
@ -39,13 +39,15 @@ type Service struct {
|
|||
}
|
||||
|
||||
type TemplateData struct {
|
||||
Title string
|
||||
View string
|
||||
LinkText string
|
||||
LinkUrl string
|
||||
LastUpdated int64
|
||||
IsOperational bool
|
||||
Services []Service
|
||||
Title string
|
||||
View string
|
||||
Theme string
|
||||
LinkText string
|
||||
LinkUrl string
|
||||
EnableThemeSwitcher bool
|
||||
LastUpdated int64
|
||||
IsOperational bool
|
||||
Services []Service
|
||||
}
|
||||
|
||||
type ErrorTemplateData struct {
|
||||
|
|
@ -58,7 +60,8 @@ func ToUpper(s string) string {
|
|||
}
|
||||
|
||||
var templateData = TemplateData{
|
||||
LastUpdated: time.Now().UTC().UnixMilli(),
|
||||
EnableThemeSwitcher: true,
|
||||
LastUpdated: time.Now().UTC().UnixMilli(),
|
||||
}
|
||||
var tmpl *template.Template
|
||||
var errorTmpl *template.Template
|
||||
|
|
@ -85,6 +88,7 @@ func index(w http.ResponseWriter, req *http.Request) {
|
|||
|
||||
data := templateData
|
||||
data.View = req.URL.Query().Get("view")
|
||||
data.Theme = req.URL.Query().Get("theme")
|
||||
|
||||
switch data.View {
|
||||
case "hours", "minutes", "days":
|
||||
|
|
@ -96,6 +100,10 @@ func index(w http.ResponseWriter, req *http.Request) {
|
|||
return
|
||||
}
|
||||
|
||||
if data.Theme == "" {
|
||||
data.Theme = config.DefaultTheme
|
||||
}
|
||||
|
||||
if err := tmpl.ExecuteTemplate(w, "index.html", data); err != nil {
|
||||
log.Printf("template execute error: %v", err)
|
||||
renderError(w, http.StatusInternalServerError, "Internal server error")
|
||||
|
|
@ -139,6 +147,7 @@ func StartHttpServer() {
|
|||
mux.HandleFunc("/styles.css", styles)
|
||||
mux.HandleFunc("/favicon.ico", favicon)
|
||||
mux.HandleFunc("/robots.txt", robots)
|
||||
mux.Handle("/themes/", gzhttp.GzipHandler(http.StripPrefix("/themes/", http.FileServer(http.Dir("www/themes/")))))
|
||||
mux.Handle("/fonts/", http.StripPrefix("/fonts/", http.FileServer(http.Dir("www/fonts/"))))
|
||||
|
||||
// wrap with gzip middleware
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
|
@ -103,7 +104,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.5rem;
|
||||
margin-bottom: 4rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
|
|
@ -150,7 +151,6 @@
|
|||
display: flex;
|
||||
justify-content: end;
|
||||
width: 100%;
|
||||
/* gap: 0.185rem; */
|
||||
}
|
||||
|
||||
.bars > div {
|
||||
|
|
@ -169,14 +169,12 @@
|
|||
transition: transform 100ms ease-in-out;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.bars > div:hover .status-bar {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.bars > div:hover .status-bar.Online {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.bars > div:hover .status-bar::after {
|
||||
|
|
@ -208,9 +206,9 @@
|
|||
}
|
||||
|
||||
.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);
|
||||
background-size: 8px 8px;
|
||||
}
|
||||
|
||||
.status-bar.Offline {
|
||||
|
|
@ -276,12 +274,12 @@
|
|||
color: black;
|
||||
}
|
||||
|
||||
#combobox {
|
||||
.combobox {
|
||||
position: relative;
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
#combobox-trigger {
|
||||
.combobox-trigger {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -302,24 +300,23 @@
|
|||
transition: background-color 100ms ease;
|
||||
}
|
||||
|
||||
#combobox-trigger:hover {
|
||||
.combobox-trigger:hover {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
#combobox-trigger div {
|
||||
.combobox-trigger div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#combobox-trigger.open div svg {
|
||||
.combobox-trigger.open div svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#combobox-dropdown {
|
||||
.combobox-dropdown {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 0.25rem);
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
|
|
@ -327,9 +324,10 @@
|
|||
flex-direction: column;
|
||||
z-index: 100;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#combobox-dropdown.open {
|
||||
.combobox-dropdown.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
|
@ -338,6 +336,7 @@
|
|||
cursor: pointer;
|
||||
color: black;
|
||||
font-size: 0.825rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.combobox-option.selected {
|
||||
|
|
@ -435,6 +434,8 @@
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="/themes/{{ .Theme }}.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
|
@ -443,6 +444,37 @@
|
|||
</div>
|
||||
<h1>status — {{ .Title }}</h1>
|
||||
|
||||
{{ if .EnableThemeSwitcher }}
|
||||
<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
|
||||
}}</span
|
||||
>
|
||||
<!-- arrow icon -->
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
|
||||
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m7 10l5 5m0 0l5-5" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="combobox-dropdown" style="top: calc(100% + 0.25rem)">
|
||||
<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=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 }}'
|
||||
>ctp macchiato</a
|
||||
>
|
||||
<a href="/?theme=ctp-mocha&view={{ .View }}" class='combobox-option {{ if eq .Theme "ctp-mocha" }}selected{{ end }}'>ctp mocha</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div style="display: flex">
|
||||
<div id="overall-status">
|
||||
<span style="font-weight: 500; margin-right: 0.15rem">{{ if .IsOperational }} ✔ {{ else }} ✖ {{ end }}</span>
|
||||
|
|
@ -465,7 +497,7 @@
|
|||
<span>Degraded</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="status-bar"></div>
|
||||
<div class="status-bar Online"></div>
|
||||
<span>Online</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -555,8 +587,8 @@
|
|||
</div>
|
||||
|
||||
<footer>
|
||||
<div id="combobox">
|
||||
<button id="combobox-trigger">
|
||||
<div class="combobox">
|
||||
<button class="combobox-trigger">
|
||||
<span>{{ if eq .View "minutes" }} 30 minutes {{ else if eq .View "hours" }} 24 hours {{ else }} 30 days {{ end }}</span>
|
||||
<!-- arrow icon -->
|
||||
<div>
|
||||
|
|
@ -566,10 +598,10 @@
|
|||
</div>
|
||||
</button>
|
||||
|
||||
<div id="combobox-dropdown">
|
||||
<a href="/?view=minutes" class='combobox-option {{ if eq .View "minutes" }}selected{{ end }}' data-value="minutes">30 minutes</a>
|
||||
<a href="/?view=hours" class='combobox-option {{ if eq .View "hours" }}selected{{ end }}' data-value="hours">24 hours</a>
|
||||
<a href="/?view=days" class='combobox-option {{ if eq .View "days" }}selected{{ end }}' data-value="days">30 days</a>
|
||||
<div class="combobox-dropdown" style="bottom: calc(100% + 0.25rem)">
|
||||
<a href="/?view=minutes&theme={{ .Theme }}" class='combobox-option {{ if eq .View "minutes" }}selected{{ end }}'>30 minutes</a>
|
||||
<a href="/?view=hours&theme={{ .Theme }}" class='combobox-option {{ if eq .View "hours" }}selected{{ end }}'>24 hours</a>
|
||||
<a href="/?view=days&theme={{ .Theme }}" class='combobox-option {{ if eq .View "days" }}selected{{ end }}'>30 days</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -601,12 +633,16 @@
|
|||
setInterval(update, 60000);
|
||||
|
||||
// combobox
|
||||
const trigger = document.querySelector("#combobox-trigger");
|
||||
const dropdown = document.querySelector("#combobox-dropdown");
|
||||
const triggers = document.querySelectorAll(".combobox-trigger");
|
||||
|
||||
trigger.addEventListener("click", (e) => {
|
||||
trigger.classList.toggle("open");
|
||||
dropdown.classList.toggle("open");
|
||||
triggers.forEach((trigger) => {
|
||||
trigger.addEventListener("click", () => {
|
||||
const parent = trigger.parentElement;
|
||||
const dropdown = parent.querySelector(".combobox-dropdown");
|
||||
|
||||
trigger.classList.toggle("open");
|
||||
dropdown.classList.toggle("open");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
}
|
||||
|
||||
body {
|
||||
background-color: #fcfcfc;
|
||||
background-color: #fafafa;
|
||||
font-family: "Inter", sans-serif;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
|
|
@ -74,7 +74,7 @@ body::before {
|
|||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
|
||||
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
background-position: center;
|
||||
pointer-events: none;
|
||||
|
|
|
|||
146
www/themes/color-dark.css
Normal file
146
www/themes/color-dark.css
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
/* Colored Dark Mode Theme */
|
||||
body {
|
||||
background-color: #0a0f1a;
|
||||
color: #e0e7ff;
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
body::before {
|
||||
background-image: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: #111827;
|
||||
outline: 1px solid rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 2px dotted rgba(224, 231, 255, 0.2);
|
||||
}
|
||||
|
||||
#emoticon {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
#overall-status {
|
||||
background-color: #1e40af;
|
||||
color: #e0e7ff;
|
||||
}
|
||||
|
||||
#pattern {
|
||||
background-image: repeating-linear-gradient(-45deg, #1e40af, #1e40af 10px, transparent 0px, transparent 20px);
|
||||
}
|
||||
|
||||
#last-updated {
|
||||
color: rgba(224, 231, 255, 0.7);
|
||||
}
|
||||
|
||||
.service-name {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.service-name svg {
|
||||
color: rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.service-name:hover svg {
|
||||
color: rgba(96, 165, 250, 0.9);
|
||||
}
|
||||
|
||||
/* Tooltip */
|
||||
.bars > div:hover .status-bar::after {
|
||||
background-color: #1e293b;
|
||||
color: #f1f5f9;
|
||||
border: 1px solid rgba(38, 89, 172, 0.2);
|
||||
}
|
||||
|
||||
.status-bar.Online {
|
||||
background-color: #10b981;
|
||||
border-color: #059669;
|
||||
}
|
||||
|
||||
.status-bar.Unknown {
|
||||
background: radial-gradient(circle at center, #475569 3px, transparent 3px);
|
||||
}
|
||||
|
||||
.status-bar.Degraded {
|
||||
background-color: #f59e0b;
|
||||
border-color: #d97706;
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(0, 0, 0, 0.2) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(0, 0, 0, 0.2) 50%,
|
||||
rgba(0, 0, 0, 0.2) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-size: 8px 8px;
|
||||
}
|
||||
|
||||
.status-bar.Offline {
|
||||
background-color: #dc2626;
|
||||
border-color: #b91c1c;
|
||||
}
|
||||
|
||||
.status-bar.Offline::before {
|
||||
color: #fef2f2;
|
||||
}
|
||||
|
||||
.bars-footer {
|
||||
color: rgba(224, 231, 255, 0.6);
|
||||
}
|
||||
|
||||
.bars-footer hr {
|
||||
border-color: rgba(224, 231, 255, 0.15);
|
||||
}
|
||||
|
||||
.uptime-percentage {
|
||||
background-color: #111827;
|
||||
color: rgba(96, 165, 250, 0.8);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
/* Combobox */
|
||||
.combobox-trigger {
|
||||
color: #e0e7ff;
|
||||
background-color: #1e293b;
|
||||
border: 1px solid rgba(71, 85, 105, 0.6);
|
||||
}
|
||||
|
||||
.combobox-trigger:hover {
|
||||
background-color: #334155;
|
||||
border-color: rgba(96, 165, 250, 0.5);
|
||||
}
|
||||
|
||||
.combobox-trigger div {
|
||||
border-left: 1px solid rgba(71, 85, 105, 0.6);
|
||||
}
|
||||
|
||||
.combobox-dropdown {
|
||||
background-color: #1e293b;
|
||||
border: 1px solid rgba(59, 130, 246, 0.4);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.combobox-option {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.combobox-option.selected {
|
||||
background-color: rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
.combobox-option:hover {
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
}
|
||||
142
www/themes/color.css
Normal file
142
www/themes/color.css
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
/* Colored Theme */
|
||||
|
||||
body {
|
||||
background-color: rgba(37, 99, 235, 0.04);
|
||||
}
|
||||
|
||||
body::before {
|
||||
background-image: linear-gradient(90deg, rgba(37, 99, 235, 0.1) 1px, transparent 1px), linear-gradient(rgba(37, 99, 235, 0.1) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: #f8fafc;
|
||||
outline: 1px solid rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 2px dotted rgba(15, 23, 42, 0.15);
|
||||
}
|
||||
|
||||
#emoticon {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
#overall-status {
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#pattern {
|
||||
background-image: repeating-linear-gradient(-45deg, #2563eb, #2563eb 10px, transparent 0px, transparent 20px);
|
||||
}
|
||||
|
||||
#last-updated {
|
||||
color: rgba(15, 23, 42, 0.6);
|
||||
}
|
||||
|
||||
.service-name {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.service-name svg {
|
||||
color: rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
.service-name:hover svg {
|
||||
color: rgba(37, 99, 235, 0.9);
|
||||
}
|
||||
|
||||
.bars > div:hover .status-bar::after {
|
||||
background-color: #0f172a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-bar.Online {
|
||||
background-color: #22c55e;
|
||||
border-color: #16a34a;
|
||||
}
|
||||
|
||||
.bars > div:hover .status-bar.Online {
|
||||
background-color: #16a34a;
|
||||
}
|
||||
|
||||
.status-bar.Degraded {
|
||||
background-color: #facc15;
|
||||
border-color: #eab308;
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.4) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.4) 50%,
|
||||
rgba(255, 255, 255, 0.4) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-size: 8px 8px;
|
||||
}
|
||||
|
||||
.status-bar.Offline {
|
||||
background-color: #ef4444;
|
||||
border-color: #dc2626;
|
||||
}
|
||||
|
||||
.status-bar.Offline::before {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-bar.Unknown {
|
||||
background: radial-gradient(circle at center, #94a3b8 3px, transparent 3px);
|
||||
}
|
||||
|
||||
.bars-footer {
|
||||
color: rgba(15, 23, 42, 0.45);
|
||||
}
|
||||
|
||||
.bars-footer hr {
|
||||
border-color: rgba(15, 23, 42, 0.15);
|
||||
}
|
||||
|
||||
.uptime-percentage {
|
||||
background-color: #f8fafc;
|
||||
color: rgba(37, 99, 235, 0.75);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.combobox-trigger {
|
||||
background-color: white;
|
||||
border: 1px solid rgba(15, 23, 42, 0.4);
|
||||
}
|
||||
|
||||
.combobox-trigger:hover {
|
||||
background-color: rgba(37, 99, 235, 0.05);
|
||||
}
|
||||
|
||||
.combobox-trigger div {
|
||||
border-left: 1px solid rgba(15, 23, 42, 0.4);
|
||||
}
|
||||
|
||||
.combobox-dropdown {
|
||||
background-color: white;
|
||||
border: 1px solid rgba(15, 23, 42, 0.4);
|
||||
}
|
||||
|
||||
.combobox-option {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.combobox-option.selected {
|
||||
background-color: rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
.combobox-option:hover {
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
}
|
||||
151
www/themes/ctp-frappe.css
Normal file
151
www/themes/ctp-frappe.css
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
/* Catppuccin Frappé Theme */
|
||||
body {
|
||||
background-color: #303446; /* Base */
|
||||
color: #c6d0f5; /* Text */
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
body::before {
|
||||
background-image: linear-gradient(90deg, rgba(140, 170, 238, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(rgba(140, 170, 238, 0.08) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: #292c3c; /* Mantle */
|
||||
outline: 1px solid rgba(140, 170, 238, 0.12);
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 2px dotted rgba(140, 170, 238, 0.4); /* Blue */
|
||||
}
|
||||
|
||||
#emoticon {
|
||||
color: #8caaee; /* Blue */
|
||||
}
|
||||
|
||||
#overall-status {
|
||||
background-color: #8caaee; /* Blue */
|
||||
color: #292c3c; /* Mantle */
|
||||
}
|
||||
|
||||
#pattern {
|
||||
background-image: repeating-linear-gradient(-45deg, #8caaee, #8caaee 10px, transparent 0px, transparent 20px);
|
||||
}
|
||||
|
||||
#last-updated {
|
||||
color: rgba(165, 173, 206, 0.6); /* Overlay2 */
|
||||
}
|
||||
|
||||
.service-name {
|
||||
color: #c6d0f5; /* Text */
|
||||
}
|
||||
|
||||
.service-name svg {
|
||||
color: rgba(140, 170, 238, 0.4); /* Blue faded */
|
||||
}
|
||||
|
||||
.service-name:hover svg {
|
||||
color: #8caaee; /* Blue */
|
||||
}
|
||||
|
||||
/* Tooltip */
|
||||
.bars > div:hover .status-bar::after {
|
||||
background-color: #292c3c; /* Crust */
|
||||
color: #c6d0f5; /* Text */
|
||||
border: 1px solid rgba(140, 170, 238, 0.3);
|
||||
}
|
||||
|
||||
.status-bar.Online {
|
||||
background-color: #a6d189; /* Green */
|
||||
border-color: #a6d189; /* Green */
|
||||
}
|
||||
|
||||
.bars > div:hover .status-bar.Online {
|
||||
background-color: #81c563;
|
||||
}
|
||||
|
||||
.status-bar.Unknown {
|
||||
background: radial-gradient(circle at center, #414559 3px, transparent 3px); /* Surface0 */
|
||||
}
|
||||
|
||||
.status-bar.Degraded {
|
||||
background-color: #e5c890; /* Yellow */
|
||||
border-color: #e5c890; /* Yellow */
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(35, 38, 52, 0.2) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(35, 38, 52, 0.2) 50%,
|
||||
rgba(35, 38, 52, 0.2) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-size: 8px 8px;
|
||||
}
|
||||
|
||||
.status-bar.Offline {
|
||||
background-color: #e78284; /* Red */
|
||||
border-color: #e78284; /* Red */
|
||||
}
|
||||
|
||||
.status-bar.Offline::before {
|
||||
color: #292c3c; /* Mantle */
|
||||
}
|
||||
|
||||
.bars-footer {
|
||||
color: rgba(140, 170, 238, 0.5); /* Blue */
|
||||
}
|
||||
|
||||
.bars-footer hr {
|
||||
border-color: rgba(140, 170, 238, 0.2); /* Blue */
|
||||
}
|
||||
|
||||
.uptime-percentage {
|
||||
background-color: #292c3c; /* Mantle */
|
||||
color: rgba(140, 170, 238, 0.85); /* Blue */
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #8caaee; /* Blue */
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #8caaee; /* Blue */
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
/* Combobox */
|
||||
.combobox-trigger {
|
||||
background-color: #232634; /* Crust */
|
||||
color: #c6d0f5; /* Text */
|
||||
border: 1px solid rgba(98, 104, 128, 0.6); /* Overlay1 */
|
||||
}
|
||||
|
||||
.combobox-trigger:hover {
|
||||
background-color: #292c3c; /* Mantle */
|
||||
border-color: rgba(140, 170, 238, 0.5);
|
||||
}
|
||||
|
||||
.combobox-trigger div {
|
||||
border-left: 1px solid rgba(98, 104, 128, 0.6);
|
||||
}
|
||||
|
||||
.combobox-dropdown {
|
||||
background-color: #232634; /* Crust */
|
||||
border: 1px solid rgba(140, 170, 238, 0.4);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.combobox-option {
|
||||
color: #c6d0f5; /* Text */
|
||||
}
|
||||
|
||||
.combobox-option.selected {
|
||||
background-color: rgba(140, 170, 238, 0.15);
|
||||
}
|
||||
|
||||
.combobox-option:hover {
|
||||
background-color: #8caaee; /* Blue */
|
||||
color: #292c3c; /* Mantle */
|
||||
}
|
||||
151
www/themes/ctp-latte.css
Normal file
151
www/themes/ctp-latte.css
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
/* Catppuccin Latte Theme */
|
||||
body {
|
||||
background-color: #eff1f5; /* Base */
|
||||
color: #4c4f69; /* Text */
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
body::before {
|
||||
background-image: linear-gradient(90deg, rgba(30, 102, 245, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(rgba(30, 102, 245, 0.08) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: #e6e9ef; /* Mantle */
|
||||
outline: 1px solid rgba(30, 102, 245, 0.12);
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 2px dotted rgba(30, 102, 245, 0.4); /* Blue */
|
||||
}
|
||||
|
||||
#emoticon {
|
||||
color: #1e66f5; /* Blue */
|
||||
}
|
||||
|
||||
#overall-status {
|
||||
background-color: #1e66f5; /* Blue */
|
||||
color: #e6e9ef; /* Mantle */
|
||||
}
|
||||
|
||||
#pattern {
|
||||
background-image: repeating-linear-gradient(-45deg, #1e66f5, #1e66f5 10px, transparent 0px, transparent 20px);
|
||||
}
|
||||
|
||||
#last-updated {
|
||||
color: rgba(140, 143, 161, 1); /* Overlay2 */
|
||||
}
|
||||
|
||||
.service-name {
|
||||
color: #4c4f69; /* Text */
|
||||
}
|
||||
|
||||
.service-name svg {
|
||||
color: rgba(30, 102, 245, 0.4); /* Blue faded */
|
||||
}
|
||||
|
||||
.service-name:hover svg {
|
||||
color: #1e66f5; /* Blue */
|
||||
}
|
||||
|
||||
/* Tooltip */
|
||||
.bars > div:hover .status-bar::after {
|
||||
background-color: #e6e9ef; /* Mantle */
|
||||
color: #4c4f69; /* Text */
|
||||
border: 1px solid rgba(30, 102, 245, 0.3);
|
||||
}
|
||||
|
||||
.status-bar.Online {
|
||||
background-color: #40a02b; /* Green */
|
||||
border-color: #40a02b; /* Green */
|
||||
}
|
||||
|
||||
.bars > div:hover .status-bar.Online {
|
||||
background-color: #357a22;
|
||||
}
|
||||
|
||||
.status-bar.Unknown {
|
||||
background: radial-gradient(circle at center, #ccd0da 3px, transparent 3px); /* Surface0 */
|
||||
}
|
||||
|
||||
.status-bar.Degraded {
|
||||
background-color: #df8e1d; /* Yellow */
|
||||
border-color: #df8e1d; /* Yellow */
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(230, 233, 239, 0.3) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(230, 233, 239, 0.3) 50%,
|
||||
rgba(230, 233, 239, 0.3) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-size: 8px 8px;
|
||||
}
|
||||
|
||||
.status-bar.Offline {
|
||||
background-color: #d20f39; /* Red */
|
||||
border-color: #d20f39; /* Red */
|
||||
}
|
||||
|
||||
.status-bar.Offline::before {
|
||||
color: #e6e9ef; /* Mantle */
|
||||
}
|
||||
|
||||
.bars-footer {
|
||||
color: rgba(30, 102, 245, 0.6); /* Blue */
|
||||
}
|
||||
|
||||
.bars-footer hr {
|
||||
border-color: rgba(30, 102, 245, 0.2); /* Blue */
|
||||
}
|
||||
|
||||
.uptime-percentage {
|
||||
background-color: #e6e9ef; /* Mantle */
|
||||
color: rgba(30, 102, 245, 0.85); /* Blue */
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #1e66f5; /* Blue */
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #1e66f5; /* Blue */
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
/* Combobox */
|
||||
.combobox-trigger {
|
||||
background-color: #dce0e8; /* Crust */
|
||||
color: #4c4f69; /* Text */
|
||||
border: 1px solid rgba(156, 160, 176, 0.6); /* Overlay1 */
|
||||
}
|
||||
|
||||
.combobox-trigger:hover {
|
||||
background-color: #d0d4db;
|
||||
border-color: rgba(30, 102, 245, 0.5);
|
||||
}
|
||||
|
||||
.combobox-trigger div {
|
||||
border-left: 1px solid rgba(156, 160, 176, 0.6);
|
||||
}
|
||||
|
||||
.combobox-dropdown {
|
||||
background-color: #dce0e8; /* Crust */
|
||||
border: 1px solid rgba(30, 102, 245, 0.4);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.combobox-option {
|
||||
color: #4c4f69; /* Text */
|
||||
}
|
||||
|
||||
.combobox-option.selected {
|
||||
background-color: rgba(30, 102, 245, 0.15);
|
||||
}
|
||||
|
||||
.combobox-option:hover {
|
||||
background-color: #1e66f5; /* Blue */
|
||||
color: white;
|
||||
}
|
||||
151
www/themes/ctp-macchiato.css
Normal file
151
www/themes/ctp-macchiato.css
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
/* Catppuccin Macchiato Theme */
|
||||
body {
|
||||
background-color: #24273a; /* Base */
|
||||
color: #cad3f5; /* Text */
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
body::before {
|
||||
background-image: linear-gradient(90deg, rgba(138, 173, 244, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(rgba(138, 173, 244, 0.08) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: #1e2030; /* Mantle */
|
||||
outline: 1px solid rgba(138, 173, 244, 0.12);
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 2px dotted rgba(138, 173, 244, 0.4); /* Blue */
|
||||
}
|
||||
|
||||
#emoticon {
|
||||
color: #8aadf4; /* Blue */
|
||||
}
|
||||
|
||||
#overall-status {
|
||||
background-color: #8aadf4; /* Blue */
|
||||
color: #1e2030; /* Mantle */
|
||||
}
|
||||
|
||||
#pattern {
|
||||
background-image: repeating-linear-gradient(-45deg, #8aadf4, #8aadf4 10px, transparent 0px, transparent 20px);
|
||||
}
|
||||
|
||||
#last-updated {
|
||||
color: rgba(165, 173, 203, 0.6); /* Overlay2 */
|
||||
}
|
||||
|
||||
.service-name {
|
||||
color: #cad3f5; /* Text */
|
||||
}
|
||||
|
||||
.service-name svg {
|
||||
color: rgba(138, 173, 244, 0.4); /* Blue faded */
|
||||
}
|
||||
|
||||
.service-name:hover svg {
|
||||
color: #8aadf4; /* Blue */
|
||||
}
|
||||
|
||||
/* Tooltip */
|
||||
.bars > div:hover .status-bar::after {
|
||||
background-color: #1e2030; /* Mantle */
|
||||
color: #cad3f5; /* Text */
|
||||
border: 1px solid rgba(138, 173, 244, 0.3);
|
||||
}
|
||||
|
||||
.status-bar.Online {
|
||||
background-color: #a6da95; /* Green */
|
||||
border-color: #a6da95; /* Green */
|
||||
}
|
||||
|
||||
.bars > div:hover .status-bar.Online {
|
||||
background-color: #8bd074;
|
||||
}
|
||||
|
||||
.status-bar.Unknown {
|
||||
background: radial-gradient(circle at center, #363a4f 3px, transparent 3px); /* Surface0 */
|
||||
}
|
||||
|
||||
.status-bar.Degraded {
|
||||
background-color: #eed49f; /* Yellow */
|
||||
border-color: #eed49f; /* Yellow */
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(30, 32, 48, 0.2) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(30, 32, 48, 0.2) 50%,
|
||||
rgba(30, 32, 48, 0.2) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-size: 8px 8px;
|
||||
}
|
||||
|
||||
.status-bar.Offline {
|
||||
background-color: #ed8796; /* Red */
|
||||
border-color: #ed8796; /* Red */
|
||||
}
|
||||
|
||||
.status-bar.Offline::before {
|
||||
color: #1e2030; /* Mantle */
|
||||
}
|
||||
|
||||
.bars-footer {
|
||||
color: rgba(138, 173, 244, 0.5); /* Blue */
|
||||
}
|
||||
|
||||
.bars-footer hr {
|
||||
border-color: rgba(138, 173, 244, 0.2); /* Blue */
|
||||
}
|
||||
|
||||
.uptime-percentage {
|
||||
background-color: #1e2030; /* Mantle */
|
||||
color: rgba(138, 173, 244, 0.85); /* Blue */
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #8aadf4; /* Blue */
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #8aadf4; /* Blue */
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
/* Combobox */
|
||||
.combobox-trigger {
|
||||
background-color: #181926; /* Crust */
|
||||
color: #cad3f5; /* Text */
|
||||
border: 1px solid rgba(91, 96, 120, 0.6); /* Overlay1 */
|
||||
}
|
||||
|
||||
.combobox-trigger:hover {
|
||||
background-color: #1e2030; /* Mantle */
|
||||
border-color: rgba(138, 173, 244, 0.5);
|
||||
}
|
||||
|
||||
.combobox-trigger div {
|
||||
border-left: 1px solid rgba(91, 96, 120, 0.6);
|
||||
}
|
||||
|
||||
.combobox-dropdown {
|
||||
background-color: #181926; /* Crust */
|
||||
border: 1px solid rgba(138, 173, 244, 0.4);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.combobox-option {
|
||||
color: #cad3f5; /* Text */
|
||||
}
|
||||
|
||||
.combobox-option.selected {
|
||||
background-color: rgba(138, 173, 244, 0.15);
|
||||
}
|
||||
|
||||
.combobox-option:hover {
|
||||
background-color: #8aadf4; /* Blue */
|
||||
color: #1e2030; /* Mantle */
|
||||
}
|
||||
151
www/themes/ctp-mocha.css
Normal file
151
www/themes/ctp-mocha.css
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
/* Catppuccin Mocha Theme */
|
||||
body {
|
||||
background-color: #1e1e2e; /* Base */
|
||||
color: #cdd6f4; /* Text */
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
body::before {
|
||||
background-image: linear-gradient(90deg, rgba(137, 180, 250, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(rgba(137, 180, 250, 0.08) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: #181825; /* Mantle */
|
||||
outline: 1px solid rgba(137, 180, 250, 0.12);
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 2px dotted rgba(137, 180, 250, 0.4); /* Blue */
|
||||
}
|
||||
|
||||
#emoticon {
|
||||
color: #89b4fa; /* Blue */
|
||||
}
|
||||
|
||||
#overall-status {
|
||||
background-color: #89b4fa; /* Blue */
|
||||
color: #181825; /* Mantle */
|
||||
}
|
||||
|
||||
#pattern {
|
||||
background-image: repeating-linear-gradient(-45deg, #89b4fa, #89b4fa 10px, transparent 0px, transparent 20px);
|
||||
}
|
||||
|
||||
#last-updated {
|
||||
color: rgba(166, 173, 200, 0.6); /* Overlay2 */
|
||||
}
|
||||
|
||||
.service-name {
|
||||
color: #cdd6f4; /* Text */
|
||||
}
|
||||
|
||||
.service-name svg {
|
||||
color: rgba(137, 180, 250, 0.4); /* Blue faded */
|
||||
}
|
||||
|
||||
.service-name:hover svg {
|
||||
color: #89b4fa; /* Blue */
|
||||
}
|
||||
|
||||
/* Tooltip */
|
||||
.bars > div:hover .status-bar::after {
|
||||
background-color: #181825; /* Mantle */
|
||||
color: #cdd6f4; /* Text */
|
||||
border: 1px solid rgba(137, 180, 250, 0.3);
|
||||
}
|
||||
|
||||
.status-bar.Online {
|
||||
background-color: #a6e3a1; /* Green */
|
||||
border-color: #a6e3a1; /* Green */
|
||||
}
|
||||
|
||||
.bars > div:hover .status-bar.Online {
|
||||
background-color: #8ad882;
|
||||
}
|
||||
|
||||
.status-bar.Unknown {
|
||||
background: radial-gradient(circle at center, #313244 3px, transparent 3px); /* Surface0 */
|
||||
}
|
||||
|
||||
.status-bar.Degraded {
|
||||
background-color: #f9e2af; /* Yellow */
|
||||
border-color: #f9e2af; /* Yellow */
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(24, 24, 37, 0.2) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(24, 24, 37, 0.2) 50%,
|
||||
rgba(24, 24, 37, 0.2) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-size: 8px 8px;
|
||||
}
|
||||
|
||||
.status-bar.Offline {
|
||||
background-color: #f38ba8; /* Red */
|
||||
border-color: #f38ba8; /* Red */
|
||||
}
|
||||
|
||||
.status-bar.Offline::before {
|
||||
color: #181825; /* Mantle */
|
||||
}
|
||||
|
||||
.bars-footer {
|
||||
color: rgba(137, 180, 250, 0.5); /* Blue */
|
||||
}
|
||||
|
||||
.bars-footer hr {
|
||||
border-color: rgba(137, 180, 250, 0.2); /* Blue */
|
||||
}
|
||||
|
||||
.uptime-percentage {
|
||||
background-color: #181825; /* Mantle */
|
||||
color: rgba(137, 180, 250, 0.85); /* Blue */
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #89b4fa; /* Blue */
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #89b4fa; /* Blue */
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
/* Combobox */
|
||||
.combobox-trigger {
|
||||
background-color: #11111b; /* Crust */
|
||||
color: #cdd6f4; /* Text */
|
||||
border: 1px solid rgba(88, 91, 112, 0.6); /* Overlay1 */
|
||||
}
|
||||
|
||||
.combobox-trigger:hover {
|
||||
background-color: #181825; /* Mantle */
|
||||
border-color: rgba(137, 180, 250, 0.5);
|
||||
}
|
||||
|
||||
.combobox-trigger div {
|
||||
border-left: 1px solid rgba(88, 91, 112, 0.6);
|
||||
}
|
||||
|
||||
.combobox-dropdown {
|
||||
background-color: #11111b; /* Crust */
|
||||
border: 1px solid rgba(137, 180, 250, 0.4);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.combobox-option {
|
||||
color: #cdd6f4; /* Text */
|
||||
}
|
||||
|
||||
.combobox-option.selected {
|
||||
background-color: rgba(137, 180, 250, 0.15);
|
||||
}
|
||||
|
||||
.combobox-option:hover {
|
||||
background-color: #89b4fa; /* Blue */
|
||||
color: #181825; /* Mantle */
|
||||
}
|
||||
4
www/themes/inverted.css
Normal file
4
www/themes/inverted.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
/* Dark mode (inverted) theme */
|
||||
html {
|
||||
filter: invert();
|
||||
}
|
||||
130
www/themes/monochrome.css
Normal file
130
www/themes/monochrome.css
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
/* Default Theme */
|
||||
body {
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
body::before {
|
||||
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: white;
|
||||
outline: 1px solid rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 2px dotted rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#overall-status {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#pattern {
|
||||
background-image: repeating-linear-gradient(-45deg, #000, #000 10px, transparent 0px, transparent 20px);
|
||||
}
|
||||
|
||||
#last-updated {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.service-name {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.service-name svg {
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.service-name:hover svg {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
background-color: black;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
/* Tooltip */
|
||||
.bars > div:hover .status-bar::after {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bars > div:hover .status-bar.Online {
|
||||
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.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;
|
||||
}
|
||||
|
||||
.status-bar.Offline {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.status-bar.Offline::before {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.bars-footer {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.bars-footer hr {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.uptime-percentage {
|
||||
background-color: white;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Combobox */
|
||||
.combobox-trigger {
|
||||
background-color: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.combobox-trigger:hover {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.combobox-trigger div {
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.combobox-dropdown {
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.combobox-option {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.combobox-option.selected {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.combobox-option:hover {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
Loading…
Reference in a new issue