4 #video-element-wrapper {
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;
42 // Set min width for flex item
45 .video-info-first-row {
54 min-height: 40px; // Align with the action buttons
56 font-weight: $font-semibold;
60 .video-info-date-views {
67 font-weight: $font-semibold;
77 @include avatar(18px);
83 .video-actions-rates {
85 flex-direction: column;
86 align-items: flex-end;
89 height: 40px; // Align with the title
93 .action-button:not(:first-child), .action-more {
98 @include peertube-button;
102 font-weight: $font-semibold;
103 display: inline-block;
104 padding: 0 10px 0 10px;
114 background-image: url('../../../assets/images/video/like-grey.svg');
118 background-image: url('../../../assets/images/video/dislike-grey.svg');
122 background-image: url('../../../assets/images/video/heart.svg');
126 background-image: url('../../../assets/images/video/share.svg');
130 background-image: url('../../../assets/images/video/more.svg');
135 &.action-button-share {
139 &.action-button-like.activated {
140 background-color: #39CC0B;
143 background-image: url('../../../assets/images/video/like-white.svg');
147 &.action-button-dislike.activated {
148 background-color: #FF0000;
151 background-image: url('../../../assets/images/video/dislike-white.svg');
157 display: inline-block;
159 .dropdown-menu .dropdown-item {
170 background-image: url('../../../assets/images/video/download-black.svg');
174 background-image: url('../../../assets/images/global/edit-black.svg');
178 background-image: url('../../../assets/images/video/alert.svg');
182 background-image: url('../../../assets/images/video/blacklist.svg');
189 .video-info-likes-dislikes-bar {
192 background-color: #E5E5E5;
197 background-color: #39CC0B;
203 .video-info-description {
207 .video-info-description-html {
208 word-wrap: break-word;
212 .description-loading {
213 display: inline-block;
216 .video-info-description-more {
218 font-weight: $font-semibold;
229 .video-attributes .video-attribute {
234 .video-attribute-label {
236 display: inline-block;
238 font-weight: $font-bold;
248 /deep/ .video-miniature {
253 .video-miniature-information {
260 // If the view is not expanded, take into account the menu
262 width: calc(100% - #{$menu-width});
265 :host-context(.expanded) {
279 justify-content: flex-start;
280 background-color: rgba(0, 0, 0, 0.9);
283 .privacy-concerns-text {
288 @include disable-default-a-behaviour;
290 color: $orange-color;
291 transition: color 0.3s;
298 .privacy-concerns-okay {
299 background-color: $orange-color;
300 padding: 5px 8px 5px 7px;
304 transition: background-color 0.3s;
305 font-weight: $font-semibold;
308 background-color: #000;
314 @media screen and (max-width: 1600px) {
319 .video-info-first-row {
320 flex-direction: column;
323 .video-actions-rates {
327 .video-info-likes-dislikes-bar {
333 .video-info-date-views {
334 flex-direction: column;
337 .video-info-likes-dislikes-bar {
342 .video-attributes .video-attribute {
349 @media screen and (max-width: 1300px) {
358 .privacy-concerns-text {
364 @media screen and (max-width: 600px) {
370 .video-info-first-row {
389 @media screen and (max-width: 450px) {
390 .video-bottom .action-button .icon-text {
391 display: none !important;