PluginProbe
WP Coder – Insert & Manage Code Snippets / 3.4
WP Coder – Insert & Manage Code Snippets v3.4
4.5.1 1.1 2.3.1 2.3.2 2.4.1 2.5.1 2.5.2 2.5.3 2.5.4 2.5.5 2.5.6 3.0 3.0.1 3.0.2 3.0.3 3.0.4 3.0.5 3.1 3.1.1 3.2 3.2.1 3.3 3.4 3.5 3.5.1 All 39 releases
wp-coder / assets / css / admin.css

admin.css in WP Coder – Insert & Manage Code Snippets 3.4, at assets/css/admin.css

1,130 lines 21.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 :root {
3 --wowp-blue: #005BBF;
4 --wowp-yellow: #FFD500;
5 --wowp-border: #cccccc;
6 --wowp-dark: #14102C;
7 --wowp-orange: #E86E2C;
8 --wowp-bg: #EEF3EB;
9 --wowp-success: #00BF04;
10 --wowp-danger: #BF0400;
11 }
12
13 .wowp-box {
14 padding: 1.5rem 1.25rem;
15 margin-top: 50px;
16 position: relative;
17 box-sizing: border-box;
18 background: #ffffff;
19 background-clip: padding-box;
20 border: solid 2px transparent;
21 border-radius: 4px;
22 }
23 .wowp-box::before {
24 content: "";
25 position: absolute;
26 top: 0;
27 right: 0;
28 bottom: 0;
29 left: 0;
30 z-index: -1;
31 margin: -2px;
32 border-radius: inherit;
33 background: linear-gradient(to bottom, var(--wowp-blue), var(--wowp-yellow));
34 }
35
36 .wowp-header-border {
37 height: 5px;
38 background: linear-gradient(to right, var(--wowp-blue), var(--wowp-yellow));
39 margin-left: -20px;
40 }
41
42 .wowp-header {
43 position: relative;
44 padding: 32px 36px;
45 margin-left: -20px;
46 display: flex;
47 align-items: center;
48 gap: 1rem;
49 flex-wrap: wrap;
50 }
51
52 .wowp-header-title {
53 display: flex;
54 align-items: center;
55 background: #ffffff;
56 padding: 22px 36px;
57 margin-left: -20px;
58 border-top: 1px solid #dcdcdc;
59 border-bottom: 1px solid #dcdcdc;
60 }
61 .wowp-header-title h2 {
62 font-size: 22px;
63 font-weight: 600;
64 margin: 0;
65 }
66 .wowp-header-title .button {
67 margin-left: 20px;
68 }
69 .wowp-header-title .wowp-notice-license {
70 margin-left: 20px;
71 }
72
73 .wowp-logo {
74 display: flex;
75 align-items: center;
76 }
77
78 .wowp-logo img {
79 width: 40px;
80 }
81
82 .wowp-header h1 {
83 position: relative;
84 margin: 0 35px 0 0;
85 }
86
87 .wowp-version {
88 position: absolute;
89 transform: translateY(-50%) translateX(50%);
90 font-size: 12px;
91 font-weight: normal;
92 }
93
94 .wowp-links {
95 position: absolute;
96 bottom: 0;
97 left: 36px;
98 display: flex;
99 }
100 @media screen and (max-width: 850px) {
101 .wowp-links {
102 display: none;
103 }
104 }
105 .wowp-links img {
106 width: 15px;
107 height: 15px;
108 }
109
110 .wowp-links a {
111 text-decoration: none;
112 display: flex;
113 flex-direction: column;
114 font-size: 12px;
115 align-items: center;
116 padding: 5px;
117 transition: all 0.15s linear;
118 }
119
120 .wowp-links a:hover {
121 color: #14102C;
122 }
123
124 .wowp-links .codericon,
125 .wowp-links .dashicons {
126 width: 15px;
127 height: 15px;
128 font-size: 15px;
129 color: #596FF9;
130 display: none;
131 }
132
133 .wowp-wrap .nav-tab-wrapper .nav-tab-active {
134 color: var(--wowp-blue);
135 }
136
137 .wowp-list {
138 padding: 50px 36px 50px 16px;
139 }
140
141 @media screen and (max-width: 782px) {
142 .wowp-list td.column-mode span:first-child {
143 margin-left: 0;
144 }
145 }
146 .wowp-list .row-actions .duplicate a {
147 color: green;
148 }
149 .wowp-list .row-actions .export a {
150 color: orange;
151 }
152
153 .wowp-status-on,
154 .wowp-status-off {
155 display: inline-block;
156 width: 14px;
157 height: 14px;
158 border-radius: 50%;
159 }
160
161 .wowp-status-on {
162 background-color: green;
163 }
164
165 .wowp-status-off {
166 background-color: red;
167 }
168
169 .wowp-settings #titlewrap input {
170 padding: 3px 8px;
171 font-size: 1.7em;
172 line-height: 100%;
173 height: 1.7em;
174 width: 100%;
175 outline: none;
176 margin: 0 0 3px;
177 background-color: #fff;
178 border-radius: 0;
179 }
180
181 .wowp-wrap fieldset {
182 border: 2px solid var(--wowp-border);
183 padding: 20px;
184 display: flex;
185 flex-wrap: wrap;
186 gap: 15px;
187 margin-bottom: 24px;
188 }
189 .wowp-wrap legend {
190 font-weight: bold;
191 color: var(--wowp-dark);
192 padding: 0 8px;
193 font-size: 15px;
194 }
195
196 .wowp-field {
197 position: relative;
198 box-sizing: border-box;
199 }
200 .wowp-field input:not([type=checkbox], [type=radio], .wp-color-picker, .wp-picker-clear, .button),
201 .wowp-field select {
202 height: 40px;
203 line-height: 40px;
204 width: 100%;
205 border: 1px solid var(--wowp-blue);
206 max-width: 100%;
207 }
208 .wowp-field textarea {
209 width: 100%;
210 min-height: 350px;
211 }
212 .wowp-field .label {
213 position: absolute;
214 top: 0;
215 left: 10px;
216 transform: translateY(-50%);
217 font-size: 12px;
218 font-weight: 700;
219 padding: 0 5px;
220 color: #004A9B;
221 z-index: 9;
222 }
223 .wowp-field .label:after {
224 position: absolute;
225 content: " ";
226 height: 4px;
227 background: #fff;
228 width: 100%;
229 top: 50%;
230 left: 0;
231 z-index: -1;
232 transform: translateY(-50%);
233 }
234 .wowp-field .label.wowp-info:before {
235 position: absolute;
236 content: "?";
237 top: 0;
238 left: calc(100% - 5px);
239 font-size: 10px;
240 color: var(--wowp-dark);
241 transform: translateY(calc(-50% ));
242 font-weight: bold;
243 }
244 .wowp-field .label.wowp-info:hover:before {
245 position: absolute;
246 top: 0;
247 left: 0;
248 background-color: #2B222A;
249 border-radius: 5px;
250 color: #fff;
251 content: attr(data-info);
252 padding: 5px 10px;
253 text-transform: none;
254 width: 160px;
255 transform: translateY(calc(-100% - 7px));
256 word-wrap: break-word;
257 white-space: break-spaces;
258 line-height: 1.1;
259 font-weight: normal;
260 font-size: 12px;
261 }
262 .wowp-field .wowp-download-img {
263 position: absolute;
264 top: 0;
265 right: 5px;
266 transform: translateY(-100%);
267 font-weight: 600;
268 font-size: 8px;
269 cursor: pointer;
270 color: var(--wowp-dark);
271 }
272
273 .wowp-field {
274 width: calc(100%/3 - 15px/2 - 2.5px);
275 }
276 @media screen and (max-width: 1024px) {
277 .wowp-field {
278 width: 100%;
279 }
280 }
281
282 .wowp-field.has-checkbox {
283 display: flex;
284 padding: 0 8px;
285 align-items: center;
286 border: 1px solid var(--wowp-blue);
287 border-radius: 3px;
288 height: 40px;
289 line-height: 40px;
290 gap: 8px;
291 width: calc(100%/3 - 15px/2 - 2.5px - 2.5px);
292 }
293 @media screen and (max-width: 1024px) {
294 .wowp-field.has-checkbox {
295 width: 100%;
296 }
297 }
298 .wowp-field.has-checkbox input[type=checkbox] {
299 margin: 0 8px 0 0;
300 }
301 .wowp-field.has-checkbox .label {
302 line-height: initial;
303 }
304
305 .wowp-field.has-addon {
306 display: flex;
307 align-items: center;
308 }
309 .wowp-field.has-addon .is-addon {
310 order: -1;
311 box-sizing: border-box;
312 height: 40px;
313 line-height: 40px;
314 padding: 0 8px;
315 background-color: #ffffff;
316 color: var(--wowp-dark);
317 border: 1px solid var(--wowp-blue);
318 border-radius: 3px 0 0 3px;
319 border-right: none;
320 margin-right: -2px;
321 }
322 .wowp-field.has-addon select,
323 .wowp-field.has-addon input:not([type=checkbox], [type=radio]) {
324 box-sizing: border-box;
325 border-radius: 0 3px 3px 0;
326 border-left: none;
327 }
328 .wowp-field.has-addon select[readonly] + .is-addon,
329 .wowp-field.has-addon input:not([type=checkbox], [type=radio])[readonly] + .is-addon {
330 background-color: #f0f0f1;
331 }
332 .wowp-field.has-addon select:focus,
333 .wowp-field.has-addon input:not([type=checkbox], [type=radio]):focus {
334 box-shadow: none;
335 }
336 .wowp-field.has-addon:has(input:focus) {
337 box-shadow: 0 0 0 1px #2271b1;
338 border-radius: 3px;
339 }
340 .wowp-field.has-addon.has-background .is-addon {
341 background-color: #DFE2FC;
342 }
343
344 .wowp-field.has-addon-right label {
345 display: flex;
346 align-items: center;
347 }
348 .wowp-field.has-addon-right label .is-addon {
349 order: 1;
350 box-sizing: border-box;
351 height: 40px;
352 line-height: 40px;
353 padding: 0 8px;
354 background-color: #ffffff;
355 color: var(--wowp-dark);
356 border: 1px solid var(--wowp-blue);
357 border-radius: 0 3px 3px 0;
358 border-left: none;
359 margin-left: -2px;
360 }
361 .wowp-field.has-addon-right label select,
362 .wowp-field.has-addon-right label input:not([type=checkbox], [type=radio]) {
363 border-radius: 3px 0 0 3px;
364 }
365 .wowp-field.has-addon-right label select:focus + .is-addon,
366 .wowp-field.has-addon-right label input:not([type=checkbox], [type=radio]):focus + .is-addon {
367 box-shadow: 0 0 0 1px #2271b1;
368 }
369 .wowp-field.has-addon-right:has(input:focus) {
370 box-shadow: 0 0 0 1px #2271b1;
371 border-radius: 3px;
372 }
373 .wowp-field.has-addon-right.has-background .is-addon {
374 background-color: #DFE2FC;
375 }
376
377 .wowp-field.has-addon .is-addon .dashicons {
378 line-height: 40px;
379 }
380
381 .wowp-field.border-default .is-addon {
382 background-color: #dcdcde;
383 color: #50575e;
384 border-color: #8c8f94;
385 }
386 .wowp-field.border-default input:not([type=checkbox], [type=radio]) {
387 border: 1px solid #8c8f94;
388 }
389
390 .wowp-field.is-full {
391 width: 100%;
392 }
393
394 .wowp-fields-group {
395 position: relative;
396 display: flex;
397 gap: 15px;
398 flex-wrap: wrap;
399 width: 100%;
400 box-sizing: border-box;
401 }
402
403 .wowp-wrap .large-text.code {
404 background: #32373c;
405 color: rgba(240, 245, 250, 0.7);
406 font-size: 12px;
407 font-family: Menlo, Monaco, monospace;
408 display: block;
409 overflow: auto;
410 white-space: pre;
411 width: 100%;
412 height: 450px;
413 padding: 10px;
414 outline: none;
415 }
416
417 .wowp-code-nav {
418 position: relative;
419 min-height: 30px;
420 }
421
422 .wowp-snippet__list dt {
423 padding-top: 0.5rem;
424 }
425 .wowp-snippet__list dt:has(input:checked) {
426 background-color: #f0f0f1;
427 margin-inline: -1.25rem;
428 padding-inline: 1.25rem;
429 transition: background-color 0.2s ease-out;
430 }
431 .wowp-snippet__list dt:has(input:checked) + dd {
432 background-color: #f0f0f1;
433 margin-inline: -1.25rem;
434 padding-inline: calc(1.25rem + 24px) 1.25rem;
435 transition: background-color 0.2s ease-out;
436 }
437 .wowp-snippet__list dt label {
438 font-weight: 700;
439 font-size: 16px;
440 }
441 .wowp-snippet__list dt input {
442 margin-right: 8px;
443 }
444 .wowp-snippet__list dd {
445 padding-top: 8px;
446 margin-left: 0;
447 padding-left: 24px;
448 }
449 .wowp-snippet__list dd:not(:last-child) {
450 padding-bottom: 8px;
451 margin-bottom: 0;
452 border-bottom: 1px dashed #8c8f94;
453 }
454
455 .wowp-notice {
456 padding: 22px;
457 border-right: none;
458 border-top: none;
459 border-bottom: none;
460 }
461
462 .wowp-error {
463 background: #FAD0D0;
464 color: #14102C;
465 border-left: 6px solid #E82C2C;
466 }
467
468 .wowp-success {
469 padding: 1.25rem;
470 background: #D0FAD0;
471 color: #14102C;
472 border-left: 6px solid #109610;
473 }
474
475 .wowp-notice {
476 --notification-color: var(--wowp-success);
477 position: relative;
478 background-color: color-mix(in srgb, var(--notification-color) 7%, white);
479 border-width: 1px;
480 border-style: solid;
481 border-color: var(--notification-color);
482 padding-block: 1.25rem;
483 padding-inline: 3rem 1.25rem;
484 border-radius: 4px;
485 margin-block: 15px;
486 }
487 .wowp-notice:before {
488 position: absolute;
489 left: 0.5rem;
490 top: 50%;
491 transform: translateY(-50%);
492 content: "";
493 font-family: dashicons;
494 font-size: 1.5rem;
495 width: 2rem;
496 height: 2rem;
497 display: flex;
498 align-items: center;
499 justify-content: center;
500 color: var(--notification-color);
501 }
502 .wowp-notice:after {
503 position: absolute;
504 content: "";
505 left: 0;
506 top: 50%;
507 transform: translateY(-50%);
508 height: 2rem;
509 width: 3px;
510 border-radius: 0 3px 3px 0;
511 background-color: var(--notification-color);
512 }
513
514 .wowp-file input::file-selector-button {
515 color: #14102C;
516 padding: 0.5em;
517 border: thin solid var(--wowp-yellow);
518 border-radius: 4px;
519 }
520
521 .wowp-file input[type=file]:valid {
522 color: var(--wowp-orange);
523 }
524
525 .wowp-settings #poststuff {
526 padding-top: 0;
527 margin-top: 15px;
528 }
529 .wowp-settings h4 {
530 display: flex;
531 width: max-content;
532 gap: 8px;
533 align-items: center;
534 margin: 0 0 1.5rem 0;
535 font-weight: 800;
536 box-sizing: border-box;
537 color: var(--wowp-blue);
538 font-size: 16px;
539 letter-spacing: -1.08px;
540 line-height: 18px;
541 text-align: left;
542 -webkit-font-smoothing: antialiased;
543 background-color: var(--wowp-bg);
544 padding: 4px 8px;
545 border-radius: 25px;
546 }
547
548 .codericon {
549 color: var(--wowp-orange);
550 }
551
552 .nav-tab-wrapper.wowp-tab {
553 cursor: pointer;
554 }
555
556 .wowp-tab .nav-tab-active {
557 background-color: #ffffff;
558 border-bottom: 1px solid #ffffff;
559 }
560
561 .wowp-tab-content {
562 position: relative;
563 padding: 1.5rem 1.25rem;
564 background-color: #ffffff;
565 border-width: 1px;
566 border-style: solid;
567 border-image: linear-gradient(to bottom, var(--wowp-blue), var(--wowp-yellow)) 1 100%;
568 }
569 .wowp-tab-content .tab-content {
570 position: absolute;
571 left: -9999%;
572 }
573 .wowp-tab-content .tab-content.tab-content-active {
574 position: relative;
575 left: 0;
576 }
577
578 .wowp-text-helper {
579 width: 100%;
580 }
581
582 .wowp-sidebar-pub-section {
583 display: flex;
584 flex-direction: column;
585 gap: 15px;
586 }
587
588 .wowp-sidebar-pub-section .wowp-field {
589 width: 100%;
590 }
591
592 .wowp-sidebar-pub-section .wowp-field .is-addon {
593 height: 32px;
594 line-height: 32px;
595 }
596 .wowp-sidebar-pub-section .wowp-field .is-addon .dashicons {
597 line-height: 32px;
598 }
599 .wowp-sidebar-pub-section .wowp-field .is-addon a {
600 text-decoration: none;
601 }
602 .wowp-sidebar-pub-section .wowp-field input:not([type=checkbox], [type=radio]) {
603 height: 32px;
604 line-height: 32px;
605 }
606
607 .wowp-sidebar-pub-section [list]::-webkit-calendar-picker-indicator {
608 display: none !important;
609 }
610
611 .wowp-sidebar #major-publishing-actions {
612 margin: 0 -12px -12px -12px;
613 padding: 12px 24px;
614 }
615
616 .wowp-sidebar #minor-publishing-actions {
617 padding: 0;
618 }
619
620 .button._is-success {
621 background-color: var(--wowp-success);
622 border-color: var(--wowp-success);
623 color: #ffffff;
624 }
625 .button._is-success:focus, .button._is-success:hover {
626 background-color: #007602;
627 border-color: #007602;
628 color: #ffffff;
629 }
630
631 .button._is-danger {
632 background-color: var(--wowp-danger);
633 border-color: var(--wowp-danger);
634 color: #ffffff;
635 }
636 .button._is-danger:focus, .button._is-danger:hover {
637 background-color: #760200;
638 border-color: #760200;
639 color: #ffffff;
640 }
641
642 .button-editor {
643 right: 0;
644 bottom: 2px;
645 cursor: pointer;
646 padding: 5px 10px;
647 background-color: var(--wowp-border);
648 color: var(--wowp-dark);
649 border-radius: 4px;
650 display: block;
651 }
652 .button-editor:focus, .button-editor:hover {
653 background-color: var(--wowp-yellow);
654 }
655
656 .add-img-btn {
657 align-self: flex-end;
658 text-align: right;
659 }
660
661 .has-tooltip {
662 position: relative;
663 cursor: help;
664 }
665 .has-tooltip::before, .has-tooltip::after {
666 color: #efefef;
667 font-family: monospace;
668 font-size: 12px;
669 opacity: 0;
670 pointer-events: none;
671 text-align: center;
672 }
673 .has-tooltip::before {
674 position: absolute;
675 top: 0;
676 left: 50%;
677 background-color: #2B222A;
678 border-radius: 5px;
679 color: #fff;
680 content: attr(data-tooltip);
681 padding: 5px 10px;
682 text-transform: none;
683 transition: all 0.5s ease;
684 width: 160px;
685 transform: translateY(calc(-100% - 7px)) translateX(-50%);
686 word-wrap: break-word;
687 white-space: break-spaces;
688 line-height: 1.1;
689 }
690 .has-tooltip::after {
691 position: absolute;
692 top: -7px;
693 left: 50%;
694 border-left: 5px solid transparent;
695 border-right: 5px solid transparent;
696 border-top: 5px solid #2B222A;
697 content: " ";
698 font-size: 0;
699 line-height: 0;
700 margin-left: -5px;
701 width: 0;
702 transform: translateX(-50%);
703 }
704 .has-tooltip:focus::before, .has-tooltip:focus::after, .has-tooltip:hover::before, .has-tooltip:hover::after {
705 opacity: 1;
706 transition: all 0.75s ease;
707 }
708 .has-tooltip.on-right::before {
709 top: 50%;
710 left: 100%;
711 transform: translateY(-50%) translateX(4px);
712 }
713 .has-tooltip.on-right::after {
714 top: 50%;
715 left: calc(100% + 2px);
716 rotate: 90deg;
717 transform: translateX(calc(-50% + 2.5px));
718 }
719 .has-tooltip.on-left::before {
720 top: 50%;
721 left: -2px;
722 transform: translateY(-50%) translateX(-100%);
723 }
724 .has-tooltip.on-left::after {
725 top: 50%;
726 left: 0;
727 rotate: -90deg;
728 transform: translateX(calc(-50% + 7px));
729 }
730
731 .wowp-toogle {
732 display: flex;
733 align-items: center;
734 position: relative;
735 text-decoration: none;
736 color: #ffffff;
737 width: 40px;
738 height: 28px;
739 border-radius: 50px;
740 padding: 0 4px;
741 }
742 .wowp-toogle:focus, .wowp-toogle:hover {
743 color: #ffffff;
744 }
745
746 .wowp-toogle span {
747 height: 20px;
748 width: 20px;
749 display: flex;
750 align-items: center;
751 justify-content: center;
752 border-radius: 50%;
753 font-size: 8px;
754 }
755
756 .wowp-toogle.is-on {
757 background-color: #BFFFC0;
758 }
759
760 .wowp-toogle.is-on span {
761 background-color: #00BF04;
762 }
763 .wowp-toogle.is-on:focus span, .wowp-toogle.is-on:hover span {
764 background-color: #007602;
765 }
766
767 .wowp-toogle.is-off {
768 flex-direction: row-reverse;
769 background-color: #FFC0BF;
770 }
771
772 .wowp-toogle.is-off span {
773 background-color: #BF0400;
774 }
775 .wowp-toogle.is-off:focus span, .wowp-toogle.is-off:hover span {
776 background-color: #760200;
777 }
778
779 .wowp-input-group {
780 position: relative;
781 display: flex;
782 }
783 .wowp-input-group .wowp-copy {
784 display: flex;
785 align-items: center;
786 padding: 0 5px;
787 cursor: pointer;
788 color: var(--wowp-blue);
789 transform: translateX(-100%);
790 }
791 .wowp-input-group .wowp-copy:hover {
792 color: var(--wowp-dark);
793 }
794 .wowp-input-group input {
795 padding-right: 21px;
796 }
797
798 .wpcoder-expand {
799 margin-top: 8px;
800 }
801
802 .wpcoder-expand__title {
803 color: var(--wowp-blue);
804 font-weight: 600;
805 font-size: 14px;
806 cursor: pointer;
807 }
808
809 .wpcoder-expand__content {
810 padding-block: 8px;
811 }
812
813 .wowp-wrap {
814 padding: 22px 16px 50px 16px;
815 }
816 .wowp-wrap .has-shadow {
817 box-shadow: 0 0 10px 3px rgba(0, 91, 191, 0.1);
818 }
819 .wowp-wrap .has-padding {
820 padding: 10px;
821 margin: 0 -10px;
822 }
823 .wowp-wrap .is-hidden {
824 display: none;
825 }
826 .wowp-wrap .has-radius {
827 border-radius: 4px;
828 }
829 .wowp-wrap .w_has-border {
830 border: 2px solid;
831 border-image: linear-gradient(to bottom, var(--wowp-blue), var(--wowp-yellow)) 1;
832 }
833 .wowp-wrap .w_width-750 {
834 max-width: 750px;
835 }
836 .wowp-wrap .has-mt {
837 margin-top: 24px;
838 }
839 .wowp-wrap .color-red {
840 color: #760200;
841 }
842 .wowp-wrap .color-green {
843 color: #109610;
844 }
845 .wowp-wrap .is-relative {
846 position: relative;
847 }
848 .wowp-wrap ._m-is-auto {
849 margin-inline-start: auto;
850 }
851
852 .w_block {
853 background-color: #ebf3ff;
854 padding: 50px 32px;
855 max-width: 1200px;
856 margin: 50px auto;
857 }
858 .w_block-titles {
859 position: relative;
860 width: max-content;
861 margin: 0 auto;
862 display: flex;
863 flex-direction: column;
864 gap: 15px;
865 }
866 .w_block-subtitle {
867 color: #f16046;
868 font-size: 16px;
869 font-weight: 700;
870 line-height: 20px;
871 margin: 0;
872 }
873 .w_block-title {
874 position: relative;
875 font-size: 40px;
876 font-weight: 600;
877 line-height: 45px;
878 margin: 0;
879 background: linear-gradient(to right, #14102C 0%, #14102C 30%, #E86E2C 81%, #14102C 100%);
880 -webkit-background-clip: text;
881 -webkit-text-fill-color: transparent;
882 color: #14102C;
883 }
884 .w_block-btns {
885 width: max-content;
886 margin: 48px auto 68px;
887 display: flex;
888 gap: 25px;
889 }
890 @media screen and (max-width: 768px) {
891 .w_block-btns {
892 flex-direction: column;
893 }
894 }
895 .w_block-btns [class^=w_btn] {
896 display: inline-block;
897 width: 220px;
898 height: 50px;
899 margin: 0 15px;
900 line-height: 50px;
901 font-size: 20px;
902 text-decoration: none;
903 color: #fff;
904 border-width: 1px;
905 border-style: solid;
906 text-align: center;
907 border-radius: 8px;
908 text-transform: uppercase;
909 transition: 0.5s;
910 background-size: 200% auto;
911 }
912 .w_block-btns [class^=w_btn]:hover {
913 background-position: right center;
914 }
915 .w_block-btns .w_btn-pro {
916 background-image: linear-gradient(to right, #FFD500 0%, #E86E2C 51%, #FFD500 100%);
917 }
918 .w_block-btns .w_btn-demo {
919 background-image: linear-gradient(to right, #005BBF 0%, #800080 51%, #005BBF 100%);
920 }
921
922 h4.wowp-title {
923 font-size: 32px;
924 font-weight: 600;
925 line-height: 1.125;
926 margin: 0 0 48px;
927 padding: 0;
928 color: var(--wowp-dark);
929 }
930
931 .w_card {
932 position: relative;
933 background-color: #fff;
934 border-radius: 6px;
935 box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
936 padding: 15px;
937 text-decoration: none;
938 color: #363636;
939 }
940 .w_card-media {
941 position: absolute;
942 top: -6px;
943 left: -12px;
944 background-color: #fdf2ed;
945 width: 56px;
946 height: 56px;
947 border-radius: 6px;
948 display: flex;
949 align-items: center;
950 color: orange;
951 font-size: 32px;
952 justify-content: center;
953 margin: 0;
954 }
955 .w_card-content {
956 display: flex;
957 gap: 28px;
958 flex-direction: column;
959 }
960 .w_card-title {
961 font-size: 22px;
962 font-weight: 700;
963 margin: 0 0 0 44px;
964 }
965 .w_card-description {
966 font-size: 16px;
967 display: -webkit-box;
968 -webkit-line-clamp: 2;
969 -webkit-box-orient: vertical;
970 overflow: hidden;
971 text-overflow: ellipsis;
972 cursor: pointer;
973 margin: 0;
974 }
975 .w_card-description.is-open {
976 overflow: visible;
977 display: block;
978 -webkit-line-clamp: unset;
979 }
980
981 [class^=w_boxes] {
982 display: grid;
983 gap: 22px;
984 }
985
986 .w_boxes__3-col {
987 grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
988 }
989
990 .changelog-list {
991 max-width: 750px;
992 margin-inline: auto;
993 }
994 .changelog-list h4 {
995 font-size: 22px;
996 padding-bottom: 0.75rem;
997 border-bottom: 2px solid #FADFD0;
998 margin-bottom: 1rem;
999 display: inline-block;
1000 }
1001 .changelog-list ul li {
1002 font-size: 16px;
1003 line-height: 1.5;
1004 padding-left: 8px;
1005 }
1006 .changelog-list ul li::marker {
1007 font-size: 12px;
1008 }
1009 .changelog-list ul li.added::marker {
1010 content: "�
1011 ";
1012 }
1013 .changelog-list ul li.fixed::marker {
1014 content: "🛠";
1015 }
1016 .changelog-list ul li.initial::marker {
1017 content: "📢";
1018 }
1019
1020 #code-attributes .dashicons,
1021 #dequeue .dashicons,
1022 #includes-files .dashicons,
1023 #schedule .dashicons,
1024 #display-rules .dashicons {
1025 color: var(--wowp-danger);
1026 cursor: pointer;
1027 position: absolute;
1028 right: 0;
1029 top: 0;
1030 transform: translateX(calc(100% + 5px));
1031 }
1032
1033 .CodeMirror {
1034 border: 1px solid var(--wowp-border);
1035 font-size: 13px;
1036 width: 100%;
1037 min-height: 60vh !important;
1038 height: calc(100vh - 295px) !important;
1039 box-sizing: border-box;
1040 }
1041
1042 .wpcoder-global-php .CodeMirror-sizer:before {
1043 content: "<?php\a defined( 'ABSPATH' ) || exit;\a\a";
1044 white-space: pre;
1045 }
1046
1047 .wpcoder-global-php .CodeMirror-sizer:before {
1048 color: #848A8A;
1049 position: absolute;
1050 }
1051
1052 .wpcoder-global-php .CodeMirror-lines {
1053 padding-top: 50px;
1054 }
1055
1056 .highlighted-gutter {
1057 background-color: #e8f2ff;
1058 border-left: 5px solid var(--wowp-orange);
1059 }
1060
1061 .wowp-notification {
1062 --notification-color: var(--wowp-dark);
1063 position: relative;
1064 background-color: color-mix(in srgb, var(--notification-color) 7%, white);
1065 border-width: 1px;
1066 border-style: solid;
1067 border-color: var(--notification-color);
1068 padding-block: 1.25rem;
1069 padding-inline: 3rem 1.25rem;
1070 border-radius: 4px;
1071 margin-block: 15px;
1072 }
1073 .wowp-notification:before {
1074 position: absolute;
1075 left: 0.5rem;
1076 top: 50%;
1077 transform: translateY(-50%);
1078 content: "";
1079 font-family: dashicons;
1080 font-size: 1.5rem;
1081 width: 2rem;
1082 height: 2rem;
1083 display: flex;
1084 align-items: center;
1085 justify-content: center;
1086 color: var(--notification-color);
1087 }
1088 .wowp-notification:after {
1089 position: absolute;
1090 content: "";
1091 left: 0;
1092 top: 50%;
1093 transform: translateY(-50%);
1094 height: 2rem;
1095 width: 3px;
1096 border-radius: 0 3px 3px 0;
1097 background-color: var(--notification-color);
1098 }
1099 .wowp-notification.-info {
1100 --notification-color: var(--wowp-blue);
1101 }
1102 .wowp-notification.-info:before {
1103 content: "";
1104 }
1105 .wowp-notification.-warning {
1106 --notification-color: var(--wowp-yellow);
1107 }
1108 .wowp-notification.-warning:before {
1109 content: "";
1110 }
1111 .wowp-notification.-error {
1112 --notification-color: var(--wowp-danger);
1113 }
1114 .wowp-notification.-error:before {
1115 content: "";
1116 }
1117 .wowp-notification.-lock {
1118 --notification-color: var(--wowp-danger);
1119 }
1120 .wowp-notification.-lock:before {
1121 content: "�
1122 �";
1123 }
1124 .wowp-notification.-success {
1125 --notification-color: var(--wowp-success);
1126 }
1127 .wowp-notification.-success:before {
1128 content: "";
1129 }
1130