]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame_incremental - client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
Bumped to version v5.2.1
[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-video-playlist / video-playlist-miniature.component.scss
... / ...
CommitLineData
1@use '_variables' as *;
2@use '_mixins' as *;
3@use '_miniature' as *;
4
5.miniature {
6 display: inline-block;
7 width: 100%;
8
9 &.no-videos:not(.to-manage) {
10 a {
11 cursor: default !important;
12 }
13 }
14
15 &.to-manage,
16 &.no-videos {
17 .play-overlay {
18 display: none;
19 }
20 }
21}
22
23.miniature-thumbnail {
24 @include miniature-thumbnail;
25
26 .miniature-playlist-info-overlay {
27 @include static-thumbnail-overlay;
28
29 position: absolute;
30 right: 0;
31 bottom: 0;
32 height: 100%;
33 padding: 0 10px;
34 display: flex;
35 align-items: center;
36 font-size: 14px;
37 font-weight: $font-semibold;
38 }
39}
40
41.miniature-info {
42
43 .miniature-name {
44 @include miniature-name;
45 }
46
47 .by {
48 @include disable-default-a-behaviour;
49
50 display: block;
51 color: pvar(--greyForegroundColor);
52 }
53
54 .privacy-date {
55 margin-top: 5px;
56 font-size: 14px;
57
58 .privacy {
59 font-weight: $font-semibold;
60
61 &::after {
62 content: '-';
63 margin: 0 3px;
64 }
65 }
66 }
67
68 .description {
69 @include peertube-word-wrap;
70
71 margin-top: 10px;
72 color: pvar(--greyForegroundColor);
73 }
74}
75
76.miniature:not(.display-as-row) {
77
78 .miniature-name {
79 margin-top: 10px;
80 margin-bottom: 5px;
81 }
82
83 .miniature-thumbnail {
84 @include block-ratio($selector: '::ng-deep a');
85
86 margin-top: 10px;
87 margin-bottom: 5px;
88 }
89}
90
91.miniature.display-as-row {
92 --rowThumbnailWidth: #{$video-thumbnail-width};
93 --rowThumbnailHeight: #{$video-thumbnail-height};
94
95 display: flex;
96
97 .miniature-name {
98 font-size: $video-miniature-row-name-font-size;
99 }
100
101 .miniature-thumbnail {
102 @include margin-right(10px);
103
104 min-width: var(--rowThumbnailWidth);
105 max-width: var(--rowThumbnailWidth);
106 height: var(--rowThumbnailHeight);
107 }
108}
109
110@include on-small-main-col {
111 .miniature.display-as-row {
112 --rowThumbnailWidth: #{$video-thumbnail-medium-width};
113 --rowThumbnailHeight: #{$video-thumbnail-medium-height};
114 }
115}
116
117@include on-mobile-main-col {
118 .miniature.display-as-row {
119 --rowThumbnailWidth: #{$video-thumbnail-small-width};
120 --rowThumbnailHeight: #{$video-thumbnail-small-height};
121 }
122}