372 lines
8.2 KiB
Sass
Executable File
372 lines
8.2 KiB
Sass
Executable File
$_theme: () !default
|
|
|
|
@use "sass:selector"
|
|
@use "sass:map"
|
|
|
|
.videoControls
|
|
position: absolute
|
|
bottom: 0
|
|
left: 0
|
|
display: flex
|
|
height: 35px
|
|
width: 100%
|
|
opacity: 1
|
|
transition: opacity 0.2s
|
|
background: linear-gradient(transparent, black)
|
|
z-index: 2
|
|
//background-color: #30303030
|
|
|
|
--accent-color: cyan
|
|
|
|
&.hidden
|
|
opacity: 0
|
|
|
|
@mixin svg-button
|
|
background-color: transparent
|
|
background-size: cover
|
|
background-repeat: no-repeat
|
|
filter: saturate(0) brightness(2)
|
|
border: none
|
|
transition: filter 0.2s
|
|
transition: scale 0.2s
|
|
@mixin svg-button-hover
|
|
filter: saturate(0) brightness(4)
|
|
@mixin svg-button-active-or-click
|
|
filter: saturate(0) hue-rotate(200deg) brightness(4)
|
|
|
|
> button
|
|
@include svg-button
|
|
width: 32px
|
|
height: 32px
|
|
|
|
&:hover
|
|
@include svg-button-hover
|
|
scale: 1.1
|
|
&:active
|
|
scale: 0.9
|
|
&.active, &:active
|
|
@include svg-button-active-or-click
|
|
|
|
.playBtn
|
|
background-image: url(/static/images/player/play.svg)
|
|
margin-left: 0.5em
|
|
margin-right: 0.5em
|
|
|
|
&.pause
|
|
background-image: url(/static/images/player/pause.svg)
|
|
|
|
.settingsBtn
|
|
background-image: url(/static/images/player/hamburger.svg)
|
|
margin-left: 0.5em
|
|
margin-right: 0.5em
|
|
|
|
.fullscreen
|
|
background-image: url(/static/images/player/fullscreen.svg)
|
|
margin-right: 0.5em
|
|
|
|
.volumeBtn
|
|
background-image: url(/static/images/player/volume-high.svg)
|
|
margin-right: 1em
|
|
|
|
&.low
|
|
background-image: url(/static/images/player/volume-low.svg)
|
|
|
|
&.off
|
|
background-image: url(/static/images/player/volume-off.svg)
|
|
|
|
&.mute
|
|
background-image: url(/static/images/player/volume-mute.svg)
|
|
|
|
// Bars
|
|
input[type=range]
|
|
-webkit-appearance: none
|
|
appearance: none
|
|
height: 35px
|
|
background-color: transparent
|
|
|
|
&::-webkit-slider-runnable-track
|
|
background-color: #bbb
|
|
height: 2px
|
|
&::-moz-range-track
|
|
background-color: #bbb
|
|
height: 2px
|
|
&::-webkit-slider-thumb
|
|
-webkit-appearance: none
|
|
appearance: none
|
|
width: 16px
|
|
height: 16px
|
|
margin-top: -6px
|
|
&::-moz-range-thumb
|
|
width: 16px
|
|
height: 16px
|
|
margin-top: -6px
|
|
|
|
.timeline
|
|
flex-grow: 1
|
|
height: 100%
|
|
position: relative
|
|
cursor: pointer
|
|
|
|
.seek
|
|
width: 100%
|
|
height: 100%
|
|
margin-top: -0.0625em
|
|
background-color: transparent
|
|
|
|
// For SponsorBlock integration
|
|
--seek-background: #bbb
|
|
--sponsorblock-segment-sponsor: green
|
|
--sponsorblock-segment-selfpromo: yellow
|
|
--sponsorblock-segment-interaction: purple
|
|
--sponsorblock-segment-intro: cyan
|
|
--sponsorblock-segment-outro: blue
|
|
--sponsorblock-segment-preview: indigo
|
|
--sponsorblock-segment-music_offtopic: orange
|
|
--sponsorblock-segment-music_filler: orange
|
|
|
|
&::-webkit-slider-runnable-track
|
|
background-color: var(--seek-background)
|
|
&::-moz-range-track
|
|
background-color: var(--seek-background)
|
|
&::-moz-range-progress
|
|
background-color: var(--accent-color)
|
|
|
|
&::-webkit-slider-thumb
|
|
width: 0px
|
|
height: 0px
|
|
border: none
|
|
&::-moz-range-thumb
|
|
width: 0px
|
|
height: 0px
|
|
border: none
|
|
|
|
.fakeThumb
|
|
position: absolute
|
|
bottom: 0.75em
|
|
width: 16px
|
|
height: 16px
|
|
margin-left: -8px
|
|
background-color: white
|
|
border-radius: 50%
|
|
pointer-events: none
|
|
|
|
.hoverTimeContainer
|
|
position: absolute
|
|
width: 0
|
|
bottom: 0.5em
|
|
opacity: 1
|
|
transition: opacity 0.2s
|
|
pointer-events: none
|
|
align-content: center
|
|
|
|
&.hidden
|
|
opacity: 0
|
|
|
|
.hoverTimeInner
|
|
display: flex
|
|
flex-direction: column
|
|
width: max-content //11em
|
|
transform: translateX(-50%)
|
|
border-radius: 6px
|
|
position: relative
|
|
padding: 0.5em
|
|
|
|
.hoverTimeVideo:not([src])
|
|
display: none
|
|
& + .hoverTimeText
|
|
padding-top: unset
|
|
|
|
.hoverTimeText
|
|
margin: auto
|
|
padding-top: 0.5em
|
|
|
|
.timecode
|
|
margin: auto
|
|
margin-left: 1em
|
|
margin-right: 0.5em
|
|
|
|
.popout
|
|
background-color: map.get($_theme, "bg-4")
|
|
position: absolute
|
|
bottom: 3.5em
|
|
border-radius: 6px
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
&.hidden
|
|
display: none
|
|
|
|
.volumePopout
|
|
left: 3em
|
|
width: 3em
|
|
height: 8em
|
|
padding: 0.25em
|
|
|
|
&.boost
|
|
height: 14em
|
|
|
|
.volumeBarContainer
|
|
height: 100%
|
|
position: relative
|
|
|
|
.volumeBar
|
|
-webkit-transform: rotate(-90deg)
|
|
-webkit-transform-origin: 52.5% 240%
|
|
transform: rotate(-90deg)
|
|
transform-origin: 52.5% 240%
|
|
width: 8em
|
|
|
|
--volumeBar-bg: #333
|
|
--volumeBar-boost-bg: #fa1f21
|
|
|
|
&::-webkit-slider-runnable-track
|
|
background-color: var(--volumeBar-bg)
|
|
&::-moz-range-track
|
|
background-color: var(--volumeBar-bg)
|
|
&::-moz-range-progress
|
|
background-color: var(--accent-color)
|
|
|
|
// Normalize thumb
|
|
@mixin normalized-thumb
|
|
background-color: white
|
|
border-radius: 50%
|
|
&::-webkit-slider-thumb
|
|
@include normalized-thumb
|
|
&::-moz-range-thumb
|
|
@include normalized-thumb
|
|
|
|
&.boost
|
|
width: 10em
|
|
@mixin boost-bg
|
|
background-color: none
|
|
background-image: linear-gradient(90deg, var(--volumeBar-bg) 33%, var(--volumeBar-boost-bg) 33%, var(--volumeBar-boost-bg) 100%)
|
|
&::-webkit-slider-runnable-track
|
|
@include boost-bg
|
|
&::-moz-range-track
|
|
@include boost-bg
|
|
|
|
.settingsPopout
|
|
right: 3em
|
|
width: fit-content
|
|
height: fit-content
|
|
|
|
&[data-page="main"] .settingsPage[data-name="main"],
|
|
&[data-page="speed"] .settingsPage[data-name="speed"],
|
|
&[data-page="tricks"] .settingsPage[data-name="tricks"],
|
|
&[data-page="cc"] .settingsPage[data-name="cc"],
|
|
&[data-page="quality"] .settingsPage[data-name="quality"]
|
|
display: flex
|
|
|
|
.settingsPage
|
|
display: none
|
|
flex-direction: column
|
|
padding: 0.25em
|
|
|
|
.setting
|
|
display: flex
|
|
flex-direction: row
|
|
|
|
&:not(.header:not(.goBack))
|
|
cursor: pointer
|
|
|
|
&:not(.header)
|
|
color: map.get($_theme, "fg-dim")
|
|
|
|
&:not([disabled]):hover
|
|
color: map.get($_theme, "fg-main")
|
|
|
|
*
|
|
padding: 0.5em
|
|
|
|
.icon, .submenuIcon
|
|
@include svg-button
|
|
width: 1em
|
|
height: 1em
|
|
background-color: transparent
|
|
background-size: contain
|
|
background-position: center center
|
|
|
|
&.submenuIcon
|
|
background-image: url(/static/images/player/back.svg)
|
|
transform: rotateY(180deg)
|
|
transform-origin: 50% 50%
|
|
|
|
&.redownloadBtn
|
|
background-image: url(/static/images/player/refresh.svg)
|
|
transform: unset
|
|
&:hover:not(.active)
|
|
.icon, .submenuIcon
|
|
@include svg-button-hover
|
|
&.active, &:active
|
|
.icon, .submenuIcon
|
|
@include svg-button-active-or-click
|
|
|
|
.text
|
|
text-align: left
|
|
align-self: center
|
|
flex-grow: 1
|
|
|
|
// Specific icons...
|
|
.header
|
|
margin-top: 0
|
|
border-bottom: 1px solid map.get($_theme, "edge-grey")
|
|
margin-bottom: 0.25em
|
|
|
|
.icon.back
|
|
background-image: url(/static/images/player/back.svg)
|
|
|
|
.autoHide
|
|
.icon
|
|
background-image: url(/static/images/player/eye-closed.svg)
|
|
&.active .icon
|
|
background-image: url(/static/images/player/eye-open.svg)
|
|
.loop .icon
|
|
background-image: url(/static/images/player/loop.svg)
|
|
.speed .icon
|
|
background-image: url(/static/images/player/speed.svg)
|
|
.tricks .icon
|
|
background-image: url(/static/images/player/paw.svg)
|
|
.cc .icon
|
|
background-image: url(/static/images/player/captions.svg)
|
|
.quality .icon
|
|
background-image: url(/static/images/player/gear.svg)
|
|
|
|
// Specific pages
|
|
// Tricks
|
|
.forceStereo .icon
|
|
background-image: url(/static/images/player/headphones.svg)
|
|
|
|
.setting
|
|
&.active
|
|
color: map.get($_theme, "fg-bright")
|
|
|
|
.setting[disabled]
|
|
&.active
|
|
color: map.get($_theme, "fg-main")
|
|
&:not(.active)
|
|
color: map.get($_theme, "bg-2")
|
|
.icon, .submenuIcon,
|
|
&:hover:not(.active) .icon, &:hover:not(.active) .submenuIcon
|
|
filter: saturate(0) brightness(1)
|
|
&.active, &:active
|
|
.icon, .submenuIcon
|
|
filter: saturate(0) brightness(2.5)
|
|
|
|
.speedBar
|
|
--speedBar-bg: #333
|
|
--speedBar-boost-bg: #fa1f21
|
|
|
|
&::-webkit-slider-runnable-track
|
|
background-color: var(--volumeBar-bg)
|
|
&::-moz-range-track
|
|
background-color: var(--volumeBar-bg)
|
|
&::-moz-range-progress
|
|
background-color: var(--accent-color)
|
|
@mixin boost-bg
|
|
background-color: none
|
|
background-image: linear-gradient(90deg, var(--speedBar-bg) 33%, var(--speedBar-boost-bg) 33%, var(--speedBar-boost-bg) 100%)
|
|
&::-webkit-slider-runnable-track
|
|
@include boost-bg
|
|
&::-moz-range-track
|
|
@include boost-bg
|