mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-05-06 10:06:41 +07:00
player bar
This commit is contained in:
parent
63a616875c
commit
7263f3b7b9
5 changed files with 186 additions and 14 deletions
src/components/bars/PlayerBar
77
src/components/bars/PlayerBar/styles.scss
Normal file
77
src/components/bars/PlayerBar/styles.scss
Normal file
|
@ -0,0 +1,77 @@
|
|||
.place {
|
||||
position: relative;
|
||||
height: 54px;
|
||||
flex: 0 1 500px;
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
.seeker {
|
||||
transform: translate(0, -40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
border-radius: $radius 0 0 0;
|
||||
background: $green_gradient;
|
||||
align-items: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px, inset rgba(255, 255, 255, 0.3) 0 1px,
|
||||
inset rgba(0, 0, 0, 0.3) 0 -1px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
flex-direction: column;
|
||||
transform: translate(0, 0);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.status {
|
||||
flex: 0 0 54px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
.seeker {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
left: 0;
|
||||
background: transparentize($content_bg, 0);
|
||||
transform: translate(0, 0);
|
||||
transition: transform 0.25s;
|
||||
border-radius: $radius;
|
||||
box-sizing: border-box;
|
||||
padding: $gap;
|
||||
@include outer_shadow();
|
||||
}
|
||||
|
||||
.playpause,
|
||||
.close {
|
||||
flex: 0 0 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
fill: #222222;
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue