Initial commit

README.md

@@ -0,0 +1,50 @@
+<h3 align="center">Cute Kuma</h3>
+
+<p align="center">
+  Cute CSS for  <a href="https://github.com/louislam/uptime-kuma">Uptime Kuma</a> status page with a simple and modern look
+  <br>
+  <a href="https://status.denisromanov.ru"><strong>Live demo »</strong></a>
+  <br>
+  <br>
+  <a href="https://github.com/dermv/cute-kuma/tree/main#features">Features</a>
+  ·
+  <a href="https://github.com/dermv/cute-kuma/tree/main#installation">Installation</a>
+  ·
+  <a href="https://github.com/dermv/cute-kuma/tree/main#personalization">Personalization</a>
+</p>
+
+<p>
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./.github/assets/dark.png">
+    <source media="(prefers-color-scheme: light)" srcset="./.github/assets/light.png">
+    <img alt="Marzbanify Template" src="./.github/assets/dark.png">
+  </picture>
+</p>
+
+# Features
+
+- Simple and modern design, inspired by the pages of major monitoring services.
+- Light and dark themes support.
+- Removed the refresh timer (easily restored if needed).
+- Clean and understandable code, easily customizable to fit your needs.
+
+# Installation
+
+1. In your Uptime Kuma dashboard, navigate to status page.
+2. Click `Edit Status Page`.
+3. Scroll down to `Custom CSS`.
+4. Copy the contents of `main.css` and paste it into the Custom CSS field.
+5. Click `Save` at the bottom.
+
+# Personalization
+
+You can modify the values inside `:root {}` to fit your needs.
+
+By default, the refresh timer is removed. To restore it, simply comment `display: none;` in `.refresh-info` as shown here:
+```
+.refresh-info {
+  /* display: none; */
+  opacity: 1 !important;
+  color: var(--secondary-color);
+}
+```

main.css

