External/cute-kuma
1
0
Fork 0
mirror of https://github.com/dermv/cute-kuma.git synced 2025-12-17 15:36:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: redesigned monitor tags

Browse Source
This commit is contained in:
Denis Romanov 2025-10-26 00:41:42 +04:00 committed by GitHub
parent 521468c9fd
commit 2b4bc6e324
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 52 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
main.css
View File

@ -3,18 +3,26 @@
:root { :root {
/* Palette colors */ /* Palette colors */
--color-gray: #7f8c8d;
--color-red: #e74c3c; --color-red: #e74c3c;
--color-orange: #f39c12; --color-orange: #f39c12;
--color-teal: #1abc9c; --color-teal: #1abc9c;
--color-blue: #3498db; --color-blue: #3498db;
--color-green: #27ae60; --color-green: #27ae60;
--color-indigo: #5c6bc0;
--color-purple: #9b59b6;
--color-pink: #e84393;
/* Palette RGB colors */ /* Palette RGB colors */
--rgb-color-gray: 127, 140, 141;
--rgb-color-red: 231, 76, 60; --rgb-color-red: 231, 76, 60;
--rgb-color-orange: 243, 156, 18; --rgb-color-orange: 243, 156, 18;
--rgb-color-teal: 26, 188, 156; --rgb-color-teal: 26, 188, 156;
--rgb-color-blue: 52, 152, 219; --rgb-color-blue: 52, 152, 219;
--rgb-color-green: 39, 174, 96; --rgb-color-green: 39, 174, 96;
--rgb-color-indigo: 92, 107, 192;
--rgb-color-purple: 155, 89, 182;
--rgb-color-pink: 232, 67, 147;
/* Light theme base colors */ /* Light theme base colors */
--color-bg: #fbfbfc; --color-bg: #fbfbfc;
@ -431,6 +439,8 @@ div[data-v-026459e0]:has(> .group-title) {
} }
.monitor-list .item > .row > div { .monitor-list .item > .row > div {
display: flex;
flex-direction: column;
width: 100%; width: 100%;
} }
@ -438,6 +448,7 @@ div[data-v-026459e0]:has(> .group-title) {
.info { .info {
display: flex; display: flex;
align-items: center; align-items: center;
order: 2;
margin-bottom: var(--spacing-8); margin-bottom: var(--spacing-8);
} }
@ -455,83 +466,76 @@ div[data-v-026459e0]:has(> .group-title) {
/* Uptime percentage */ /* Uptime percentage */
.badge { .badge {
all: unset; all: unset;
order: 2; order: 1;
margin-left: auto; margin-left: auto;
background-color: transparent !important; background-color: transparent !important;
color: var(--color-text-primary) !important; color: var(--color-text-primary) !important;
} }
/* Hide-all-tags switch – leave commented */ /* Monitor tags wrapper */
/* OPTION 1: Hide tags */
.extra-info[data-v-f71ca08e], .extra-info[data-v-f71ca08e],
.extra-info[data-v-026459e0] { .extra-info[data-v-026459e0] {
display: none;
}
/* OPTION 2: Show tags */
/* .extra-info[data-v-f71ca08e],
.extra-info[data-v-026459e0] {
display: flex !important;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--spacing-4) var(--spacing-8); order: 1;
gap: var(--spacing-8);
margin-top: var(--spacing-4); margin-top: var(--spacing-4);
} */ }
.extra-info:not(:has(div[data-v-12c40cbd])) {
margin-top: 0;
margin-bottom: 0;
}
.extra-info[data-v-f71ca08e] div,
.extra-info[data-v-026459e0] div {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-8);
}
/* Monitor tags */ /* Monitor tags */
.tag-wrapper { .tag-wrapper {
display: inline-flex !important;
align-items: center; align-items: center;
gap: var(--spacing-4); padding-top: 2px !important;
box-sizing: border-box; padding-bottom: 2px !important;
margin-left: 0 !important;
border-radius: var(--border-radius-400);
max-width: 100%;
color: var(--tag-color, var(--color-text-heading));
font-weight: var(--font-weight-medium);
font-size: var(--font-size-100);
} }
.tag-wrapper[style*="rgb(75, 85, 99)"] { .tag-wrapper[style*="rgb(75, 85, 99)"] {
--tag-color: #4b5563; border: 1px solid rgba(var(--rgb-color-gray), .23);
border: 1px solid rgba(75, 85, 99, .3); background-color: rgba(var(--rgb-color-gray), .08) !important;
background: rgba(75, 85, 99, .15) !important; color: var(--color-gray) !important;
} }
.tag-wrapper[style*="rgb(220, 38, 38)"] { .tag-wrapper[style*="rgb(220, 38, 38)"] {
--tag-color: #dc2626; border: 1px solid rgba(var(--rgb-color-red), .23);
border: 1px solid rgba(220, 38, 38, .3); background-color: rgba(var(--rgb-color-red), .08) !important;
background: rgba(220, 38, 38, .15) !important; color: var(--color-red) !important;
} }
.tag-wrapper[style*="rgb(217, 119, 6)"] { .tag-wrapper[style*="rgb(217, 119, 6)"] {
--tag-color: #d97706; border: 1px solid rgba(var(--rgb-color-orange), .23);
border: 1px solid rgba(217, 119, 6, .3); background-color: rgba(var(--rgb-color-orange), .08) !important;
background: rgba(217, 119, 6, .15) !important; color: var(--color-orange) !important;
} }
.tag-wrapper[style*="rgb(5, 150, 105)"] { .tag-wrapper[style*="rgb(5, 150, 105)"] {
--tag-color: #059669; border: 1px solid rgba(var(--rgb-color-green), .23);
border: 1px solid rgba(5, 150, 105, .3); background-color: rgba(var(--rgb-color-green), .08) !important;
background: rgba(5, 150, 105, .15) !important; color: var(--color-green) !important;
} }
.tag-wrapper[style*="rgb(37, 99, 235)"] { .tag-wrapper[style*="rgb(37, 99, 235)"] {
--tag-color: #2563eb; border: 1px solid rgba(var(--rgb-color-blue), .23);
border: 1px solid rgba(37, 99, 235, .3); background-color: rgba(var(--rgb-color-blue), .08) !important;
background: rgba(37, 99, 235, .15) !important; color: var(--color-blue) !important;
} }
.tag-wrapper[style*="rgb(79, 70, 229)"] { .tag-wrapper[style*="rgb(79, 70, 229)"] {
--tag-color: #4f46e5; border: 1px solid rgba(var(--rgb-color-indigo), .23);
border: 1px solid rgba(79, 70, 229, .3); background-color: rgba(var(--rgb-color-indigo), .08) !important;
background: rgba(79, 70, 229, .15) !important; color: var(--color-indigo) !important;
} }
.tag-wrapper[style*="rgb(124, 58, 237)"] { .tag-wrapper[style*="rgb(124, 58, 237)"] {
--tag-color: #7c3aed; border: 1px solid rgba(var(--rgb-color-purple), .23);
border: 1px solid rgba(124, 58, 237, .3); background-color: rgba(var(--rgb-color-purple), .08) !important;
background: rgba(124, 58, 237, .15) !important; color: var(--color-purple) !important;
} }
.tag-wrapper[style*="rgb(219, 39, 119)"] { .tag-wrapper[style*="rgb(219, 39, 119)"] {
--tag-color: #db2777; border: 1px solid rgba(var(--rgb-color-pink), .23);
border: 1px solid rgba(219, 39, 119, .3); background-color: rgba(var(--rgb-color-pink), .08) !important;
background: rgba(219, 39, 119, .15) !important; color: var(--color-pink) !important;
}
.tag-wrapper .tag-text {
white-space: normal;
} }
/* Wrapper for the uptime bars home and uptime time */ /* Wrapper for the uptime bars home and uptime time */