mirror of
https://github.com/koel/koel
synced 2024-12-21 10:03:10 +00:00
54 lines
858 B
Vue
54 lines
858 B
Vue
|
<template>
|
||
|
|
<header class="skeleton screen-header expanded">
|
||
|
|
<aside class="thumbnail-wrapper pulse"/>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<h1 class="pulse"/>
|
||
|
|
<p class="meta pulse"/>
|
||
|
|
<p class="controls pulse"/>
|
||
|
|
</main>
|
||
|
|
</header>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.skeleton {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
position: relative;
|
||
|
|
align-content: stretch;
|
||
|
|
padding: 1.8rem;
|
||
|
|
|
||
|
|
.thumbnail-wrapper {
|
||
|
|
margin-right: 1.5rem;
|
||
|
|
width: 192px;
|
||
|
|
aspect-ratio: 1/1;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: block !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
main {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
flex: 1;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
height: 4rem;
|
||
|
|
width: 80%;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
height: 1.2rem;
|
||
|
|
width: 40%;
|
||
|
|
|
||
|
|
&.controls {
|
||
|
|
height: 2.5rem;
|
||
|
|
border-radius: 999px;
|
||
|
|
width: 25%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|