Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-12 23:47:09 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fix styles

Browse source
This commit is contained in:
Phan An 2017-08-27 17:25:01 +01:00
parent dc7c6bec45
commit cb170ab5b8
1 changed files with 25 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
resources/assets/js/remote/app.vue
View file

@ -1,11 +1,12 @@
<template> <template>
<div id="app"> <div id="app">
<div id="remoteController" v-if="authenticated"> <div class="translucent" v-if="song" :style="{ backgroundImage: 'url('+song.album.cover+')' }">
</div>
<div id="main" v-if="authenticated">
<p class="collapse"> <p class="collapse">
<i class="fa fa-angle-down"></i> <i class="fa fa-angle-down"></i>
</p> </p>
<div class="details" v-if="song"> <div class="details" v-if="song">
<div class="translucent" :style="{ backgroundImage: 'url('+song.album.cover+')' }"></div>
<div class="cover"> <div class="cover">
<img :src="song.album.cover" alt="song.album.cover"> <img :src="song.album.cover" alt="song.album.cover">
</div> </div>
@ -167,14 +168,34 @@
@include vertical-center(); @include vertical-center();
} }
.translucent {
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
filter: blur(20px);
opacity: .3;
z-index: 0;
overflow: hidden;
background-size: cover;
background-position: center;
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
pointer-events: none;
}
} }
#remoteController { #main {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
text-align: center; text-align: center;
z-index: 1;
position: relative;
.collapse { .collapse {
height: 12vmin; height: 12vmin;
@ -187,11 +208,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-around;
.info { .info {
width: 100%; width: 100%;
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
@ -240,24 +260,6 @@
} }
} }
.translucent {
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
filter: blur(20px);
opacity: .3;
z-index: -1;
overflow: hidden;
background-size: cover;
background-position: center;
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
pointer-events: none;
}
footer { footer {
height: 18vh; height: 18vh;
display: flex; display: flex;