5 background-color: #000;
7 justify-content: center;
13 @media screen and (max-width: 800px) {
17 // VideoJS create an inner video player
20 position: relative !important;
30 font-weight: $font-semibold;
42 .video-info-first-row {
51 height: 40px; // Align with the action buttons
53 font-weight: $font-semibold;
57 .video-info-date-views {
64 font-weight: $font-semibold;
74 @include avatar(18px);
80 .video-actions-rates {
82 flex-direction: column;
86 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;
111 background-image: url('../../../assets/images/video/like-grey.svg');
115 background-image: url('../../../assets/images/video/dislike-grey.svg');
119 background-image: url('../../../assets/images/video/share.svg');
123 background-image: url('../../../assets/images/video/more.svg');
128 &.action-button-like.activated {
129 background-color: #39CC0B;
132 background-image: url('../../../assets/images/video/like-white.svg');
136 &.action-button-dislike.activated {
137 background-color: #FF0000;
140 background-image: url('../../../assets/images/video/dislike-white.svg');
146 display: inline-block;
148 .dropdown-menu .dropdown-item {
159 background-image: url('../../../assets/images/video/download-black.svg');
163 background-image: url('../../../assets/images/global/edit-black.svg');
167 background-image: url('../../../assets/images/video/alert.svg');
171 background-image: url('../../../assets/images/video/blacklist.svg');
178 .video-info-likes-dislikes-bar {
181 background-color: #E5E5E5;
186 background-color: #39CC0B;
192 .video-info-description {
196 .description-loading {
197 display: inline-block;
200 .video-info-description-more {
202 font-weight: $font-semibold;
213 .video-attributes .video-attribute {
218 .video-attribute-label {
220 display: inline-block;
222 font-weight: $font-bold;
232 /deep/ .video-miniature {
237 .video-miniature-information {
245 @media screen and (max-width: 1300px) {
254 .video-info-first-row {
255 flex-direction: column;
258 .video-actions-rates {
262 .video-info-likes-dislikes-bar {
268 .video-info-date-views {
269 flex-direction: column;
272 .video-info-likes-dislikes-bar {
277 .video-attributes .video-attribute {
284 @media screen and (max-width: 600px) {
290 .video-info-first-row {