4 #video-element-wrapper {
5 background-color: #000;
7 justify-content: center;
13 @media screen and (max-width: 600px) {
15 height: calc(100vw / 1.7); // 16/9
18 // VideoJS create an inner video player
21 position: relative !important;
25 /deep/ .video-js.vjs-theater-enabled {
27 height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
40 font-weight: $font-semibold;
51 // Set min width for flex item
54 .video-info-first-row {
63 min-height: 40px; // Align with the action buttons
65 font-weight: $font-semibold;
69 .video-info-date-views {
76 font-weight: $font-semibold;
80 @include disable-default-a-behaviour;
89 @include avatar(18px);
91 margin: -2px 2px 0 5px;
96 display: inline-block;
101 @include disable-default-a-behaviour;
113 @include avatar(18px);
125 .video-actions-rates {
127 flex-direction: column;
128 align-items: flex-end;
131 height: 40px; // Align with the title
135 .action-button:not(:first-child), .action-more {
140 @include peertube-button;
141 @include grey-button;
144 font-weight: $font-semibold;
145 display: inline-block;
146 padding: 0 10px 0 10px;
156 background-image: url('../../../assets/images/video/like-grey.svg');
160 background-image: url('../../../assets/images/video/dislike-grey.svg');
164 background-image: url('../../../assets/images/video/heart.svg');
168 background-image: url('../../../assets/images/video/share.svg');
172 background-image: url('../../../assets/images/video/more.svg');
181 &.action-button-like.activated {
182 background-color: #39CC0B;
185 background-image: url('../../../assets/images/video/like-white.svg');
189 &.action-button-dislike.activated {
190 background-color: #FF0000;
193 background-image: url('../../../assets/images/video/dislike-white.svg');
199 display: inline-block;
201 .dropdown-menu .dropdown-item {
212 background-image: url('../../../assets/images/video/download-black.svg');
216 background-image: url('../../../assets/images/global/edit-black.svg');
220 background-image: url('../../../assets/images/video/alert.svg');
224 background-image: url('../../../assets/images/video/blacklist.svg');
231 .video-info-likes-dislikes-bar {
234 background-color: #E5E5E5;
239 background-color: #39CC0B;
245 .video-info-description {
249 .video-info-description-html {
250 @include peertube-word-wrap;
253 .glyphicon, .description-loading {
257 .description-loading {
258 display: inline-block;
261 .video-info-description-more {
263 font-weight: $font-semibold;
274 .video-attributes .video-attribute {
279 .video-attribute-label {
281 display: inline-block;
283 font-weight: $font-bold;
295 /deep/ .video-miniature {
301 .video-miniature-information {
309 // If the view is not expanded, take into account the menu
311 width: calc(100% - #{$menu-width});
314 :host-context(.expanded) {
328 justify-content: flex-start;
329 background-color: rgba(0, 0, 0, 0.9);
332 .privacy-concerns-text {
337 @include disable-default-a-behaviour;
339 color: $orange-color;
340 transition: color 0.3s;
347 .privacy-concerns-okay {
348 background-color: $orange-color;
349 padding: 5px 8px 5px 7px;
353 transition: background-color 0.3s;
354 font-weight: $font-semibold;
357 background-color: #000;
363 @media screen and (max-width: 1600px) {
368 .video-info-first-row {
369 flex-direction: column;
372 .video-actions-rates {
376 .video-info-likes-dislikes-bar {
382 .video-info-date-views {
383 flex-direction: column;
386 .video-info-likes-dislikes-bar {
391 .video-attributes .video-attribute {
398 @media screen and (max-width: 1300px) {
400 flex-direction: column;
411 .privacy-concerns-text {
417 @media screen and (max-width: 600px) {
423 .video-info-first-row {
442 @media screen and (max-width: 450px) {
443 .video-bottom .action-button .icon-text {
444 display: none !important;