Metaunix/metaunix-player-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed some style errors

Browse Source
This commit is contained in:
Gregory Ballantine 2018-04-11 10:38:43 -04:00
parent c21edf61c6
commit 698aba8b45
1 changed files with 33 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/sass/mup.sass
View File

@ -1,10 +1,15 @@
//# general variables //# general variables
$main-color: red $main-color: #f00
$text-color: white $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 variables
$slider-track-color: grey $slider-track-color: #808080
$slider-progress-color: red $slider-progress-color: $main-color
$slider-thumb-color: red $slider-thumb-color: $main-color
$slider-thumb-height: calc(100% + 8px) $slider-thumb-height: calc(100% + 8px)
$slider-thumb-width: 15px $slider-thumb-width: 15px
$slider-thumb-border-radius: 15px $slider-thumb-border-radius: 15px
@ -23,12 +28,12 @@ $slider-thumb-border-radius: 15px
vertical-align: top vertical-align: top
white-space: nowrap white-space: nowrap
padding: 5px padding: 5px
background: #212121 background: $background-color-dark
overflow: auto overflow: auto
input:focus input:focus
outline: none outline: none
button::-moz-focus-inner button::-moz-focus-inner
border: none border: none
@ -44,7 +49,7 @@ $slider-thumb-border-radius: 15px
.mup-control .mup-control
display: inline-block display: inline-block
color: $text-color color: $text-color-white
&:not(:last-child) &:not(:last-child)
margin-right: 10px margin-right: 10px
@ -71,15 +76,15 @@ $slider-thumb-border-radius: 15px
button.mup-control button.mup-control
margin: 0 margin: 0
padding: 7px 12px padding: 7px 12px
background: #eee background: $control-background-light
border: none border: none
color: #000 color: $text-color-dark
font-size: 16px font-size: 16px
font-weight: bold font-weight: bold
transition: all 200ms ease-in-out transition: all 200ms ease-in-out
&:hover &:hover
background: #fff background: lighten($control-background-light, 10%)
color: #212121 color: $text-color-dark
cursor: pointer cursor: pointer
.mup-volume-slider .mup-volume-slider
@ -90,20 +95,20 @@ $slider-thumb-border-radius: 15px
padding: 0 padding: 0
background: none background: none
border: none border: none
//# Chromium-based and Safari browser styles
&::-webkit-slider-runnable-track &::-webkit-slider-runnable-track
width: 100% width: 100%
height: 10px height: 10px
cursor: pointer cursor: pointer
animate: 0.2s animate: 0.2s
box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
background: $slider-track-color background: $slider-track-color
border-radius: 25px border-radius: 25px
border: 0px solid #000101 border: 0px solid $control-border
overflow: hidden overflow: hidden
&::-webkit-slider-thumb &::-webkit-slider-thumb
box-shadow: -100px 0 0 90px $main-color box-shadow: -100px 0 0 90px $main-color
border: 0px solid #000000 border: 0px solid $shadow-color
width: $slider-thumb-width width: $slider-thumb-width
height: $slider-thumb-height height: $slider-thumb-height
border-radius: $slider-thumb-border-radius border-radius: $slider-thumb-border-radius
@ -113,29 +118,29 @@ $slider-thumb-border-radius: 15px
margin-top: -2.4px margin-top: -2.4px
&:focus::-webkit-slider-runnable-track &:focus::-webkit-slider-runnable-track
background: $slider-track-color background: $slider-track-color
//# Mozilla browser styles for range
&::-moz-range-track &::-moz-range-track
width: 100% width: 100%
height: 10px height: 10px
cursor: pointer cursor: pointer
animate: 0.2s animate: 0.2s
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
background: $slider-track-color background: $slider-track-color
border-radius: 25px border-radius: 25px
border: 0px solid #000101 border: 0px solid $control-border
&::-moz-range-progress &::-moz-range-progress
height: 100% height: 100%
background: $main-color background: $main-color
border-radius: $slider-thumb-border-radius border-radius: $slider-thumb-border-radius
&::-moz-range-thumb &::-moz-range-thumb
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
border: 0px solid #000000 border: 0px solid $control-border
width: $slider-thumb-width width: $slider-thumb-width
height: $slider-thumb-height height: $slider-thumb-height
border-radius: $slider-thumb-border-radius border-radius: $slider-thumb-border-radius
background: $main-color background: $main-color
cursor: pointer cursor: pointer
//# Microsoft browser styles for range
&::-ms-track &::-ms-track
width: 100% width: 100%
height: 10px height: 10px
@ -145,17 +150,17 @@ $slider-thumb-border-radius: 15px
border-color: transparent border-color: transparent
border-width: 39px 0 border-width: 39px 0
color: transparent color: transparent
&::-ms-fill-lower, &::-ms-fill-lower,
&::-ms-fill-upper &::-ms-fill-upper
background: $slider-track-color background: $slider-track-color
border: 0px solid #000101 border: 0px solid $control-border
border-radius: 50px border-radius: 50px
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
&::-ms-fill-lower &::-ms-fill-lower
background: $slider-thumb-color background: $slider-thumb-color
&::-ms-thumb &::-ms-thumb
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
border: 0px solid #000000 border: 0px solid $control-border
width: $slider-thumb-width width: $slider-thumb-width
height: $slider-thumb-height height: $slider-thumb-height
border-radius: $slider-thumb-border-radius border-radius: $slider-thumb-border-radius
@ -163,4 +168,4 @@ $slider-thumb-border-radius: 15px
cursor: pointer cursor: pointer
&:focus &:focus
&::-ms-fill-lower, &::-ms-fill-upper &::-ms-fill-lower, &::-ms-fill-upper
background: #ac51b5 background: $main-color