docs: update live demo domain

* fix: support Uptime Kuma v2.0.0-beta.4

* docs: update compatibility information

README.md

@@ -1,50 +1,66 @@
 <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
+  Give your <a href="https://github.com/louislam/uptime-kuma">Uptime Kuma</a> status page a cute and modern look with custom CSS
   <br>
-  <a href="https://kuma.denisromanov.ru"><strong>Live demo »</strong></a>
+  <a href="https://kuma.denisro.com"><strong>Live demo »</strong></a>
   <br>
   <br>
-  <a href="https://github.com/dermv/cute-kuma/tree/main#features">Features</a>
+  <a href="#features">Features</a>
   ·
-  <a href="https://github.com/dermv/cute-kuma/tree/main#install">Install</a>
+  <a href="#installation">Installation</a>
   ·
-  <a href="https://github.com/dermv/cute-kuma/tree/main#personalization">Personalization</a>
+  <a href="#personalization">Personalization</a>
 </p>
 
 <p>
   <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="./.github/assets/dark.png">
+    <source media="(prefers-color-scheme: dark)" srcset="./.github/assets/2-col/dark.png">
-    <source media="(prefers-color-scheme: light)" srcset="./.github/assets/light.png">
+    <source media="(prefers-color-scheme: light)" srcset="./.github/assets/2-col/light.png">
-    <img alt="Cute Kuma" src="./.github/assets/dark.png">
+    <img alt="Cute Kuma" src="./.github/assets/2-col/dark.png">
   </picture>
 </p>
 
 ## Features
 
-- Modern design: Inspired by top monitoring services
+- Modern design inspired by top monitoring services
-- Light and dark themes
+- Support for Uptime Kuma v2
-- No refresh timer: Removed by default (optional restoration)
+- Support for light and dark themes
-- Clean code: Easy to customize and extend
+- Hidden refresh timer for a cleaner look (can be easily restored)
+- Clean, easily customizable and extendable code
 
-## Install
+## Installation
 
 1. In your Uptime Kuma dashboard, navigate to status page.
 2. Click `Edit Status Page`.
-3. Scroll down to `Custom CSS`.
+3. Scroll down to `Custom CSS` field.
 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.
+You can easily customize the theme by modifying the variables inside the `:root {}` block.
 
-By default, the refresh timer is removed. Remove/comment `display: none;` in `.refresh-info` to restore visibility as shown here:
+### Columns layout
-```
+
-.refresh-info[data-v-b8247e57] {
+<details>
-  /* display: none; */
+  <summary>Preview</summary>
-  opacity: 1;
+  <picture>
-  margin-bottom: 0 !important;
+    <source media="(prefers-color-scheme: dark)" srcset="./.github/assets/1-col/dark.png">
-}
+    <source media="(prefers-color-scheme: light)" srcset="./.github/assets/1-col/light.png">
-```
+    <img alt="Cute Kuma: 2 columns" src="./.github/assets/1-col/dark.png">
+  </picture>
+</details>
+
+By default, 2 columns are shown on wide screens. If you prefer a single column everywhere, disable the 2‑column rule.
+
+> [!IMPORTANT]
+> If you enable tag display (monitor tags), it is strongly recommended to use a 1‑column layout.
+
+1. Search for this comment:
+`/* Enable 2 columns on wider screens; comment out to disable */`
+2. Comment out the block immediately below it.
+
+### Restoring the Refresh Timer
+
+The refresh timer is hidden by default. To make it visible again, find the `.refresh-info` rule and remove or comment out the `display: none;` line.

main.css

