1047 lines
21 KiB
Sass
1047 lines
21 KiB
Sass
$flowplayer-skin-main: $color-background-nav
|
|
$flowplayer-skin-highlight: $color-primary
|
|
$flowplayer-skin-background: $color-background-nav
|
|
$flowplayer-controls-height: 30px
|
|
|
|
.flowplayer .fp-ui
|
|
z-index: $z-index-base + 1 !important
|
|
|
|
.flowplayer .fp-progress.animated
|
|
&:after
|
|
width: 16px
|
|
height: 16px
|
|
border-radius: 50%
|
|
background-color: white
|
|
|
|
.flowplayer .fp-remaining, .flowplayer .fp-duration
|
|
right: 117px !important
|
|
|
|
.flowplayer .fp-time
|
|
text-shadow: none !important
|
|
font-family: $font-body !important
|
|
|
|
.flowplayer .fp-fullscreen
|
|
border-radius: 999em !important
|
|
top: 15px !important
|
|
right: 15px !important
|
|
background-color: $flowplayer-skin-main !important
|
|
color: white !important
|
|
|
|
.flowplayer .fp-endscreen
|
|
position: absolute
|
|
top: 0
|
|
bottom: 0
|
|
left: 0
|
|
right: 0
|
|
background-color: rgba($flowplayer-skin-background, .5)
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
opacity: 0
|
|
transition: opacity 350ms ease-in-out
|
|
|
|
.flowplayer.is-finished .fp-endscreen
|
|
z-index: 12
|
|
opacity: 1
|
|
|
|
|
|
.flowplayer .fp-endscreen
|
|
.watch-again
|
|
font:
|
|
size: 2em
|
|
family: $font-body
|
|
weight: 300
|
|
color: white
|
|
cursor: pointer
|
|
transition: color 150ms ease-in-out
|
|
|
|
i
|
|
margin-right: 5px
|
|
|
|
&:hover
|
|
text-decoration: none
|
|
color: $color-primary
|
|
|
|
|
|
.flowplayer .fp-startscreen
|
|
z-index: 12
|
|
position: absolute
|
|
top: 0
|
|
bottom: 0
|
|
left: 0
|
|
right: 0
|
|
background-color: transparent
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
transition: opacity 350ms ease-in-out
|
|
|
|
.flowplayer.is-ready .fp-startscreen
|
|
opacity: 1
|
|
|
|
.flowplayer.is-playing .fp-startscreen,
|
|
.flowplayer.is-finished .fp-startscreen
|
|
opacity: 0
|
|
z-index: 0
|
|
|
|
.is-splash.flowplayer .fp-ui, .is-paused.flowplayer .fp-ui
|
|
background: none !important
|
|
|
|
.flowplayer.is-paused .fp-startscreen
|
|
.big-play-button
|
|
display: none
|
|
font-size: 5em !important
|
|
color: white
|
|
transition: transform 150ms ease-in-out
|
|
cursor: pointer
|
|
|
|
&:hover
|
|
text-decoration: none
|
|
|
|
.flowplayer.is-splash .fp-startscreen,
|
|
.flowplayer .fp-endscreen
|
|
.big-play-button
|
|
display: block
|
|
|
|
.flowplayer .fp-startscreen
|
|
&:hover
|
|
.big-play-button
|
|
transform: scale(1.2)
|
|
|
|
/* Loading */
|
|
.flowplayer .fp-ui .fp-waiting
|
|
display: none !important
|
|
|
|
.flowplayer .fp-waiting
|
|
color: white
|
|
position: absolute
|
|
top: 0
|
|
bottom: 0
|
|
left: 0
|
|
right: 0
|
|
margin: 0 !important
|
|
background-color: rgba($flowplayer-skin-background, .5)
|
|
|
|
i
|
|
font-size: 3em
|
|
opacity: .3
|
|
+position-center-translate
|
|
top: 43%
|
|
left: 46%
|
|
|
|
*
|
|
box-shadow: none !important
|
|
|
|
.flowplayer .fp-loading
|
|
opacity: 0
|
|
position: absolute
|
|
top: 0
|
|
bottom: 0
|
|
left: 0
|
|
right: 0
|
|
background-color: rgba($flowplayer-skin-background, .5)
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
transition: opacity 350ms ease-in-out
|
|
font-size: 5em
|
|
color: white
|
|
pointer-events: none
|
|
|
|
i
|
|
position: relative
|
|
padding-top: 4px
|
|
|
|
.flowplayer.is-loading .fp-loading
|
|
opacity: 1
|
|
z-index: 12
|
|
|
|
.flowplayer.is-loading .fp-startscreen
|
|
display: none
|
|
|
|
|
|
.flowplayer
|
|
position: relative
|
|
width: 100%
|
|
counter-increment: flowplayer
|
|
background-size: contain
|
|
background-repeat: no-repeat
|
|
background-position: center center
|
|
display: inline-block
|
|
*
|
|
font-weight: inherit
|
|
font-family: inherit
|
|
font-style: inherit
|
|
text-decoration: inherit
|
|
font-size: 100%
|
|
padding: 0
|
|
border: 0
|
|
margin: 0
|
|
list-style-type: none
|
|
a:focus
|
|
outline: 0
|
|
video
|
|
width: 100%
|
|
&.is-ipad video
|
|
-webkit-transform: translateX(-2048px)
|
|
|
|
.is-ready.flowplayer.is-ipad video
|
|
-webkit-transform: translateX(0)
|
|
|
|
.flowplayer
|
|
.fp-player
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
.fp-engine, .fp-ui, .fp-message
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
cursor: pointer
|
|
z-index: 1
|
|
.fp-ui
|
|
z-index: 11
|
|
.fp-message
|
|
display: none
|
|
text-align: center
|
|
padding-top: 5%
|
|
cursor: default
|
|
h2
|
|
font-size: 120%
|
|
margin-bottom: 1em
|
|
p
|
|
color: #666
|
|
font-size: 95%
|
|
.fp-title
|
|
line-height: $flowplayer-controls-height
|
|
font-weight: normal
|
|
font-family: 'myriad pro',Helvetica,Arial,sans-serif
|
|
font-size: 11px
|
|
cursor: default
|
|
color: white
|
|
width: auto
|
|
max-width: 50%
|
|
white-space: nowrap
|
|
text-overflow: ellipsis
|
|
overflow: hidden
|
|
float: left
|
|
padding: 0 20px
|
|
|
|
.aside-time.flowplayer .fp-title
|
|
display: none !important
|
|
|
|
.flowplayer .fp-controls
|
|
position: absolute
|
|
bottom: 0
|
|
width: 100%
|
|
height: 0
|
|
|
|
.is-fullscreen.flowplayer .fp-controls
|
|
bottom: 3px
|
|
|
|
.is-mouseover.flowplayer .fp-controls
|
|
bottom: 0
|
|
|
|
.flowplayer
|
|
.fp-controls, .fp-title, .fp-fullscreen, .fp-unload, .fp-close, .fp-embed, &.aside-time .fp-time
|
|
background-color: $flowplayer-skin-main
|
|
|
|
.flowplayer
|
|
background-color: black
|
|
&.fixed-controls .fp-controls
|
|
background-color: black
|
|
.fp-timeline
|
|
background-color: rgba(lighten($flowplayer-skin-main, 10%), .15)
|
|
.fp-buffer
|
|
background-color: rgba($flowplayer-skin-highlight, .3)
|
|
.fp-progress
|
|
border-radius: 999em
|
|
background-color: $flowplayer-skin-highlight
|
|
.fp-volumeslider
|
|
border-radius: 999em
|
|
background-color: rgba($flowplayer-skin-highlight, 0.15)
|
|
.fp-volumelevel
|
|
border-radius: 999em
|
|
background-color: $flowplayer-skin-highlight
|
|
.fp-waiting
|
|
display: none
|
|
margin: 19% auto
|
|
text-align: center
|
|
*
|
|
box-shadow: 0 0 5px #333
|
|
em
|
|
width: 1em
|
|
height: 1em
|
|
border-radius: 1em
|
|
background-color: rgba(255, 255, 255, 0.8)
|
|
display: inline-block
|
|
margin: .3em
|
|
opacity: .5
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50)
|
|
p
|
|
color: #ccc
|
|
font-weight: bold
|
|
.fp-speed
|
|
font-size: 30px
|
|
background-color: #333
|
|
background-color: rgba(51, 51, 51, 0.8)
|
|
color: #eee
|
|
margin: 0 auto
|
|
text-align: center
|
|
width: 120px
|
|
padding: .1em 0 0
|
|
opacity: 0
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0)
|
|
transition: opacity .5s
|
|
&.fp-hilite
|
|
opacity: 1
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100)
|
|
.fp-help
|
|
position: absolute
|
|
top: 0
|
|
left: -9999em
|
|
z-index: 100
|
|
background-color: #333
|
|
background-color: rgba(51, 51, 51, 0.9)
|
|
width: 100%
|
|
height: 100%
|
|
opacity: 0
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0)
|
|
transition: opacity .2s
|
|
text-align: center
|
|
|
|
.is-help.flowplayer .fp-help
|
|
left: 0
|
|
opacity: 1
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100)
|
|
|
|
.flowplayer
|
|
.fp-help
|
|
.fp-help-section
|
|
margin: 3%
|
|
direction: ltr
|
|
.fp-help-basics
|
|
margin-top: 6%
|
|
p
|
|
color: #eee
|
|
margin: .5em 0
|
|
font-size: 14px
|
|
line-height: 1.5
|
|
display: inline-block
|
|
margin: 1% 2%
|
|
em
|
|
background: #eee
|
|
border-radius: .3em
|
|
margin-right: .4em
|
|
padding: .3em .6em
|
|
color: #333
|
|
small
|
|
font-size: 90%
|
|
color: #aaa
|
|
.fp-close
|
|
display: block
|
|
.fp-dropdown
|
|
position: absolute
|
|
top: 5px
|
|
width: 100px
|
|
background-color: black !important
|
|
border-radius: 3px
|
|
box-sizing: border-box
|
|
margin: 0 !important
|
|
list-style-type: none !important
|
|
&:before
|
|
content: ''
|
|
display: block
|
|
position: absolute
|
|
top: -5px
|
|
left: calc(50% - 5px)
|
|
width: 0
|
|
height: 0
|
|
border-left: 5px solid transparent
|
|
border-right: 5px solid transparent
|
|
border-bottom: 5px solid rgba(51, 51, 51, 0.9)
|
|
li
|
|
padding: 10px !important
|
|
margin: 0 !important
|
|
color: white !important
|
|
font-size: 11px !important
|
|
list-style-type: none !important
|
|
&.active
|
|
background-color: #00a7c8 !important
|
|
cursor: default !important
|
|
&.fp-dropup
|
|
bottom: 20px
|
|
top: auto
|
|
&:before
|
|
top: auto
|
|
bottom: -5px
|
|
border-bottom: none
|
|
border-top: 5px solid rgba(51, 51, 51, 0.9)
|
|
.fp-tooltip
|
|
background-color: black
|
|
color: white
|
|
display: none
|
|
position: absolute
|
|
padding: 5px
|
|
&:before
|
|
content: ''
|
|
display: block
|
|
position: absolute
|
|
bottom: -5px
|
|
width: 0
|
|
height: 0
|
|
left: calc(50% - 5px)
|
|
border-left: 5px solid transparent
|
|
border-right: 5px solid transparent
|
|
border-top: 5px solid black
|
|
.fp-timeline-tooltip
|
|
bottom: 35px
|
|
.fp-timeline:hover + .fp-timeline-tooltip
|
|
display: block
|
|
|
|
@media (max-width: 600px)
|
|
.flowplayer .fp-help p
|
|
font-size: 9px
|
|
|
|
.is-touch.flowplayer .fp-timeline:hover + .fp-timeline-tooltip
|
|
display: none
|
|
|
|
.flowplayer
|
|
.fp-subtitle
|
|
position: absolute
|
|
bottom: 40px
|
|
left: -99999em
|
|
z-index: 10
|
|
text-align: center
|
|
width: 100%
|
|
opacity: 0
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0)
|
|
transition: opacity .3s
|
|
p
|
|
display: inline
|
|
background-color: #333
|
|
background-color: rgba(51, 51, 51, 0.9)
|
|
color: #eee
|
|
padding: .1em .4em
|
|
font-size: 16px
|
|
line-height: 1.6
|
|
&:after
|
|
content: ''
|
|
clear: both
|
|
b
|
|
font-weight: bold
|
|
i
|
|
font-style: italic
|
|
u
|
|
text-decoration: underline
|
|
&.fp-active
|
|
left: 0
|
|
opacity: 1
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100)
|
|
.fp-fullscreen, .fp-unload, .fp-mute, .fp-embed, .fp-close, .fp-play, .fp-menu
|
|
font-family: 'pillar-font' !important
|
|
color: white !important
|
|
font-size: 15px !important
|
|
text-align: center !important
|
|
line-height: 30px !important
|
|
text-decoration: none !important
|
|
|
|
.flowplayer
|
|
.fp-fullscreen:before
|
|
content: "\e842"
|
|
.fp-unload:before, .fp-close:before
|
|
content: "\e600"
|
|
.fp-mute:before
|
|
content: "\e86c"
|
|
.fp-embed:before
|
|
content: "\e603"
|
|
.fp-play:before
|
|
content: "\e851"
|
|
.fp-menu:before
|
|
content: "\e604"
|
|
.fp-flash-disabled
|
|
background: #333
|
|
width: 390px
|
|
margin: 0 auto
|
|
position: absolute
|
|
bottom: 0
|
|
color: white
|
|
|
|
.is-fullscreen.flowplayer .fp-ui
|
|
background-size: auto
|
|
|
|
.is-seeking.flowplayer .fp-ui, .is-loading.flowplayer .fp-ui
|
|
background-image: none
|
|
|
|
.flowplayer
|
|
.fp-fullscreen, .fp-unload, .fp-close
|
|
position: absolute
|
|
top: 10px
|
|
left: auto
|
|
right: 10px
|
|
display: block
|
|
width: 30px
|
|
height: 23px
|
|
text-align: center
|
|
cursor: pointer
|
|
height: 30px
|
|
width: 30px
|
|
|
|
.flowplayer
|
|
.fp-unload, .fp-close
|
|
display: none
|
|
.fp-play
|
|
display: none
|
|
height: 30px !important
|
|
position: absolute
|
|
bottom: 0
|
|
left: 0
|
|
text-align: center
|
|
|
|
.is-playing.flowplayer .fp-play:before
|
|
content: "\f00e"
|
|
|
|
.flowplayer .fp-menu
|
|
display: none
|
|
position: absolute
|
|
bottom: 0
|
|
z-index: 11
|
|
right: 10px
|
|
|
|
.has-menu.flowplayer .fp-menu
|
|
display: block
|
|
|
|
.flowplayer .fp-menu .fp-dropdown
|
|
z-index: 12
|
|
display: none
|
|
left: -42.5px
|
|
line-height: auto
|
|
width: 149px
|
|
transform: none
|
|
|
|
.flowplayer
|
|
.fp-menu.dropdown-open .fp-dropdown
|
|
display: block
|
|
&.is-ready.is-closeable
|
|
.fp-unload
|
|
display: block
|
|
.fp-embed
|
|
right: 90px
|
|
.fp-fullscreen
|
|
right: 50px
|
|
&.is-fullscreen .fp-fullscreen
|
|
display: block !important
|
|
&:before
|
|
content: "\e843"
|
|
.fp-timeline
|
|
height: 8px
|
|
position: relative
|
|
overflow: hidden
|
|
top: 11px
|
|
height: 10px
|
|
margin: 0 160px 0 55px
|
|
border-radius: 999em
|
|
|
|
.no-brand.flowplayer .fp-timeline
|
|
margin-right: 160px
|
|
|
|
.has-menu.no-brand.flowplayer .fp-timeline
|
|
margin-right: 187px
|
|
|
|
.no-volume.no-brand.flowplayer .fp-timeline
|
|
margin-right: 95px
|
|
|
|
.no-mute
|
|
&.no-brand.flowplayer .fp-timeline
|
|
margin-right: 130px
|
|
&.no-volume.no-brand.flowplayer .fp-timeline
|
|
margin-right: 55px
|
|
|
|
.has-menu.flowplayer .fp-timeline
|
|
margin-right: 252px
|
|
|
|
.no-volume.flowplayer .fp-timeline
|
|
margin-right: 160px
|
|
|
|
.no-mute
|
|
&.flowplayer .fp-timeline
|
|
margin-right: 195px
|
|
&.no-volume.flowplayer .fp-timeline
|
|
margin-right: 120px
|
|
|
|
.has-menu.no-mute.no-volume.flowplayer .fp-timeline
|
|
margin-right: 157px
|
|
|
|
|
|
.is-long.flowplayer .fp-timeline
|
|
margin: 0 255px 0 85px
|
|
|
|
.no-volume.is-long.flowplayer .fp-timeline
|
|
margin-right: 180px
|
|
|
|
.no-mute.is-long.flowplayer .fp-timeline
|
|
margin-right: 140px
|
|
|
|
.has-menu.is-long.flowplayer .fp-timeline
|
|
margin-right: 292px
|
|
|
|
.no-brand.is-long.flowplayer .fp-timeline
|
|
margin-right: 190px
|
|
|
|
.no-volume.no-brand.is-long.flowplayer .fp-timeline
|
|
margin-right: 125px
|
|
|
|
.no-mute.no-brand.is-long.flowplayer .fp-timeline
|
|
margin-right: 85px
|
|
|
|
.has-menu.no-brand.is-long.flowplayer .fp-timeline
|
|
margin-right: 227px
|
|
|
|
.aside-time.flowplayer .fp-timeline, .no-time.flowplayer .fp-timeline
|
|
margin: 0 190px 0 10px
|
|
|
|
.has-menu
|
|
&.aside-time.flowplayer .fp-timeline, &.no-time.flowplayer .fp-timeline
|
|
margin-right: 227px
|
|
|
|
.aside-time
|
|
&.no-brand.flowplayer .fp-timeline, &.no-volume.flowplayer .fp-timeline
|
|
margin-right: 115px
|
|
|
|
.no-time.no-volume.flowplayer .fp-timeline
|
|
margin-right: 115px
|
|
|
|
.aside-time.no-mute.flowplayer .fp-timeline, .no-time.no-mute.flowplayer .fp-timeline
|
|
margin-right: 75px
|
|
|
|
.flowplayer
|
|
.fp-buffer, .fp-progress
|
|
position: absolute
|
|
top: 0
|
|
left: auto
|
|
height: 100%
|
|
cursor: col-resize
|
|
.fp-buffer
|
|
transition: width .25s linear
|
|
.fp-timeline.no-animation .fp-buffer
|
|
transition: none
|
|
.fp-progress.animated
|
|
transition-timing-function: linear
|
|
transition-property: width,height
|
|
&.is-touch
|
|
.fp-timeline
|
|
overflow: visible
|
|
.fp-progress
|
|
transition: width .2s linear
|
|
box-sizing: border-box
|
|
.fp-timeline.is-dragging .fp-progress
|
|
transition: right .1s linear,border .1s linear,top .1s linear,left .1s linear
|
|
&.is-mouseover .fp-progress
|
|
&:after, &:before
|
|
content: ''
|
|
box-sizing: border-box
|
|
display: block
|
|
border-radius: 10px
|
|
position: absolute
|
|
right: -5px
|
|
&.is-mouseover
|
|
.fp-progress
|
|
&:before
|
|
width: 10px
|
|
height: 10px
|
|
&:after
|
|
height: 18px
|
|
width: 18px
|
|
top: -4px
|
|
right: -10px
|
|
border: 5px solid rgba(255, 255, 255, 0.65)
|
|
box-shadow: 1px 0 4px rgba(0, 0, 0, 0.5)
|
|
.fp-timeline.is-dragging .fp-progress:after
|
|
border: 10px solid white
|
|
border-radius: 20px
|
|
transition: inherit
|
|
top: -5px
|
|
right: -10px
|
|
.fp-volume
|
|
position: absolute
|
|
height: 6px
|
|
bottom: 12px
|
|
right: 10px
|
|
|
|
.has-menu.flowplayer .fp-volume
|
|
right: 37px
|
|
|
|
.flowplayer .fp-mute
|
|
position: relative
|
|
width: 30px
|
|
height: 30px
|
|
float: left
|
|
top: -12px
|
|
cursor: pointer
|
|
|
|
.no-mute.flowplayer .fp-mute
|
|
display: none
|
|
|
|
.flowplayer .fp-volumeslider
|
|
width: 75px
|
|
height: 6px
|
|
cursor: col-resize
|
|
float: left
|
|
|
|
.no-volume.flowplayer .fp-volumeslider
|
|
display: none
|
|
|
|
.flowplayer
|
|
.fp-volumelevel
|
|
height: 100%
|
|
.fp-time
|
|
text-shadow: 0 0 1px black
|
|
font-size: 11px
|
|
font-weight: normal
|
|
font-family: 'myriad pro',Helvetica,Arial,sans-serif !important
|
|
color: white
|
|
width: 100%
|
|
&.is-inverted
|
|
.fp-duration
|
|
display: none
|
|
.fp-remaining
|
|
display: inline
|
|
em
|
|
width: 35px
|
|
height: 10px
|
|
line-height: 10px
|
|
text-align: center
|
|
position: absolute
|
|
bottom: 9px
|
|
|
|
.no-time.flowplayer .fp-time
|
|
display: none
|
|
|
|
.is-long.flowplayer .fp-time em
|
|
width: 65px
|
|
|
|
.flowplayer .fp-elapsed
|
|
left: 10px
|
|
|
|
.flowplayer
|
|
.fp-remaining, .fp-duration
|
|
right: 180px
|
|
color: #eee
|
|
|
|
.no-brand.flowplayer
|
|
.fp-remaining, .fp-duration
|
|
right: 125px
|
|
|
|
.has-menu.no-brand.flowplayer
|
|
.fp-remaining, .fp-duration
|
|
right: 152px
|
|
|
|
.no-volume.no-brand.flowplayer
|
|
.fp-remaining, .fp-duration
|
|
right: 50px
|
|
|
|
.no-mute
|
|
&.no-brand.flowplayer
|
|
.fp-remaining, .fp-duration
|
|
right: 95px
|
|
&.no-volume.no-brand.flowplayer
|
|
.fp-remaining, .fp-duration
|
|
right: 10px
|
|
|
|
.has-menu.flowplayer
|
|
.fp-remaining, .fp-duration
|
|
right: 217px
|
|
|
|
.no-volume.flowplayer
|
|
.fp-remaining, .fp-duration
|
|
right: 115px
|
|
|
|
.no-mute
|
|
&.flowplayer
|
|
.fp-remaining, .fp-duration
|
|
right: 160px
|
|
&.no-volume.flowplayer
|
|
.fp-remaining, .fp-duration
|
|
right: 75px
|
|
|
|
.has-menu.no-mute.no-volume.flowplayer
|
|
.fp-remaining, .fp-duration
|
|
right: 112px
|
|
|
|
.flowplayer
|
|
.fp-remaining
|
|
display: none
|
|
&.aside-time .fp-time
|
|
position: absolute
|
|
top: 10px
|
|
left: 10px
|
|
bottom: auto !important
|
|
width: auto
|
|
background-color: black
|
|
background-color: rgba(0, 0, 0, 0.65)
|
|
height: 30px
|
|
padding: 0 5px
|
|
border-radius: control_border_radius
|
|
line-height: 30px
|
|
text-align: center
|
|
font-size: 15px
|
|
|
|
.no-background.flowplayer.aside-time .fp-time
|
|
background-color: transparent !important
|
|
|
|
.flowplayer
|
|
&.aside-time .fp-time
|
|
strong, em
|
|
position: static
|
|
.fp-elapsed::after
|
|
content: ' / '
|
|
&.is-splash, &.is-poster
|
|
cursor: pointer
|
|
&.is-poster .fp-controls, &.is-splash .fp-fullscreen, &.is-poster .fp-fullscreen, &.is-splash .fp-unload, &.is-poster .fp-unload, &.is-splash .fp-time, &.is-poster .fp-time, &.is-splash .fp-embed, &.is-poster .fp-embed, &.is-splash .fp-title, &.is-poster .fp-title, &.is-splash .fp-brand
|
|
display: none !important
|
|
&.is-poster
|
|
.fp-brand
|
|
display: none !important
|
|
.fp-engine
|
|
top: -9999em
|
|
&.is-loading
|
|
.fp-waiting
|
|
display: block
|
|
.fp-controls, .fp-time
|
|
display: none
|
|
.fp-ui
|
|
background-position: -9999em
|
|
video.fp-engine
|
|
position: absolute
|
|
top: -9999em
|
|
&.is-seeking .fp-waiting
|
|
display: block
|
|
&.is-playing
|
|
background-image: none !important
|
|
background-color: black !important
|
|
|
|
&.hls-fix.is-finished .fp-engine
|
|
position: absolute
|
|
top: -9999em
|
|
&.is-fullscreen
|
|
top: 0 !important
|
|
left: 0 !important
|
|
border: 0 !important
|
|
margin: 0 !important
|
|
width: 100% !important
|
|
height: 100% !important
|
|
max-width: 100% !important
|
|
z-index: 99999 !important
|
|
box-shadow: 0 !important
|
|
background-image: none !important
|
|
|
|
|
|
.flowplayer
|
|
&.is-error
|
|
border: 1px solid #909090
|
|
background: #fdfdfd !important
|
|
h2
|
|
font-weight: bold
|
|
font-size: large
|
|
margin-top: 10%
|
|
.fp-message
|
|
display: block
|
|
object, video, .fp-controls, .fp-time, .fp-subtitle
|
|
display: none
|
|
&.is-ready.is-muted .fp-mute
|
|
opacity: .7
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70)
|
|
&:before
|
|
content: "\e86d"
|
|
font-family: 'pillar-font'
|
|
|
|
&.is-mouseout .fp-controls
|
|
opacity: 0
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0)
|
|
transition: opacity .15s .3s
|
|
|
|
// .is-fullscreen.flowplayer.is-mouseout .fp-controls
|
|
// height: 3px
|
|
// bottom: 0
|
|
|
|
.flowplayer
|
|
&.is-mouseout
|
|
.fp-title
|
|
// overflow: hidden
|
|
.fp-timeline
|
|
margin: 0 !important
|
|
height: 0
|
|
top: 0
|
|
border-radius: 0
|
|
.fp-fullscreen, .fp-unload, .fp-elapsed, .fp-remaining, .fp-duration, .fp-embed, .fp-title, .fp-volume, .fp-play, .fp-menu, .fp-brand, .fp-timeline-tooltip, &.aside-time .fp-time
|
|
opacity: 0
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0)
|
|
transition: opacity .5s .3s
|
|
&.is-mouseover .fp-controls, &.fixed-controls .fp-controls, &.is-mouseover .fp-title, &.fixed-controls .fp-title
|
|
height: $flowplayer-controls-height
|
|
&.is-mouseover .fp-fullscreen, &.fixed-controls .fp-fullscreen, &.is-mouseover .fp-unload, &.fixed-controls .fp-unload, &.is-mouseover .fp-elapsed, &.fixed-controls .fp-elapsed, &.is-mouseover .fp-remaining, &.fixed-controls .fp-remaining, &.is-mouseover .fp-duration, &.fixed-controls .fp-duration, &.is-mouseover .fp-embed, &.fixed-controls .fp-embed, &.is-mouseover .fp-logo, &.fixed-controls .fp-logo, &.is-mouseover .fp-volume, &.fixed-controls .fp-volume, &.is-mouseover .fp-play, &.fixed-controls .fp-play, &.is-mouseover .fp-menu
|
|
opacity: 1
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100)
|
|
&.fixed-controls
|
|
.fp-menu
|
|
opacity: 1
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100)
|
|
.fp-volume
|
|
display: block
|
|
.fp-controls
|
|
bottom: ($flowplayer-controls-height * -1)
|
|
|
|
.is-splash.flowplayer.is-mouseout.is-paused
|
|
.fp-controls
|
|
height: $flowplayer-controls-height
|
|
|
|
.fp-fullscreen, .fp-unload, .fp-elapsed, .fp-remaining, .fp-duration, .fp-embed, .fp-title, .fp-volume, .fp-play, .fp-menu, .fp-brand, .fp-timeline-tooltip, &.aside-time .fp-time
|
|
opacity: 1
|
|
|
|
.is-fullscreen.flowplayer.fixed-controls .fp-controls
|
|
bottom: 0
|
|
|
|
.flowplayer.fixed-controls .fp-time em
|
|
bottom: -20px
|
|
opacity: 1
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100)
|
|
|
|
.is-fullscreen.flowplayer.fixed-controls .fp-time em
|
|
bottom: 10px
|
|
|
|
.flowplayer
|
|
&.is-disabled .fp-progress
|
|
background-color: #999
|
|
&.is-flash-disabled
|
|
background-color: #333
|
|
object.fp-engine
|
|
z-index: 100
|
|
.fp-flash-disabled
|
|
display: block
|
|
z-index: 101
|
|
.fp-embed
|
|
position: absolute
|
|
top: 10px
|
|
left: auto
|
|
right: 50px
|
|
display: block
|
|
width: 30px
|
|
height: 30px
|
|
text-align: center
|
|
|
|
|
|
.flowplayer .fp-embed-code
|
|
position: absolute
|
|
display: none
|
|
top: 10px
|
|
right: 67px
|
|
background-color: #333
|
|
padding: 3px 5px
|
|
border-radius: 3px
|
|
box-shadow: 0 0 3px #ccc
|
|
font-size: 12px
|
|
|
|
.is-closeable.flowplayer .fp-embed-code
|
|
right: 99px
|
|
|
|
.flowplayer .fp-embed-code:before
|
|
content: ''
|
|
width: 0
|
|
height: 0
|
|
position: absolute
|
|
top: 2px
|
|
right: -10px
|
|
border: 5px solid transparent
|
|
border-left-color: #333
|
|
|
|
|
|
.flowplayer
|
|
.fp-embed-code
|
|
textarea
|
|
width: 400px
|
|
height: 16px
|
|
font-family: monaco,"courier new",verdana
|
|
color: #777
|
|
white-space: nowrap
|
|
resize: none
|
|
overflow: hidden
|
|
border: 0
|
|
outline: 0
|
|
background-color: transparent
|
|
color: #ccc
|
|
label
|
|
display: block
|
|
color: #999
|
|
&.is-embedding
|
|
.fp-embed, .fp-embed-code
|
|
display: block
|
|
opacity: 1
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100)
|
|
&.no-time .fp-embed
|
|
left: 10px !important
|
|
|
|
.flowplayer
|
|
&.is-live
|
|
.fp-timeline, .fp-duration, .fp-remaining
|
|
display: none
|
|
&.is-touch.is-mouseover .fp-progress:before
|
|
background-color: #00a7c8
|
|
.fp-menu .fp-dropdown
|
|
right: -10px
|
|
left: auto
|
|
bottom: 30px
|
|
border-radius: 0
|
|
&:before
|
|
display: none
|
|
|
|
.flowplayer
|
|
.fp-play
|
|
width: 30px
|
|
&.aside-time .fp-time
|
|
top: 0
|
|
left: 0
|
|
|
|
.no-brand.flowplayer
|
|
.fp-remaining, .fp-duration
|
|
right: 115px
|
|
|
|
.flowplayer
|
|
.fp-fullscreen, .fp-unload, .fp-close, .fp-embed
|
|
right: 0
|
|
top: 0
|
|
|
|
.flowplayer .fp-embed
|
|
right: 32px
|
|
|
|
.flowplayer.is-closeable.is-ready
|
|
.fp-fullscreen
|
|
right: 32px
|
|
.fp-embed
|
|
right: 64px
|
|
|
|
.flowplayer.play-button
|
|
.fp-play
|
|
display: block
|
|
.fp-elapsed
|
|
left: 27px
|
|
|
|
.flowplayer.play-button .fp-timeline
|
|
margin-left: 72px
|
|
|
|
.is-long.flowplayer.play-button .fp-timeline
|
|
margin-left: 102px
|
|
|
|
.no-time.flowplayer.play-button .fp-timeline, .aside-time.flowplayer.play-button .fp-timeline
|
|
margin-left: 27px
|
|
|
|
/* This get removed by using the key, but adding this to develop the theme under localhost */
|
|
.flowplayer .fp-context-menu,
|
|
.flowplayer .fp-logo, .flowplayer .fp-brand
|
|
display: none !important
|
|
opacity: 0 !important
|
|
visibility: hidden !important
|