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

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