muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 21:06:42 +07:00
Code Packages Activity Actions

playerbar appearance initial

Browse source
This commit is contained in:
Fedor Katurov 2019-10-13 20:22:15 +07:00
parent 7263f3b7b9
commit 70fd20be74
3 changed files with 3 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/bars/PlayerBar/index.tsx
View file

@ -21,7 +21,6 @@ const PlayerBarUnconnected: FC<IProps> = ({ status }) => {
return ( return (
<div className={styles.place}> <div className={styles.place}>
<div className={styles.seeker}>S</div>
<div className={styles.wrap}> <div className={styles.wrap}>
<div className={styles.status}> <div className={styles.status}>
<div className={styles.playpause}> <div className={styles.playpause}>

19
src/components/bars/PlayerBar/styles.scss
View file

@ -6,14 +6,14 @@
&:hover { &:hover {
.seeker { .seeker {
transform: translate(0, -40px); transform: translate(0, -64px);
} }
} }
} }
.wrap { .wrap {
display: flex; display: flex;
border-radius: $radius 0 0 0; border-radius: 27px;
background: $green_gradient; background: $green_gradient;
align-items: center; align-items: center;
box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px, inset rgba(255, 255, 255, 0.3) 0 1px, box-shadow: rgba(0, 0, 0, 0.3) 0 2px 5px, inset rgba(255, 255, 255, 0.3) 0 1px,
@ -38,21 +38,6 @@
height: 54px; 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, .playpause,
.close { .close {
flex: 0 0 48px; flex: 0 0 48px;

2
src/containers/main/BottomContainer/styles.scss
View file

@ -1,7 +1,7 @@
.wrap { .wrap {
position: fixed; position: fixed;
transform: translateZ(0); transform: translateZ(0);
bottom: 0px; bottom: $gap;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
height: 54px; height: 54px;