-@import '~video.js/dist/video-js.css';
-@import '~videojs-dock/dist/videojs-dock.css';
-@import '../../sass/video-js-custom.scss';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use 'video.js/dist/video-js';
+
+$assets-path: '../../assets/';
+@use '../../sass/player/index';
+
+[hidden] {
+ display: none !important;
+}
+
+body {
+ font-family: $main-fonts;
+ font-weight: $font-regular;
+ color: #000;
+}
video {
width: 99%;
}
/* fill the entire space */
-html, body {
+html,
+body {
height: 100%;
margin: 0;
+ background-color: #000;
}
-.video-js {
+#video-wrapper {
width: 100%;
height: 100%;
}
-.vjs-poster {
- background-size: 100% auto;
+.video-js.vjs-peertube-skin {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+
+ .vjs-poster {
+ background-size: 100% auto;
+ }
+}
+
+#error-block {
+ display: none;
+
+ flex-direction: column;
+ align-content: center;
+ justify-content: center;
+ text-align: center;
+ width: 100%;
+ height: 100%;
+ color: #fff;
+ box-sizing: border-box;
+ font-family: sans-serif;
+}
+
+#error-title {
+ font-size: 45px;
+ margin-bottom: 5px;
+}
+
+#error-content {
+ font-size: 24px;
}
-.vjs-peertube-link {
- color: white;
- text-decoration: none;
- font-size: 1.3em;
- line-height: 2.20;
- transition: all .4s;
- position: relative;
- right: 6px;
+#placeholder-preview {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-size: 100% auto;
+ width: 100%;
+ height: 100%;
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
}
-.vjs-peertube-link:hover {
- text-shadow: 0 0 1em #fff;
+.player-information {
+ width: 100%;
+ color: #fff;
+ background: rgba(0, 0, 0, 0.6);
+ padding: 20px 0;
+ position: absolute;
+ bottom: 0;
+ text-align: center;
}
-// Fix volume panel because we added a new component (PeerTube link)
-.vjs-volume-panel {
- margin-right: 90px !important;
+@media screen and (max-width: 300px) {
+ #error-block {
+ font-size: 36px;
+ }
+
+ #error-content {
+ font-size: 14px;
+ }
}
+