PluginProbe
SiteLock Security – WP Hardening, Login Security & Malware Scans / trunk
SiteLock Security – WP Hardening, Login Security & Malware Scans vtrunk
trunk 1.2.1 2.0 2.1.0 2.1.1 3.0.0 3.1.0 3.1.1 3.1.2 3.2.1 3.3.0 3.4.0 4.0.0 4.0.1 4.0.2 4.0.3 4.0.4 4.0.5 4.1.0 4.2.0 4.2.1 4.2.2 4.2.3 4.2.4 5.0.0 All 31 releases
sitelock / admin / css / style.css

style.css in SiteLock Security – WP Hardening, Login Security & Malware Scans trunk, at admin/css/style.css

1,327 lines 25.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .sitelock-wrapper {
2 font-family: 'Source Sans 3';
3 color: #000000;
4 }
5
6 #dolly {
7 float: none !important;
8 text-align: right;
9 }
10
11 .sitelock-admin-notice-custom {
12 margin: 10px 15px 0 10px;
13 }
14
15 @media (max-width: 782px) {
16 .sitelock-admin-notice-custom {
17 margin: 0 10px 10px 0;
18 }
19 }
20
21 .sitelock-wrapper {
22 button,
23 a {
24 border: 0;
25 cursor: pointer;
26 text-decoration: none;
27 box-sizing: border-box;
28 }
29
30 a {
31 box-shadow: none;
32 display: block;
33 }
34
35 a:hover {
36 text-decoration: none;
37 }
38
39 a:focus {
40 box-shadow: unset;
41 outline: unset;
42 }
43
44 input,
45 select {
46 padding-left: 8px;
47 border: 1px solid #9e9e9e;
48 }
49
50 input:not([type='radio']):not([type='checkbox']),
51 select {
52 width: 100%;
53 }
54
55 input[type='checkbox'] {
56 width: 18px;
57 height: 18px;
58 }
59
60 input[type='checkbox']:checked::before {
61 content: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2210%22%20viewBox%3D%220%200%2014%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M13.7036%201.71344L5.58885%209.70607C5.39732%209.89429%205.13781%2010%204.86726%2010C4.59671%2010%204.3372%209.89429%204.14568%209.70607L0.296431%205.91482C0.106134%205.7261%20-0.000459862%205.47079%201.49138e-06%205.2048C0.000462845%204.93882%200.107942%204.68386%200.298892%204.49578C0.489842%204.3077%200.748694%204.20184%201.01874%204.20139C1.28878%204.20093%201.548%204.30592%201.7396%204.49336L4.65745%207.36741C4.7131%207.42221%204.78857%207.453%204.86726%207.453C4.94595%207.453%205.02143%207.42221%205.07707%207.36741L12.2604%200.291973C12.452%200.104538%2012.7112%20-0.000452946%2012.9813%201.46896e-06C13.2513%200.000455884%2013.5102%200.106319%2013.7011%200.294397C13.8921%200.482476%2013.9995%200.737434%2014%201.00342C14.0005%201.2694%2013.8939%201.52472%2013.7036%201.71344Z%22%20fill%3D%22white%22/%3E%3C/svg%3E');
62 background-color: #2161CC;
63 border-radius: 4px;
64 padding: 1px;
65 width: 18px;
66 height: 18px;
67 margin: -0.989px;
68 }
69
70 input[type='radio'] {
71 width: 20px;
72 height: 20px;
73 }
74
75 input[type='radio']:checked {
76 border: 1px solid #2161CC;
77 }
78
79 input[type='radio']:checked::before {
80 background-color: #2161CC;
81 padding: 6px;
82 }
83
84 .btn-primary {
85 font-weight: 600;
86 font-size: 14px;
87 padding: 7px 0;
88 text-align: center;
89 background-color: #011858;
90 color: #FFFFFF;
91 display: inline-flex;
92 justify-content: center;
93 align-items: center;
94 border-radius: 120px;
95 }
96
97 .btn-primary:hover,
98 .btn-primary:focus {
99 color: white;
100 }
101
102 .btn-secondary {
103 font-weight: 600;
104 font-size: 14px;
105 text-align: center;
106 padding: 6px 0;
107 background-color: #FFFFFF;
108 color: #000000;
109 border: 2px solid #71C6FF;
110 border-radius: 120px;
111 cursor: pointer;
112 display: inline-flex;
113 align-items: center;
114 justify-content: center;
115 }
116
117 .dark {
118 background: #222222;
119 }
120
121 .green {
122 background: #00aa6b;
123 }
124
125 .clock {
126 background-image: url('../images/awaiting.svg');
127 }
128
129 .red {
130 background: #db1010;
131 }
132
133 .redAlert {
134 background-image: url('../images/red-alert.svg');
135 width: 18px !important;
136 height: 18px !important;
137 background-repeat: no-repeat;
138 }
139
140 .yellow {
141 background: #ffd601;
142 }
143
144 .yellowAlert {
145 background-image: url('../images/yellow-alert.svg');
146 width: 18px !important;
147 height: 18px !important;
148 background-repeat: no-repeat;
149 }
150
151 .text-red {
152 color: #db1010;
153 }
154
155 .text-blue {
156 color: #2161CC;
157 }
158
159 .border-blue {
160 border: 1px solid #a2beeb;
161 }
162
163 .activation-required {
164 background-image: url('../images/require-activation.svg');
165 background-repeat: no-repeat;
166 width: 18px !important;
167 height: 18px !important;
168 }
169
170 .logo-header {
171 font-weight: 400;
172 font-size: 30px;
173 line-height: 24px;
174 letter-spacing: 0px;
175 }
176
177 .page-tabs-sec {
178 width: 100%;
179 position: relative;
180 }
181
182 #page-tabs-wrapper:not(.collapsed) .toggle,
183 #page-tabs-wrapper:not(.collapsed) .dropdown {
184 display: none;
185 }
186
187 #page-tabs-wrapper.collapsed ul {
188 opacity: 0;
189 pointer-events: none;
190 }
191
192 #page-tabs-wrapper .toggle {
193 display: inline-block;
194 position: absolute;
195 top: 0;
196 left: 0;
197 font-size: 1rem;
198 white-space: nowrap;
199 line-height: 1;
200 padding-bottom: 0.5rem;
201 height: 100%;
202 }
203
204 #page-tabs-wrapper .toggle::after {
205 content: '';
206 height: 2px;
207 background-color: var(--primary-color);
208 position: absolute;
209 bottom: 0;
210 left: 0;
211 display: block;
212 width: 100%;
213 z-index: 20;
214 }
215
216 #page-tabs-wrapper .toggle.active .angle {
217 transform: rotate(180deg);
218 }
219
220 #page-tabs-wrapper .dropdown {
221 z-index: 1001;
222 min-width: 82%;
223 border-top-left-radius: 0 !important;
224 border-top-right-radius: 0 !important;
225 border-top: 0 !important;
226 max-width: 100%;
227 position: absolute;
228 top: 100%;
229 left: 0;
230 padding: 0.75rem 0.5rem;
231 }
232
233 #page-tabs-wrapper .dropdown-item {
234 padding: 0.375rem 0.5rem;
235 display: block;
236 text-align: left;
237 width: 100%;
238 font-size: 1rem;
239 line-height: 1;
240 cursor: pointer;
241 border-radius: 0.25rem;
242 }
243
244 #page-tabs-wrapper .dropdown-item:hover {
245 background-color: #f5f5f5;
246 }
247
248 #page-tabs-wrapper ul {
249 display: inline-flex;
250 }
251
252 #page-tabs-wrapper::after {
253 z-index: 10;
254 content: '';
255 height: 2px;
256 position: absolute;
257 bottom: 2px;
258 left: 0;
259 display: block;
260 width: 100%;
261 --tw-bg-opacity: 1;
262 background-color: rgb(221 221 221 / var(--tw-bg-opacity));
263 }
264
265 #page-tabs-wrapper .count {
266 margin-left: 0.5rem;
267 }
268
269 #page-tabs-wrapper #page-tabs li {
270 display: inline-block;
271 vertical-align: bottom;
272 position: relative;
273 font-size: 1rem;
274 white-space: nowrap;
275 line-height: 1;
276 padding-bottom: 0.75rem;
277 margin-bottom: 0 !important;
278 margin-right: 1.5rem;
279 }
280
281 #page-tabs-wrapper #page-tabs li:not(.compact) {
282 font-size: 1.125rem;
283 /* md:text-lg */
284 }
285
286 #page-tabs-wrapper #page-tabs li:not(.compact):not(:last-child) {
287 margin-right: 2rem;
288 /* sm:mr-8 */
289 }
290
291 #page-tabs-wrapper #page-tabs li:not(.compact):not(:last-child) {
292 margin-right: 2.5rem;
293 /* md:mr-10 */
294 }
295
296 #page-tabs-wrapper #page-tabs li::after {
297 content: '';
298 height: 2px;
299 position: absolute;
300 bottom: 1px;
301 left: 0;
302 z-index: 20;
303 display: block;
304 width: 100%;
305 background-color: transparent;
306 transition-property: all;
307 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
308 transition-duration: 150ms;
309 }
310
311 #page-tabs-wrapper #page-tabs li:not(.active):not(.disabled):hover::after {
312 background-color: #aaa;
313 }
314
315 #page-tabs-wrapper #page-tabs li.active::after {
316 background-color: #12A0FF;
317 }
318
319 #page-tabs li:focus-visible,
320 #page-tabs li span:focus-visible {
321 outline: 0;
322 }
323
324 #page-tabs li a {
325 color: #000000;
326 outline: 0;
327 box-shadow: none;
328 }
329
330 #page-tabs-wrapper #page-tabs .count {
331 margin-bottom: -2px;
332 vertical-align: bottom;
333 margin-left: 0.5rem;
334 background-color: #2161CC;
335 color: #fff;
336 padding: 2px;
337 border-radius: 2px;
338 }
339
340 #page-tabs-wrapper #page-tabs .count.empty {
341 background-color: #d3d3d3;
342 /* bg-grey */
343 }
344
345 /* Report Section CSS starts */
346
347 @media (min-width: 1280px) {
348 #report-section .col-1 {
349 width: 40%;
350 }
351
352 #report-section .col-2 {
353 width: 60%;
354 }
355 }
356
357 .simple-box {
358 border-radius: 0.25rem;
359 border-width: 1px;
360 }
361
362 .simple-box .title {
363 font-weight: 600;
364 font-size: 14px;
365 line-height: 16.8px;
366 }
367
368 #report-section .header {
369 border-bottom: 1px solid #ddd;
370 --tw-border-opacity: 1;
371 border-color: rgb(221 221 221 / var(--tw-border-opacity));
372 }
373
374 #report-section .header .title {
375 font-size: 16px;
376 line-height: 19.2px;
377 font-weight: 400;
378 }
379
380 .free-label {
381 background-color: #efefef;
382 color: #2161CC;
383 font-size: 12px;
384 font-weight: 600;
385 padding: 0px 7px;
386 border-radius: 2px;
387 display: inline-flex;
388 align-items: center;
389 line-height: normal;
390 /* or remove */
391 letter-spacing: 0.5px;
392 }
393
394 #report-section .header .link {
395 font-size: 14px;
396 line-height: 14px;
397 /* fix alignment issue */
398 font-weight: 400;
399 color: #2161CC;
400 display: inline-flex;
401 align-items: center;
402 vertical-align: middle;
403 /* optional, for better inline alignment */
404 }
405
406 #report-section .header .img-arrow {
407 transition: transform 0.3s ease;
408 transform: rotate(0deg);
409 }
410
411 #report-section .header .img-arrow.arrow-rotate {
412 transition: transform 0.3s ease-in-out;
413 transform: rotate(180deg);
414 }
415
416 #report-section .dial {
417 width: 271px;
418 height: 140px;
419 position: relative;
420 margin: 32px auto;
421 }
422
423 .security-scan-description {
424 min-height: 80px;
425 }
426
427 .rich-text {
428 font-size: 16px;
429 font-weight: 400;
430 line-height: 150%;
431 }
432
433 .dropdown-arrow {
434 position: absolute;
435 top: 0;
436 right: 0;
437 display: flex;
438 height: 100%;
439 width: 1.75rem;
440 align-items: center;
441 justify-content: center;
442 transition-property: all;
443 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
444 transition-duration: 150ms;
445 }
446
447 .dropdown-arrow::before {
448 content: '';
449 width: 1px;
450 height: 100%;
451 top: 0;
452 position: absolute;
453 left: 0;
454 display: block;
455 transition-property: all;
456 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
457 transition-duration: 150ms;
458 }
459
460 .dropdown-arrow .arrow-rotate {
461 transition: transform 0.3s ease-in-out;
462 transform: rotate(180deg);
463 }
464
465 .dropdown {
466 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
467 min-width: calc(100%);
468 top: calc(100%);
469 position: absolute;
470 z-index: 30;
471 padding: 0.5rem;
472 text-align: left;
473 font-size: 0.875rem;
474 }
475
476 .base-dropdown {
477 box-shadow: 0 0 7px rgb(0 0 0 / 25%);
478 border-radius: 0.25rem;
479 border-width: 1px;
480 --tw-border-opacity: 1;
481 border-color: rgb(189 189 189 / var(--tw-border-opacity, 1));
482 --tw-bg-opacity: 1;
483 background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1));
484 font-weight: 400;
485 --tw-text-opacity: 1;
486 color: rgb(51 51 51 / var(--tw-text-opacity, 1));
487 }
488
489 .dropdown > span .link {
490 display: block;
491 width: 100%;
492 border-radius: 0.25rem;
493 padding-top: 0.25rem;
494 padding-bottom: 0.25rem;
495 padding-left: 0.5rem;
496 padding-right: 0.5rem;
497 text-align: left;
498 }
499
500 .dropdown > span .link:hover {
501 --tw-bg-opacity: 1;
502 background-color: rgb(221 221 221 / var(--tw-bg-opacity, 1));
503 color: unset;
504 }
505
506 @media screen and (max-width: 768px) {
507 .dropdown-arrow {
508 width: 1.5rem;
509 }
510 }
511
512 .dial .circle {
513 border-width: 7px;
514 transition: all 0.5s ease-in-out;
515 display: block;
516 height: 1.75rem;
517 width: 1.75rem;
518 border-radius: 9999px;
519 --tw-bg-opacity: 1;
520 background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
521 }
522
523 .dial .circle.border-green {
524 --tw-border-opacity: 1;
525 border-color: rgb(8 170 107);
526 }
527
528 .dial .circle.border-yellow {
529 --tw-border-opacity: 1;
530 border-color: rgb(255 214 1 / var(--tw-border-opacity, 1));
531 }
532
533 .dial .circle.border-orange {
534 --tw-border-opacity: 1;
535 border-color: rgb(253 135 50);
536 }
537
538 .dial .circle.border-red {
539 --tw-border-opacity: 1;
540 border-color: rgb(219 17 17);
541 }
542
543 .c1 .heading {
544 font-weight: 600;
545 font-size: 14px;
546 line-height: 16.8px;
547 letter-spacing: 0;
548 color: #000000;
549 }
550
551 .c1 .toggle {
552 position: relative;
553 display: block;
554 height: 1.75rem;
555 width: 1.75rem;
556 border-radius: 9999px;
557 --tw-bg-opacity: 1;
558 background-color: rgb(242 242 242 / var(--tw-bg-opacity));
559 }
560
561 .c1 .toggle span,
562 .c1 .toggle span span {
563 display: block;
564 border-radius: 9999px;
565 --tw-bg-opacity: 1;
566 background-color: rgba(33, 97, 204, var(--tw-bg-opacity));
567 position: absolute;
568 top: 50%;
569 left: 50%;
570 --tw-translate-x: -50%;
571 --tw-translate-y: -50%;
572 --tw-skew-x: 0;
573 --tw-skew-y: 0;
574 --tw-scale-x: 1;
575 --tw-scale-y: 1;
576 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
577 skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
578 scaleY(var(--tw-scale-y));
579 }
580
581 .c1 .toggle span {
582 width: 14px;
583 height: 2px;
584 }
585
586 .c1 .toggle span span {
587 width: 2px;
588 height: 14px;
589 }
590
591 .c2 .circle,
592 .icon.circle {
593 position: relative;
594 display: block;
595 height: 0.75rem;
596 width: 0.75rem;
597 border-radius: 8px;
598 }
599
600 .c2 .status,
601 .c3 .last-scan {
602 font-weight: 400;
603 font-size: 14px;
604 line-height: 16px;
605 letter-spacing: 0px;
606 }
607
608 .help-content {
609 font-weight: 400;
610 font-size: 16px;
611 line-height: 21px;
612 letter-spacing: 0px;
613 }
614
615 .toll-free-title {
616 font-weight: 400;
617 font-size: 13px;
618 line-height: 14px;
619 letter-spacing: 0px;
620 color: #666666;
621 }
622
623 .toll-free-international {
624 font-weight: 400;
625 font-size: 13px;
626 line-height: 14px;
627 letter-spacing: 0px;
628 color: #666666;
629 }
630
631 .toll-free-email {
632 font-weight: 400;
633 font-size: 13px;
634 line-height: 14px;
635 letter-spacing: 0px;
636 color: #666666;
637 }
638
639 .toll-free-title,
640 .toll-free-international,
641 .toll-free-email {
642 font-weight: 400;
643 font-size: 14px;
644 line-height: 16px;
645 letter-spacing: 0px;
646 margin: 4px 0;
647 color: #666666;
648 }
649
650 .collapsed {
651 overflow: hidden;
652 max-height: 0;
653 transition: max-height 0.25s ease-in-out;
654 }
655
656 .expanded {
657 max-height: 850px;
658 }
659
660 @media screen and (max-width: 767px) {
661 .expanded {
662 overflow: auto;
663 box-sizing: border-box;
664 }
665 }
666
667 .scan-result-title {
668 font-weight: 600;
669 font-size: 14px;
670 line-height: 16px;
671 letter-spacing: 0px;
672 margin-top: 5px;
673 }
674
675 .scan-result-data {
676 font-weight: 400;
677 font-size: 14px;
678 line-height: 16px;
679 letter-spacing: 0px;
680 }
681
682 .scan-now-button:disabled,
683 .security-scan-now-button:disabled {
684 display: inline-flex;
685 justify-content: center;
686 align-items: center;
687 cursor: not-allowed;
688 color: #828282;
689 border: 1px solid #efefef;
690 background-color: #efefef;
691 }
692
693 /* Dashboard Page CSS Ends */
694
695 /* Setting Page CSS starts */
696
697 .tab-list {
698 position: relative;
699 }
700
701 .tab-list::before {
702 content: '';
703 width: 2px;
704 position: absolute;
705 top: 0;
706 left: 0;
707 z-index: 10;
708 display: block;
709 height: 100%;
710 --tw-bg-opacity: 1;
711 background-color: rgb(221 221 221 / var(--tw-bg-opacity, 1));
712 }
713
714 .tab-list .tab-setting-title {
715 font-size: 18px;
716 font-weight: 400;
717 line-height: 14px;
718 color: #333333;
719 }
720
721 .tab-list .tab-setting-field-content {
722 font-size: 12px;
723 line-height: 16px;
724 font-weight: 400;
725 color: #222222;
726 }
727
728 .tab-list .tab-setting-title .inner::after {
729 content: '';
730 width: 2px;
731 position: absolute;
732 top: 0;
733 left: 0;
734 z-index: 20;
735 display: block;
736 height: 100%;
737 background-color: transparent;
738 transition-property: all;
739 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
740 transition-duration: 150ms;
741 }
742
743 .tab-setting-title .inner.active::after {
744 background-color: #12A0FF;
745 }
746
747 .tab-setting-title .inner .arrow-img {
748 display: none;
749 }
750
751 .tab-setting-title .inner.active .arrow-img {
752 display: block;
753 }
754
755 .tab-title {
756 font-weight: 600;
757 font-size: 16px;
758 line-height: 120%;
759 }
760
761 .tab-title a {
762 color: #000000;
763 }
764
765 .tab-content .tab-login-activity h3 {
766 font-weight: 400;
767 font-size: 24px;
768 line-height: 24px;
769 }
770
771 .tab-content .tab-login-activity p {
772 font-weight: 400;
773 font-size: 14px;
774 line-height: 19.2px;
775 color: #000000;
776 }
777
778 .tab-content .tab-content-field {
779 font-weight: 600;
780 font-size: 16px;
781 line-height: 16px;
782 }
783
784 .tab-content .tab-content-field-title {
785 font-weight: 400;
786 font-size: 16px;
787 line-height: 19.2px;
788 color: #000000;
789 }
790
791 .tab-content .tab-content-field-content {
792 font-weight: 400;
793 font-size: 14px;
794 line-height: 130%;
795 }
796
797 .simple-box .box-title {
798 font-weight: 400;
799 font-size: 30px;
800 line-height: 24px;
801 color: #000000;
802 }
803
804 .simple-box .box-description {
805 font-weight: 400;
806 font-size: 14px;
807 line-height: 20px;
808 color: #000000;
809 }
810
811 .lightswitch {
812 display: block;
813 cursor: pointer;
814 position: relative;
815 font-weight: normal;
816 user-select: none;
817 padding-left: 3rem;
818 }
819
820 .lightswitch input {
821 position: absolute;
822 cursor: pointer;
823 opacity: 0;
824 left: 0;
825 display: none;
826 }
827
828 .lightswitch input + .switch {
829 display: block;
830 position: absolute;
831 top: 0;
832 left: 0;
833 border-radius: 9999px;
834 border: 1px solid #9E9E9E;
835 width: 2.25rem;
836 height: 1.25rem;
837 }
838
839 .lightswitch input + .switch span {
840 position: absolute;
841 top: 3px;
842 left: 3px;
843 background-color: #9E9E9E;
844 border-radius: 9999px;
845 width: 0.75rem;
846 height: 0.75rem;
847 transition: all 0.2s;
848 }
849
850 .lightswitch input:checked + .switch {
851 border-color: #2161CC;
852 }
853
854 .lightswitch input:checked + .switch span {
855 left: 18px;
856 background-color: #2161CC;
857 }
858
859 .sitelock-wrapper .input-number {
860 padding: 0 0 0 8px;
861 }
862
863 .banner {
864 position: relative;
865 border: 1px solid;
866 /* You might want to specify the exact border color or style */
867 border-radius: 8px;
868 /* Rounded corners */
869 overflow: hidden;
870 line-height: 1.375;
871 /* Equivalent to leading-snug */
872
873 /* If .banner does not have class 'w-full' */
874 /* You can't directly style this in plain CSS, so use a parent class or JS if needed */
875 }
876
877 .banner:not(.w-full) {
878 max-width: 870px;
879 }
880
881 .banner:not(.compact) {
882 font-size: 1rem;
883 /* text-base */
884 padding-top: 1rem;
885 /* py-4 */
886 padding-bottom: 1rem;
887 padding-left: 2rem;
888 /* pl-8 */
889 padding-right: 1rem;
890 /* pr-4 */
891 }
892
893 @media (min-width: 768px) {
894 .banner:not(.compact) {
895 padding-top: 1.25rem;
896 /* md:py-5 */
897 padding-bottom: 1.25rem;
898 padding-left: 2.25rem;
899 /* md:pl-9 */
900 padding-right: 1.25rem;
901 /* md:pr-5 */
902 }
903 }
904
905 .banner.compact {
906 font-size: 0.875rem;
907 /* text-sm */
908 padding-top: 0.75rem;
909 /* py-3 */
910 padding-bottom: 0.75rem;
911 padding-left: 1.5rem;
912 /* pl-6 */
913 padding-right: 0.75rem;
914 /* pr-3 */
915 }
916
917 @media (min-width: 768px) {
918 .banner.compact {
919 padding-top: 1rem;
920 /* md:py-4 */
921 padding-bottom: 1rem;
922 padding-left: 2rem;
923 /* md:pl-8 */
924 padding-right: 1rem;
925 /* md:pr-4 */
926 }
927 }
928
929 .banner:not(:last-child) {
930 margin-bottom: 1rem;
931 /* mb-4 */
932 }
933
934 .banner::before {
935 content: '';
936 opacity: 0.2;
937 display: block;
938 width: 1rem;
939 /* w-4 */
940 height: 100%;
941 position: absolute;
942 top: 0;
943 left: 0;
944 }
945
946 .type-success {
947 border-color: #00D27F;
948 /* Tailwind's green-500 by default */
949 }
950
951 .type-success::before {
952 background-color: #00D27F;
953 }
954
955 .type-error {
956 border-color: #DC2626;
957 /* Tailwind's green-500 by default */
958 }
959
960 .scannow-success-message {
961 color: #00aa6b;
962 font-weight: 600;
963 }
964
965 .scannow-error-message {
966 color: #db1010;
967 font-weight: 600;
968 }
969
970 .type-error::before {
971 background-color: #DC2626;
972 }
973
974 @media (max-width: 782px) {
975 input[type='radio']:checked::before {
976 margin: 0.175rem;
977 }
978 }
979
980 @media (max-width: 500px) {
981 #page-tabs-wrapper #page-tabs li:not(.compact) {
982 font-size: 16px;
983 }
984
985 #page-tabs-wrapper #page-tabs li,
986 #page-tabs-wrapper #page-tabs li:not(.compact):not(:last-child) {
987 margin-right: 16px;
988 }
989
990 .password-user-roles th:nth-child(1) {
991 width: 0px;
992 padding: 0px;
993 }
994
995 .password-user-roles thead tr th:nth-child(2),
996 .password-user-roles thead tr th:nth-child(3),
997 .password-user-roles thead tr th:nth-child(4),
998 .password-user-roles tbody tr td {
999 padding: 5px;
1000 font-size: 14px;
1001 }
1002 }
1003
1004 @media (max-width: 320px) {
1005 #page-tabs-wrapper #page-tabs li:not(.compact) {
1006 font-size: 14px;
1007 }
1008 }
1009
1010 /* Sitelock-2fa-settings-page-css-starts */
1011
1012 .sitelock-2fa-settings-container {
1013 background: #ffffff;
1014 border: 1px solid #dddddd;
1015 border-radius: 4px;
1016 }
1017
1018 .sitelock-2fa-settings-container .twofa-activation strong {
1019 font-weight: 600;
1020 }
1021
1022 .sitelock-2fa-header {
1023 display: flex;
1024 justify-content: space-between;
1025 border-bottom: 1px solid #ddd;
1026 padding: 11px 20px 10px;
1027 --tw-border-opacity: 1;
1028 border-color: rgb(221 221 221 / var(--tw-border-opacity));
1029 }
1030
1031 .sitelock-2fa-settings-container .title {
1032 font-size: 16px;
1033 line-height: 19.2px;
1034 font-weight: 400;
1035 color: #000000;
1036 }
1037
1038 @media (max-width: 500px) {
1039 .sitelock-2fa-settings .box-title {
1040 line-height: 36px;
1041 }
1042 }
1043
1044 /* Sitelock-2fa-settings-page-css-ends */
1045
1046 /* Setting Page CSS ends */
1047
1048 /* upgrade page css starts */
1049
1050 .upgrade-background-img {
1051 background-image: url('../images/upgrade-background.svg');
1052 background-repeat: no-repeat;
1053 background-size: cover;
1054 background-position: center;
1055 width: 100%;
1056 height: 405px;
1057 }
1058
1059 .upgrade-heading {
1060 font-weight: 400;
1061 font-size: 24px;
1062 line-height: 26px;
1063 letter-spacing: 0.15px;
1064 text-align: center;
1065 }
1066
1067 .upgrade-second-text,
1068 .upgrade-third-text {
1069 font-weight: 600;
1070 font-size: 24px;
1071 line-height: 26px;
1072 letter-spacing: 0.15px;
1073 text-align: center;
1074 }
1075
1076 .upgrade-third-text {
1077 font-size: 18px;
1078 }
1079
1080 /* Modal Overlay */
1081 .modal-overlay {
1082 display: none;
1083 /* hidden by default */
1084 position: fixed;
1085 inset: 0;
1086 /* shorthand for top, right, bottom, left = 0 */
1087 background: rgba(0, 0, 0, 0.5);
1088 z-index: 100000;
1089 /* very high to go over admin menu */
1090 overflow-y: auto;
1091 /* if modal is tall */
1092 padding: 60px 20px 20px;
1093 /* spacing above and below */
1094 box-sizing: border-box;
1095 }
1096
1097 /* Modal Box */
1098 .modal {
1099 background: #fff;
1100 padding: 20px 30px;
1101 border-radius: 6px;
1102 max-width: 500px;
1103 margin: 0 auto;
1104 /* horizontally center */
1105 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
1106 position: relative;
1107 animation: fadeIn 0.3s ease;
1108 }
1109
1110 /* Close Button */
1111 .close-btn {
1112 position: absolute;
1113 top: 10px;
1114 right: 10px;
1115 font-size: 30px;
1116 color: #888;
1117 cursor: pointer;
1118 }
1119
1120 /* Fade In Animation */
1121 @keyframes fadeIn {
1122 from {
1123 opacity: 0;
1124 transform: translateY(-20px);
1125 }
1126
1127 to {
1128 opacity: 1;
1129 transform: translateY(0);
1130 }
1131 }
1132
1133 .error {
1134 color: #db1010; /* WordPress admin red */
1135 font-size: 13px;
1136 margin-top: 4px;
1137 display: block;
1138 }
1139
1140 input.error {
1141 border-color: #db1010 !important;
1142 background-color: #fff6f6;
1143 }
1144
1145 input.valid {
1146 border-color: #00aa6b; /* WP success green */
1147 }
1148
1149 /* Upgrade Page CSS ends */
1150 }
1151
1152 /* Hide Give Feedback menu by default on screens > 1023px */
1153 @media (min-width: 1024px) {
1154 #toplevel_page_sitelock-plugin ul.wp-submenu a.sitelock-give-feedback-link {
1155 display: none !important;
1156 }
1157 }
1158
1159 /* 2FA Onboarding Styles - Added to match design */
1160 .sitelock-onboarding-wrapper {
1161 display: flex !important;
1162 flex-direction: column;
1163 align-items: center;
1164 justify-content: center;
1165 min-height: 100vh;
1166 background-color: #f0f0f1;
1167 padding: 20px;
1168 font-family: 'Source Sans 3';
1169 margin: 0 !important;
1170 }
1171
1172 .sitelock-logo {
1173 margin-bottom: 24px;
1174 }
1175
1176 .sitelock-logo img {
1177 width: 80px;
1178 height: auto;
1179 }
1180
1181 .sitelock-card {
1182 background: #ffffff;
1183 border-radius: 8px;
1184 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
1185 padding: 40px;
1186 width: 100%;
1187 max-width: 500px;
1188 text-align: center;
1189 box-sizing: border-box;
1190 }
1191
1192 .sitelock-card h2 {
1193 font-size: 24px;
1194 font-weight: 600;
1195 margin-bottom: 16px;
1196 color: #1d2327;
1197 }
1198
1199 .sitelock-card p {
1200 font-size: 14px;
1201 line-height: 1.5;
1202 color: #3c434a;
1203 margin-bottom: 24px;
1204 }
1205
1206 /* Button overrides to match design */
1207 .sitelock-btn-primary {
1208 height: 32px;
1209 width: 164px;
1210 background-color: #011858 !important;
1211 color: #FFFFFF !important;
1212 font-size: 14px !important;
1213 font-weight: 400 !important;
1214 line-height: 14px !important;
1215 text-decoration: none !important;
1216 display: inline-flex;
1217 align-items: center;
1218 justify-content: center;
1219 transition: background-color 0.2s ease-in-out;
1220 border-radius: 120px !important;
1221 }
1222
1223 .sitelock-btn-primary:hover {
1224 background-color: #011858 !important;
1225 }
1226
1227 .sitelock-2fa-onboarding .sitelock-card p {
1228 color: #000000 !important;
1229 }
1230
1231 .sitelock-link-skip {
1232 display: block;
1233 color: #2271b1;
1234 text-decoration: none;
1235 font-size: 14px;
1236 }
1237
1238 .sitelock-link-skip:hover {
1239 text-decoration: underline;
1240 color: #135e96;
1241 }
1242
1243 .sitelock-footer {
1244 font-size: 12px;
1245 color: #646970;
1246 margin-top: 24px;
1247 padding-top: 24px;
1248 border-top: 1px solid #f0f0f1;
1249 }
1250
1251 .sitelock-input-code {
1252 border: 1px solid #8c8f94 !important;
1253 border-radius: 4px !important;
1254 padding: 0 8px !important;
1255 height: 40px !important;
1256 font-size: 16px !important;
1257 width: 100% !important;
1258 max-width: 200px !important;
1259 text-align: center;
1260 letter-spacing: 2px;
1261 }
1262
1263 .sitelock-input-code:focus {
1264 border-color: #2271b1 !important;
1265 box-shadow: 0 0 0 1px #2271b1 !important;
1266 outline: none !important;
1267 }
1268
1269 .sitelock-qr-container {
1270 margin-bottom: 24px;
1271 }
1272
1273 .sitelock-qr-image {
1274 /* Ensure no extra border if card is already white */
1275 border: none !important;
1276 }
1277
1278 .sitelock-manual-key {
1279 background: #f6f7f7;
1280 border: 1px solid #c3c4c7;
1281 padding: 10px;
1282 border-radius: 4px;
1283 font-family: monospace;
1284 font-size: 13px;
1285 color: #50575e;
1286 word-break: break-all;
1287 width: 100%;
1288 }
1289
1290 .sitelock-step-title {
1291 font-size: 16px;
1292 font-weight: 600;
1293 color: #1d2327;
1294 margin-bottom: 8px;
1295 text-align: center;
1296 }
1297
1298 .sitelock-step-desc {
1299 font-size: 14px;
1300 color: #000000;
1301 margin-bottom: 16px;
1302 text-align: center;
1303 line-height: 1.5;
1304 }
1305
1306 /* Ensure spacing between steps */
1307 .sitelock-2fa-step-1 {
1308 margin-bottom: 32px;
1309 padding-bottom: 24px;
1310 border-bottom: 1px solid #f0f0f1;
1311 }
1312
1313 .sitelock-2fa-step-2 {
1314 margin-bottom: 0;
1315 }
1316
1317 .sitelock-error {
1318 background: #fceded;
1319 height: 40px;
1320 width: 372px;
1321 margin: auto;
1322 font-weight: 400;
1323 font-size: 14px;
1324 line-height: 40px;
1325 border-radius: 4px;
1326 }
1327