External/cute-kuma
1
0
Fork 0
mirror of https://github.com/dermv/cute-kuma.git synced 2025-12-29 16:14:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Redesign, refactor and fixes

Browse Source
This commit is contained in:
Denis Romanov
2025-06-15 23:19:24 +04:00
committed by GitHub
parent ab057a1b8c
commit b604ab53a4
1 changed files with 198 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

377
main.css
View File

@@ -3,106 +3,90 @@
:root { :root {
/* Palette colors */ /* Palette colors */
--color-gray: #82878c; --color-gray: #d7dbdd;
--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;
/* Palette RGB colors */ /* Palette RGB colors */
--rgb-color-gray: 130, 135, 140; --rgb-color-gray: 215, 219, 221;
--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;
/* Light theme semantic colors */ /* Light theme semantic colors */
--color-bg: #fff; --color-bg: #fbfbfc;
--color-text-primary: #555; --color-text-primary: #566573;
--color-text-heading: #141414; --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-input-bg: #dcdcdc;
--color-input-field: #dcdcdc;
/* Button: Secondary */ /* Button: Secondary */
--color-btn-secondary-bg: transparent; --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); --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-container-width: 864px;
--size-edit-container-width: 1164px; --size-edit-container-width: 1164px;
--size-logo-width: 48px; --size-logo-width: 48px;
--size-logo-height: 48px; --size-logo-height: 48px;
--size-daily-bar-height: 20px; --size-uptime-day-bar-height: 24px;
/* Spacing */ /* 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 */ /* 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 */ /* Typography */
--font-size-sm: .875rem; --font-size-100: .875rem;
--font-size-heading: 1.125rem; --font-size-300: 1.125rem;
--font-size-350: 1.25rem;
--font-weight-medium: 500; --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 THEME OVERRIDES
-------------------------------------------------- */ -------------------------------------------------- */
.dark { .dark {
/* Palette colors */
--color-gray: #424949;
/* Semantic colors */ /* Semantic 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-input-bg: #323232;
--color-input-field: #323232;
/* Button: Secondary */ /* Button: Secondary */
--color-btn-secondary-bg: transparent; --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); --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 /* BASE STRUCTURE
@@ -115,7 +99,7 @@ body {
.container { .container {
margin-top: 0 !important; margin-top: 0 !important;
padding: var(--space-lg) var(--space-md) 0; padding: var(--spacing-32) var(--spacing-16) 0;
max-width: var(--size-container-width); max-width: var(--size-container-width);
} }
@@ -124,7 +108,7 @@ body {
/* Wrapper for logo and title */ /* Wrapper for logo and title */
.title-flex { .title-flex {
margin-bottom: var(--space-lg) !important; margin-bottom: var(--spacing-32) !important;
} }
/* Center the logo */ /* Center the logo */
@@ -155,47 +139,40 @@ span[data-v-7d4a7f28] {
/* Fix vertical margin of admin buttons on mobile */ /* Fix vertical margin of admin buttons on mobile */
.mb-4[data-v-b8247e57]:has(.btn-info), .mb-4[data-v-b8247e57]:has(.btn-info),
.mb-4[data-v-84507135]:has(.btn-info) { .mb-4[data-v-84507135]:has(.btn-info) {
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-b8247e57]:has(.btn-info) div,
.mb-4[data-v-84507135]:has(.btn-info) div { .mb-4[data-v-84507135]:has(.btn-info) div {
display: flex; display: flex;
flex-wrap: wrap; 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-b8247e57]:has(.btn-info) div button,
.mb-4[data-v-84507135]:has(.btn-info) div button { .mb-4[data-v-84507135]:has(.btn-info) div button {
margin: 0 !important; margin: 0 !important;
} }
/* Block with admin buttons */
.mb-4[data-v-b8247e57]:has(.btn-info),
.mb-4[data-v-84507135]:has(.btn-info) {
border-radius: var(--radius-md);
background-color: var(--color-block-bg);
padding: var(--space-md);
}
/* Admin button */ /* Admin button */
.btn-info[data-v-b8247e57], .btn-info[data-v-b8247e57],
.btn-info[data-v-84507135] { .btn-info[data-v-84507135] {
box-shadow: none; box-shadow: none;
border: 1px solid var(--color-btn-secondary-border); 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); 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); color: var(--color-text-heading);
font-weight: var(--font-weight-medium); 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, .btn-info[data-v-b8247e57]:hover,
.btn-info[data-v-84507135]:hover { .btn-info[data-v-84507135]:hover {
background-color: var(--color-btn-secondary-hover); background-color: var(--color-btn-secondary-hover-bg);
} }
.btn-info[data-v-b8247e57]:active, .btn-info[data-v-b8247e57]:active,
.btn-info[data-v-84507135]:active { .btn-info[data-v-84507135]:active {
box-shadow: none; box-shadow: none;
background-color: var(--color-btn-secondary-active); background-color: var(--color-btn-secondary-active-bg);
} }
.btn-info[data-v-b8247e57] svg, .btn-info[data-v-b8247e57] svg,
.btn-info[data-v-84507135] svg { .btn-info[data-v-84507135] svg {
@@ -207,95 +184,136 @@ span[data-v-7d4a7f28] {
.incident[data-v-b8247e57], .incident[data-v-b8247e57],
.incident[data-v-84507135] { .incident[data-v-84507135] {
margin-bottom: var(--space-md) !important; margin-bottom: var(--spacing-16) !important;
box-shadow: none; 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; color: var(--color-text-heading) !important;
} }
.incident[data-v-b8247e57].bg-info, .incident[data-v-b8247e57].bg-info,
.incident[data-v-84507135].bg-info { .incident[data-v-84507135].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-b8247e57].bg-warning,
.incident[data-v-84507135].bg-warning { .incident[data-v-84507135].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-b8247e57].bg-danger,
.incident[data-v-84507135].bg-danger { .incident[data-v-84507135].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-b8247e57].bg-primary,
.incident[data-v-84507135].bg-primary { .incident[data-v-84507135].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-b8247e57].bg-light,
.incident[data-v-84507135].bg-light { .incident[data-v-84507135].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-b8247e57].bg-dark,
.incident[data-v-84507135].bg-dark { .incident[data-v-84507135].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, .incident[data-v-b8247e57] h4,
.incident[data-v-84507135] h4 { .incident[data-v-84507135] h4 {
font-size: var(--font-size-heading); font-size: var(--font-size-300);
} }
.incident[data-v-b8247e57] div, .incident[data-v-b8247e57] div,
.incident[data-v-84507135] div { .incident[data-v-84507135] div {
color: var(--color-text-primary); color: var(--color-text-primary);
} }
.date.mt-3 {
border-top: 1px solid var(--color-border);
padding-top: var(--spacing-20);
}
/* OVERALL STATUS BLOCK /* OVERALL STATUS BLOCK
-------------------------------------------------- */ -------------------------------------------------- */
.overall-status[data-v-b8247e57], .overall-status[data-v-b8247e57],
.overall-status[data-v-84507135] { .overall-status[data-v-84507135] {
margin-bottom: var(--space-md) !important; margin-bottom: var(--spacing-16) !important;
box-shadow: none; 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-b8247e57] div,
.overall-status[data-v-84507135]:has(.ok) { .overall-status[data-v-84507135] div {
background-color: var(--color-green); display: flex;
} align-items: center;
.overall-status[data-v-b8247e57]:has(.warning), gap: var(--spacing-20);
.overall-status[data-v-84507135]:has(.warning) {
background-color: var(--color-orange);
}
.overall-status[data-v-b8247e57]:has(.danger),
.overall-status[data-v-84507135]:has(.danger) {
background-color: var(--color-red);
}
.overall-status[data-v-b8247e57]:has(.status-maintenance),
.overall-status[data-v-84507135]:has(.status-maintenance) {
background-color: var(--color-blue);
} }
.overall-status[data-v-b8247e57] svg, .overall-status[data-v-b8247e57] svg,
.overall-status[data-v-84507135] svg { .overall-status[data-v-84507135] svg {
display: none; margin-right: 0 !important;
width: 1.5em;
height: 1.5em;
}
.overall-status[data-v-b8247e57]:has(.ok),
.overall-status[data-v-84507135]: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(.ok) svg,
.overall-status[data-v-84507135]:has(.ok) svg {
color: var(--color-green);
}
.overall-status[data-v-b8247e57]:has(.warning),
.overall-status[data-v-84507135]: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(.warning) svg,
.overall-status[data-v-84507135]:has(.warning) svg {
color: var(--color-orange);
}
.overall-status[data-v-b8247e57]:has(.danger),
.overall-status[data-v-84507135]: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(.danger) svg,
.overall-status[data-v-84507135]:has(.danger) svg {
color: var(--color-red);
}
.overall-status[data-v-b8247e57]:has(.status-maintenance),
.overall-status[data-v-84507135]: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]:has(.status-maintenance) svg,
.overall-status[data-v-84507135]:has(.status-maintenance) svg {
color: var(--color-blue);
} }
/* MAINTENANCE BLOCK /* MAINTENANCE BLOCK
-------------------------------------------------- */ -------------------------------------------------- */
.shadow-box.bg-maintenance { .shadow-box.bg-maintenance {
margin: var(--space-md) 0 !important; margin: var(--spacing-16) 0 !important;
box-shadow: none; 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; color: var(--color-text-heading) !important;
} }
.shadow-box.bg-maintenance .alert-heading { .shadow-box.bg-maintenance .alert-heading {
color: var(--color-text-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 { .shadow-box.bg-maintenance .content {
color: var(--color-text-primary); color: var(--color-text-primary);
@@ -304,21 +322,24 @@ span[data-v-7d4a7f28] {
.shadow-box.bg-maintenance div[data-v-84507135]:not([class]) div:not([class]) { .shadow-box.bg-maintenance div[data-v-84507135]:not([class]) div:not([class]) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--space-xs); gap: 0 var(--spacing-8);
border-top: 1px solid var(--color-border);
padding-top: var(--spacing-20);
} }
.timeslot { .timeslot {
margin: 0 !important; margin: 0 !important;
border-radius: var(--radius-timeslot); border-radius: 0;
background-color: rgba(var(--rgb-color-blue), .13) !important; background-color: transparent !important;
color: var(--color-blue) !important; padding: 0;
color: var(--color-text-primary) !important;
} }
/* USER MARKDOWN ELEMENTS /* USER MARKDOWN ELEMENTS
-------------------------------------------------- */ -------------------------------------------------- */
.alert-heading.p-2 { .alert-heading.p-2 {
margin-bottom: var(--space-lg); margin-bottom: var(--spacing-32);
padding: 0 !important; padding: 0 !important;
} }
.alert-heading.p-2 p { .alert-heading.p-2 p {
@@ -339,10 +360,12 @@ a:not(.btn):hover,
-------------------------------------------------- */ -------------------------------------------------- */
div > .alert-heading.p-2:has(*) { 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); background-color: var(--color-block-bg);
padding: var(--space-md) !important; padding: var(--spacing-20) !important;
} }
/* MONITOR GROUP /* MONITOR GROUP
@@ -350,19 +373,17 @@ div > .alert-heading.p-2:has(*) {
div[data-v-f71ca08e]:has(> .group-title), div[data-v-f71ca08e]:has(> .group-title),
div[data-v-026459e0]: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 */ /* Monitor group title */
.group-title { .group-title {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: var(--space-md); margin-bottom: var(--spacing-16);
color: var(--color-text-heading); 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 */ /* Monitor elements in the group */
@@ -376,10 +397,10 @@ div[data-v-026459e0]:has(> .group-title) {
.shadow-box.monitor-list > .monitor-list { .shadow-box.monitor-list > .monitor-list {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
gap: var(--space-md); gap: var(--spacing-16);
} }
@media (min-width: 540px) { @media (min-width: 532px) {
.shadow-box.monitor-list > .monitor-list { .shadow-box.monitor-list > .monitor-list {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
@@ -389,13 +410,14 @@ div[data-v-026459e0]:has(> .group-title) {
-------------------------------------------------- */ -------------------------------------------------- */
.monitor-list .item { .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 { .monitor-list .item:hover {
background-color: var(--color-monitor-bg) !important; background-color: var(--color-block-bg) !important;
} }
.monitor-list .item > .row { .monitor-list .item > .row {
flex-direction: column; flex-direction: column;
@@ -408,8 +430,7 @@ div[data-v-026459e0]:has(> .group-title) {
.info { .info {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: var(--space-xs); margin-bottom: var(--spacing-8);
padding: 0 var(--space-monitor-items);
} }
/* Monitor name */ /* Monitor name */
@@ -418,6 +439,7 @@ div[data-v-026459e0]:has(> .group-title) {
padding-left: 0; padding-left: 0;
overflow: hidden; overflow: hidden;
color: var(--color-text-heading); color: var(--color-text-heading);
font-weight: var(--font-weight-semibold);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
@@ -428,19 +450,7 @@ div[data-v-026459e0]:has(> .group-title) {
order: 2; order: 2;
margin-left: auto; margin-left: auto;
background-color: transparent !important; background-color: transparent !important;
color: var(--color-gray) !important; color: var(--color-text-primary) !important;
}
.badge.bg-danger {
color: var(--color-red) !important;
}
.badge.bg-warning {
color: var(--color-orange) !important;
}
.badge.bg-primary {
color: var(--color-green) !important;
}
.badge.bg-maintenance {
color: var(--color-blue) !important;
} }
/* Extra vertical indentation */ /* Extra vertical indentation */
@@ -453,26 +463,32 @@ div[data-v-026459e0]:has(> .group-title) {
.wrap { .wrap {
padding: 0 !important; padding: 0 !important;
} }
.mobile .wrap {
padding-bottom: 6px !important;
}
/* Uptime history timeline */ /* Uptime history timeline */
.hp-bar-big { .hp-bar-big {
display: flex; display: flex;
justify-content: center; margin-bottom: 6px;
padding-bottom: var(--space-xs); padding: 0;
} }
.mobile .hp-bar-big { .mobile .hp-bar-big {
padding-bottom: 0; padding-bottom: 0;
} }
/* Daily bar in the uptime history timeline */ /* Uptime day bar in the uptime history timeline */
.hp-bar-big .beat[data-v-636dc6a9], .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-3fe48e5d] {
margin: 0 2px !important; border-radius: 0;
background-color: var(--color-green); background-color: var(--color-green);
height: var(--size-daily-bar-height) !important; width: 100% !important;
height: var(--size-uptime-day-bar-height) !important;
}
.hp-bar-big .beat[data-v-636dc6a9] {
flex: 1;
margin: 0 1px 0 0 !important;
}
.hp-bar-big .beat-hover-area[data-v-3fe48e5d] {
flex: 1;
padding: 0 1px 0 0 !important;
} }
.hp-bar-big .beat[data-v-636dc6a9]:not(.empty):hover, .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-3fe48e5d]:not(.empty):hover {
@@ -480,16 +496,20 @@ div[data-v-026459e0]:has(> .group-title) {
opacity: .7; opacity: .7;
} }
.hp-bar-big .beat[data-v-636dc6a9]:first-of-type, .hp-bar-big .beat[data-v-636dc6a9]:first-of-type,
.hp-bar-big .beat-hover-area .beat[data-v-3fe48e5d]:first-of-type { .hp-bar-big .beat-hover-area:first-of-type .beat[data-v-3fe48e5d] {
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[data-v-636dc6a9]:last-of-type,
.hp-bar-big .beat-hover-area .beat[data-v-3fe48e5d]:last-of-type { .hp-bar-big .beat-hover-area:last-of-type .beat[data-v-3fe48e5d] {
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[data-v-636dc6a9].empty,
.hp-bar-big .beat-hover-area .beat[data-v-3fe48e5d].empty { .hp-bar-big .beat-hover-area .beat[data-v-3fe48e5d].empty {
background-color: var(--color-gray); background-color: var(--color-gray) !important;
} }
.hp-bar-big .beat[data-v-636dc6a9].down, .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-3fe48e5d].down {
@@ -507,7 +527,6 @@ div[data-v-026459e0]:has(> .group-title) {
/* Daily uptime text (below day bars) */ /* Daily uptime text (below day bars) */
.word[data-v-636dc6a9], .word[data-v-636dc6a9],
.word[data-v-3fe48e5d] { .word[data-v-3fe48e5d] {
margin: 0 var(--space-monitor-items) !important;
color: var(--color-text-primary); color: var(--color-text-primary);
} }
@@ -517,13 +536,13 @@ div[data-v-026459e0]:has(> .group-title) {
/* User markdown, Uptime Kuma branding, refresh timer */ /* User markdown, Uptime Kuma branding, refresh timer */
footer[data-v-b8247e57], footer[data-v-b8247e57],
footer[data-v-84507135] { footer[data-v-84507135] {
margin: var(--space-lg) 0 !important; margin: var(--spacing-32) 0 !important;
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
/* Extra spacing if the user footer has anything */ /* Extra spacing if the user footer has anything */
footer .alert-heading.p-2:has(*) { footer .alert-heading.p-2:has(*) {
margin-bottom: var(--space-md) !important; margin-bottom: var(--spacing-16) !important;
} }
/* Refresh timer */ /* Refresh timer */
@@ -545,8 +564,8 @@ footer .alert-heading.p-2:has(*) {
/* Input field for the monitor group name */ /* Input field for the monitor group name */
.edit span[data-v-7d4a7f28][data-v-f71ca08e], .edit span[data-v-7d4a7f28][data-v-f71ca08e],
.edit span[data-v-7d4a7f28][data-v-026459e0] { .edit span[data-v-7d4a7f28][data-v-026459e0] {
background-color: var(--color-input-field); background-color: var(--color-input-bg);
padding: .25rem .5rem; padding: var(--spacing-4) var(--spacing-8);
} }
/* Input field for page description and footer */ /* Input field for page description and footer */
@@ -554,7 +573,7 @@ footer .alert-heading.p-2:has(*) {
.edit h4[data-v-7d4a7f28][data-v-84507135][contenteditable="true"], .edit h4[data-v-7d4a7f28][data-v-84507135][contenteditable="true"],
.edit div[data-v-7d4a7f28][data-v-b8247e57], .edit div[data-v-7d4a7f28][data-v-b8247e57],
.edit div[data-v-7d4a7f28][data-v-84507135] { .edit div[data-v-7d4a7f28][data-v-84507135] {
background-color: var(--color-input-field); background-color: var(--color-input-bg);
padding: var(--space-sm) var(--space-md) !important; padding: var(--spacing-16) var(--spacing-20) !important;
color: var(--color-text-heading); color: var(--color-text-heading);
} }