2 @use '_variables' as *;
4 @use './_player-variables' as *;
7 --embedForegroundColor: #{$primary-foreground-color};
9 --embedBigPlayBackgroundColor: #{$primary-background-color};
12 @mixin big-play-button-triangle-size($triangle-size) {
13 width: $triangle-size;
14 height: $triangle-size;
15 top: calc(50% - #{math.div($triangle-size, 2)});
16 left: calc(53% - #{math.div($triangle-size, 2)});
19 .video-js.vjs-peertube-skin {
20 font-size: $font-size;
21 color: pvar(--embedForegroundColor);
27 .vjs-big-play-button {
28 display: none !important;
36 .vjs-big-play-button {
37 $big-play-width: 1.2em;
38 $big-play-height: 1.2em;
40 @include margin-left(-(math.div($big-play-width, 2)));
45 border: 2px solid #fff;
50 width: $big-play-width;
51 height: $big-play-height;
52 line-height: $big-play-height;
53 margin-top: -(math.div($big-play-height, 2));
54 transition: 0.2s background-color;
61 .vjs-icon-placeholder::before {
62 @include big-play-button-triangle-size(45px);
65 background-image: url('#{$assets-path}/player/images/big-play-button.svg');
70 background-color: var(--mainColor, #696969);
74 // Show poster and controls when playing audio-only content
75 &.vjs-playing-audio-only-content {
82 opacity: $primary-foreground-opacity-hover;
86 // Do not display poster when video is starting
87 &.vjs-has-autoplay:not(.vjs-has-started) {
94 // Hide the big play button on autoplay
96 .vjs-big-play-button {
97 display: none !important;
102 .vjs-big-play-button,
103 .vjs-settings-dialog {
104 background-color: pvar(--embedBigPlayBackgroundColor);
111 @media screen and (max-width: $screen-width-750) {
112 .vjs-big-play-button {
116 .vjs-icon-placeholder::before {
117 @include big-play-button-triangle-size(32px);
122 @media screen and (max-width: $screen-width-570) {
123 .vjs-big-play-button {
127 .vjs-icon-placeholder::before {
128 @include big-play-button-triangle-size(27px);
133 @media screen and (max-width: $screen-width-350) {
134 .vjs-big-play-button {
138 .vjs-icon-placeholder::before {
139 @include big-play-button-triangle-size(20px);
144 // Theater mode is enabled
145 &.vjs-theater-enabled {
146 .vjs-theater-control {
149 .vjs-icon-placeholder {
150 transform: scale(0.8);
155 // On fullscreen, hide theater control
157 .vjs-theater-control {
163 // Play/pause animations
164 .vjs-has-started .vjs-play-control {
166 animation: remove-pause-button 0.25s ease;
170 animation: add-play-button 0.25s ease;
173 @keyframes remove-pause-button {
175 transform: rotate(90deg);
178 transform: rotate(0deg);
182 @keyframes add-play-button {
184 transform: rotate(-90deg);
187 transform: rotate(0deg);
196 .vjs-custom-error-display {
197 font-family: $main-fonts;
205 // Error display disabled
206 .vjs-error:not(.vjs-error-display-enabled) {
207 .vjs-custom-error-display {
211 .vjs-loading-spinner {
216 // Error display enabled
217 .vjs-error.vjs-error-display-enabled {
218 .vjs-custom-error-display {