]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/sass/include/_miniature.scss
Translated using Weblate (Catalan)
[github/Chocobozzz/PeerTube.git] / client / src / sass / include / _miniature.scss
1 @import '_variables';
2 @import '_mixins';
3
4 @mixin miniature-name {
5 @include ellipsis-multiline(1.1em, 2);
6
7 transition: color 0.2s;
8 font-weight: $font-semibold;
9 color: var(--mainForegroundColor);
10 margin-top: 10px;
11 margin-bottom: 5px;
12
13 &:hover {
14 text-decoration: none;
15 }
16
17 &.blur-filter {
18 filter: blur(3px);
19 padding-left: 4px;
20 }
21 }
22
23 $play-overlay-transition: 0.2s ease;
24 $play-overlay-height: 26px;
25 $play-overlay-width: 18px;
26
27 @mixin miniature-thumbnail {
28 @include disable-outline;
29
30 display: flex;
31 flex-direction: column;
32 position: relative;
33 border-radius: 3px;
34 overflow: hidden;
35 width: $video-thumbnail-width;
36 height: $video-thumbnail-height;
37 background-color: #ececec;
38 transition: filter $play-overlay-transition;
39
40 .play-overlay {
41 position: absolute;
42 right: 0;
43 bottom: 0;
44
45 width: inherit;
46 height: inherit;
47 opacity: 0;
48 background-color: rgba(0, 0, 0, 0.3);
49
50 &, .icon {
51 transition: all $play-overlay-transition;
52 }
53
54 .icon {
55 width: 0;
56 height: 0;
57
58 position: absolute;
59 left: 50%;
60 top: 50%;
61 transform: translate(-50%, -50%) scale(0.5);
62
63 border-top: ($play-overlay-height / 2) solid transparent;
64 border-bottom: ($play-overlay-height / 2) solid transparent;
65
66 border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
67 }
68 }
69
70 &:hover {
71 text-decoration: none !important;
72
73 .play-overlay {
74 opacity: 1;
75
76 .icon {
77 transform: translate(-50%, -50%) scale(1);
78 }
79 }
80 }
81
82 &.focus-visible {
83 box-shadow: 0 0 0 2px var(--mainColor);
84 }
85
86 img {
87 width: inherit;
88 height: inherit;
89
90 &.blur-filter {
91 filter: blur(20px);
92 transform : scale(1.03);
93 }
94 }
95 }
96
97 @mixin thumbnail-size-component ($width, $height) {
98 ::ng-deep .video-thumbnail {
99 width: $width;
100 height: $height;
101 }
102 }
103
104 @mixin static-thumbnail-overlay {
105 display: inline-block;
106 background-color: rgba(0, 0, 0, 0.7);
107 color: #fff;
108 }
109
110 @mixin video-miniature-small-screen {
111 text-align: center;
112
113 ::ng-deep .video-miniature {
114 padding-right: 0;
115 height: auto;
116 width: 100%;
117 margin-bottom: 20px;
118
119 .video-miniature-information {
120 width: 100% !important;
121 text-align: left;
122
123 span {
124 width: 100%;
125 }
126 }
127
128 .video-thumbnail {
129 margin: 0 -15px 10px -15px;
130 width: 100vw;
131 height: calc(100vw / #{$video-thumbnail-ratio});
132 border-radius: 0;
133
134 img {
135 width: 100%;
136 height: 100%;
137 }
138 }
139 }
140 }
141
142 @mixin miniature-rows {
143 &:first-child {
144 padding-top: 30px;
145
146 .section-title {
147 border-top: none !important;
148 }
149 }
150
151 my-video-miniature {
152 text-align: left;
153 }
154
155 .section-title {
156 font-size: 24px;
157 font-weight: $font-semibold;
158 padding-top: 15px;
159 margin-bottom: 15px;
160 display: flex;
161 justify-content: space-between;
162 border-top: 1px solid $separator-border-color;
163
164 a {
165 &:hover, &:focus:not(.focus-visible), &:active {
166 text-decoration: none;
167 outline: none;
168 }
169
170 color: var(--mainForegroundColor);
171 }
172 }
173
174 &.channel {
175 .section-title {
176 a {
177 display: flex;
178 width: fit-content;
179 align-items: center;
180
181 img {
182 @include avatar(28px);
183
184 margin-right: 8px;
185 }
186 }
187
188 .followers {
189 color: $grey-foreground-color;
190 font-weight: normal;
191 font-size: 14px;
192 margin-left: 10px;
193 position: relative;
194 top: 2px;
195 }
196 }
197 }
198
199 .show-more {
200 position: relative;
201 top: -5px;
202 display: inline-block;
203 font-size: 16px;
204 text-transform: uppercase;
205 color: $grey-foreground-color;
206 margin-bottom: 10px;
207 font-weight: $font-semibold;
208 text-decoration: none;
209 }
210
211 @media screen and (max-width: $mobile-view) {
212 max-height: initial;
213 overflow: initial;
214
215 @include video-miniature-small-screen;
216
217 .section-title {
218 font-size: 17px;
219 }
220 }
221 }
222
223 @mixin adapt-margin-content-width {
224 width: $video-miniature-width * 6;
225 margin: auto !important;
226
227 @media screen and (max-width: 1800px) {
228 width: $video-miniature-width * 5;
229 }
230
231 @media screen and (max-width: 1800px - $video-miniature-width) {
232 width: $video-miniature-width * 4;
233 }
234
235 @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
236 width: $video-miniature-width * 3;
237 }
238
239 @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
240 width: $video-miniature-width * 2;
241 }
242
243 @media screen and (max-width: 500px) {
244 width: auto;
245 margin: 0 !important;
246
247 .videos {
248 @include video-miniature-small-screen;
249 }
250 }
251 }