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