mirrors/Hyperpipe
1
0
Fork 0
mirror of https://codeberg.org/Hyperpipe/Hyperpipe synced 2025-06-28 05:08:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Overhaul playlist layout with flexbox

Browse source
This commit is contained in:
Denevola 2022-09-13 18:57:40 +02:00
parent fcc3d455c6
commit a56ba53c4a
1 changed files with 9 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/Playlists.vue
View file

@ -54,7 +54,11 @@ defineEmits(['playthis']);
--ico: '\f64d'; --ico: '\f64d';
} }
.pl-item { .pl-item {
padding: 1rem; display: flex;
align-items: center;
grid-column-gap: 1rem;
padding: 0.4rem;
padding-right: 1rem;
margin: 0.125rem; margin: 0.125rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background: var(--color-background); background: var(--color-background);
@ -63,16 +67,15 @@ defineEmits(['playthis']);
background: var(--color-background-soft); background: var(--color-background-soft);
} }
.pl-main { .pl-main {
padding-left: 2.75rem; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.pl-img { .pl-img {
top: 0.45rem; flex-shrink: 0;
left: 0.45rem;
position: absolute;
background-image: var(--src); background-image: var(--src);
height: 2.75rem; height: 2.75rem;
width: 2.75rem; width: 2.75rem;
border-radius: 0.125rem;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
} }