PluginProbe
Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets / trunk
Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets vtrunk
4.5.4 4.2.1 4.2.2 4.2.3 4.5.0 4.5.2 4.5.3 4.2.0 4.1.18 4.1.17 4.1.16 4.1.15 4.1.14 4.1.13 4.1.12 4.1.11 4.1.10 4.1.9 4.1.8 4.0.9 4.1.0 4.1.1 4.1.2 4.1.3 4.1.4 All 146 releases
ultimate-post-kit / assets / css / upk-hazel-grid.css

upk-hazel-grid.css in Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets trunk, at assets/css/upk-hazel-grid.css

441 lines 13.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .upk-hazel-grid .upk-post-grid {
2 display: grid;
3 grid-template-columns: repeat(1, 1fr);
4 }
5 .upk-hazel-grid .upk-item {
6 position: relative;
7 overflow: hidden;
8 transition: all 0.3s ease;
9 }
10 .upk-hazel-grid .upk-item:hover .upk-content {
11 opacity: 1;
12 transform: translateY(0);
13 }
14 .upk-hazel-grid .upk-item:hover .upk-meta {
15 opacity: 1;
16 }
17 .upk-hazel-grid .upk-item-box {
18 position: relative;
19 overflow: hidden;
20 transition: all 0.3s ease-in;
21 height: 100%;
22 }
23 .upk-hazel-grid .upk-item-box:before {
24 content: "";
25 display: block;
26 position: absolute;
27 width: 100%;
28 top: 0;
29 bottom: 0;
30 z-index: 2;
31 transition: all 0.3s ease;
32 }
33 .upk-hazel-grid .upk-item-box:hover .upk-img {
34 transform: scale(1.1);
35 }
36 .upk-hazel-grid .upk-img {
37 width: 100%;
38 height: 100%;
39 object-fit: cover;
40 transition: all 0.3s ease;
41 }
42 .upk-hazel-grid .upk-content {
43 padding: 30px;
44 transition: all 0.3s ease;
45 opacity: 1;
46 }
47 .upk-hazel-grid .upk-category a {
48 text-decoration: none;
49 font-size: 9px;
50 background: #ef233c;
51 text-transform: uppercase;
52 letter-spacing: 1px;
53 border-radius: 2px;
54 display: inline-block;
55 padding: 3px 6px;
56 color: #fff;
57 }
58 .upk-hazel-grid .upk-category a + a {
59 margin-left: 5px;
60 }
61 .upk-hazel-grid .upk-title {
62 font-size: clamp(15px, 2vw, 20px);
63 line-height: 1.3;
64 margin-bottom: 6px;
65 }
66 .upk-hazel-grid .upk-meta {
67 display: inline-flex;
68 flex-wrap: wrap;
69 align-items: center;
70 opacity: 0;
71 transition: all 0.3s ease;
72 font-size: 12px;
73 }
74 .upk-hazel-grid .upk-meta .upk-blog-author {
75 float: left;
76 display: flex;
77 align-items: center;
78 }
79 .upk-hazel-grid .upk-meta .upk-blog-author a {
80 text-transform: capitalize;
81 font-weight: 600;
82 }
83 .upk-hazel-grid .upk-meta .upk-blog-author .upk-post-grid-author {
84 display: flex;
85 line-height: 1;
86 margin-left: 5px;
87 }
88 .upk-hazel-grid .upk-meta .upk-date {
89 position: relative;
90 display: flex;
91 align-items: center;
92 line-height: 1;
93 }
94 .upk-hazel-grid .upk-meta .upk-date i {
95 margin: 0 5px;
96 }
97 .upk-hazel-grid .upk-meta .upk-post-time {
98 margin-left: 5px;
99 }
100 .upk-hazel-grid .upk-meta .upk-post-time i {
101 margin-right: 2px;
102 }
103 .upk-hazel-grid .upk-meta > div {
104 position: relative;
105 display: inline-flex;
106 }
107 .upk-hazel-grid .upk-meta > div:before {
108 content: attr(data-separator);
109 margin: 0 10px;
110 }
111 .upk-hazel-grid .upk-meta > div:nth-child(1)::before {
112 display: none;
113 }
114 .upk-hazel-grid .upk-content-style-1 .upk-item-box:before {
115 background: rgba(0, 0, 0, 0.4);
116 }
117 .upk-hazel-grid .upk-content-style-1 .upk-cetagory {
118 margin-bottom: 15px;
119 }
120 .upk-hazel-grid .upk-content-style-1 .upk-title a {
121 color: #fff;
122 }
123 .upk-hazel-grid .upk-content-style-1 .upk-meta {
124 color: #fff;
125 }
126 .upk-hazel-grid .upk-content-style-1 .upk-meta .upk-blog-author a {
127 color: #fff;
128 }
129 .upk-hazel-grid .upk-content-style-1 .upk-meta .upk-post-time,
130 .upk-hazel-grid .upk-content-style-1 .upk-meta .upk-date {
131 color: #ffffff;
132 }
133 .upk-hazel-grid .upk-content-style-2 .upk-content {
134 padding: 15px;
135 width: 100%;
136 }
137 .upk-hazel-grid .upk-content-style-2 .upk-cetagory {
138 margin-bottom: 15px;
139 }
140 .upk-hazel-grid .upk-content-style-2 .upk-title a {
141 color: #fff;
142 }
143 .upk-hazel-grid .upk-content-style-2 .upk-meta {
144 color: #fff;
145 }
146 .upk-hazel-grid .upk-content-style-2 .upk-meta .upk-blog-author a {
147 color: #fff;
148 }
149 .upk-hazel-grid .upk-content-style-2 .upk-meta .upk-post-time,
150 .upk-hazel-grid .upk-content-style-2 .upk-meta .upk-date {
151 color: #ffffff;
152 }
153 .upk-hazel-grid .upk-content-style-3 .upk-item-box:before {
154 background: rgba(0, 0, 0, 0.4);
155 }
156 .upk-hazel-grid .upk-content-style-3 .upk-cetagory {
157 margin-bottom: 15px;
158 }
159 .upk-hazel-grid .upk-content-style-3 .upk-title a {
160 background: #fff;
161 color: #000;
162 display: inline;
163 padding: 6px;
164 -webkit-box-decoration-break: clone;
165 }
166 .upk-hazel-grid .upk-content-style-3 .upk-meta {
167 background: #fff;
168 color: #000;
169 display: inline-flex;
170 padding: 6px;
171 }
172 .upk-hazel-grid .upk-content-style-3 .upk-meta .upk-blog-author a {
173 color: #000;
174 }
175 .upk-hazel-grid .upk-content-style-3 .upk-meta .upk-date {
176 color: #000;
177 }
178 .upk-hazel-grid .upk-content-style-3 .upk-meta .upk-date::before {
179 background: #000;
180 }
181 .upk-hazel-grid .upk-content-style-3 .upk-meta .upk-post-time {
182 color: #000;
183 }
184 .upk-hazel-grid .upk-text-position-center-center .upk-content {
185 position: absolute;
186 top: 60%;
187 left: 50%;
188 width: 100%;
189 z-index: 111;
190 text-align: center;
191 transform: translate(-50%, -50%);
192 }
193 .upk-hazel-grid .upk-text-position-center-center .upk-item:hover .upk-content {
194 top: 50%;
195 transform: translate(-50%, -50%);
196 }
197 .upk-hazel-grid .upk-text-position-bottom-center .upk-content,
198 .upk-hazel-grid .upk-text-position-bottom-left .upk-content {
199 position: absolute;
200 bottom: 0;
201 left: 0;
202 z-index: 111;
203 transform: translateY(30px);
204 }
205 .upk-hazel-grid .upk-text-position-bottom-center .upk-content {
206 text-align: center;
207 }
208 .upk-hazel-grid .upk-text-position-top-left .upk-content {
209 position: absolute;
210 top: 0;
211 left: 0;
212 z-index: 111;
213 transform: translateY(-40px);
214 display: flex;
215 flex-direction: column-reverse;
216 flex-flow: wrap-reverse;
217 }
218 .upk-hazel-grid .upk-text-position-top-left .upk-title-wrap {
219 margin-bottom: 10px;
220 width: 100%;
221 }
222 .upk-hazel-grid .upk-text-position-top-left .upk-meta {
223 margin-bottom: 20px;
224 }
225 .upk-hazel-grid .upk-text-position-top-right .upk-content {
226 position: absolute;
227 top: 0;
228 right: 0;
229 z-index: 111;
230 text-align: right;
231 transform: translateY(-40px);
232 display: flex;
233 flex-direction: column-reverse;
234 flex-flow: wrap-reverse;
235 }
236 .upk-hazel-grid .upk-text-position-top-right .upk-title-wrap {
237 margin-bottom: 10px;
238 width: 100%;
239 }
240 .upk-hazel-grid .upk-text-position-top-right .upk-cetagory {
241 margin-left: auto;
242 }
243 .upk-hazel-grid .upk-text-position-top-right .upk-meta {
244 margin-left: auto;
245 margin-bottom: 20px;
246 }
247 .upk-hazel-grid .upk-text-position-top-right .upk-category {
248 margin-left: auto;
249 }
250 .upk-hazel-grid .upk-text-position-bottom-right .upk-content {
251 position: absolute;
252 bottom: 0;
253 right: 0;
254 z-index: 111;
255 transform: translateY(30px);
256 text-align: right;
257 }
258 .upk-hazel-grid .upk-text-position-bottom-right .upk-meta {
259 opacity: 1;
260 transition: all 0.3s ease;
261 display: inline-flex;
262 }
263 .upk-hazel-grid .upk-post-grid.upk-style-2 .upk-item:nth-child(6n+1) {
264 grid-row: none;
265 }
266 .upk-hazel-grid .upk-post-grid.upk-style-2 .upk-item:nth-child(n+1) {
267 grid-column: span 2/auto;
268 }
269 .upk-hazel-grid .upk-post-grid.upk-style-3 .upk-item:nth-child(5n+1) {
270 grid-row: span 2/auto;
271 }
272 .upk-hazel-grid .upk-post-grid.upk-style-3 .upk-item:nth-child(n+1) {
273 grid-column: span 2/auto;
274 }
275 .upk-hazel-grid .upk-post-grid.upk-style-4 .upk-item:nth-child(5n+2) {
276 grid-row: span 2/auto;
277 }
278 .upk-hazel-grid .upk-post-grid.upk-style-4 .upk-item:nth-child(n+1) {
279 grid-column: span 2/auto;
280 }
281 .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(n+1) {
282 grid-column: span 6/auto;
283 }
284 .upk-hazel-grid .upk-post-grid.upk-style-6 .upk-item:nth-child(n+1) {
285 grid-column: span 2/auto;
286 }
287 .upk-hazel-grid .upk-post-grid.upk-style-6 .upk-item:nth-child(5n+3) {
288 grid-row: span 2/auto;
289 }
290 .upk-hazel-grid .upk-post-grid.upk-style-7 .upk-item:nth-child(n+1) {
291 grid-column: span 2/auto;
292 }
293 .upk-hazel-grid .upk-post-grid.upk-style-8 .upk-item:nth-child(n+1) {
294 grid-column: span 3/auto;
295 }
296 .upk-hazel-grid .upk-post-grid.upk-style-9 .upk-item:nth-child(n+1) {
297 grid-column: span 6/auto;
298 }
299 .upk-hazel-grid .upk-post-grid.upk-style-10 .upk-item:nth-child(n+1) {
300 grid-column: span 6/auto;
301 }
302
303 .upk-global-link-yes .upk-hazel-grid .upk-item:hover {
304 cursor: pointer;
305 }
306
307 @media only screen and (min-width: 661px) and (max-width: 1200px) {
308 .upk-hazel-grid .upk-post-grid.upk-style-1 {
309 grid-template-columns: repeat(2, 1fr);
310 }
311 .upk-hazel-grid .upk-post-grid.upk-style-2 .upk-item:nth-child(6n+1) {
312 grid-column: span 3/auto !important;
313 }
314 .upk-hazel-grid .upk-post-grid.upk-style-2 .upk-item:nth-child(6n+2), .upk-hazel-grid .upk-post-grid.upk-style-2 .upk-item:nth-child(6n+3), .upk-hazel-grid .upk-post-grid.upk-style-2 .upk-item:nth-child(6n+4), .upk-hazel-grid .upk-post-grid.upk-style-2 .upk-item:nth-child(6n+5), .upk-hazel-grid .upk-post-grid.upk-style-2 .upk-item:nth-child(6n+6) {
315 grid-column: span 3/auto;
316 }
317 .upk-hazel-grid .upk-post-grid.upk-style-2 .upk-item:nth-child(6n+5) {
318 grid-row: span 2/auto;
319 }
320 .upk-hazel-grid .upk-post-grid.upk-style-3 .upk-item:nth-child(5n+1) {
321 grid-column: span 3/auto;
322 grid-row: span 2/auto;
323 }
324 .upk-hazel-grid .upk-post-grid.upk-style-3 .upk-item:nth-child(5n+2), .upk-hazel-grid .upk-post-grid.upk-style-3 .upk-item:nth-child(5n+3), .upk-hazel-grid .upk-post-grid.upk-style-3 .upk-item:nth-child(5n+4), .upk-hazel-grid .upk-post-grid.upk-style-3 .upk-item:nth-child(5n+5) {
325 grid-column: span 3/auto;
326 }
327 .upk-hazel-grid .upk-post-grid.upk-style-4 .upk-item:nth-child(5n+2) {
328 grid-row: span 2/auto;
329 }
330 .upk-hazel-grid .upk-post-grid.upk-style-4 .upk-item:nth-child(n+1) {
331 grid-column: span 3/auto;
332 }
333 .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+1) {
334 grid-row: span 2/auto !important;
335 grid-column: span 6/auto !important;
336 }
337 .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+2) {
338 grid-row: span 1/auto !important;
339 }
340 .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+4) {
341 grid-row: span 2/auto !important;
342 grid-column: span 6/auto !important;
343 }
344 .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+2), .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+3), .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+5) {
345 grid-column: span 3/auto !important;
346 }
347 .upk-hazel-grid .upk-post-grid.upk-style-6 .upk-item:nth-child(n+1) {
348 grid-column: span 3/auto;
349 }
350 .upk-hazel-grid .upk-post-grid.upk-style-6 .upk-item:nth-child(5n+3) {
351 grid-row: span 2/auto;
352 }
353 .upk-hazel-grid .upk-post-grid.upk-style-7 .upk-item:nth-child(n+1) {
354 grid-column: span 3/auto;
355 }
356 .upk-hazel-grid .upk-post-grid.upk-style-9 .upk-item:nth-child(4n+1) {
357 grid-column: span 6/auto !important;
358 grid-row: span 2/auto !important;
359 }
360 .upk-hazel-grid .upk-post-grid.upk-style-9 .upk-item:nth-child(4n+2), .upk-hazel-grid .upk-post-grid.upk-style-9 .upk-item:nth-child(4n+3), .upk-hazel-grid .upk-post-grid.upk-style-9 .upk-item:nth-child(4n+4) {
361 grid-column: span 3/auto !important;
362 }
363 .upk-hazel-grid .upk-post-grid.upk-style-9 .upk-item:nth-child(4n+3) {
364 grid-row: span 2/auto;
365 }
366 .upk-hazel-grid .upk-post-grid.upk-style-10 .upk-item:nth-child(6n+1), .upk-hazel-grid .upk-post-grid.upk-style-10 .upk-item:nth-child(6n+5) {
367 grid-row: span 2/auto !important;
368 }
369 .upk-hazel-grid .upk-post-grid.upk-style-10 .upk-item:nth-child(n+1) {
370 grid-column: span 3/auto !important;
371 }
372 }
373 @media only screen and (min-width: 661px) {
374 .upk-hazel-grid .upk-post-grid {
375 grid-template-columns: repeat(6, 1fr);
376 }
377 .upk-hazel-grid .upk-post-grid.upk-style-1 {
378 grid-template-columns: repeat(3, 1fr);
379 }
380 .upk-hazel-grid .upk-post-grid.upk-style-7 .upk-item:nth-child(7n+1), .upk-hazel-grid .upk-post-grid.upk-style-7 .upk-item:nth-child(7n+5) {
381 grid-row: span 2/auto;
382 }
383 .upk-hazel-grid .upk-post-grid.upk-style-2 .upk-item:nth-child(6n+1) {
384 grid-column: span 4/auto;
385 grid-row: span 2/auto;
386 }
387 .upk-hazel-grid .upk-post-grid.upk-style-2 .upk-item:nth-child(6n+1) .upk-content {
388 padding: 36px;
389 }
390 .upk-hazel-grid .upk-post-grid.upk-style-2 .upk-item:nth-child(6n+1) .upk-title {
391 font-size: 32px;
392 }
393 .upk-hazel-grid .upk-post-grid.upk-style-3 .upk-item:nth-child(5n+1) .upk-title {
394 font-size: 25px;
395 }
396 .upk-hazel-grid .upk-post-grid.upk-style-4 .upk-item:nth-child(5n+2) .upk-title {
397 font-size: 25px;
398 }
399 .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+1) .upk-content, .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+4) .upk-content {
400 padding: 36px;
401 }
402 .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+1) .upk-title, .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+4) .upk-title {
403 font-size: 32px;
404 }
405 .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+1) {
406 grid-column: span 4/auto;
407 }
408 .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+4) {
409 grid-column: span 4/auto;
410 grid-row: span 2/auto;
411 }
412 .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+2), .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+3), .upk-hazel-grid .upk-post-grid.upk-style-5 .upk-item:nth-child(5n+5) {
413 grid-column: span 2/auto;
414 }
415 .upk-hazel-grid .upk-post-grid.upk-style-9 .upk-item:nth-child(4n+1) {
416 grid-column: span 4/auto;
417 grid-row: span 3/auto;
418 }
419 .upk-hazel-grid .upk-post-grid.upk-style-9 .upk-item:nth-child(4n+1) .upk-content {
420 padding: 36px;
421 }
422 .upk-hazel-grid .upk-post-grid.upk-style-9 .upk-item:nth-child(4n+1) .upk-title {
423 font-size: 32px;
424 }
425 .upk-hazel-grid .upk-post-grid.upk-style-9 .upk-item:nth-child(4n+2), .upk-hazel-grid .upk-post-grid.upk-style-9 .upk-item:nth-child(4n+3), .upk-hazel-grid .upk-post-grid.upk-style-9 .upk-item:nth-child(4n+4) {
426 grid-column: span 2/auto;
427 }
428 .upk-hazel-grid .upk-post-grid.upk-style-10 .upk-item:nth-child(6n+5) {
429 grid-column: span 4/auto;
430 grid-row: span 2/auto;
431 }
432 .upk-hazel-grid .upk-post-grid.upk-style-10 .upk-item:nth-child(6n+5) .upk-content {
433 padding: 36px;
434 }
435 .upk-hazel-grid .upk-post-grid.upk-style-10 .upk-item:nth-child(6n+5) .upk-title {
436 font-size: 32px;
437 }
438 .upk-hazel-grid .upk-post-grid.upk-style-10 .upk-item:nth-child(6n+1), .upk-hazel-grid .upk-post-grid.upk-style-10 .upk-item:nth-child(6n+2), .upk-hazel-grid .upk-post-grid.upk-style-10 .upk-item:nth-child(6n+3), .upk-hazel-grid .upk-post-grid.upk-style-10 .upk-item:nth-child(6n+4), .upk-hazel-grid .upk-post-grid.upk-style-10 .upk-item:nth-child(6n+6) {
439 grid-column: span 2/auto;
440 }
441 }