@@ -0,0 +1,328 @@
+/* Base theme settings */
+:root {
+  /* Base theme colors */
+  --color-black: #666;
+  --color-green: #1aad3a;
+  --color-blue: #087fe7;
+  --color-teal: #27918d;
+  --color-yellow: #ffaf0f;
+  --color-orange: #ff6f00;
+  --color-red: #f64831;
+  --color-gray: #77726e;
+
+  --body-color: #212529;
+  --body-bg: #fff;
+  --heading-color: #000;
+  --secondary-color: var(--color-gray);
+
+  --block-bg: #f6f5f4;
+
+  /* Incident block colors */
+  --incident-color: #fff;
+  --incident-info-bg: var(--color-teal);
+  --incident-warning-bg: var(--color-orange);
+  --incident-danger-bg: var(--color-red);
+  --incident-primary-bg: var(--color-green);
+  --incident-light-bg: var(--color-gray);
+  --incident-dark-bg: var(--color-black);
+
+  /* Main status block colors */
+  --overall-status-color: #fff;
+  --overall-status-ok-bg: var(--color-green);
+  --overall-status-warning-bg: var(--color-yellow);
+  --overall-status-danger-bg: var(--color-red);
+  --overall-status-maintenance-bg: var(--color-blue);
+
+  /* Maintenance block colors */
+  --maintenance-color: var(--color-blue);
+  --maintenance-bg: #ebf5fe;
+
+  /* Colors of timeslot in the maintenance block */
+  --timeslot-color: #2383e2;
+  --timeslot-bg: rgba(35, 131, 226, .14);
+  --timeslot-border-color: rgba(35, 131, 226, .35);
+
+  /* Uptime percentage color */
+  --badge-color: #7f7f7f;
+
+  /* Colors of HP bar beat */
+  --beat-ok-bg: var(--color-green);
+  --beat-empty-bg: var(--color-gray);
+  --beat-down-bg: var(--color-red);
+  --beat-pending-bg: var(--color-yellow);
+  --beat-maintenance-bg: var(--color-blue);
+
+  /* Color of time under the HP bar */
+  --word-color: #7f7f7f;
+
+  /* Layout settings */
+  --min-item-width: 32ch;
+  --max-item-width: 1fr;
+
+  /* Colors for dark theme */
+  .dark {
+    --body-color: #dee2e6;
+    --body-bg: #151515;
+    --heading-color: #fff;
+
+    --block-bg: #232323;
+
+    --maintenance-bg: rgba(35, 131, 226, .07);
+  }
+}
+
+body {
+  background-color: var(--body-bg) !important;
+}
+
+.container {
+  width: 97.5%;
+  max-width: 54rem;
+}
+
+/* Center the logo */
+.logo-wrapper {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+/* Remove the title adjacent to the logo */
+span[data-v-7d4a7f28] {
+  display: none;
+}
+
+/* Fix vertical margin of admin buttons on mobile */
+.mb-4[data-v-b8247e57]:has(.btn-info) {
+  margin-bottom: 2.5rem !important;
+
+  div {
+    gap: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+  
+    & button {
+      margin: 0 !important;
+    }
+  }
+}
+
+/* Incident block */
+.incident {
+  margin-bottom: 1rem !important;
+  border-radius: 1rem;
+  color: var(--incident-color) !important;
+
+  &.bg-info {
+    background-color: var(--incident-info-bg) !important;
+  }
+
+  &.bg-warning {
+    background-color: var(--incident-warning-bg) !important;
+  }
+
+  &.bg-danger {
+    background-color: var(--incident-danger-bg) !important;
+  }
+
+  &.bg-primary {
+    background-color: var(--incident-primary-bg) !important;
+  }
+
+  &.bg-light {
+    background-color: var(--incident-light-bg) !important;
+  }
+
+  &.bg-dark {
+    background-color: var(--incident-dark-bg) !important;
+  }
+}
+
+/* Main status block */
+.overall-status {
+  display: block;
+  margin-bottom: 1rem !important;
+  padding: 1rem 1.5rem !important;
+  border-radius: 1rem;
+  color: var(--overall-status-color);
+  font-weight: 600 !important;
+  font-size: 1.5rem !important;
+  box-shadow: none;
+
+  &:has(.ok) {
+    background-color: var(--overall-status-ok-bg) !important;
+  }
+
+  &:has(.warning) {
+    background-color: var(--overall-status-warning-bg) !important;
+  }
+
+  &:has(.danger) {
+    background-color: var(--overall-status-danger-bg) !important;
+  }
+
+  &:has(.status-maintenance) {
+    background-color: var(--overall-status-maintenance-bg) !important;
+  }
+
+  svg {
+    display: none;
+  }
+}
+
+/* Maintenance block */
+.shadow-box.bg-maintenance {
+  margin-top: 1rem !important;
+  padding: 1.5rem !important;
+  border-radius: 1rem;
+  color: var(--maintenance-color) !important;
+  background-color: var(--maintenance-bg) !important;
+  box-shadow: none !important;
+}
+
+/* Timeslot in the maintenance block */
+.timeslot {
+  border: 1px solid var(--timeslot-border-color);
+  border-radius: 2rem;
+  color: var(--timeslot-color) !important;
+  background-color: var(--timeslot-bg) !important;
+}
+
+/* Description */
+div > .alert-heading.p-2 {
+  color: var(--body-color);
+  text-align: center;
+}
+
+/* Monitor group title */
+.group-title {
+  color: var(--heading-color);
+  font-weight: 600 !important;
+  font-size: 1.5rem !important;
+}
+
+/* Monitor group */
+.shadow-box.monitor-list {
+  margin-top: 1rem !important;
+  padding: 0;
+  background-color: transparent !important;
+  box-shadow: none !important;
+
+  & > .monitor-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--min-item-width), var(--max-item-width)));
+    grid-gap: 1rem;
+  }
+}
+
+/* Monitor item */
+.item {
+  padding: 1.25rem 1.25rem 1rem !important;
+  border-radius: 1rem !important;
+  background-color: var(--block-bg);
+
+  & > .row {
+    flex-direction: column;
+
+    & > div {
+      width: 100%;
+    }
+  }
+
+  &:hover {
+    background-color: var(--block-bg) !important;
+  }
+}
+
+/* Correct behavior in a strange way */
+@media (max-width: 768px) {
+  :root {
+    --min-item-width: 26ch;
+  }
+}
+
+/* Monitor name and badge container */
+.info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+/* Monitor name */
+.item-name {
+  padding-right: 0 !important;
+  padding-left: 4px !important;
+  overflow: hidden;
+  color: var(--heading-color);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Uptime percentage badge (now just text) */
+.badge {
+  all: unset;
+  order: 2;
+  padding-right: 2px !important;
+  color: var(--badge-color) !important;
+  background-color: transparent !important;
+}
+
+/* Hmm... */
+@media (max-width: 600px) {
+  .badge {
+    padding-right: 4px !important;
+  }
+}
+
+/* Extra vertical indentation */
+.extra-info {
+  display: none !important;
+}
+
+/* HP bar and time container */
+.wrap {
+  padding: 4px 2px !important;
+}
+
+/* Beat of HP bar */
+.beat {
+  height: 1.5rem !important;
+  background-color: var(--beat-ok-bg) !important;
+
+  &.empty {
+    background-color: var(--beat-empty-bg) !important;
+  }
+
+  &.down {
+    background-color: var(--beat-down-bg) !important;
+  }
+
+  &.pending {
+    background-color: var(--beat-pending-bg) !important;
+  }
+
+  &.maintenance {
+    background-color: var(--beat-maintenance-bg) !important;
+  }
+}
+
+/* Time under the HP bar */
+.word {
+  padding-right: 2px !important;
+  padding-left: 2px !important;
+  color: var(--word-color) !important;
+}
+
+/* Custom footer and Uptime Kuma branding */
+footer p,
+footer p a {
+  color: var(--secondary-color) !important;
+}
+
+/* Remove a refresh timer.
+   Comment "display: none" to return */
+.refresh-info {
+  display: none;
+  opacity: 1 !important;
+  color: var(--secondary-color);
+}