style(dashboard): update thumbnail dimensions and border radii for improved visual consistency

Entire-Checkpoint: 84693b066142
This commit is contained in:
4gray committed 2026-03-29 15:44:46 +02:00
1 parent 379228e8c3
commit 8b0436dce8
2 files changed
+36 -23

No files matched your search

@@ -61,22 +61,22 @@
// Live: square logo
.hero__thumb--live {
width: 60px;
height: 60px;
width: 72px;
height: 72px;
}
// Movie: portrait poster 2:3
.hero__thumb--movie {
width: 45px;
height: 60px;
border-radius: 8px;
width: 56px;
height: 84px;
border-radius: 10px;
}
// Series: widescreen 16:9
// Series: use poster dimensions like movies to avoid cropped covers.
.hero__thumb--series {
width: 80px;
height: 45px;
border-radius: 8px;
width: 56px;
height: 84px;
border-radius: 10px;
}
.hero__thumb img {
@@ -88,7 +88,7 @@
.hero__thumb--live img {
object-fit: contain;
padding: 6px;
padding: 10px;
box-sizing: border-box;
}
@@ -96,10 +96,10 @@
.activity-item__media {
// Default: square for channels/live
width: 44px;
height: 44px;
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: 9px;
border-radius: 12px;
overflow: hidden;
background: var(--mat-sys-surface-container-highest);
display: inline-flex;
@@ -111,17 +111,16 @@
// Movie: portrait poster 2:3
.activity-item__media--movie {
width: 30px;
height: 44px;
border-radius: 7px;
width: 42px;
height: 63px;
border-radius: 9px;
}
// Series: widescreen 16:9 — 64×36 keeps proportion without dominating the row
// Series: use the same poster ratio as movies to avoid cover cropping.
.activity-item__media--series {
width: 64px;
height: 36px;
border-radius: 7px;
align-self: center;
width: 42px;
height: 63px;
border-radius: 9px;
}
.activity-item__media img {
@@ -133,7 +132,7 @@
.activity-item__media--live img {
object-fit: contain;
padding: 4px;
padding: 8px;
box-sizing: border-box;
}
@@ -239,7 +238,21 @@
.activity-items--grid .activity-item__media {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
.activity-items--grid .activity-item__media--movie,
.activity-items--grid .activity-item__media--series {
aspect-ratio: 2 / 3;
border-radius: 10px;
}
.activity-items--grid .activity-item__media--live {
aspect-ratio: 1 / 1;
border-radius: 12px;
}
.activity-items--grid .activity-item__media--live img {
padding: 12px;
}
.activity-items--grid .is-placeholder mat-icon {