PluginProbe ʕ •ᴥ•ʔ
Secure Custom Fields / 6.8.8
Secure Custom Fields v6.8.8
6.9.5 6.9.4 6.9.3 6.9.2 6.9.1 6.9.0 6.8.9 6.8.7 6.8.8 6.8.6 6.8.4 6.8.5 trunk 6.4.0-beta1 6.4.0-beta2 6.4.1 6.4.1-beta3 6.4.1-beta4 6.4.1-beta5 6.4.1-beta6 6.4.1-beta7 6.4.2 6.5.0 6.5.1 6.5.2 6.5.3 6.5.4 6.5.5 6.5.6 6.5.7 6.6.0 6.7.0 6.7.1 6.8.0 6.8.1 6.8.2 6.8.3
secure-custom-fields / assets / src / sass / pro / acf-pro-input.scss
secure-custom-fields / assets / src / sass / pro Last commit date
_blocks.scss 8 months ago _field-group.scss 1 year ago _fields.scss 1 year ago acf-pro-field-group.scss 1 year ago acf-pro-input.scss 9 months ago acf-styles-in-iframe-for-blocks.scss 8 months ago
acf-pro-input.scss
1307 lines
1 @charset "UTF-8";
2 @use './blocks';
3 /*--------------------------------------------------------------------------------------------
4 *
5 * Vars
6 *
7 *--------------------------------------------------------------------------------------------*/
8 /* colors */
9 /* acf-field */
10 /* responsive */
11 /*--------------------------------------------------------------------------------------------
12 *
13 * ACF 6 ↓
14 *
15 *--------------------------------------------------------------------------------------------*/
16 /*--------------------------------------------------------------------------------------------
17 *
18 * Mixins
19 *
20 *--------------------------------------------------------------------------------------------*/
21 /*---------------------------------------------------------------------------------------------
22 *
23 * Repeater
24 *
25 *---------------------------------------------------------------------------------------------*/
26 .acf-repeater {
27 /* table */
28 /* row handle (add/remove) */
29 /* add in spacer to th (force correct width) */
30 /* row */
31 /* sortable */
32 /* layouts */
33 /*
34 &.-row > table > tbody > tr:before,
35 &.-block > table > tbody > tr:before {
36 content: "";
37 display: table-row;
38 height: 2px;
39 background: #f00;
40 }
41 */
42 /* empty */
43 /* collapsed */
44 /* collapsed (block layout) */
45 /* collapsed (table layout) */
46 }
47 .acf-repeater > table {
48 margin: 0 0 8px;
49 background: #F9F9F9;
50 }
51 .acf-repeater > table > tbody tr.acf-divider:not(:first-child) > td {
52 border-top: 10px solid #EAECF0;
53 }
54 .acf-repeater .acf-row-handle {
55 width: 16px;
56 text-align: center !important;
57 vertical-align: middle !important;
58 position: relative;
59 /* icons */
60 /* .order */
61 /* remove */
62 }
63 .acf-repeater .acf-row-handle .acf-order-input-wrap {
64 width: 45px;
65 }
66 .acf-repeater .acf-row-handle .acf-order-input::-webkit-outer-spin-button,
67 .acf-repeater .acf-row-handle .acf-order-input::-webkit-inner-spin-button {
68 -webkit-appearance: none;
69 margin: 0;
70 }
71 .acf-repeater .acf-row-handle .acf-order-input {
72 -moz-appearance: textfield;
73 text-align: center;
74 }
75 .acf-repeater .acf-row-handle .acf-icon {
76 display: none;
77 position: absolute;
78 top: 0;
79 margin: -8px 0 0 -2px;
80 /* minus icon */
81 }
82 .acf-repeater .acf-row-handle .acf-icon.-minus {
83 top: 50%;
84 /* ie fix */
85 }
86 body.browser-msie .acf-repeater .acf-row-handle .acf-icon.-minus {
87 top: 25px;
88 }
89 .acf-repeater .acf-row-handle.order {
90 background: #f4f4f4;
91 cursor: move;
92 color: #aaa;
93 text-shadow: #fff 0 1px 0;
94 }
95 .acf-repeater .acf-row-handle.order:hover {
96 color: #666;
97 }
98 .acf-repeater .acf-row-handle.order + td {
99 border-left-color: #DFDFDF;
100 }
101 .acf-repeater .acf-row-handle.pagination {
102 cursor: auto;
103 }
104 .acf-repeater .acf-row-handle.remove {
105 background: #F9F9F9;
106 border-left-color: #DFDFDF;
107 }
108 .acf-repeater th.acf-row-handle:before {
109 content: "";
110 width: 16px;
111 display: block;
112 height: 1px;
113 }
114 .acf-repeater .acf-row {
115 /* hide clone */
116 /* hover */
117 }
118 .acf-repeater .acf-row.acf-clone {
119 display: none !important;
120 }
121 .acf-repeater .acf-row:hover, .acf-repeater .acf-row.-hover {
122 /* icons */
123 }
124 .acf-repeater .acf-row:hover > .acf-row-handle .acf-icon, .acf-repeater .acf-row.-hover > .acf-row-handle .acf-icon {
125 display: block;
126 }
127 .acf-repeater .acf-row:hover > .acf-row-handle .acf-icon.show-on-shift, .acf-repeater .acf-row.-hover > .acf-row-handle .acf-icon.show-on-shift {
128 display: none;
129 }
130 body.acf-keydown-shift .acf-repeater .acf-row:hover > .acf-row-handle .acf-icon.show-on-shift, body.acf-keydown-shift .acf-repeater .acf-row.-hover > .acf-row-handle .acf-icon.show-on-shift {
131 display: block;
132 }
133 body.acf-keydown-shift .acf-repeater .acf-row:hover > .acf-row-handle .acf-icon.hide-on-shift, body.acf-keydown-shift .acf-repeater .acf-row.-hover > .acf-row-handle .acf-icon.hide-on-shift {
134 display: none;
135 }
136 .acf-repeater > table > tbody > tr.ui-sortable-helper {
137 box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
138 }
139 .acf-repeater > table > tbody > tr.ui-sortable-placeholder {
140 visibility: visible !important;
141 }
142 .acf-repeater > table > tbody > tr.ui-sortable-placeholder td {
143 background: #F9F9F9;
144 }
145 .acf-repeater.-row > table > tbody > tr > td, .acf-repeater.-block > table > tbody > tr > td {
146 border-top-color: #E1E1E1;
147 }
148 .acf-repeater.-empty > table > thead > tr > th {
149 border-bottom: 0 none;
150 }
151 .acf-repeater.-empty.-row > table, .acf-repeater.-empty.-block > table {
152 display: none;
153 }
154 .acf-repeater .acf-row.-collapsed > .acf-field {
155 display: none !important;
156 }
157 .acf-repeater .acf-row.-collapsed > td.acf-field.-collapsed-target {
158 display: table-cell !important;
159 }
160 .acf-repeater .acf-row.-collapsed > .acf-fields > * {
161 display: none !important;
162 }
163 .acf-repeater .acf-row.-collapsed > .acf-fields > .acf-field.-collapsed-target {
164 display: block !important;
165 }
166 .acf-repeater .acf-row.-collapsed > .acf-fields > .acf-field.-collapsed-target[data-width]] {
167 float: none !important;
168 width: auto !important;
169 }
170 .acf-repeater.-table .acf-row.-collapsed .acf-field.-collapsed-target {
171 border-left-color: #dfdfdf;
172 }
173 .acf-repeater.-max .acf-icon[data-event=add-row]=add-row] {
174 display: none !important;
175 }
176 .acf-repeater > .acf-actions .acf-button {
177 float: right;
178 pointer-events: auto !important;
179 }
180 .acf-repeater > .acf-actions .acf-tablenav {
181 float: right;
182 margin-right: 20px;
183 }
184 .acf-repeater > .acf-actions .acf-tablenav .current-page {
185 width: auto !important;
186 }
187
188 /*---------------------------------------------------------------------------------------------
189 *
190 * Flexible Content
191 *
192 *---------------------------------------------------------------------------------------------*/
193 .acf-flexible-content {
194 position: relative;
195 container-name: flexible-content;
196 container-type: inline-size;
197 }
198 .acf-flexible-content > .clones {
199 display: none;
200 }
201 .acf-flexible-content > .values {
202 margin: 0 0 8px;
203 }
204 .acf-flexible-content > .values > .ui-sortable-placeholder {
205 visibility: visible !important;
206 border: 1px dashed #b4b9be;
207 box-shadow: none;
208 background: transparent;
209 }
210 .acf-flexible-content .layout {
211 position: relative;
212 margin: 20px 0 0;
213 background: #fff;
214 border: 1px solid #ccd0d4;
215 }
216 .acf-flexible-content .layout:first-child {
217 margin-top: 0;
218 }
219
220 .acf-flexible-content .layout[data-enabled="0"]="0""]>.acf-fc-layout-actions-wrap .acf-layout-disabled {
221 display: inline-flex
222 }
223
224 .acf-flexible-content .layout[data-renamed="1"]="1""] .acf-fc-layout-actions-wrap .acf-fc-layout-original-title {
225 display: flex
226 }
227
228 .acf-flexible-content .layout .acf-fc-layout-actions-wrap {
229 display: flex;
230 justify-content: space-between;
231 align-items: center;
232 min-height: 48px;
233 border-bottom: #ccd0d4 solid 1px;
234 padding: 0 8px 0 12px;
235 background: #f9f9f9
236 }
237
238 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-handle {
239 display: flex;
240 align-items: center;
241 cursor: move;
242 color: #444;
243 font-size: 13px;
244 font-weight: 500;
245 line-height: 1.4em;
246 flex-grow: 1;
247 gap: 8px
248 }
249
250 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-layout-disabled {
251 display: none;
252 font-size: 12px;
253 font-weight: normal;
254 line-height: 16px;
255 border-radius: 2px;
256 background-color: #e0e0e0;
257 color: #101828;
258 padding: 4px 8px;
259 margin-left: 4px
260 }
261
262 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-layout-disabled:before {
263 content: "";
264 width: 16px;
265 height: 16px;
266 margin-right: 4px;
267 background: #101828;
268 -webkit-mask-image: url("../../../images/icons/icon-hidden.svg");
269 mask-image: url("../../../images/icons/icon-hidden.svg")
270 }
271
272 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-original-title {
273 display: none;
274 font-weight: 400;
275 color: rgba(68, 68, 68, .5)
276 }
277
278 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-order,
279 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-draggable-icon {
280 display: flex;
281 justify-content: center;
282 width: 32px;
283 height: 20px;
284 border: 1px solid #e0e0e0;
285 border-radius: 10px;
286 box-sizing: border-box;
287 line-height: 18px;
288 background: #f0f0f0;
289 font-size: 12px;
290 color: #757575
291 }
292
293 html[dir=rtl]=rtl] .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-order,
294 html[dir=rtl]=rtl] .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-draggable-icon {
295 float: right;
296 margin-right: 0;
297 margin-left: 5px;
298 }
299
300 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-order+.acf-fc-layout-draggable-icon {
301 display: none;
302 border: 1px solid #2f2f2f;
303 background: #2f2f2f
304 }
305
306 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-order+.acf-fc-layout-draggable-icon:before {
307 content: "";
308 width: 7px;
309 height: 11px;
310 margin: auto;
311 -webkit-mask-repeat: no-repeat;
312 mask-repeat: no-repeat;
313 background: #fff;
314 vertical-align: middle;
315 -webkit-mask-image: url("../../../images/icons/icon-draggable.svg");
316 mask-image: url("../../../images/icons/icon-draggable.svg")
317 }
318
319 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-controls {
320 display: flex;
321 align-items: center;
322 gap: 5px
323 }
324
325 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-controls .disabled .acf-icon {
326 background: #ccc !important
327 }
328
329 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-controls .acf-icon.-plus-alt,
330 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-controls .acf-icon.-duplicate-alt,
331 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-controls .acf-icon.-trash-alt,
332 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-controls .acf-icon.-more-actions {
333 visibility: hidden;
334 background: #101828
335 }
336
337 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-controls .acf-icon.-collapse {
338 border: none;
339 color: #101828
340 }
341
342 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-controls .acf-icon.-collapse:hover {
343 background: none;
344 color: #101828
345 }
346
347 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-controls .acf-layout-collapse {
348 display: flex;
349 align-items: center;
350 align-content: center;
351 margin-left: 8px;
352 padding-left: 4px;
353 border-left: 1px solid #d9d9d9
354 }
355
356 .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-controls a:focus {
357 border-radius: 2px
358 }
359
360 html[dir=rtl]=rtl] .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-controls {
361 right: auto;
362 left: 9px
363 }
364
365 .acf-flexible-content .layout .acf-fc-layout-actions-wrap:hover .acf-fc-layout-order {
366 display: none
367 }
368
369 .acf-flexible-content .layout .acf-fc-layout-actions-wrap:hover .acf-fc-layout-draggable-icon {
370 display: flex
371 }
372
373 .acf-flexible-content .layout>.acf-fields,
374 .acf-flexible-content .layout>.acf-table {
375 border: 1px solid rgba(0, 0, 0, 0);
376 border-top: none
377 }
378
379 .acf-flexible-content .layout.active-layout {
380 border-color: rgba(0, 0, 0, 0)
381 }
382
383 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap {
384 background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
385 border: none
386 }
387
388 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap .acf-fc-layout-draggable-icon {
389 border-color: #fff;
390 background: #fff
391 }
392
393 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap .acf-fc-layout-draggable-icon:before {
394 background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))
395 }
396
397 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap .acf-fc-layout-handle {
398 color: #fff
399 }
400
401 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap .acf-fc-layout-handle .acf-fc-layout-order {
402 background: rgba(240, 240, 240, .2);
403 border-color: rgba(224, 224, 224, .34);
404 color: #fff
405 }
406
407 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap .acf-fc-layout-handle .acf-fc-layout-original-title {
408 color: hsla(0, 0%, 100%, .5)
409 }
410
411 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap .acf-fc-layout-controls .disabled .acf-icon {
412 background: hsla(0, 0%, 100%, .3)
413 }
414
415 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap .acf-fc-layout-controls .-plus-alt,
416 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap .acf-fc-layout-controls .-duplicate-alt,
417 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap .acf-fc-layout-controls .-trash-alt,
418 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap .acf-fc-layout-controls .-more-actions {
419 background: #fff;
420 visibility: visible
421 }
422
423 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap .acf-fc-layout-controls .-collapse {
424 color: #fff
425 }
426
427 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap .acf-fc-layout-controls .-collapse:hover {
428 color: #fff
429 }
430
431 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap .acf-fc-layout-controls .acf-layout-collapse {
432 border-left-color: hsla(0, 0%, 100%, .2)
433 }
434
435 .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap .acf-fc-layout-controls a:focus {
436 box-shadow: 0 0 0 1px #fff
437 }
438
439 .acf-flexible-content .layout.active-layout>.acf-fields,
440 .acf-flexible-content .layout.active-layout>.acf-table {
441 background: rgba(56, 88, 233, .04);
442 border: 1px solid rgba(56, 88, 233, .2)
443 }
444
445 .acf-flexible-content .layout.is-selected {
446 border-color: #7e8993;
447 }
448 .acf-flexible-content .layout.is-selected .acf-fc-layout-handle {
449 border-color: #7e8993;
450 }
451 .acf-flexible-content .layout:hover .acf-fc-layout-controls .acf-icon.-plus-alt,
452 .acf-flexible-content .layout:hover .acf-fc-layout-controls .acf-icon.-duplicate-alt,
453 .acf-flexible-content .layout:hover .acf-fc-layout-controls .acf-icon.-trash-alt,
454 .acf-flexible-content .layout:hover .acf-fc-layout-controls .acf-icon.-more-actions,
455 .acf-flexible-content .layout.-hover .acf-fc-layout-controls .acf-icon.-plus-alt,
456 .acf-flexible-content .layout.-hover .acf-fc-layout-controls .acf-icon.-duplicate-alt,
457 .acf-flexible-content .layout.-hover .acf-fc-layout-controls .acf-icon.-trash-alt,
458 .acf-flexible-content .layout.-hover .acf-fc-layout-controls .acf-icon.-more-actions {
459 visibility: visible
460 }
461 .acf-flexible-content .layout.-collapsed>.acf-fc-layout-actions-wrap {
462 border-bottom-width: 0
463 }
464 .acf-flexible-content .layout.-collapsed > .acf-fields,
465 .acf-flexible-content .layout.-collapsed > .acf-table {
466 display: none;
467 }
468 .acf-flexible-content .layout > .acf-table {
469 box-shadow: none;
470 box-sizing: border-box;
471 }
472 .acf-flexible-content .layout > .acf-table > tbody > tr {
473 background: #fff;
474 }
475 .acf-flexible-content .layout > .acf-table > thead > tr > th {
476 background: #F9F9F9;
477 }
478 .acf-flexible-content .no-value-message {
479 padding: 19px;
480 border: #ccc dashed 2px;
481 text-align: center;
482 display: none;
483 }
484 .acf-flexible-content.-empty > .no-value-message {
485 display: block;
486 }
487
488
489 .acf-flexible-content.-empty .acf-fc-top-actions {
490 display: none !important
491 }
492
493 .acf-flexible-content>.acf-actions {
494 display: flex;
495 justify-content: flex-end
496 }
497
498 .acf-flexible-content>.acf-actions.acf-fc-top-actions {
499 gap: 20px;
500 margin-bottom: 15px
501 }
502
503 .acf-flexible-content>.acf-actions.acf-fc-top-actions .acf-separator {
504 display: inline-block;
505 width: 1px;
506 height: 40px;
507 background: #d9d9d9
508 }
509
510 .acf-flexible-content>.acf-actions.acf-fc-top-actions .acf-btn-clear {
511 color: #0783be !important;
512 padding: 0
513 }
514
515 .acf-flexible-content>.acf-actions.acf-fc-top-actions .acf-btn-clear:hover {
516 text-decoration: underline
517 }
518
519 .acf-flexible-content>.acf-actions .acf-button {
520 display: inline-flex;
521 align-items: center
522 }
523
524 @container flexible-content (max-width: 400px) {
525 .acf-flexible-content>.acf-actions.acf-fc-top-actions {
526 flex-wrap: wrap;
527 gap: 10px
528 }
529
530 .acf-flexible-content>.acf-actions.acf-fc-top-actions .acf-separator {
531 display: none
532 }
533
534 .acf-flexible-content>.acf-actions.acf-fc-top-actions .acf-btn-clear {
535 flex: 1 1 auto;
536 text-align: center;
537 justify-content: center
538 }
539
540 .acf-flexible-content>.acf-actions.acf-fc-top-actions .acf-button {
541 flex: 1 1 100%;
542 justify-content: center;
543 width: 100%
544 }
545 }
546
547 #acf-popup .acf-rename-layout-popup .inner .acf-field:first-child {
548 margin-top: 0
549 }
550
551 #acf-popup .acf-rename-layout-popup .inner .acf-field .acf-label {
552 text-transform: uppercase;
553 font-size: 11px
554 }
555
556 #acf-popup .acf-rename-layout-popup .inner .acf-field input[type=text]=text] {
557 height: 40px;
558 border-radius: 0
559 }
560
561 #acf-popup .acf-rename-layout-popup .inner .acf-actions {
562 padding-top: 10px
563 }
564
565 #acf-popup .acf-rename-layout-popup .inner .acf-actions .acf-reset-label {
566 flex-grow: 1;
567 padding-left: 0;
568 padding-right: 0
569 }
570
571 #acf-popup .acf-rename-layout-popup .inner .acf-actions .acf-confirm {
572 background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) !important
573 }
574
575 #acf-popup .acf-rename-layout-popup .inner .acf-actions .acf-confirm:hover {
576 background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6)) !important
577 }
578
579 .block-editor-page .acf-flexible-content>.acf-actions .acf-button {
580 border-radius: 2px;
581 height: 40px
582 }
583
584 .block-editor-page .acf-flexible-content>.acf-actions .acf-button.button-primary {
585 background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))
586 }
587
588 .block-editor-page .acf-flexible-content>.acf-actions .acf-button.button-primary:hover {
589 background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))
590 }
591
592 body:not(.block-editor-page) .acf-flexible-content .acf-fc-top-actions {
593 min-height: 30px
594 }
595
596 body:not(.block-editor-page) .acf-flexible-content .acf-fc-top-actions .acf-separator {
597 height: 30px
598 }
599
600 body:not(.block-editor-page) .acf-flexible-content .acf-fc-top-actions .acf-btn {
601 min-height: 30px
602 }
603
604 body:not(.block-editor-page) .acf-flexible-content .layout.active-layout>.acf-fc-layout-actions-wrap {
605 background: #2271b1
606 }
607
608 body:not(.block-editor-page) .acf-flexible-content .layout.active-layout>.acf-fields,
609 body:not(.block-editor-page) .acf-flexible-content .layout.active-layout>.acf-table {
610 background: rgba(34, 113, 177, .04)
611 }
612
613 .rtl .acf-flexible-content .layout .acf-fc-layout-actions-wrap {
614 padding: 0 12px 0 0
615 }
616
617 .rtl .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-layout-disabled:before {
618 margin-right: 0;
619 margin-left: 4px
620 }
621
622 .rtl .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-controls .acf-layout-collapse {
623 border-right: 1px solid #d9d9d9;
624 border-left: none;
625 padding: 0 4px 0 0
626 }
627
628 .rtl .acf-fc-popup.acf-more-layout-actions li a:before {
629 margin-right: 0;
630 margin-left: 5px
631 }
632
633 .acf-fc-popup {
634 background: #fff;
635 border: 1px solid #d0d5dd;
636 padding: 2px 8px;
637 z-index: 900001;
638 min-width: 135px;
639 }
640
641 .acf-fc-popup:before {
642 content: none
643 }
644
645 .acf-fc-popup ul {
646 display: flex;
647 flex-direction: column;
648 list-style: none
649 }
650
651 .acf-fc-popup ul, .acf-fc-popup li {
652 margin: 0;
653 padding: 0;
654 }
655 .acf-fc-popup li {
656 position: relative;
657 float: none;
658 white-space: nowrap;
659 height: 40px;
660 display: flex;
661 align-items: center
662 }
663 .acf-fc-popup .badge {
664 display: inline-block;
665 border-radius: 8px;
666 font-size: 9px;
667 line-height: 15px;
668 padding: 0 5px;
669 background: #d54e21;
670 text-align: center;
671 color: #fff;
672 vertical-align: top;
673 margin: 2px 0 0 5px;
674 }
675 .acf-fc-popup a {
676 color: #101828;
677 width: 100%;
678 display: block;
679 text-decoration: none;
680 position: relative;
681 overflow: hidden;
682 text-overflow: ellipsis;
683 white-space: nowrap;
684 }
685 .acf-fc-popup a:hover {
686 color: #2271b1;
687 }
688 .acf-fc-popup a.disabled {
689 color: #888;
690 background: transparent;
691 }
692
693 .acf-fc-popup a:focus {
694 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
695 border-radius: 4px
696 }
697
698 .acf-fc-popup.acf-more-layout-actions {
699 width: 212px
700 }
701
702 .acf-fc-popup.acf-more-layout-actions li a {
703 width: 100%
704 }
705
706 .acf-fc-popup.acf-more-layout-actions li a:before {
707 content: "";
708 display: inline-block;
709 width: 16px;
710 height: 16px;
711 -webkit-mask-repeat: no-repeat;
712 mask-repeat: no-repeat;
713 margin-right: 5px;
714 background: #101828;
715 vertical-align: middle;
716 margin-top: -2px
717 }
718
719 .acf-fc-popup.acf-more-layout-actions li a:hover:before {
720 background: #2271b1
721 }
722
723 .acf-fc-popup.acf-more-layout-actions li a.acf-rename-layout:before {
724 -webkit-mask-image: url("../../../images/icons/icon-edit.svg");
725 mask-image: url("../../../images/icons/icon-edit.svg")
726 }
727
728 .acf-fc-popup.acf-more-layout-actions li a.acf-toggle-layout:before {
729 -webkit-mask-image: url("../../../images/icons/icon-hidden-alt.svg");
730 mask-image: url("../../../images/icons/icon-hidden-alt.svg")
731 }
732
733 .acf-fc-popup.acf-more-layout-actions li a.acf-toggle-layout.enable {
734 display: none
735 }
736
737 .acf-fc-popup.acf-more-layout-actions li a.acf-toggle-layout.enable:before {
738 -webkit-mask-image: url("../../../images/icons/icon-visible.svg");
739 mask-image: url("../../../images/icons/icon-visible.svg")
740 }
741
742 .acf-fc-popup.acf-more-layout-actions li a.acf-toggle-layout.disabled {
743 pointer-events: none
744 }
745
746 .acf-fc-popup.acf-more-layout-actions li a.acf-toggle-layout.disabled:before {
747 background: #888
748 }
749
750 .acf-fc-popup.acf-more-layout-actions.enable-layout .acf-toggle-layout.disable {
751 display: none
752 }
753
754 .acf-fc-popup.acf-more-layout-actions.enable-layout .acf-toggle-layout.enable {
755 display: block
756 }
757
758 body:not(.block-editor-page) .acf-more-layout-actions li a:focus {
759 box-shadow: 0 0 0 2px #2271b1
760 }
761
762 /*---------------------------------------------------------------------------------------------
763 *
764 * Galery
765 *
766 *---------------------------------------------------------------------------------------------*/
767 .acf-gallery {
768 border: #ccd0d4 solid 1px;
769 height: 400px;
770 position: relative;
771 /* main */
772 /* attachments */
773 /* attachment */
774 /* toolbar */
775 /* sidebar */
776 /* side info */
777 /* side data */
778 /* column widths */
779 /* resizable */
780 }
781 .acf-gallery .acf-gallery-main {
782 position: absolute;
783 top: 0;
784 right: 0;
785 bottom: 0;
786 left: 0;
787 background: #fff;
788 z-index: 2;
789 }
790 .acf-gallery .acf-gallery-attachments {
791 position: absolute;
792 top: 0;
793 right: 0;
794 bottom: 48px;
795 left: 0;
796 padding: 5px;
797 overflow: auto;
798 overflow-x: hidden;
799 }
800 .acf-gallery .acf-gallery-attachment {
801 width: 25%;
802 float: left;
803 cursor: pointer;
804 position: relative;
805 /* hover */
806 /* sortable */
807 /* active */
808 /* icon */
809 /* rtl */
810 }
811 .acf-gallery .acf-gallery-attachment .margin {
812 margin: 5px;
813 border: #d5d9dd solid 1px;
814 position: relative;
815 overflow: hidden;
816 background: #eee;
817 }
818 .acf-gallery .acf-gallery-attachment .margin:before {
819 content: "";
820 display: block;
821 padding-top: 100%;
822 }
823 .acf-gallery .acf-gallery-attachment .thumbnail {
824 position: absolute;
825 top: 0;
826 left: 0;
827 width: 100%;
828 height: 100%;
829 transform: translate(50%, 50%);
830 }
831 html[dir=rtl]=rtl] .acf-gallery .acf-gallery-attachment .thumbnail {
832 transform: translate(-50%, 50%);
833 }
834 .acf-gallery .acf-gallery-attachment .thumbnail img {
835 display: block;
836 height: auto;
837 max-height: 100%;
838 width: auto;
839 transform: translate(-50%, -50%);
840 }
841 html[dir=rtl]=rtl] .acf-gallery .acf-gallery-attachment .thumbnail img {
842 transform: translate(50%, -50%);
843 }
844 .acf-gallery .acf-gallery-attachment .filename {
845 position: absolute;
846 bottom: 0;
847 left: 0;
848 right: 0;
849 padding: 5%;
850 background: #F4F4F4;
851 background: rgba(255, 255, 255, 0.8);
852 border-top: #DFDFDF solid 1px;
853 font-weight: bold;
854 text-align: center;
855 word-wrap: break-word;
856 max-height: 90%;
857 overflow: hidden;
858 }
859 .acf-gallery .acf-gallery-attachment .actions {
860 position: absolute;
861 top: 0;
862 right: 0;
863 display: none;
864 }
865 .acf-gallery .acf-gallery-attachment:hover .actions {
866 display: block;
867 }
868 .acf-gallery .acf-gallery-attachment.ui-sortable-helper .margin {
869 border: none;
870 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
871 }
872 .acf-gallery .acf-gallery-attachment.ui-sortable-placeholder .margin {
873 background: #F1F1F1;
874 border: none;
875 }
876 .acf-gallery .acf-gallery-attachment.ui-sortable-placeholder .margin * {
877 display: none !important;
878 }
879 .acf-gallery .acf-gallery-attachment.active .margin {
880 box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 5px #0073aa;
881 }
882 .acf-gallery .acf-gallery-attachment.-icon .thumbnail img {
883 transform: translate(-50%, -70%);
884 }
885 html[dir=rtl]=rtl] .acf-gallery .acf-gallery-attachment {
886 float: right;
887 }
888 .acf-gallery.sidebar-open {
889 /* hide attachment actions when sidebar is open */
890 /* allow sidebar to move over main for small widths (widget edit box) */
891 }
892 .acf-gallery.sidebar-open .acf-gallery-attachment .actions {
893 display: none;
894 }
895 .acf-gallery.sidebar-open .acf-gallery-side {
896 z-index: 2;
897 }
898 .acf-gallery .acf-gallery-toolbar {
899 position: absolute;
900 right: 0;
901 bottom: 0;
902 left: 0;
903 padding: 10px;
904 border-top: #d5d9dd solid 1px;
905 background: #fff;
906 min-height: 28px;
907 }
908 .acf-gallery .acf-gallery-toolbar .acf-hl li {
909 line-height: 24px;
910 }
911 .acf-gallery .acf-gallery-toolbar .bulk-actions-select {
912 width: auto;
913 margin: 0 1px 0 0;
914 }
915 .acf-gallery .acf-gallery-side {
916 position: absolute;
917 top: 0;
918 right: 0;
919 bottom: 0;
920 width: 0;
921 background: #F9F9F9;
922 border-left: #ccd0d4 solid 1px;
923 z-index: 1;
924 overflow: hidden;
925 }
926 .acf-gallery .acf-gallery-side .acf-gallery-side-inner {
927 position: absolute;
928 top: 0;
929 left: 0;
930 bottom: 0;
931 width: 349px;
932 }
933 .acf-gallery .acf-gallery-side-info {
934 position: relative;
935 width: 100%;
936 padding: 10px;
937 margin: -10px 0 15px -10px;
938 background: #F1F1F1;
939 border-bottom: #DFDFDF solid 1px;
940 }
941 .acf-gallery .acf-gallery-side-info:after {
942 display: block;
943 clear: both;
944 content: "";
945 }
946 html[dir=rtl]=rtl] .acf-gallery .acf-gallery-side-info {
947 margin-left: 0;
948 margin-right: -10px;
949 }
950 .acf-gallery .acf-gallery-side-info img {
951 float: left;
952 width: auto;
953 max-width: 65px;
954 max-height: 65px;
955 margin: 0 10px 1px 0;
956 background: #FFFFFF;
957 padding: 3px;
958 border: #ccd0d4 solid 1px;
959 border-radius: 1px;
960 /* rtl */
961 }
962 html[dir=rtl]=rtl] .acf-gallery .acf-gallery-side-info img {
963 float: right;
964 margin: 0 0 0 10px;
965 }
966 .acf-gallery .acf-gallery-side-info p {
967 font-size: 13px;
968 line-height: 15px;
969 margin: 3px 0;
970 word-break: break-all;
971 color: #666;
972 }
973 .acf-gallery .acf-gallery-side-info p strong {
974 color: #000;
975 }
976 .acf-gallery .acf-gallery-side-info a {
977 text-decoration: none;
978 }
979 .acf-gallery .acf-gallery-side-info a.acf-gallery-edit {
980 color: #21759b;
981 }
982 .acf-gallery .acf-gallery-side-info a.acf-gallery-remove {
983 color: #bc0b0b;
984 }
985 .acf-gallery .acf-gallery-side-info a:hover {
986 text-decoration: underline;
987 }
988 .acf-gallery .acf-gallery-side-data {
989 position: absolute;
990 top: 0;
991 right: 0;
992 bottom: 48px;
993 left: 0;
994 overflow: auto;
995 overflow-x: inherit;
996 padding: 10px;
997 }
998 .acf-gallery .acf-gallery-side-data .acf-label,
999 .acf-gallery .acf-gallery-side-data th.label {
1000 color: #666666;
1001 font-size: 12px;
1002 line-height: 25px;
1003 padding: 0 4px 8px 0 !important;
1004 width: auto !important;
1005 vertical-align: top;
1006 }
1007 html[dir=rtl]=rtl] .acf-gallery .acf-gallery-side-data .acf-label,
1008 html[dir=rtl]=rtl] .acf-gallery .acf-gallery-side-data th.label {
1009 padding: 0 0 8px 4px !important;
1010 }
1011 .acf-gallery .acf-gallery-side-data .acf-label label,
1012 .acf-gallery .acf-gallery-side-data th.label label {
1013 font-weight: normal;
1014 }
1015 .acf-gallery .acf-gallery-side-data .acf-input,
1016 .acf-gallery .acf-gallery-side-data td.field {
1017 padding: 0 0 8px !important;
1018 }
1019 .acf-gallery .acf-gallery-side-data textarea {
1020 min-height: 0;
1021 height: 60px;
1022 }
1023 .acf-gallery .acf-gallery-side-data p.help {
1024 font-size: 12px;
1025 }
1026 .acf-gallery .acf-gallery-side-data p.help:hover {
1027 font-weight: normal;
1028 }
1029 .acf-gallery[data-columns="1"]="1""] .acf-gallery-attachment {
1030 width: 100%;
1031 }
1032 .acf-gallery[data-columns="2"]="2""] .acf-gallery-attachment {
1033 width: 50%;
1034 }
1035 .acf-gallery[data-columns="3"]="3""] .acf-gallery-attachment {
1036 width: 33.333%;
1037 }
1038 .acf-gallery[data-columns="4"]="4""] .acf-gallery-attachment {
1039 width: 25%;
1040 }
1041 .acf-gallery[data-columns="5"]="5""] .acf-gallery-attachment {
1042 width: 20%;
1043 }
1044 .acf-gallery[data-columns="6"]="6""] .acf-gallery-attachment {
1045 width: 16.666%;
1046 }
1047 .acf-gallery[data-columns="7"]="7""] .acf-gallery-attachment {
1048 width: 14.285%;
1049 }
1050 .acf-gallery[data-columns="8"]="8""] .acf-gallery-attachment {
1051 width: 12.5%;
1052 }
1053 .acf-gallery .ui-resizable-handle {
1054 display: block;
1055 position: absolute;
1056 }
1057 .acf-gallery .ui-resizable-s {
1058 bottom: -5px;
1059 cursor: ns-resize;
1060 height: 7px;
1061 left: 0;
1062 width: 100%;
1063 }
1064
1065 /* media modal selected */
1066 .acf-media-modal .attachment.acf-selected {
1067 box-shadow: 0 0 0 3px #fff inset, 0 0 0 7px #0073aa inset !important;
1068 }
1069 .acf-media-modal .attachment.acf-selected .check {
1070 display: none !important;
1071 }
1072 .acf-media-modal .attachment.acf-selected .thumbnail {
1073 opacity: 0.25 !important;
1074 }
1075 .acf-media-modal .attachment.acf-selected .attachment-preview:before {
1076 background: rgba(0, 0, 0, 0.15);
1077 z-index: 1;
1078 position: relative;
1079 }
1080
1081 .acf-admin-single-options-page .select2-dropdown {
1082 border-color: #6BB5D8 !important;
1083 margin-top: -5px;
1084 overflow: hidden;
1085 box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.1);
1086 }
1087 .acf-admin-single-options-page .select2-dropdown.select2-dropdown--above {
1088 margin-top: 0;
1089 }
1090 .acf-admin-single-options-page .select2-container--default .select2-results__option[aria-selected=true]=true] {
1091 background-color: #F9FAFB !important;
1092 color: #667085;
1093 }
1094 .acf-admin-single-options-page .select2-container--default .select2-results__option[aria-selected=true]=true]:hover {
1095 color: #399CCB;
1096 }
1097 .acf-admin-single-options-page .select2-container--default .select2-results__option--highlighted[aria-selected]] {
1098 color: #fff !important;
1099 background-color: #0783BE !important;
1100 }
1101 .acf-admin-single-options-page .select2-dropdown .select2-results__option {
1102 margin-bottom: 0;
1103 }
1104
1105 .acf-create-options-page-popup ~ .select2-container {
1106 z-index: 999999999;
1107 }
1108
1109 /*-----------------------------------------------------------------------------
1110 *
1111 * ACF Blocks
1112 *
1113 *----------------------------------------------------------------------------*/
1114 .acf-block-component .components-placeholder {
1115 margin: 0;
1116 }
1117
1118 .block-editor .acf-field.acf-error {
1119 background-color: rgba(255, 0, 0, 0.05);
1120 }
1121
1122 .acf-block-component .acf-block-fields {
1123 background: #fff;
1124 text-align: left;
1125 font-size: 13px;
1126 line-height: 1.4em;
1127 color: #444;
1128 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1129 }
1130 .acf-block-component .acf-block-fields.acf-empty-block-fields {
1131 border: 1px solid #1e1e1e;
1132 padding: 12px;
1133 }
1134 .components-panel .acf-block-component .acf-block-fields.acf-empty-block-fields {
1135 border: none;
1136 border-top: 1px solid #ddd;
1137 border-bottom: 1px solid #ddd;
1138 }
1139 html[dir=rtl]=rtl] .acf-block-component .acf-block-fields {
1140 text-align: right;
1141 }
1142 .acf-block-component .acf-block-fields p {
1143 font-size: 13px;
1144 line-height: 1.5;
1145 }
1146
1147 .acf-block-body .acf-block-fields:has(> .acf-error-message),
1148 .acf-block-fields:has(> .acf-error-message) .acf-block-fields:has(> .acf-error-message) {
1149 border: none !important;
1150 }
1151 .acf-block-body .acf-error-message,
1152 .acf-block-fields:has(> .acf-error-message) .acf-error-message {
1153 margin-top: 0;
1154 border: none;
1155 }
1156 .acf-block-body .acf-error-message .acf-notice-dismiss,
1157 .acf-block-fields:has(> .acf-error-message) .acf-error-message .acf-notice-dismiss {
1158 display: flex;
1159 align-items: center;
1160 justify-content: center;
1161 overflow: hidden;
1162 outline: unset;
1163 }
1164 .acf-block-body .acf-error-message .acf-icon.-cancel::before,
1165 .acf-block-fields:has(> .acf-error-message) .acf-error-message .acf-icon.-cancel::before {
1166 margin: 0 !important;
1167 }
1168 .acf-block-body.acf-block-has-validation-error,
1169 .acf-block-fields:has(> .acf-error-message).acf-block-has-validation-error {
1170 border: 2px solid #d94f4f;
1171 }
1172 .acf-block-body .acf-error .acf-input .acf-notice,
1173 .acf-block-fields:has(> .acf-error-message) .acf-error .acf-input .acf-notice {
1174 background: none !important;
1175 border: none !important;
1176 display: flex !important;
1177 align-items: center !important;
1178 padding-left: 0;
1179 }
1180 .acf-block-body .acf-error .acf-input .acf-notice p,
1181 .acf-block-fields:has(> .acf-error-message) .acf-error .acf-input .acf-notice p {
1182 margin: 0.5em 0 !important;
1183 }
1184 .acf-block-body .acf-error .acf-input .acf-notice::before,
1185 .acf-block-fields:has(> .acf-error-message) .acf-error .acf-input .acf-notice::before {
1186 content: "";
1187 position: relative;
1188 top: 0;
1189 left: 0;
1190 font-size: 20px;
1191 background-image: url(../../../images/icons/icon-info-red.svg);
1192 background-repeat: no-repeat;
1193 background-position: center;
1194 background-size: 69%;
1195 height: 26px !important;
1196 width: 26px !important;
1197 box-sizing: border-box;
1198 }
1199 .acf-block-body .acf-error .acf-label label,
1200 .acf-block-fields:has(> .acf-error-message) .acf-error .acf-label label {
1201 color: #d94f4f;
1202 }
1203 .acf-block-body .acf-error .acf-input input,
1204 .acf-block-fields:has(> .acf-error-message) .acf-error .acf-input input {
1205 border-color: #d94f4f;
1206 }
1207 .acf-block-body.acf-block-has-validation-error::before,
1208 .acf-block-fields:has(> .acf-error-message).acf-block-has-validation-error::before {
1209 content: "";
1210 position: absolute;
1211 top: -2px;
1212 left: -32px;
1213 font-size: 20px;
1214 background-color: #d94f4f;
1215 background-image: url(../../../images/icons/icon-info-white.svg);
1216 background-repeat: no-repeat;
1217 background-position-x: center;
1218 background-position-y: 52%;
1219 background-size: 55%;
1220 height: 40px;
1221 width: 32px;
1222 box-sizing: border-box;
1223 }
1224 .acf-block-body .acf-block-validation-error,
1225 .acf-block-fields:has(> .acf-error-message) .acf-block-validation-error {
1226 color: #d94f4f;
1227 display: flex;
1228 align-items: center;
1229 }
1230 .acf-block-body .acf-block-fields,
1231 .acf-block-fields:has(> .acf-error-message) .acf-block-fields {
1232 border: #adb2ad solid 1px;
1233 }
1234 .acf-block-body .acf-block-fields .acf-tab-wrap .acf-tab-group,
1235 .acf-block-fields:has(> .acf-error-message) .acf-block-fields .acf-tab-wrap .acf-tab-group {
1236 margin-left: 0;
1237 padding: 16px 20px 0;
1238 }
1239 .acf-block-body .acf-fields > .acf-field,
1240 .acf-block-fields:has(> .acf-error-message) .acf-fields > .acf-field {
1241 padding: 16px 20px;
1242 }
1243 .acf-block-body .acf-fields > .acf-field.acf-accordion,
1244 .acf-block-fields:has(> .acf-error-message) .acf-fields > .acf-field.acf-accordion {
1245 border-color: #adb2ad;
1246 }
1247 .acf-block-body .acf-fields > .acf-field.acf-accordion .acf-accordion-title,
1248 .acf-block-fields:has(> .acf-error-message) .acf-fields > .acf-field.acf-accordion .acf-accordion-title {
1249 padding: 16px 20px;
1250 }
1251 .acf-block-body .acf-button,
1252 .acf-block-body .acf-link a.button,
1253 .acf-block-body .acf-add-checkbox,
1254 .acf-block-fields:has(> .acf-error-message) .acf-button,
1255 .acf-block-fields:has(> .acf-error-message) .acf-link a.button,
1256 .acf-block-fields:has(> .acf-error-message) .acf-add-checkbox {
1257 color: #2271b1 !important;
1258 border-color: #2271b1 !important;
1259 background: #f6f7f7 !important;
1260 vertical-align: top;
1261 }
1262 .acf-block-body .acf-button.button-primary:hover,
1263 .acf-block-body .acf-link a.button.button-primary:hover,
1264 .acf-block-body .acf-add-checkbox.button-primary:hover,
1265 .acf-block-fields:has(> .acf-error-message) .acf-button.button-primary:hover,
1266 .acf-block-fields:has(> .acf-error-message) .acf-link a.button.button-primary:hover,
1267 .acf-block-fields:has(> .acf-error-message) .acf-add-checkbox.button-primary:hover {
1268 color: white !important;
1269 background: #2271b1 !important;
1270 }
1271 .acf-block-body .acf-button:focus,
1272 .acf-block-body .acf-link a.button:focus,
1273 .acf-block-body .acf-add-checkbox:focus,
1274 .acf-block-fields:has(> .acf-error-message) .acf-button:focus,
1275 .acf-block-fields:has(> .acf-error-message) .acf-link a.button:focus,
1276 .acf-block-fields:has(> .acf-error-message) .acf-add-checkbox:focus {
1277 outline: none !important;
1278 background: #f6f7f7 !important;
1279 }
1280 .acf-block-body .acf-button:hover,
1281 .acf-block-body .acf-link a.button:hover,
1282 .acf-block-body .acf-add-checkbox:hover,
1283 .acf-block-fields:has(> .acf-error-message) .acf-button:hover,
1284 .acf-block-fields:has(> .acf-error-message) .acf-link a.button:hover,
1285 .acf-block-fields:has(> .acf-error-message) .acf-add-checkbox:hover {
1286 color: #0a4b78 !important;
1287 }
1288 .acf-block-body .acf-block-preview,
1289 .acf-block-fields:has(> .acf-error-message) .acf-block-preview {
1290 min-height: 10px;
1291 }
1292
1293 .acf-block-panel .acf-block-fields {
1294 border-top: #ddd solid 1px;
1295 border-bottom: #ddd solid 1px;
1296 min-height: 1px;
1297 }
1298 .acf-block-panel .acf-block-fields:empty {
1299 border-top: none;
1300 }
1301 .acf-block-panel .acf-block-fields .acf-tab-wrap {
1302 background: transparent;
1303 }
1304
1305 .components-panel__body .acf-block-panel {
1306 margin: 16px -16px -16px;
1307 }