@import '_variables';
@import '_mixins';
-#video-container {
+#video-element-wrapper {
background-color: #000;
display: flex;
justify-content: center;
- #video-element {
+ /deep/ .video-js {
width: 888px;
height: 500px;
@media screen and (max-width: 600px) {
- height: auto;
- max-height: calc(100vh - #{$header-height});
+ width: 100vw;
+ height: calc(100vw / 1.7); // 16/9
}
// VideoJS create an inner video player
position: relative !important;
}
}
+
+ /deep/ .video-js.vjs-theater-enabled {
+ width: 100%;
+ height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
+ }
+}
+
+.alert {
+ text-align: center;
}
#video-not-found {
.video-info {
flex-grow: 1;
- margin-right: 28px;
+ margin-right: 40px;
+ // Set min width for flex item
+ min-width: 1px;
.video-info-first-row {
display: flex;
.video-info-channel {
font-weight: $font-semibold;
font-size: 15px;
+
+ a {
+ @include disable-default-a-behaviour;
+
+ color: #000;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ img {
+ @include avatar(18px);
+
+ margin: -2px 2px 0 5px;
+ }
+ }
+
+ my-help {
+ display: inline-block;
+ }
}
- .video-info-by {
- display: flex;
+ .video-info-by a {
+ @include disable-default-a-behaviour;
+
+ display: inline;
align-items: center;
font-size: 13px;
+ color: #000;
+
+ span:hover {
+ opacity: 0.8;
+ }
img {
@include avatar(18px);
+ margin-top: -2px;
margin-left: 7px;
}
}
+ my-video-feed {
+ margin-left: 5px;
+ margin-top: 1px;
+ }
+
.video-actions-rates {
display: flex;
flex-direction: column;
}
}
- &.action-button-share {
- width: 82px;
+ .icon-text {
+ margin-left: 3px;
}
&.action-button-like.activated {
font-size: 15px;
.video-info-description-html {
- word-break: break-all;
+ @include peertube-word-wrap;
+ }
+
+ .glyphicon, .description-loading {
+ margin-left: 3px;
}
.description-loading {
}
.other-videos {
+ padding-left: 1em;
+
.title-page {
margin-top: 0;
}
display: flex;
height: 100%;
margin-bottom: 20px;
+ flex-wrap: wrap;
.video-miniature-information {
margin-left: 10px;
+ flex-grow: 1;
}
}
}
}
+// If the view is not expanded, take into account the menu
+.privacy-concerns {
+ width: calc(100% - #{$menu-width});
+}
+
+:host-context(.expanded) {
+ .privacy-concerns {
+ width: 100%;
+ }
+}
+
+.privacy-concerns {
+ position: fixed;
+ bottom: 0;
+
+ padding: 5px 15px;
+
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ background-color: rgba(0, 0, 0, 0.9);
+ color: #fff;
+
+ .privacy-concerns-text {
+ margin: 0 5px;
+ }
+
+ a {
+ @include disable-default-a-behaviour;
+
+ color: $orange-color;
+ transition: color 0.3s;
+
+ &:hover {
+ color: #fff;
+ }
+ }
+
+ .privacy-concerns-okay {
+ background-color: $orange-color;
+ padding: 5px 8px 5px 7px;
+ margin-left: auto;
+ border-radius: 3px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+ font-weight: $font-semibold;
+
+ &:hover {
+ background-color: #000;
+ }
+ }
+}
+
@media screen and (max-width: 1600px) {
.video-bottom {
.video-info {
- margin-right: 0;
+ margin-right: 20px;
.video-info-first-row {
flex-direction: column;
.video-actions-rates {
margin-top: 20px;
- align-items: left;
+ align-items: start;
.video-info-likes-dislikes-bar {
margin-top: 10px;
}
}
-@media screen and (max-width: 1200px) {
+@media screen and (max-width: 1300px) {
+ .video-bottom {
+ flex-direction: column;
+ }
+
.other-videos {
- display: none;
+ padding-left: 0;
+ }
+
+ .privacy-concerns {
+ font-size: 12px;
+ padding: 2px 5px;
+
+ .privacy-concerns-text {
+ margin: 0;
+ }
}
}
}
}
}
+
+ .privacy-concerns {
+ width: 100%;
+
+ strong {
+ display: none;
+ }
+ }
}
@media screen and (max-width: 450px) {