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 {
206 word-break: break-all;
209 .description-loading {
210 display: inline-block;
213 .video-info-description-more {
215 font-weight: $font-semibold;
226 .video-attributes .video-attribute {
231 .video-attribute-label {
233 display: inline-block;
235 font-weight: $font-bold;
245 /deep/ .video-miniature {
250 .video-miniature-information {
258 @media screen and (max-width: 1600px) {
263 .video-info-first-row {
264 flex-direction: column;
267 .video-actions-rates {
271 .video-info-likes-dislikes-bar {
277 .video-info-date-views {
278 flex-direction: column;
281 .video-info-likes-dislikes-bar {
286 .video-attributes .video-attribute {
293 @media screen and (max-width: 1200px) {
299 @media screen and (max-width: 600px) {
305 .video-info-first-row {
316 @media screen and (max-width: 450px) {
317 .video-bottom .action-button .icon-text {
318 display: none !important;