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 min-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;
83 align-items: flex-end;
86 height: 40px; // Align with the title
90 .action-button:not(:first-child), .action-more {
95 @include peertube-button;
99 font-weight: $font-semibold;
100 display: inline-block;
101 padding: 0 10px 0 10px;
110 background-image: url('../../../assets/images/video/like-grey.svg');
114 background-image: url('../../../assets/images/video/dislike-grey.svg');
118 background-image: url('../../../assets/images/video/share.svg');
122 background-image: url('../../../assets/images/video/more.svg');
127 &.action-button-share {
131 &.action-button-like.activated {
132 background-color: #39CC0B;
135 background-image: url('../../../assets/images/video/like-white.svg');
139 &.action-button-dislike.activated {
140 background-color: #FF0000;
143 background-image: url('../../../assets/images/video/dislike-white.svg');
149 display: inline-block;
151 .dropdown-menu .dropdown-item {
162 background-image: url('../../../assets/images/video/download-black.svg');
166 background-image: url('../../../assets/images/global/edit-black.svg');
170 background-image: url('../../../assets/images/video/alert.svg');
174 background-image: url('../../../assets/images/video/blacklist.svg');
181 .video-info-likes-dislikes-bar {
184 background-color: #E5E5E5;
189 background-color: #39CC0B;
195 .video-info-description {
199 .description-loading {
200 display: inline-block;
203 .video-info-description-more {
205 font-weight: $font-semibold;
216 .video-attributes .video-attribute {
221 .video-attribute-label {
223 display: inline-block;
225 font-weight: $font-bold;
235 /deep/ .video-miniature {
240 .video-miniature-information {
248 @media screen and (max-width: 1300px) {
257 .video-info-first-row {
258 flex-direction: column;
261 .video-actions-rates {
265 .video-info-likes-dislikes-bar {
271 .video-info-date-views {
272 flex-direction: column;
275 .video-info-likes-dislikes-bar {
280 .video-attributes .video-attribute {
287 @media screen and (max-width: 600px) {
293 .video-info-first-row {