PluginProbe
WP Directory Kit / 1.5.9
WP Directory Kit v1.5.9
1.5.9 1.5.7 1.5.6 1.5.5 1.5.4 1.5.3 trunk 1.1.0 1.1.6 1.1.8 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.8 All 37 releases
← All changes | admin/css/wpdirectorykit-admin.scss +905 -240 1.2.3 → 1.5.9 View file →
@@ -7,22 +7,25 @@
7 7 #adminmenu .wp-has-current-submenu ul a[href="admin.php?page=wdk_importdemo"] {
8 8 display: none;
9 9 }
10 10
11 -.wdk-wrap .clearfix:after
12 -{
11 +.wdk-wrap .clearfix:after {
13 12 content: '';
14 13 display: table;
15 14 clear: both;
16 15 }
17 16
17 +.wdk-wrap {
18 + @import 'wdk-utilities.scss';
19 +}
20 +
18 21 .wdk-wrap .postbox-header {
19 - max-width: 100%;
20 - min-width: 100%;
21 - h3
22 - {
23 - padding-left:15px;
22 + max-width: 100%;
23 + min-width: 100%;
24 24
25 + h3 {
26 + padding-left: 15px;
27 +
25 28 &.wide {
26 29 flex: 1 2 auto;
27 30 }
28 31 }
@@ -27,60 +30,51 @@
27 30 }
28 31 }
29 32 }
30 33
31 -.wdk-wrap .pull_right
32 -{
33 - float:right;
34 +.wdk-wrap .pull_right {
35 + float: right;
34 36 }
35 37
36 38 .wdk-wrap .wdk-depend-hidden,
37 -.wdk-wrap .hidden
38 -{
39 - display:none;
39 +.wdk-wrap .hidden {
40 + display: none;
40 41 }
41 42
42 -.wdk-wrap .img-link
43 -{
43 +.wdk-wrap .img-link {
44 44 display: block;
45 45 }
46 46
47 -.actions_column a:hover span
48 -{
49 - color:black;
47 +.actions_column a:hover span {
48 + color: black;
50 49 }
51 50
52 -.wp-list-table a.title
53 -{
51 +.wp-list-table a.title {
54 52 font-weight: bold;
55 53 }
54 +
56 55 /* Sortable */
57 56
58 -.wdk-wrap .ui-sortable-handle a
59 -{
57 +.wdk-wrap .ui-sortable-handle a {
60 58 text-decoration: none;
61 59 border: 0px;
62 60 color: black;
63 61 }
64 62
65 -.wdk-wrap .ui-sortable-handle a:hover
66 -{
63 +.wdk-wrap .ui-sortable-handle a:hover {
67 64 color: #135e96;
68 65 }
69 66
70 -.wdk-wrap .ui-sortable-handle h3 a
71 -{
67 +.wdk-wrap .ui-sortable-handle h3 a {
72 68 font-size: 16px;
73 69 }
74 70
75 -.wdk-wrap .ui-sortable-handle h3 span
76 -{
71 +.wdk-wrap .ui-sortable-handle h3 span {
77 72 padding-right: 15px;
78 73 }
79 74
80 -.wdk-wrap .hndle
81 -{
82 - display:block;
75 +.wdk-wrap .hndle {
76 + display: block;
83 77 }
84 78
85 79 .wdk-wrap .listing_edit_map {
86 80 height: 350px;
@@ -88,15 +82,13 @@
88 82 }
89 83
90 84 /* Alerts */
91 85
92 -.wdk-wrap .alert
93 -{
86 +.wdk-wrap .alert {
94 87 border-radius: 0;
95 88 }
96 89
97 -.wdk-wrap .alert.alert-success
98 -{
90 +.wdk-wrap .alert.alert-success {
99 91 background: #E6F4E7;
100 92 color: #376637;
101 93 border-left: 3px solid #88BF88;
102 94 margin: 0px 0px 5px 0px;
@@ -103,10 +95,9 @@
103 95 padding: 15px;
104 96 font-weight: bold;
105 97 }
106 98
107 -.wdk-wrap .alert.alert-danger
108 -{
99 +.wdk-wrap .alert.alert-danger {
109 100 background: #FFE6DF;
110 101 color: #AB3C1B;
111 102 border-left: 3px solid #E98B6F;
112 103 margin: 0px 0px 5px 0px;
@@ -113,10 +104,9 @@
113 104 padding: 15px;
114 105 font-weight: bold;
115 106 }
116 107
117 -.wdk-wrap .alert.alert-info
118 -{
108 +.wdk-wrap .alert.alert-info {
119 109 background: #cce5ff;
120 110 color: #3d648e;
121 111 border-left: 3px solid #3d648e;
122 112 margin: 0px 0px 5px 0px;
@@ -126,50 +116,42 @@
126 116
127 117 /* Labels */
128 118 .wdk-wrap .label {
129 119 display: inline-block;
130 -}
131 -
132 -.wdk-wrap .label.label-success {
133 - background: #E6F4E7;
134 - color: #376637;
135 120 margin: 0px 5px 5px 0px;
136 - padding: 5px;
137 -}
121 + padding: 6px 6px;
122 + font-size: 10px;
123 + font-weight: 700;
124 + line-height: 1;
125 + color: #fff;
126 + border-radius: 2px;
138 127
139 -.wdk-wrap .label.label-danger {
140 - background: #FFE6DF;
141 - color: #AB3C1B;
142 - margin: 0px 5px 5px 0px;
143 - padding: 5px;
144 -}
128 + &.label-success {
129 + background: linear-gradient(to right, #5cb85c, #90cf90);
130 + }
145 131
146 -.wdk-wrap .label.label-info {
147 - background: #cce5ff;
148 - color: #3d648e;
149 - margin: 0px 5px 5px 0px;
150 - padding: 5px;
151 -}
132 + &.label-danger {
133 + background: linear-gradient(to right, #fe9365, #ffb08e);
134 + }
152 135
153 -.wdk-wrap .label.label-warning {
154 - color: #664d03;
155 - background-color: #fff3cd;
156 - border-color: #ffecb5;
157 - margin: 0px 5px 5px 0px;
158 - padding: 5px;
136 + &.label-info {
137 + background: linear-gradient(to right, #5bc0de, #5bc0ded9);
138 + }
139 +
140 + &.label-warning {
141 + background: linear-gradient(to right, #d9534f, #d9534fa1);
142 + }
159 143 }
160 144
161 145 /* Custom fields layout */
162 146
163 -div.wdk-field-edit
164 -{
147 +div.wdk-field-edit {
165 148 margin: 15px 0px;
166 149 display: flex;
167 150 justify-content: flex-start;
168 151 }
169 152
170 -div.wdk-field-edit label
171 -{
153 +div.wdk-field-edit label {
172 154 width: auto;
173 155 display: inline-block;
174 156 vertical-align: top;
175 157 max-width: 80px;
@@ -186,9 +168,9 @@
186 168 }
187 169
188 170 div.wdk-field-container {
189 171 & {
190 - padding:0px;
172 + padding: 0px;
191 173 }
192 174
193 175 .wdk_dropdown_tree {
194 176 max-width: 351px;
@@ -204,12 +186,13 @@
204 186 .wdk-datetime-group {
205 187 display: flex;
206 188 flex-wrap: wrap;
207 189 max-width: 230px;
190 +
208 191 select {
209 192 width: 60px;
210 193 }
211 -
194 +
212 195 .regular-text {
213 196 min-width: 90px;
214 197 flex: 1 2;
215 198 }
@@ -214,9 +197,10 @@
214 197 flex: 1 2;
215 198 }
216 199 }
217 200
218 - input,select {
201 + input,
202 + select {
219 203 margin-bottom: 5px;
220 204 }
221 205 }
222 206
@@ -223,26 +207,32 @@
223 207
224 208 div.wdk-field-edit div.wdk-field-container {
225 209 & {
226 210 display: inline-block;
227 - padding:0px 15px;
211 + padding: 0px 15px;
228 212 padding-right: 0;
229 213 flex: 1 2 auto;
230 214 }
231 -
232 - .wdk_dropdown_tree,
233 - input:not([type="checkbox"]):not([type="radio"]),
234 - select {
215 +
216 + .wdk_dropdown_tree,
217 + input:not([type="checkbox"]):not([type="radio"]),
218 + select {
235 219 width: 100%;
236 220 max-width: 230px;
237 221 }
238 -
239 - .wdk_dropdown_tree > .btn-group {
222 +
223 + .wdk_dropdown_tree>.btn-group {
240 224 width: 100%;
241 225 display: flex;
242 226 height: auto;
243 227 }
244 -
228 +
229 + .wdk_dropdown_tree>.btn-group {
230 + height: 40px;
231 + border-radius: 2px;
232 + }
233 +
234 +
245 235 .wdk_dropdown_tree button {
246 236 padding: 0 8px;
247 237 height: auto;
248 238 box-shadow: 0 0 0 transparent;
@@ -250,14 +240,14 @@
250 240 background-color: #fff;
251 241 color: #2c3338;
252 242 min-height: 30px;
253 243 }
254 -
244 +
255 245 .wdk_dropdown_tree button.btn.btn-default.dropdown-toggle,
256 246 .wdk_dropdown_tree button {
257 - border-radius: 4px;
247 + border-radius: 2px;
258 248 }
259 -
249 +
260 250 .wdk_dropdown_tree button:first-child {
261 251 border-top-right-radius: 0;
262 252 border-bottom-right-radius: 0;
263 253 }
@@ -266,12 +256,17 @@
266 256 border: 1px solid #8c8f94;
267 257 }
268 258
269 259 .wdk_dropdown_tree .list_scroll {
270 - border-left: 1px solid #8c8f94;
271 260 left: 0;
272 261 }
273 -
262 +
263 + .wdk_dropdown_tree .list_container {
264 + width: 100%;
265 + border: 1px solid #8c8f94;
266 + box-sizing: border-box;
267 + }
268 +
274 269 .wdk_dropdown_tree button.btn.btn-default.dropdown-toggle:last-child {
275 270 border-top-left-radius: 0;
276 271 border-bottom-left-radius: 0;
277 272
@@ -280,9 +275,9 @@
280 275 background-size: 16px 16px;
281 276 cursor: pointer;
282 277 vertical-align: middle;
283 278 }
284 -
279 +
285 280 .wdk_dropdown_tree {
286 281 min-width: initial;
287 282 position: relative;
288 283 }
@@ -292,9 +287,9 @@
292 287 padding: 0 8px;
293 288 }
294 289
295 290 .wdk_dropdown_tree .list_container .input-group-addon {
296 - &{
291 + & {
297 292 position: relative;
298 293 }
299 294
300 295 & i {
@@ -299,15 +294,15 @@
299 294
300 295 & i {
301 296 position: absolute;
302 297 left: 0;
303 - margin-left: 5px;
298 + margin-left: 11px;
304 299 top: 50%;
305 300 margin-top: -9px;
306 301 }
307 -
302 +
308 303 & i.fa-spin {
309 - margin-left: 7px;
304 + margin-left: 11px;
310 305 margin-top: -7px;
311 306 }
312 307
313 308 .fa:after {
@@ -328,49 +323,92 @@
328 323
329 324 .fa.fa-search:after {
330 325 content: "\f179";
331 326 }
332 -
327 +
333 328 .loader-spiner.fa.fa-spinner:after {
334 329 content: "\f113";
335 330 }
336 -
331 +
337 332 .loader-spiner.fa.fa-spinner {
338 333 -webkit-animation: wdk-spin 2s infinite linear;
339 - animation: wdk-spin 2s infinite linear;
334 + animation: wdk-spin 2s infinite linear;
340 335 font-family: dashicons;
341 336 font-size: 18px;
342 - margin-left: 6px;
337 + margin-left: 11px;
343 338 margin-top: -9px;
344 339 }
345 -
340 +
346 341 @keyframes wdk-spin {
347 342 0% {
348 - -webkit-transform: rotate(0deg);
349 - transform: rotate(0deg);
350 - }
343 + -webkit-transform: rotate(0deg);
344 + transform: rotate(0deg);
345 + }
346 +
351 347 100% {
352 - -webkit-transform: rotate(360deg);
353 - transform: rotate(360deg);
354 - }
348 + -webkit-transform: rotate(360deg);
349 + transform: rotate(360deg);
350 + }
355 351 }
356 352 }
357 353
358 354 }
359 355
356 +
357 +div.wdk-field-edit.field-error div.wdk-field-container {
358 + background: #FFE6DF;
359 + input, select, textarea,.wp-editor-container {
360 + border-color: rgb(163, 1, 1);
361 + }
362 +
363 + p.wdk-hint.wdk-error {
364 + color: rgb(163, 1, 1);
365 + }
366 +}
367 +
360 368 .form-table p.wdk-hint,
361 -div.wdk-field-edit p.wdk-hint
362 -{
369 +div.wdk-field-edit p.wdk-hint {
363 370 font-style: italic;
364 371 }
365 372
373 +div.wdk-field-edit.inline {
374 + align-items: center;
375 +
376 + label {
377 + font-weight: 600;
378 + width: auto;
379 + flex: 0 0;
380 + max-width: initial;
381 + }
382 +
383 + .wdk-field-container {
384 + margin: -5px -5px;
385 + }
386 +
387 + .regular-text {
388 + margin: 5px 5px;
389 + flex: 1 2;
390 + }
391 +}
392 +
366 393 /* Tables */
367 394
368 -.wdk-wrap .widefat .actions_column
369 -{
395 +.wdk-wrap .widefat #the-list {
396 + display: flex;
397 + flex-wrap: wrap;
398 + gap: 15px 15px;
399 + align-items: flex-start;
400 + justify-content: flex-start;
401 +}
402 +
403 +.wdk-wrap .widefat .actions_column {
370 404 text-align: right;
371 405 }
372 406
407 +.wdk-wrap .widefat .static {
408 + width: 5%;
409 +}
410 +
373 411 .wdk-wrap .form-table td {
374 412 vertical-align: top;
375 413 }
376 414
@@ -393,13 +431,13 @@
393 431 min-width: 400px;
394 432 padding: 22px 0;
395 433 }
396 434
397 -.wdk-wrap .wdk-side-content + .form-table td {
435 +.wdk-wrap .wdk-side-content+.form-table td {
398 436 padding-right: 0;
399 437 }
400 438
401 -.wdk-wrap .wdk-side-content + .form-table th,
439 +.wdk-wrap .wdk-side-content+.form-table th,
402 440 .wdk-wrap .wdk-side-content .form-table th {
403 441 max-width: 85px;
404 442 padding-right: 10px;
405 443 }
@@ -406,11 +444,10 @@
406 444
407 445
408 446 /* Filtering above/below tables */
409 447
410 -.wdk-wrap .tablenav.top .left
411 -{
412 - float:left;
448 +.wdk-wrap .tablenav.top .left {
449 + float: left;
413 450 }
414 451
415 452 .wdk-wrap .inputbox_map {
416 453 height: 250px;
@@ -418,15 +455,16 @@
418 455 max-width: 450px
419 456 }
420 457
421 458 /* Visual Builder Search Forms */
422 -.wdk-builder-container .widget-title h3, .widget-title h4 {
459 +.wdk-builder-container .widget-title h3,
460 +.widget-title h4 {
423 461 white-space: initial;
424 462 }
425 -.wdk-builder-container .wdk-builder-elements-column
426 -{
463 +
464 +.wdk-builder-container .wdk-builder-elements-column {
427 465 margin-bottom: 15px;
428 - display:block;
466 + display: block;
429 467 width: 40%;
430 468 float: left;
431 469 padding-top: 6px;
432 470 }
@@ -443,10 +481,9 @@
443 481 margin-top: 0;
444 482 margin-right: 15px;
445 483 }
446 484
447 -.wdk-builder-elements
448 -{
485 +.wdk-builder-elements {
449 486 width: 100%;
450 487 min-height: auto;
451 488 box-sizing: border-box;
452 489 padding: 15px 15px 15px 0px;
@@ -455,21 +492,19 @@
455 492 grid-column-gap: 10px;
456 493 grid-row-gap: 0;
457 494 }
458 495
459 -.wdk-builder-elements .widget
460 -{
496 +.wdk-builder-elements .widget {
461 497 width: 100%;
462 498 }
463 499
464 -.wdk-builder-selected
465 -{
500 +.wdk-builder-selected {
466 501 margin-top: 6px;
467 - width:80%;
502 + width: 80%;
468 503 border: 1px solid #c3c4c7;
469 - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
470 - min-height:400px;
471 - float:left;
504 + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
505 + min-height: 400px;
506 + float: left;
472 507 box-sizing: border-box;
473 508 padding: 15px;
474 509 }
475 510
@@ -475,19 +510,18 @@
475 510
476 511 #wdk-drop .widget.ui-draggable.ui-sortable-handle,
477 512 #wdk-drop .ui-sortable-placeholder.widget-placeholder,
478 513 .wdk-wrap .drop-container .widget.ui-draggable.ui-sortable-handle,
479 -.wdk-wrap .drop-container .ui-sortable-placeholder.widget-placeholder
480 -{
481 - width:300px;
482 - margin:0px 15px 15px 0px;
483 - float:left;
514 +.wdk-wrap .drop-container .ui-sortable-placeholder.widget-placeholder {
515 + width: 300px;
516 + margin: 0px 15px 15px 0px;
517 + float: left;
484 518 }
485 519
520 +#wdk-drag .widget-action-remove,
486 521 #wdk-drag .widget-action,
487 -#wdk-drag .widget-inside
488 -{
489 - display:none !important;
522 +#wdk-drag .widget-inside {
523 + display: none !important;
490 524 }
491 525
492 526
493 527 .wdk-builder-container button[aria-expanded="true"] .toggle-indicator::before {
@@ -494,34 +528,53 @@
494 528 content: "\f142"
495 529 }
496 530
497 531 #wdk-drop .widget-inside,
498 -.wdk-wrap .drop-container .widget-inside
499 -{
532 +.wdk-wrap .drop-container .widget-inside {
500 533 padding: 5px;
501 534 }
502 535
536 +.wdk-wrap .widget-top .widget-action {
537 + padding: 10px 0px;
538 + }
539 +
540 +.wdk-wrap .widget-action-remove {
541 + border: 0;
542 + margin: 0;
543 + padding: 11px 0px;
544 + margin-right: 10px;
545 + background: none;
546 + cursor: pointer;
547 + vertical-align: top;
548 + color: #50575e;
549 + transition: all .15s;
550 +
551 + &:hover {
552 + color:#000;
553 + }
554 +}
555 +
556 +
557 +
558 +
503 559 /* Visual Builder result item */
504 560
505 -.wdk-wrap .drop-container
506 -{
561 +.wdk-wrap .drop-container {
507 562 width: 60%;
508 563 float: left;
509 564 }
510 565
511 -.wdk-wrap .drop-container .wdk-builder-selected
512 -{
513 - width:100%;
566 +.wdk-wrap .drop-container .wdk-builder-selected {
567 + width: 100%;
514 568 min-height: 100px;
515 569 }
516 570
517 -.wdk-wrap .drop-container>h3
518 -{
519 - padding-bottom:0px;
520 - margin-bottom:0px;
571 +.wdk-wrap .drop-container>h3 {
572 + padding-bottom: 0px;
573 + margin-bottom: 0px;
521 574 }
522 575
523 -.wdk-wrap .listing_custom_fields div.wdk-field-edit div.wdk-field-container .wp-editor-wrap input,
576 +.wdk-wrap .listing_custom_fields div.wdk-field-edit div.wdk-field-container .wp-editor-wrap input,
524 577 .wdk-wrap .listing_custom_fields div.wdk-field-edit div.wdk-field-container .wp-editor-wrap select {
525 578 width: auto;
526 579 max-width: auto;
527 580 }
@@ -537,10 +590,21 @@
537 590 }
538 591
539 592 /* columns */
540 593
541 -.wdk-wrap
542 -{
594 +.wdk-wrap {
595 + .button-secondary,.button-primary {
596 + display: inline-flex;
597 + align-items: center;
598 + justify-content: center;
599 +
600 + gap: 5px;
601 +
602 + .dashicons {
603 + line-height: 1 !important;
604 + }
605 + }
606 +
543 607 .actions {
544 608 margin-top: 0;
545 609 }
546 610
@@ -555,11 +619,11 @@
555 619 }
556 620
557 621 @for $i from 1 through 10 {
558 622 .wdk-mr-#{$i*5} {
559 - margin-right: #{$i*5}px;
623 + margin-right: #{$i*5}px;
560 624 }
561 - }
625 + }
562 626
563 627 div.wdk-field-edit.notes a {
564 628 margin-left: 5px;
565 629 display: inline-block;
@@ -565,21 +629,29 @@
565 629 display: inline-block;
566 630 font-weight: 600;
567 631 font-size: 14px;
568 632 }
569 -
633 +
570 634 .mb0 {
571 635 margin-bottom: 0 !important;
572 636 }
573 -
637 +
638 + .m0 {
639 + margin: 0 !important;
640 + }
641 +
642 + .p0 {
643 + padding: 0 !important;
644 + }
645 +
574 646 .align-top {
575 647 vertical-align: top !important;
576 648 }
577 -
649 +
578 650 .text-capitalize {
579 651 text-transform: capitalize !important;
580 652 }
581 -
653 +
582 654 .alert p {
583 655 margin: 0;
584 656 }
585 657
@@ -588,9 +660,9 @@
588 660 }
589 661
590 662 .wdk-infinity-load {
591 663 -webkit-animation: wdk-spin 2s infinite linear;
592 - animation: wdk-spin 2s infinite linear;
664 + animation: wdk-spin 2s infinite linear;
593 665 }
594 666
595 667 .postbox .inside {
596 668 padding: 0 12px 0;
@@ -601,15 +673,16 @@
601 673 }
602 674
603 675 @keyframes wdk-spin {
604 676 0% {
605 - -webkit-transform: rotate(0deg);
606 - transform: rotate(0deg);
607 - }
677 + -webkit-transform: rotate(0deg);
678 + transform: rotate(0deg);
679 + }
680 +
608 681 100% {
609 - -webkit-transform: rotate(360deg);
610 - transform: rotate(360deg);
611 - }
682 + -webkit-transform: rotate(360deg);
683 + transform: rotate(360deg);
684 + }
612 685 }
613 686
614 687 .wdk-field-edit.SECTION .title {
615 688 width: 100%;
@@ -621,9 +694,9 @@
621 694 padding: 10px 15px;
622 695 margin-bottom: 0;
623 696 margin-top: 0;
624 697 }
625 -
698 +
626 699 .meta-box-sortables .wdk_field.SECTION .postbox {
627 700 color: #fff;
628 701 background: #2c3338;
629 702 }
@@ -648,10 +721,10 @@
648 721 align-items: flex-start;
649 722 flex-wrap: wrap;
650 723 }
651 724
652 - div.wdk-field-edit.TEXTAREA_CODE div.wdk-field-container {
653 - width: 400px;
725 + div.wdk-field-edit.TEXTAREA_CODE div.wdk-field-container {
726 + width: 400px;
654 727 }
655 728
656 729 div.wdk-field-edit div.wdk-field-container .suffix:not(:empty) {
657 730 padding: 5px 0px 5px 5px;
@@ -665,10 +738,16 @@
665 738 div.wdk-field-edit p.wdk-hint {
666 739 flex: 0 0 100%;
667 740 }
668 741
669 - .wdk-row
670 - {
742 + div.wdk-field-edit .postbox-upload .hide-if-no-js{
743 + gap: 5px;
744 + display: flex;
745 + flex-wrap: wrap;
746 + margin: 0;
747 + }
748 +
749 + .wdk-row {
671 750 & {
672 751 display: -ms-flexbox;
673 752 display: flex;
674 753 -ms-flex-wrap: wrap;
@@ -676,47 +755,46 @@
676 755 margin-right: -15px;
677 756 margin-left: -15px;
678 757 }
679 758
680 - & > [class*='wdk-col']
681 - {
759 + &>[class*='wdk-col'] {
682 760 position: relative;
683 761 width: 100%;
684 762 padding-right: 15px;
685 763 padding-left: 15px;
686 764 box-sizing: border-box;
687 - }
688 -
765 + }
766 +
689 767 .wdk-col-auto {
690 768 -ms-flex: 0 0 auto;
691 769 flex: 0 0 auto;
692 770 width: auto;
693 771 max-width: 100%;
694 - }
772 + }
695 773
696 -
774 +
697 775 @for $i from 1 through 12 {
698 776 .wdk-col-#{$i} {
699 777 -webkit-flex: 0 0 calc(100% / 12 * #{$i});
700 - flex: 0 0 calc(100% / 12 * #{$i});
701 - max-width: calc(100% / 12 * #{$i});
778 + flex: 0 0 calc(100% / 12 * #{$i});
779 + max-width: calc(100% / 12 * #{$i});
702 780 }
703 - }
704 -
705 - @media (min-width:992px){
781 + }
782 +
783 + @media (min-width:992px) {
706 784 @for $i from 1 through 12 {
707 785 .wdk-col-md-#{$i} {
708 786 -webkit-flex: 0 0 calc(100% / 12 * #{$i});
709 - flex: 0 0 calc(100% / 12 * #{$i});
710 - max-width: calc(100% / 12 * #{$i});
787 + flex: 0 0 calc(100% / 12 * #{$i});
788 + max-width: calc(100% / 12 * #{$i});
711 789 }
712 - }
790 + }
713 791 }
714 792 }
715 793
716 794 .text-center {
717 795 text-align: center;
718 - }
796 + }
719 797
720 798 .text-left {
721 799 text-align: left;
722 800 }
@@ -729,12 +807,13 @@
729 807 color: #ffffff;
730 808 background-color: #c1002b;
731 809 border-color: #c1002b;
732 810
733 - &:hover, &:hover {
811 + &:hover,
812 + &:hover {
734 813 -webkit-box-shadow: 0 1px 5px rgba(193, 0, 43, 0.4) !important;
735 814 box-shadow: 0 1px 5px rgba(193, 0, 43, 0.4) !important;
736 - }
815 + }
737 816 }
738 817
739 818 .button.btn-info {
740 819 color: #ffffff;
@@ -740,14 +819,15 @@
740 819 color: #ffffff;
741 820 background-color: #00c9b7;
742 821 border-color: #00c9b7;
743 822
744 - &:hover, &:hover {
823 + &:hover,
824 + &:hover {
745 825 -webkit-box-shadow: 0 1px 5px #00c9b875 !important;
746 826 box-shadow: 0 1px 5px #00c9b875 !important;
747 - }
827 + }
748 828 }
749 -
829 +
750 830 .button.xl {
751 831 padding: 10px 30px;
752 832 }
753 833
@@ -754,9 +834,9 @@
754 834 .wp-editor-wrap .wp-editor-container {
755 835 width: 100%;
756 836 margin: 0;
757 837 box-shadow: none;
758 - border-radius: 4px;
838 + border-radius: 2px;
759 839 border: 1px solid #8c8f94;
760 840 background-color: #fff;
761 841 color: #2c3338;
762 842 overflow: hidden;
@@ -764,25 +844,31 @@
764 844
765 845 /* addon subscription */
766 846 .wdk-pricing {
767 847 margin: 10px 0;
848 +
768 849 .wdk-sec-header {
769 850 margin-bottom: 20px;
851 +
770 852 .wdk-sec-title {
771 853 font-size: 24px;
772 854 font-weight: 300;
773 855 line-height: 1.5;
774 856 margin-top: 5px;
857 +
775 858 .mark {
776 859 font-weight: 700;
777 860 }
861 +
778 862 .mark.color {
779 863 color: #c1002b;
780 864 }
865 +
781 866 .mark.up {
782 867 text-transform: uppercase;
783 868 }
784 869 }
870 +
785 871 .wdk-sec-subtitle {
786 872 font-size: 20px;
787 873 font-weight: 400;
788 874 }
@@ -793,14 +879,15 @@
793 879 background-color: #fff;
794 880 border: 1px solid #dcdcde;
795 881 box-sizing: border-box;
796 882 margin-bottom: 15px;
883 +
797 884 &.featured {
798 885 .header {
799 886 background: -webkit-gradient(linear, left top, left bottom, from(#5837ff), to(#5533ff));
800 887 background: linear-gradient(#1d2327, #121518);
801 888 }
802 -
889 +
803 890 p,
804 891 .header {
805 892 color: #fff;
806 893 }
@@ -806,13 +893,12 @@
806 893 }
807 894 }
808 895 }
809 896
810 - .wdk-wrap .wdk-pricing .wdk-pac.yearly h4
811 - {
812 - margin-top:0px;
897 + .wdk-wrap .wdk-pricing .wdk-pac.yearly h4 {
898 + margin-top: 0px;
813 899 }
814 -
900 +
815 901 .header {
816 902 background: -webkit-gradient(linear, left top, left bottom, from(#fcfdfe), to(#f9fbfd));
817 903 background: linear-gradient(#fcfdfe, #f9fbfd);
818 904 background-color: rgba(22, 28, 45, 0.03);
@@ -819,8 +905,9 @@
819 905 padding: 0.75rem 1.25rem;
820 906 margin-bottom: 0;
821 907 border-bottom: 1px solid rgba(22, 28, 45, 0.125);
822 908 color: rgb(109, 118, 139);
909 +
823 910 h4 {
824 911 font-size: 24px;
825 912 font-weight: 400;
826 913 margin-bottom: 15px;
@@ -834,8 +921,9 @@
834 921 .list-items {
835 922 padding: 0;
836 923 margin: 0;
837 924 list-style: none;
925 +
838 926 .item {
839 927 display: block;
840 928 padding: 12px 20px;
841 929 font-size: 16px;
@@ -840,13 +928,14 @@
840 928 padding: 12px 20px;
841 929 font-size: 16px;
842 930 color: rgb(109, 118, 139);
843 931 }
932 +
844 933 .item:not(:first-child) {
845 934 border-top: 1px solid rgba(22, 28, 45, 0.125);
846 935 }
847 936 }
848 -
937 +
849 938 .wdk-pac-footer {
850 939 border-top: 1px solid rgba(22, 28, 45, 0.125);
851 940 padding: 20px 20px;
852 941
@@ -860,10 +949,10 @@
860 949 line-height: 1.5;
861 950 border: 1px solid #506690;
862 951 padding: 8px 20px;
863 952 border-radius: 3px;
864 -
865 - &:hover{
953 +
954 + &:hover {
866 955 color: #ffffff;
867 956 background-color: #506690;
868 957 border-color: #506690;
869 958 }
@@ -868,40 +957,61 @@
868 957 border-color: #506690;
869 958 }
870 959 }
871 960 }
872 -
961 +
873 962 .pricing-value {
874 963 font-family: "Poppins", sans-serif;
875 - font-size: 52px;
964 + font-size: 52px;
965 +
876 966 .price {
877 - position: relative;
967 + position: relative;
878 968 font-weight: 500;
879 969 line-height: 1;
880 970 }
881 - .price .before,
971 +
972 + .price .before,
882 973 .price .after {
883 974 font-size: 18px;
884 975 font-weight: 300;
885 - font-style: italic;
976 + font-style: italic;
886 977 }
978 +
887 979 .price .before {
888 980 position: absolute;
889 981 top: 10px;
890 - left: -15px;
982 + left: -15px;
891 983 }
984 +
892 985 .price .after {
893 986 position: relative;
894 987 }
895 988 }
896 -
989 +
897 990 }
898 -
991 +
899 992 .winter_mvc-media .winter_mvc-media-card {
900 993 min-width: 200px;
901 994 }
995 +
996 +
997 + .field-error {
998 + background: #FFE6DF;
999 + input, select,textarea {
1000 + border-color: rgb(163, 1, 1);
1001 + }
1002 +
1003 + p.wdk-hint.wdk-error {
1004 + color: rgb(163, 1, 1);
1005 + }
1006 + }
1007 +
1008 + .wdk-field-container .button {
1009 + display: inline-flex;
1010 + align-items: center;
1011 + }
902 1012 }
903 -
1013 +
904 1014 .wp-core-ui .quicktags-toolbar input.button.button-small {
905 1015 display: inline-block !important;
906 1016 width: auto !important;
907 1017 }
@@ -906,9 +1016,9 @@
906 1016 width: auto !important;
907 1017 }
908 1018
909 1019 .wdk-unwrapp-field {
910 - .wdk_dropdown_tree > .btn-group {
1020 + .wdk_dropdown_tree>.btn-group {
911 1021 width: 100%;
912 1022 display: flex;
913 1023 height: auto;
914 1024 }
@@ -924,20 +1034,20 @@
924 1034 }
925 1035
926 1036 .wdk_dropdown_tree button.btn.btn-default.dropdown-toggle,
927 1037 .wdk_dropdown_tree button {
928 - border-radius: 4px;
1038 + border-radius: 0;
929 1039 }
930 1040
931 1041 .wdk_dropdown_tree button:first-child {
932 1042 border-top-right-radius: 0;
933 1043 border-bottom-right-radius: 0;
934 - border-top-left-radius: 4px;
935 - border-bottom-left-radius: 4px;
1044 + border-top-left-radius: 0;
1045 + border-bottom-left-radius: 0;
936 1046 }
937 1047
938 1048 .wdk_dropdown_tree .list_container .input-group {
939 - border: 1px solid #8c8f94;
1049 + border-top: 1px solid #8c8f94;
940 1050 }
941 1051
942 1052 .wdk_dropdown_tree .list_scroll {
943 1053 border-left: 1px solid #8c8f94;
@@ -965,9 +1075,9 @@
965 1075 max-width: 100%;
966 1076 }
967 1077
968 1078 .wdk_dropdown_tree .list_container .input-group-addon {
969 - &{
1079 + & {
970 1080 position: relative;
971 1081 }
972 1082
973 1083 & i {
@@ -972,13 +1082,13 @@
972 1082
973 1083 & i {
974 1084 position: absolute;
975 1085 left: 0;
976 - margin-left: 5px;
1086 + margin-left: 11px;
977 1087 top: 50%;
978 1088 margin-top: -9px;
979 1089 }
980 -
1090 +
981 1091 & i.fa-spin {
982 1092 margin-left: 7px;
983 1093 margin-top: -7px;
984 1094 }
@@ -1001,29 +1111,42 @@
1001 1111
1002 1112 .fa.fa-search:after {
1003 1113 content: "\f179";
1004 1114 }
1005 -
1115 +
1006 1116 .loader-spiner.fa.fa-spinner:after {
1007 1117 content: "\f113";
1008 1118 }
1009 -
1119 +
1010 1120 .loader-spiner.fa.fa-spinner {
1011 1121 -webkit-animation: wdk-spin 2s infinite linear;
1012 - animation: wdk-spin 2s infinite linear;
1122 + animation: wdk-spin 2s infinite linear;
1013 1123 }
1014 1124
1015 1125 @keyframes wdk-spin {
1016 1126 0% {
1017 - -webkit-transform: rotate(0deg);
1018 - transform: rotate(0deg);
1019 - }
1127 + -webkit-transform: rotate(0deg);
1128 + transform: rotate(0deg);
1129 + }
1130 +
1020 1131 100% {
1021 - -webkit-transform: rotate(360deg);
1022 - transform: rotate(360deg);
1023 - }
1132 + -webkit-transform: rotate(360deg);
1133 + transform: rotate(360deg);
1134 + }
1024 1135 }
1025 1136 }
1137 +
1138 + .field-error {
1139 + input, select,textarea {
1140 + border-color: rgb(163, 1, 1);
1141 + }
1142 +
1143 + p.wdk-hint.wdk-error {
1144 + color: rgb(163, 1, 1);
1145 + }
1146 + }
1147 +
1148 +
1026 1149 }
1027 1150
1028 1151 .tablenav .wdk-unwrapp-field {
1029 1152 float: left;
@@ -1041,22 +1164,34 @@
1041 1164 #adminmenu .wp-submenu li.current a[href="admin.php?page=wdk-addons"],
1042 1165 #adminmenu .wp-submenu li.current a[href="admin.php?page=wdk_addons_currencies"],
1043 1166 #adminmenu .wp-submenu li.current a[href="admin.php?page=wdk_addons_membership"],
1044 1167 #adminmenu .wp-submenu li.current a[href="admin.php?page=wdk_addons_bookings"] {
1045 - color: greenyellow;
1168 + color: greenyellow;
1046 1169 }
1047 1170
1048 1171
1049 1172 body .select2-container--default {
1173 + .select2-selection--multiple {
1174 + border-radius: 2px;
1175 + }
1050 1176 &.select2-container--focus .select2-selection--multiple,
1051 - & {
1052 - border: 0;
1177 + & {
1178 + border: 0;
1053 1179 min-width: 150px;
1180 + width: 25em !important;
1181 + border-radius: 2px;
1054 1182 }
1183 +
1184 + input {
1185 + min-height: 36px;
1186 + }
1187 +
1055 1188 .select2-selection--multiple {
1189 + cursor: pointer;
1056 1190 .select2-search__field {
1057 1191 border: 0 !important;
1058 1192 }
1193 +
1059 1194 .select2-selection__rendered li {
1060 1195 list-style: none;
1061 1196 margin: 0;
1062 1197
@@ -1064,25 +1199,63 @@
1064 1199 padding: 5px 6px;
1065 1200 margin: 3px 3px;
1066 1201 }
1067 1202 }
1068 -
1203 +
1069 1204 .select2-selection__rendered {
1070 1205 padding: 0;
1071 1206 display: block;
1072 - padding: 2px 45px 2px 5px ;
1207 + padding: 2px 45px 2px 5px;
1208 +
1209 +
1210 + // Add dropdown arrow icon to the right side (mimicking select dropdown)
1211 + &::after {
1212 + content: "";
1213 + display: block;
1214 + position: absolute;
1215 + right: 0px;
1216 + top: 0;
1217 + width: 26px;
1218 + height: 100%;
1219 + pointer-events: none;
1220 + background: #fff 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") no-repeat right 5px top 55%;
1221 + background-size: auto;
1222 + background-size: 16px 16px;
1223 + cursor: pointer;
1224 + border-left: 1px solid #8c8f94;
1225 + z-index: 10;
1226 + }
1227 + position: relative;
1228 +
1073 1229 }
1074 1230 }
1075 1231 }
1076 1232
1077 -body .wdk-field-edit.DROPDOWNMULTIPLE .select2-container--default .select2-selection--multiple{
1233 +body .wdk-field-edit.DROPDOWNMULTIPLE .select2-container--default .select2-selection--multiple {
1078 1234
1079 - .select2-selection__rendered {
1235 + .select2-selection__rendered {
1080 1236 padding: 0px 45px 0px 5px;
1081 1237 display: flex;
1082 1238 align-items: center;
1083 1239 flex-wrap: wrap;
1084 -
1240 +
1241 + // Add dropdown arrow icon to the right side (mimicking select dropdown)
1242 + &::after {
1243 + content: "";
1244 + display: block;
1245 + position: absolute;
1246 + right: 15px;
1247 + top: 50%;
1248 + width: 16px;
1249 + height: 16px;
1250 + pointer-events: none;
1251 + transform: translateY(-50%);
1252 + background: url('data:image/svg+xml;utf8,<svg fill="gray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="5,7 10,12 15,7"/></svg>') no-repeat center center;
1253 + background-size: 16px 16px;
1254 + }
1255 + position: relative;
1256 +
1257 +
1085 1258 li.select2-selection__choice {
1086 1259 padding: 1px 6px;
1087 1260 line-height: 19px;
1088 1261 }
@@ -1088,11 +1261,9 @@
1088 1261 }
1089 1262 }
1090 1263
1091 1264
1092 - .select2-selection__choice__remove {
1093 -
1094 - }
1265 + .select2-selection__choice__remove {}
1095 1266 }
1096 1267
1097 1268 body .wdk-field-edit.DROPDOWNMULTIPLE .select2-container--default {
1098 1269 //width: calc(100% - 28px) !important;
@@ -1114,17 +1285,16 @@
1114 1285 margin-top: 0;
1115 1286 }
1116 1287
1117 1288 body .select2-container--default.select2-container--focus .select2-selection--multiple {
1118 - border: 1px solid #8c8f94;
1289 + border: 1px solid #8c8f94;
1119 1290 }
1120 1291
1121 -.datetime_time_mask {
1292 +.datetime_time_mask {}
1122 1293
1123 -}
1124 -
1125 1294 .wdk_btn_load_indicator {
1126 1295 position: relative;
1296 +
1127 1297 &::after {
1128 1298 content: "\f113";
1129 1299 font-family: dashicons;
1130 1300 display: inline-block;
@@ -1149,14 +1319,15 @@
1149 1319 position: absolute;
1150 1320 right: -30px;
1151 1321 color: #2271b1;
1152 1322 }
1153 -
1323 +
1154 1324 @keyframes wdk-spin {
1155 1325 0% {
1156 1326 -webkit-transform: rotate(0deg);
1157 1327 transform: rotate(0deg);
1158 1328 }
1329 +
1159 1330 100% {
1160 1331 -webkit-transform: rotate(360deg);
1161 1332 transform: rotate(360deg);
1162 1333 }
@@ -1164,8 +1335,9 @@
1164 1335 }
1165 1336
1166 1337 .wdk_btn_load_success {
1167 1338 position: relative;
1339 +
1168 1340 &::after {
1169 1341 content: "\f147";
1170 1342 font-family: dashicons;
1171 1343 display: inline-block;
@@ -1188,13 +1360,14 @@
1188 1360 position: absolute;
1189 1361 right: -30px;
1190 1362 color: #2271b1;
1191 1363 }
1192 -
1364 +
1193 1365 }
1194 1366
1195 1367 .wdk_btn_load_error {
1196 1368 position: relative;
1369 +
1197 1370 &::after {
1198 1371 content: "\f335";
1199 1372 font-family: dashicons;
1200 1373 display: inline-block;
@@ -1217,9 +1390,9 @@
1217 1390 position: absolute;
1218 1391 right: -30px;
1219 1392 color: #2271b1;
1220 1393 }
1221 -
1394 +
1222 1395 }
1223 1396
1224 1397 .wdk-depend-fields .wdk_field {
1225 1398 position: relative;
@@ -1232,9 +1405,10 @@
1232 1405 align-items: center;
1233 1406 justify-content: flex-start;
1234 1407 padding: 15px 15px;
1235 1408
1236 - input[type="checkbox"], input[type="radio"] {
1409 + input[type="checkbox"],
1410 + input[type="radio"] {
1237 1411 margin: 0;
1238 1412 }
1239 1413
1240 1414 label {
@@ -1249,9 +1423,9 @@
1249 1423 background: #2c3338;
1250 1424
1251 1425 label {
1252 1426 margin-left: auto;
1253 - }
1427 + }
1254 1428 }
1255 1429
1256 1430 &.wdk_btn_load_indicator.out::after {
1257 1431 right: 15px;
@@ -1269,9 +1443,9 @@
1269 1443 .wdk-wrap .wdk-listing-childs-drop {
1270 1444 margin-top: 6px;
1271 1445 border: 1px solid #c3c4c7;
1272 1446 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1273 - border-radius: 4px;
1447 + border-radius: 0;
1274 1448 border: 1px dashed #8c8f94;
1275 1449 background-color: #fff;
1276 1450
1277 1451 min-height: 75px;
@@ -1277,8 +1451,9 @@
1277 1451 min-height: 75px;
1278 1452 box-sizing: border-box;
1279 1453 padding: 15px 15px 0 15px;
1280 1454 margin-bottom: 15px;
1455 +
1281 1456 .drop-listing-item {
1282 1457 width: 100%;
1283 1458 max-width: initial;
1284 1459 min-width: initial;
@@ -1283,9 +1458,9 @@
1283 1458 max-width: initial;
1284 1459 min-width: initial;
1285 1460 margin: 0px 15px 15px 0px;
1286 1461 cursor: pointer;
1287 - border-radius: 4px;
1462 + border-radius: 0;
1288 1463 border: 1px solid #c3c4c7;
1289 1464 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1290 1465 background: #fff;
1291 1466
@@ -1334,4 +1509,494 @@
1334 1509 .wdk-wrap .wp-list-table a.laoding_sublistings {
1335 1510 margin-top: 5px;
1336 1511 display: inline-block;
1337 1512 }
1513 +
1514 +
1515 +.wdk-wrap {
1516 +
1517 + .wdk-tabs-navs {
1518 + font-size: 0;
1519 + display: inline-block;
1520 + background: #fff;
1521 + border: 1px solid #c3c4c7;
1522 + margin-bottom: 15px;
1523 + margin-top: 10px;
1524 +
1525 + label {
1526 + display: inline-block;
1527 + font-size: 18px;
1528 + border: 1px solid #eee;
1529 + cursor: pointer;
1530 + transition: all .15s;
1531 + padding: 10px 15px;
1532 +
1533 +
1534 + &.active,
1535 + &:hover {
1536 + background: #eee;
1537 + }
1538 +
1539 + &:not(:last-child) {
1540 + margin-right: -1px;
1541 + }
1542 + }
1543 + }
1544 +
1545 + .wdk-tabs-panel {
1546 + >.wdk-tab {
1547 + display: none;
1548 + }
1549 +
1550 + .wdk-tab-input {
1551 + display: none;
1552 + }
1553 +
1554 + input:checked+div.wdk-tab {
1555 + display: block
1556 + }
1557 + }
1558 +
1559 +}
1560 +
1561 +.wdk-wrap {
1562 +
1563 + .wdk_multi_treefield_dropdown {
1564 + margin-bottom: 15px;
1565 + }
1566 +
1567 + .wdk_multi_treefield_dropdown_container .wdk_multi_treefield_dropdown:last-child {
1568 + margin-bottom: 0;
1569 + }
1570 +
1571 + .wdk_treefield_dropdown .wdk-field-group {
1572 + display: inline-block;
1573 + padding-right: 30px;
1574 + }
1575 +}
1576 +
1577 +.wdk-wrap {
1578 + .wdk_editlog {
1579 + table {
1580 + border: 1px solid #ddd;
1581 + width: 100%;
1582 + max-width: 100%;
1583 + margin-bottom: 20px;
1584 + background-color: #fff;
1585 + border-spacing: 0;
1586 + border-collapse: collapse;
1587 + }
1588 +
1589 + caption {
1590 + color: #000;
1591 + font-weight: 600;
1592 + font-size: 16px;
1593 + padding-bottom: 15px;
1594 + text-align: left;
1595 + }
1596 +
1597 + td,
1598 + th {
1599 + border: 1px solid #ddd;
1600 + padding: 8px;
1601 + line-height: 1.42857143;
1602 + vertical-align: top;
1603 + text-align: center;
1604 + }
1605 +
1606 + thead>tr:first-child>td,
1607 + thead>tr:first-child>th,
1608 + thead>tr:first-child>td,
1609 + thead>tr:first-child>th,
1610 + thead:first-child>tr:first-child>td,
1611 + thead:first-child>tr:first-child>th {
1612 + border-top: 0;
1613 +
1614 + }
1615 + }
1616 +}
1617 +
1618 +
1619 +
1620 +.custom_parameter {
1621 + float: left;
1622 + margin-right: 6px;
1623 +
1624 + box-shadow: 0 0 0 transparent;
1625 + border-radius: 4px;
1626 + background-color: #fff;
1627 + color: #2c3338;
1628 + display: grid;
1629 + grid-row: revert;
1630 + grid-auto-flow: column;
1631 + grid-gap: 1px 1px;
1632 + background-color: #8c8f94;
1633 + border: 1px solid #8c8f94;
1634 + border-radius: 3px;
1635 + overflow: hidden;
1636 +
1637 + * {
1638 + margin: 0 !important;
1639 + min-height: auto;
1640 + height: 100%;
1641 + border: 0 !important;
1642 + box-shadow: none !important;
1643 + border-radius: 0 !important;
1644 + min-height: 28px !important;
1645 + max-width: 100px !important;
1646 + }
1647 +}
1648 +
1649 +.btn_parameter {
1650 + float: left;
1651 + margin-right: 6px;
1652 + background: #2271b1;
1653 + color: #fff;
1654 + cursor: pointer;
1655 + border: 0;
1656 + height: 30px;
1657 + width: 32px;
1658 + border-radius: 3px;
1659 + text-decoration: none;
1660 + display: flex;
1661 + align-items: center;
1662 + justify-content: center;
1663 +
1664 + &:hover {
1665 + background: #135e96;
1666 + color: #fff;
1667 + }
1668 +
1669 + span {
1670 + height: auto;
1671 + }
1672 +}
1673 +
1674 +.filters-form {
1675 +
1676 + select,
1677 + input,
1678 + button,
1679 + .custom_parameter {
1680 + margin-bottom: 5px;
1681 + }
1682 +}
1683 +
1684 +.wdk-notice-upgrade {
1685 + background: #fcf0f1;
1686 + border-left-color: #d63a3c;
1687 + .dashicons-warning {
1688 + color: #d63a3c;
1689 + }
1690 +}
1691 +
1692 +.wdk-listing-toolbar {
1693 + --borded-radius: 3px;
1694 + --border-color: #ccd0d4;
1695 + display: flex;
1696 + align-items: center;
1697 + justify-content: space-between;
1698 + gap: 10px;
1699 + margin-bottom: 25px;
1700 + background: #f8fafc;
1701 + border-radius: var(--borded-radius);
1702 + box-shadow: 0 2px 8px rgba(44, 62, 80, 0.06);
1703 + padding: 15px 21px;
1704 + border-radius: var(--borded-radius);
1705 + .wdk-toolbar-left,
1706 + .wdk-toolbar-right {
1707 + flex: 0 0 auto;
1708 + a.button {
1709 + padding: 0 9px;
1710 + border-radius: var(--borded-radius);
1711 + transition: background 0.18s, color 0.18s, box-shadow 0.18s;
1712 + box-shadow: 0 1px 4px rgba(44,62,80,0.08);
1713 + &:hover, &:focus {
1714 + background: #e8eef7;
1715 + color: #2271b1;
1716 + box-shadow: 0 3px 12px rgba(44,62,80,0.12);
1717 + }
1718 + }
1719 + }
1720 +
1721 + .wdk-toolbar-search {
1722 + position: relative;
1723 + width: 200px;
1724 + max-width: 100%;
1725 + min-width: 150px;
1726 + display: flex;
1727 + align-items: center;
1728 +
1729 + input {
1730 + width: 100%;
1731 + padding: 9px 14px;
1732 + border-radius: var(--borded-radius);
1733 + border: 1px solid var(--border-color);
1734 + background: #fff;
1735 + font-size: 15px;
1736 + line-height: 1.3;
1737 + transition: border 0.15s, box-shadow 0.15s;
1738 + box-shadow: 0 1px 4px rgba(44,62,80,0.03);
1739 + &:focus {
1740 + border-color: #2271b1;
1741 + outline: none;
1742 + box-shadow: 0 2px 8px rgba(34,113,177,0.09);
1743 + }
1744 + }
1745 +
1746 + .wdk-search-results {
1747 + position: absolute;
1748 + left: 0;
1749 + right: 0;
1750 + top: calc(100% + 8px);
1751 + background: #fff;
1752 + border: 1px solid #ccd0d4;
1753 + border-radius: 6px;
1754 + box-shadow: 0 4px 18px rgba(44,62,80,0.11);
1755 + max-height: 340px;
1756 + overflow-y: auto;
1757 + z-index: 1001;
1758 +
1759 + .wdk-search-item {
1760 + display: block;
1761 + padding: 12px 18px;
1762 + text-decoration: none;
1763 + color: #222f3e;
1764 + border-bottom: 1px solid #f2f4f8;
1765 + transition: background 0.13s, color 0.13s;
1766 + &:last-child {
1767 + border-bottom: none;
1768 + }
1769 + &:hover, &:focus {
1770 + background: #f0f6fb;
1771 + color: #186dac;
1772 + }
1773 + }
1774 +
1775 + .wdk-search-loading,
1776 + .wdk-search-empty {
1777 + padding: 11px 16px;
1778 + display: flex;
1779 + align-items: center;
1780 + gap: 12px;
1781 + color: #888fa1;
1782 + font-size: 15px;
1783 + background: #f8fafc;
1784 + }
1785 +
1786 + .wdk-search-empty {
1787 + justify-content: flex-start;
1788 + font-style: italic;
1789 + color: #b0b4bb;
1790 + }
1791 + }
1792 + }
1793 + .spinner.is-active {
1794 + float: none;
1795 + margin: 0;
1796 + vertical-align: middle;
1797 + position: relative;
1798 + top: 2px;
1799 + left: 6px;
1800 + }
1801 +}
1802 +
1803 +
1804 +.tribute-container {
1805 + margin-top: 20px;
1806 +}
1807 +
1808 +
1809 +.wdk-wrap {
1810 +
1811 +.wdk-ai-fields-list {
1812 + background: #fff;
1813 + border: 1px solid #dcdcde;
1814 + border-radius: 8px;
1815 + overflow: hidden;
1816 +}
1817 +
1818 +.wdk-ai-field {
1819 + display: flex;
1820 + align-items: center;
1821 + gap: 10px;
1822 +
1823 + padding: 14px 16px;
1824 +
1825 + margin: 0;
1826 +
1827 + border-bottom: 1px solid #f0f0f1;
1828 +
1829 + cursor: pointer;
1830 +
1831 + transition: background 0.15s ease;
1832 +}
1833 +
1834 +.wdk-ai-field:last-child {
1835 + border-bottom: 0;
1836 +}
1837 +
1838 +.wdk-ai-field:hover {
1839 + background: #f6f7f7;
1840 +}
1841 +
1842 +.wdk-ai-field input[type="checkbox"] {
1843 + margin: 0;
1844 + flex: 0 0 auto;
1845 +}
1846 +
1847 +.wdk-ai-field-label {
1848 + flex: 1;
1849 +
1850 + font-size: 14px;
1851 + font-weight: 500;
1852 + color: #1d2327;
1853 +}
1854 +
1855 +.wdk-ai-field-type {
1856 + padding: 3px 8px;
1857 +
1858 + font-size: 11px;
1859 + font-weight: 600;
1860 + line-height: 1.4;
1861 + color: #646970;
1862 + background: #f0f0f1;
1863 + border-radius: 4px;
1864 +}
1865 +
1866 +.wdk-ai-field:has(input:checked) {
1867 + background: #f0f6fc;
1868 +}
1869 +
1870 +.wdk-ai-field:has(input:checked) .wdk-ai-field-label {
1871 + color: #2271b1;
1872 +}
1873 +
1874 +.wdk-ai-search-status {
1875 + display: inline-block;
1876 +
1877 + margin-top: 12px;
1878 +
1879 + font-size: 13px;
1880 + font-weight: 500;
1881 +}
1882 +
1883 +.wdk-ai-search-status.success {
1884 + color: #00a32a;
1885 +}
1886 +
1887 +.wdk-ai-search-status.error {
1888 + color: #d63638;
1889 +}
1890 +
1891 +.wdk-ai-fields-list {
1892 + display: grid;
1893 + grid-template-columns: repeat(2, 1fr);
1894 +
1895 + background: #fff;
1896 + border: 1px solid #dcdcde;
1897 + border-radius: 8px;
1898 +
1899 + overflow: hidden;
1900 +}
1901 +
1902 +.wdk-ai-field {
1903 + border-bottom: 1px solid #f0f0f1;
1904 +}
1905 +
1906 +.wdk-ai-field:nth-child(odd) {
1907 + border-right: 1px solid #f0f0f1;
1908 +}
1909 +}
1910 +
1911 +.wdk-body-listing {
1912 + display: flex;
1913 + flex-wrap: wrap;
1914 + justify-content: space-between;
1915 + align-items: center;
1916 +
1917 + >* {
1918 + order: 1;
1919 + }
1920 +
1921 + .fpai-ai-button {
1922 + order: 0;
1923 + }
1924 +
1925 + >form,
1926 + >.fpai-inline-form {
1927 + width: 100%;
1928 + }
1929 +}
1930 +
1931 +.wdk-empty-state {
1932 + padding: 40px 20px 48px;
1933 + text-align: center;
1934 + display: flex;
1935 + flex-direction: column;
1936 + align-items: center;
1937 +
1938 +
1939 + &__image {
1940 + display: block;
1941 + width: 170px;
1942 + max-width: 100%;
1943 + height: auto;
1944 + margin: 0 auto 18px;
1945 + }
1946 +
1947 + &__title {
1948 + margin: 0 0 8px;
1949 + color: #292d32;
1950 + font-size: 18px;
1951 + font-weight: 600;
1952 + line-height: 1.4;
1953 + }
1954 +
1955 + &__description {
1956 + max-width: 310px;
1957 + margin: 0 auto 18px;
1958 + color: #85858d;
1959 + font-size: 14px;
1960 + line-height: 1.6;
1961 + }
1962 +
1963 + &__button {
1964 + display: inline-flex;
1965 + align-items: center;
1966 + justify-content: center;
1967 + gap: 8px;
1968 + padding: 9px 15px;
1969 + border-radius: 8px;
1970 + background: #edf0fc;
1971 + color: #456596;
1972 + font-size: 14px;
1973 + font-weight: 600;
1974 + line-height: 1.4;
1975 + text-decoration: none;
1976 + transition: background .2s, color .2s;
1977 +
1978 + &:hover {
1979 + background: #e0e7fc;
1980 + color: #2f51a4;
1981 + }
1982 +
1983 + &:focus-visible {
1984 + outline: 2px solid #4775ed;
1985 + outline-offset: 3px;
1986 + }
1987 +
1988 + span {
1989 + font-size: 21px;
1990 + font-weight: 400;
1991 + line-height: 1;
1992 + }
1993 + }
1994 +}
1995 +
1996 +.wdk-wrap {
1997 + br {
1998 + display: block;
1999 + content: "";
2000 + margin-bottom: 5px;
2001 + }
2002 +}