5 background-color: #000;
7 justify-content: center;
13 @media screen and (max-width: 600px) {
15 max-height: calc(100vh - #{$header-height});
18 // VideoJS create an inner video player
21 position: relative !important;
31 font-weight: $font-semibold;
43 .video-info-first-row {
52 min-height: 40px; // Align with the action buttons
54 font-weight: $font-semibold;
58 .video-info-date-views {
65 font-weight: $font-semibold;
75 @include avatar(18px);
81 .video-actions-rates {
83 flex-direction: column;
84 align-items: flex-end;
87 height: 40px; // Align with the title
91 .action-button:not(:first-child), .action-more {
96 @include peertube-button;
100 font-weight: $font-semibold;
101 display: inline-block;
102 padding: 0 10px 0 10px;
112 background-image: url('../../../assets/images/video/like-grey.svg');
116 background-image: url('../../../assets/images/video/dislike-grey.svg');
120 background-image: url('../../../assets/images/video/heart.svg');
124 background-image: url('../../../assets/images/video/share.svg');
128 background-image: url('../../../assets/images/video/more.svg');
133 &.action-button-share {
137 &.action-button-like.activated {
138 background-color: #39CC0B;
141 background-image: url('../../../assets/images/video/like-white.svg');
145 &.action-button-dislike.activated {
146 background-color: #FF0000;
149 background-image: url('../../../assets/images/video/dislike-white.svg');
155 display: inline-block;
157 .dropdown-menu .dropdown-item {
168 background-image: url('../../../assets/images/video/download-black.svg');
172 background-image: url('../../../assets/images/global/edit-black.svg');
176 background-image: url('../../../assets/images/video/alert.svg');
180 background-image: url('../../../assets/images/video/blacklist.svg');
187 .video-info-likes-dislikes-bar {
190 background-color: #E5E5E5;
195 background-color: #39CC0B;
201 .video-info-description {
205 .video-info-description-html {
211 .description-loading {
212 display: inline-block;
215 .video-info-description-more {
217 font-weight: $font-semibold;
228 .video-attributes .video-attribute {
233 .video-attribute-label {
235 display: inline-block;
237 font-weight: $font-bold;
249 /deep/ .video-miniature {
254 .video-miniature-information {
261 // If the view is not expanded, take into account the menu
263 width: calc(100% - #{$menu-width});
266 :host-context(.expanded) {
280 justify-content: flex-start;
281 background-color: rgba(0, 0, 0, 0.9);
284 .privacy-concerns-text {
289 @include disable-default-a-behaviour;
291 color: $orange-color;
292 transition: color 0.3s;
299 .privacy-concerns-okay {
300 background-color: $orange-color;
301 padding: 5px 8px 5px 7px;
305 transition: background-color 0.3s;
306 font-weight: $font-semibold;
309 background-color: #000;
315 @media screen and (max-width: 1600px) {
320 .video-info-first-row {
321 flex-direction: column;
324 .video-actions-rates {
328 .video-info-likes-dislikes-bar {
334 .video-info-date-views {
335 flex-direction: column;
338 .video-info-likes-dislikes-bar {
343 .video-attributes .video-attribute {
350 @media screen and (max-width: 1200px) {
359 .privacy-concerns-text {
365 @media screen and (max-width: 600px) {
371 .video-info-first-row {
390 @media screen and (max-width: 450px) {
391 .video-bottom .action-button .icon-text {
392 display: none !important;