PluginProbe
BerqWP – All-In-One Optimization for Core Web Vitals, Cache, CDN, Images, CSS & JavaScript / 1.9.3
BerqWP – All-In-One Optimization for Core Web Vitals, Cache, CDN, Images, CSS & JavaScript v1.9.3
4.1.16 4.1.15 4.1.14 4.1.13 4.1.12 4.1.11 4.1.10 4.0.30 4.0.29 4.0.28 4.0.27 4.0.26 4.0.24 4.0.25 4.0.23 4.0.22 4.0.21 4.0.19 4.0.18 4.0.17 4.0.16 1.9.3 1.9.4 1.9.5 1.9.6 All 170 releases
searchpro / admin / css / style.css

style.css in BerqWP – All-In-One Optimization for Core Web Vitals, Cache, CDN, Images, CSS & JavaScript 1.9.3, at admin/css/style.css

860 lines 15.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .berqwp-dashbaord {
2 font-family: "Source Sans 3", sans-serif !important;
3 margin: 20px 0px;
4 background-color: #fff;
5 border-radius: 10px;
6 overflow: hidden;
7 }
8
9 .berqwp-header {
10 padding: 16px 20px;
11 display: flex;
12 align-items: center;
13 justify-content: space-between;
14 background: #f7faff;
15 }
16
17 .berqwp-header img {
18 height: 40px;
19 width: auto;
20 }
21
22 a.berqwp-support {
23 color: #465774;
24 font-size: 16px;
25 font-style: normal;
26 font-weight: 400;
27 line-height: normal;
28 display: flex;
29 align-items: center;
30 gap: 5px;
31 }
32
33 .berqwp-dashbaord a {
34 text-decoration: none;
35 }
36
37 .berqwp-header-right {
38 display: flex;
39 align-items: center;
40 gap: 20px;
41 }
42
43 .berqwp-upgrade {
44 color: #FFF;
45 font-size: 16px;
46 font-style: normal;
47 font-weight: 600;
48 background: #1F71FF;
49 display: flex;
50 align-items: center;
51 gap: 5px;
52 padding: 12px 20px;
53 }
54
55 .berqwp-dashbord-body {
56 display: flex;
57 flex-wrap: wrap;
58 }
59
60 .berqwp-tabs {
61 width: 300px;
62 background: #0D2958;
63 }
64
65 .berqwp-tab {
66 padding: 18px 20px;
67 font-size: 16px;
68 border-bottom: 1px solid rgba(255, 255, 255, 0.1294117647);
69 cursor: pointer;
70 color: #fff;
71 font-weight: 500;
72 }
73
74 .berqwp-tab-content {
75 width: calc(100% - 300px);
76 padding: 0 25px;
77 padding-top: 25px;
78 height: 100vh;
79 overflow-y: scroll;
80 overflow-x: hidden;
81 background: #F7FAFF;
82 }
83
84 h2.berq-tab-title {
85 color: #465774;
86 font-size: 25px;
87 font-style: normal;
88 font-weight: 600;
89 line-height: normal;
90 margin: 0;
91 padding-bottom: 15px;
92 border-bottom: 1px solid #E8F0FF;
93 margin-bottom: 20px;
94 }
95
96 .berq-info-box {
97 border: 1px solid rgb(228, 237, 251);
98 background: #FFF;
99 box-shadow: 0px 3px 5px 0px rgba(83, 113, 167, 0.05);
100 padding: 16px;
101 margin-bottom: 20px;
102 border-radius: 8px;
103 }
104
105 h3.berq-box-title {
106 color: #0C2D66;
107 font-size: 18px;
108 font-style: normal;
109 font-weight: 600;
110 line-height: normal;
111 margin: 0;
112 margin-bottom: 16px;
113 }
114
115 .berq-box-content p {
116 margin: 0;
117 font-size: 16px;
118 color: #465774;
119 }
120
121 .berq-dual-box > div {
122 flex: 1;
123 }
124
125 .berq-dual-box {
126 display: flex;
127 gap: 20px;
128 }
129
130 p.cached-pages {
131 color: #465774;
132 font-size: 68px;
133 font-style: normal;
134 font-weight: 600;
135 line-height: 100%;
136 }
137
138 a.berq-btn {
139 background: #5057FF;
140 border-radius: 6px;
141 padding: 10px 20px;
142 color: #FFF;
143 font-size: 15px;
144 font-style: normal;
145 display: block;
146 line-height: normal;
147 width: -moz-fit-content;
148 width: fit-content;
149 margin-bottom: 5px;
150 }
151 a.berq-btn:hover {
152 background-color: #3d44d9;
153 color: #fff;
154 text-decoration: none;
155 }
156
157 label.berq-check {
158 margin-top: 16px;
159 display: block;
160 color: #465774;
161 font-size: 15px;
162 font-style: normal;
163 font-weight: 600;
164 line-height: normal;
165 width: -moz-fit-content;
166 width: fit-content;
167 -webkit-user-select: none;
168 -moz-user-select: none;
169 -o-user-select: none;
170 user-select: none;
171 }
172
173 button.berqwp-save {
174 border: none;
175 display: flex;
176 align-items: center;
177 gap: 5px;
178 font-size: 15px;
179 padding: 12px 20px;
180 text-transform: uppercase;
181 color: #fff;
182 background: #5057FF;
183 border-radius: 6px;
184 margin-bottom: 20px;
185 cursor: pointer;
186 }
187 button.berqwp-save:hover {
188 background-color: #3d44d9;
189 color: #fff;
190 text-decoration: none;
191 }
192
193 .berqwp-tab.active {
194 background: #f7faff;
195 color: #0d2958;
196 box-shadow: inset 5px 0px 0px 0px #1f72ff;
197 border-bottom: none;
198 }
199
200 p.berq-cache-lifespan {
201 margin-top: 16px;
202 }
203
204 .berqwp-webp-content {
205 display: flex;
206 }
207
208 .berqwp-webp-chart {
209 width: 40%;
210 }
211
212 table.berq-image-settings {
213 margin-top: 20px;
214 }
215
216 .berq-progress-none {
217 width: 240px;
218 height: 240px;
219 border-radius: 50%;
220 background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(#cadeff 75%, #cadeff 0);
221 }
222
223 .berq-progress-circles {
224 display: flex;
225 align-items: center;
226 gap: 16px;
227 position: relative;
228 flex-direction: column;
229 font-size: 13px;
230 }
231
232 .berq-progress-optimized-images {
233 width: 200px;
234 height: 200px;
235 border-radius: 50%;
236 background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(#b6b9b6 65%, #e8e8e8 0);
237 }
238
239 .berq-speed-score {
240 background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(#b6b9b6 65%, #e8e8e8 0);
241 width: 150px;
242 height: 150px;
243 border-radius: 50%;
244 display: flex;
245 justify-content: center;
246 align-items: center;
247 font-size: 50px;
248 font-weight: bold;
249 color: #2db91e;
250 transition: all 1s ease;
251 position: relative;
252 }
253
254 .berq-info-box.before-after-comparision {
255 display: flex;
256 justify-content: center;
257 flex-wrap: wrap;
258 gap: 15px;
259 }
260 .berq-info-box.before-after-comparision h3 {
261 width: 100%;
262 }
263
264 .berq-info-box.before-after-comparision h4 {
265 text-align: center;
266 font-size: 18px;
267 margin-top: 0;
268 }
269
270 .berq-speed-score svg {
271 position: absolute;
272 top: -20px;
273 right: -20px;
274 }
275
276 .berq-info-box.before-after-comparision p.website-url {
277 text-align: center;
278 margin-top: 5px;
279 }
280
281 .berq-info-box.before-after-comparision p.device-type {
282 text-align: center;
283 margin-bottom: 0;
284 }
285
286 .berq-info-box.before-after-comparision > div {
287 padding: 25px;
288 border: 1px solid #dae8ff;
289 border-radius: 4px;
290 display: flex;
291 flex-direction: column;
292 align-items: center;
293 width: 100%;
294 max-width: 48%;
295 position: relative;
296 }
297
298 .berqw-sandbox {
299 background-color: #ffd200;
300 padding: 5px 10px;
301 position: absolute;
302 display: block;
303 top: 10px;
304 z-index: 99;
305 border-radius: 40px;
306 font-weight: bold;
307 color: #ac7808;
308 }
309
310 .with-berqwp.cache-not-deleted::before {
311 content: "Cache not detected";
312 display: block;
313 position: absolute;
314 top: -30px;
315 width: 100%;
316 max-width: 100%;
317 text-align: center;
318 background: red;
319 color: #fff;
320 font-size: 12px;
321 padding: 4px 0px;
322 border-radius: 3px;
323 }
324
325 .berq-optimized-images::before {
326 content: "";
327 width: 15px;
328 height: 15px;
329 background: #2763c9;
330 display: block;
331 }
332
333 .berq-optimized-images,
334 .berq-unoptimized-images {
335 display: flex;
336 width: 60%;
337 gap: 5px;
338 align-items: center;
339 }
340
341 .berq-unoptimized-images::before {
342 content: "";
343 width: 15px;
344 height: 15px;
345 background: #cadeff;
346 display: block;
347 }
348
349 .berqwp-webp {
350 margin-bottom: 30px;
351 }
352
353 .berq-progress-optimized-images {
354 display: flex;
355 justify-content: center;
356 align-items: center;
357 font-size: 40px;
358 font-weight: bold;
359 }
360
361 .berq-img-action {
362 display: flex;
363 align-items: center;
364 gap: 5px;
365 margin-top: 20px;
366 }
367
368 .berq-img-action > div {
369 padding: 10px 20px;
370 background: #1F71FF;
371 font-size: 15px;
372 color: #fff;
373 cursor: pointer;
374 }
375
376 .berq-img-action > .berq-delete-webp {
377 background: rgba(255, 64, 64, 0.12);
378 color: #FF4040;
379 }
380
381 .lds-ring {
382 display: inline-block;
383 position: relative;
384 width: 30px;
385 height: 30px;
386 }
387
388 .lds-ring div {
389 box-sizing: border-box;
390 display: block;
391 position: absolute;
392 width: 25px;
393 height: 25px;
394 margin: 8px;
395 border: 4px solid #1aaf24;
396 border-radius: 50%;
397 animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
398 border-color: #1aaf24 transparent transparent transparent;
399 }
400
401 .lds-ring div:nth-child(1) {
402 animation-delay: -0.45s;
403 }
404
405 .lds-ring div:nth-child(2) {
406 animation-delay: -0.3s;
407 }
408
409 .lds-ring div:nth-child(3) {
410 animation-delay: -0.15s;
411 }
412
413 @keyframes lds-ring {
414 0% {
415 transform: rotate(0deg);
416 }
417 100% {
418 transform: rotate(360deg);
419 }
420 }
421 .berq-generating-images {
422 width: 30px;
423 height: 30px;
424 display: none;
425 position: absolute;
426 right: 30px;
427 }
428
429 .berq-optimization-guide {
430 background: #10326b;
431 font-family: "Source Sans 3", sans-serif !important;
432 padding: 25px;
433 border-radius: 10px;
434 box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
435 }
436
437 .berq-optimization-guide p.p2 {
438 margin: 0;
439 font-size: 20px;
440 font-weight: 400;
441 color: #ffffff;
442 }
443
444 .berq-optimization-guide p.p3 {
445 margin: 0;
446 font-size: 18px;
447 margin-top: 15px;
448 color: rgba(255, 255, 255, 0.8509803922);
449 }
450
451 .berq-optimization-guide p.text {
452 color: rgba(255, 255, 255, 0.7411764706);
453 font-size: 15px;
454 }
455
456 .berqwp-tab p {
457 margin: 0;
458 margin-top: 10px;
459 font-size: 13px;
460 opacity: 0.7;
461 font-weight: normal;
462 }
463
464 .berqwp-header::before {
465 content: "";
466 background: #0d2958;
467 position: absolute;
468 width: 300px;
469 height: 102%;
470 left: 0;
471 top: 0;
472 z-index: 0;
473 }
474
475 .berqwp-header {
476 position: relative;
477 }
478
479 .berqwp-header img {
480 z-index: 9;
481 }
482
483 .berq-info-box.unlock-js-optimization {
484 background-color: #1bc0a5;
485 color: #fff;
486 border-radius: 10px;
487 padding: 30px 20px;
488 }
489
490 .berq-info-box.unlock-js-optimization h3 {
491 font-size: 18px;
492 margin: 0;
493 color: #fff;
494 }
495
496 .berq-info-box.unlock-js-optimization p {
497 color: rgba(255, 255, 255, 0.8901960784);
498 font-size: 15px;
499 }
500
501 .berq-info-box.unlock-js-optimization a.upgrade-btn, .berqwp-header a.upgrade-btn {
502 background-image: linear-gradient(45deg, #5521ff, #05b9ff);
503 font-size: 14px;
504 color: #ffffff;
505 padding: 15px 20px;
506 display: inline-block;
507 border-radius: 5px;
508 }
509
510 .berqwp-tab-content p a {
511 text-decoration: underline;
512 color: #1f72ff;
513 }
514
515 .berq-info-box textarea {
516 margin-top: 16px;
517 display: block;
518 color: #465774;
519 font-size: 15px;
520 width: 100%;
521 }
522
523 .berq-info-box.guide p, .berq-info-box.guide a {
524 color: #fff;
525 }
526
527 .berq-info-box.guide {
528 background-color: #4567a1;
529 }
530
531 .slider.slider-horizontal {
532 width: calc(100% - 100px) !important;
533 margin-bottom: 10px !important;
534 margin-top: 30px;
535 }
536
537 .optimzation-slider .slider-track {
538 margin-left: -30px;
539 margin-right: -30px;
540 width: calc(100% + 60px) !important;
541 height: 3px !important;
542 margin-top: -1.5px !important;
543 background-color: #c2d9ff;
544 background-image: none;
545 box-shadow: none;
546 border-radius: 0;
547 z-index: 1;
548 }
549
550 .optimzation-slider .slider-selection.tick-slider-selection {
551 max-width: calc(100% - 30px);
552 min-width: 30px;
553 }
554
555 .optimzation-slider {
556 margin: 0 30px;
557 }
558
559 .optimzation-slider .slider-tick.round {
560 background-color: #D2E3FF;
561 background-image: none;
562 box-shadow: none;
563 opacity: 1;
564 border: none;
565 opacity: 0.7 !important;
566 width: 3px;
567 border-radius: 0;
568 margin-left: 0px !important;
569 }
570
571 .optimzation-slider .slider-tick.round.in-selection {
572 background-image: none;
573 box-shadow: none;
574 }
575
576 .optimzation-slider .slider-selection.tick-slider-selection {
577 background-color: #1F71FF !important;
578 background-image: none;
579 }
580
581 .optimzation-slider .slider-handle.min-slider-handle.round {
582 background: #1F71FF !important;
583 z-index: 9;
584 }
585
586 .optimzation-slider .slider.slider-horizontal .slider-tick-label-container {
587 margin-top: -30px !important;
588 }
589
590 .optimzation-slider .slider-tick-label {
591 font-size: 15px;
592 color: #6e92cf;
593 font-weight: 500;
594 }
595
596 .optimzation-slider .slider-tick-label.label-in-selection.label-is-selection {
597 color: #315188;
598 }
599
600 .optimzation-slider .tooltip-inner {
601 padding: 20px;
602 font-size: 13px;
603 text-align: left;
604 max-width: 200px !important;
605 min-width: 200px !important;
606 white-space: pre-wrap !important;
607 z-index: 99;
608 border-radius: 0;
609 }
610
611 .optimzation-slider .tooltip-inner .tooltip-content {
612 color: rgba(255, 255, 255, 0.7607843137);
613 }
614
615 .slider-tick-label .bq_tooltip {
616 width: 200px;
617 background-color: #000;
618 opacity: 0.9;
619 padding: 20px;
620 display: inline-block;
621 white-space: break-spaces;
622 font-size: 13px;
623 font-weight: 400;
624 color: #fff;
625 top: 60px;
626 position: absolute;
627 left: 50%;
628 text-align: left;
629 opacity: 0;
630 visibility: hidden;
631 /* transform: translateX(-50%); */
632 }
633
634 .slider-tick-label:hover .bq_tooltip {
635 opacity: 0.9;
636 visibility: visible;
637 }
638
639 .slider .bs-tooltip-top .tooltip-inner, .slider .bs-tooltip-bottom .tooltip-inner {
640 left: -20% !important;
641 }
642
643 .slider .tooltip.bs-tooltip-top .arrow, .slider .tooltip.bs-tooltip-bottom .arrow {
644 left: 30px !important;
645 }
646
647 #berqwp-intro {
648 background-color: #F7FAFF;
649 border-radius: 20px;
650 border: 1px solid #E6E6E6;
651 display: flex;
652 flex-direction: column;
653 justify-content: center;
654 align-items: center;
655 -webkit-font-smoothing: antialiased;
656 padding: 70px 20px;
657 }
658 #berqwp-intro h2.title {
659 font-size: 47px;
660 text-align: center;
661 color: #222222;
662 line-height: normal;
663 max-width: 730px;
664 font-weight: 500;
665 text-transform: capitalize;
666 margin: 0;
667 margin-bottom: 75px;
668 }
669 #berqwp-intro form.license-verification {
670 display: flex;
671 align-items: center;
672 gap: 10px;
673 justify-content: center;
674 }
675 #berqwp-intro form.license-verification input[type=password] {
676 font-size: 18px;
677 border-radius: 6px;
678 padding: 16px 24px;
679 line-height: 1;
680 background: #fff;
681 border: 1px solid #D7D7D7;
682 width: 280px;
683 }
684 #berqwp-intro form.license-verification input[type=password]::-moz-placeholder {
685 color: #928E8E;
686 }
687 #berqwp-intro form.license-verification input[type=password]::placeholder {
688 color: #928E8E;
689 }
690 #berqwp-intro form.license-verification input[type=submit] {
691 border: none;
692 color: #fff;
693 background: #5057FF;
694 align-self: stretch;
695 padding: 20px 40px;
696 font-size: 18px;
697 font-weight: 400;
698 border-radius: 6px;
699 line-height: 0;
700 cursor: pointer;
701 }
702 #berqwp-intro form.license-verification input[type=submit][disabled] {
703 opacity: 0.8;
704 }
705 #berqwp-intro p.license-msg {
706 margin: 0;
707 font-size: 15px;
708 color: #676464;
709 margin-top: 10px;
710 }
711 #berqwp-intro .cta-btns {
712 display: flex;
713 gap: 10px;
714 justify-content: center;
715 align-items: center;
716 margin-top: 60px;
717 }
718 #berqwp-intro .cta-btns a.btn {
719 background: #1F71FF;
720 border-radius: 6px;
721 display: flex;
722 align-items: center;
723 gap: 10px;
724 color: #fff;
725 padding: 15px 30px;
726 font-size: 18px;
727 text-decoration: none;
728 }
729 #berqwp-intro .cta-btns a.btn:hover {
730 background-color: #2067e3;
731 }
732
733 p.below-settings-panel {
734 text-align: center;
735 font-size: 16px;
736 color: #465774;
737 }
738
739 .optimize-post-types {
740 margin-top: 16px;
741 }
742
743 .slider.slider-horizontal .slider-tick-label-container .slider-tick-label:last-child {
744 position: relative;
745 }
746
747 .slider.slider-horizontal .slider-tick-label-container .slider-tick-label:last-child::after {
748 content: "Best Performance";
749 background: #33b133;
750 font-size: 12px;
751 width: 110px;
752 text-align: center;
753 padding: 4px 10px;
754 border-radius: 40px;
755 color: #fff;
756 font-weight: 400;
757 position: absolute;
758 display: block;
759 transform: translate3d(0, -50px, 0px);
760 left: calc(50% - 55px);
761 }
762
763 .cached-pages-bar {
764 background-color: #e5eeff;
765 height: 15px;
766 border-radius: 10px;
767 margin-top: 10px;
768 overflow: hidden;
769 }
770 .cached-pages-bar .progress-bar {
771 height: 15px;
772 width: 0%;
773 max-width: 100%;
774 }
775
776 .optimized-pages table {
777 width: 100%;
778 margin-top: 20px;
779 color: #465774;
780 }
781
782 div.dt-container.dt-empty-footer tbody > tr:last-child > *, table.dataTable > tbody > tr:not(:last-child) {
783 border-bottom: 1px solid #dae8ff;
784 }
785
786 table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
787 padding: 10px;
788 border-bottom: 1px solid #dae8ff;
789 }
790
791 div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
792 background: #5057ff !important;
793 border: none;
794 font-size: 15px;
795 padding: 6px 13px;
796 color: #fff !important;
797 }
798
799 div.dt-container .dt-paging .dt-paging-button {
800 background-color: #fefefe;
801 border: none;
802 font-size: 15px;
803 padding: 6px 13px;
804 }
805
806 div.dt-container .dt-paging .dt-paging-button:hover {
807 background: #e8e9ff !important;
808 color: #2d2d2d !important;
809 border: none;
810 font-size: 15px;
811 padding: 6px 13px;
812 }
813
814 .bwp_feedback a:last-child {
815 display: block !important;
816 text-align: end !important;
817 }
818
819 .berqwp-notification {
820 display: flex;
821 margin: 20px 0;
822 background-color: #333333;
823 color: #fff;
824 padding: 15px 16px;
825 border-radius: 6px;
826 gap: 20px;
827 }
828 .berqwp-notification .icon svg {
829 width: 24px;
830 fill: #fff;
831 }
832 .berqwp-notification.warning {
833 background-color: #fff074;
834 color: #7b6904;
835 }
836 .berqwp-notification.warning .icon svg {
837 fill: #7b6904;
838 }
839
840 span.bwp-cache-tag {
841 padding: 6px 12px;
842 text-align: center;
843 background: #7b7b7b;
844 display: block;
845 color: #fff;
846 font-size: 14px;
847 border-radius: 50px;
848 line-height: 1;
849 width: -moz-fit-content;
850 width: fit-content;
851 white-space: nowrap;
852 }
853 span.bwp-cache-tag.part-completed {
854 background-color: #ffd171;
855 color: #8b5f04;
856 }
857 span.bwp-cache-tag.completed {
858 background-color: #beffab;
859 color: #008d31;
860 }/*# sourceMappingURL=style.css.map */