fix: support Uptime Kuma v2.0.0-beta.4 (#2)

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

* docs: update compatibility information

README.md

@@ -26,7 +26,7 @@
 ## Features
 
 - Modern design inspired by top monitoring services
-- Support for Uptime Kuma v1 and v2
+- Support for Uptime Kuma v1 and v2 (tested up to 2.0.0-beta.4)
 - Support for light and dark themes
 - Hidden refresh timer for a cleaner look (can be easily restored)
 - Clean, easily customizable and extendable code

main.css

@@ -24,6 +24,7 @@
   --color-block-bg: #fff;
   --color-border: rgba(0, 0, 0, .1);
   --color-uptime-bar-empty-bg: #d7dbdd;
+  --color-tooltip-bg: #fff;
 
   /* Button: Secondary */
   --color-btn-secondary-bg: transparent;
@@ -53,6 +54,7 @@
   --border-radius-500: .5rem;
 
   /* Typography */
+  --font-size-50: 0.75rem;
   --font-size-100: .875rem;
   --font-size-300: 1.125rem;
   --font-size-350: 1.25rem;
@@ -76,6 +78,7 @@
   --color-block-bg: #1e1e1e;
   --color-border: rgba(255, 255, 255, .07);
   --color-uptime-bar-empty-bg: #424949;
+  --color-tooltip-bg: #1e1e1e;
 
   /* Button: Secondary */
   --color-btn-secondary-bg: transparent;
@@ -143,25 +146,25 @@ span[data-v-7d4a7f28] {
 
 /* Fix vertical margin of admin buttons on mobile */
 .mb-4[data-v-b8247e57]:has(.btn-info),
-.mb-4[data-v-84507135]:has(.btn-info) {
+.mb-4[data-v-a2098280]:has([data-testid="edit-button"]) {
   margin-bottom: var(--spacing-32) !important;
 }
 
 .mb-4[data-v-b8247e57]:has(.btn-info) div,
-.mb-4[data-v-84507135]:has(.btn-info) div {
+.mb-4[data-v-a2098280]:has([data-testid="edit-button"]) div {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-8);
 }
 
 .mb-4[data-v-b8247e57]:has(.btn-info) div button,
-.mb-4[data-v-84507135]:has(.btn-info) div button {
+.mb-4[data-v-a2098280]:has([data-testid="edit-button"]) div button {
   margin: 0 !important;
 }
 
 /* Admin button */
 .btn-info[data-v-b8247e57],
-.btn-info[data-v-84507135] {
+.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(--border-radius-400);
@@ -173,17 +176,17 @@ span[data-v-7d4a7f28] {
   line-height: var(--font-line-height-200);
 }
 .btn-info[data-v-b8247e57]:hover,
-.btn-info[data-v-84507135]:hover {
+.mb-4[data-v-a2098280]:has([data-testid="edit-button"]) .btn-primary:hover {
   background-color: var(--color-btn-secondary-hover-bg);
 }
 .btn-info[data-v-b8247e57]:active,
-.btn-info[data-v-84507135]:active {
+.mb-4[data-v-a2098280]:has([data-testid="edit-button"]) .btn-primary:active {
   box-shadow: none;
   background-color: var(--color-btn-secondary-active-bg);
 }
 
 .btn-info[data-v-b8247e57] svg,
-.btn-info[data-v-84507135] svg {
+.mb-4[data-v-a2098280]:has([data-testid="edit-button"]) .btn-primary svg {
   display: none;
 }
 
@@ -191,7 +194,7 @@ span[data-v-7d4a7f28] {
 -------------------------------------------------- */
 
 .incident[data-v-b8247e57],
-.incident[data-v-84507135] {
+.incident[data-v-a2098280] {
   margin-bottom: var(--spacing-16) !important;
   box-shadow: none;
   border-radius: var(--border-radius-500);
@@ -199,45 +202,45 @@ span[data-v-7d4a7f28] {
   color: var(--color-text-heading) !important;
 }
 .incident[data-v-b8247e57].bg-info,
-.incident[data-v-84507135].bg-info {
+.incident[data-v-a2098280].bg-info {
   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-84507135].bg-warning {
+.incident[data-v-a2098280].bg-warning {
   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-84507135].bg-danger {
+.incident[data-v-a2098280].bg-danger {
   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-84507135].bg-primary {
+.incident[data-v-a2098280].bg-primary {
   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-84507135].bg-light {
+.incident[data-v-a2098280].bg-light {
   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-84507135].bg-dark {
+.incident[data-v-a2098280].bg-dark {
   box-shadow: var(--shadow-filter);
   border: 1px solid var(--color-border);
   background-color: var(--color-bg) !important;
 }
 
 .incident[data-v-b8247e57] h4,
-.incident[data-v-84507135] h4 {
+.incident[data-v-a2098280] h4 {
   font-size: var(--font-size-300);
 }
 
 .incident[data-v-b8247e57] div,
-.incident[data-v-84507135] div {
+.incident[data-v-a2098280] div {
   color: var(--color-text-primary);
 }
 
@@ -250,7 +253,7 @@ span[data-v-7d4a7f28] {
 -------------------------------------------------- */
 
 .overall-status[data-v-b8247e57],
-.overall-status[data-v-84507135] {
+.overall-status[data-v-a2098280] {
   margin-bottom: var(--spacing-16) !important;
   box-shadow: none;
   border-radius: var(--border-radius-500);
@@ -261,53 +264,53 @@ span[data-v-7d4a7f28] {
   line-height: var(--font-line-height-200);
 }
 .overall-status[data-v-b8247e57]:has(.ok),
-.overall-status[data-v-84507135]:has(.ok) {
+.overall-status[data-v-a2098280]:has(.ok) {
   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-84507135]:has(.warning) {
+.overall-status[data-v-a2098280]:has(.warning) {
   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-84507135]:has(.danger) {
+.overall-status[data-v-a2098280]:has(.danger) {
   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-84507135]:has(.status-maintenance) {
+.overall-status[data-v-a2098280]:has(.status-maintenance) {
   border: 1px solid rgba(var(--rgb-color-blue), .23);
   background-color: rgba(var(--rgb-color-blue), .08);
 }
 
 .overall-status[data-v-b8247e57] div,
-.overall-status[data-v-84507135] div {
+.overall-status[data-v-a2098280] div {
   display: flex;
   align-items: center;
   gap: var(--spacing-20);
 }
 
 .overall-status[data-v-b8247e57] svg,
-.overall-status[data-v-84507135] svg {
+.overall-status[data-v-a2098280] svg {
   margin-right: 0 !important;
   width: 1.5em;
   height: 1.5em;
 }
 .overall-status[data-v-b8247e57]:has(.ok) svg,
-.overall-status[data-v-84507135]:has(.ok) svg {
+.overall-status[data-v-a2098280]:has(.ok) svg {
   color: var(--color-green);
 }
 .overall-status[data-v-b8247e57]:has(.warning) svg,
-.overall-status[data-v-84507135]:has(.warning) svg {
+.overall-status[data-v-a2098280]:has(.warning) svg {
   color: var(--color-orange);
 }
 .overall-status[data-v-b8247e57]:has(.danger) svg,
-.overall-status[data-v-84507135]:has(.danger) svg {
+.overall-status[data-v-a2098280]:has(.danger) svg {
   color: var(--color-red);
 }
 .overall-status[data-v-b8247e57]:has(.status-maintenance) svg,
-.overall-status[data-v-84507135]:has(.status-maintenance) svg {
+.overall-status[data-v-a2098280]:has(.status-maintenance) svg {
   color: var(--color-blue);
 }
 
@@ -335,7 +338,7 @@ span[data-v-7d4a7f28] {
 }
 
 .shadow-box.bg-maintenance div[data-v-b8247e57]:not([class]) div:not([class]),
-.shadow-box.bg-maintenance div[data-v-84507135]:not([class]) div:not([class]) {
+.shadow-box.bg-maintenance div[data-v-a2098280]:not([class]) div:not([class]) {
   display: flex;
   flex-wrap: wrap;
   gap: 0 var(--spacing-8);
@@ -349,6 +352,7 @@ span[data-v-7d4a7f28] {
   background-color: transparent !important;
   padding: 0;
   color: var(--color-text-primary) !important;
+  font-size: var(--font-size-50);
 }
 
 /* USER MARKDOWN ELEMENTS
@@ -547,7 +551,7 @@ div[data-v-026459e0]:has(> .group-title) {
 
 /* Uptime bar in the uptime bars home */
 .hp-bar-big .beat[data-v-636dc6a9],
-.hp-bar-big .beat-hover-area .beat[data-v-3fe48e5d] {
+.hp-bar-big .beat-hover-area .beat[data-v-ce0d40a3] {
   border-radius: 0;
   background-color: var(--color-green);
   width: 100% !important;
@@ -557,47 +561,47 @@ div[data-v-026459e0]:has(> .group-title) {
   flex: 1;
   margin: 0 1px 0 0 !important;
 }
-.hp-bar-big .beat-hover-area[data-v-3fe48e5d] {
+.hp-bar-big .beat-hover-area[data-v-ce0d40a3] {
   flex: 1;
   padding: 0 1px 0 0 !important;
 }
 .hp-bar-big .beat[data-v-636dc6a9]:not(.empty):hover,
-.hp-bar-big .beat-hover-area[data-v-3fe48e5d]:not(.empty):hover {
+.hp-bar-big .beat-hover-area[data-v-ce0d40a3]:not(.empty):hover {
   transform: none;
   opacity: .7;
 }
 .hp-bar-big .beat[data-v-636dc6a9]:first-of-type,
-.hp-bar-big .beat-hover-area:first-of-type .beat[data-v-3fe48e5d] {
+.hp-bar-big .beat-hover-area:first-of-type .beat[data-v-ce0d40a3] {
   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-3fe48e5d] {
+.hp-bar-big .beat-hover-area:last-of-type .beat[data-v-ce0d40a3] {
   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-3fe48e5d].empty {
+.hp-bar-big .beat-hover-area .beat[data-v-ce0d40a3].empty {
   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-3fe48e5d].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-3fe48e5d].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-3fe48e5d].maintenance {
+.hp-bar-big .beat-hover-area .beat[data-v-ce0d40a3].maintenance {
   background-color: var(--color-blue);
 }
 
 /* Uptime time (below uptime bars) */
 .word[data-v-636dc6a9],
-.word[data-v-3fe48e5d] {
+.word[data-v-ce0d40a3] {
   color: var(--color-text-primary);
 }
 
@@ -606,7 +610,7 @@ div[data-v-026459e0]:has(> .group-title) {
 
 /* User markdown, Uptime Kuma branding, refresh timer */
 footer[data-v-b8247e57],
-footer[data-v-84507135] {
+footer[data-v-a2098280] {
   margin: var(--spacing-32) 0 !important;
   color: var(--color-text-secondary);
 }
@@ -619,7 +623,7 @@ footer .alert-heading.p-2:has(*) {
 /* Refresh timer */
 /* Remove or comment "display: none" to restore visibility */
 .refresh-info[data-v-b8247e57],
-.refresh-info[data-v-84507135]{
+.refresh-info[data-v-a2098280]{
   display: none;
   opacity: 1;
   margin-bottom: 0 !important;
@@ -640,9 +644,49 @@ footer .alert-heading.p-2:has(*) {
 
 /* Input field for page description and footer */
 .edit h4[data-v-7d4a7f28][data-v-b8247e57][contenteditable="true"],
-.edit h4[data-v-7d4a7f28][data-v-84507135][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-84507135] {
+.edit div[data-v-7d4a7f28][data-v-a2098280] {
   padding: var(--spacing-8) var(--spacing-12) !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;
+}