244 lines
7.4 KiB
SCSS
244 lines
7.4 KiB
SCSS
/* Control Bar Size */
|
|
@include Option("userContent.player.size") {
|
|
#controlsContainer {
|
|
// --button-size: 32px !important; /* Original: 30px */ Disabled for issue #404
|
|
--controlBar-height: 40px; /* Original: 40px, Replace to this value */
|
|
.touch {
|
|
--button-size: 48px !important; /* Original: 40px */
|
|
--controlBar-height: 52px; /* Original: 52px */
|
|
}
|
|
.controlBar {
|
|
height: var(--controlBar-height) !important; /* Original: 40px */
|
|
}
|
|
}
|
|
.videocontrols[inDOMFullscreen] {
|
|
#controlsContainer {
|
|
--button-size: 64px !important; /* Original: 30px */
|
|
--track-size: 6px !important; /* Original: 5px, Touch: 7px */
|
|
--thumb-size: 15px !important; /* Original: 13px, Touch: 16px */
|
|
--controlBar-height: 64px; /* Original: 40px */
|
|
.touch {
|
|
--button-size: 72px !important; /* Original: 40px */
|
|
--controlBar-height: 64px; /* Original: 52px */
|
|
}
|
|
.controlBar {
|
|
padding-bottom: 8px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Control Bar UI */
|
|
@include Option("userContent.player.ui") {
|
|
audio {
|
|
--duration-color: #929292; /* Like Original */
|
|
--media-background: rgba(26,26,26,.8); /* Like Original */
|
|
|
|
border-radius: 8px;
|
|
--box-shadow1: rgba(14,13,26,.12);
|
|
--box-shadow2: rgba(7,48,114,.12);
|
|
--box-shadow3: rgba(34,0,51,.04);
|
|
box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2),
|
|
0 8px 12px 1px var(--box-shadow3);
|
|
/* Or: 0 2px 15px rgba(0,0,0,.1); */
|
|
|
|
@include Dark {
|
|
--box-shadow1: rgba(249, 249, 250, 0.12);
|
|
--box-shadow2: rgba(91, 91, 102, 0.12);
|
|
--box-shadow3: rgba(82, 82, 94, 0.04);
|
|
}
|
|
}
|
|
video {
|
|
--duration-color: #eee;
|
|
--media-background: linear-gradient(transparent, rgba(26,26,26,.85));
|
|
|
|
@include Contrast {
|
|
--duration-color: #929292; /* Like Original */
|
|
--media-background: rgba(26,26,26,.8); /* Like Original */
|
|
}
|
|
}
|
|
|
|
#controlsContainer {
|
|
.controlBar {
|
|
background: var(--media-background) !important;
|
|
}
|
|
.duration {
|
|
color: var(--duration-color) !important; /* Original: #929292 */
|
|
}
|
|
}
|
|
|
|
@include Option("userContent.player.ui.twoline") {
|
|
audio {
|
|
// All thing like original
|
|
/* #controlsContainer .controlBar */
|
|
--controlBar-flex-wrap: unset;
|
|
--controlBar-justify-content: center;
|
|
--controlBar-align-content: unset;
|
|
--controlBar-twoline-more-height: 0px;
|
|
--controlBar-padding-inline: 9px;
|
|
|
|
/* #controlsContainer .scrubberStack */
|
|
/* .scrubberStack - Vertical */
|
|
--scrubberStack-order: unset;
|
|
--scrubberStack-height: 100%;
|
|
--scrubberStack-transform: none;
|
|
|
|
/* .scrubberStack - Horizontal */
|
|
--scrubberStack-margin-inline: 9px;
|
|
|
|
/* #controlsContainer .positionDurationBox */
|
|
--positionDurationBox-flex-grow: unset;
|
|
--positionDurationBox-margin-left: unset;
|
|
--positionDurationBox-text-align: center;
|
|
|
|
/* Others */
|
|
--button-outside-margin: 0;
|
|
}
|
|
video {
|
|
/* #scrubber .scrubber::-moz-range-thumb */
|
|
--scrubber-thumb-scale: 0;
|
|
--scrubber-thumb-color: #48a0f7; /* Color as hover, Prevent flashing */
|
|
|
|
/* .progressBar::-moz-progress-bar */
|
|
--progressBar-scale: 0.65;
|
|
|
|
/* #controlsContainer .controlBar */
|
|
--controlBar-flex-wrap: wrap;
|
|
--controlBar-justify-content: space-between;
|
|
--controlBar-align-content: space-around;
|
|
--controlBar-padding-inline: 0 !important; /* Original: 9px */
|
|
|
|
/* #controlsContainer .scrubberStack */
|
|
/* .scrubberStack - Vertical */
|
|
--scrubberStack-order: -1;
|
|
|
|
/* .scrubberStack - Horizontal */
|
|
--scrubberStack-flex-basis: auto;
|
|
--scrubberStack-twoline-width: 100%;
|
|
--scrubberStack-margin-inline: 0;
|
|
|
|
/* #controlsContainer .positionDurationBox */
|
|
--positionDurationBox-flex-grow: 2;
|
|
--positionDurationBox-margin-left: 15px;
|
|
--positionDurationBox-text-align: left;
|
|
|
|
/* Others */
|
|
--duration-color: #dadada;
|
|
--button-outside-margin: 9px;
|
|
}
|
|
|
|
.scrubber:not(:hover)::-moz-range-thumb {
|
|
transform: scale(var(--scrubber-thumb-scale, 1));
|
|
background-color: var(--scrubber-thumb-color, currentColor) !important;
|
|
}
|
|
.progressStack {
|
|
transform-origin: bottom;
|
|
transform: scaleY(var(--progressBar-scale, 1));
|
|
}
|
|
.scrubber:hover::-moz-range-thumb,
|
|
.progressContainer:hover .progressStack {
|
|
transform:scale(1);
|
|
}
|
|
|
|
#controlsContainer {
|
|
.controlBar {
|
|
flex-wrap: var(--controlBar-flex-wrap);
|
|
justify-content: var(--controlBar-justify-content);
|
|
align-content: var(--controlBar-align-content);
|
|
height: calc(var(--controlBar-height) + var(--controlBar-twoline-more-height, var(--thumb-size))) !important;
|
|
padding-inline: var(--controlBar-padding-inline) !important; /* Original: 9px */
|
|
}
|
|
.scrubberStack {
|
|
/* Vertical */
|
|
order: var(--scrubberStack-order);
|
|
height: var(--scrubberStack-height, var(--thumb-size)) !important;
|
|
transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2)));
|
|
|
|
/* Horizontal */
|
|
flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important;
|
|
width: var(--scrubberStack-twoline-width, var(--scrubberStack-width));
|
|
margin-inline: var(--scrubberStack-margin-inline) !important;
|
|
}
|
|
.positionDurationBox {
|
|
flex-grow: var(--positionDurationBox-flex-grow);
|
|
margin-left: var(--positionDurationBox-margin-left);
|
|
text-align: var(--positionDurationBox-text-align) !important;
|
|
}
|
|
}
|
|
|
|
#playButton {
|
|
margin-left: var(--button-outside-margin) !important;
|
|
}
|
|
#fullscreenButton {
|
|
margin-right: var(--button-outside-margin) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include Option("userContent.player.icon") {
|
|
#controlsContainer .fullscreenButton {
|
|
background-image: url("../icons/enter-fullscreen.svg") !important;
|
|
&[fullscreened] {
|
|
background-image: url("../icons/exit-fullscreen.svg") !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include Option("userContent.player.noaudio") {
|
|
#controlsContainer .muteButton[noAudio] {
|
|
/* Remove volume button at noAudio */
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Click to play UI */
|
|
@include Option("userContent.player.click_to_play") {
|
|
#controlsContainer {
|
|
.clickToPlay {
|
|
cursor: pointer;
|
|
opacity: 0.65 !important;
|
|
}
|
|
.controlsSpacerStack:hover > .clickToPlay {
|
|
opacity: 0.85 !important;
|
|
&:hover {
|
|
opacity: 1 !important;
|
|
fill: #48a0f7 !important; /* color as .scrubber */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Animation */
|
|
@include Option("userContent.player.animate") {
|
|
@include Animate {
|
|
/* Control Bar */
|
|
#controlsContainer .controlBar {
|
|
transition: transform 350ms ease;
|
|
opacity: 1 !important;
|
|
&[hidden] {
|
|
transform: translateY(100%);
|
|
transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important;
|
|
opacity: 0 !important;
|
|
|
|
.progressBar,
|
|
.bufferBar {
|
|
display: unset !important;
|
|
opacity: 0.55;
|
|
transition: opacity 150ms ease 50ms;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Two line Control Bar */
|
|
.scrubber::-moz-range-thumb,
|
|
.progressStack {
|
|
transition:transform .1s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Click to play */
|
|
#controlsContainer .clickToPlay {
|
|
transition: opacity 150ms ease-in-out, fill 150ms ease-in-out;
|
|
}
|
|
}
|
|
}
|