PluginProbe
BerqWP – All-In-One Optimization for Core Web Vitals, Cache, CDN, Images, CSS & JavaScript / 1.9.5
BerqWP – All-In-One Optimization for Core Web Vitals, Cache, CDN, Images, CSS & JavaScript v1.9.5
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.scss

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

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