mirror of https://github.com/Chocobozzz/PeerTube
Split player sass file
Chocobozzz
parent
f286060081
commit
2a19a1e4de
|
|
@ -10,7 +10,8 @@ $icon-font-path: '../../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
|
|||
@import '~primeng/resources/primeng.css';
|
||||
@import '~video.js/dist/video-js.css';
|
||||
|
||||
@import './video-js-custom';
|
||||
$assets-path: '../assets/';
|
||||
@import './player/player';
|
||||
@import './loading-bar';
|
||||
|
||||
[hidden] {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
$primary-foreground-color: #fff;
|
||||
$primary-foreground-opacity: 0.9;
|
||||
$primary-foreground-opacity-hover: 1;
|
||||
$primary-background-color: #000;
|
||||
|
||||
$font-size: 13px;
|
||||
$control-bar-height: 34px;
|
||||
|
||||
$slider-bg-color: lighten($primary-background-color, 33%);
|
||||
|
||||
$progress-margin: 10px;
|
||||
|
||||
$assets-path: '../../assets/' !default;
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
@import '_variables';
|
||||
@import '_mixins';
|
||||
@import './_player-variables';
|
||||
|
||||
$context-menu-width: 350px;
|
||||
|
||||
/* Sass for videojs-contextmenu-ui */
|
||||
|
||||
.video-js .vjs-contextmenu-ui-menu {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 5px 0;
|
||||
width: $context-menu-width;
|
||||
|
||||
.vjs-menu-content {
|
||||
opacity: $primary-foreground-opacity;
|
||||
color: $primary-foreground-color;
|
||||
font-size: $font-size !important;
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
||||
.vjs-menu-item {
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
@import '_variables';
|
||||
@import '_mixins';
|
||||
|
||||
/* Special mobile style */
|
||||
|
||||
.video-js.vjs-peertube-skin.vjs-is-mobile {
|
||||
.vjs-control-bar {
|
||||
.vjs-progress-control .vjs-slider .vjs-play-progress {
|
||||
// Always display the circle on mobile
|
||||
&::before {
|
||||
margin-top: -1px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import '_variables';
|
||||
@import '_mixins';
|
||||
@import './_player-variables';
|
||||
|
||||
@mixin big-play-button-triangle-size($triangle-size) {
|
||||
width: $triangle-size;
|
||||
|
|
@ -8,23 +9,6 @@
|
|||
left: calc(53% - #{($triangle-size / 2)});
|
||||
}
|
||||
|
||||
$primary-foreground-color: #fff;
|
||||
$primary-foreground-opacity: 0.9;
|
||||
$primary-foreground-opacity-hover: 1;
|
||||
$primary-background-color: #000;
|
||||
|
||||
$font-size: 13px;
|
||||
$control-bar-height: 34px;
|
||||
|
||||
$slider-bg-color: lighten($primary-background-color, 33%);
|
||||
|
||||
$setting-transition-duration: 0.15s;
|
||||
$setting-transition-easing: ease-out;
|
||||
|
||||
$context-menu-width: 350px;
|
||||
|
||||
$progress-margin: 10px;
|
||||
|
||||
.video-js.vjs-peertube-skin {
|
||||
font-size: $font-size;
|
||||
color: $primary-foreground-color;
|
||||
|
|
@ -91,7 +75,7 @@ $progress-margin: 10px;
|
|||
@include big-play-button-triangle-size(45px);
|
||||
|
||||
content: '';
|
||||
background-image: url('../assets/player/images/big-play-button.svg');
|
||||
background-image: url('#{$assets-path}/player/images/big-play-button.svg');
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -292,11 +276,11 @@ $progress-margin: 10px;
|
|||
top: -1px;
|
||||
|
||||
&.icon-download {
|
||||
background-image: url('../assets/player/images/arrow-down.svg');
|
||||
background-image: url('#{$assets-path}/player/images/arrow-down.svg');
|
||||
}
|
||||
|
||||
&.icon-upload {
|
||||
background-image: url('../assets/player/images/arrow-up.svg');
|
||||
background-image: url('#{$assets-path}/player/images/arrow-up.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -327,7 +311,7 @@ $progress-margin: 10px;
|
|||
width: 22px;
|
||||
height: 22px;
|
||||
vertical-align: middle;
|
||||
background: url('../assets/player/images/volume.svg') no-repeat;
|
||||
background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
&::before {
|
||||
|
|
@ -336,7 +320,7 @@ $progress-margin: 10px;
|
|||
}
|
||||
|
||||
&.vjs-vol-0 .vjs-icon-placeholder {
|
||||
background: url('../assets/player/images/volume-mute.svg') no-repeat;
|
||||
background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
|
@ -421,7 +405,7 @@ $progress-margin: 10px;
|
|||
width: 22px;
|
||||
height: 22px;
|
||||
vertical-align: middle;
|
||||
background: url('../assets/player/images/fullscreen.svg') no-repeat;
|
||||
background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
&::before {
|
||||
|
|
@ -558,58 +542,6 @@ $progress-margin: 10px;
|
|||
}
|
||||
}
|
||||
|
||||
// Thanks: https://projects.lukehaas.me/css-loaders/
|
||||
.vjs-loading-spinner {
|
||||
left: 50%;
|
||||
font-size: 10px;
|
||||
text-indent: -9999em;
|
||||
border: 0.7em solid rgba(255, 255, 255, 0.2);
|
||||
border-left-color: #ffffff;
|
||||
transform: translateZ(0);
|
||||
animation: 0.3s ease-out 1.1s forwards vjs-spinner-show, spinner 1.4s infinite linear !important;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
|
||||
&::before {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-radius: 50%;
|
||||
width: 6em;
|
||||
height: 6em;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
@keyframes spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vjs-spinner-show {
|
||||
0% {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
1% {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Error display disabled
|
||||
.vjs-error:not(.vjs-error-display-enabled) {
|
||||
.vjs-error-display {
|
||||
|
|
@ -626,221 +558,4 @@ $progress-margin: 10px;
|
|||
.vjs-error-display {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Sass for videojs-settings-menu */
|
||||
|
||||
.video-js {
|
||||
|
||||
.vjs-settings {
|
||||
@include disable-outline;
|
||||
|
||||
cursor: pointer;
|
||||
width: 37px;
|
||||
|
||||
.vjs-icon-placeholder {
|
||||
display: inline-block;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
vertical-align: middle;
|
||||
background: url('../assets/player/images/settings.svg') no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-settings-sub-menu-title {
|
||||
width: 4em;
|
||||
text-transform: initial;
|
||||
}
|
||||
|
||||
.vjs-settings-dialog {
|
||||
position: absolute;
|
||||
right: .5em;
|
||||
bottom: 3.5em;
|
||||
color: $primary-foreground-color;
|
||||
opacity: $primary-foreground-opacity;
|
||||
margin: 0 auto;
|
||||
font-size: $font-size !important;
|
||||
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
|
||||
transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing;
|
||||
|
||||
.vjs-settings-sub-menu-value,
|
||||
.vjs-settings-sub-menu-title {
|
||||
display: table-cell;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.vjs-settings-sub-menu-title {
|
||||
text-align: left;
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
||||
.vjs-settings-sub-menu-value {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
|
||||
small {
|
||||
font-size: 0.85em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-settings-panel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.vjs-settings-panel-child {
|
||||
display: flex;
|
||||
|
||||
align-items: flex-end;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
> .vjs-menu {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
> .vjs-menu,
|
||||
> .vjs-settings-sub-menu {
|
||||
transition: all $setting-transition-duration $setting-transition-easing;
|
||||
|
||||
.vjs-menu-item {
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 1em;
|
||||
text-transform: initial;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .vjs-menu {
|
||||
.vjs-menu-item {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.vjs-settings-sub-menu-value::after {
|
||||
@include chevron-right(9px, 2px);
|
||||
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
> .vjs-settings-sub-menu {
|
||||
width: 80px;
|
||||
|
||||
.vjs-menu-item {
|
||||
outline: 0;
|
||||
font-weight: $font-semibold;
|
||||
|
||||
padding: 5px 8px;
|
||||
text-align: right;
|
||||
|
||||
&.vjs-back-button {
|
||||
background-color: inherit;
|
||||
padding: 8px 8px 13px 8px;
|
||||
margin-bottom: 5px;
|
||||
border-bottom: 1px solid grey;
|
||||
|
||||
&::before {
|
||||
@include chevron-left(9px, 2px);
|
||||
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.vjs-selected {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
@include icon(15px);
|
||||
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
content: ' ';
|
||||
margin-top: 1px;
|
||||
background-image: url('../assets/player/images/tick.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Sass for videojs-contextmenu-ui */
|
||||
|
||||
.video-js .vjs-contextmenu-ui-menu {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 5px 0;
|
||||
width: $context-menu-width;
|
||||
|
||||
.vjs-menu-content {
|
||||
opacity: $primary-foreground-opacity;
|
||||
color: $primary-foreground-color;
|
||||
font-size: $font-size !important;
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
||||
.vjs-menu-item {
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Special mobile style */
|
||||
|
||||
.video-js.vjs-peertube-skin.vjs-is-mobile {
|
||||
.vjs-control-bar {
|
||||
.vjs-progress-control .vjs-slider .vjs-play-progress {
|
||||
// Always display the circle on mobile
|
||||
&::before {
|
||||
margin-top: -1px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import './peertube-skin';
|
||||
@import './mobile';
|
||||
@import './context-menu';
|
||||
@import './settings-menu';
|
||||
@import './spinner';
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
@import '_variables';
|
||||
@import '_mixins';
|
||||
@import './_player-variables';
|
||||
|
||||
$setting-transition-duration: 0.15s;
|
||||
$setting-transition-easing: ease-out;
|
||||
|
||||
/* Sass for videojs-settings-menu */
|
||||
|
||||
.video-js {
|
||||
|
||||
.vjs-settings {
|
||||
@include disable-outline;
|
||||
|
||||
cursor: pointer;
|
||||
width: 37px;
|
||||
|
||||
.vjs-icon-placeholder {
|
||||
display: inline-block;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
vertical-align: middle;
|
||||
background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-settings-sub-menu-title {
|
||||
width: 4em;
|
||||
text-transform: initial;
|
||||
}
|
||||
|
||||
.vjs-settings-dialog {
|
||||
position: absolute;
|
||||
right: .5em;
|
||||
bottom: 3.5em;
|
||||
color: $primary-foreground-color;
|
||||
opacity: $primary-foreground-opacity;
|
||||
margin: 0 auto;
|
||||
font-size: $font-size !important;
|
||||
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
|
||||
transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing;
|
||||
|
||||
.vjs-settings-sub-menu-value,
|
||||
.vjs-settings-sub-menu-title {
|
||||
display: table-cell;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.vjs-settings-sub-menu-title {
|
||||
text-align: left;
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
||||
.vjs-settings-sub-menu-value {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
|
||||
small {
|
||||
font-size: 0.85em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-settings-panel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.vjs-settings-panel-child {
|
||||
display: flex;
|
||||
|
||||
align-items: flex-end;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
> .vjs-menu {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
> .vjs-menu,
|
||||
> .vjs-settings-sub-menu {
|
||||
transition: all $setting-transition-duration $setting-transition-easing;
|
||||
|
||||
.vjs-menu-item {
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 1em;
|
||||
text-transform: initial;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .vjs-menu {
|
||||
.vjs-menu-item {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.vjs-settings-sub-menu-value::after {
|
||||
@include chevron-right(9px, 2px);
|
||||
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
> .vjs-settings-sub-menu {
|
||||
width: 80px;
|
||||
|
||||
.vjs-menu-item {
|
||||
outline: 0;
|
||||
font-weight: $font-semibold;
|
||||
|
||||
padding: 5px 8px;
|
||||
text-align: right;
|
||||
|
||||
&.vjs-back-button {
|
||||
background-color: inherit;
|
||||
padding: 8px 8px 13px 8px;
|
||||
margin-bottom: 5px;
|
||||
border-bottom: 1px solid grey;
|
||||
|
||||
&::before {
|
||||
@include chevron-left(9px, 2px);
|
||||
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.vjs-selected {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
@include icon(15px);
|
||||
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
content: ' ';
|
||||
margin-top: 1px;
|
||||
background-image: url('#{$assets-path}/player/images/tick.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
@import '_variables';
|
||||
@import '_mixins';
|
||||
|
||||
// Thanks: https://projects.lukehaas.me/css-loaders/
|
||||
.vjs-loading-spinner {
|
||||
left: 50%;
|
||||
font-size: 10px;
|
||||
text-indent: -9999em;
|
||||
border: 0.7em solid rgba(255, 255, 255, 0.2);
|
||||
border-left-color: #ffffff;
|
||||
transform: translateZ(0);
|
||||
animation: 0.3s ease-out 1.1s forwards vjs-spinner-show, spinner 1.4s infinite linear !important;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
|
||||
&::before {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-radius: 50%;
|
||||
width: 6em;
|
||||
height: 6em;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
@keyframes spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vjs-spinner-show {
|
||||
0% {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
1% {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,9 @@
|
|||
@import '_mixins';
|
||||
@import '~video.js/dist/video-js.css';
|
||||
@import '~videojs-dock/dist/videojs-dock.css';
|
||||
@import '../../sass/video-js-custom.scss';
|
||||
|
||||
$assets-path: '../../assets/';
|
||||
@import '../../sass/player/player';
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
|
|
|
|||
Loading…
Reference in New Issue