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

Refactor

Browse Source
This commit is contained in:
Denis Romanov
2025-06-02 23:41:31 +04:00
committed by GitHub
parent 732f71f597
commit 52cc19a6cf
1 changed files with 206 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

363
main.css
View File

@@ -1,72 +1,107 @@
/* Colors and settings. */ /* GLOBALS
:root { -------------------------------------------------- */
/* Palette colors. */
--color-gray: rgb(130, 135, 140);
--color-red: rgb(200, 70, 60);
--color-orange: rgb(210, 135, 0);
--color-teal: rgb(0, 130, 140);
--color-blue: rgb(15, 115, 180);
--color-green: rgb(45, 150, 90);
/* Palette RGB colors. */ :root {
/* Palette colors */
--color-gray: #82878c;
--color-red: #c8463c;
--color-orange: #d28700;
--color-teal: #00828c;
--color-blue: #0f73b4;
--color-green: #2d965a;
/* Palette RGB colors */
--rgb-color-gray: 130, 135, 140; --rgb-color-gray: 130, 135, 140;
--rgb-color-red: 200, 70, 60; --rgb-color-red: 200, 70, 60;
--rgb-color-orange: 210, 135, 0; --rgb-color-orange: 210, 135, 0;
--rgb-color-yellow: 255, 175, 15;
--rgb-color-teal: 0, 130, 140; --rgb-color-teal: 0, 130, 140;
--rgb-color-blue: 15, 115, 180; --rgb-color-blue: 15, 115, 180;
--rgb-color-green: 45, 150, 90; --rgb-color-green: 45, 150, 90;
/* Light theme colors. */ /* Light theme semantic colors */
--color-bg: rgb(255, 255, 255); --color-bg: #fff;
--color-text: rgb(85, 85, 85); --color-text-primary: #555;
--color-text-title: rgb(20, 20, 20); --color-text-heading: #141414;
--color-text-secondary: rgb(140, 140, 140); --color-text-secondary: #8c8c8c;
--color-btn-secondary: transparent; --color-block-bg: #f2f2f2;
--color-btn-secondary-hover: rgb(230, 230, 230); --color-monitor-bg: #fff;
--color-btn-secondary-active: rgb(210, 210, 210); --color-monitor-border: rgba(0, 0, 0, .13);
--color-btn-secondary-border: rgba(0, 0, 0, .16);
--color-border: rgba(0, 0, 0, .13);
--color-block: rgb(242, 242, 242);
--color-monitor: rgb(255, 255, 255);
/* Settings. */ /* Button: Secondary */
--container-width: 864px; --color-btn-secondary-bg: transparent;
--border-radius-block: .5rem; --color-btn-secondary-hover: #e6e6e6;
--border-radius-btn: .375rem; --color-btn-secondary-active: #d2d2d2;
--spacing-1: .5rem; --color-btn-secondary-border: rgba(0, 0, 0, .16);
--spacing-2: .75rem;
--spacing-3: 1rem; /* Layout and sizing */
--spacing-4: 2rem; --size-container-width: 864px;
--btn-padding: 6px 12px; --size-logo-width: 48px;
--font-size-title: 18px; --size-logo-height: 48px;
--monitor-width-min: 30ch; --size-monitor-min-width: 30ch;
--monitor-width-max: 1fr; --size-monitor-max-width: 1fr;
--logo-width: 48px; --size-daily-bar-height: 20px;
--logo-height: 48px;
--beat-height: 1.25rem; /* Spacing */
--monitor-items-margin: 4px; --space-xs: .5rem;
--space-sm: .75rem;
--space-md: 1rem;
--space-lg: 2rem;
/* Specific spacing */
--space-monitor-items: 4px;
/* Border radius */
--radius-sm: .375rem;
--radius-md: .5rem;
/* Typography */
--font-size-sm: .875rem;
--font-size-heading: 1.125rem;
--font-weight-medium: 500;
/* Components */
/* Button */
--padding-btn-y: 6px;
--padding-btn-x: 12px;
} }
/* Dark theme colors. */
/* DARK THEME OVERRIDES
-------------------------------------------------- */
.dark { .dark {
--color-bg: rgb(8, 8, 8); /* Semantic colors */
--color-text: rgb(175, 175, 175); --color-bg: #080808;
--color-text-title: rgb(240, 240, 240); --color-text-primary: #afafaf;
--color-text-secondary: rgb(125, 125, 125); --color-text-heading: #f0f0f0;
--color-btn-secondary: transparent; --color-text-secondary: #7d7d7d;
--color-btn-secondary-hover: rgb(41, 41, 41); --color-block-bg: #151515;
--color-btn-secondary-active: rgb(31, 31, 31); --color-monitor-bg: #1f1f1f;
--color-monitor-border: rgba(255, 255, 255, .06);
/* Button: Secondary */
--color-btn-secondary-bg: transparent;
--color-btn-secondary-hover: #292929;
--color-btn-secondary-active: #1f1f1f;
--color-btn-secondary-border: rgba(255, 255, 255, .13); --color-btn-secondary-border: rgba(255, 255, 255, .13);
--color-border: rgba(255, 255, 255, .06);
--color-block: rgb(21, 21, 21);
--color-monitor: rgb(31, 31, 31);
} }
/* BASE STRUCTURE
-------------------------------------------------- */
body { body {
background-color: var(--color-bg) !important; background-color: var(--color-bg) !important;
color: var(--color-text) !important; color: var(--color-text-primary) !important;
} }
.container {
margin-top: 0 !important;
padding-top: var(--space-lg);
padding-right: var(--space-md);
padding-left: var(--space-md);
max-width: var(--size-container-width);
}
/* Link (excluding button) */
a:not(.btn), a:not(.btn),
.dark a:not(.btn) { .dark a:not(.btn) {
color: inherit; color: inherit;
@@ -76,66 +111,64 @@ a:not(.btn):hover,
color: var(--color-blue); color: var(--color-blue);
} }
.container { /* HEADER
margin-top: 0 !important; -------------------------------------------------- */
padding-top: var(--spacing-4);
padding-right: var(--spacing-3);
padding-left: var(--spacing-3);
max-width: var(--container-width);
}
/* Element with logo and title. */ /* Wrapper for logo and title */
.title-flex { .title-flex {
margin-bottom: var(--spacing-4) !important; margin-bottom: var(--space-lg) !important;
} }
/* Center the logo. */ /* Center the logo */
.logo-wrapper { .logo-wrapper {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
/* Resize the logo. */ /* Resize the logo */
.logo-wrapper img[data-v-b8247e57] { .logo-wrapper img[data-v-b8247e57] {
width: var(--logo-width); width: var(--size-logo-width);
height: var(--logo-height); height: var(--size-logo-height);
} }
/* Remove the title adjacent to the logo. */ /* Remove the title adjacent to the logo */
span[data-v-7d4a7f28] { span[data-v-7d4a7f28] {
display: none; display: none;
} }
/* Fix vertical margin of admin buttons on mobile. */ /* ADMIN ACTIONS BAR
-------------------------------------------------- */
/* Fix vertical margin of admin buttons on mobile */
.mb-4[data-v-b8247e57]:has(.btn-info) { .mb-4[data-v-b8247e57]:has(.btn-info) {
margin-bottom: var(--spacing-4) !important; margin-bottom: var(--space-lg) !important;
} }
.mb-4[data-v-b8247e57]:has(.btn-info) div { .mb-4[data-v-b8247e57]:has(.btn-info) div {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--spacing-1); gap: var(--space-xs);
} }
.mb-4[data-v-b8247e57]:has(.btn-info) div button { .mb-4[data-v-b8247e57]:has(.btn-info) div button {
margin: 0 !important; margin: 0 !important;
} }
/* Block with admin buttons. */ /* Block with admin buttons */
.mb-4[data-v-b8247e57]:has(.btn-info) { .mb-4[data-v-b8247e57]:has(.btn-info) {
border-radius: var(--border-radius-block); border-radius: var(--radius-md);
background-color: var(--color-block); background-color: var(--color-block-bg);
padding: var(--spacing-3); padding: var(--space-md);
} }
/* Admin button. */ /* Admin button */
.btn-info[data-v-b8247e57] { .btn-info[data-v-b8247e57] {
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(--border-radius-btn); border-radius: var(--radius-sm);
background-color: var(--color-btn-secondary); background-color: var(--color-btn-secondary-bg);
padding: var(--btn-padding); padding: var(--padding-btn-y) var(--padding-btn-x);
color: var(--color-text-title); color: var(--color-text-heading);
font-weight: 500; font-weight: var(--font-weight-medium);
font-size: 14px; font-size: var(--font-size-sm);
} }
.btn-info[data-v-b8247e57]:hover { .btn-info[data-v-b8247e57]:hover {
background-color: var(--color-btn-secondary-hover); background-color: var(--color-btn-secondary-hover);
@@ -148,12 +181,14 @@ span[data-v-7d4a7f28] {
display: none; display: none;
} }
/* Incident block */ /* INCIDENT BLOCK
-------------------------------------------------- */
.incident[data-v-b8247e57] { .incident[data-v-b8247e57] {
margin-bottom: var(--spacing-3) !important; margin-bottom: var(--space-md) !important;
border-radius: var(--border-radius-block); border-radius: var(--radius-md);
padding: var(--spacing-3) !important; padding: var(--space-md) !important;
color: var(--color-text-title) !important; color: var(--color-text-heading) !important;
} }
.incident[data-v-b8247e57].bg-info { .incident[data-v-b8247e57].bg-info {
background-color: rgba(var(--rgb-color-teal), .15) !important; background-color: rgba(var(--rgb-color-teal), .15) !important;
@@ -174,21 +209,23 @@ span[data-v-7d4a7f28] {
background-color: rgba(var(--rgb-color-gray), .15) !important; background-color: rgba(var(--rgb-color-gray), .15) !important;
} }
.incident[data-v-b8247e57] h4 { .incident[data-v-b8247e57] h4 {
font-size: var(--font-size-title); font-size: var(--font-size-heading);
} }
.incident[data-v-b8247e57] div { .incident[data-v-b8247e57] div {
color: var(--color-text); color: var(--color-text-primary);
} }
/* Main status block. */ /* OVERALL STATUS BLOCK
-------------------------------------------------- */
.overall-status[data-v-b8247e57] { .overall-status[data-v-b8247e57] {
margin-bottom: var(--spacing-3) !important; margin-bottom: var(--space-md) !important;
box-shadow: none; box-shadow: none;
border-radius: var(--border-radius-block); border-radius: var(--radius-md);
padding: var(--spacing-3) !important; padding: var(--space-md) !important;
color: #fff; color: #fff;
font-weight: 500; font-weight: var(--font-weight-medium);
font-size: var(--font-size-title); font-size: var(--font-size-heading);
line-height: 1; line-height: 1;
} }
.overall-status[data-v-b8247e57]:has(.ok) { .overall-status[data-v-b8247e57]:has(.ok) {
@@ -207,31 +244,32 @@ span[data-v-7d4a7f28] {
display: none; display: none;
} }
/* Maintenance block. */ /* MAINTENANCE BLOCK
-------------------------------------------------- */
.shadow-box.bg-maintenance { .shadow-box.bg-maintenance {
margin-top: var(--spacing-3) !important; margin-top: var(--space-md) !important;
margin-bottom: var(--spacing-3) !important; margin-bottom: var(--space-md) !important;
box-shadow: none; box-shadow: none;
border-radius: var(--border-radius-block); border-radius: var(--radius-md);
background-color: rgba(var(--rgb-color-blue), .15) !important; background-color: rgba(var(--rgb-color-blue), .15) !important;
padding: var(--spacing-3) !important; padding: var(--space-md) !important;
color: var(--color-text-title) !important; color: var(--color-text-heading) !important;
} }
.shadow-box.bg-maintenance .alert-heading { .shadow-box.bg-maintenance .alert-heading {
color: var(--color-text-title); color: var(--color-text-heading);
font-weight: 500; font-weight: var(--font-weight-medium);
font-size: var(--font-size-title); font-size: var(--font-size-heading);
} }
.shadow-box.bg-maintenance .content { .shadow-box.bg-maintenance .content {
color: var(--color-text); color: var(--color-text-primary);
} }
.shadow-box.bg-maintenance div[data-v-b8247e57]:not([class]) div:not([class]) { .shadow-box.bg-maintenance div[data-v-b8247e57]:not([class]) div:not([class]) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--spacing-1); gap: var(--space-xs);
} }
/* Timeslot in the maintenance block. */
.timeslot { .timeslot {
margin-top: 0; margin-top: 0;
margin-right: 0 !important; margin-right: 0 !important;
@@ -241,39 +279,45 @@ span[data-v-7d4a7f28] {
color: var(--color-blue) !important; color: var(--color-blue) !important;
} }
/* User markdown elements. */ /* USER MARKDOWN ELEMENTS
-------------------------------------------------- */
.alert-heading.p-2 { .alert-heading.p-2 {
margin-bottom: var(--spacing-4); margin-bottom: var(--space-lg);
padding: 0 !important; padding: 0 !important;
} }
.alert-heading.p-2 p { .alert-heading.p-2 p {
margin: 0; margin: 0;
} }
/* Page description. */ /* PAGE DESCRIPTION
-------------------------------------------------- */
div > .alert-heading.p-2:has(*) { div > .alert-heading.p-2:has(*) {
margin-top: var(--spacing-4); margin-top: var(--space-lg);
border-radius: var(--border-radius-block); border-radius: var(--radius-md);
background-color: var(--color-block); background-color: var(--color-block-bg);
padding: var(--spacing-3) !important; padding: var(--space-md) !important;
} }
/* Monitor group. */ /* MONITOR GROUP
-------------------------------------------------- */
div[data-v-f71ca08e]:has(> .group-title) { div[data-v-f71ca08e]:has(> .group-title) {
margin-bottom: var(--spacing-3) !important; margin-bottom: var(--space-md) !important;
border-radius: var(--border-radius-block); border-radius: var(--radius-md);
background-color: var(--color-block); background-color: var(--color-block-bg);
padding: var(--spacing-3); padding: var(--space-md);
} }
/* Monitor group title. */ /* Monitor group title */
.group-title { .group-title {
margin-bottom: var(--spacing-3); margin-bottom: var(--space-md);
color: var(--color-text-title); color: var(--color-text-heading);
font-size: var(--font-size-title); font-size: var(--font-size-heading);
} }
/* Monitor elements in the group. */ /* Monitor elements in the group */
.shadow-box.monitor-list { .shadow-box.monitor-list {
margin-top: 0 !important; margin-top: 0 !important;
box-shadow: none; box-shadow: none;
@@ -285,36 +329,38 @@ div[data-v-f71ca08e]:has(> .group-title) {
grid-template-columns: repeat( grid-template-columns: repeat(
auto-fill, auto-fill,
minmax( minmax(
min(var(--monitor-width-min), 100%), min(var(--size-monitor-min-width), 100%),
var(--monitor-width-max) var(--size-monitor-max-width)
) )
); );
grid-gap: var(--spacing-3); grid-gap: var(--space-md);
} }
/* Adjusting grid layout at certain viewport sizes. */ /* Adjusting grid layout at certain viewport sizes */
/* It's not perfect, but it works. */ /* It's not perfect, but it works */
@media (min-width: 540px) and (max-width: 604px) { @media (min-width: 540px) and (max-width: 604px) {
.shadow-box.monitor-list > .monitor-list { .shadow-box.monitor-list > .monitor-list {
grid-template-columns: repeat( grid-template-columns: repeat(
auto-fill, auto-fill,
minmax( minmax(
min(20ch, 100%), min(20ch, 100%),
var(--monitor-width-max) var(--size-monitor-max-width)
) )
); );
} }
} }
/* Monitor item. */ /* MONITOR ITEM
-------------------------------------------------- */
.monitor-list .item { .monitor-list .item {
border: 1px solid var(--color-border); border: 1px solid var(--color-monitor-border);
border-radius: var(--border-radius-block); border-radius: var(--radius-md);
background-color: var(--color-monitor); background-color: var(--color-monitor-bg);
padding: var(--spacing-3) !important; padding: var(--space-md) !important;
} }
.monitor-list .item:hover { .monitor-list .item:hover {
background-color: var(--color-monitor) !important; background-color: var(--color-monitor-bg) !important;
} }
.monitor-list .item > .row { .monitor-list .item > .row {
flex-direction: column; flex-direction: column;
@@ -323,29 +369,29 @@ div[data-v-f71ca08e]:has(> .group-title) {
width: 100%; width: 100%;
} }
/* Monitor name and badge container. */ /* Monitor name and badge container */
.info { .info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: var(--spacing-1); margin-bottom: var(--space-xs);
} }
/* Monitor name. */ /* Monitor name */
.item-name[data-v-f71ca08e] { .item-name[data-v-f71ca08e] {
padding-right: 0; padding-right: 0;
padding-left: var(--monitor-items-margin); padding-left: var(--space-monitor-items);
overflow: hidden; overflow: hidden;
color: var(--color-text-title); color: var(--color-text-heading);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
/* Uptime percentage badge (now just text). */ /* Uptime percentage badge (now just text) */
.badge { .badge {
all: unset; all: unset;
order: 2; order: 2;
background-color: transparent !important; background-color: transparent !important;
padding-right: var(--monitor-items-margin); padding-right: var(--space-monitor-items);
color: var(--color-gray) !important; color: var(--color-gray) !important;
} }
.badge.bg-danger { .badge.bg-danger {
@@ -361,12 +407,12 @@ div[data-v-f71ca08e]:has(> .group-title) {
color: var(--color-blue) !important; color: var(--color-blue) !important;
} }
/* Extra vertical indentation. */ /* Extra vertical indentation */
.extra-info[data-v-f71ca08e] { .extra-info[data-v-f71ca08e] {
display: none; display: none;
} }
/* Wrapper for the uptime history timeline and daily uptime text. */ /* Wrapper for the uptime history timeline and daily uptime text */
.wrap { .wrap {
padding: 0 !important; padding: 0 !important;
} }
@@ -374,21 +420,21 @@ div[data-v-f71ca08e]:has(> .group-title) {
padding-bottom: 6px !important; padding-bottom: 6px !important;
} }
/* Uptime history timeline. */ /* Uptime history timeline */
.hp-bar-big { .hp-bar-big {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-bottom: var(--spacing-1); padding-bottom: var(--space-xs);
} }
.mobile .hp-bar-big { .mobile .hp-bar-big {
padding-bottom: 0; padding-bottom: 0;
} }
/* Daily bar in the uptime history timeline. */ /* Daily bar in the uptime history timeline */
.hp-bar-big .beat[data-v-636dc6a9] { .hp-bar-big .beat[data-v-636dc6a9] {
margin: 0 2px !important; margin: 0 2px !important;
background-color: var(--color-green); background-color: var(--color-green);
height: var(--beat-height) !important; height: var(--size-daily-bar-height) !important;
} }
.hp-bar-big .beat[data-v-636dc6a9]:not(.empty):hover { .hp-bar-big .beat[data-v-636dc6a9]:not(.empty):hover {
transform: none; transform: none;
@@ -414,27 +460,30 @@ div[data-v-f71ca08e]:has(> .group-title) {
background-color: var(--color-blue); background-color: var(--color-blue);
} }
/* Daily uptime text (below day bars). */ /* Daily uptime text (below day bars) */
.word[data-v-636dc6a9] { .word[data-v-636dc6a9] {
margin-right: var(--monitor-items-margin); margin-right: var(--space-monitor-items);
margin-left: var(--monitor-items-margin) !important; margin-left: var(--space-monitor-items) !important;
color: var(--color-text); color: var(--color-text-primary);
} }
/* Footer with user markdown, Uptime Kuma branding, and refresh timer. */ /* FOOTER
-------------------------------------------------- */
/* User markdown, Uptime Kuma branding, refresh timer */
footer[data-v-b8247e57] { footer[data-v-b8247e57] {
margin-top: var(--spacing-4) !important; margin-top: var(--space-lg) !important;
margin-bottom: var(--spacing-4) !important; margin-bottom: var(--space-lg) !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(--spacing-3) !important; margin-bottom: var(--space-md) !important;
} }
/* Hide refresh timer in footer. */ /* Refresh timer */
/* Remove/comment "display: none" to restore visibility. */ /* Remove/comment "display: none" to restore visibility */
.refresh-info[data-v-b8247e57] { .refresh-info[data-v-b8247e57] {
display: none; display: none;
opacity: 1; opacity: 1;