xevion/glance
1
0
Fork 0
mirror of https://github.com/Xevion/glance.git synced 2025-12-09 22:07:19 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add grid-cards style for videos widget

Browse Source
This commit is contained in:
Svilen Markov
2024-05-10 07:41:11 +01:00
parent 54102ae35e
commit 3c1fb97c12
8 changed files with 62 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -329,23 +329,36 @@ body {
--cards-per-row: 6.5;
}
.cards-grid {
--cards-per-row: 6;
}
.cards-horizontal, .cards-vertical, .cards-grid {
.cards-horizontal, .cards-vertical {
--cards-gap: calc(var(--widget-content-vertical-padding) * 0.7);
display: flex;
gap: var(--cards-gap);
}
.card {
display: flex;
flex-direction: column;
}
.cards-horizontal .card {
flex-shrink: 0;
width: calc(100% / var(--cards-per-row) - var(--cards-gap) * (var(--cards-per-row) - 1) / var(--cards-per-row));
}
.cards-grid .card {
min-width: 0;
}
.cards-horizontal {
overflow-x: auto;
padding-bottom: 1rem;
}
.cards-grid {
flex-wrap: wrap;
--cards-per-row: 6;
display: grid;
grid-template-columns: repeat(var(--cards-per-row), 1fr);
gap: calc(var(--widget-content-vertical-padding) * 0.7);
}
@container widget (max-width: 1300px) { .cards-horizontal { --cards-per-row: 5.5; } }
@@ -361,12 +374,7 @@ body {
@container widget (max-width: 750px) { .cards-grid { --cards-per-row: 3; } }
@container widget (max-width: 650px) { .cards-grid { --cards-per-row: 2; } }
.card {
flex-shrink: 0;
width: calc(100% / var(--cards-per-row) - var(--cards-gap) * (var(--cards-per-row) - 1) / var(--cards-per-row));
display: flex;
flex-direction: column;
}
.widget-error-header {
display: flex;