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 {
308 // If the view is not expanded, take into account the menu
310 width: calc(100% - #{$menu-width});
313 :host-context(.expanded) {
327 justify-content: flex-start;
328 background-color: rgba(0, 0, 0, 0.9);
331 .privacy-concerns-text {
336 @include disable-default-a-behaviour;
338 color: $orange-color;
339 transition: color 0.3s;
346 .privacy-concerns-okay {
347 background-color: $orange-color;
348 padding: 5px 8px 5px 7px;
352 transition: background-color 0.3s;
353 font-weight: $font-semibold;
356 background-color: #000;
362 @media screen and (max-width: 1600px) {
367 .video-info-first-row {
368 flex-direction: column;
371 .video-actions-rates {
375 .video-info-likes-dislikes-bar {
381 .video-info-date-views {
382 flex-direction: column;
385 .video-info-likes-dislikes-bar {
390 .video-attributes .video-attribute {
397 @media screen and (max-width: 1300px) {
399 flex-direction: column;
405 /deep/ .video-miniature .video-miniature-information {
414 .privacy-concerns-text {
420 @media screen and (max-width: 600px) {
426 .video-info-first-row {
445 @media screen and (max-width: 450px) {
446 .video-bottom .action-button .icon-text {
447 display: none !important;