diff --git a/README.md b/README.md index 7e0d2bd..1d9a38c 100644 --- a/README.md +++ b/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 diff --git a/main.css b/main.css index e6b9271..ad248f6 100644 --- a/main.css +++ b/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; +}