mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-09 17:36:15 -08:00
style(dashboard): update thumbnail dimensions and border radii for improved visual consistency
Entire-Checkpoint: 84693b066142
This commit is contained in:
1 parent
379228e8c3
commit
8b0436dce8
2 files changed
+36
-23
No files matched your search
+10
-10
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
+26
-13
@@ -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 {
|
||||
|
||||
Reference in new issue
Block a user