0ct0pu5/glance
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improvements for dynamic columns

Browse source
This commit is contained in:
dvdandroid 2024-07-28 22:27:24 +02:00
parent a27fde72ee
commit 576f86cb84
1 changed files with 33 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
internal/assets/static/main.css
View file

@ -460,33 +460,44 @@ kbd:active {
.dynamic-columns > * {
padding: calc(var(--widget-content-vertical-padding) / 2) calc(var(--widget-content-horizontal-padding) / 1.5);
background-color: var(--color-background);
border-radius: var(--border-radius);
border-top: 1px solid var(--color-separator);
border-left: 1px solid var(--color-separator);
}
.dynamic-columns > *:first-child {
border-top: none;
border-left: none;
}
.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }
.dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; }
.dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; }
.dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; }
.dynamic-columns:has(> :nth-child(5)) { --columns-per-row: 5; }
@container widget (max-width: 1500px) {
.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }
.dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; }
.dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; }
.dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; }
@container widget (max-width: 449px) {
.dynamic-columns { --columns-per-row: 1; }
.dynamic-columns > * {
border-left: none;
padding-bottom: calc(var(--widget-content-vertical-padding) / -2);
}
}
@container widget (max-width: 1250px) {
.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }
.dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; }
.dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; }
@container widget (min-width: 450px) and (max-width: 850px) {
.dynamic-columns { --columns-per-row: 2; }
.dynamic-columns > * { border-top: none; }
.dynamic-columns > :nth-child(-n+2) { border-top: none; }
.dynamic-columns > :nth-child(2n-1) { border-left: none; }
}
@container widget (max-width: 850px) {
.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }
.dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; }
@container widget (min-width: 849px) and (max-width: 1250px) {
.dynamic-columns { --columns-per-row: 3; }
.dynamic-columns > * { border-top: none; }
.dynamic-columns > :nth-child(-n+3) { border-top: none; }
.dynamic-columns > :nth-child(3n+1) { border-left: none; }
}
@container widget (max-width: 550px) {
.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }
@container widget (min-width: 1249px) and (max-width: 1499px) {
.dynamic-columns { --columns-per-row: 4; }
.dynamic-columns > * { border-top: none; }
.dynamic-columns > :nth-child(-n+4) { border-top: none; }
.dynamic-columns > :nth-child(4n+1) { border-left: none; }
}
@container widget (min-width: 1500px) {
.dynamic-columns { --columns-per-row: 5; }
.dynamic-columns > * { border-top: none; }
.dynamic-columns > :nth-child(-n+5) { border-top: none; }
.dynamic-columns > :nth-child(5n+1) { border-left: none; }
}
.cards-vertical {
@ -1411,8 +1422,6 @@ kbd:active {
--content-bounds-padding: 10px;
}
.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }
.row-reverse-on-mobile {
flex-direction: row-reverse;
}