Videoplayer: Style tweaks and minor cleanup
This commit is contained in:
parent
3585443508
commit
5732b1a938
@ -1,8 +1,4 @@
|
||||
$flowplayer-skin-main: $color-background-nav
|
||||
$flowplayer-skin-highlight: $color-primary
|
||||
$flowplayer-skin-background: $color-background-nav
|
||||
$flowplayer-controls-height: 30px
|
||||
|
||||
$videoplayer-controls-color: white
|
||||
$videoplayer-background-color: $color-background-nav
|
||||
|
||||
.video-js
|
||||
@ -209,35 +205,35 @@ $videoplayer-background-color: $color-background-nav
|
||||
|
||||
|
||||
.vjs-loop-button
|
||||
&:hover
|
||||
&:before
|
||||
opacity: 1
|
||||
|
||||
&:before
|
||||
font-family: 'pillar-font'
|
||||
content: '\e864'
|
||||
opacity: .7
|
||||
opacity: .4
|
||||
font-weight: normal
|
||||
|
||||
.vjs-control-active
|
||||
text-shadow: 0 0 1em #FFF
|
||||
box-shadow: inset 0 -3px $videoplayer-controls-color
|
||||
|
||||
&:before
|
||||
opacity: 1
|
||||
|
||||
|
||||
.video-js
|
||||
.vjs-play-progress, .vjs-time-tooltip
|
||||
font-family: $font-body
|
||||
position: absolute
|
||||
top: -30px
|
||||
|
||||
.vjs-mouse-display, .vjs-volume-level
|
||||
font-family: VideoJS
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
|
||||
.vjs-icon-circle:before
|
||||
content: '\f111'
|
||||
|
||||
.video-js
|
||||
.vjs-mouse-display:before, .vjs-play-progress:before, .vjs-volume-level:before
|
||||
content: '\f111'
|
||||
background-color: $videoplayer-controls-color
|
||||
border-radius: 50%
|
||||
content: ''
|
||||
height: 10px
|
||||
width: 10px
|
||||
|
||||
.vjs-icon-circle-outline
|
||||
font-family: VideoJS
|
||||
@ -253,12 +249,6 @@ $videoplayer-background-color: $color-background-nav
|
||||
&:before
|
||||
content: '\f113'
|
||||
|
||||
.vjs-icon-hd
|
||||
font-family: VideoJS
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
&:before
|
||||
content: '\f114'
|
||||
|
||||
.vjs-icon-cancel, .video-js .vjs-control.vjs-close-button
|
||||
font-family: VideoJS
|
||||
@ -275,47 +265,6 @@ $videoplayer-background-color: $color-background-nav
|
||||
&:before
|
||||
content: '\f116'
|
||||
|
||||
.vjs-icon-facebook
|
||||
font-family: VideoJS
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
&:before
|
||||
content: '\f117'
|
||||
|
||||
.vjs-icon-gplus
|
||||
font-family: VideoJS
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
&:before
|
||||
content: '\f118'
|
||||
|
||||
.vjs-icon-linkedin
|
||||
font-family: VideoJS
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
&:before
|
||||
content: '\f119'
|
||||
|
||||
.vjs-icon-twitter
|
||||
font-family: VideoJS
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
&:before
|
||||
content: '\f11a'
|
||||
|
||||
.vjs-icon-tumblr
|
||||
font-family: VideoJS
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
&:before
|
||||
content: '\f11b'
|
||||
|
||||
.vjs-icon-pinterest
|
||||
font-family: VideoJS
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
&:before
|
||||
content: '\f11c'
|
||||
|
||||
.vjs-icon-audio-description
|
||||
font-family: VideoJS
|
||||
@ -328,7 +277,7 @@ $videoplayer-background-color: $color-background-nav
|
||||
display: block
|
||||
vertical-align: top
|
||||
box-sizing: border-box
|
||||
color: white
|
||||
color: $videoplayer-controls-color
|
||||
background-color: black
|
||||
position: relative
|
||||
padding: 0
|
||||
@ -355,10 +304,8 @@ $videoplayer-background-color: $color-background-nav
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
list-style-position: outside
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
margin-top: 0
|
||||
margin-bottom: 0
|
||||
margin: 0
|
||||
|
||||
&.vjs-fluid, &.vjs-16-9, &.vjs-4-3
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
@ -416,7 +363,7 @@ body.vjs-full-window
|
||||
|
||||
.vjs-no-js
|
||||
padding: 20px
|
||||
color: white
|
||||
color: $videoplayer-controls-color
|
||||
background-color: black
|
||||
font-size: 18px
|
||||
font-family: Arial, Helvetica, sans-serif
|
||||
@ -440,7 +387,6 @@ body.vjs-full-window
|
||||
cursor: pointer
|
||||
opacity: 1
|
||||
background-color: $videoplayer-background-color
|
||||
background-color: rgba($videoplayer-background-color, .7)
|
||||
-webkit-border-radius: 0.3em
|
||||
-moz-border-radius: 0.3em
|
||||
border-radius: 0.3em
|
||||
@ -457,7 +403,7 @@ body.vjs-full-window
|
||||
.video-js
|
||||
&:hover .vjs-big-play-button, .vjs-big-play-button:focus
|
||||
outline: 0
|
||||
border-color: white
|
||||
border-color: $videoplayer-controls-color
|
||||
background-color: #73859f
|
||||
background-color: rgba(115, 133, 159, 0.5)
|
||||
-webkit-transition: all 0s
|
||||
@ -516,10 +462,10 @@ body.vjs-full-window
|
||||
background-color: #73859f
|
||||
background-color: rgba(115, 133, 159, 0.5)
|
||||
&.vjs-selected
|
||||
background-color: white
|
||||
background-color: $videoplayer-controls-color
|
||||
color: $videoplayer-background-color
|
||||
&:focus, &:hover
|
||||
background-color: white
|
||||
background-color: $videoplayer-controls-color
|
||||
color: $videoplayer-background-color
|
||||
&.vjs-menu-title
|
||||
text-align: center
|
||||
@ -539,10 +485,9 @@ body.vjs-full-window
|
||||
left: -3em
|
||||
height: 0em
|
||||
margin-bottom: 1.5em
|
||||
border-top-color: rgba($videoplayer-background-color, .7)
|
||||
border-top-color: $videoplayer-background-color
|
||||
.vjs-menu-content
|
||||
background-color: $videoplayer-background-color
|
||||
background-color: rgba($videoplayer-background-color, .7)
|
||||
position: absolute
|
||||
width: 100%
|
||||
bottom: 1.5em
|
||||
@ -603,7 +548,8 @@ body.vjs-full-window
|
||||
margin: 0
|
||||
overflow: hidden
|
||||
|
||||
.video-js .vjs-control-bar
|
||||
.video-js
|
||||
.vjs-control-bar
|
||||
display: none
|
||||
width: 100%
|
||||
position: absolute
|
||||
@ -611,7 +557,11 @@ body.vjs-full-window
|
||||
left: 0
|
||||
right: 0
|
||||
height: 3.0em
|
||||
background-color: rgba($videoplayer-background-color, .7)
|
||||
background-color: rgba($videoplayer-background-color, .6)
|
||||
transition: background-color 150ms ease-in-out
|
||||
|
||||
&:hover
|
||||
background-color: $videoplayer-background-color
|
||||
|
||||
.vjs-has-started
|
||||
.vjs-control-bar
|
||||
@ -649,25 +599,22 @@ body.vjs-full-window
|
||||
|
||||
.video-js
|
||||
.vjs-control
|
||||
font-weight: bold
|
||||
flex: none
|
||||
height: 100%
|
||||
margin: 0
|
||||
outline: none
|
||||
padding: 0
|
||||
position: relative
|
||||
text-align: center
|
||||
margin: 0
|
||||
padding: 0
|
||||
height: 100%
|
||||
width: 4em
|
||||
-webkit-box-flex: none
|
||||
-moz-box-flex: none
|
||||
-webkit-flex: none
|
||||
-ms-flex: none
|
||||
flex: none
|
||||
|
||||
&:before
|
||||
font-size: 1.8em
|
||||
line-height: 1.67
|
||||
|
||||
&:focus:before, &:hover:before, &:focus
|
||||
text-shadow: 0em 0em 1em white
|
||||
box-shadow: inset 0 -3px $videoplayer-controls-color
|
||||
|
||||
.vjs-control-text
|
||||
border: 0
|
||||
@ -744,14 +691,13 @@ body.vjs-full-window
|
||||
display: none
|
||||
|
||||
.vjs-play-progress
|
||||
background-color: white
|
||||
background-color: $videoplayer-controls-color
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
top: -0.333333333333333em
|
||||
right: -0.5em
|
||||
|
||||
.vjs-play-progress
|
||||
&:after
|
||||
display: none
|
||||
position: absolute
|
||||
@ -760,22 +706,25 @@ body.vjs-full-window
|
||||
color: black
|
||||
content: attr(data-current-time)
|
||||
padding: 6px 8px 8px 8px
|
||||
background-color: white
|
||||
background-color: rgba(255, 255, 255, 0.8)
|
||||
-webkit-border-radius: 0.3em
|
||||
-moz-border-radius: 0.3em
|
||||
border-radius: 0.3em
|
||||
background-color: $videoplayer-controls-color
|
||||
|
||||
&:before, &:after
|
||||
z-index: 1
|
||||
|
||||
.vjs-time-tooltip
|
||||
background-color: $videoplayer-background-color
|
||||
color: $videoplayer-controls-color
|
||||
z-index: 1
|
||||
|
||||
&:after
|
||||
border-top-color: $videoplayer-background-color !important
|
||||
|
||||
.vjs-load-progress
|
||||
background: #bfc7d3
|
||||
background: rgba(115, 133, 159, 0.5)
|
||||
background-color: darken($videoplayer-background-color, 10%)
|
||||
|
||||
div
|
||||
background: white
|
||||
background: rgba(115, 133, 159, 0.75)
|
||||
background: rgba($videoplayer-controls-color, .33)
|
||||
|
||||
&.vjs-no-flex .vjs-progress-control
|
||||
width: auto
|
||||
|
||||
@ -783,20 +732,29 @@ body.vjs-full-window
|
||||
.vjs-progress-control .vjs-mouse-display
|
||||
display: none
|
||||
position: absolute
|
||||
width: 2px
|
||||
height: 10px
|
||||
border: thick solid transparent
|
||||
border-top-color: white
|
||||
bottom: 0
|
||||
z-index: 1
|
||||
|
||||
.vjs-time-tooltip
|
||||
background-color: white
|
||||
color: $color-background-nav
|
||||
background-color: $videoplayer-controls-color
|
||||
border-radius: 3px
|
||||
font-size: 1.3em
|
||||
padding: 3px 8px
|
||||
top: -24px
|
||||
color: $videoplayer-background-color
|
||||
font-family: $font-body
|
||||
font-size: 1.2em
|
||||
font-weight: bold
|
||||
padding: 5px 8px
|
||||
position: absolute
|
||||
top: -40px
|
||||
z-index: 2
|
||||
|
||||
&:after
|
||||
border: thick solid transparent
|
||||
border-top-color: $videoplayer-controls-color
|
||||
bottom: -10px
|
||||
content: ' '
|
||||
height: 10px
|
||||
left: 50%
|
||||
position: absolute
|
||||
transform: translateX(-50%)
|
||||
width: 2px
|
||||
|
||||
.vjs-live .vjs-progress-control
|
||||
display: none
|
||||
@ -835,7 +793,7 @@ body.vjs-full-window
|
||||
&:after
|
||||
display: none
|
||||
.vjs-progress-control .vjs-mouse-display:after
|
||||
color: white
|
||||
color: $videoplayer-controls-color
|
||||
background-color: black
|
||||
background-color: rgba(0, 0, 0, 0.8)
|
||||
.vjs-slider
|
||||
@ -844,13 +802,8 @@ body.vjs-full-window
|
||||
cursor: pointer
|
||||
padding: 0
|
||||
margin: 0 0.45em 0 0.45em
|
||||
background-color: #73859f
|
||||
background-color: rgba(115, 133, 159, 0.5)
|
||||
&:focus
|
||||
text-shadow: 0em 0em 1em white
|
||||
-webkit-box-shadow: 0 0 1em white
|
||||
-moz-box-shadow: 0 0 1em white
|
||||
box-shadow: 0 0 1em white
|
||||
background-color: rgba(darken($videoplayer-background-color, 10%), .5)
|
||||
|
||||
.vjs-mute-control, .vjs-volume-menu-button
|
||||
cursor: pointer
|
||||
-webkit-box-flex: none
|
||||
@ -875,10 +828,6 @@ body.vjs-full-window
|
||||
margin: 1.35em 0.45em
|
||||
|
||||
.vjs-volume-bar
|
||||
&.vjs-slider-horizontal
|
||||
width: 5em
|
||||
height: 0.3em
|
||||
|
||||
&.vjs-slider-vertical
|
||||
width: 0.3em
|
||||
height: 5em
|
||||
@ -896,7 +845,7 @@ body.vjs-full-window
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: 0
|
||||
background-color: white
|
||||
background-color: $videoplayer-controls-color
|
||||
&:before
|
||||
position: absolute
|
||||
font-size: 0.9em
|
||||
@ -907,11 +856,6 @@ body.vjs-full-window
|
||||
top: -0.3em
|
||||
right: -0.5em
|
||||
|
||||
.vjs-volume-bar
|
||||
|
||||
&.vjs-slider-horizontal .vjs-volume-level
|
||||
width: 100%
|
||||
|
||||
.vjs-menu-button-popup
|
||||
&.vjs-volume-menu-button .vjs-menu
|
||||
display: block
|
||||
@ -1046,7 +990,7 @@ body.vjs-full-window
|
||||
background-color: rgba(0, 0, 0, 0.5)
|
||||
|
||||
.vjs-subtitles
|
||||
color: white
|
||||
color: $videoplayer-controls-color
|
||||
|
||||
.vjs-captions
|
||||
color: #fc6
|
||||
@ -1095,7 +1039,7 @@ video::-webkit-media-text-track-display
|
||||
font-size: 1.4em
|
||||
text-align: center
|
||||
&:before
|
||||
color: white
|
||||
color: $videoplayer-controls-color
|
||||
content: 'X'
|
||||
font-family: Arial, Helvetica, sans-serif
|
||||
font-size: 4em
|
||||
@ -1139,7 +1083,7 @@ video::-webkit-media-text-track-display
|
||||
opacity: 1
|
||||
border: inherit
|
||||
border-color: transparent
|
||||
border-top-color: white
|
||||
border-top-color: $videoplayer-controls-color
|
||||
|
||||
.vjs-seeking .vjs-loading-spinner
|
||||
&:before, &:after
|
||||
@ -1152,10 +1096,10 @@ video::-webkit-media-text-track-display
|
||||
animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite
|
||||
|
||||
.vjs-seeking .vjs-loading-spinner:before, .vjs-waiting .vjs-loading-spinner:before
|
||||
border-top-color: white
|
||||
border-top-color: $videoplayer-controls-color
|
||||
|
||||
.vjs-seeking .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:after
|
||||
border-top-color: white
|
||||
border-top-color: $videoplayer-controls-color
|
||||
-webkit-animation-delay: 0.44s
|
||||
animation-delay: 0.44s
|
||||
|
||||
@ -1177,7 +1121,7 @@ video::-webkit-media-text-track-display
|
||||
border-top-color: #73859f
|
||||
|
||||
35%
|
||||
border-top-color: white
|
||||
border-top-color: $videoplayer-controls-color
|
||||
|
||||
60%
|
||||
border-top-color: #73859f
|
||||
@ -1194,7 +1138,7 @@ video::-webkit-media-text-track-display
|
||||
border-top-color: #73859f
|
||||
|
||||
35%
|
||||
border-top-color: white
|
||||
border-top-color: $videoplayer-controls-color
|
||||
|
||||
60%
|
||||
border-top-color: #73859f
|
||||
@ -1230,7 +1174,7 @@ video::-webkit-media-text-track-display
|
||||
top: 1em
|
||||
background-color: $videoplayer-background-color
|
||||
background-color: rgba(43, 51, 63, 0.75)
|
||||
color: white
|
||||
color: $videoplayer-controls-color
|
||||
margin: 0 auto
|
||||
padding: 0.5em
|
||||
height: 15em
|
||||
@ -1296,7 +1240,7 @@ video::-webkit-media-text-track-display
|
||||
height: 8em
|
||||
bottom: 8em
|
||||
background-color: #2B333F
|
||||
background-color: rgba(43, 51, 63, 0.7)
|
||||
background-color: $videoplayer-background-color
|
||||
|
||||
.vjs-volume-panel
|
||||
display: -webkit-box
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user