glanceapp/glance
1
1
Fork 0
mirror of https://github.com/glanceapp/glance.git synced 2024-09-11 04:55:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improvements

Browse Source 
Remove the need for negative margin on parent
Center the left border between columns
+ random tweaks
This commit is contained in:
Svilen Markov 2024-08-09 12:25:14 +01:00
parent f9ecda0d9d
commit 81b7c86cb4
1 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
internal/assets/static/main.css
View File

@ -429,18 +429,20 @@ kbd:active {
}
.dynamic-columns {
gap: calc(var(--widget-content-vertical-padding) / 2);
gap: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding);
display: grid;
grid-template-columns: repeat(var(--columns-per-row), 1fr);
margin: calc(0px - var(--widget-content-vertical-padding) / 2) calc(0px - var(--widget-content-horizontal-padding) / 2);
}
.dynamic-columns > * {
padding: calc(var(--widget-content-vertical-padding) / 2) calc(var(--widget-content-horizontal-padding) / 1.5);
padding-left: var(--widget-content-horizontal-padding);
border-top: 1px solid var(--color-separator);
border-left: 1px solid var(--color-separator);
min-width: 0;
}
.dynamic-columns > *:first-child {
padding-top: 0;
border-top: none;
border-left: none;
}
@ -455,32 +457,41 @@ kbd:active {
.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }
.dynamic-columns > * {
border-left: none;
padding-bottom: calc(var(--widget-content-vertical-padding) / -2);
padding-left: 0;
padding-top: var(--widget-content-vertical-padding);
}
}
@container widget (min-width: 450px) and (max-width: 850px) {
.dynamic-columns:has(> :nth-child(2)) { --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; }
.dynamic-columns > :nth-child(2n-1) {
border-left: none;
padding-left: 0;
}
}
@container widget (min-width: 849px) and (max-width: 1250px) {
.dynamic-columns:has(> :nth-child(3)) { --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; }
.dynamic-columns > :nth-child(3n+1) {
border-left: none;
padding-left: 0;
}
}
@container widget (min-width: 1249px) and (max-width: 1499px) {
.dynamic-columns:has(> :nth-child(4)) { --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; }
.dynamic-columns > :nth-child(4n+1) {
border-left: none;
padding-left: 0;
}
}
@container widget (min-width: 1500px) {
.dynamic-columns:has(> :nth-child(5)) { --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; }
.dynamic-columns > :nth-child(5n+1) {
border-left: none;
padding-left: 0;
}
}
.cards-vertical {
@ -693,6 +704,7 @@ kbd:active {
.market-chart {
margin-left: auto;
width: 6.5rem;
flex-shrink: 0;
}
.market-chart svg {