3 @import '_bootstrap-variables';
5 $other-videos-width: 260px;
8 flex-direction: column;
12 font-weight: $font-semibold;
15 #video-element-wrapper {
16 background-color: #000;
18 justify-content: center;
24 flex-direction: column;
27 justify-content: center;
28 background-color: #141313;
33 @media screen and (max-width: 1000px) {
37 @media screen and (max-width: 600px) {
46 &.vjs-theater-enabled {
47 height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
51 // VideoJS create an inner video player
54 position: relative !important;
58 @media screen and (max-width: 600px) {
62 height: calc(100vw / 1.7); // 16/9
76 font-weight: $font-semibold;
85 // Set min width for flex item
89 .video-info-first-row {
98 min-height: 40px; // Align with the action buttons
100 font-weight: $font-semibold;
104 .video-info-date-views {
111 .video-info-channel {
112 font-weight: $font-semibold;
116 @include disable-default-a-behaviour;
118 color: var(--mainForegroundColor);
125 @include avatar(18px);
127 margin: -2px 2px 0 5px;
131 my-subscribe-button {
139 @include disable-default-a-behaviour;
144 color: var(--mainForegroundColor);
151 @include avatar(18px);
170 .video-actions-rates {
171 margin: 20px 0 10px 0;
175 height: 40px; // Align with the title
179 .action-button:not(:first-child), .action-more {
184 @include peertube-button;
185 @include grey-button;
188 font-weight: $font-semibold;
189 display: inline-block;
190 padding: 0 10px 0 10px;
204 background-image: url('../../../assets/images/video/like-grey.svg');
208 background-image: url('../../../assets/images/video/dislike-grey.svg');
212 background-image: url('../../../assets/images/video/heart.svg');
216 background-image: url('../../../assets/images/video/share.svg');
220 background-image: url('../../../assets/images/video/more.svg');
229 &.action-button-like.activated {
230 background-color: $green;
233 background-image: url('../../../assets/images/video/like-white.svg');
237 &.action-button-dislike.activated {
238 background-color: $red;
241 background-image: url('../../../assets/images/video/dislike-white.svg');
247 display: inline-block;
249 .dropdown-menu .dropdown-item {
260 background-image: url('../../../assets/images/video/download-black.svg');
264 background-image: url('../../../assets/images/global/edit-black.svg');
268 background-image: url('../../../assets/images/video/alert.svg');
272 background-image: url('../../../assets/images/video/blacklist.svg');
276 background-image: url('../../../assets/images/global/undo.svg');
280 background-image: url('../../../assets/images/global/delete-black.svg');
287 .video-info-likes-dislikes-bar {
288 $likes-bar-height: 2px;
289 height: $likes-bar-height;
290 margin-top: -$likes-bar-height;
292 background-color: $red;
298 background-color: $green;
304 .video-info-description {
308 .video-info-description-html {
309 @include peertube-word-wrap;
312 .glyphicon, .description-loading {
316 .description-loading {
317 display: inline-block;
320 .video-info-description-more {
322 font-weight: $font-semibold;
333 .video-attributes .video-attribute {
338 .video-attribute-label {
341 display: inline-block;
343 font-weight: $font-bold;
346 a.video-attribute-value {
347 @include disable-default-a-behaviour;
348 color: var(--mainForegroundColor);
355 &.video-attribute-tags {
356 .video-attribute-value:not(:nth-child(2)) {
365 /deep/ .other-videos {
367 width: $other-videos-width;
370 margin-top: 0 !important;
379 .video-miniature-information {
391 display: inline-block;
396 // If the view is not expanded, take into account the menu
398 width: calc(100% - #{$menu-width});
401 @media screen and (max-width: $small-view) {
403 margin-left: $menu-width;
407 :host-context(.expanded) {
422 justify-content: flex-start;
423 background-color: rgba(0, 0, 0, 0.9);
426 .privacy-concerns-text {
431 @include disable-default-a-behaviour;
433 color: var(--mainColor);
434 transition: color 0.3s;
441 .privacy-concerns-okay {
442 background-color: var(--mainColor);
443 padding: 5px 8px 5px 7px;
447 transition: background-color 0.3s;
448 font-weight: $font-semibold;
451 background-color: #000;
456 @media screen and (min-width: map-get($grid-breakpoints, xl)) {
457 .video-bottom .video-info {
458 max-width: calc(100% - #{$other-videos-width});
462 @media screen and (max-width: 1600px) {
463 .video-bottom .video-info .video-attributes .video-attribute {
468 @media screen and (max-width: 1300px) {
473 .privacy-concerns-text {
479 @media screen and (max-width: 600px) {
486 .video-info-first-row {
496 /deep/ .other-videos {
497 padding-left: 0 !important;
499 /deep/ .video-miniature {
500 flex-direction: column;
513 @media screen and (max-width: 450px) {
515 .action-button .icon-text {
516 display: none !important;
519 .video-info .video-info-first-row {
524 .video-info-date-views {
528 .video-actions-rates {
533 .video-info-description {
534 font-size: 14px !important;