343 lines
6.5 KiB
SCSS
343 lines
6.5 KiB
SCSS
@import 'variables';
|
|
#audiocontent{
|
|
position:fixed;
|
|
bottom:0px;
|
|
left:0px;
|
|
right:0px;
|
|
z-index:15;
|
|
font-family: $helvetica;
|
|
#progressBar {
|
|
color:#fff;
|
|
width:100%;
|
|
height:48px;
|
|
margin-top:100px;
|
|
position:fixed;
|
|
left:0;
|
|
bottom:0;
|
|
right:0;
|
|
text-align:left;
|
|
background:rgb(236, 236, 236);
|
|
z-index:19;
|
|
display:none;
|
|
&.playing{
|
|
display:block;
|
|
}
|
|
#episode-profile-image{
|
|
height:48px;
|
|
width:48px;
|
|
}
|
|
#animated-bars{
|
|
position:absolute;
|
|
bottom:-12px;
|
|
left:-15px;
|
|
width:80px;
|
|
opacity:0.3;
|
|
display:none;
|
|
&.playing{
|
|
display:block;
|
|
}
|
|
}
|
|
#barPlayPause{
|
|
height:48px;
|
|
width:48px;
|
|
background:rgb(32, 32, 32);
|
|
position:absolute;
|
|
left:48px;
|
|
bottom:0px;
|
|
cursor:pointer;
|
|
.butt{
|
|
width:30px;
|
|
margin:10px 9px;
|
|
}
|
|
.pause-butt{
|
|
display:none;
|
|
}
|
|
&.playing{
|
|
.play-butt{
|
|
display:none;
|
|
}
|
|
.pause-butt{
|
|
display:block;
|
|
}
|
|
}
|
|
}
|
|
.showing{
|
|
display:block;
|
|
}
|
|
.hidden{
|
|
display:none;
|
|
}
|
|
#volume{
|
|
height:48px;
|
|
width:32px;
|
|
background:rgb(32, 32, 32);
|
|
position:absolute;
|
|
left:96px;
|
|
bottom:0px;
|
|
cursor:pointer;
|
|
img{
|
|
padding:3px;
|
|
margin-top:4px;
|
|
margin-left:4px;
|
|
margin-bottom:-11px;
|
|
}
|
|
#speed{
|
|
font-weight:300;
|
|
font-size:12px;
|
|
padding:3px 0px;
|
|
width:28px;
|
|
margin-left:-0.5px;
|
|
text-align:center;
|
|
margin-top:2px;
|
|
display:block;
|
|
user-select: none;
|
|
background:transparent;
|
|
color:rgb(201, 201, 201);
|
|
}
|
|
.volume-icon-wrapper{
|
|
padding:1px 0px;
|
|
}
|
|
#volumeindicator{
|
|
.range-wrapper{
|
|
position:absolute;
|
|
top:0px;
|
|
left:22px;
|
|
background:rgb(32, 32, 32);
|
|
z-index:30;
|
|
width:0;
|
|
overflow:hidden;
|
|
transition: width 200ms ease-out 95ms;
|
|
padding:8px 0px 5px;
|
|
text-align:center;
|
|
input{
|
|
width:80%;
|
|
cursor:pointer;
|
|
}
|
|
}
|
|
@media screen and ( min-width: 430px ){
|
|
&:hover{
|
|
.range-wrapper{
|
|
width:170px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.buffer-wrapper{
|
|
height:48px;
|
|
position:absolute;
|
|
left:128px;
|
|
right:0;
|
|
bottom:0;
|
|
cursor:pointer;
|
|
#progress {
|
|
background-color:#00ffa3; // red
|
|
height:48px;
|
|
display:inline-block;
|
|
position:relative;
|
|
z-index:23;
|
|
transition: width 0.25s ease-in-out;
|
|
}
|
|
#buffer {
|
|
background-color:#96ffd9; // red
|
|
height:48px;
|
|
display:inline-block;
|
|
position:absolute;
|
|
bottom:0;
|
|
z-index:22;
|
|
transition: width 0.15s ease-in-out;
|
|
}
|
|
#time{
|
|
position:absolute;
|
|
right:30px;
|
|
top:16px;
|
|
z-index:23;
|
|
color:rgb(161, 161, 161);
|
|
font-size:13px;
|
|
background:rgba(236, 236, 236, 0.74);
|
|
padding:2px;
|
|
}
|
|
#closebutt {
|
|
position: absolute;
|
|
user-select: none;
|
|
right: 3px;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
color: #535353;
|
|
font-size: 13.5px;
|
|
z-index: 25;
|
|
height: 22px;
|
|
width: 22px;
|
|
transition: all 0.3s ease 0s;
|
|
white-space: nowrap;
|
|
&:hover {
|
|
color: #ff4343;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navigation-progress{
|
|
position:fixed;
|
|
top:0;
|
|
left:-20%;
|
|
background:$green;
|
|
z-index:100;
|
|
height:43px;
|
|
// display:none;
|
|
width:0%;
|
|
&.showing{
|
|
display:block;
|
|
width:140%;
|
|
animation: grow-width 3200ms ease-out, pulsate 1.4s infinite ease-in-out;
|
|
|
|
}
|
|
}
|
|
|
|
.live-link{
|
|
color:$black;
|
|
}
|
|
|
|
.live-article-indicator{
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
z-index:100;
|
|
}
|
|
.live-article-indicator-inner{
|
|
padding:10px 20px;
|
|
background: white;
|
|
border: 2px solid $dark-purple;
|
|
box-shadow: 5px 5px 0px $dark-purple;
|
|
border-radius: 3px;
|
|
max-width:calc(22vw + 96px);
|
|
min-width:200px;
|
|
display:none;
|
|
@media screen and ( min-width: 1410px ){
|
|
display:block;
|
|
}
|
|
&:hover{
|
|
background: darkend($light-green, 3%);
|
|
}
|
|
.live-pre-header{
|
|
font-size:1em;
|
|
margin-top:2px;
|
|
margin-left:25px;
|
|
margin-bottom:15px;
|
|
font-weight:800;
|
|
font-family: $helvetica-condensed;
|
|
font-stretch:condensed;
|
|
}
|
|
.live-article-title{
|
|
font-size:1.4em;
|
|
font-weight:600;
|
|
margin: 5px 0px;
|
|
}
|
|
.live-user{
|
|
font-weight: bold;
|
|
color:$dark-medium-gray;
|
|
img{
|
|
height: 27px;
|
|
width: 27px;
|
|
border-radius: 100px;
|
|
margin-right: 6px;
|
|
vertical-align: -6px;
|
|
}
|
|
}
|
|
.live-tags{
|
|
margin: 8px 0px;
|
|
color:$medium-gray;
|
|
font-size:0.8em;
|
|
.live-tag{
|
|
margin-right:6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.live-exit-button{
|
|
border:0px;
|
|
background:transparent;
|
|
position:absolute;
|
|
top:12px;
|
|
right:8px;
|
|
padding: 5px 10px 1px;
|
|
border-radius: 3px;
|
|
&:hover{
|
|
background:lighten($red,28%);
|
|
}
|
|
img{
|
|
height:15px;
|
|
width:15px;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes grow-width {
|
|
0% { width: 0%; }
|
|
100% { width: 140%; }
|
|
}
|
|
|
|
@keyframes pulsate {
|
|
0% {opacity: 0.25;}
|
|
50% {opacity: 1.0;}
|
|
100% {opacity: 0.25;}
|
|
}
|
|
|
|
.pulsating-circle {
|
|
position: absolute;
|
|
left: 24px;
|
|
top: 25px;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
width: 22px;
|
|
height: 22px;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: relative;
|
|
display: block;
|
|
width: 150%;
|
|
height: 150%;
|
|
box-sizing: border-box;
|
|
margin-left: -25%;
|
|
margin-top: -25%;
|
|
border-radius: 45px;
|
|
background-color: $dark-purple;
|
|
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: $dark-purple;
|
|
border-radius: 15px;
|
|
box-shadow: 0 0 8px rgba(0,0,0,.3);
|
|
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-ring {
|
|
0% {
|
|
transform: scale(.33);
|
|
}
|
|
80%, 100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-dot {
|
|
0% {
|
|
transform: scale(.8);
|
|
}
|
|
50% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(.8);
|
|
}
|
|
}
|