172 lines
4.2 KiB
Sass
172 lines
4.2 KiB
Sass
//# general variables
|
|
$main-color: #f00
|
|
$background-color-dark: #212121
|
|
$control-background-light: #eee
|
|
$control-border: #212121
|
|
$shadow-color: #000
|
|
$text-color-dark: #212121
|
|
$text-color-white: #fff
|
|
//# slider variables
|
|
$slider-track-color: #808080
|
|
$slider-progress-color: $main-color
|
|
$slider-thumb-color: $main-color
|
|
$slider-thumb-height: calc(100% + 8px)
|
|
$slider-thumb-width: 15px
|
|
$slider-thumb-border-radius: 15px
|
|
|
|
//# styles
|
|
.mup-video
|
|
vertical-align: top
|
|
width: 100%
|
|
margin: 0
|
|
padding: 0
|
|
&:focus,
|
|
&:active
|
|
outline: none
|
|
|
|
.mup-controls
|
|
vertical-align: top
|
|
white-space: nowrap
|
|
padding: 5px
|
|
background: $background-color-dark
|
|
overflow: auto
|
|
|
|
input:focus
|
|
outline: none
|
|
|
|
button::-moz-focus-inner
|
|
border: none
|
|
|
|
.mup-controls-left
|
|
float: left
|
|
margin: 0
|
|
padding: 0
|
|
|
|
.mup-controls-right
|
|
float: right
|
|
margin: 0
|
|
padding: 0
|
|
|
|
.mup-control
|
|
display: inline-block
|
|
color: $text-color-white
|
|
&:not(:last-child)
|
|
margin-right: 10px
|
|
|
|
.mup-progress-bar, .mup-progress-fill
|
|
margin: 0
|
|
padding: 0
|
|
border: 0
|
|
|
|
.mup-control.mup-progress-bar
|
|
display: block
|
|
height: 8px
|
|
margin: 0 0 5px
|
|
padding: 0
|
|
background: $slider-track-color
|
|
|
|
.mup-progress-fill
|
|
display: block
|
|
width: 0
|
|
height: 100%
|
|
margin: 0
|
|
padding: 0
|
|
background: $main-color
|
|
|
|
button.mup-control
|
|
margin: 0
|
|
padding: 7px 12px
|
|
background: $control-background-light
|
|
border: none
|
|
color: $text-color-dark
|
|
font-size: 16px
|
|
font-weight: bold
|
|
transition: all 200ms ease-in-out
|
|
&:hover
|
|
background: lighten($control-background-light, 10%)
|
|
color: $text-color-dark
|
|
cursor: pointer
|
|
|
|
.mup-volume-slider
|
|
display: inline-block
|
|
width: 120px
|
|
height: 10px
|
|
margin: 10px 0 0
|
|
padding: 0
|
|
background: none
|
|
border: none
|
|
//# Chromium-based and Safari browser styles
|
|
&::-webkit-slider-runnable-track
|
|
width: 100%
|
|
height: 10px
|
|
cursor: pointer
|
|
animate: 0.2s
|
|
box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
|
|
background: $slider-track-color
|
|
border-radius: 25px
|
|
border: 0px solid $control-border
|
|
overflow: hidden
|
|
&::-webkit-slider-thumb
|
|
box-shadow: -100px 0 0 90px $main-color
|
|
border: 0px solid $shadow-color
|
|
width: $slider-thumb-width
|
|
height: $slider-thumb-height
|
|
border-radius: $slider-thumb-border-radius
|
|
background: $main-color
|
|
cursor: pointer
|
|
-webkit-appearance: none
|
|
margin-top: -2.4px
|
|
&:focus::-webkit-slider-runnable-track
|
|
background: $slider-track-color
|
|
//# Mozilla browser styles for range
|
|
&::-moz-range-track
|
|
width: 100%
|
|
height: 10px
|
|
cursor: pointer
|
|
animate: 0.2s
|
|
box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
|
|
background: $slider-track-color
|
|
border-radius: 25px
|
|
border: 0px solid $control-border
|
|
&::-moz-range-progress
|
|
height: 100%
|
|
background: $main-color
|
|
border-radius: $slider-thumb-border-radius
|
|
&::-moz-range-thumb
|
|
box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
|
|
border: 0px solid $control-border
|
|
width: $slider-thumb-width
|
|
height: $slider-thumb-height
|
|
border-radius: $slider-thumb-border-radius
|
|
background: $main-color
|
|
cursor: pointer
|
|
//# Microsoft browser styles for range
|
|
&::-ms-track
|
|
width: 100%
|
|
height: 10px
|
|
cursor: pointer
|
|
animate: 0.2s
|
|
background: transparent
|
|
border-color: transparent
|
|
border-width: 39px 0
|
|
color: transparent
|
|
&::-ms-fill-lower,
|
|
&::-ms-fill-upper
|
|
background: $slider-track-color
|
|
border: 0px solid $control-border
|
|
border-radius: 50px
|
|
box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
|
|
&::-ms-fill-lower
|
|
background: $slider-thumb-color
|
|
&::-ms-thumb
|
|
box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
|
|
border: 0px solid $control-border
|
|
width: $slider-thumb-width
|
|
height: $slider-thumb-height
|
|
border-radius: $slider-thumb-border-radius
|
|
background: $main-color
|
|
cursor: pointer
|
|
&:focus
|
|
&::-ms-fill-lower, &::-ms-fill-upper
|
|
background: $main-color
|