@@ -3,130 +3,131 @@
 
 :root {
   /* Palette colors */
-  --color-gray: #82878c;
+  --color-gray: #7f8c8d;
-  --color-red: #c8463c;
+  --color-red: #e74c3c;
-  --color-orange: #d28700;
+  --color-orange: #f39c12;
-  --color-teal: #00828c;
+  --color-teal: #1abc9c;
-  --color-blue: #0f73b4;
+  --color-blue: #3498db;
-  --color-green: #2d965a;
+  --color-green: #27ae60;
+  --color-indigo: #5c6bc0;
+  --color-purple: #9b59b6;
+  --color-pink: #e84393;
 
   /* Palette RGB colors */
-  --rgb-color-gray: 130, 135, 140;
+  --rgb-color-gray: 127, 140, 141;
-  --rgb-color-red: 200, 70, 60;
+  --rgb-color-red: 231, 76, 60;
-  --rgb-color-orange: 210, 135, 0;
+  --rgb-color-orange: 243, 156, 18;
-  --rgb-color-teal: 0, 130, 140;
+  --rgb-color-teal: 26, 188, 156;
-  --rgb-color-blue: 15, 115, 180;
+  --rgb-color-blue: 52, 152, 219;
-  --rgb-color-green: 45, 150, 90;
+  --rgb-color-green: 39, 174, 96;
+  --rgb-color-indigo: 92, 107, 192;
+  --rgb-color-purple: 155, 89, 182;
+  --rgb-color-pink: 232, 67, 147;
 
-  /* Light theme semantic colors */
+  /* Light theme base colors */
-  --color-bg: #fff;
+  --color-bg: #fbfbfc;
-  --color-text-primary: #555;
+  --color-text-primary: #566573;
   --color-text-heading: #141414;
-  --color-text-secondary: #8c8c8c;
+  --color-text-secondary: #85929e;
-  --color-block-bg: #f8f8f7;
+  --color-block-bg: #fff;
-  --color-monitor-bg: #fff;
+  --color-border: rgba(0, 0, 0, .1);
-  --color-monitor-border: rgba(0, 0, 0, .1);
+  --color-uptime-bar-empty-bg: #d7dbdd;
-  --color-input-field: #dcdcdc;
+  --color-tooltip-bg: #fff;
 
   /* Button: Secondary */
   --color-btn-secondary-bg: transparent;
-  --color-btn-secondary-hover: #e6e6e6;
+  --color-btn-secondary-hover-bg: #ebebeb;
-  --color-btn-secondary-active: #d2d2d2;
+  --color-btn-secondary-active-bg: #d7d7d7;
   --color-btn-secondary-border: rgba(0, 0, 0, .16);
 
-  /* Specific colors */
+  /* Sizing */
-  --color-incident-light-bg: var(--color-block-bg);
-  --color-incident-dark-bg: #e8e8e8;
-  --color-text-overall-status: #fff;
-
-  /* Opacity */
-  --opacity-colored-block: .08;
-
-  /* Layout and sizing */
   --size-container-width: 864px;
   --size-edit-container-width: 1164px;
   --size-logo-width: 48px;
   --size-logo-height: 48px;
-  --size-monitor-min-width: 30ch;
+  --size-uptime-bar-height: 24px;
-  --size-monitor-max-width: 1fr;
-  --size-daily-bar-height: 20px;
 
   /* Spacing */
-  --space-xs: .5rem;
+  --spacing-4: .25rem;
-  --space-sm: .75rem;
+  --spacing-8: .5rem;
-  --space-md: 1rem;
+  --spacing-12: .75rem;
-  --space-lg: 2rem;
+  --spacing-16: 1rem;
-
+  --spacing-20: 1.25rem;
-  /* Specific spacing */
+  --spacing-24: 1.5rem;
-  --space-monitor-items: 4px;
+  --spacing-32: 2rem;
 
   /* Border radius */
-  --radius-sm: .375rem;
+  --border-radius-200: .25rem;
-  --radius-md: .5rem;
+  --border-radius-400: .375rem;
-
+  --border-radius-500: .5rem;
-  /* Specific border radius */
-  --radius-timeslot: 2rem;
 
   /* Typography */
-  --font-size-sm: .875rem;
+  --font-size-50: 0.75rem;
-  --font-size-heading: 1.125rem;
+  --font-size-100: .875rem;
+  --font-size-300: 1.125rem;
+  --font-size-350: 1.25rem;
   --font-weight-medium: 500;
-  --line-height-heading: 1.2;
+  --font-weight-semibold: 600;
+  --font-line-height-200: var(--spacing-24);
 
-  /* Components */
+  /* Shadow */
-  /* Button */
+  --shadow-filter: rgba(0, 0, 0, .05) 0px 1px 6px 0px;
-  --padding-btn-x: 12px;
-  --padding-btn-y: 6px;
 }
 
 /* DARK THEME OVERRIDES
 -------------------------------------------------- */
 
 .dark {
-  /* Semantic colors */
+  /* Base colors */
-  --color-bg: #161616;
+  --color-bg: #141414;
-  --color-text-primary: #afafaf;
+  --color-text-primary: #909497;
-  --color-text-heading: #f0f0f0;
+  --color-text-heading: #f1f1f1;
-  --color-text-secondary: #7d7d7d;
+  --color-text-secondary: #626567;
-  --color-block-bg: #202020;
+  --color-block-bg: #1e1e1e;
-  --color-monitor-bg: #2a2a2a;
+  --color-border: rgba(255, 255, 255, .07);
-  --color-monitor-border: rgba(255, 255, 255, .06);
+  --color-uptime-bar-empty-bg: #424949;
-  --color-input-field: #323232;
+  --color-tooltip-bg: #1e1e1e;
 
   /* Button: Secondary */
   --color-btn-secondary-bg: transparent;
-  --color-btn-secondary-hover: #292929;
+  --color-btn-secondary-hover-bg: #232323;
-  --color-btn-secondary-active: #1f1f1f;
+  --color-btn-secondary-active-bg: #1e1e1e;
   --color-btn-secondary-border: rgba(255, 255, 255, .13);
-
-  /* Specific colors */
-  --color-incident-light-bg: var(--color-monitor-bg);
-  --color-incident-dark-bg: var(--color-block-bg);
-
-  /* Opacity */
-  --opacity-colored-block: .16;
 }
 
 /* BASE STRUCTURE
 -------------------------------------------------- */
 
