You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
1.8 KiB
Sass
109 lines
1.8 KiB
Sass
@import ../terminal-font
|
|
@import ../shared
|
|
|
|
$color1: #00a0b0
|
|
$color2: #6a4a3c
|
|
$color3: #cc333f
|
|
$color4: #eb6841
|
|
$color5: #edc951
|
|
|
|
=player-overlay
|
|
background-color: rgba(0, 0, 0, 0.5)
|
|
z-index: 10
|
|
background-repeat: no-repeat
|
|
background-position: center
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
|
|
.player
|
|
// float: left;
|
|
display: block
|
|
padding: 0px
|
|
position: relative
|
|
|
|
.font-sample, .hud
|
|
+terminal-font
|
|
|
|
.loading
|
|
+player-overlay
|
|
background-image: url(image-path("loader.gif"))
|
|
|
|
.start-prompt
|
|
+player-overlay
|
|
z-index: 20
|
|
cursor: pointer
|
|
|
|
.play-button
|
|
position: absolute
|
|
left: 50%
|
|
top: 50%
|
|
width: 0
|
|
|
|
.arrow
|
|
color: white
|
|
font-size: 140px
|
|
width: 150px
|
|
margin-left: -75px
|
|
margin-top: -100px
|
|
-webkit-font-smoothing: none
|
|
text-align: center
|
|
font-weight: bold
|
|
|
|
&:hover
|
|
text-shadow: 2px 2px 5px $main-color
|
|
// -moz-transform: rotate(-5deg);
|
|
// -webkit-transform: rotate(-5deg);
|
|
|
|
.hud
|
|
padding: 0
|
|
margin: 0
|
|
border: 0
|
|
background-color: #eee
|
|
opacity: 0
|
|
position: absolute
|
|
left: 2px
|
|
right: 2px
|
|
bottom: 2px
|
|
height: 16px
|
|
overflow: hidden
|
|
color: black
|
|
-webkit-transition: opacity 0.3s ease-in-out
|
|
|
|
.toggle
|
|
background-color: black
|
|
color: white
|
|
cursor: pointer
|
|
|
|
.play
|
|
display: inline
|
|
|
|
.pause
|
|
display: none
|
|
|
|
.progress
|
|
color: black
|
|
cursor: pointer
|
|
|
|
span:hover
|
|
background-color: #777
|
|
|
|
.time
|
|
background-color: black
|
|
color: white
|
|
|
|
&.playing
|
|
.hud .toggle
|
|
background-color: $color4
|
|
|
|
.play
|
|
display: none
|
|
|
|
.pause
|
|
display: inline
|
|
|
|
&:hover .hud
|
|
opacity: 1.0
|