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