PluginProbe
Page Builder: Pagelayer – Drag and Drop website builder / 2.2.0
Page Builder: Pagelayer – Drag and Drop website builder v2.2.0
2.2.1 2.2.0 2.1.9 2.1.8 2.1.7 2.1.6 2.1.5 2.1.4 2.1.3 trunk 0.9.0 0.9.1 0.9.2 0.9.3 0.9.4 0.9.5 0.9.6 0.9.7 0.9.8 0.9.9 1.0.0 1.0.2 1.0.3 1.0.4 1.0.5 All 129 releases
← All changes | css/pagelayer-admin.css +1987 -29 1.0.3 → 2.2.0 View file →
@@ -1,29 +1,1987 @@
1 -.pagelayer-tab-panel{
2 -padding:20px;
3 -display:none;
4 -}
5 -
6 -.pagelayer-setting-form th, .pagelayer-setting-form td{
7 -padding:20px 20px 20px 0px ;
8 -text-align:left;
9 -}
10 -
11 -.pagelayer-acc-wrapper{
12 -width:90%;
13 -}
14 -
15 -.pagelayer-acc-wrapper .pagelayer-acc-tab{
16 -width:100%;
17 -float:unset;
18 -display:block;
19 -padding:10px;
20 -}
21 -
22 -.pagelayer-acc-wrapper .pagelayer-acc-panel{
23 -padding:0px 20px;
24 -display:none;
25 -}
26 -
27 -.pagelayer-setting-form td .pagelayer-app-id{
28 -width:350px;
29 -}
1 +/* ---- Layout Wrapper ---- */
2 +#pagelayer-admin-wrap {
3 +display: flex;
4 +min-height: 100vh;
5 +background: #f8fafc;
6 +font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
7 +margin-left: -20px;
8 +margin-top: -10px;
9 +}
10 +
11 +/* ---- Left Sidebar ---- */
12 +#pagelayer-sidebar {
13 +width: 280px;
14 +background: #fff;
15 +color: #1e293b;
16 +display: flex;
17 +flex-direction: column;
18 +min-height: 100vh;
19 +position: relative;
20 +z-index: 10;
21 +border-right: 1px solid #f1f5f9;
22 +box-shadow: 2px 0 8px rgba(0, 0, 0, 0.015);
23 +}
24 +
25 +@media (min-width: 721px) {
26 +#pagelayer-sidebar {
27 +position: sticky;
28 +top: 0;
29 +height: 100vh;
30 +}
31 +
32 +.admin-bar #pagelayer-sidebar {
33 +top: 32px;
34 +height: calc(100vh - 32px);
35 +}
36 +
37 +@media screen and (max-width: 782px) {
38 +.admin-bar #pagelayer-sidebar {
39 + top: 46px;
40 + height: calc(100vh - 46px);
41 +}
42 +}
43 +}
44 +
45 +#pagelayer-sidebar-logo {
46 +padding: 24px 24px 12px;
47 +margin-bottom: 12px;
48 +display: flex;
49 +align-items: center;
50 +justify-content: flex-start;
51 +gap: 12px;
52 +}
53 +
54 +body.post-type-pagelayer-template #pagelayer-sidebar-logo,
55 +body.post-type-pagelayer-fonts #pagelayer-sidebar-logo,
56 +body.pagelayer_page_pagelayer_template_wizard #pagelayer-sidebar-logo,
57 +body.pagelayer_page_pagelayer_import #pagelayer-sidebar-logo,
58 +body.pagelayer_page_pagelayer_tools #pagelayer-sidebar-logo,
59 +body.pagelayer_page_pagelayer_license #pagelayer-sidebar-logo {
60 +padding-top: 34px;
61 +}
62 +
63 +#pagelayer-sidebar-logo img {
64 +display: block;
65 +height: 38px;
66 +width: 38px;
67 +border-radius: 8px;
68 +margin: 0;
69 +}
70 +
71 +#pagelayer-sidebar-logo .pl-logo-details {
72 +display: flex;
73 +flex-direction: column;
74 +gap: 2px;
75 +align-items: flex-start;
76 +}
77 +
78 +#pagelayer-sidebar-logo .pl-logo-text {
79 +font-size: 17px;
80 +font-weight: 700;
81 +color: #1e293b;
82 +letter-spacing: -0.2px;
83 +line-height: 1.2;
84 +display: block;
85 +}
86 +
87 +#pagelayer-sidebar-logo .pl-version {
88 +font-size: 10px;
89 +font-weight: 500;
90 +color: #64748b;
91 +background: transparent;
92 +padding: 0;
93 +border: none;
94 +line-height: 1;
95 +margin: 0;
96 +flex-shrink: 0;
97 +}
98 +
99 +/* Nav Menu */
100 +#pagelayer-sidebar-nav {
101 +flex: 1;
102 +padding: 12px 14px;
103 +overflow-y: auto;
104 +display: flex;
105 +flex-direction: column;
106 +gap: 6px;
107 +}
108 +
109 +#pagelayer-sidebar-nav a {
110 +display: flex;
111 +align-items: center;
112 +gap: 12px;
113 +color: #4b5563;
114 +padding: 11px 16px;
115 +text-decoration: none;
116 +font-size: 13.5px;
117 +font-weight: 500;
118 +border-radius: 8px;
119 +cursor: pointer;
120 +border: 1px solid transparent;
121 +transition: all 0.2s ease-in-out;
122 +}
123 +
124 +#pagelayer-sidebar-nav a:hover {
125 +background: #f8fafc;
126 +color: #1e293b;
127 +border-color: #f1f5f9;
128 +}
129 +
130 +#pagelayer-sidebar-nav a:hover .pl-nav-icon {
131 +color: #2563eb;
132 +opacity: 1;
133 +}
134 +
135 +#pagelayer-sidebar-nav a.pagelayer-nav-active {
136 +background: #eef2ff;
137 +color: #2563eb;
138 +border-color: #c7d2fe;
139 +font-weight: 600;
140 +box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05);
141 +}
142 +
143 +#pagelayer-sidebar-nav a .pl-nav-icon {
144 +width: 20px;
145 +height: 20px;
146 +opacity: 0.6;
147 +flex-shrink: 0;
148 +font-size: 18px;
149 +display: flex;
150 +align-items: center;
151 +justify-content: center;
152 +color: #4b5563;
153 +transition: all 0.2s ease-in-out;
154 +}
155 +
156 +#pagelayer-sidebar-nav a.pagelayer-nav-active .pl-nav-icon {
157 +opacity: 1;
158 +color: #2563eb;
159 +}
160 +
161 +/* Bottom sidebar items */
162 +#pagelayer-sidebar-bottom {
163 +padding: 14px 12px;
164 +border-top: 1px solid #e2e4e9;
165 +}
166 +
167 +#pagelayer-sidebar-bottom .pl-go-premium {
168 +display: block;
169 +background: #0284c7;
170 +color: #fff;
171 +text-align: center;
172 +padding: 10px 14px;
173 +border-radius: 6px;
174 +font-size: 13px;
175 +font-weight: 600;
176 +text-decoration: none;
177 +transition: background 0.2s;
178 +margin-bottom: 10px;
179 +}
180 +
181 +#pagelayer-sidebar-bottom .pl-go-premium:hover {
182 +background: #0369a1;
183 +}
184 +
185 +#pagelayer-sidebar-bottom .pl-sidebar-links {
186 +display: flex;
187 +gap: 14px;
188 +justify-content: center;
189 +padding-top: 6px;
190 +}
191 +
192 +#pagelayer-sidebar-bottom .pl-sidebar-links a {
193 +color: #64748b;
194 +font-size: 12px;
195 +text-decoration: none;
196 +display: flex;
197 +align-items: center;
198 +gap: 4px;
199 +transition: color 0.15s;
200 +}
201 +
202 +#pagelayer-sidebar-bottom .pl-sidebar-links a:hover {
203 +color: #0284c7;
204 +}
205 +
206 +/* ---- Main Content Area ---- */
207 +#pagelayer-main-content {
208 +flex: 1;
209 +display: flex;
210 +flex-direction: column;
211 +min-height: 100vh;
212 +}
213 +
214 +/* ---- Top Header ---- */
215 +#pagelayer-top-header {
216 +background: #fff;
217 +border-bottom: 1px solid #f1f5f9;
218 +padding: 5px 28px;
219 +display: flex;
220 +align-items: center;
221 +justify-content: space-between;
222 +height: 60px;
223 +position: sticky;
224 +top: 0;
225 +z-index: 99;
226 +box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
227 +}
228 +
229 +.admin-bar #pagelayer-top-header {
230 +top: 32px;
231 +}
232 +
233 +@media screen and (max-width: 782px) {
234 +.admin-bar #pagelayer-top-header {
235 + top: 46px;
236 +}
237 +}
238 +
239 +#pagelayer-top-header h1 {
240 +font-size: 18px;
241 +font-weight: 700;
242 +color: #1e293b;
243 +margin: 0;
244 +padding: 0;
245 +line-height: 1;
246 +}
247 +
248 +.pagelayer-header-actions {
249 +display: flex;
250 +align-items: center;
251 +gap: 12px;
252 +}
253 +
254 +.pagelayer-header-actions .pl-help-btn {
255 +display: flex;
256 +align-items: center;
257 +gap: 6px;
258 +color: #555;
259 +font-size: 13px;
260 +text-decoration: none;
261 +padding: 7px 14px;
262 +border: 1px solid #d0d5dd;
263 +border-radius: 6px;
264 +background: #fff;
265 +cursor: pointer;
266 +transition: background 0.15s;
267 +}
268 +
269 +.pagelayer-header-actions .pl-help-btn:hover {
270 +background: #f5f5f5;
271 +}
272 +
273 +.pagelayer-header-actions .pl-save-btn,
274 +.pagelayer-header-actions input[type="submit"].pl-save-btn {
275 +background: #2563eb !important;
276 +color: #fff !important;
277 +border: none !important;
278 +border-radius: 6px !important;
279 +padding: 9px 20px !important;
280 +font-size: 13px !important;
281 +font-weight: 600 !important;
282 +cursor: pointer;
283 +text-decoration: none;
284 +transition: background 0.2s;
285 +height: auto !important;
286 +line-height: 1.4 !important;
287 +box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
288 +}
289 +
290 +.pagelayer-header-actions .pl-save-btn:hover,
291 +.pagelayer-header-actions input[type="submit"].pl-save-btn:hover {
292 +background: #1d4ed8 !important;
293 +}
294 +
295 +/* ---- Body Row (content + right bar) ---- */
296 +#pagelayer-body-row {
297 +display: flex;
298 +flex: 1;
299 +align-items: flex-start;
300 +}
301 +
302 +/* ---- Settings Content ---- */
303 +#pagelayer-settings-content {
304 +flex: 1;
305 +padding: 55px 28px 20px 28px;
306 +overflow-y: auto;
307 +}
308 +
309 +/* ---- Right Sidebar Promo ---- */
310 +#pagelayer-right-bar {
311 +padding: 50px 16px 20px 16px;
312 +}
313 +
314 +/* ---- Tab Panels ---- */
315 +.pagelayer-tab-panel {
316 +display: none;
317 +}
318 +
319 +.pagelayer-tab-panel.pagelayer-tab-active {
320 +display: block;
321 +}
322 +
323 +/* ---- Settings Card ---- */
324 +.pagelayer-settings-card {
325 +background: #fff;
326 +border: 1px solid #e2e8f0;
327 +border-radius: 12px;
328 +margin-bottom: 24px;
329 +overflow: visible;
330 +box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
331 +}
332 +
333 +.pagelayer-settings-card-header {
334 +display: flex;
335 +align-items: center;
336 +justify-content: space-between;
337 +padding: 16px 24px;
338 +border-bottom: 1px solid #e2e8f0;
339 +background: #fff;
340 +border-top-left-radius: 12px;
341 +border-top-right-radius: 12px;
342 +}
343 +
344 +.pagelayer-settings-card-header h3 {
345 +font-size: 14.5px;
346 +font-weight: 600;
347 +color: #0f172a;
348 +margin: 0;
349 +letter-spacing: -0.1px;
350 +}
351 +
352 +.pl-badge {
353 +background: #e0f2fe;
354 +color: #0369a1;
355 +font-size: 10px;
356 +font-weight: 600;
357 +padding: 3px 10px;
358 +border-radius: 20px;
359 +text-transform: uppercase;
360 +letter-spacing: 0.4px;
361 +border: 1px solid #bae6fd;
362 +}
363 +
364 +.pl-badge.pl-badge-pro {
365 +background: #fef3c7;
366 +color: #92400e;
367 +border-color: #fde68a;
368 +}
369 +
370 +/* ---- Setting Row ---- */
371 +.pagelayer-setting-row {
372 +display: flex;
373 +align-items: center;
374 +justify-content: space-between;
375 +padding: 20px 24px;
376 +border-bottom: 1px solid #f1f5f9;
377 +gap: 20px;
378 +transition: background-color 0.15s ease-in-out;
379 +}
380 +
381 +.pagelayer-setting-row:hover {
382 +background-color: #fafafa;
383 +}
384 +
385 +.pagelayer-setting-row:last-child {
386 +border-bottom: none;
387 +}
388 +
389 +.pagelayer-setting-row-left {
390 +flex: 1;
391 +min-width: 0;
392 +}
393 +
394 +.pagelayer-setting-row-label {
395 +font-size: 13.5px;
396 +font-weight: 600;
397 +color: #0f172a;
398 +display: block;
399 +margin-bottom: 3px;
400 +letter-spacing: -0.05px;
401 +}
402 +
403 +.pagelayer-setting-row-desc {
404 +font-size: 12px;
405 +color: #4b5563;
406 +line-height: 1.5;
407 +margin: 0;
408 +}
409 +
410 +.pagelayer-setting-row-desc a {
411 +color: #2563eb;
412 +}
413 +
414 +.pagelayer-setting-row-desc strong {
415 +color: #ef4444;
416 +font-weight: 600;
417 +}
418 +
419 +.pagelayer-setting-row-control {
420 +flex-shrink: 0;
421 +}
422 +
423 +/* ---- Toggle Switch ---- */
424 +.pl-toggle {
425 +position: relative;
426 +display: inline-block;
427 +width: 44px;
428 +height: 24px;
429 +}
430 +
431 +.pl-toggle input {
432 +opacity: 0;
433 +width: 0;
434 +height: 0;
435 +position: absolute;
436 +}
437 +
438 +.pl-toggle-slider {
439 +position: absolute;
440 +cursor: pointer;
441 +top: 0;
442 +left: 0;
443 +right: 0;
444 +bottom: 0;
445 +background: #cbd5e1;
446 +border-radius: 24px;
447 +transition: all 0.2s ease-in-out;
448 +}
449 +
450 +.pl-toggle-slider:before {
451 +position: absolute;
452 +content: "";
453 +height: 18px;
454 +width: 18px;
455 +left: 3px;
456 +bottom: 3px;
457 +background: #fff;
458 +border-radius: 50%;
459 +transition: all 0.2s ease-in-out;
460 +box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
461 +}
462 +
463 +.pl-toggle:hover .pl-toggle-slider {
464 +background: #b8c2cc;
465 +}
466 +
467 +.pl-toggle input:checked+.pl-toggle-slider {
468 +background: #2563eb;
469 +}
470 +
471 +.pl-toggle input:checked:hover+.pl-toggle-slider {
472 +background: #1d4ed8;
473 +}
474 +
475 +.pl-toggle input:checked+.pl-toggle-slider:before {
476 +transform: translateX(20px);
477 +}
478 +
479 +/* Post type checkboxes row */
480 +.pl-posttype-toggles {
481 +display: flex;
482 +gap: 20px;
483 +align-items: center;
484 +flex-wrap: wrap;
485 +}
486 +
487 +.pl-posttype-toggle {
488 +display: flex;
489 +align-items: center;
490 +gap: 8px;
491 +}
492 +
493 +.pl-posttype-toggle span {
494 +font-size: 11.5px;
495 +font-weight: 500;
496 +color: #374151;
497 +}
498 +
499 +/* ---- JS Permission checkboxes ---- */
500 +.pl-checkbox-group {
501 +display: flex;
502 +gap: 12px;
503 +flex-wrap: wrap;
504 +}
505 +
506 +.pl-checkbox-item {
507 +display: flex;
508 +align-items: center;
509 +gap: 6px;
510 +border: 1px solid #e2e8f0;
511 +border-radius: 8px;
512 +padding: 8px 16px;
513 +cursor: pointer;
514 +transition: all 0.2s ease-in-out;
515 +background: #fff;
516 +}
517 +
518 +.pl-checkbox-item:hover {
519 +border-color: #cbd5e1;
520 +background: #f8fafc;
521 +}
522 +
523 +.pl-checkbox-item:has(input:checked) {
524 +border-color: #2563eb;
525 +background: #eef2ff;
526 +box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05);
527 +}
528 +
529 +.pl-checkbox-item input[type="checkbox"] {
530 +margin: 0;
531 +accent-color: #2563eb;
532 +width: 15px;
533 +height: 15px;
534 +}
535 +
536 +.pl-checkbox-item label {
537 +font-size: 12.5px;
538 +font-weight: 500;
539 +color: #374151;
540 +cursor: pointer;
541 +margin: 0;
542 +}
543 +
544 +/* ---- Form Table Compat ---- */
545 +.pagelayer-setting-form th,
546 +.pagelayer-setting-form td {
547 +padding:10px 20px 10px 0px;
548 +text-align:left;
549 +}
550 +
551 +.pagelayer-internal-table th,
552 +.pagelayer-internal-table td {
553 +padding:3px;
554 +text-align:left;
555 +}
556 +
557 +/* ---- Tab Sections with subtabs ---- */
558 +.pagelayer-acc-wrapper{
559 +width: 100%;
560 +}
561 +
562 +.pagelayer-acc-wrapper .pagelayer-acc-tab{
563 +width:100%;
564 +float:unset;
565 +display:block;
566 +padding:10px;
567 +}
568 +
569 +.pagelayer-acc-wrapper .pagelayer-acc-panel{
570 +padding:0px 20px;
571 +display:none;
572 +}
573 +
574 +/* ---- Input Styles inside cards ---- */
575 +.pagelayer-settings-card input[type="text"],
576 +.pagelayer-settings-card input[type="email"],
577 +.pagelayer-settings-card input[type="tel"],
578 +.pagelayer-settings-card input[type="number"],
579 +.pagelayer-settings-card select,
580 +.pagelayer-settings-card textarea {
581 +border: 1.5px solid #d0d5dd;
582 +border-radius: 6px;
583 +padding: 8px 12px;
584 +font-size: 13px;
585 +color: #1a1a2e;
586 +background-color: #fff;
587 +transition: border-color 0.15s;
588 +width: 100%;
589 +max-width: 420px;
590 +box-sizing: border-box;
591 +}
592 +
593 +.pagelayer-settings-card select {
594 +padding-right: 30px;
595 +-moz-appearance: none;
596 +-webkit-appearance: none;
597 +appearance: none;
598 +background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E") !important;
599 +background-position: right 8px center !important;
600 +background-repeat: no-repeat !important;
601 +background-size: 16px 16px !important;
602 +}
603 +
604 +.pagelayer-settings-card input[type="text"]:focus,
605 +.pagelayer-settings-card input[type="email"]:focus,
606 +.pagelayer-settings-card input[type="tel"]:focus,
607 +.pagelayer-settings-card input[type="number"]:focus,
608 +.pagelayer-settings-card select:focus,
609 +.pagelayer-settings-card textarea:focus {
610 +border-color: #2563eb;
611 +outline: none;
612 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
613 +}
614 +
615 +.pagelayer-settings-card table input[type="text"],
616 +.pagelayer-settings-card table input[type="email"],
617 +.pagelayer-settings-card table input[type="tel"],
618 +.pagelayer-settings-card table select,
619 +.pagelayer-settings-card table textarea {
620 +width: 100%;
621 +}
622 +
623 +.pagelayer-setting-form td .pagelayer-app-id{
624 +width:350px;
625 +}
626 +
627 +.pagelayer-cf table{
628 +width: 80%;
629 +}
630 +
631 +.pagelayer-cf table label,
632 +.pagelayer-cf table input:not([type="checkbox"]):not([type="radio"]),
633 +.pagelayer-cf table textarea{
634 +width: 100%;
635 +}
636 +
637 +/* ---- Notice ---- */
638 +.pagelayer-notice {
639 +padding: 10px;
640 +background-color: #fff;
641 +border: 1px solid #ccc;
642 +}
643 +
644 +.pagelayer-notice-info {
645 +border-left: 5px solid #2563eb !important;
646 +}
647 +
648 +/* ---- Color Picker Compat ---- */
649 +.pagelayer-font-settings-rows {
650 +position: relative;
651 +overflow: visible;
652 +}
653 +
654 +.pagelayer-show-vanilla {
655 +border: 1px solid #d0d5dd;
656 +display: block;
657 +padding: 4px;
658 +text-decoration: none;
659 +position: relative;
660 +width: 40px;
661 +box-sizing: content-box;
662 +z-index: 10;
663 +}
664 +
665 +.pagelayer-show-vanilla:hover,
666 +.pagelayer-show-vanilla:focus-within {
667 +z-index: 100;
668 +}
669 +
670 +.pagelayer-show-vanilla .picker_wrapper.popup {
671 +z-index: 99999 !important;
672 +}
673 +
674 +.pagelayer-show-vanilla .dashicons{
675 +position: absolute;
676 +right:0px;
677 +top: 0px;
678 +font-size: 14px;
679 +background: #686868;
680 +color: #fff;
681 +width: 16px;
682 +height: 16px;
683 +}
684 +
685 +.pagelayer-color-div{
686 +width: 40px;
687 +height: 25px;
688 +display: inline-block;
689 +vertical-align: middle;
690 +}
691 +
692 +.pagelayer-color-none{
693 +background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgBAMAAAB54XoeAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAC1QTFRFAAAAAQEBBQUFDAwM9PT0+vr6/////v7+BAQE+/v7AgIC/f39AwMDDQ0N8/Pzb6ggJQAAAZ5JREFUeJztlr1twzAQhU+tK7ELDDdBNsgO2SAznAr3JAJXWSJp49YLuPAW2cJbhEdSQZBCEMRHgMVj5U80HnkSfz4Ra06eXjSoTvr6HKGGU94o8vBpqPr2LjLUcAr8ikNEnLx6jT93VZxneBn1Zg9uOlxsxO0suTkXfJywTsG5Ok5x9hK0NKM6bhEosh+nq+HJD+c6TmvG2r8RtrMb9g4aOKY3CA0ElyyHcbAHIXNw5Q9bWeLG2aUH80ItU97K8ihlhmmIUFb+dpZvOceNE7fOnz/UsNztHAMEzSwf6idEqTOLHv0R8THc7/o72Qzrl8vMwAVdmreDFhloLxQcCC65QSC45AYfBV0yfGGjtx78cLjrVaHHF/yAhV8B8EsKfo3CL/pRHFZFnIBlCa5z9EP6If1wBdMPe5QleMkNAumHuZ9+SD9cYPphjzpHP6Qf0g9XMP2wR1mCl9wgkH6Y++mH9MMFph/2qHP0Q/oh/XAF0w97lCV4yQ0C6Ye5n35IP1xg+mGPOkc/pB/SD1cw/bBHWYKX3CCQfpj76Yfr+QfwnsxmcLvdhQAAAABJRU5ErkJggg==') !important;
694 +background-size: cover !important;
695 +}
696 +
697 +.pagelayer-heading-tab-panel{
698 +display:none;
699 +}
700 +
701 +/* ---- Horizontal Sub-navigation (Screen Tabs) ---- */
702 +.pagelayer-styles-screens {
703 +border-bottom: 1px solid #f1f5f9 !important;
704 +padding: 0 0 8px 0 !important;
705 +display: flex;
706 +gap: 8px;
707 +list-style: none;
708 +margin: 0 0 18px 0 !important;
709 +}
710 +
711 +.pagelayer-styles-screens>li{
712 +display: block;
713 +margin: 0;
714 +}
715 +
716 +.pagelayer-styles-screen-tab {
717 +display: inline-flex !important;
718 +align-items: center;
719 +color: #4b5563 !important;
720 +padding: 8px 16px !important;
721 +text-decoration: none;
722 +font-size: 13px !important;
723 +font-weight: 500 !important;
724 +border-radius: 6px !important;
725 +cursor: pointer;
726 +border: 1px solid transparent !important;
727 +background: transparent !important;
728 +transition: all 0.2s ease-in-out;
729 +line-height: 1.2 !important;
730 +margin: 0 !important;
731 +}
732 +
733 +.pagelayer-styles-screen-tab:hover {
734 +background: #f8fafc !important;
735 +color: #1e293b !important;
736 +border-color: #f1f5f9 !important;
737 +}
738 +
739 +.pagelayer-styles-screen-tab.nav-tab-active {
740 +background: #eef2ff !important;
741 +color: #2563eb !important;
742 +border-color: #c7d2fe !important;
743 +font-weight: 600 !important;
744 +box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05) !important;
745 +}
746 +
747 +/* ---- Vertical Sub-navigation (Heading Tabs) ---- */
748 +.pagelayer-heading-wrapper{
749 +margin-right: 20px;
750 +border-bottom: none !important;
751 +padding: 0 !important;
752 +display: flex;
753 +flex-direction: column;
754 +gap: 6px;
755 +list-style: none;
756 +}
757 +
758 +.pagelayer-heading-wrapper>li {
759 +display: block;
760 +margin: 0;
761 +}
762 +
763 +.pagelayer-heading-wrapper .nav-tab,
764 +.pagelayer-heading-tab {
765 +display: flex !important;
766 +align-items: center;
767 +gap: 10px;
768 +color: #4b5563 !important;
769 +padding: 10px 14px !important;
770 +text-decoration: none;
771 +font-size: 13.5px !important;
772 +font-weight: 500 !important;
773 +border-radius: 6px !important;
774 +cursor: pointer;
775 +border: 1px solid transparent !important;
776 +background: transparent !important;
777 +transition: all 0.2s ease-in-out;
778 +line-height: 1.2 !important;
779 +margin: 0 !important;
780 +}
781 +
782 +.pagelayer-heading-wrapper .nav-tab:hover,
783 +.pagelayer-heading-tab:hover {
784 +background: #f8fafc !important;
785 +color: #1e293b !important;
786 +border-color: #f1f5f9 !important;
787 +}
788 +
789 +.pagelayer-heading-wrapper .nav-tab.nav-tab-active,
790 +.pagelayer-heading-tab.nav-tab-active {
791 +background: #eef2ff !important;
792 +color: #2563eb !important;
793 +border-color: #c7d2fe !important;
794 +font-weight: 600 !important;
795 +box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05) !important;
796 +}
797 +
798 +.pagelayer-settings-card input.pagelayer-website-padding {
799 +width: 55px !important;
800 +padding: 8px 6px !important;
801 +text-align: center;
802 +display: inline-block;
803 +}
804 +
805 +.button-pagelayer {
806 +padding: 9px 20px !important;
807 +font-size: 13px !important;
808 +font-weight: 600 !important;
809 +background: #2563eb !important;
810 +color: #fff !important;
811 +border: 1px solid #2563eb !important;
812 +transition: all 0.2s ease-in-out !important;
813 +cursor: pointer;
814 +border-radius: 6px !important;
815 +display: inline-block !important;
816 +box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2) !important;
817 +}
818 +
819 +.button-pagelayer:hover {
820 +background: #1d4ed8 !important;
821 +border-color: #1d4ed8 !important;
822 +color: #fff !important;
823 +box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3) !important;
824 +}
825 +
826 +.pagelayer-pro-div {
827 +margin: 40px auto !important;
828 +display: block !important;
829 +max-width: 600px !important;
830 +padding: 40px 24px !important;
831 +background-color: #fff !important;
832 +border-radius: 12px !important;
833 +box-shadow: 0 8px 30px rgba(0,0,0,0.05) !important;
834 +border: 1px solid #f0f0f0 !important;
835 +box-sizing: border-box !important;
836 +}
837 +
838 +.pagelayer-pro-head {
839 +font-size: 24px !important;
840 +margin-top: 0 !important;
841 +color: #333 !important;
842 +font-weight: 600 !important;
843 +text-align: center !important;
844 +}
845 +
846 +.pagelayer-pro-message {
847 +color: #666 !important;
848 +font-size: 15px !important;
849 +line-height: 1.6 !important;
850 +margin: 20px auto 24px auto !important;
851 +max-width: 480px !important;
852 +text-align: center !important;
853 +}
854 +
855 +/* ---- Support / FAQ card compat ---- */
856 +.pagelayer-tab-panel h2 {
857 +font-size: 16px;
858 +font-weight: 600;
859 +color: #1a1a2e;
860 +margin-bottom: 10px;
861 +}
862 +
863 +.pagelayer-tab-panel h3 {
864 +font-size: 14px;
865 +color: #000;
866 +font-weight: 700;
867 +line-height: 1.6;
868 +}
869 +
870 +/* ---- Admin Footer ---- */
871 +#pagelayer-admin-footer {
872 +background: #fff;
873 +border-top: 1px solid #e2e4e9;
874 +padding: 14px 28px;
875 +font-size: 12.5px;
876 +color: #6b7280;
877 +display: flex;
878 +justify-content: space-between;
879 +align-items: center;
880 +}
881 +
882 +#pagelayer-admin-footer a {
883 +color: #2563eb;
884 +text-decoration: none;
885 +}
886 +
887 +#pagelayer-admin-footer a:hover {
888 +text-decoration: underline;
889 +}
890 +
891 +.pagelayer-footer-links {
892 +display: flex;
893 +gap: 18px;
894 +}
895 +
896 +/* ---- Nav Tab wrapper override ---- */
897 +#pagelayer-admin-wrap .nav-tab-wrapper {
898 +border-bottom: none;
899 +margin-top: 0;
900 +margin-bottom: 0;
901 +padding-top: 0;
902 +}
903 +
904 +/* ---- Scrollbar ---- */
905 +#pagelayer-sidebar-nav::-webkit-scrollbar {
906 +width: 4px;
907 +}
908 +
909 +#pagelayer-sidebar-nav::-webkit-scrollbar-track {
910 +background: transparent;
911 +}
912 +
913 +#pagelayer-sidebar-nav::-webkit-scrollbar-thumb {
914 +background: rgba(255, 255, 255, 0.2);
915 +border-radius: 4px;
916 +}
917 +
918 +/* ---- Success notice ---- */
919 +.pagelayer-settings-content .notice {
920 +border-radius: 8px;
921 +margin-bottom: 16px;
922 +}
923 +
924 +/* ---- Security note ---- */
925 +.pl-security-note {
926 +background: #fef9e7;
927 +border: 1px solid #fde68a;
928 +border-radius: 6px;
929 +padding: 10px 14px;
930 +font-size: 12.5px;
931 +color: #78350f;
932 +margin-top: 10px;
933 +line-height: 1.5;
934 +}
935 +
936 +.pl-security-note b {
937 +color: #dc2626;
938 +}
939 +
940 +/* ---- Highly recommended note ---- */
941 +.pl-recommend-note {
942 +color: #2563eb;
943 +font-size: 12px;
944 +font-weight: 600;
945 +margin-top: 4px;
946 +display: block;
947 +}
948 +
949 +/* ---- Textarea in settings ---- */
950 +.pagelayer-settings-card textarea {
951 +min-height: 80px;
952 +resize: vertical;
953 +}
954 +
955 +/* ---- Table inside settings panel ---- */
956 +.pagelayer-tab-panel>table,
957 +.pagelayer-settings-card table {
958 +width: 100%;
959 +border-collapse: collapse;
960 +}
961 +
962 +.pagelayer-tab-panel>table th,
963 +.pagelayer-settings-card table th {
964 +text-align: left;
965 +font-weight: 600;
966 +font-size: 13px;
967 +color: #374151;
968 +padding: 10px 20px 10px 0;
969 +width: 180px;
970 +vertical-align: top;
971 +}
972 +
973 +.pagelayer-tab-panel>table td,
974 +.pagelayer-settings-card table td {
975 +padding: 10px 0;
976 +font-size: 13px;
977 +color: #1a1a2e;
978 +}
979 +
980 +#pagelayer-settings-content h2.nav-tab-wrapper.pagelayer-wrapper {
981 +display: none !important;
982 +}
983 +
984 +/* Hide duplicate bottom save button on website settings */
985 +.pagelayer-setting-form .button-submit {
986 +display: none !important;
987 +}
988 +
989 +/* ============================================================
990 +WordPress Core List Screen Styling (Templates & Fonts)
991 +============================================================ */
992 +.post-type-pagelayer-template #wpbody-content,
993 +.post-type-pagelayer-fonts #wpbody-content {
994 +background: #f0f0f1;
995 +padding: 24px 28px;
996 +}
997 +
998 +.post-type-pagelayer-template .wrap,
999 +.post-type-pagelayer-fonts .wrap {
1000 +margin: 0;
1001 +background: #fff;
1002 +border: 1px solid #e2e4e9;
1003 +border-radius: 10px;
1004 +padding: 22px 28px;
1005 +box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
1006 +max-width: 1200px;
1007 +}
1008 +
1009 +.post-type-pagelayer-template .wp-heading-inline,
1010 +.post-type-pagelayer-fonts .wp-heading-inline {
1011 +font-size: 20px;
1012 +font-weight: 700;
1013 +color: #1a1a2e;
1014 +margin: 0 12px 0 0;
1015 +}
1016 +
1017 +.post-type-pagelayer-template .page-title-action,
1018 +.post-type-pagelayer-fonts .page-title-action {
1019 +background: #eef2ff !important;
1020 +color: #2563eb !important;
1021 +border: 1px solid #c7d2fe !important;
1022 +border-radius: 8px !important;
1023 +padding: 7px 16px !important;
1024 +font-size: 13px !important;
1025 +font-weight: 600 !important;
1026 +transition: all 0.2s ease-in-out !important;
1027 +display: inline-block;
1028 +text-decoration: none;
1029 +line-height: 1.2;
1030 +height: auto;
1031 +box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05) !important;
1032 +}
1033 +
1034 +.post-type-pagelayer-template .page-title-action:hover,
1035 +.post-type-pagelayer-fonts .page-title-action:hover {
1036 +background: #2563eb !important;
1037 +color: #fff !important;
1038 +border-color: #2563eb !important;
1039 +box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -1px rgba(37, 99, 235, 0.06) !important;
1040 +}
1041 +
1042 +/* Modern Tab style for Filters */
1043 +.post-type-pagelayer-template .subsubsub,
1044 +.post-type-pagelayer-fonts .subsubsub {
1045 +margin: 20px 0 16px 0;
1046 +font-size: 13px;
1047 +color: #64748b;
1048 +display: flex;
1049 +flex-wrap: wrap;
1050 +gap: 6px;
1051 +border-bottom: none;
1052 +padding: 0;
1053 +list-style: none;
1054 +}
1055 +
1056 +.post-type-pagelayer-template .subsubsub li,
1057 +.post-type-pagelayer-fonts .subsubsub li {
1058 +display: inline-block;
1059 +margin: 0;
1060 +padding: 0;
1061 +font-size: 13px;
1062 +color: #94a3b8;
1063 +}
1064 +
1065 +/* Hide the vertical separators (|) in WordPress subsubsub */
1066 +.post-type-pagelayer-template .subsubsub li::after,
1067 +.post-type-pagelayer-fonts .subsubsub li::after {
1068 +content: "";
1069 +margin: 0;
1070 +display: none;
1071 +}
1072 +
1073 +.post-type-pagelayer-template .subsubsub a,
1074 +.post-type-pagelayer-fonts .subsubsub a {
1075 +display: inline-flex !important;
1076 +align-items: center;
1077 +color: #4b5563 !important;
1078 +padding: 8px 16px !important;
1079 +text-decoration: none;
1080 +font-size: 13px !important;
1081 +font-weight: 500 !important;
1082 +border-radius: 6px !important;
1083 +cursor: pointer;
1084 +border: 1px solid #e2e8f0 !important;
1085 +background: #fff !important;
1086 +transition: all 0.2s ease-in-out;
1087 +line-height: 1.2 !important;
1088 +margin: 0 !important;
1089 +box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
1090 +}
1091 +
1092 +.post-type-pagelayer-template .subsubsub a:hover,
1093 +.post-type-pagelayer-fonts .subsubsub a:hover {
1094 +background: #f8fafc !important;
1095 +color: #1e293b !important;
1096 +border-color: #cbd5e1 !important;
1097 +}
1098 +
1099 +.post-type-pagelayer-template .subsubsub a.current,
1100 +.post-type-pagelayer-fonts .subsubsub a.current {
1101 +background: #eef2ff !important;
1102 +color: #2563eb !important;
1103 +border-color: #c7d2fe !important;
1104 +font-weight: 600 !important;
1105 +box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05) !important;
1106 +}
1107 +
1108 +/* Tablenav & Bulk Actions */
1109 +.post-type-pagelayer-template .tablenav,
1110 +.post-type-pagelayer-fonts .tablenav {
1111 +height: auto;
1112 +padding: 8px 0;
1113 +}
1114 +
1115 +.post-type-pagelayer-template .tablenav select,
1116 +.post-type-pagelayer-fonts .tablenav select {
1117 +border: 1.5px solid #d0d5dd;
1118 +border-radius: 6px;
1119 +padding: 5px 30px 5px 10px;
1120 +font-size: 12.5px;
1121 +color: #1a1a2e;
1122 +height: auto;
1123 +line-height: 1.2;
1124 +-moz-appearance: none;
1125 +-webkit-appearance: none;
1126 +appearance: none;
1127 +background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E") !important;
1128 +background-position: right 8px center !important;
1129 +background-repeat: no-repeat !important;
1130 +background-size: 16px 16px !important;
1131 +}
1132 +
1133 +.post-type-pagelayer-template .tablenav input[type="submit"],
1134 +.post-type-pagelayer-fonts .tablenav input[type="submit"],
1135 +body.post-type-pagelayer-template.edit-php .search-box input[type="submit"],
1136 +body.post-type-pagelayer-fonts.edit-php .search-box input[type="submit"] {
1137 +background: #fff !important;
1138 +color: #344054 !important;
1139 +border: 1.5px solid #d0d5dd !important;
1140 +border-radius: 6px !important;
1141 +padding: 6px 14px !important;
1142 +font-size: 12.5px !important;
1143 +font-weight: 600 !important;
1144 +cursor: pointer !important;
1145 +height: auto !important;
1146 +line-height: 1.4 !important;
1147 +transition: all 0.2s ease-in-out !important;
1148 +box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
1149 +vertical-align: middle !important;
1150 +margin-left: 6px !important;
1151 +}
1152 +
1153 +.post-type-pagelayer-template .tablenav input[type="submit"]:hover,
1154 +.post-type-pagelayer-fonts .tablenav input[type="submit"]:hover,
1155 +body.post-type-pagelayer-template.edit-php .search-box input[type="submit"]:hover,
1156 +body.post-type-pagelayer-fonts.edit-php .search-box input[type="submit"]:hover {
1157 +background: #f9fafb !important;
1158 +border-color: #cbd5e1 !important;
1159 +color: #0f172a !important;
1160 +box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1) !important;
1161 +}
1162 +
1163 +
1164 +
1165 +/* Custom enqueued notice alerts */
1166 +.post-type-pagelayer-template .notice,
1167 +.post-type-pagelayer-fonts .notice {
1168 +border-radius: 8px !important;
1169 +box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
1170 +margin-bottom: 18px !important;
1171 +}
1172 +
1173 +/* ---- Responsive ---- */
1174 +@media (max-width: 960px) {
1175 +#pagelayer-sidebar {
1176 +width: 160px;
1177 +}
1178 +
1179 +#pagelayer-right-bar {
1180 +display: none;
1181 +}
1182 +}
1183 +
1184 +@media (max-width: 720px) {
1185 +#pagelayer-admin-wrap {
1186 +flex-direction: column;
1187 +}
1188 +
1189 +#pagelayer-sidebar {
1190 +width: 100%;
1191 +min-height: auto;
1192 +}
1193 +
1194 +#pagelayer-sidebar-nav {
1195 +display: flex;
1196 +flex-wrap: wrap;
1197 +padding: 6px;
1198 +}
1199 +
1200 +#pagelayer-sidebar-nav a {
1201 +flex: 1;
1202 +min-width: 120px;
1203 +border-left: none;
1204 +border-bottom: 3px solid transparent;
1205 +justify-content: center;
1206 +}
1207 +
1208 +#pagelayer-sidebar-nav a.pagelayer-nav-active {
1209 +border-left: none;
1210 +border-bottom-color: #2563eb;
1211 +background: #eef2ff;
1212 +color: #2563eb;
1213 +}
1214 +}
1215 +
1216 +/* ============================================================
1217 +Website Settings Modern Redesign
1218 +============================================================ */
1219 +#headings.pagelayer-tab-panel.pagelayer-tab-active {
1220 +display: flex !important;
1221 +gap: 28px;
1222 +align-items: flex-start;
1223 +}
1224 +
1225 +#headings.pagelayer-tab-panel>div:first-child {
1226 +width: 240px;
1227 +flex-shrink: 0;
1228 +background: #fff;
1229 +border: 1px solid #e2e8f0;
1230 +padding: 16px;
1231 +border-radius: 12px;
1232 +margin-top: 10px;
1233 +box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
1234 +}
1235 +
1236 +#headings.pagelayer-tab-panel>div:last-child {
1237 +flex: 1;
1238 +margin-top: 10px;
1239 +}
1240 +
1241 +.pagelayer-heading-tab-panel h2 {
1242 +text-align: left !important;
1243 +font-size: 15.5px !important;
1244 +font-weight: 600 !important;
1245 +color: #0f172a !important;
1246 +margin: 0 0 20px 0 !important;
1247 +letter-spacing: -0.1px;
1248 +border-bottom: 1px solid #f1f5f9;
1249 +padding-bottom: 12px;
1250 +}
1251 +
1252 +
1253 +/* Table Form Styling on Website Settings */
1254 +.pagelayer-tab-panel table {
1255 +width: 100%;
1256 +border-collapse: collapse;
1257 +}
1258 +
1259 +.pagelayer-tab-panel table th {
1260 +text-align: left;
1261 +font-weight: 500;
1262 +font-size: 13px;
1263 +color: #344054;
1264 +padding: 12px 20px 12px 0;
1265 +width: 180px;
1266 +vertical-align: middle;
1267 +border-bottom: 1px solid #f8fafc;
1268 +}
1269 +
1270 +.pagelayer-tab-panel table td {
1271 +padding: 12px 0;
1272 +font-size: 13px;
1273 +color: #0f172a;
1274 +vertical-align: middle;
1275 +border-bottom: 1px solid #f8fafc;
1276 +}
1277 +
1278 +.pagelayer-tab-panel table tr:last-child th,
1279 +.pagelayer-tab-panel table tr:last-child td {
1280 +border-bottom: none;
1281 +}
1282 +
1283 +/* Beautiful custom input controls */
1284 +.pagelayer-tab-panel select,
1285 +.pagelayer-tab-panel input[type="number"],
1286 +.pagelayer-tab-panel input[type="text"],
1287 +.pagelayer-tab-panel input[type="email"],
1288 +.pagelayer-tab-panel input[type="tel"],
1289 +.pagelayer-tab-panel textarea {
1290 +border: 1.5px solid #d0d5dd !important;
1291 +border-radius: 6px !important;
1292 +padding: 6px 12px !important;
1293 +font-size: 13px !important;
1294 +color: #0f172a !important;
1295 +background-color: #fff !important;
1296 +transition: all 0.2s ease-in-out !important;
1297 +outline: none !important;
1298 +box-sizing: border-box !important;
1299 +}
1300 +
1301 +.pagelayer-tab-panel select:focus,
1302 +.pagelayer-tab-panel input[type="number"]:focus,
1303 +.pagelayer-tab-panel input[type="text"]:focus,
1304 +.pagelayer-tab-panel textarea:focus {
1305 +border-color: #2563eb !important;
1306 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
1307 +}
1308 +
1309 +.pagelayer-tab-panel select {
1310 +cursor: pointer;
1311 +height: auto !important;
1312 +line-height: 1.4 !important;
1313 +padding-right: 30px !important;
1314 +-moz-appearance: none;
1315 +-webkit-appearance: none;
1316 +appearance: none;
1317 +background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E") !important;
1318 +background-position: right 8px center !important;
1319 +background-repeat: no-repeat !important;
1320 +background-size: 16px 16px !important;
1321 +}
1322 +
1323 +.pagelayer-tab-panel input.pagelayer-website-padding {
1324 +width: 60px !important;
1325 +text-align: center;
1326 +margin-right: 4px;
1327 +padding: 6px 8px !important;
1328 +}
1329 +
1330 +.pagelayer-tab-panel select.pagelayer-show-custom {
1331 +margin-right: 12px;
1332 +}
1333 +
1334 +.pagelayer-tab-panel table p {
1335 +font-size: 12px;
1336 +color: #64748b;
1337 +margin: 4px 0 0 0;
1338 +line-height: 1.4;
1339 +}
1340 +
1341 +/* ============================================================
1342 +Redesigned Templates and Fonts CPT Layout Overrides
1343 +============================================================ */
1344 +body.post-type-pagelayer-template.edit-php #wpbody-content,
1345 +body.post-type-pagelayer-fonts.edit-php #wpbody-content {
1346 +background: #f8fafc;
1347 +padding: 0 !important;
1348 +}
1349 +
1350 +body.post-type-pagelayer-template.edit-php #wpbody-content>.wrap,
1351 +body.post-type-pagelayer-fonts.edit-php #wpbody-content>.wrap {
1352 +opacity: 0;
1353 +position: absolute;
1354 +z-index: -100;
1355 +}
1356 +
1357 +body.post-type-pagelayer-template.edit-php #pagelayer-settings-content .wrap,
1358 +body.post-type-pagelayer-fonts.edit-php #pagelayer-settings-content .wrap {
1359 +opacity: 1 !important;
1360 +position: relative !important;
1361 +z-index: 1 !important;
1362 +display: block !important;
1363 +margin: 0 !important;
1364 +background: #fff !important;
1365 +border: 1px solid #e2e8f0 !important;
1366 +border-radius: 12px !important;
1367 +padding: 24px !important;
1368 +box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
1369 +max-width: 1200px !important;
1370 +}
1371 +
1372 +body.post-type-pagelayer-template.edit-php #pagelayer-settings-content,
1373 +body.post-type-pagelayer-fonts.edit-php #pagelayer-settings-content {
1374 +padding: 55px 28px 20px 28px;
1375 +overflow-y: auto;
1376 +}
1377 +
1378 +/* Sidebar Navigation section title */
1379 +#pagelayer-admin-wrap .pl-nav-section-title {
1380 +font-size: 11px;
1381 +font-weight: 600;
1382 +text-transform: uppercase;
1383 +color: #94a3b8;
1384 +padding: 16px 16px 8px;
1385 +letter-spacing: 0.5px;
1386 +}
1387 +
1388 +/* Hide duplicate/original buttons inside the wrap card completely */
1389 +body.post-type-pagelayer-template.edit-php .wrap .page-title-action,
1390 +body.post-type-pagelayer-template.edit-php .wrap .pagelayer-temp-export-but,
1391 +body.post-type-pagelayer-fonts.edit-php .wrap .page-title-action {
1392 +display: none !important;
1393 +}
1394 +
1395 +/* Redesigned filter link overrides */
1396 +body.post-type-pagelayer-template.edit-php .subsubsub,
1397 +body.post-type-pagelayer-fonts.edit-php .subsubsub {
1398 +margin: 0 0 12px 0 !important;
1399 +}
1400 +
1401 +/* Keep action buttons aligned and premium */
1402 +body.post-type-pagelayer-template.edit-php .pagelayer-header-actions a.page-title-action,
1403 +body.post-type-pagelayer-fonts.edit-php .pagelayer-header-actions a.page-title-action {
1404 +background: #2563eb !important;
1405 +color: #fff !important;
1406 +border: none !important;
1407 +border-radius: 6px !important;
1408 +padding: 9px 20px !important;
1409 +font-size: 13px !important;
1410 +font-weight: 600 !important;
1411 +cursor: pointer;
1412 +text-decoration: none;
1413 +transition: background 0.2s;
1414 +height: auto !important;
1415 +line-height: 1.4 !important;
1416 +box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3) !important;
1417 +display: inline-block;
1418 +}
1419 +
1420 +body.post-type-pagelayer-template.edit-php .pagelayer-header-actions a.page-title-action:hover,
1421 +body.post-type-pagelayer-fonts.edit-php .pagelayer-header-actions a.page-title-action:hover {
1422 +background: #1d4ed8 !important;
1423 +}
1424 +
1425 +body.post-type-pagelayer-template.edit-php .pagelayer-header-actions a.pagelayer-temp-export-but,
1426 +body.post-type-pagelayer-fonts.edit-php .pagelayer-header-actions a.pagelayer-temp-export-but {
1427 +display: inline-flex;
1428 +align-items: center;
1429 +gap: 6px;
1430 +color: #4b5563 !important;
1431 +font-size: 13px !important;
1432 +text-decoration: none;
1433 +padding: 9px 18px !important;
1434 +border: 1px solid #d0d5dd !important;
1435 +border-radius: 6px !important;
1436 +background: #fff !important;
1437 +cursor: pointer;
1438 +transition: background 0.15s;
1439 +font-weight: 600 !important;
1440 +height: auto !important;
1441 +line-height: 1.4 !important;
1442 +}
1443 +
1444 +body.post-type-pagelayer-template.edit-php .pagelayer-header-actions a.pagelayer-temp-export-but:hover,
1445 +body.post-type-pagelayer-fonts.edit-php .pagelayer-header-actions a.pagelayer-temp-export-but:hover {
1446 +background: #f8fafc !important;
1447 +}
1448 +
1449 +/* ============================================================
1450 +Export Theme Page Modern Redesign Styles
1451 +============================================================ */
1452 +.pagelayer-export-grid {
1453 +display: flex !important;
1454 +flex-direction: column !important;
1455 +gap: 28px !important;
1456 +width: 100% !important;
1457 +margin-top: 10px !important;
1458 +margin-bottom: 30px !important;
1459 +}
1460 +
1461 +.pagelayer-export-col {
1462 +width: 100% !important;
1463 +}
1464 +
1465 +.pagelayer-export-table-wrap {
1466 +max-height: 400px;
1467 +overflow-y: auto;
1468 +}
1469 +
1470 +.pagelayer-export-table-wrap::-webkit-scrollbar {
1471 +width: 6px;
1472 +}
1473 +
1474 +.pagelayer-export-table-wrap::-webkit-scrollbar-track {
1475 +background: #f8fafc;
1476 +}
1477 +
1478 +.pagelayer-export-table-wrap::-webkit-scrollbar-thumb {
1479 +background: #cbd5e1;
1480 +border-radius: 3px;
1481 +}
1482 +
1483 +.pagelayer-export-table-wrap::-webkit-scrollbar-thumb:hover {
1484 +background: #94a3b8;
1485 +}
1486 +
1487 +.pagelayer-export-table {
1488 +width: 100% !important;
1489 +border-collapse: separate !important;
1490 +border-spacing: 0 !important;
1491 +border: none !important;
1492 +}
1493 +
1494 +.pagelayer-export-table thead th {
1495 +background: #f8fafc !important;
1496 +border-bottom: 1.5px solid #e2e8f0 !important;
1497 +font-weight: 600 !important;
1498 +font-size: 11.5px !important;
1499 +color: #475569 !important;
1500 +padding: 14px 16px !important;
1501 +text-transform: uppercase !important;
1502 +letter-spacing: 0.5px !important;
1503 +text-align: left !important;
1504 +position: sticky;
1505 +top: 0;
1506 +z-index: 1;
1507 +}
1508 +
1509 +/* Ensure centering for checkbox column */
1510 +.pagelayer-export-table thead th:first-child,
1511 +.pagelayer-export-table tbody td:first-child {
1512 +text-align: center !important;
1513 +width: 45px !important;
1514 +}
1515 +
1516 +.pagelayer-export-table tbody td {
1517 +padding: 12px 16px !important;
1518 +vertical-align: middle !important;
1519 +font-size: 13px !important;
1520 +color: #334155 !important;
1521 +border-bottom: 1px solid #f1f5f9 !important;
1522 +background: #fff !important;
1523 +text-align: left !important;
1524 +}
1525 +
1526 +.pagelayer-export-table tbody tr:last-child td {
1527 +border-bottom: none !important;
1528 +}
1529 +
1530 +.pagelayer-export-table tbody tr:hover td {
1531 +background: #fafbfd !important;
1532 +}
1533 +
1534 +/* Checkbox style inside export cards */
1535 +.pagelayer-export-table input[type="checkbox"] {
1536 +border: 1.5px solid #cbd5e1 !important;
1537 +border-radius: 4px !important;
1538 +width: 16px !important;
1539 +height: 16px !important;
1540 +accent-color: #2563eb !important;
1541 +cursor: pointer !important;
1542 +transition: all 0.15s !important;
1543 +margin: 0 !important;
1544 +vertical-align: middle;
1545 +}
1546 +
1547 +/* Display On Condition Tag Pill Badges */
1548 +.pagelayer-export-table tbody tr td span {
1549 +background: #eef2ff !important;
1550 +color: #2563eb !important;
1551 +border: 1px solid #e0e7ff !important;
1552 +padding: 3px 8px !important;
1553 +border-radius: 6px !important;
1554 +font-size: 11px !important;
1555 +font-weight: 500 !important;
1556 +display: inline-block !important;
1557 +margin-bottom: 4px !important;
1558 +line-height: 1.2;
1559 +}
1560 +
1561 +/* Submit Action Button redesign */
1562 +.pagelayer-temp-submit {
1563 +margin-top: 15px;
1564 +text-align: center;
1565 +width: 100%;
1566 +}
1567 +
1568 +.pagelayer-temp-submit-btn {
1569 +background: #2563eb !important;
1570 +color: #fff !important;
1571 +border: none !important;
1572 +border-radius: 8px !important;
1573 +padding: 12px 32px !important;
1574 +font-size: 13.5px !important;
1575 +font-weight: 600 !important;
1576 +cursor: pointer !important;
1577 +transition: all 0.2s ease-in-out !important;
1578 +box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.15), 0 2px 4px -1px rgba(37, 99, 235, 0.1) !important;
1579 +height: auto !important;
1580 +line-height: 1.4 !important;
1581 +display: inline-block;
1582 +}
1583 +
1584 +.pagelayer-temp-submit-btn:hover {
1585 +background: #1d4ed8 !important;
1586 +box-shadow: 0 6px 12px -2px rgba(37, 99, 235, 0.25), 0 3px 6px -3px rgba(37, 99, 235, 0.15) !important;
1587 +transform: translateY(-1px);
1588 +}
1589 +
1590 +.pagelayer-temp-submit-btn:active {
1591 +transform: translateY(0);
1592 +}
1593 +
1594 +/* Premium Table Styling for System Information */
1595 +#pagelayer-settings-content .postbox {
1596 +border: 1px solid #e2e8f0 !important;
1597 +border-radius: 12px !important;
1598 +box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
1599 +overflow: hidden !important;
1600 +margin-top: 10px !important;
1601 +}
1602 +
1603 +#pagelayer-settings-content .postbox table.users {
1604 +width: 100% !important;
1605 +margin: 0 !important;
1606 +border-collapse: collapse !important;
1607 +border: none !important;
1608 +}
1609 +
1610 +#pagelayer-settings-content .postbox table.users tr {
1611 +border-bottom: 1px solid #f1f5f9 !important;
1612 +}
1613 +
1614 +#pagelayer-settings-content .postbox table.users tr:last-child {
1615 +border-bottom: none !important;
1616 +}
1617 +
1618 +#pagelayer-settings-content .postbox table.users th {
1619 +text-align: left !important;
1620 +padding: 16px 24px !important;
1621 +font-weight: 500 !important;
1622 +color: #344054 !important;
1623 +font-size: 13px !important;
1624 +background: #f8fafc !important;
1625 +width: 250px !important;
1626 +vertical-align: middle !important;
1627 +border-right: 1px solid #f1f5f9 !important;
1628 +}
1629 +
1630 +#pagelayer-settings-content .postbox table.users td {
1631 +padding: 16px 24px !important;
1632 +color: #0f172a !important;
1633 +font-size: 13px !important;
1634 +background: #fff !important;
1635 +vertical-align: middle !important;
1636 +}
1637 +
1638 +/* License input & update button styling */
1639 +#pagelayer-settings-content .postbox table.users input[type="text"] {
1640 +border: 1.5px solid #d0d5dd !important;
1641 +border-radius: 6px !important;
1642 +padding: 8px 12px !important;
1643 +font-size: 13px !important;
1644 +color: #0f172a !important;
1645 +background: #fff !important;
1646 +transition: all 0.2s ease-in-out !important;
1647 +outline: none !important;
1648 +box-sizing: border-box !important;
1649 +box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
1650 +vertical-align: middle !important;
1651 +}
1652 +
1653 +#pagelayer-settings-content .postbox table.users input[type="text"]:focus {
1654 +border-color: #2563eb !important;
1655 +box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
1656 +}
1657 +
1658 +#pagelayer-settings-content .postbox table.users input[type="submit"] {
1659 +background: #2563eb !important;
1660 +color: #fff !important;
1661 +border: none !important;
1662 +border-radius: 6px !important;
1663 +padding: 9px 18px !important;
1664 +font-size: 13px !important;
1665 +font-weight: 600 !important;
1666 +cursor: pointer !important;
1667 +transition: all 0.2s ease-in-out !important;
1668 +box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2) !important;
1669 +height: auto !important;
1670 +line-height: 1.4 !important;
1671 +vertical-align: middle !important;
1672 +margin-left: 8px !important;
1673 +}
1674 +
1675 +#pagelayer-settings-content .postbox table.users input[type="submit"]:hover {
1676 +background: #1d4ed8 !important;
1677 +box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3) !important;
1678 +}
1679 +
1680 +/* Premium Alert Notices */
1681 +.pagelayer-premium-alert {
1682 +display: flex !important;
1683 +align-items: flex-start !important;
1684 +gap: 12px !important;
1685 +background: #eef2ff !important;
1686 +border: 1px solid #e0e7ff !important;
1687 +border-left: 4px solid #2563eb !important;
1688 +border-radius: 10px !important;
1689 +padding: 16px 20px !important;
1690 +margin-bottom: 24px !important;
1691 +box-shadow: 0 1px 3px rgba(37, 99, 235, 0.03) !important;
1692 +box-sizing: border-box !important;
1693 +width: 100% !important;
1694 +}
1695 +
1696 +.pagelayer-premium-alert.pagelayer-alert-warning {
1697 +background: #fffbeb !important;
1698 +border-color: #fef3c7 !important;
1699 +border-left-color: #f59e0b !important;
1700 +}
1701 +
1702 +.pagelayer-premium-alert .pagelayer-alert-icon {
1703 +font-size: 20px !important;
1704 +width: 20px !important;
1705 +height: 20px !important;
1706 +color: #2563eb !important;
1707 +flex-shrink: 0 !important;
1708 +margin-top: 2px !important;
1709 +display: inline-block !important;
1710 +}
1711 +
1712 +.pagelayer-premium-alert.pagelayer-alert-warning .pagelayer-alert-icon {
1713 +color: #d97706 !important;
1714 +}
1715 +
1716 +.pagelayer-premium-alert .pagelayer-alert-content {
1717 +font-size: 13px !important;
1718 +line-height: 1.5 !important;
1719 +color: #374151 !important;
1720 +}
1721 +
1722 +.pagelayer-premium-alert .pagelayer-alert-content b,
1723 +.pagelayer-premium-alert .pagelayer-alert-content strong {
1724 +color: #111827 !important;
1725 +font-weight: 600 !important;
1726 +}
1727 +
1728 +.pagelayer-premium-alert .pagelayer-alert-content a {
1729 +color: #2563eb !important;
1730 +text-decoration: underline !important;
1731 +font-weight: 600 !important;
1732 +transition: color 0.15s !important;
1733 +}
1734 +
1735 +.pagelayer-premium-alert .pagelayer-alert-content a:hover {
1736 +color: #1d4ed8 !important;
1737 +}
1738 +
1739 +/* ============================================================
1740 +Redesigned Recommended Plugins Section
1741 +============================================================ */
1742 +.pagelayer-recommended-plugins {
1743 +margin-top: 0;
1744 +margin-bottom: 24px;
1745 +}
1746 +
1747 +.pagelayer-recommended-plugins-body {
1748 +padding: 16px;
1749 +background: #fff;
1750 +}
1751 +
1752 +.pagelayer-recommended-plugin {
1753 +padding: 14px;
1754 +border-radius: 10px;
1755 +background: #f8fafc;
1756 +border: 1px solid #e2e8f0;
1757 +margin-bottom: 14px;
1758 +transition: all 0.2s ease;
1759 +}
1760 +
1761 +.pagelayer-recommended-plugin:hover {
1762 +box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
1763 +border-color: #cbd5e1;
1764 +}
1765 +
1766 +.pagelayer-recommended-plugin:last-child {
1767 +margin-bottom: 0;
1768 +}
1769 +
1770 +.pagelayer-recommended-plugin-info {
1771 +display: flex;
1772 +align-items: flex-start;
1773 +gap: 12px;
1774 +margin-bottom: 12px;
1775 +}
1776 +
1777 +.pagelayer-recommended-plugin-icon {
1778 +width: 36px;
1779 +height: 36px;
1780 +border-radius: 8px;
1781 +background: #eef2ff;
1782 +color: #2563eb;
1783 +display: flex;
1784 +align-items: center;
1785 +justify-content: center;
1786 +flex-shrink: 0;
1787 +}
1788 +
1789 +.pagelayer-recommended-plugin-icon .dashicons {
1790 +font-size: 20px;
1791 +width: 20px;
1792 +height: 20px;
1793 +}
1794 +
1795 +.pagelayer-recommended-plugin-details {
1796 +flex: 1;
1797 +}
1798 +
1799 +.pagelayer-recommended-plugin-name {
1800 +font-size: 13px;
1801 +font-weight: 600;
1802 +color: #0f172a;
1803 +line-height: 1.3;
1804 +}
1805 +
1806 +.pagelayer-recommended-plugin-desc {
1807 +font-size: 11px;
1808 +color: #64748b;
1809 +line-height: 1.4;
1810 +margin-top: 3px;
1811 +}
1812 +
1813 +.pagelayer-recommended-plugin-action {
1814 +display: flex;
1815 +margin-top: 8px;
1816 +justify-content: space-between;
1817 +align-items: center;
1818 +border-top: 1px dashed #e2e8f0;
1819 +padding-top: 10px;
1820 +}
1821 +
1822 +.pagelayer-recommended-plugin-link {
1823 +font-size: 11px;
1824 +color: #64748b;
1825 +text-decoration: none;
1826 +font-weight: 500;
1827 +transition: color 0.15s ease;
1828 +}
1829 +
1830 +.pagelayer-recommended-plugin-link:hover {
1831 +color: #2563eb;
1832 +text-decoration: underline;
1833 +}
1834 +
1835 +/* Recommended plugin custom buttons */
1836 +.pl-plugin-btn {
1837 +display: inline-flex;
1838 +align-items: center;
1839 +justify-content: center;
1840 +border-radius: 6px;
1841 +padding: 5px 12px;
1842 +font-size: 11px;
1843 +font-weight: 600;
1844 +cursor: pointer;
1845 +transition: all 0.15s ease;
1846 +border: 1px solid transparent;
1847 +font-family: inherit;
1848 +line-height: 1.2;
1849 +}
1850 +
1851 +.pl-plugin-btn-primary {
1852 +background: #0f172a !important;
1853 +color: #fff !important;
1854 +border: 1px solid #0f172a !important;
1855 +box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
1856 +transition: all 0.2s ease-in-out !important;
1857 +}
1858 +
1859 +.pl-plugin-btn-primary:hover {
1860 +background: #1e293b !important;
1861 +border-color: #1e293b !important;
1862 +box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
1863 +transform: translateY(-1px);
1864 +}
1865 +
1866 +.pl-plugin-btn-primary:disabled {
1867 +background: #94a3b8 !important;
1868 +border-color: #94a3b8 !important;
1869 +cursor: not-allowed;
1870 +box-shadow: none !important;
1871 +}
1872 +
1873 +.pl-plugin-btn-secondary {
1874 +background: #f8fafc !important;
1875 +color: #334155 !important;
1876 +border: 1px solid #cbd5e1 !important;
1877 +box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
1878 +transition: all 0.2s ease-in-out !important;
1879 +}
1880 +
1881 +.pl-plugin-btn-secondary:hover {
1882 +background: #f1f5f9 !important;
1883 +color: #0f172a !important;
1884 +border-color: #94a3b8 !important;
1885 +transform: translateY(-1px);
1886 +}
1887 +
1888 +.pl-plugin-btn-secondary:disabled {
1889 +background: #f1f5f9 !important;
1890 +color: #94a3b8 !important;
1891 +border-color: #cbd5e1 !important;
1892 +cursor: not-allowed;
1893 +box-shadow: none !important;
1894 +}
1895 +
1896 +/* Badges */
1897 +.pl-plugin-badge {
1898 +display: inline-flex;
1899 +align-items: center;
1900 +padding: 4px 10px;
1901 +font-size: 10.5px;
1902 +font-weight: 600;
1903 +border-radius: 99px;
1904 +line-height: 1;
1905 +}
1906 +
1907 +.pl-plugin-success {
1908 +color: #15803d !important;
1909 +border: 1px solid #bbf7d0 !important;
1910 +background: #dcfce7 !important;
1911 +}
1912 +
1913 +/* ---- User Flow: Back to List Button ---- */
1914 +.pl-back-to-list-btn {
1915 +display: inline-flex !important;
1916 +align-items: center !important;
1917 +gap: 6px !important;
1918 +color: #2563eb !important;
1919 +background: #eef2ff !important;
1920 +border: 1.5px solid #c7d2fe !important;
1921 +border-radius: 8px !important;
1922 +padding: 8px 16px !important;
1923 +font-size: 13px !important;
1924 +font-weight: 600 !important;
1925 +text-decoration: none !important;
1926 +transition: all 0.2s ease-in-out !important;
1927 +margin-bottom: 0 !important;
1928 +box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05) !important;
1929 +vertical-align: middle !important;
1930 +height: auto !important;
1931 +line-height: 1.4 !important;
1932 +width: auto !important;
1933 +float: right !important;
1934 +margin-top: 4px !important;
1935 +}
1936 +
1937 +.pl-back-to-list-btn:hover {
1938 +background: #2563eb !important;
1939 +color: #fff !important;
1940 +border-color: #2563eb !important;
1941 +box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -1px rgba(37, 99, 235, 0.06) !important;
1942 +}
1943 +
1944 +.pl-back-to-list-btn .dashicons {
1945 +font-size: 16px !important;
1946 +width: 16px !important;
1947 +height: 16px !important;
1948 +display: flex !important;
1949 +align-items: center !important;
1950 +justify-content: center !important;
1951 +}
1952 +
1953 +/* Pagelayer License Page Redesign Layout */
1954 +body.pagelayer_page_pagelayer_license #pagelayer-settings-content {
1955 +max-width: 800px !important;
1956 +margin: 0 auto !important;
1957 +width: 100% !important;
1958 +}
1959 +
1960 +/* Hide sidebar when pl-no-sidebar class is applied */
1961 +.pl-no-sidebar #pagelayer-sidebar {
1962 +display: none !important;
1963 +}
1964 +
1965 +/* Fix screen meta links positioning */
1966 +#pagelayer-screen-meta-wrap #screen-meta-links{
1967 +position: relative !important;
1968 +top: auto !important;
1969 +right: auto !important;
1970 +margin: 0 !important;
1971 +}
1972 +
1973 +/* Fix screen meta panels positioning */
1974 +#pagelayer-main-content > #screen-meta {
1975 +position: relative !important;
1976 +top: auto !important;
1977 +right: auto !important;
1978 +margin: 0 28px !important;
1979 +box-sizing: border-box;
1980 +}
1981 +
1982 +/* Fix screen meta links button styling */
1983 +#pagelayer-screen-meta-wrap #screen-meta-links .show-settings {
1984 +border-bottom: 1px solid #c3c4c7 !important;
1985 +border-radius: 3px !important;
1986 +margin-left: 6px !important;
1987 +}