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});
31 #warning-transcoding {
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;
90 display: inline-block;
95 @include disable-default-a-behaviour;
107 @include avatar(18px);
118 .video-actions-rates {
120 flex-direction: column;
121 align-items: flex-end;
124 height: 40px; // Align with the title
128 .action-button:not(:first-child), .action-more {
133 @include peertube-button;
134 @include grey-button;
137 font-weight: $font-semibold;
138 display: inline-block;
139 padding: 0 10px 0 10px;
149 background-image: url('../../../assets/images/video/like-grey.svg');
153 background-image: url('../../../assets/images/video/dislike-grey.svg');
157 background-image: url('../../../assets/images/video/heart.svg');
161 background-image: url('../../../assets/images/video/share.svg');
165 background-image: url('../../../assets/images/video/more.svg');
174 &.action-button-like.activated {
175 background-color: #39CC0B;
178 background-image: url('../../../assets/images/video/like-white.svg');
182 &.action-button-dislike.activated {
183 background-color: #FF0000;
186 background-image: url('../../../assets/images/video/dislike-white.svg');
192 display: inline-block;
194 .dropdown-menu .dropdown-item {
205 background-image: url('../../../assets/images/video/download-black.svg');
209 background-image: url('../../../assets/images/global/edit-black.svg');
213 background-image: url('../../../assets/images/video/alert.svg');
217 background-image: url('../../../assets/images/video/blacklist.svg');
224 .video-info-likes-dislikes-bar {
227 background-color: #E5E5E5;
232 background-color: #39CC0B;
238 .video-info-description {
242 .video-info-description-html {
243 @include peertube-word-wrap;
246 .description-loading {
247 display: inline-block;
250 .video-info-description-more {
252 font-weight: $font-semibold;
263 .video-attributes .video-attribute {
268 .video-attribute-label {
270 display: inline-block;
272 font-weight: $font-bold;
284 /deep/ .video-miniature {
289 .video-miniature-information {
296 // If the view is not expanded, take into account the menu
298 width: calc(100% - #{$menu-width});
301 :host-context(.expanded) {
315 justify-content: flex-start;
316 background-color: rgba(0, 0, 0, 0.9);
319 .privacy-concerns-text {
324 @include disable-default-a-behaviour;
326 color: $orange-color;
327 transition: color 0.3s;
334 .privacy-concerns-okay {
335 background-color: $orange-color;
336 padding: 5px 8px 5px 7px;
340 transition: background-color 0.3s;
341 font-weight: $font-semibold;
344 background-color: #000;
350 @media screen and (max-width: 1600px) {
355 .video-info-first-row {
356 flex-direction: column;
359 .video-actions-rates {
363 .video-info-likes-dislikes-bar {
369 .video-info-date-views {
370 flex-direction: column;
373 .video-info-likes-dislikes-bar {
378 .video-attributes .video-attribute {
385 @media screen and (max-width: 1300px) {
394 .privacy-concerns-text {
400 @media screen and (max-width: 600px) {
406 .video-info-first-row {
425 @media screen and (max-width: 450px) {
426 .video-bottom .action-button .icon-text {
427 display: none !important;