@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: 800px) {
+ @media screen and (max-width: 600px) {
height: auto;
+ max-height: calc(100vh - #{$header-height});
}
// VideoJS create an inner video player
.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;
align-items: center;
font-size: 13px;
+ a {
+ color: black;
+ display: inline-block;
+ }
+
img {
@include avatar(18px);
}
}
+ my-video-feed {
+ margin-left: 5px;
+ margin-top: 1px;
+ }
+
.video-actions-rates {
display: flex;
flex-direction: column;
font-size: 15px;
.video-info-description-html {
- word-break: break-all;
+ word-wrap: break-word;
+ text-align: justify;
}
.description-loading {
}
}
+// 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) {
.other-videos {
display: none;
}
+
+ .privacy-concerns {
+ font-size: 12px;
+ padding: 2px 5px;
+
+ .privacy-concerns-text {
+ margin: 0;
+ }
+ }
}
@media screen and (max-width: 600px) {
}
}
}
+
+ .privacy-concerns {
+ width: 100%;
+
+ strong {
+ display: none;
+ }
+ }
}
@media screen and (max-width: 450px) {