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

Rework the monitor list grid

Browse Source
This commit is contained in:
Denis Romanov 2025-06-12 14:17:51 +04:00 committed by GitHub
parent 3343139464
commit ab057a1b8c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
main.css
View File

@ -47,8 +47,6 @@
--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-monitor-min-width: 30ch;
--size-monitor-max-width: 1fr;
--size-daily-bar-height: 20px; --size-daily-bar-height: 20px;
/* Spacing */ /* Spacing */
@ -374,23 +372,16 @@ div[data-v-026459e0]:has(> .group-title) {
background-color: transparent !important; background-color: transparent !important;
padding: 0; padding: 0;
} }
.shadow-box.monitor-list > .monitor-list { .shadow-box.monitor-list > .monitor-list {
display: grid; display: grid;
grid-template-columns: repeat( grid-template-columns: minmax(0, 1fr);
auto-fill, gap: var(--space-md);
minmax(
min(var(--size-monitor-min-width), 100%),
var(--size-monitor-max-width)
)
);
grid-gap: var(--space-md);
} }
/* Adjusting grid layout at certain viewport sizes */ @media (min-width: 540px) {
/* It's not perfect, but it works */ .shadow-box.monitor-list > .monitor-list {
@media (min-width: 540px) and (max-width: 604px) { grid-template-columns: repeat(2, minmax(0, 1fr));
:root {
--size-monitor-min-width: 20ch;
} }
} }