-@import '_variables';
-@import '_mixins';
-@import '~video.js/dist/video-js.css';
-@import '~videojs-dock/dist/videojs-dock.css';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use 'video.js/dist/video-js';
$assets-path: '../../assets/';
-@import '../../sass/player/index';
+@use '../../sass/player/index';
[hidden] {
display: none !important;
}
/* fill the entire space */
-html, body {
+html,
+body {
height: 100%;
margin: 0;
background-color: #000;
.vjs-poster {
background-size: 100% auto;
}
-
- @media screen and (max-width: 350px) {
- .vjs-play-control {
- padding: 0 5px !important;
- width: 25px !important;
- }
-
- .vjs-volume-control {
- display: none !important;
- }
-
- .vjs-volume-panel {
- width: 26px !important;
- }
-
- .vjs-peertube-link {
- padding: 0;
- }
- }
}
#error-block {
text-align: center;
width: 100%;
height: 100%;
- color: white;
+ color: #fff;
box-sizing: border-box;
font-family: sans-serif;
+}
- #error-title {
- font-size: 45px;
- margin-bottom: 5px;
- }
+#error-title {
+ font-size: 45px;
+ margin-bottom: 5px;
+}
- #error-content {
- font-size: 24px;
- }
+#error-content {
+ font-size: 24px;
}
#placeholder-preview {
width: 100%;
height: 100%;
background-position: 50% 50%;
+ background-repeat: no-repeat;
+}
+
+.player-information {
+ width: 100%;
+ color: #fff;
+ background: rgba(0, 0, 0, 0.6);
+ padding: 20px 0;
+ position: absolute;
+ bottom: 0;
+ text-align: center;
}
@media screen and (max-width: 300px) {
#error-block {
font-size: 36px;
+ }
- #error-content {
- font-size: 14px;
- }
+ #error-content {
+ font-size: 14px;
}
}