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;
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 .glyphicon, .description-loading {
250 .description-loading {
251 display: inline-block;
254 .video-info-description-more {
256 font-weight: $font-semibold;
267 .video-attributes .video-attribute {
272 .video-attribute-label {
274 display: inline-block;
276 font-weight: $font-bold;
288 /deep/ .video-miniature {
294 .video-miniature-information {
302 // If the view is not expanded, take into account the menu
304 width: calc(100% - #{$menu-width});
307 :host-context(.expanded) {
321 justify-content: flex-start;
322 background-color: rgba(0, 0, 0, 0.9);
325 .privacy-concerns-text {
330 @include disable-default-a-behaviour;
332 color: $orange-color;
333 transition: color 0.3s;
340 .privacy-concerns-okay {
341 background-color: $orange-color;
342 padding: 5px 8px 5px 7px;
346 transition: background-color 0.3s;
347 font-weight: $font-semibold;
350 background-color: #000;
356 @media screen and (max-width: 1600px) {
361 .video-info-first-row {
362 flex-direction: column;
365 .video-actions-rates {
369 .video-info-likes-dislikes-bar {
375 .video-info-date-views {
376 flex-direction: column;
379 .video-info-likes-dislikes-bar {
384 .video-attributes .video-attribute {
391 @media screen and (max-width: 1300px) {
393 flex-direction: column;
404 .privacy-concerns-text {
410 @media screen and (max-width: 600px) {
416 .video-info-first-row {
435 @media screen and (max-width: 450px) {
436 .video-bottom .action-button .icon-text {
437 display: none !important;