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 $big-play-width: 1.2em;
29 $big-play-height: 1.2em;
31 @include margin-left(-(math.div($big-play-width, 2)));
36 border: 2px solid #fff;
41 width: $big-play-width;
42 height: $big-play-height;
43 line-height: $big-play-height;
44 margin-top: -(math.div($big-play-height, 2));
45 transition: 0.2s background-color;
52 .vjs-icon-placeholder::before {
53 @include big-play-button-triangle-size(45px);
56 background-image: url('#{$assets-path}/player/images/big-play-button.svg');
61 background-color: var(--mainColor, #696969);
65 // Show poster and controls when playing audio-only content
66 &.vjs-playing-audio-only-content {
73 opacity: $primary-foreground-opacity-hover;
77 // Do not display poster when video is starting
78 &.vjs-has-autoplay:not(.vjs-has-started) {
85 // Hide the big play button on autoplay
87 .vjs-big-play-button {
88 display: none !important;
94 .vjs-settings-dialog {
95 background-color: pvar(--embedBigPlayBackgroundColor);
102 @media screen and (max-width: $screen-width-750) {
103 .vjs-big-play-button {
107 .vjs-icon-placeholder::before {
108 @include big-play-button-triangle-size(32px);
113 @media screen and (max-width: $screen-width-570) {
114 .vjs-big-play-button {
118 .vjs-icon-placeholder::before {
119 @include big-play-button-triangle-size(27px);
124 @media screen and (max-width: $screen-width-350) {
125 .vjs-big-play-button {
129 .vjs-icon-placeholder::before {
130 @include big-play-button-triangle-size(20px);
135 // Theater mode is enabled
136 &.vjs-theater-enabled {
137 .vjs-theater-control {
140 .vjs-icon-placeholder {
141 transform: scale(0.8);
146 // On fullscreen, hide theater control
148 .vjs-theater-control {
154 // Play/pause animations
155 .vjs-has-started .vjs-play-control {
157 animation: remove-pause-button 0.25s ease;
161 animation: add-play-button 0.25s ease;
164 @keyframes remove-pause-button {
166 transform: rotate(90deg);
169 transform: rotate(0deg);
173 @keyframes add-play-button {
175 transform: rotate(-90deg);
178 transform: rotate(0deg);
183 // Error display disabled
184 .vjs-error:not(.vjs-error-display-enabled) {
189 .vjs-loading-spinner {
194 // Error display enabled
195 .vjs-error.vjs-error-display-enabled {