-body {
+body:not(:has(.edit)) {
   background-color: var(--color-bg) !important;
   color: var(--color-text-primary) !important;
 }
 
 .container {
   margin-top: 0 !important;
-  padding: var(--space-lg) var(--space-md) 0;
+  padding: var(--spacing-32) var(--spacing-20) 0;
   max-width: var(--size-container-width);
 }
 
+/* Link (excluding button) */
+a:not(.btn),
+.dark a:not(.btn) {
+  color: inherit;
+  text-underline-offset: .125em;
+}
+a:not(.btn):hover,
+.dark a:not(.btn):hover,
+a:not(.btn):focus-visible {
+  outline: none;
+  color: var(--color-blue);
+}
+
 /* HEADER
 -------------------------------------------------- */
 
 /* Wrapper for logo and title */
 .title-flex {
-  margin-bottom: var(--space-lg) !important;
+  margin-bottom: var(--spacing-32) !important;
 }
 
 /* Center the logo */
@@ -135,9 +136,14 @@ body {
 }
 
 /* Resize the logo */
-.logo-wrapper img[data-v-b8247e57] {
+.logo {
-  width: var(--size-logo-width);
+  width: var(--size-logo-width) !important;
-  height: var(--size-logo-height);
+  height: var(--size-logo-height) !important;
+}
+
+/* Remove the margin of the logo */
+[dir="ltr"] .logo {
+  margin-right: 0 !important;
 }
 
 /* Remove the title adjacent to the logo */
@@ -145,195 +151,226 @@ span[data-v-7d4a7f28] {
   display: none;
 }
 
-/* ADMIN ACTIONS BAR
+/* ADMIN BUTTONS
 -------------------------------------------------- */
 
 /* Fix vertical margin of admin buttons on mobile */
-.mb-4[data-v-b8247e57]:has(.btn-info) {
+.mb-4[data-v-a2098280]:has([data-testid="edit-button"]) {
-  margin-bottom: var(--space-lg) !important;
+  margin-bottom: var(--spacing-32) !important;
 }
-.mb-4[data-v-b8247e57]:has(.btn-info) div {
+
+.mb-4[data-v-a2098280]:has([data-testid="edit-button"]) div {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-xs);
+  gap: var(--spacing-8);
 }
-.mb-4[data-v-b8247e57]:has(.btn-info) div button {
+
+.mb-4[data-v-a2098280]:has([data-testid="edit-button"]) div button {
   margin: 0 !important;
 }
 
-/* Block with admin buttons */
-.mb-4[data-v-b8247e57]:has(.btn-info) {
-  border-radius: var(--radius-md);
-  background-color: var(--color-block-bg);
-  padding: var(--space-md);
-}
-
 /* Admin button */
-.btn-info[data-v-b8247e57] {
+.mb-4[data-v-a2098280]:has([data-testid="edit-button"]) .btn-primary {
   box-shadow: none;
   border: 1px solid var(--color-btn-secondary-border);
-  border-radius: var(--radius-sm);
+  border-radius: var(--border-radius-400);
   background-color: var(--color-btn-secondary-bg);
-  padding: var(--padding-btn-y) var(--padding-btn-x);
+  padding: var(--spacing-4) var(--spacing-12);
   color: var(--color-text-heading);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-100);
+  line-height: var(--font-line-height-200);
 }
-.btn-info[data-v-b8247e57]:hover {
+.mb-4[data-v-a2098280]:has([data-testid="edit-button"]) .btn-primary:hover,
-  background-color: var(--color-btn-secondary-hover);
+.mb-4[data-v-a2098280]:has([data-testid="edit-button"]) .btn-primary:focus-visible {
+  background-color: var(--color-btn-secondary-hover-bg);
 }
-.btn-info[data-v-b8247e57]:active {
+.mb-4[data-v-a2098280]:has([data-testid="edit-button"]) .btn-primary:active {
   box-shadow: none;
-  background-color: var(--color-btn-secondary-active);
+  background-color: var(--color-btn-secondary-active-bg);
 }
-.btn-info[data-v-b8247e57] svg {
+
+.mb-4[data-v-a2098280]:has([data-testid="edit-button"]) .btn-primary svg {
   display: none;
 }
 
 /* INCIDENT BLOCK
 -------------------------------------------------- */
 
-.incident[data-v-b8247e57] {
+.incident[data-v-a2098280] {
-  margin-bottom: var(--space-md) !important;
+  margin-bottom: var(--spacing-16) !important;
   box-shadow: none;
-  border-radius: var(--radius-md);
+  border-radius: var(--border-radius-500);
-  padding: var(--space-md) !important;
+  padding: var(--spacing-20) !important;
   color: var(--color-text-heading) !important;
 }
-.incident[data-v-b8247e57].bg-info {
+.incident[data-v-a2098280].bg-info {
-  background-color: rgba(var(--rgb-color-teal), var(--opacity-colored-block)) !important;
+  border: 1px solid rgba(var(--rgb-color-teal), .23);
+  background-color: rgba(var(--rgb-color-teal), .08) !important;
 }
-.incident[data-v-b8247e57].bg-warning {
+.incident[data-v-a2098280].bg-warning {
-  background-color: rgba(var(--rgb-color-orange), var(--opacity-colored-block)) !important;
+  border: 1px solid rgba(var(--rgb-color-orange), .23);
+  background-color: rgba(var(--rgb-color-orange), .08) !important;
 }
-.incident[data-v-b8247e57].bg-danger {
+.incident[data-v-a2098280].bg-danger {
-  background-color: rgba(var(--rgb-color-red), var(--opacity-colored-block)) !important;
+  border: 1px solid rgba(var(--rgb-color-red), .23);
+  background-color: rgba(var(--rgb-color-red), .08) !important;
 }
-.incident[data-v-b8247e57].bg-primary {
+.incident[data-v-a2098280].bg-primary {
-  background-color: rgba(var(--rgb-color-green), var(--opacity-colored-block)) !important;
+  border: 1px solid rgba(var(--rgb-color-green), .23);
+  background-color: rgba(var(--rgb-color-green), .08) !important;
 }
-.incident[data-v-b8247e57].bg-light {
+.incident[data-v-a2098280].bg-light {
-  background-color: var(--color-incident-light-bg) !important;
+  box-shadow: var(--shadow-filter);
+  border: 1px solid var(--color-border);
+  background-color: var(--color-block-bg) !important;
 }
-.incident[data-v-b8247e57].bg-dark {
+.incident[data-v-a2098280].bg-dark {
-  background-color: var(--color-incident-dark-bg) !important;
+  box-shadow: var(--shadow-filter);
+  border: 1px solid var(--color-border);
+  background-color: var(--color-bg) !important;
 }
-.incident[data-v-b8247e57] h4 {
+
-  font-size: var(--font-size-heading);
+.incident[data-v-a2098280] h4 {
+  font-size: var(--font-size-300);
 }
-.incident[data-v-b8247e57] div {
+
+.incident[data-v-a2098280] div {
   color: var(--color-text-primary);
 }
 
-/* OVERALL STATUS BLOCK
+.date.mt-3 {
+  border-top: 1px solid var(--color-border);
+  padding-top: var(--spacing-20);
+}
+
+/* MAIN STATUS BLOCK
 -------------------------------------------------- */
 
-.overall-status[data-v-b8247e57] {
+.overall-status[data-v-a2098280] {
-  margin-bottom: var(--space-md) !important;
+  margin-bottom: var(--spacing-16) !important;
   box-shadow: none;
-  border-radius: var(--radius-md);
+  border-radius: var(--border-radius-500);
-  padding: var(--space-md) !important;
+  padding: var(--spacing-20) !important;
-  color: var(--color-text-overall-status);
+  color: var(--color-text-heading);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-heading);
+  font-size: var(--font-size-350);
-  line-height: var(--line-height-heading);
+  line-height: var(--font-line-height-200);
 }
-.overall-status[data-v-b8247e57]:has(.ok) {
+.overall-status[data-v-a2098280]:has(.ok) {
-  background-color: var(--color-green);
+  border: 1px solid rgba(var(--rgb-color-green), .23);
+  background-color: rgba(var(--rgb-color-green), .08);
 }
-.overall-status[data-v-b8247e57]:has(.warning) {
+.overall-status[data-v-a2098280]:has(.warning) {
-  background-color: var(--color-orange);
+  border: 1px solid rgba(var(--rgb-color-orange), .23);
+  background-color: rgba(var(--rgb-color-orange), .08);
 }
-.overall-status[data-v-b8247e57]:has(.danger) {
+.overall-status[data-v-a2098280]:has(.danger) {
-  background-color: var(--color-red);
+  border: 1px solid rgba(var(--rgb-color-red), .23);
+  background-color: rgba(var(--rgb-color-red), .08);
 }
-.overall-status[data-v-b8247e57]:has(.status-maintenance) {
+.overall-status[data-v-a2098280]:has(.status-maintenance) {
-  background-color: var(--color-blue);
+  border: 1px solid rgba(var(--rgb-color-blue), .23);
+  background-color: rgba(var(--rgb-color-blue), .08);
 }
-.overall-status[data-v-b8247e57] svg {
+
-  display: none;
+.overall-status[data-v-a2098280] div {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-20);
+}
+
+.overall-status[data-v-a2098280] svg {
+  margin-right: 0 !important;
+  width: 1.5em;
+  height: 1.5em;
+}
+.overall-status[data-v-a2098280]:has(.ok) svg {
+  color: var(--color-green);
+}
+.overall-status[data-v-a2098280]:has(.warning) svg {
+  color: var(--color-orange);
+}
+.overall-status[data-v-a2098280]:has(.danger) svg {
+  color: var(--color-red);
+}
+.overall-status[data-v-a2098280]:has(.status-maintenance) svg {
+  color: var(--color-blue);
 }
 
 /* MAINTENANCE BLOCK
 -------------------------------------------------- */
 
 .shadow-box.bg-maintenance {
-  margin: var(--space-md) 0 !important;
+  margin: var(--spacing-16) 0 !important;
   box-shadow: none;
-  border-radius: var(--radius-md);
+  border: 1px solid rgba(var(--rgb-color-blue), .23);
-  background-color: rgba(var(--rgb-color-blue), var(--opacity-colored-block)) !important;
+  border-radius: var(--border-radius-500);
-  padding: var(--space-md) !important;
+  background-color: rgba(var(--rgb-color-blue), .08) !important;
+  padding: var(--spacing-20) !important;
   color: var(--color-text-heading) !important;
 }
+
 .shadow-box.bg-maintenance .alert-heading {
   color: var(--color-text-heading);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-heading);
+  font-size: var(--font-size-300);
 }
+
 .shadow-box.bg-maintenance .content {
   color: var(--color-text-primary);
 }
-.shadow-box.bg-maintenance div[data-v-b8247e57]:not([class]) div:not([class]) {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-xs);
-}
 
 .timeslot {
+  display: flex;
   margin: 0 !important;
-  border-radius: var(--radius-timeslot);
+  border-top: 1px solid var(--color-border);
-  background-color: rgba(var(--rgb-color-blue), .13) !important;
+  border-radius: 0;
-  color: var(--color-blue) !important;
+  background-color: transparent !important;
+  padding: var(--spacing-20) 0 0;
+  color: var(--color-text-primary) !important;
+  font-size: var(--font-size-50);
 }
 
 /* USER MARKDOWN ELEMENTS
 -------------------------------------------------- */
 
 .alert-heading.p-2 {
-  margin-bottom: var(--space-lg);
+  margin-bottom: var(--spacing-32);
   padding: 0 !important;
 }
+
 .alert-heading.p-2 p {
   margin: 0;
 }
 
-/* Link (excluding button) */
-a:not(.btn),
-.dark a:not(.btn) {
-  color: inherit;
-}
-a:not(.btn):hover,
-.dark a:not(.btn):hover {
-  color: var(--color-blue);
-}
-
 /* PAGE DESCRIPTION
 -------------------------------------------------- */
 
 div > .alert-heading.p-2:has(*) {
-  margin-top: var(--space-lg);
+  margin-top: var(--spacing-32);
-  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-filter);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-500);
   background-color: var(--color-block-bg);
-  padding: var(--space-md) !important;
+  padding: var(--spacing-20) !important;
 }
 
 /* MONITOR GROUP
 -------------------------------------------------- */
 
-div[data-v-f71ca08e]:has(> .group-title) {
+div[data-v-026459e0]:has(> .group-title) {
-  margin-bottom: var(--space-md) !important;
+  margin-bottom: var(--spacing-32) !important;
-  border-radius: var(--radius-md);
-  background-color: var(--color-block-bg);
-  padding: var(--space-md);
 }
 
 /* Monitor group title */
 .group-title {
   display: flex;
   align-items: center;
-  margin-bottom: var(--space-md);
+  margin-bottom: var(--spacing-16);
   color: var(--color-text-heading);
-  font-size: var(--font-size-heading);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-350);
 }
 
 /* Monitor elements in the group */
@@ -343,23 +380,16 @@ div[data-v-f71ca08e]:has(> .group-title) {
   background-color: transparent !important;
   padding: 0;
 }
+
 .shadow-box.monitor-list > .monitor-list {
   display: grid;
-  grid-template-columns: repeat(
+  grid-template-columns: minmax(0, 1fr);
-    auto-fill,
+  gap: var(--spacing-16);
-    minmax(
-      min(var(--size-monitor-min-width), 100%),
-      var(--size-monitor-max-width)
-    )
-  );
-  grid-gap: var(--space-md);
 }
-
+/* Enable 2 columns on wider screens; comment out to disable */
-/* Adjusting grid layout at certain viewport sizes */
+@media (min-width: 532px) {
-/* It's not perfect, but it works */
+  .shadow-box.monitor-list > .monitor-list {
-@media (min-width: 540px) and (max-width: 604px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
-  :root {
-    --size-monitor-min-width: 20ch;
   }
 }
 
@@ -367,114 +397,171 @@ div[data-v-f71ca08e]:has(> .group-title) {
 -------------------------------------------------- */
 
 .monitor-list .item {
-  border: 1px solid var(--color-monitor-border);
+  box-shadow: var(--shadow-filter);
-  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
-  background-color: var(--color-monitor-bg);
+  border-radius: var(--border-radius-500);
-  padding: var(--space-md) !important;
+  background-color: var(--color-block-bg);
+  padding: var(--spacing-16) var(--spacing-20) !important;
 }
 .monitor-list .item:hover {
-  background-color: var(--color-monitor-bg) !important;
+  background-color: var(--color-block-bg) !important;
-}
-.monitor-list .item > .row {
-  flex-direction: column;
 }
+
 .monitor-list .item > .row > div {
+  display: flex;
+  flex-direction: column;
   width: 100%;
 }
 
-/* Monitor name and badge container */
+/* Monitor name and uptime percentage container */
 .info {
   display: flex;
   align-items: center;
-  margin-bottom: var(--space-xs);
+  order: 2;
-  padding: 0 var(--space-monitor-items);
+  margin-bottom: var(--spacing-8);
 }
 
 /* Monitor name */
-.item-name[data-v-f71ca08e] {
+.item-name[data-v-026459e0] {
   padding-left: 0;
   overflow: hidden;
   color: var(--color-text-heading);
+  font-weight: var(--font-weight-semibold);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* Uptime percentage badge (now just text) */
+/* Uptime percentage */
 .badge {
   all: unset;
-  order: 2;
+  order: 1;
   margin-left: auto;
   background-color: transparent !important;
+  color: var(--color-text-primary) !important;
+}
+
+/* Monitor tags wrapper */
+.extra-info[data-v-026459e0] {
+  flex-wrap: wrap;
+  order: 1;
+  gap: var(--spacing-8);
+  margin-top: var(--spacing-4);
+}
+.extra-info:not(:has(div[data-v-12c40cbd])) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.extra-info[data-v-026459e0] div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-8);
+  min-width: 0;
+}
+
+/* Monitor tags */
+.tag-wrapper {
+  align-items: center;
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
+}
+.tag-wrapper[style*="rgb(75, 85, 99)"] {
+  border: 1px solid rgba(var(--rgb-color-gray), .23);
+  background-color: rgba(var(--rgb-color-gray), .08) !important;
   color: var(--color-gray) !important;
 }
-.badge.bg-danger {
+.tag-wrapper[style*="rgb(220, 38, 38)"] {
+  border: 1px solid rgba(var(--rgb-color-red), .23);
+  background-color: rgba(var(--rgb-color-red), .08) !important;
   color: var(--color-red) !important;
 }
-.badge.bg-warning {
+.tag-wrapper[style*="rgb(217, 119, 6)"] {
+  border: 1px solid rgba(var(--rgb-color-orange), .23);
+  background-color: rgba(var(--rgb-color-orange), .08) !important;
   color: var(--color-orange) !important;
 }
-.badge.bg-primary {
+.tag-wrapper[style*="rgb(5, 150, 105)"] {
+  border: 1px solid rgba(var(--rgb-color-green), .23);
+  background-color: rgba(var(--rgb-color-green), .08) !important;
   color: var(--color-green) !important;
 }
-.badge.bg-maintenance {
+.tag-wrapper[style*="rgb(37, 99, 235)"] {
+  border: 1px solid rgba(var(--rgb-color-blue), .23);
+  background-color: rgba(var(--rgb-color-blue), .08) !important;
   color: var(--color-blue) !important;
 }
-
+.tag-wrapper[style*="rgb(79, 70, 229)"] {
-/* Extra vertical indentation */
+  border: 1px solid rgba(var(--rgb-color-indigo), .23);
-.extra-info[data-v-f71ca08e] {
+  background-color: rgba(var(--rgb-color-indigo), .08) !important;
-  display: none;
+  color: var(--color-indigo) !important;
+}
+.tag-wrapper[style*="rgb(124, 58, 237)"] {
+  border: 1px solid rgba(var(--rgb-color-purple), .23);
+  background-color: rgba(var(--rgb-color-purple), .08) !important;
+  color: var(--color-purple) !important;
+}
+.tag-wrapper[style*="rgb(219, 39, 119)"] {
+  border: 1px solid rgba(var(--rgb-color-pink), .23);
+  background-color: rgba(var(--rgb-color-pink), .08) !important;
+  color: var(--color-pink) !important;
 }
 
-/* Wrapper for the uptime history timeline and daily uptime text */
+/* Wrapper for the uptime bars home and uptime time */
 .wrap {
   padding: 0 !important;
 }
-.mobile .wrap {
-  padding-bottom: 6px !important;
-}
 
-/* Uptime history timeline */
+/* Uptime bars home */
 .hp-bar-big {
   display: flex;
-  justify-content: center;
+  margin-bottom: 6px;
-  padding-bottom: var(--space-xs);
+  padding: 0;
 }
 .mobile .hp-bar-big {
   padding-bottom: 0;
 }
 
-/* Daily bar in the uptime history timeline */
+/* Uptime bar in the uptime bars home */
-.hp-bar-big .beat[data-v-636dc6a9] {
+.hp-bar-big .beat-hover-area .beat[data-v-ce0d40a3] {
-  margin: 0 2px !important;
+  border-radius: 0;
   background-color: var(--color-green);
-  height: var(--size-daily-bar-height) !important;
+  width: 100% !important;
+  height: var(--size-uptime-bar-height) !important;
 }
-.hp-bar-big .beat[data-v-636dc6a9]:not(.empty):hover {
+.hp-bar-big .beat-hover-area[data-v-ce0d40a3] {
+  flex: 1;
+  padding: 0 1px 0 0 !important;
+}
+.hp-bar-big .beat-hover-area[data-v-ce0d40a3]:not(.empty):hover,
+.hp-bar-big .beat-hover-area[data-v-ce0d40a3]:not(.empty):focus-visible {
   transform: none;
   opacity: .7;
+  outline: none;
 }
-.hp-bar-big .beat[data-v-636dc6a9]:first-of-type {
+.hp-bar-big .beat-hover-area:first-of-type .beat[data-v-ce0d40a3] {
-  margin-left: 0 !important;
+  border-top-left-radius: var(--border-radius-200);
+  border-bottom-left-radius: var(--border-radius-200);
 }
-.hp-bar-big .beat[data-v-636dc6a9]:last-of-type {
+.hp-bar-big .beat-hover-area:last-of-type .beat[data-v-ce0d40a3] {
-  margin-right: 0 !important;
+  margin: 0 !important;
+  border-top-right-radius: var(--border-radius-200);
+  border-bottom-right-radius: var(--border-radius-200);
+  padding: 0 !important;
 }
-.hp-bar-big .beat[data-v-636dc6a9].empty {
+.hp-bar-big .beat-hover-area .beat[data-v-ce0d40a3].empty {
-  background-color: var(--color-gray);
+  background-color: var(--color-uptime-bar-empty-bg) !important;
 }
-.hp-bar-big .beat[data-v-636dc6a9].down {
+.hp-bar-big .beat-hover-area .beat[data-v-ce0d40a3].down {
   background-color: var(--color-red);
 }
-.hp-bar-big .beat[data-v-636dc6a9].pending {
+.hp-bar-big .beat-hover-area .beat[data-v-ce0d40a3].pending {
   background-color: var(--color-orange);
 }
-.hp-bar-big .beat[data-v-636dc6a9].maintenance {
+.hp-bar-big .beat-hover-area .beat[data-v-ce0d40a3].maintenance {
   background-color: var(--color-blue);
 }
 
-/* Daily uptime text (below day bars) */
+/* Uptime time (below uptime bars) */
-.word[data-v-636dc6a9] {
+.word[data-v-ce0d40a3] {
-  margin: 0 var(--space-monitor-items) !important;
   color: var(--color-text-primary);
 }
 
@@ -482,19 +569,19 @@ div[data-v-f71ca08e]:has(> .group-title) {
 -------------------------------------------------- */
 
 /* User markdown, Uptime Kuma branding, refresh timer */
-footer[data-v-b8247e57] {
+footer[data-v-a2098280] {
-  margin: var(--space-lg) 0 !important;
+  margin: var(--spacing-32) 0 !important;
   color: var(--color-text-secondary);
 }
 
 /* Extra spacing if the user footer has anything */
 footer .alert-heading.p-2:has(*) {
-  margin-bottom: var(--space-md) !important;
+  margin-bottom: var(--spacing-16) !important;
 }
 
 /* Refresh timer */
-/* Remove/comment "display: none" to restore visibility */
+/* Remove or comment "display: none" to restore visibility */
-.refresh-info[data-v-b8247e57] {
+.refresh-info[data-v-a2098280] {
   display: none;
   opacity: 1;
   margin-bottom: 0 !important;
@@ -508,15 +595,53 @@ footer .alert-heading.p-2:has(*) {
 }
 
 /* Input field for the monitor group name */
-.edit span[data-v-7d4a7f28][data-v-f71ca08e] {
+.edit span[data-v-7d4a7f28][data-v-026459e0] {
-  background-color: var(--color-input-field);
+  padding: var(--spacing-4) var(--spacing-8);
-  padding: .25rem .5rem;
 }
 
 /* Input field for page description and footer */
-.edit h4[data-v-7d4a7f28][data-v-b8247e57][contenteditable="true"],
+.edit h4[data-v-7d4a7f28][data-v-a2098280][contenteditable="true"],
-.edit div[data-v-7d4a7f28][data-v-b8247e57] {
+.edit div[data-v-7d4a7f28][data-v-a2098280] {
-  background-color: var(--color-input-field);
+  padding: var(--spacing-8) var(--spacing-12) !important;
-  padding: var(--space-sm) var(--space-md) !important;
   color: var(--color-text-heading);
 }
+
+/* OVERLAYS
+-------------------------------------------------- */
+
+/* Uptime bar hover tooltip */
+.tooltip-wrapper .tooltip-content[data-v-abd90d66] {
+  box-shadow: var(--shadow-filter);
+  border-color: var(--color-border);
+  background-color: var(--color-tooltip-bg) !important;
+  text-align: start;
+}
+.tooltip-wrapper .tooltip-content[data-v-abd90d66]::before {
+  display: none;
+}
+
+.tooltip-wrapper .tooltip-content .tooltip-status[data-v-abd90d66] {
+  font-size: var(--font-size-100);
+}
+.tooltip-wrapper .tooltip-content .tooltip-status.status-up[data-v-abd90d66] {
+  color: var(--color-green);
+}
+.tooltip-wrapper .tooltip-content .tooltip-status.status-pending[data-v-abd90d66] {
+  color: var(--color-orange);
+}
+.tooltip-wrapper .tooltip-content .tooltip-status.status-down[data-v-abd90d66] {
+  color: var(--color-red);
+}
+.tooltip-wrapper .tooltip-content .tooltip-status.status-maintenance[data-v-abd90d66] {
+  color: var(--color-blue);
+}
+
+.tooltip-wrapper .tooltip-content .tooltip-time[data-v-abd90d66] {
+  margin-bottom: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-50);
+}
+
+.tooltip-wrapper .tooltip-arrow[data-v-abd90d66] {
+  display: none;
+}