PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.83
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.83
51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 51.1.46 All 39 releases
king-addons / includes / widgets / Pull_Quotes_Callouts_Builder / style.css

style.css in King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder 51.1.83, at includes/widgets/Pull_Quotes_Callouts_Builder/style.css

538 lines 16.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .king-addons-pull-quotes-callouts {
2 --ka-pqcb-gap: 14px;
3 --ka-pqcb-padding: 24px;
4 --ka-pqcb-radius: 16px;
5 --ka-pqcb-bg: #ffffff;
6 --ka-pqcb-border-color: #e2e8f0;
7 --ka-pqcb-border-width: 1px;
8 --ka-pqcb-text-color: #0f172a;
9 --ka-pqcb-author-color: #334155;
10 --ka-pqcb-source-color: #64748b;
11 --ka-pqcb-label-color: #0f172a;
12 --ka-pqcb-label-bg: #e2e8f0;
13 --ka-pqcb-link-color: #2563eb;
14 --ka-pqcb-mark-size: 44px;
15 --ka-pqcb-mark-color: #0f172a;
16 --ka-pqcb-mark-opacity: 0.2;
17 --ka-pqcb-mark-offset-x: 0px;
18 --ka-pqcb-mark-offset-y: 0px;
19 --ka-pqcb-mark-scale: 1;
20 --ka-pqcb-icon-size: 22px;
21 --ka-pqcb-icon-color: #0f172a;
22 --ka-pqcb-icon-offset-x: 0px;
23 --ka-pqcb-icon-offset-y: 0px;
24 --ka-pqcb-accent-size: 0px;
25 --ka-pqcb-accent-color: #0f172a;
26 position: relative;
27 display: block;
28 width: 100%;
29 margin: 0;
30 padding: var(--ka-pqcb-padding);
31 border: var(--ka-pqcb-border-width) solid var(--ka-pqcb-border-color);
32 border-radius: var(--ka-pqcb-radius);
33 background: var(--ka-pqcb-bg);
34 color: var(--ka-pqcb-text-color);
35 }
36
37 .king-addons-pull-quotes-callouts::before {
38 content: "";
39 position: absolute;
40 background: var(--ka-pqcb-accent-color);
41 border-radius: inherit;
42 pointer-events: none;
43 }
44
45 .king-addons-pull-quotes-callouts--accent-left::before {
46 top: 0;
47 bottom: 0;
48 left: 0;
49 width: var(--ka-pqcb-accent-size);
50 }
51
52 .king-addons-pull-quotes-callouts--accent-right::before {
53 top: 0;
54 bottom: 0;
55 right: 0;
56 width: var(--ka-pqcb-accent-size);
57 }
58
59 .king-addons-pull-quotes-callouts--accent-top::before {
60 top: 0;
61 left: 0;
62 right: 0;
63 height: var(--ka-pqcb-accent-size);
64 }
65
66 .king-addons-pull-quotes-callouts--accent-bottom::before {
67 bottom: 0;
68 left: 0;
69 right: 0;
70 height: var(--ka-pqcb-accent-size);
71 }
72
73 .king-addons-pqcb-align-left .king-addons-pull-quotes-callouts {
74 text-align: left;
75 }
76
77 .king-addons-pqcb-align-center .king-addons-pull-quotes-callouts {
78 text-align: center;
79 }
80
81 .king-addons-pqcb-align-right .king-addons-pull-quotes-callouts {
82 text-align: right;
83 }
84
85 .king-addons-pull-quotes-callouts__inner {
86 display: flex;
87 gap: var(--ka-pqcb-gap);
88 }
89
90 .king-addons-pull-quotes-callouts--type-pull-quote .king-addons-pull-quotes-callouts__inner {
91 flex-direction: column;
92 }
93
94 .king-addons-pull-quotes-callouts--type-callout .king-addons-pull-quotes-callouts__inner {
95 flex-direction: row;
96 align-items: flex-start;
97 }
98
99 .king-addons-pqcb-align-left
100 .king-addons-pull-quotes-callouts--type-callout
101 .king-addons-pull-quotes-callouts__inner {
102 justify-content: flex-start;
103 }
104
105 .king-addons-pqcb-align-center
106 .king-addons-pull-quotes-callouts--type-callout
107 .king-addons-pull-quotes-callouts__inner {
108 justify-content: center;
109 }
110
111 .king-addons-pqcb-align-right
112 .king-addons-pull-quotes-callouts--type-callout
113 .king-addons-pull-quotes-callouts__inner {
114 justify-content: flex-end;
115 }
116
117 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-top
118 .king-addons-pull-quotes-callouts__inner {
119 flex-direction: column;
120 }
121
122 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-none
123 .king-addons-pull-quotes-callouts__inner {
124 flex-direction: column;
125 }
126
127 .king-addons-pqcb-align-left
128 .king-addons-pull-quotes-callouts--type-pull-quote
129 .king-addons-pull-quotes-callouts__inner,
130 .king-addons-pqcb-align-left
131 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-top
132 .king-addons-pull-quotes-callouts__inner,
133 .king-addons-pqcb-align-left
134 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-none
135 .king-addons-pull-quotes-callouts__inner {
136 align-items: flex-start;
137 }
138
139 .king-addons-pqcb-align-center
140 .king-addons-pull-quotes-callouts--type-pull-quote
141 .king-addons-pull-quotes-callouts__inner,
142 .king-addons-pqcb-align-center
143 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-top
144 .king-addons-pull-quotes-callouts__inner,
145 .king-addons-pqcb-align-center
146 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-none
147 .king-addons-pull-quotes-callouts__inner {
148 align-items: center;
149 }
150
151 .king-addons-pqcb-align-right
152 .king-addons-pull-quotes-callouts--type-pull-quote
153 .king-addons-pull-quotes-callouts__inner,
154 .king-addons-pqcb-align-right
155 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-top
156 .king-addons-pull-quotes-callouts__inner,
157 .king-addons-pqcb-align-right
158 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-none
159 .king-addons-pull-quotes-callouts__inner {
160 align-items: flex-end;
161 }
162
163 .king-addons-pull-quotes-callouts__icon {
164 display: inline-flex;
165 align-items: center;
166 justify-content: center;
167 font-size: var(--ka-pqcb-icon-size);
168 color: var(--ka-pqcb-icon-color);
169 transform: translate(var(--ka-pqcb-icon-offset-x), var(--ka-pqcb-icon-offset-y));
170 line-height: 1;
171 }
172
173 .king-addons-pull-quotes-callouts__icon i,
174 .king-addons-pull-quotes-callouts__icon svg {
175 display: block;
176 width: 1em;
177 height: 1em;
178 }
179
180 .king-addons-pull-quotes-callouts__body {
181 position: relative;
182 display: flex;
183 flex-direction: column;
184 gap: var(--ka-pqcb-gap);
185 min-width: 0;
186 }
187
188 .king-addons-pull-quotes-callouts__label {
189 align-self: flex-start;
190 display: inline-flex;
191 padding: 4px 10px;
192 border-radius: 999px;
193 background: var(--ka-pqcb-label-bg);
194 color: var(--ka-pqcb-label-color);
195 font-weight: 600;
196 font-size: 12px;
197 letter-spacing: 0.08em;
198 text-transform: uppercase;
199 }
200
201 .king-addons-pqcb-align-center .king-addons-pull-quotes-callouts__label {
202 align-self: center;
203 }
204
205 .king-addons-pqcb-align-right .king-addons-pull-quotes-callouts__label {
206 align-self: flex-end;
207 }
208
209 @media (max-width: 1024px) {
210 .king-addons-pqcb-align-tablet-left .king-addons-pull-quotes-callouts {
211 text-align: left;
212 }
213
214 .king-addons-pqcb-align-tablet-center .king-addons-pull-quotes-callouts {
215 text-align: center;
216 }
217
218 .king-addons-pqcb-align-tablet-right .king-addons-pull-quotes-callouts {
219 text-align: right;
220 }
221
222 .king-addons-pqcb-align-tablet-left
223 .king-addons-pull-quotes-callouts--type-callout
224 .king-addons-pull-quotes-callouts__inner {
225 justify-content: flex-start;
226 }
227
228 .king-addons-pqcb-align-tablet-center
229 .king-addons-pull-quotes-callouts--type-callout
230 .king-addons-pull-quotes-callouts__inner {
231 justify-content: center;
232 }
233
234 .king-addons-pqcb-align-tablet-right
235 .king-addons-pull-quotes-callouts--type-callout
236 .king-addons-pull-quotes-callouts__inner {
237 justify-content: flex-end;
238 }
239
240 .king-addons-pqcb-align-tablet-left
241 .king-addons-pull-quotes-callouts--type-pull-quote
242 .king-addons-pull-quotes-callouts__inner,
243 .king-addons-pqcb-align-tablet-left
244 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-top
245 .king-addons-pull-quotes-callouts__inner,
246 .king-addons-pqcb-align-tablet-left
247 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-none
248 .king-addons-pull-quotes-callouts__inner {
249 align-items: flex-start;
250 }
251
252 .king-addons-pqcb-align-tablet-center
253 .king-addons-pull-quotes-callouts--type-pull-quote
254 .king-addons-pull-quotes-callouts__inner,
255 .king-addons-pqcb-align-tablet-center
256 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-top
257 .king-addons-pull-quotes-callouts__inner,
258 .king-addons-pqcb-align-tablet-center
259 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-none
260 .king-addons-pull-quotes-callouts__inner {
261 align-items: center;
262 }
263
264 .king-addons-pqcb-align-tablet-right
265 .king-addons-pull-quotes-callouts--type-pull-quote
266 .king-addons-pull-quotes-callouts__inner,
267 .king-addons-pqcb-align-tablet-right
268 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-top
269 .king-addons-pull-quotes-callouts__inner,
270 .king-addons-pqcb-align-tablet-right
271 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-none
272 .king-addons-pull-quotes-callouts__inner {
273 align-items: flex-end;
274 }
275
276 .king-addons-pqcb-align-tablet-center .king-addons-pull-quotes-callouts__label {
277 align-self: center;
278 }
279
280 .king-addons-pqcb-align-tablet-right .king-addons-pull-quotes-callouts__label {
281 align-self: flex-end;
282 }
283 }
284
285 @media (max-width: 767px) {
286 .king-addons-pqcb-align-mobile-left .king-addons-pull-quotes-callouts {
287 text-align: left;
288 }
289
290 .king-addons-pqcb-align-mobile-center .king-addons-pull-quotes-callouts {
291 text-align: center;
292 }
293
294 .king-addons-pqcb-align-mobile-right .king-addons-pull-quotes-callouts {
295 text-align: right;
296 }
297
298 .king-addons-pqcb-align-mobile-left
299 .king-addons-pull-quotes-callouts--type-callout
300 .king-addons-pull-quotes-callouts__inner {
301 justify-content: flex-start;
302 }
303
304 .king-addons-pqcb-align-mobile-center
305 .king-addons-pull-quotes-callouts--type-callout
306 .king-addons-pull-quotes-callouts__inner {
307 justify-content: center;
308 }
309
310 .king-addons-pqcb-align-mobile-right
311 .king-addons-pull-quotes-callouts--type-callout
312 .king-addons-pull-quotes-callouts__inner {
313 justify-content: flex-end;
314 }
315
316 .king-addons-pqcb-align-mobile-left
317 .king-addons-pull-quotes-callouts--type-pull-quote
318 .king-addons-pull-quotes-callouts__inner,
319 .king-addons-pqcb-align-mobile-left
320 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-top
321 .king-addons-pull-quotes-callouts__inner,
322 .king-addons-pqcb-align-mobile-left
323 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-none
324 .king-addons-pull-quotes-callouts__inner {
325 align-items: flex-start;
326 }
327
328 .king-addons-pqcb-align-mobile-center
329 .king-addons-pull-quotes-callouts--type-pull-quote
330 .king-addons-pull-quotes-callouts__inner,
331 .king-addons-pqcb-align-mobile-center
332 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-top
333 .king-addons-pull-quotes-callouts__inner,
334 .king-addons-pqcb-align-mobile-center
335 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-none
336 .king-addons-pull-quotes-callouts__inner {
337 align-items: center;
338 }
339
340 .king-addons-pqcb-align-mobile-right
341 .king-addons-pull-quotes-callouts--type-pull-quote
342 .king-addons-pull-quotes-callouts__inner,
343 .king-addons-pqcb-align-mobile-right
344 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-top
345 .king-addons-pull-quotes-callouts__inner,
346 .king-addons-pqcb-align-mobile-right
347 .king-addons-pull-quotes-callouts--type-callout.king-addons-pull-quotes-callouts--icon-none
348 .king-addons-pull-quotes-callouts__inner {
349 align-items: flex-end;
350 }
351
352 .king-addons-pqcb-align-mobile-center .king-addons-pull-quotes-callouts__label {
353 align-self: center;
354 }
355
356 .king-addons-pqcb-align-mobile-right .king-addons-pull-quotes-callouts__label {
357 align-self: flex-end;
358 }
359 }
360
361 .king-addons-pull-quotes-callouts__mark {
362 position: absolute;
363 top: 0;
364 left: 0;
365 font-size: var(--ka-pqcb-mark-size);
366 color: var(--ka-pqcb-mark-color);
367 opacity: var(--ka-pqcb-mark-opacity);
368 line-height: 1;
369 transform: translate(var(--ka-pqcb-mark-offset-x), var(--ka-pqcb-mark-offset-y))
370 scale(var(--ka-pqcb-mark-scale));
371 pointer-events: none;
372 }
373
374 .king-addons-pull-quotes-callouts--mark-mode-inline .king-addons-pull-quotes-callouts__mark {
375 position: static;
376 align-self: flex-start;
377 transform: translate(var(--ka-pqcb-mark-offset-x), var(--ka-pqcb-mark-offset-y))
378 scale(var(--ka-pqcb-mark-scale));
379 }
380
381 .king-addons-pull-quotes-callouts--mark-mode-watermark .king-addons-pull-quotes-callouts__mark {
382 top: 50%;
383 left: 50%;
384 transform: translate(-50%, -50%)
385 translate(var(--ka-pqcb-mark-offset-x), var(--ka-pqcb-mark-offset-y))
386 scale(var(--ka-pqcb-mark-scale));
387 }
388
389 .king-addons-pull-quotes-callouts--mark-hidden .king-addons-pull-quotes-callouts__mark {
390 display: none;
391 }
392
393 .king-addons-pull-quotes-callouts--mark-classic .king-addons-pull-quotes-callouts__mark {
394 font-family: "Georgia", "Times New Roman", serif;
395 font-weight: 700;
396 }
397
398 .king-addons-pull-quotes-callouts--mark-modern .king-addons-pull-quotes-callouts__mark {
399 font-weight: 800;
400 letter-spacing: -0.02em;
401 }
402
403 .king-addons-pull-quotes-callouts--mark-minimal .king-addons-pull-quotes-callouts__mark {
404 font-weight: 400;
405 }
406
407 .king-addons-pull-quotes-callouts__text {
408 margin: 0;
409 color: var(--ka-pqcb-text-color);
410 }
411
412 .king-addons-pull-quotes-callouts__text p {
413 margin: 0 0 12px;
414 }
415
416 .king-addons-pull-quotes-callouts__text p:last-child {
417 margin-bottom: 0;
418 }
419
420 .king-addons-pull-quotes-callouts__footer {
421 display: flex;
422 flex-wrap: wrap;
423 gap: 6px 12px;
424 margin-top: var(--ka-pqcb-gap);
425 color: var(--ka-pqcb-source-color);
426 }
427
428 .king-addons-pull-quotes-callouts__author {
429 color: var(--ka-pqcb-author-color);
430 font-weight: 600;
431 }
432
433 .king-addons-pull-quotes-callouts__source {
434 color: var(--ka-pqcb-source-color);
435 }
436
437 .king-addons-pull-quotes-callouts__link {
438 display: inline-flex;
439 align-items: center;
440 gap: 6px;
441 color: var(--ka-pqcb-link-color);
442 font-weight: 600;
443 text-decoration: none;
444 }
445
446 .king-addons-pull-quotes-callouts__link:hover {
447 text-decoration: underline;
448 }
449
450 .king-addons-pull-quotes-callouts__separator {
451 color: var(--ka-pqcb-source-color);
452 }
453
454 .king-addons-pull-quotes-callouts--preset-classic-accent {
455 --ka-pqcb-accent-size: 4px;
456 --ka-pqcb-accent-color: #0f172a;
457 }
458
459 .king-addons-pull-quotes-callouts--preset-classic-accent .king-addons-pull-quotes-callouts__text {
460 font-style: italic;
461 }
462
463 .king-addons-pull-quotes-callouts--preset-centered-mark {
464 text-align: center;
465 --ka-pqcb-mark-size: 56px;
466 --ka-pqcb-mark-opacity: 0.25;
467 }
468
469 .king-addons-pull-quotes-callouts--preset-centered-mark
470 .king-addons-pull-quotes-callouts__label {
471 align-self: center;
472 }
473
474 .king-addons-pull-quotes-callouts--preset-modern-card {
475 --ka-pqcb-bg: #0f172a;
476 --ka-pqcb-text-color: #f8fafc;
477 --ka-pqcb-author-color: #f1f5f9;
478 --ka-pqcb-source-color: #cbd5f5;
479 --ka-pqcb-border-width: 0px;
480 --ka-pqcb-link-color: #38bdf8;
481 }
482
483 .king-addons-pull-quotes-callouts--preset-modern-card {
484 box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
485 }
486
487 .king-addons-pull-quotes-callouts--preset-minimal-inline {
488 --ka-pqcb-bg: transparent;
489 --ka-pqcb-border-width: 0px;
490 --ka-pqcb-padding: 0px;
491 --ka-pqcb-mark-opacity: 0.3;
492 }
493
494 .king-addons-pull-quotes-callouts--preset-minimal-inline .king-addons-pull-quotes-callouts__text {
495 font-style: italic;
496 }
497
498 .king-addons-pull-quotes-callouts--preset-highlight-strip {
499 --ka-pqcb-bg: #fff7ed;
500 --ka-pqcb-border-width: 0px;
501 --ka-pqcb-accent-size: 6px;
502 --ka-pqcb-accent-color: #f97316;
503 }
504
505 .king-addons-pull-quotes-callouts--preset-side-callout {
506 --ka-pqcb-bg: #f8fafc;
507 --ka-pqcb-border-color: #e2e8f0;
508 --ka-pqcb-label-bg: #e2e8f0;
509 }
510
511 .king-addons-pull-quotes-callouts--preset-badge-callout {
512 --ka-pqcb-bg: #f0f9ff;
513 --ka-pqcb-border-color: #bae6fd;
514 --ka-pqcb-label-bg: #0ea5e9;
515 --ka-pqcb-label-color: #ffffff;
516 --ka-pqcb-accent-size: 0px;
517 }
518
519 .king-addons-pull-quotes-callouts--preset-editorial-watermark {
520 --ka-pqcb-mark-size: 120px;
521 --ka-pqcb-mark-opacity: 0.12;
522 }
523
524 .king-addons-pull-quotes-callouts--preset-editorial-watermark
525 .king-addons-pull-quotes-callouts__text {
526 font-weight: 600;
527 }
528
529 @media (max-width: 767px) {
530 .king-addons-pull-quotes-callouts {
531 --ka-pqcb-padding: 20px;
532 }
533
534 .king-addons-pull-quotes-callouts--type-callout .king-addons-pull-quotes-callouts__inner {
535 flex-direction: column;
536 }
537 }
538