mirror of
https://github.com/glanceapp/glance.git
synced 2024-09-11 04:55:38 +03:00
Improvements
Remove the need for negative margin on parent Center the left border between columns + random tweaks
This commit is contained in:
parent
f9ecda0d9d
commit
81b7c86cb4
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user