PluginProbe
Customify / 1.9.0
Customify v1.9.0
2.10.9 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.7.1 1.3.0 1.3.1 1.4.0 1.4.1 1.4.2 1.5.0 1.5.1 1.5.2 1.5.3 1.5.4 1.5.5 1.5.6 1.5.7 1.6.0 1.6.0.1 1.6.5 1.7.0 1.7.1 All 77 releases
customify / css / customizer.css

customizer.css in Customify 1.9.0, at css/customizer.css

3,216 lines 83.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 .wp-full-overlay-sidebar *, .wp-full-overlay-sidebar *:before, .wp-full-overlay-sidebar *:after {
3 box-sizing: border-box;
4 }
5
6 .iris-picker,
7 .iris-picker * {
8 box-sizing: content-box;
9 }
10
11 .wp-full-overlay-sidebar-content .accordion-section-content {
12 overflow: visible;
13 }
14
15 .control-section:not(.control-section-themes) .customize-control {
16 padding: 0;
17 width: 100%;
18 min-height: initial;
19 }
20
21 #customize-header-actions #customize-save-button-wrapper {
22 margin-top: 7px;
23 }
24
25 .wp-full-overlay-footer .devices button {
26 float: left;
27 border-radius: 0;
28 }
29
30 .customize-controls-close {
31 width: 48px;
32 height: 44px;
33 color: #7da9c3;
34 background: #ffffff;
35 border-top: none;
36 border-right-color: #e0e8ef;
37 }
38
39 .customize-controls-close:focus, .customize-controls-close:hover {
40 background: #f5fcff;
41 }
42
43 .customize-controls-close:before {
44 top: 0px;
45 }
46
47 #customize-controls .customize-info {
48 border-bottom-color: #e0e8ef;
49 }
50
51 .customize-panel-back, .customize-section-back {
52 height: 74px;
53 color: #7da9c3;
54 border-right-color: #e0e8ef;
55 }
56
57 .customize-panel-back:hover, .customize-panel-back:focus, .customize-section-back:hover, .customize-section-back:focus {
58 border-left-color: #f5fcff;
59 background: #f5fcff;
60 }
61
62 #customize-theme-controls .theme * {
63 box-sizing: content-box;
64 }
65
66 #customize-theme-controls .accordion-section-content {
67 padding: 17px;
68 }
69
70 #customize-theme-controls .customize-section-title {
71 margin-top: -17px;
72 margin-right: -17px;
73 }
74
75 #customize-theme-controls .control-panel-content .control-section:nth-child(2),
76 #customize-theme-controls .control-panel-content .control-section:nth-child(3) {
77 border-top: none;
78 }
79
80 #customize-theme-controls #accordion-section-add_menu {
81 border-bottom: none;
82 }
83
84 #customize-theme-controls #accordion-section-add_menu .add-menu-toggle {
85 float: none;
86 }
87
88 #customize-theme-controls .customize-pane-child.open {
89 height: 100%;
90 }
91
92 #customize-controls .description {
93 font-size: 12px;
94 font-weight: 300;
95 font-style: normal;
96 line-height: 1.6;
97 color: #4d7b90;
98 text-indent: 0;
99 }
100
101 .customize-control-description {
102 margin-top: 6px;
103 }
104
105 .customize-control {
106 margin-bottom: 24px;
107 }
108
109 #accordion-section-themes + .control-section {
110 border-top: none;
111 }
112
113 #customize-controls .panel-meta.customize-info .accordion-section-title {
114 border-top: none;
115 height: 74px;
116 }
117
118 .button-controls:after {
119 content: " ";
120 display: table;
121 clear: both;
122 }
123
124 .wp-core-ui .button:not(.theme-details):not(.collapse-sidebar):not(.wp-color-result),
125 .wp-core-ui .button-primary,
126 .wp-core-ui .button-secondary {
127 width: auto;
128 padding-left: 15px;
129 padding-right: 15px;
130 font-weight: 400;
131 color: #F5FCFF;
132 text-shadow: none;
133 border: none;
134 background: #AED2E5;
135 box-shadow: 0px 2px 0px 0px #8DBED7;
136 border-radius: 4px;
137 }
138
139 .wp-core-ui .button:not(.theme-details):not(.collapse-sidebar):not(.wp-color-result):hover,
140 .wp-core-ui .button-primary:hover,
141 .wp-core-ui .button-secondary:hover {
142 color: white;
143 text-shadow: none;
144 background: #98C6DD;
145 box-shadow: 0px 2px 0px 0px #74A7C2;
146 }
147
148 .wp-core-ui #customize-header-actions .button-primary {
149 background: #73C5EE;
150 box-shadow: 0px 2px 0px 0px #57ABD5;
151 }
152
153 .wp-core-ui #customize-header-actions .button-primary:hover {
154 background: #58B0DD;
155 box-shadow: 0px 2px 0px 0px #3F8AAF;
156 }
157
158 .wp-core-ui #customize-header-actions .button-primary.has-next-sibling {
159 border-right: 1px solid #57ABD5;
160 }
161
162 .wp-core-ui #customize-header-actions .button-primary:disabled {
163 color: white !important;
164 background: #AED2E5 !important;
165 opacity: 0.7;
166 box-shadow: 0px 2px 0px 0px #8db5ca !important;
167 }
168
169 .wp-core-ui #customize-header-actions .button-primary:disabled.has-next-sibling {
170 border-right: none;
171 }
172
173 .wp-core-ui .reset_section,
174 .wp-core-ui .reset_panel {
175 width: 100%;
176 height: 4em;
177 display: block;
178 margin: 0px 0 25px;
179 }
180
181 .wp-core-ui .reset_panel {
182 margin-top: 10px;
183 }
184
185 .separator.label {
186 display: block;
187 font-size: 14px;
188 line-height: 24px;
189 font-weight: 600;
190 }
191
192 .customize-control-title, .separator.label {
193 color: #416B7E;
194 }
195
196 .separator.section:before, .separator.sub-section:before {
197 content: "";
198 position: absolute;
199 top: 0;
200 bottom: 0;
201 left: -18px;
202 right: -18px;
203 z-index: -1;
204 }
205
206 .separator.label {
207 font-weight: 500;
208 }
209
210 .separator.large {
211 margin-top: 12px;
212 font-size: 16px;
213 color: #39474D;
214 }
215
216 .separator.section {
217 position: relative;
218 padding: 14px 0;
219 margin-bottom: 0;
220 background: none;
221 border: none;
222 }
223
224 .separator.section[id*="layout"] {
225 margin-top: 0;
226 }
227
228 .separator.section[id*="layout"]:before {
229 border: none;
230 }
231
232 .separator.section:before {
233 border: 1px solid #e0e8ef;
234 background-color: #ffffff;
235 box-shadow: 0px 1px 0px 0px #DFE8EF;
236 }
237
238 .separator.sub-section {
239 position: relative;
240 padding: 12px 0;
241 }
242
243 .separator.sub-section:before {
244 border-top: 1px solid #e0e8ef;
245 border-bottom: 1px solid #e0e8ef;
246 background-color: #f6fbff;
247 }
248
249 .separator.sub-section + span {
250 margin-top: 20px;
251 font-style: normal;
252 }
253
254 .section-navigation-wrapper {
255 position: relative;
256 height: 43px;
257 margin: -15px -12px 0 -12px;
258 margin-right: -17px;
259 margin-left: -17px;
260 }
261
262 .section-navigation {
263 display: -ms-flexbox;
264 display: flex;
265 margin-top: -1px;
266 clear: both;
267 border-top: 1px solid #e0e8ef;
268 }
269
270 .section-navigation a {
271 -ms-flex: 1 1 auto;
272 flex: 1 1 auto;
273 display: block;
274 padding: 12px 0;
275 color: #3b484e;
276 background-color: #ffffff;
277 border-bottom: 1px solid #e0e8ef;
278 border-right: 1px solid #e0e8ef;
279 text-align: center;
280 text-decoration: none;
281 transition: background-color .15s ease-in-out;
282 }
283
284 .section-navigation a:last-child {
285 border-right: 0;
286 }
287
288 #customize-controls .customize-info.is-sticky.is-sticky,
289 #customize-controls .customize-section-title.is-sticky.is-sticky {
290 top: 40px;
291 }
292
293 #customize-controls .customize-info.is-in-view.is-in-view,
294 #customize-controls .customize-section-title.is-in-view.is-in-view {
295 box-shadow: none;
296 }
297
298 #customize-controls .has-nav .customize-info,
299 #customize-controls .has-nav .customize-section-title {
300 margin-right: -12px;
301 }
302
303 #customize-controls .customize-section-title.customize-section-title {
304 border-bottom: 0;
305 }
306
307 .customize-section-description-container.section-meta.has-nav {
308 margin-bottom: 0;
309 }
310
311 .font-options__wrapper {
312 position: relative;
313 }
314
315 .font-options__wrapper:after {
316 content: "";
317 position: absolute;
318 top: 90%;
319 left: 0;
320 right: 0;
321 z-index: 0;
322 display: block;
323 height: 30px;
324 }
325
326 .font-options__head {
327 display: -ms-flexbox;
328 display: flex;
329 -ms-flex-pack: justify;
330 justify-content: space-between;
331 }
332
333 .font-options__head.font-options__head {
334 -webkit-appearance: none;
335 text-overflow: ellipsis;
336 white-space: nowrap;
337 }
338
339 .font-options__font-title {
340 margin-right: 26px;
341 margin-left: 10px;
342 font-size: 12px;
343 line-height: 20px;
344 font-weight: 300;
345 color: #98c6dd;
346 text-overflow: ellipsis;
347 overflow: hidden;
348 white-space: nowrap;
349 }
350
351 .font-options__options-list {
352 position: absolute;
353 top: calc(100% + 6px);
354 left: -6px;
355 right: -6px;
356 z-index: 2;
357 display: block;
358 padding: 10px;
359 border: 1px solid #dfe8ef;
360 border-radius: 5px;
361 background-color: #ffffff;
362 opacity: 0;
363 display: none;
364 transition: opacity .15s linear;
365 }
366
367 .font-options__options-list:last-child {
368 margin-bottom: 0;
369 }
370
371 .font-options__options-list:before, .font-options__options-list:after {
372 content: "";
373 position: absolute;
374 top: -20px;
375 right: 25px;
376 height: 0;
377 width: 0;
378 border: solid transparent;
379 z-index: 10;
380 }
381
382 .font-options__options-list:before {
383 border-bottom-color: white;
384 border-width: 10px;
385 z-index: 11;
386 }
387
388 .font-options__options-list:after {
389 border-bottom-color: rgba(0, 0, 0, 0.075);
390 border-width: 12px;
391 top: -24px;
392 right: 23px;
393 }
394
395 .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap:after {
396 content: "";
397 position: absolute;
398 bottom: 100%;
399 right: 12px;
400 border-collapse: separate;
401 width: 0;
402 height: 0;
403 border-width: 0 9px 9px 9px;
404 border-style: solid;
405 border-color: transparent transparent #fff transparent;
406 }
407
408 .font-options__head, .wp-full-overlay-sidebar-content .customize-control input[type=text]:not(#_customize-input-wpcom_custom_css_content_width_control):not(.wp-color-picker),
409 .wp-full-overlay-sidebar-content .customize-control input[type=checkbox],
410 .wp-full-overlay-sidebar-content .customize-control input[type=password],
411 .wp-full-overlay-sidebar-content .customize-control input[type=color],
412 .wp-full-overlay-sidebar-content .customize-control input[type=date],
413 .wp-full-overlay-sidebar-content .customize-control input[type=datetime],
414 .wp-full-overlay-sidebar-content .customize-control input[type=datetime-local],
415 .wp-full-overlay-sidebar-content .customize-control input[type=email],
416 .wp-full-overlay-sidebar-content .customize-control input[type=month],
417 .wp-full-overlay-sidebar-content .customize-control input[type=number],
418 .wp-full-overlay-sidebar-content .customize-control input[type=radio],
419 .wp-full-overlay-sidebar-content .customize-control input[type=tel],
420 .wp-full-overlay-sidebar-content .customize-control input[type=time],
421 .wp-full-overlay-sidebar-content .customize-control input[type=url],
422 .wp-full-overlay-sidebar-content .customize-control input[type=week],
423 .wp-full-overlay-sidebar-content .customize-control input[type=search],
424 .wp-full-overlay-sidebar-content .customize-control select,
425 .wp-full-overlay-sidebar-content .customize-control textarea,
426 .wp-full-overlay-sidebar-content .customize-control input[type="number"].range-value, ul.font-options__options-list .select2-container .select2-selection--single, #customize-theme-controls .select2-container .select2-selection--multiple {
427 width: 100%;
428 height: 44px;
429 padding: 10px 14px;
430 background: #FFFFFF;
431 border: 2px solid #B8DAEB;
432 border-radius: 4px;
433 font-size: 14px;
434 line-height: 1.5;
435 color: #416B7E;
436 outline: 0;
437 }
438
439 .font-options__head:focus, .wp-full-overlay-sidebar-content .customize-control input[type=text]:focus:not(#_customize-input-wpcom_custom_css_content_width_control):not(.wp-color-picker),
440 .wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:focus,
441 .wp-full-overlay-sidebar-content .customize-control input[type=password]:focus,
442 .wp-full-overlay-sidebar-content .customize-control input[type=color]:focus,
443 .wp-full-overlay-sidebar-content .customize-control input[type=date]:focus,
444 .wp-full-overlay-sidebar-content .customize-control input[type=datetime]:focus,
445 .wp-full-overlay-sidebar-content .customize-control input[type=datetime-local]:focus,
446 .wp-full-overlay-sidebar-content .customize-control input[type=email]:focus,
447 .wp-full-overlay-sidebar-content .customize-control input[type=month]:focus,
448 .wp-full-overlay-sidebar-content .customize-control input[type=number]:focus,
449 .wp-full-overlay-sidebar-content .customize-control input[type=radio]:focus,
450 .wp-full-overlay-sidebar-content .customize-control input[type=tel]:focus,
451 .wp-full-overlay-sidebar-content .customize-control input[type=time]:focus,
452 .wp-full-overlay-sidebar-content .customize-control input[type=url]:focus,
453 .wp-full-overlay-sidebar-content .customize-control input[type=week]:focus,
454 .wp-full-overlay-sidebar-content .customize-control input[type=search]:focus,
455 .wp-full-overlay-sidebar-content .customize-control select:focus,
456 .wp-full-overlay-sidebar-content .customize-control textarea:focus,
457 .wp-full-overlay-sidebar-content .customize-control input[type="number"].range-value:focus, ul.font-options__options-list .select2-container .select2-selection--single:focus, #customize-theme-controls .select2-container .select2-selection--multiple:focus {
458 border-color: #73C5EE;
459 box-shadow: none;
460 }
461
462 .font-options__head, .wp-full-overlay-sidebar-content .customize-control select, ul.font-options__options-list .select2-container .select2-selection--single, #customize-theme-controls .select2-container .select2-selection--multiple {
463 width: 100%;
464 -webkit-appearance: button;
465 -moz-appearance: none;
466 font-weight: 600;
467 background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE1cHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTUgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjU2LjAwMDAwMCwgLTM4Ni4wMDAwMDApIiBmaWxsPSIjOThDNkRFIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iVGl0bGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjAwMDAwMCwgMjE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1TZWxlY3QtQ29weSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iU2VsZWN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMjcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI1NC40ODEyLDE4IEwyNTYsMTkuNTE0IEwyNDguNSwyNyBMMjQxLDE5LjUxNCBMMjQyLjUxODgsMTggTDI0OC41LDIzLjk2NzIgTDI1NC40ODEyLDE4IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
468 background-position: right 16px top 16px;
469 }
470
471 [multiple].font-options__head, .wp-full-overlay-sidebar-content .customize-control select[multiple], ul.font-options__options-list .select2-container [multiple].select2-selection--single, #customize-theme-controls .select2-container [multiple].select2-selection--multiple {
472 background: white;
473 }
474
475 .wp-full-overlay-sidebar-content .customize-control input[type=text],
476 .wp-full-overlay-sidebar-content .customize-control textarea {
477 font-size: 13px;
478 }
479
480 .wp-full-overlay-sidebar-content .customize-control textarea {
481 height: auto;
482 }
483
484 .wp-full-overlay-sidebar-content .customize-control input[type=checkbox],
485 .wp-full-overlay-sidebar-content .customize-control input[type=radio] {
486 width: 22px;
487 height: 22px;
488 }
489
490 .wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:checked,
491 .wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked {
492 background: #73C5EE;
493 border-color: #5AB9E8;
494 }
495
496 .wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:checked:before,
497 .wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked:before {
498 color: white;
499 margin: -1px 0 0 -2px;
500 }
501
502 .wp-full-overlay-sidebar-content .customize-control .awesome_preset input[type=radio]:checked {
503 background: transparent;
504 }
505
506 .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control) label:not(:only-of-type),
507 .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control) > .customize-inside-control-row:not(:only-of-type), .wp-full-overlay-sidebar-content .customize-control.customize-control-radio label:not(:only-of-type),
508 .wp-full-overlay-sidebar-content .customize-control.customize-control-radio > .customize-inside-control-row:not(:only-of-type) {
509 margin-left: 30px;
510 padding-top: 0;
511 padding-bottom: 0;
512 display: inline-block;
513 width: calc(49% - 30px);
514 text-indent: -6px;
515 }
516
517 .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control) label, .wp-full-overlay-sidebar-content .customize-control.customize-control-radio label {
518 color: #416B7E;
519 }
520
521 [id*="divider"] + .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control), [id*="divider"] + .wp-full-overlay-sidebar-content .customize-control.customize-control-radio {
522 margin-top: 0;
523 }
524
525 .wp-full-overlay-sidebar-content .customize-control input[type=radio] {
526 border-radius: 50%;
527 }
528
529 .wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked:before {
530 content: none;
531 }
532
533 .customize-control-html + .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox {
534 margin-top: -24px;
535 }
536
537 .wp-full-overlay-sidebar-content .customize-control.customize-control-radio label,
538 .wp-full-overlay-sidebar-content .customize-control.customize-control-radio .customize-inside-control-row {
539 margin-top: 12px;
540 }
541
542 .wp-full-overlay-sidebar-content .customize-control.customize-control-radio#customize-control-changeset_status .customize-inside-control-row {
543 margin-top: 0;
544 text-indent: 0;
545 }
546
547 .wp-full-overlay-sidebar-content .customize-control input[type="range"] {
548 width: 65%;
549 }
550
551 .wp-full-overlay-sidebar-content .customize-control input[type="range"] {
552 position: relative;
553 -webkit-appearance: none;
554 width: calc(100% - 55px);
555 height: 22px;
556 overflow: hidden;
557 outline: none;
558 background: none;
559 }
560
561 .wp-full-overlay-sidebar-content .customize-control input[type="range"]:before {
562 content: " ";
563 position: absolute;
564 top: 8px;
565 left: 0;
566 height: 6px;
567 width: 100%;
568 background: #DFE8EF;
569 box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
570 border-radius: 10px;
571 }
572
573 .wp-full-overlay-sidebar-content .customize-control input[type="range"]::-webkit-slider-thumb {
574 -webkit-appearance: none;
575 width: 22px;
576 height: 22px;
577 background: #27ae60;
578 position: relative;
579 z-index: 3;
580 background: #FFFFFF;
581 border: 2px solid #B8DAEB;
582 border-radius: 4px;
583 }
584
585 .wp-full-overlay-sidebar-content .customize-control input[type="range"]::-webkit-slider-thumb:before {
586 content: "..";
587 position: absolute;
588 left: 5px;
589 top: -5px;
590 color: #B8DAEB;
591 font-size: 1em;
592 letter-spacing: 1px;
593 }
594
595 .wp-full-overlay-sidebar-content .customize-control input[type="range"]::-webkit-slider-thumb:after {
596 content: " ";
597 width: calc(100% - 55px);
598 height: 6px;
599 position: absolute;
600 z-index: 1;
601 right: 20px;
602 top: 6px;
603 background: #73C5EE;
604 }
605
606 .wp-full-overlay-sidebar-content .customize-control input[type="number"].range-value {
607 min-width: 40px;
608 max-width: 80px;
609 width: auto;
610 height: 30px;
611 top: -5px;
612 float: right;
613 padding: 4px 0px 5px 0px;
614 margin-left: 10px;
615 font-size: 13px;
616 line-height: 1;
617 text-align: center;
618 }
619
620 .wp-full-overlay-sidebar-content .customize-control input[type=number]::-webkit-inner-spin-button,
621 .wp-full-overlay-sidebar-content .customize-control input[type=number]::-webkit-outer-spin-button {
622 -webkit-appearance: none;
623 margin: 0;
624 }
625
626 .customize-control-color {
627 display: block;
628 }
629
630 .customize-control-color .customize-control-title, .customize-control-color .separator.label {
631 float: left;
632 }
633
634 .customize-control-color .wp-picker-container {
635 position: relative;
636 float: right;
637 top: -3px;
638 }
639
640 .customize-control-color .wp-picker-container .wp-picker-holder {
641 position: relative;
642 }
643
644 .customize-control-color .wp-picker-container .wp-color-result,
645 .customize-control-color .wp-picker-container .wp-color-result.button {
646 top: 0;
647 height: 30px;
648 width: 40px;
649 margin: 0;
650 padding: 0;
651 border-radius: 4px;
652 background: #2ECC71;
653 border: 2px solid #B8DAEB;
654 box-shadow: none;
655 }
656
657 .customize-control-color .wp-picker-container .wp-color-result:after,
658 .customize-control-color .wp-picker-container .wp-color-result .wp-color-result-text,
659 .customize-control-color .wp-picker-container .wp-color-result.button:after,
660 .customize-control-color .wp-picker-container .wp-color-result.button .wp-color-result-text {
661 display: none;
662 }
663
664 .customize-control-color .wp-picker-container .iris-picker {
665 position: absolute;
666 top: 40px;
667 right: 0;
668 z-index: 1000;
669 width: 275px !important;
670 border-top: none;
671 border-color: #DFDFDE;
672 border-radius: 0 0 3px 3px;
673 border: none;
674 background: white;
675 }
676
677 .customize-control-color .wp-picker-container .iris-picker, .customize-control-color .wp-picker-container .iris-picker * {
678 box-sizing: content-box;
679 }
680
681 .customize-control-color .wp-picker-container .iris-picker .iris-square {
682 width: 215px !important;
683 height: 173px !important;
684 margin-right: 0;
685 }
686
687 .customize-control-color .wp-picker-container .iris-picker .iris-strip {
688 float: right;
689 box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px inset;
690 }
691
692 .customize-control-color .wp-picker-container .iris-picker .iris-strip .ui-slider-handle {
693 border-color: #aaa !important;
694 opacity: 1;
695 box-shadow: none;
696 }
697
698 .customize-control-color .wp-picker-container .iris-picker .iris-palette {
699 width: 24px !important;
700 height: 24px !important;
701 border-radius: 50px;
702 box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px inset;
703 }
704
705 .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap {
706 position: absolute;
707 z-index: 1000;
708 top: 35px;
709 right: 0;
710 width: 275px;
711 padding: 9px 12px;
712 background: white;
713 border: none;
714 border-radius: 3px 3px 0 0;
715 }
716
717 .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap input.wp-color-picker {
718 float: left;
719 width: 100px;
720 font-size: 13px;
721 text-align: left;
722 margin: 0;
723 padding: 6px 12px;
724 height: auto;
725 }
726
727 .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap input.button {
728 float: right;
729 padding: 4px 12px;
730 height: 30px;
731 }
732
733 .customize-control-font:last-child {
734 margin-bottom: 150px;
735 }
736
737 #accordion-section-live_css_edit_section .customize-section-title {
738 margin-top: -13px;
739 border-bottom: 1px solid #ddd;
740 }
741
742 #accordion-section-live_css_edit_section #css_editor {
743 top: 70px;
744 border-top: 10px solid white;
745 overflow: visible;
746 }
747
748 #accordion-section-live_css_edit_section #css_editor:before {
749 content: "";
750 width: 48px;
751 height: 10px;
752 display: block;
753 background: #e8e8e8;
754 top: -10px;
755 position: absolute;
756 z-index: 10000000;
757 left: 0;
758 }
759
760 #accordion-section-live_css_edit_section .ace_scroller {
761 padding-left: 10px;
762 }
763
764 .wp-full-overlay.editor_opened {
765 margin-left: 500px;
766 }
767
768 .wp-full-overlay.editor_opened #customize-controls {
769 width: 500px;
770 }
771
772 .wp-full-overlay.editor_opened.collapsed #customize-controls {
773 width: 300px;
774 }
775
776 .customize-control-media .current,
777 .customize-control-site_icon .current,
778 li#customize-control-site_logo .current {
779 margin-bottom: 10px;
780 min-height: 44px;
781 background: #F5FCFF;
782 border: 2px solid #B8DAEB;
783 border-radius: 4px;
784 }
785
786 .customize-control-media .current .container, .customize-control-media .current span,
787 .customize-control-site_icon .current .container,
788 .customize-control-site_icon .current span,
789 li#customize-control-site_logo .current .container,
790 li#customize-control-site_logo .current span {
791 border: none;
792 }
793
794 .customize-control-media .inner, .customize-control-media .current span,
795 .customize-control-site_icon .inner,
796 .customize-control-site_icon .current span,
797 li#customize-control-site_logo .inner,
798 li#customize-control-site_logo .current span {
799 font-size: 13px;
800 color: #98C6DD;
801 }
802
803 .customize-control-media .inner,
804 .customize-control-site_icon .inner,
805 li#customize-control-site_logo .inner {
806 line-height: 1.4;
807 }
808
809 .customize-control-media .thumbnail-image,
810 .customize-control-site_icon .thumbnail-image,
811 li#customize-control-site_logo .thumbnail-image {
812 padding: 14px;
813 text-align: center;
814 }
815
816 .customize-control-media .thumbnail-image img,
817 .customize-control-site_icon .thumbnail-image img,
818 li#customize-control-site_logo .thumbnail-image img {
819 width: auto;
820 }
821
822 .customize-control-media .actions,
823 .customize-control-site_icon .actions,
824 li#customize-control-site_logo .actions {
825 margin-bottom: 0;
826 }
827
828 .customize-control-typography select, .customize-control-typography select {
829 margin-bottom: 10px;
830 }
831
832 .customize-control-typography .description, .customize-control-typography .description {
833 margin-top: -3px;
834 }
835
836 .customize-control-typography ul li, .customize-control-typography ul li {
837 width: 100%;
838 margin: 0;
839 }
840
841 .default-preset-button {
842 background-color: #F5F6F6;
843 float: right;
844 padding: 1px 8px;
845 border-radius: 3px;
846 border: 1px solid #CBCBCB;
847 margin-right: 4px;
848 font-family: "Open Sans",sans-serif;
849 font-size: 13px;
850 }
851
852 .customize-control-preset .description {
853 margin-right: 5px;
854 font-style: normal;
855 }
856
857 .customify_preset.radio_buttons .customify_radio_button {
858 border: none;
859 display: inline-block;
860 padding: 2px;
861 margin: 3px;
862 position: relative;
863 overflow: hidden;
864 height: auto;
865 }
866
867 .customify_preset.radio_buttons .customify_radio_button input[type="radio"] {
868 opacity: 0;
869 width: 100%;
870 height: 100%;
871 position: absolute;
872 z-index: 9999;
873 }
874
875 .customify_preset.radio_buttons .customify_radio_button input[type="radio"]:checked + label {
876 background-color: #ebebeb;
877 }
878
879 .customify_preset.radio_buttons .customify_radio_button input[type="radio"]:checked + label:before {
880 content: '>';
881 color: inherit;
882 }
883
884 .customify_preset.radio_buttons .customify_radio_button input[type="radio"]:checked + label:after {
885 content: '<';
886 color: inherit;
887 }
888
889 .customify_preset.radio_buttons .customify_radio_button input[type="radio"]:checked:before {
890 opacity: 0;
891 }
892
893 .customify_preset.radio_buttons .customify_radio_button label {
894 position: relative;
895 z-index: 999;
896 border-left: 4px solid;
897 }
898
899 .customify_preset .awesome_preset {
900 width: 45%;
901 position: relative;
902 display: inline-block;
903 text-align: center;
904 color: white;
905 margin-top: 5px;
906 margin-bottom: 25px;
907 transition: all 0.2s;
908 }
909
910 .customify_preset .awesome_preset:hover {
911 opacity: 0.9;
912 }
913
914 .customify_preset .awesome_preset:before {
915 content: '';
916 position: absolute;
917 top: 1px;
918 left: 1px;
919 right: 1px;
920 bottom: 1px;
921 border: 1px solid #FFF;
922 background: transparent;
923 opacity: .5;
924 border-radius: 4px;
925 z-index: 5;
926 }
927
928 .customify_preset .awesome_preset .preset-wrap .preset-color {
929 height: 128px;
930 border-radius: 4px 4px 0 0;
931 padding: 17px 0 27px;
932 }
933
934 .customify_preset .awesome_preset .preset-wrap .preset-color .first-font {
935 display: inline-block;
936 width: 100%;
937 font-size: 55px;
938 line-height: 1;
939 }
940
941 .customify_preset .awesome_preset .preset-wrap .preset-color .secondary-font {
942 display: inline-block;
943 width: 100%;
944 font-size: 20px;
945 line-height: 1;
946 margin-top: 8px;
947 }
948
949 .customify_preset .awesome_preset .preset-wrap .preset-name {
950 position: relative;
951 font-size: 11px;
952 text-transform: UPPERCASE;
953 border-radius: 0 0 4px 4px;
954 padding: 1px;
955 }
956
957 .customify_preset .awesome_preset .preset-wrap .preset-name:before {
958 content: '';
959 position: absolute;
960 border-color: inherit;
961 border: 10px solid;
962 border-left-color: transparent;
963 border-right-color: transparent;
964 border-top: transparent;
965 top: -10px;
966 border-bottom-color: inherit;
967 left: 40%;
968 }
969
970 .customify_preset .awesome_preset:nth-child(odd) {
971 margin-right: 7%;
972 }
973
974 .customify_preset .awesome_preset input[type=radio] {
975 height: 100%;
976 width: 100%;
977 position: absolute;
978 border: 0;
979 box-shadow: none;
980 color: #006505;
981 background-color: transparent;
982 border-radius: 0;
983 margin: 0;
984 display: inline-block;
985 top: 0;
986 left: 0;
987 z-index: 10;
988 }
989
990 .customify_preset .awesome_preset input[type=radio]:checked:before {
991 position: absolute;
992 height: 25px;
993 width: 25px;
994 top: -13px;
995 right: -14px;
996 background: #FFF;
997 z-index: 1;
998 }
999
1000 .customify_preset .awesome_preset input[type=radio]:checked:after {
1001 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
1002 filter: alpha(opacity=0);
1003 content: '';
1004 position: absolute;
1005 width: 26px;
1006 height: 26px;
1007 border-radius: 50%;
1008 top: -5px;
1009 right: -5px;
1010 z-index: 10;
1011 background: #73C5EE url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzcHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTMgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgLTQwOC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1DaGVja2JveC1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNy4wMDAwMDAsIDI0OS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IkNoZWNrYm94IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMzAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuMDM4NDk1LDE2IEwxNy4xMTYxMzc1LDguOTIxNDg3NiBMMTUuMTk0NjQ5OCw3IEwxMC4wMzg0OTUsMTIuMTU1MDY3NCBMNi45MjE0ODc2LDkuMDM4OTI5OTcgTDUsMTAuOTYwNDE3NiBMMTAuMDM4NDk1LDE2IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
1012 background-position: center center;
1013 }
1014
1015 .customify_radio_image {
1016 display: inline-block;
1017 }
1018
1019 .customify_radio_image label {
1020 display: block;
1021 float: left;
1022 margin-right: 10px;
1023 position: relative;
1024 }
1025
1026 .customify_radio_image label input[type=radio] {
1027 position: absolute;
1028 top: 0;
1029 bottom: 0;
1030 left: 0;
1031 right: 0;
1032 width: 100%;
1033 height: 100%;
1034 visibility: hidden;
1035 }
1036
1037 .customify_radio_image label input[type=radio] img {
1038 cursor: pointer;
1039 border: 2px solid transparent;
1040 }
1041
1042 .customify_radio_image label input[type=radio]:checked + img {
1043 border: 3px solid #73C5EE;
1044 }
1045
1046 .customify_ace_editor {
1047 display: block;
1048 min-height: 200px;
1049 border: 1px solid #ddd;
1050 }
1051
1052 .customize-control-custom_background .hide {
1053 display: none;
1054 }
1055
1056 .customize-control-custom_background .upload_button_div {
1057 margin: 10px 0;
1058 }
1059
1060 .customize-control-custom_background .upload_button_div > * {
1061 margin-right: 10px;
1062 }
1063
1064 .customize-control-custom_background .preview_screenshot {
1065 text-align: center;
1066 margin: 10px 0;
1067 }
1068
1069 .customize-control-custom_background .preview_screenshot img {
1070 border: 2px solid #ccc;
1071 }
1072
1073 #customify_import_demo_data_button {
1074 width: 70%;
1075 text-align: center;
1076 padding: 10px;
1077 display: inline-block;
1078 height: auto;
1079 margin: 0 15% 10% 15%;
1080 }
1081
1082 .import_step_note {
1083 margin: 5px;
1084 width: 100%;
1085 display: inline-block;
1086 }
1087
1088 .import_step_note:before {
1089 content: "\1F449";
1090 }
1091
1092 .import_step_note.success:before {
1093 content: "\1F44D";
1094 }
1095
1096 .import_step_note.failed:before {
1097 content: "\274C";
1098 }
1099
1100 #customize-header-actions {
1101 background: #ffffff;
1102 border-color: #e0e8ef;
1103 }
1104
1105 .wp-full-overlay-sidebar,
1106 .customize-themes-panel,
1107 #customize-sidebar-outer-content {
1108 background: #eaf9fe;
1109 border-right: 1px solid #e0e8ef;
1110 }
1111
1112 .outer-section-open #customize-controls .wp-full-overlay-sidebar-content,
1113 .attachment-media-view, .media-widget-preview.media_audio, .media-widget-preview.media_image {
1114 background: #eaf9fe;
1115 }
1116
1117 #customize-theme-controls #accordion-section-menu_locations {
1118 border-bottom: 1px solid #e0e8ef;
1119 }
1120
1121 #customize-controls #accordion-section-themes > .accordion-section-title {
1122 font-weight: 600;
1123 border-bottom: 1px solid #e0e8ef;
1124 }
1125
1126 #customize-controls #accordion-section-themes > .accordion-section-title:hover {
1127 background: #fff;
1128 }
1129
1130 #customize-controls .panel-meta.customize-info {
1131 border-bottom-color: #e0e8ef;
1132 }
1133
1134 #customize-theme-controls .control-section .accordion-section-title {
1135 font-weight: 400;
1136 border-top: 1px solid #e0e8ef;
1137 border-bottom: none;
1138 }
1139
1140 #customize-theme-controls .control-section:last-of-type > .accordion-section-title {
1141 border-bottom: 1px solid #e0e8ef;
1142 }
1143
1144 #customize-theme-controls .customize-section-title {
1145 border-top: 1px solid #e0e8ef;
1146 border-bottom: 1px solid #e0e8ef;
1147 }
1148
1149 #customize-controls .control-section .accordion-section-title:focus, #customize-controls .control-section .accordion-section-title:hover, #customize-controls .control-section.open .accordion-section-title, #customize-controls .control-section:hover > .accordion-section-title {
1150 color: #056184;
1151 background: #f5fcff;
1152 border-left-color: #f5fcff;
1153 }
1154
1155 .wp-customizer {
1156 /* SECTION: NAV MENUS */
1157 }
1158
1159 .wp-customizer .menu-item-edit-active .menu-item-handle, .wp-customizer .section-open .menu-item-settings, .wp-customizer .menu-item-bar .menu-item-handle:hover {
1160 border-color: #e0e8ef;
1161 }
1162
1163 .wp-customizer .section-open .menu-item-settings {
1164 background: #f5fcff;
1165 }
1166
1167 .wp-customizer .control-section-nav_menu .menu-location-settings {
1168 border-top-color: #e0e8ef !important;
1169 }
1170
1171 [data-balloon] {
1172 position: relative;
1173 }
1174
1175 [data-balloon]::before {
1176 opacity: 0;
1177 pointer-events: none;
1178 transition: all .18s ease-out;
1179 background: rgba(17, 17, 17, 0.9);
1180 border-radius: 4px;
1181 color: #fff;
1182 content: attr(data-balloon);
1183 font-size: 12px;
1184 padding: .5em 1em;
1185 position: absolute;
1186 white-space: nowrap;
1187 z-index: 10;
1188 }
1189
1190 [data-balloon]::after {
1191 background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(0)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1192 background-size: 100% auto;
1193 width: 18px;
1194 height: 6px;
1195 opacity: 0;
1196 pointer-events: none;
1197 transition: all .18s ease-out;
1198 content: '';
1199 position: absolute;
1200 z-index: 10;
1201 }
1202
1203 [data-balloon]:hover::before, [data-balloon]:hover::after {
1204 opacity: 1;
1205 pointer-events: auto;
1206 }
1207
1208 [data-balloon][data-balloon-pos="up"]::before {
1209 bottom: 100%;
1210 left: 50%;
1211 margin-bottom: 11px;
1212 -webkit-transform: translate3d(-50%, 10px, 0);
1213 transform: translate3d(-50%, 10px, 0);
1214 -webkit-transform-origin: top;
1215 transform-origin: top;
1216 }
1217
1218 [data-balloon][data-balloon-pos="up"]::after {
1219 bottom: 100%;
1220 left: 50%;
1221 margin-bottom: 5px;
1222 -webkit-transform: translate3d(-50%, 10px, 0);
1223 transform: translate3d(-50%, 10px, 0);
1224 -webkit-transform-origin: top;
1225 transform-origin: top;
1226 }
1227
1228 [data-balloon][data-balloon-pos="up"]:hover::before {
1229 -webkit-transform: translate3d(-50%, 0, 0);
1230 transform: translate3d(-50%, 0, 0);
1231 }
1232
1233 [data-balloon][data-balloon-pos="up"]:hover::after {
1234 -webkit-transform: translate3d(-50%, 0, 0);
1235 transform: translate3d(-50%, 0, 0);
1236 }
1237
1238 [data-balloon][data-balloon-pos='down']::before {
1239 left: 50%;
1240 margin-top: 11px;
1241 top: 100%;
1242 -webkit-transform: translate3d(-50%, -10px, 0);
1243 transform: translate3d(-50%, -10px, 0);
1244 }
1245
1246 [data-balloon][data-balloon-pos='down']::after {
1247 background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(180 18 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1248 background-size: 100% auto;
1249 width: 18px;
1250 height: 6px;
1251 left: 50%;
1252 margin-top: 5px;
1253 top: 100%;
1254 -webkit-transform: translate3d(-50%, -10px, 0);
1255 transform: translate3d(-50%, -10px, 0);
1256 }
1257
1258 [data-balloon][data-balloon-pos='down']:hover::before {
1259 -webkit-transform: translate3d(-50%, 0, 0);
1260 transform: translate3d(-50%, 0, 0);
1261 }
1262
1263 [data-balloon][data-balloon-pos='down']:hover::after {
1264 -webkit-transform: translate3d(-50%, 0, 0);
1265 transform: translate3d(-50%, 0, 0);
1266 }
1267
1268 [data-balloon][data-balloon-pos='left']::before {
1269 margin-right: 11px;
1270 right: 100%;
1271 top: 50%;
1272 -webkit-transform: translate3d(10px, -50%, 0);
1273 transform: translate3d(10px, -50%, 0);
1274 }
1275
1276 [data-balloon][data-balloon-pos='left']::after {
1277 background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(-90 18 18)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1278 background-size: 100% auto;
1279 width: 6px;
1280 height: 18px;
1281 margin-right: 5px;
1282 right: 100%;
1283 top: 50%;
1284 -webkit-transform: translate3d(10px, -50%, 0);
1285 transform: translate3d(10px, -50%, 0);
1286 }
1287
1288 [data-balloon][data-balloon-pos='left']:hover::before {
1289 -webkit-transform: translate3d(0, -50%, 0);
1290 transform: translate3d(0, -50%, 0);
1291 }
1292
1293 [data-balloon][data-balloon-pos='left']:hover::after {
1294 -webkit-transform: translate3d(0, -50%, 0);
1295 transform: translate3d(0, -50%, 0);
1296 }
1297
1298 [data-balloon][data-balloon-pos='right']::before {
1299 left: 100%;
1300 margin-left: 11px;
1301 top: 50%;
1302 -webkit-transform: translate3d(-10px, -50%, 0);
1303 transform: translate3d(-10px, -50%, 0);
1304 }
1305
1306 [data-balloon][data-balloon-pos='right']::after {
1307 background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(90 6 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1308 background-size: 100% auto;
1309 width: 6px;
1310 height: 18px;
1311 left: 100%;
1312 margin-left: 5px;
1313 top: 50%;
1314 -webkit-transform: translate3d(-10px, -50%, 0);
1315 transform: translate3d(-10px, -50%, 0);
1316 }
1317
1318 [data-balloon][data-balloon-pos='right']:hover::before {
1319 -webkit-transform: translate3d(0, -50%, 0);
1320 transform: translate3d(0, -50%, 0);
1321 }
1322
1323 [data-balloon][data-balloon-pos='right']:hover::after {
1324 -webkit-transform: translate3d(0, -50%, 0);
1325 transform: translate3d(0, -50%, 0);
1326 }
1327
1328 [data-balloon][data-balloon-length='small']::before {
1329 white-space: normal;
1330 width: 80px;
1331 }
1332
1333 [data-balloon][data-balloon-length='medium']::before {
1334 white-space: normal;
1335 width: 150px;
1336 }
1337
1338 [data-balloon][data-balloon-length='large']::before {
1339 white-space: normal;
1340 width: 260px;
1341 }
1342
1343 [data-balloon][data-balloon-length='xlarge']::before {
1344 white-space: normal;
1345 width: 380px;
1346 }
1347
1348 @media screen and (max-width: 768px) {
1349 [data-balloon][data-balloon-length='xlarge']::before {
1350 white-space: normal;
1351 width: 90vw;
1352 }
1353 }
1354
1355 [data-balloon][data-balloon-length='fit']::before {
1356 white-space: normal;
1357 width: 100%;
1358 }
1359
1360 /* ==========================================================================
1361 #FEEDBACK MODAL
1362 ========================================================================== */
1363 body.modal-open {
1364 overflow: hidden;
1365 }
1366
1367 body.modal-open #style-manager-user-feedback-modal .modal {
1368 overflow-x: hidden;
1369 overflow-y: auto;
1370 visibility: visible;
1371 opacity: 1;
1372 -webkit-transform: translate(0, 0);
1373 transform: translate(0, 0);
1374 }
1375
1376 #style-manager-user-feedback-modal {
1377 height: 100%;
1378 }
1379
1380 #style-manager-user-feedback-modal .modal {
1381 position: relative;
1382 height: 100%;
1383 display: -ms-flexbox;
1384 display: flex;
1385 -ms-flex-align: center;
1386 align-items: center;
1387 top: 0;
1388 right: 0;
1389 bottom: 0;
1390 left: 0;
1391 z-index: 1050;
1392 opacity: 0;
1393 visibility: hidden;
1394 overflow: hidden;
1395 outline: 0;
1396 transition: all .3s ease;
1397 -webkit-transform: translate(0, -10%);
1398 transform: translate(0, -10%);
1399 font-family: 'Galano Grotesque Alt', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1400 font-weight: 400;
1401 font-size: 16px;
1402 line-height: 1.7;
1403 }
1404
1405 #style-manager-user-feedback-modal .modal-dialog {
1406 position: relative;
1407 width: auto;
1408 margin: 10px;
1409 text-align: left;
1410 }
1411
1412 #style-manager-user-feedback-modal .modal-content {
1413 position: relative;
1414 display: -ms-flexbox;
1415 display: flex;
1416 -ms-flex-direction: column;
1417 flex-direction: column;
1418 background-color: #fff;
1419 background-clip: padding-box;
1420 border: none;
1421 border-radius: 4px;
1422 box-shadow: 0 4px 4px 0 rgba(42, 54, 52, 0.1), 0 8px 8px 0 rgba(42, 54, 52, 0.1), 0 16px 16px 0 rgba(42, 54, 52, 0.1), 0 16px 32px 0 rgba(42, 54, 52, 0.1), 0 32px 64px 0 rgba(42, 54, 52, 0.1), 0 64px 128px 0 rgba(42, 54, 52, 0.1);
1423 outline: 0;
1424 }
1425
1426 #style-manager-user-feedback-modal .modal-content p {
1427 color: #000;
1428 }
1429
1430 #style-manager-user-feedback-modal .modal-content p a {
1431 font-weight: 500;
1432 color: #9660C6;
1433 border-bottom: 1px solid #9660C6;
1434 }
1435
1436 #style-manager-user-feedback-modal .modal-content > form {
1437 margin-bottom: 20px;
1438 }
1439
1440 #style-manager-user-feedback-modal .modal-backdrop {
1441 position: fixed;
1442 top: 0;
1443 right: 0;
1444 bottom: 0;
1445 left: 0;
1446 z-index: 1040;
1447 background-color: #000;
1448 opacity: 0;
1449 visibility: hidden;
1450 transition: all 0.3s ease;
1451 }
1452
1453 .modal-open #style-manager-user-feedback-modal .modal-backdrop {
1454 opacity: 0.8;
1455 visibility: visible;
1456 }
1457
1458 #style-manager-user-feedback-modal .modal-header {
1459 display: -ms-flexbox;
1460 display: flex;
1461 -ms-flex-align: start;
1462 align-items: flex-start;
1463 -ms-flex-pack: justify;
1464 justify-content: space-between;
1465 padding: 30px 48px 10px 48px;
1466 }
1467
1468 #style-manager-user-feedback-modal .modal-header .close.button {
1469 top: -10px;
1470 }
1471
1472 #style-manager-user-feedback-modal .modal-header .close.icon {
1473 opacity: 0.5;
1474 }
1475
1476 #style-manager-user-feedback-modal .modal-header .close:hover {
1477 opacity: 1;
1478 }
1479
1480 #style-manager-user-feedback-modal .modal-title {
1481 margin-bottom: 10px;
1482 line-height: 1.5;
1483 }
1484
1485 #style-manager-user-feedback-modal .modal-title.modal-title--small {
1486 font-weight: 500;
1487 }
1488
1489 #style-manager-user-feedback-modal .modal-body {
1490 position: relative;
1491 -ms-flex: 1 1 auto;
1492 flex: 1 1 auto;
1493 padding: 30px 30px 0 30px;
1494 }
1495
1496 #style-manager-user-feedback-modal .modal-body.full {
1497 padding: 0;
1498 }
1499
1500 #style-manager-user-feedback-modal .modal-body.full .box {
1501 padding-top: 0;
1502 padding-bottom: 0;
1503 margin-top: 0;
1504 }
1505
1506 #style-manager-user-feedback-modal .modal-body.full + .modal-footer.full .box {
1507 padding-top: 18px;
1508 }
1509
1510 #style-manager-user-feedback-modal .modal-footer {
1511 padding: 30px;
1512 text-align: center;
1513 }
1514
1515 #style-manager-user-feedback-modal .modal-footer .box .button:last-child {
1516 margin-bottom: 0;
1517 }
1518
1519 #style-manager-user-feedback-modal .modal-footer.full {
1520 padding: 0;
1521 }
1522
1523 #style-manager-user-feedback-modal .modal-scrollbar-measure {
1524 position: absolute;
1525 top: -9999px;
1526 width: 50px;
1527 height: 50px;
1528 overflow: scroll;
1529 }
1530
1531 #style-manager-user-feedback-modal .modal-state {
1532 display: none;
1533 }
1534
1535 #style-manager-user-feedback-modal .modal-state:checked + .modal {
1536 opacity: 1;
1537 visibility: visible;
1538 }
1539
1540 #style-manager-user-feedback-modal .modal-state:checked + .modal .modal__inner {
1541 top: 0;
1542 }
1543
1544 @media (min-width: 576px) {
1545 #style-manager-user-feedback-modal .modal-dialog {
1546 max-width: 655px;
1547 margin: 30px auto;
1548 }
1549 #style-manager-user-feedback-modal .modal-sm {
1550 max-width: 300px;
1551 }
1552 }
1553
1554 @media (min-width: 576px) {
1555 #style-manager-user-feedback-modal .modal-lg {
1556 max-width: 800px;
1557 }
1558 }
1559
1560 #style-manager-user-feedback .modal-body .box {
1561 position: relative;
1562 -ms-flex-direction: column;
1563 flex-direction: column;
1564 display: -ms-flexbox;
1565 display: flex;
1566 -ms-flex-wrap: nowrap;
1567 flex-wrap: nowrap;
1568 -ms-flex-align: center;
1569 align-items: center;
1570 margin: 20px 0;
1571 padding: 16px 52px;
1572 border-radius: 4px;
1573 }
1574
1575 #style-manager-user-feedback .modal-body .box > * {
1576 width: 100%;
1577 }
1578
1579 #style-manager-user-feedback .modal-body p {
1580 font-size: 16px;
1581 margin-bottom: 20px;
1582 }
1583
1584 #style-manager-user-feedback .modal-body textarea {
1585 width: 100%;
1586 margin: 0;
1587 padding: 11px 18px;
1588 border: 1px solid #dddddd;
1589 border-radius: 4px;
1590 box-shadow: none;
1591 font-family: 'Galano Grotesque Alt', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1592 font-size: 16px;
1593 line-height: 26px;
1594 color: #473850;
1595 }
1596
1597 #style-manager-user-feedback .modal-title {
1598 margin-top: 0;
1599 margin-bottom: 34px;
1600 font-family: 'Galano Classic', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1601 font-weight: 600;
1602 font-size: 28px;
1603 line-height: 1.4;
1604 text-align: center;
1605 }
1606
1607 #style-manager-user-feedback .button {
1608 text-decoration: none;
1609 cursor: pointer;
1610 -webkit-font-smoothing: antialiased;
1611 position: relative;
1612 transition-duration: .2s;
1613 transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
1614 transition-property: -webkit-transform,background,background-color,color,box-shadow;
1615 transition-property: transform,background,background-color,color,box-shadow;
1616 display: inline-block;
1617 padding: 15px 50px;
1618 border-radius: 2px;
1619 font-family: "Galano Classic", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1620 font-size: 16px;
1621 line-height: 23px;
1622 font-weight: 600;
1623 text-align: center;
1624 background-color: #9660c6;
1625 color: #ffffff;
1626 border-radius: 4px;
1627 box-shadow: none;
1628 height: auto;
1629 width: 100%;
1630 margin-top: 20px;
1631 }
1632
1633 #style-manager-user-feedback .button:hover {
1634 background-color: #9660c6;
1635 color: #ffffff;
1636 -webkit-transform: scale(1.05) translateY(-3px);
1637 transform: scale(1.05) translateY(-3px);
1638 box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.7);
1639 }
1640
1641 #style-manager-user-feedback .second-step {
1642 margin-top: 18px;
1643 }
1644
1645 #style-manager-user-feedback .thanks-step,
1646 #style-manager-user-feedback .error-step {
1647 text-align: center;
1648 }
1649
1650 #style-manager-user-feedback .thanks-step .modal-title,
1651 #style-manager-user-feedback .error-step .modal-title {
1652 margin-bottom: 0;
1653 }
1654
1655 #style-manager-user-feedback .thanks-step p:last-child,
1656 #style-manager-user-feedback .error-step p:last-child {
1657 margin-bottom: 10px;
1658 }
1659
1660 .scorecard {
1661 display: -ms-flexbox;
1662 display: flex;
1663 -ms-flex-align: baseline;
1664 align-items: baseline;
1665 -ms-flex-pack: space-evenly;
1666 justify-content: space-evenly;
1667 color: #9660C6;
1668 font-family: "Galano Classic", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1669 font-size: 18px;
1670 font-weight: 600;
1671 text-align: center;
1672 }
1673
1674 .scorecard > label {
1675 font-size: 20px;
1676 }
1677
1678 .scorecard > label span {
1679 display: block;
1680 width: 46px;
1681 border: 2px solid #9660C6;
1682 line-height: 46px;
1683 border-radius: 100%;
1684 background: #FFF;
1685 transition: all 0.25s ease;
1686 }
1687
1688 .scorecard > label input[type="radio"] {
1689 display: none;
1690 }
1691
1692 .scorecard > label span:hover,
1693 .scorecard > label input[type="radio"]:checked ~ span {
1694 background: #9660C6;
1695 color: #FFF;
1696 }
1697
1698 .font-options__wrapper .font-options__options-list {
1699 border-color: #B8DAEB;
1700 box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
1701 }
1702
1703 .font-options__wrapper .font-options__option {
1704 margin-bottom: 12px;
1705 }
1706
1707 .font-options__wrapper .font-options__option label {
1708 display: block;
1709 margin-bottom: 6px;
1710 }
1711
1712 .font-options__wrapper [type=checkbox]:checked ~ .font-options__options-list {
1713 opacity: 1;
1714 display: block;
1715 }
1716
1717 input.customify_font_tooltip {
1718 display: none;
1719 }
1720
1721 ul.font-options__options-list .select2-container {
1722 width: 100% !important;
1723 }
1724
1725 ul.font-options__options-list .select2-container .select2-selection--single {
1726 -webkit-appearance: initial;
1727 }
1728
1729 ul.font-options__options-list .select2-container .select2-selection--single .select2-selection__arrow {
1730 display: none;
1731 }
1732
1733 ul.font-options__options-list .select2-container--default .select2-selection--single .select2-selection__rendered {
1734 color: inherit;
1735 line-height: initial;
1736 }
1737
1738 .select2-container.select2-container--open {
1739 z-index: 99999999;
1740 }
1741
1742 #customize-theme-controls .select2-container {
1743 width: 100% !important;
1744 }
1745
1746 #customize-theme-controls .select2-container .select2-selection--multiple {
1747 -webkit-appearance: initial;
1748 padding: 4px 8px 4px;
1749 height: auto;
1750 background: none;
1751 }
1752
1753 #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__arrow {
1754 display: none;
1755 }
1756
1757 #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered {
1758 padding: 0;
1759 display: -ms-flexbox;
1760 display: flex;
1761 }
1762
1763 #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search--inline {
1764 -ms-flex: 1;
1765 flex: 1;
1766 }
1767
1768 #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search--inline .select2-search__field[class] {
1769 min-width: 100%;
1770 border-width: 0;
1771 margin-top: 3px !important;
1772 }
1773
1774 #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
1775 padding: 3px 7px;
1776 margin-right: 6px;
1777 margin-top: 0px;
1778 border-color: #e0e8ef;
1779 background-color: #f6fbff;
1780 }
1781
1782 #customize-theme-controls .select2-container .select2-search--inline .select2-search__field {
1783 height: 29px;
1784 min-width: 9em;
1785 margin-top: 0;
1786 }
1787
1788 .select2-container--default .select2-results__option[aria-selected=true][class] {
1789 background: transparent;
1790 opacity: 0.3;
1791 pointer-events: none;
1792 }
1793
1794 .select2-container .select2-dropdown {
1795 border-color: #e0e8ef;
1796 }
1797
1798 #customize-theme-controls .widget-content .accordion-container {
1799 margin-left: -10px;
1800 margin-right: -10px;
1801 margin-top: 20px;
1802 margin-bottom: 10px;
1803 }
1804
1805 #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content {
1806 position: relative;
1807 left: 0;
1808 max-height: 0;
1809 padding-top: 0;
1810 padding-bottom: 0;
1811 overflow: hidden;
1812 transition: all .4s ease;
1813 color: #416B7E;
1814 }
1815
1816 #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content p:first-child {
1817 margin-top: 0;
1818 }
1819
1820 #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content p:last-child {
1821 margin-bottom: 0;
1822 }
1823
1824 #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-title {
1825 color: #39474D;
1826 }
1827
1828 #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-title:after {
1829 content: "\f142";
1830 -webkit-transform: rotate(180deg);
1831 transform: rotate(180deg);
1832 }
1833
1834 #customize-theme-controls .widget-content .accordion-container .accordion-section.open {
1835 border-bottom: none;
1836 }
1837
1838 #customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-content {
1839 max-height: 100%;
1840 padding-top: 17px;
1841 padding-bottom: 17px;
1842 }
1843
1844 #customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-title {
1845 border-bottom: 1px solid;
1846 }
1847
1848 #customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-title:after {
1849 -webkit-transform: rotate(0deg);
1850 transform: rotate(0deg);
1851 }
1852
1853 #customize-theme-controls .widget-content .accordion-container label.customize-control-title, #customize-theme-controls .widget-content .accordion-container label.separator.label {
1854 cursor: default;
1855 }
1856
1857 .widget .widget-content > p input[type=checkbox],
1858 .widget .widget-content > p input[type=radio] {
1859 margin-bottom: 3px;
1860 margin-top: 3px;
1861 }
1862
1863 .widget .widget-content small {
1864 margin-top: 5px;
1865 display: block;
1866 }
1867
1868 #available-widgets [class*=pixelgrade] .widget .widget-title:before,
1869 #available-widgets [class*=featured-posts] .widget .widget-title:before,
1870 #available-widgets [class*=categories-image-grid] .widget .widget-title:before {
1871 content: "\f538";
1872 color: #9660c6;
1873 }
1874
1875 #available-widgets [class*=pixelgrade-featured-posts-slideshow] .widget .widget-title:before {
1876 content: "\f233";
1877 }
1878
1879 #available-widgets [class*=pixelgrade-featured-posts-carousel] .widget .widget-title:before {
1880 content: "\f169";
1881 }
1882
1883 #available-widgets [class*=featured-posts-grid] .widget .widget-title:before {
1884 content: "\f180";
1885 }
1886
1887 #available-widgets [class*=featured-posts-list] .widget .widget-title:before {
1888 content: "\f164";
1889 }
1890
1891 #available-widgets [class*=categories-image-grid] .widget .widget-title:before {
1892 content: "\f163";
1893 }
1894
1895 #available-widgets [class*=pixelgrade-promo-box] .widget .widget-title:before {
1896 content: "\f488";
1897 }
1898
1899 .ui-tooltip {
1900 z-index: 999999;
1901 }
1902
1903 .wp-customizer .widget-conditional .condition-control:after {
1904 content: " ";
1905 display: table;
1906 clear: both;
1907 }
1908
1909 .wp-customizer .widget-conditional .selection {
1910 padding-right: 50px;
1911 padding-left: 28px;
1912 padding-bottom: 19px;
1913 margin-left: 0;
1914 margin-right: 0;
1915 margin-bottom: 10px;
1916 border-bottom: 1px solid #cbcfd4;
1917 }
1918
1919 .wp-customizer .widget-conditional .condition:last-child .selection {
1920 border: 0;
1921 }
1922
1923 .wp-customizer .widget-conditional select {
1924 max-width: 100%;
1925 width: 170px;
1926 }
1927
1928 .wp-customizer .widget-conditional .condition-top select {
1929 width: 130px;
1930 }
1931
1932 .pix_customizer_setting .customize-inside-control-row {
1933 position: relative;
1934 width: 100% !important;
1935 margin-left: 0 !important;
1936 text-indent: 0 !important;
1937 background-size: cover;
1938 background-position: 50% 50%;
1939 height: 64px;
1940 border-radius: 5px;
1941 overflow: hidden;
1942 }
1943
1944 .pix_customizer_setting .customize-inside-control-row:before {
1945 content: '';
1946 position: absolute;
1947 top: 0;
1948 bottom: 0;
1949 left: 0;
1950 right: 0;
1951 z-index: 10;
1952 pointer-events: none;
1953 box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15), inset 0 1px 3px 0 rgba(0, 0, 0, 0.15);
1954 }
1955
1956 .pix_customizer_setting .customize-inside-control-row:hover:before {
1957 box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.15), inset 0 0 3px 0 rgba(0, 0, 0, 0.15);
1958 }
1959
1960 .pix_customizer_setting .customize-inside-control-row:hover .palette__item {
1961 -webkit-transform: translateY(0%);
1962 transform: translateY(0%);
1963 }
1964
1965 .pix_customizer_setting .customize-inside-control-row:hover label {
1966 left: 10px;
1967 }
1968
1969 .pix_customizer_setting .customize-inside-control-row input {
1970 opacity: 0;
1971 }
1972
1973 .pix_customizer_setting .customize-inside-control-row input:checked + label .preview__letter--checked {
1974 display: inline-block;
1975 vertical-align: middle;
1976 }
1977
1978 .pix_customizer_setting .customize-inside-control-row input:checked + label .preview__letter {
1979 display: none;
1980 }
1981
1982 .pix_customizer_setting .customize-inside-control-row label {
1983 position: absolute;
1984 display: -ms-flexbox;
1985 display: flex;
1986 z-index: 2;
1987 width: 100%;
1988 height: 100%;
1989 top: 0;
1990 left: 0;
1991 padding: 0 10px;
1992 margin-top: 0 !important;
1993 -ms-flex-align: center;
1994 align-items: center;
1995 transition: all .3s ease;
1996 }
1997
1998 .pix_customizer_setting .customize-inside-control-row .palette {
1999 position: absolute;
2000 display: -ms-flexbox;
2001 display: flex;
2002 top: 0;
2003 left: 0;
2004 z-index: 1;
2005 width: 100%;
2006 height: 100%;
2007 transition: all .2s ease;
2008 }
2009
2010 .pix_customizer_setting .customize-inside-control-row .palette__item {
2011 -ms-flex: 1;
2012 flex: 1;
2013 -webkit-transform: translateY(100%);
2014 transform: translateY(100%);
2015 transition: all .3s ease;
2016 }
2017
2018 .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(1) {
2019 transition-delay: 0s;
2020 }
2021
2022 .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(2) {
2023 transition-delay: 0.05s;
2024 }
2025
2026 .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(3) {
2027 transition-delay: 0.1s;
2028 }
2029
2030 .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(4) {
2031 transition-delay: 0.15s;
2032 }
2033
2034 .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(5) {
2035 transition-delay: 0.2s;
2036 }
2037
2038 .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(6) {
2039 transition-delay: 0.25s;
2040 }
2041
2042 .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(7) {
2043 transition-delay: 0.3s;
2044 }
2045
2046 .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(8) {
2047 transition-delay: 0.35s;
2048 }
2049
2050 .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(9) {
2051 transition-delay: 0.4s;
2052 }
2053
2054 .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(10) {
2055 transition-delay: 0.45s;
2056 }
2057
2058 .pix_customizer_setting .customize-inside-control-row .preview__letter,
2059 .pix_customizer_setting .customize-inside-control-row .preview__letter--checked {
2060 display: inline-block;
2061 padding: 3px;
2062 border-radius: 2px;
2063 color: white;
2064 margin-right: 5px;
2065 min-height: 26px;
2066 min-width: 26px;
2067 text-align: center;
2068 background-position: center center;
2069 background-repeat: no-repeat;
2070 background-size: 15px 15px;
2071 font-style: normal;
2072 vertical-align: baseline;
2073 }
2074
2075 .pix_customizer_setting .customize-inside-control-row .preview__letter--checked {
2076 display: none;
2077 }
2078
2079 [id*="sm_current_color_palette_control"] .customize-inside-control-row .palette__item[class] {
2080 -webkit-transform: none;
2081 transform: none;
2082 }
2083
2084 [id*="sm_current_color_palette_control"] .variation-control {
2085 display: -ms-flexbox;
2086 display: flex;
2087 }
2088
2089 [id="customize-control-sm_color_primary_control"],
2090 [id="customize-control-sm_dark_primary_control"],
2091 [id="customize-control-sm_light_primary_control"],
2092 [id="customize-control-sm_color_secondary_control"],
2093 [id="customize-control-sm_dark_secondary_control"],
2094 [id="customize-control-sm_light_secondary_control"],
2095 [id="customize-control-sm_color_tertiary_control"],
2096 [id="customize-control-sm_dark_tertiary_control"],
2097 [id="customize-control-sm_light_tertiary_control"] {
2098 visibility: hidden;
2099 }
2100
2101 [id="customize-control-sm_color_primary_control"] > span,
2102 [id="customize-control-sm_dark_primary_control"] > span,
2103 [id="customize-control-sm_light_primary_control"] > span,
2104 [id="customize-control-sm_color_secondary_control"] > span,
2105 [id="customize-control-sm_dark_secondary_control"] > span,
2106 [id="customize-control-sm_light_secondary_control"] > span,
2107 [id="customize-control-sm_color_tertiary_control"] > span,
2108 [id="customize-control-sm_dark_tertiary_control"] > span,
2109 [id="customize-control-sm_light_tertiary_control"] > span {
2110 display: none;
2111 }
2112
2113 [id="customize-control-sm_color_primary_control"] .wp-picker-input-wrap,
2114 [id="customize-control-sm_color_primary_control"] .wp-picker-holder,
2115 [id="customize-control-sm_dark_primary_control"] .wp-picker-input-wrap,
2116 [id="customize-control-sm_dark_primary_control"] .wp-picker-holder,
2117 [id="customize-control-sm_light_primary_control"] .wp-picker-input-wrap,
2118 [id="customize-control-sm_light_primary_control"] .wp-picker-holder,
2119 [id="customize-control-sm_color_secondary_control"] .wp-picker-input-wrap,
2120 [id="customize-control-sm_color_secondary_control"] .wp-picker-holder,
2121 [id="customize-control-sm_dark_secondary_control"] .wp-picker-input-wrap,
2122 [id="customize-control-sm_dark_secondary_control"] .wp-picker-holder,
2123 [id="customize-control-sm_light_secondary_control"] .wp-picker-input-wrap,
2124 [id="customize-control-sm_light_secondary_control"] .wp-picker-holder,
2125 [id="customize-control-sm_color_tertiary_control"] .wp-picker-input-wrap,
2126 [id="customize-control-sm_color_tertiary_control"] .wp-picker-holder,
2127 [id="customize-control-sm_dark_tertiary_control"] .wp-picker-input-wrap,
2128 [id="customize-control-sm_dark_tertiary_control"] .wp-picker-holder,
2129 [id="customize-control-sm_light_tertiary_control"] .wp-picker-input-wrap,
2130 [id="customize-control-sm_light_tertiary_control"] .wp-picker-holder {
2131 visibility: visible;
2132 }
2133
2134 [id="customize-control-sm_color_primary_control"] .wp-picker-container,
2135 [id="customize-control-sm_dark_primary_control"] .wp-picker-container,
2136 [id="customize-control-sm_light_primary_control"] .wp-picker-container,
2137 [id="customize-control-sm_color_secondary_control"] .wp-picker-container,
2138 [id="customize-control-sm_dark_secondary_control"] .wp-picker-container,
2139 [id="customize-control-sm_light_secondary_control"] .wp-picker-container,
2140 [id="customize-control-sm_color_tertiary_control"] .wp-picker-container,
2141 [id="customize-control-sm_dark_tertiary_control"] .wp-picker-container,
2142 [id="customize-control-sm_light_tertiary_control"] .wp-picker-container {
2143 width: 100%;
2144 float: left;
2145 }
2146
2147 [id="customize-control-sm_color_primary_control"] .wp-picker-container button:before,
2148 [id="customize-control-sm_dark_primary_control"] .wp-picker-container button:before,
2149 [id="customize-control-sm_light_primary_control"] .wp-picker-container button:before,
2150 [id="customize-control-sm_color_secondary_control"] .wp-picker-container button:before,
2151 [id="customize-control-sm_dark_secondary_control"] .wp-picker-container button:before,
2152 [id="customize-control-sm_light_secondary_control"] .wp-picker-container button:before,
2153 [id="customize-control-sm_color_tertiary_control"] .wp-picker-container button:before,
2154 [id="customize-control-sm_dark_tertiary_control"] .wp-picker-container button:before,
2155 [id="customize-control-sm_light_tertiary_control"] .wp-picker-container button:before {
2156 content: "";
2157 position: relative;
2158 display: block;
2159 visibility: visible;
2160 background-color: inherit;
2161 width: 90px;
2162 height: 90px;
2163 border-radius: 50%;
2164 border: 3px solid #DDD;
2165 }
2166
2167 #customize-control-sm_color_palette_control ~ [id*="sm_color_secondary"] .wp-picker-container button:before {
2168 top: -54px;
2169 right: -70px;
2170 }
2171
2172 #customize-control-sm_color_palette_control ~ [id*="sm_color_tertiary"] .wp-picker-container button:before {
2173 top: -108px;
2174 right: -140px;
2175 }
2176
2177 #customize-control-sm_color_palette_control ~ [id*="sm_dark_primary"] .wp-picker-container button:before {
2178 top: -54px;
2179 }
2180
2181 #customize-control-sm_color_palette_control ~ [id*="sm_dark_secondary"] .wp-picker-container button:before {
2182 top: -108px;
2183 right: -70px;
2184 }
2185
2186 #customize-control-sm_color_palette_control ~ [id*="sm_dark_tertiary"] .wp-picker-container button:before {
2187 top: -162px;
2188 right: -140px;
2189 }
2190
2191 #customize-control-sm_color_palette_control ~ [id*="sm_light_primary"] .wp-picker-container button:before {
2192 top: -108px;
2193 }
2194
2195 #customize-control-sm_color_palette_control ~ [id*="sm_light_secondary"] .wp-picker-container button:before {
2196 top: -162px;
2197 right: -70px;
2198 }
2199
2200 #customize-control-sm_color_palette_control ~ [id*="sm_light_tertiary"] .wp-picker-container button:before {
2201 top: -216px;
2202 right: -140px;
2203 }
2204
2205 .c-color-palette {
2206 position: relative;
2207 }
2208
2209 .c-color-palette .c-color-palette__label {
2210 -ms-flex-positive: 1;
2211 flex-grow: 1;
2212 }
2213
2214 .c-color-palette:after {
2215 height: 64px;
2216 border-radius: 5px;
2217 }
2218
2219 .c-color-palette:after {
2220 content: "";
2221 display: block;
2222 position: absolute;
2223 top: 0;
2224 left: 0;
2225 right: 0;
2226 box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15), inset 0 1px 3px 0 rgba(0, 0, 0, 0.15);
2227 pointer-events: none;
2228 }
2229
2230 .label__inner {
2231 color: #000000;
2232 background: #F5F6F1;
2233 padding: 7px 12px 7px 7px;
2234 z-index: 2;
2235 border-radius: 3px;
2236 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
2237 }
2238
2239 .c-color-palette__label {
2240 display: -ms-flexbox;
2241 display: flex;
2242 -ms-flex-align: center;
2243 align-items: center;
2244 height: 40px;
2245 padding: 12px;
2246 color: black;
2247 background: white;
2248 }
2249
2250 .colors {
2251 position: relative;
2252 display: -ms-flexbox;
2253 display: flex;
2254 -ms-flex-align: stretch;
2255 align-items: stretch;
2256 width: 100%;
2257 }
2258
2259 .fill {
2260 position: relative;
2261 height: 64px;
2262 margin-bottom: 1em;
2263 }
2264
2265 .c-color-palette__overlay {
2266 position: absolute;
2267 top: 0;
2268 left: 0;
2269 right: 0;
2270 height: 64px;
2271 display: -ms-flexbox;
2272 display: flex;
2273 -ms-flex-align: center;
2274 align-items: center;
2275 }
2276
2277 .fill:before {
2278 position: absolute;
2279 top: 0;
2280 left: 0;
2281 right: 0;
2282 bottom: 0;
2283 }
2284
2285 .fill:before {
2286 content: "";
2287 background: currentColor;
2288 }
2289
2290 .picker {
2291 position: relative;
2292 top: 0;
2293 left: 50%;
2294 width: 80%;
2295 max-width: 3em;
2296 margin-top: auto;
2297 margin-bottom: auto;
2298 border-radius: 50%;
2299 -webkit-transform: translate3d(-50%, 0, 0);
2300 transform: translate3d(-50%, 0, 0);
2301 }
2302
2303 .colors.next .picker > i {
2304 display: block;
2305 position: absolute;
2306 top: 0;
2307 right: 0;
2308 bottom: 0;
2309 left: 0;
2310 border-radius: 50%;
2311 box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15), inset 0 1px 3px 0 rgba(0, 0, 0, 0.15);
2312 pointer-events: none;
2313 z-index: 20;
2314 }
2315
2316 .picker:before,
2317 .picker:after {
2318 content: "";
2319 display: block;
2320 background: currentColor;
2321 border-radius: 50%;
2322 }
2323
2324 .picker:before {
2325 padding-top: 100%;
2326 }
2327
2328 .picker:after {
2329 position: absolute;
2330 top: 0;
2331 left: 0;
2332 width: 100%;
2333 height: 100%;
2334 }
2335
2336 .fill {
2337 overflow: hidden;
2338 }
2339
2340 .color:first-child .fill {
2341 border-top-left-radius: 5px;
2342 border-bottom-left-radius: 5px;
2343 }
2344
2345 .color:last-child .fill {
2346 border-top-right-radius: 5px;
2347 border-bottom-right-radius: 5px;
2348 }
2349
2350 .colors.next {
2351 position: absolute;
2352 top: 0;
2353 left: 0;
2354 }
2355
2356 .colors.next .fill:before {
2357 -webkit-transform: translateY(-100%);
2358 transform: translateY(-100%);
2359 }
2360
2361 .colors.next .picker:before {
2362 -webkit-transform: translateY(-100%);
2363 transform: translateY(-100%);
2364 opacity: 0;
2365 }
2366
2367 .colors.next .picker:after {
2368 opacity: 0;
2369 }
2370
2371 .c-color-palette.animate .next .fill:before {
2372 -webkit-animation: fill 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2373 animation: fill 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2374 }
2375
2376 .c-color-palette.animate .next .picker {
2377 -webkit-animation: picker-filter 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2378 animation: picker-filter 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2379 }
2380
2381 .c-color-palette.animate .next .picker:before {
2382 -webkit-animation: fill-picker-before 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2383 animation: fill-picker-before 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2384 }
2385
2386 .c-color-palette.animate .next .picker:after {
2387 -webkit-animation: fill-picker-after 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2388 animation: fill-picker-after 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2389 }
2390
2391 .c-color-palette.animate .current .fill,
2392 .c-color-palette.animate .current .picker {
2393 -webkit-animation: fade-out 1s forwards;
2394 animation: fade-out 1s forwards;
2395 }
2396
2397 .c-color-palette.animate .color:nth-child(1) .fill,
2398 .c-color-palette.animate .color:nth-child(1) .fill:before,
2399 .c-color-palette.animate .color:nth-child(1) .picker,
2400 .c-color-palette.animate .color:nth-child(1) .picker:after,
2401 .c-color-palette.animate .color:nth-child(1) .picker:before {
2402 -webkit-animation-delay: 0.1s;
2403 animation-delay: 0.1s;
2404 }
2405
2406 .c-color-palette.animate .color:nth-child(2) .fill,
2407 .c-color-palette.animate .color:nth-child(2) .fill:before,
2408 .c-color-palette.animate .color:nth-child(2) .picker,
2409 .c-color-palette.animate .color:nth-child(2) .picker:after,
2410 .c-color-palette.animate .color:nth-child(2) .picker:before {
2411 -webkit-animation-delay: 0.05s;
2412 animation-delay: 0.05s;
2413 }
2414
2415 .c-color-palette.animate .color:nth-child(3) .fill,
2416 .c-color-palette.animate .color:nth-child(3) .fill:before,
2417 .c-color-palette.animate .color:nth-child(3) .picker,
2418 .c-color-palette.animate .color:nth-child(3) .picker:after,
2419 .c-color-palette.animate .color:nth-child(3) .picker:before {
2420 -webkit-animation-delay: 0.25s;
2421 animation-delay: 0.25s;
2422 }
2423
2424 .c-color-palette.animate .color:nth-child(4) .fill,
2425 .c-color-palette.animate .color:nth-child(4) .fill:before,
2426 .c-color-palette.animate .color:nth-child(4) .picker,
2427 .c-color-palette.animate .color:nth-child(4) .picker:after,
2428 .c-color-palette.animate .color:nth-child(4) .picker:before {
2429 -webkit-animation-delay: 0.45s;
2430 animation-delay: 0.45s;
2431 }
2432
2433 .c-color-palette.animate .color:nth-child(5) .fill,
2434 .c-color-palette.animate .color:nth-child(5) .fill:before,
2435 .c-color-palette.animate .color:nth-child(5) .picker,
2436 .c-color-palette.animate .color:nth-child(5) .picker:after,
2437 .c-color-palette.animate .color:nth-child(5) .picker:before {
2438 -webkit-animation-delay: 0.2s;
2439 animation-delay: 0.2s;
2440 }
2441
2442 .c-color-palette.animate .color:nth-child(6) .fill,
2443 .c-color-palette.animate .color:nth-child(6) .fill:before,
2444 .c-color-palette.animate .color:nth-child(6) .picker,
2445 .c-color-palette.animate .color:nth-child(6) .picker:after,
2446 .c-color-palette.animate .color:nth-child(6) .picker:before {
2447 -webkit-animation-delay: 0.4s;
2448 animation-delay: 0.4s;
2449 }
2450
2451 .c-color-palette.animate .color:nth-child(7) .fill,
2452 .c-color-palette.animate .color:nth-child(7) .fill:before,
2453 .c-color-palette.animate .color:nth-child(7) .picker,
2454 .c-color-palette.animate .color:nth-child(7) .picker:after,
2455 .c-color-palette.animate .color:nth-child(7) .picker:before {
2456 -webkit-animation-delay: 0.35s;
2457 animation-delay: 0.35s;
2458 }
2459
2460 .c-color-palette.animate .color:nth-child(8) .fill,
2461 .c-color-palette.animate .color:nth-child(8) .fill:before,
2462 .c-color-palette.animate .color:nth-child(8) .picker,
2463 .c-color-palette.animate .color:nth-child(8) .picker:after,
2464 .c-color-palette.animate .color:nth-child(8) .picker:before {
2465 -webkit-animation-delay: 0.3s;
2466 animation-delay: 0.3s;
2467 }
2468
2469 .c-color-palette.animate .color:nth-child(9) .fill,
2470 .c-color-palette.animate .color:nth-child(9) .fill:before,
2471 .c-color-palette.animate .color:nth-child(9) .picker,
2472 .c-color-palette.animate .color:nth-child(9) .picker:after,
2473 .c-color-palette.animate .color:nth-child(9) .picker:before {
2474 -webkit-animation-delay: 0.15s;
2475 animation-delay: 0.15s;
2476 }
2477
2478 @-webkit-keyframes fill {
2479 30% {
2480 -webkit-transform: translateY(0);
2481 transform: translateY(0);
2482 }
2483 100% {
2484 -webkit-transform: translateY(0);
2485 transform: translateY(0);
2486 }
2487 }
2488
2489 @keyframes fill {
2490 30% {
2491 -webkit-transform: translateY(0);
2492 transform: translateY(0);
2493 }
2494 100% {
2495 -webkit-transform: translateY(0);
2496 transform: translateY(0);
2497 }
2498 }
2499
2500 @-webkit-keyframes picker-filter {
2501 0% {
2502 -webkit-filter: none;
2503 filter: none;
2504 }
2505 1% {
2506 -webkit-filter: url("#goo");
2507 filter: url("#goo");
2508 }
2509 99% {
2510 -webkit-filter: url("#goo");
2511 filter: url("#goo");
2512 }
2513 100% {
2514 -webkit-filter: none;
2515 filter: none;
2516 }
2517 }
2518
2519 @keyframes picker-filter {
2520 0% {
2521 -webkit-filter: none;
2522 filter: none;
2523 }
2524 1% {
2525 -webkit-filter: url("#goo");
2526 filter: url("#goo");
2527 }
2528 99% {
2529 -webkit-filter: url("#goo");
2530 filter: url("#goo");
2531 }
2532 100% {
2533 -webkit-filter: none;
2534 filter: none;
2535 }
2536 }
2537
2538 @-webkit-keyframes fill-picker-before {
2539 24% {
2540 opacity: 0;
2541 -webkit-transform: translateY(-130%);
2542 transform: translateY(-130%);
2543 }
2544 25% {
2545 opacity: 1;
2546 -webkit-transform: translateY(-130%);
2547 transform: translateY(-130%);
2548 }
2549 32% {
2550 opacity: 1;
2551 -webkit-transform: translateY(-130%);
2552 transform: translateY(-130%);
2553 }
2554 52% {
2555 opacity: 1;
2556 -webkit-transform: translateY(-130%);
2557 transform: translateY(-130%);
2558 }
2559 99% {
2560 opacity: 1;
2561 -webkit-transform: translateY(-160%);
2562 transform: translateY(-160%);
2563 }
2564 100% {
2565 opacity: 0;
2566 -webkit-transform: translateY(-160%);
2567 transform: translateY(-160%);
2568 }
2569 }
2570
2571 @keyframes fill-picker-before {
2572 24% {
2573 opacity: 0;
2574 -webkit-transform: translateY(-130%);
2575 transform: translateY(-130%);
2576 }
2577 25% {
2578 opacity: 1;
2579 -webkit-transform: translateY(-130%);
2580 transform: translateY(-130%);
2581 }
2582 32% {
2583 opacity: 1;
2584 -webkit-transform: translateY(-130%);
2585 transform: translateY(-130%);
2586 }
2587 52% {
2588 opacity: 1;
2589 -webkit-transform: translateY(-130%);
2590 transform: translateY(-130%);
2591 }
2592 99% {
2593 opacity: 1;
2594 -webkit-transform: translateY(-160%);
2595 transform: translateY(-160%);
2596 }
2597 100% {
2598 opacity: 0;
2599 -webkit-transform: translateY(-160%);
2600 transform: translateY(-160%);
2601 }
2602 }
2603
2604 @-webkit-keyframes fill-picker-after {
2605 24% {
2606 opacity: 0;
2607 -webkit-transform: translateY(-160%);
2608 transform: translateY(-160%);
2609 }
2610 25% {
2611 opacity: 1;
2612 -webkit-transform: translateY(-160%);
2613 transform: translateY(-160%);
2614 }
2615 32% {
2616 opacity: 1;
2617 -webkit-transform: translateY(-120%);
2618 transform: translateY(-120%);
2619 }
2620 100% {
2621 opacity: 1;
2622 -webkit-transform: translateY(0);
2623 transform: translateY(0);
2624 }
2625 }
2626
2627 @keyframes fill-picker-after {
2628 24% {
2629 opacity: 0;
2630 -webkit-transform: translateY(-160%);
2631 transform: translateY(-160%);
2632 }
2633 25% {
2634 opacity: 1;
2635 -webkit-transform: translateY(-160%);
2636 transform: translateY(-160%);
2637 }
2638 32% {
2639 opacity: 1;
2640 -webkit-transform: translateY(-120%);
2641 transform: translateY(-120%);
2642 }
2643 100% {
2644 opacity: 1;
2645 -webkit-transform: translateY(0);
2646 transform: translateY(0);
2647 }
2648 }
2649
2650 @-webkit-keyframes fade-out {
2651 90% {
2652 opacity: 1;
2653 }
2654 100% {
2655 opacity: 0;
2656 }
2657 }
2658
2659 @keyframes fade-out {
2660 90% {
2661 opacity: 1;
2662 }
2663 100% {
2664 opacity: 0;
2665 }
2666 }
2667
2668 .label {
2669 margin-right: auto;
2670 }
2671
2672 .c-color-palette__blur {
2673 display: none;
2674 }
2675
2676 #customize-theme-controls [id*="sm_current_color_palette_control"] {
2677 display: block;
2678 margin: -12px -12px 19px;
2679 width: auto;
2680 }
2681
2682 #customize-theme-controls [id*="sm_current_color_palette_control"] .color-palette-container {
2683 padding: 19px;
2684 background: white;
2685 }
2686
2687 #customize-theme-controls [id*="sm_current_color_palette_control"] .color-palette-container .description {
2688 margin-bottom: 15px;
2689 }
2690
2691 #customize-theme-controls [id*="sm_current_color_palette_control"] .description.c-color-palette__notification {
2692 padding-top: 19px;
2693 margin-bottom: 0;
2694 font-size: inherit;
2695 font-weight: bold;
2696 }
2697
2698 .c-color-palette__name {
2699 margin-right: auto;
2700 }
2701
2702 .c-color-palette__control {
2703 width: 2em;
2704 height: 2em;
2705 margin-left: 0.25em;
2706 display: -ms-flexbox;
2707 display: flex;
2708 -ms-flex-pack: center;
2709 justify-content: center;
2710 -ms-flex-align: center;
2711 align-items: center;
2712 border-radius: 50%;
2713 }
2714
2715 .c-color-palette__control, .c-color-palette__control span {
2716 transition: color .3s ease-in-out;
2717 }
2718
2719 .c-color-palette__control span {
2720 color: rgba(0, 0, 0, 0.25);
2721 -webkit-transform: scale(0.8);
2722 transform: scale(0.8);
2723 }
2724
2725 .c-color-palette__control.active {
2726 background: currentColor;
2727 }
2728
2729 .c-color-palette__control.active span {
2730 color: white;
2731 }
2732
2733 #sub-accordion-section-sm_color_palettes_section {
2734 display: -ms-flexbox !important;
2735 display: flex !important;
2736 -ms-flex-direction: column;
2737 flex-direction: column;
2738 padding: 12px 0 0 !important;
2739 overflow: hidden;
2740 }
2741
2742 #sub-accordion-section-sm_color_palettes_section > * {
2743 display: block !important;
2744 -ms-flex-positive: 0;
2745 flex-grow: 0;
2746 padding: 0 12px;
2747 }
2748
2749 #sub-accordion-section-sm_color_palettes_section #customize-control-sm_color_palette_control {
2750 -ms-flex-negative: 0;
2751 flex-shrink: 0;
2752 -ms-flex-positive: 1;
2753 flex-grow: 1;
2754 overflow-y: scroll;
2755 margin-top: -19px;
2756 padding-top: 19px;
2757 margin-bottom: 0;
2758 }
2759
2760 #sub-accordion-section-sm_color_palettes_section:not(.advanced) #customize-control-sm_color_palette_control ~ li:not([id="customize-control-sm_toggle_advanced_settings_control"]) {
2761 display: none !important;
2762 }
2763
2764 #sub-accordion-section-sm_color_palettes_section.advanced #customize-control-sm_color_palette_control {
2765 display: none !important;
2766 }
2767
2768 .c-color-palette .iris-picker {
2769 position: absolute;
2770 top: 100%;
2771 left: 0;
2772 z-index: 100;
2773 margin-top: 1em;
2774 border: 0;
2775 box-shadow: black 0 3px 12px -4px;
2776 }
2777
2778 .c-color-palette .iris-picker .iris-square-handle {
2779 border-color: transparent;
2780 left: -6px;
2781 top: -6px;
2782 }
2783
2784 .c-color-palette .iris-picker .iris-square-handle:after {
2785 position: absolute;
2786 bottom: 0;
2787 right: 0;
2788 left: 0;
2789 top: 0;
2790 border: 2px solid white;
2791 }
2792
2793 .c-color-palette .iris-picker .iris-square-value {
2794 box-shadow: none !important;
2795 }
2796
2797 .color {
2798 display: -ms-flexbox;
2799 display: flex;
2800 -ms-flex-direction: column;
2801 flex-direction: column;
2802 -ms-flex: 1 1 0;
2803 flex: 1 1 0;
2804 overflow: hidden;
2805 }
2806
2807 .c-color-palette.animate .color {
2808 transition: -ms-flex-positive 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
2809 transition: flex-grow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
2810 }
2811
2812 .c-color-palette.animate .color.hidden {
2813 transition: -ms-flex-positive 0.3s cubic-bezier(0.6, -1, 0.74, 0.05);
2814 transition: flex-grow 0.3s cubic-bezier(0.6, -1, 0.74, 0.05);
2815 }
2816
2817 .color.hidden {
2818 display: -ms-flexbox;
2819 display: flex;
2820 -ms-flex-positive: 0;
2821 flex-grow: 0;
2822 }
2823
2824 .color.hidden .picker {
2825 opacity: 0;
2826 transition: opacity .2s ease-out;
2827 }
2828
2829 .color .picker {
2830 border: 2px solid transparent;
2831 transition: opacity .3s ease-in-out, border-color .3s ease-in-out;
2832 cursor: pointer;
2833 }
2834
2835 .color .picker i {
2836 transition: box-shadow .3s ease-in-out;
2837 }
2838
2839 .color.inactive .picker {
2840 opacity: 0.2;
2841 }
2842
2843 .color.active .picker {
2844 border-color: #73C5EE;
2845 }
2846
2847 .colors .color.active i {
2848 box-shadow: inset 0 0 3px 0 transparent, inset 0 1px 3px 0 transparent;
2849 }
2850
2851 .color.inactive .picker:hover {
2852 opacity: 1;
2853 }
2854
2855 .c-color-palette__tooltip {
2856 position: absolute;
2857 bottom: 100%;
2858 left: 50%;
2859 z-index: 300;
2860 margin-bottom: 5px;
2861 padding: 4px 14px;
2862 opacity: 0;
2863 -webkit-transform: translateX(-50%);
2864 transform: translateX(-50%);
2865 transition: opacity .2s ease-out;
2866 color: white;
2867 background-color: #606A72;
2868 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
2869 }
2870
2871 .c-color-palette__tooltip:after {
2872 content: "";
2873 position: absolute;
2874 top: 100%;
2875 left: 50%;
2876 display: block;
2877 border: 5px solid transparent;
2878 border-bottom-width: 0;
2879 border-top-color: #606A72;
2880 -webkit-transform: translateX(-50%);
2881 transform: translateX(-50%);
2882 }
2883
2884 .c-color-palette__control:hover .c-color-palette__tooltip {
2885 opacity: 1;
2886 }
2887
2888 .c-color-palette__control {
2889 position: relative;
2890 cursor: pointer;
2891 }
2892
2893 input.c-color-palette__input[class] {
2894 margin-top: 1em;
2895 }
2896
2897 #customize-control-sm_toggle_advanced_settings_control {
2898 margin-bottom: 0;
2899 opacity: 0;
2900 }
2901
2902 #customize-control-sm_toggle_advanced_settings_control button {
2903 width: 100%;
2904 }
2905
2906 .sm_color_matrix {
2907 display: -ms-flexbox;
2908 display: flex;
2909 -ms-flex-wrap: wrap;
2910 flex-wrap: wrap;
2911 margin-top: -15px;
2912 margin-left: -15px;
2913 }
2914
2915 .sm_color_matrix > * {
2916 display: -ms-flexbox;
2917 display: flex;
2918 -ms-flex-wrap: wrap;
2919 flex-wrap: wrap;
2920 -ms-flex-line-pack: start;
2921 align-content: flex-start;
2922 -ms-flex: 0 0 33.33333%;
2923 flex: 0 0 33.33333%;
2924 padding-top: 15px;
2925 padding-left: 15px;
2926 }
2927
2928 .sm_color_matrix > * > * {
2929 background-color: currentColor;
2930 border-radius: 50%;
2931 border: 1px solid #ccc;
2932 -webkit-animation-duration: 0.75s;
2933 animation-duration: 0.75s;
2934 -webkit-animation-name: bounceIn;
2935 animation-name: bounceIn;
2936 }
2937
2938 .sm_color_matrix > * {
2939 display: grid;
2940 grid-auto-rows: 2px;
2941 grid-auto-columns: 2px;
2942 }
2943
2944 .sm_color_matrix > * > :nth-child(1) {
2945 grid-area: 16 / 12 / span 12 / span 12;
2946 }
2947
2948 .sm_color_matrix > * > :nth-child(2) {
2949 grid-area: 26 / 24 / span 4 / span 4;
2950 }
2951
2952 .sm_color_matrix > * > :nth-child(3) {
2953 grid-area: 13 / 24 / span 4 / span 4;
2954 }
2955
2956 .sm_color_matrix > * > :nth-child(4) {
2957 grid-area: 8 / 8 / span 8 / span 8;
2958 }
2959
2960 .sm_color_matrix > * > :nth-child(5) {
2961 grid-area: 32 / 8 / span 4 / span 4;
2962 }
2963
2964 .sm_color_matrix > * > :nth-child(6) {
2965 grid-area: 30 / 16 / span 8 / span 8;
2966 }
2967
2968 .sm_color_matrix > * > :nth-child(7) {
2969 grid-area: 4 / 20 / span 8 / span 8;
2970 }
2971
2972 .sm_color_matrix > * > :nth-child(8) {
2973 grid-area: 17 / 26 / span 8 / span 8;
2974 }
2975
2976 .sm_color_matrix > * > :nth-child(9) {
2977 grid-area: 22 / 2 / span 8 / span 8;
2978 }
2979
2980 .sm_color_matrix > * > :nth-child(10) {
2981 grid-area: 28 / 11 / span 2 / span 2;
2982 }
2983
2984 .sm_color_matrix > * > :nth-child(11) {
2985 grid-area: 9 / 31 / span 6 / span 6;
2986 }
2987
2988 .sm_color_matrix > * > :nth-child(11) {
2989 grid-area: 26 / 30 / span 9 / span 9;
2990 }
2991
2992 .sm_color_matrix > * > :nth-child(12) {
2993 grid-area: 17 / 7 / span 4 / span 4;
2994 }
2995
2996 .sm_color_matrix > * > :nth-child(13) {
2997 grid-area: 19 / 36 / span 6 / span 6;
2998 }
2999
3000 .sm_color_matrix > * > :nth-child(14) {
3001 grid-area: 12 / 18 / span 2 / span 2;
3002 }
3003
3004 @-webkit-keyframes bounceIn {
3005 0%, 20%, 40%, 60%, 80%, 100% {
3006 -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
3007 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
3008 }
3009 0% {
3010 opacity: 0;
3011 -webkit-transform: scale3d(0.3, 0.3, 0.3);
3012 transform: scale3d(0.3, 0.3, 0.3);
3013 }
3014 20% {
3015 -webkit-transform: scale3d(1.1, 1.1, 1.1);
3016 transform: scale3d(1.1, 1.1, 1.1);
3017 }
3018 40% {
3019 -webkit-transform: scale3d(0.9, 0.9, 0.9);
3020 transform: scale3d(0.9, 0.9, 0.9);
3021 }
3022 60% {
3023 opacity: 1;
3024 -webkit-transform: scale3d(1.03, 1.03, 1.03);
3025 transform: scale3d(1.03, 1.03, 1.03);
3026 }
3027 80% {
3028 -webkit-transform: scale3d(0.97, 0.97, 0.97);
3029 transform: scale3d(0.97, 0.97, 0.97);
3030 }
3031 100% {
3032 opacity: 1;
3033 -webkit-transform: scale3d(1, 1, 1);
3034 transform: scale3d(1, 1, 1);
3035 }
3036 }
3037
3038 @keyframes bounceIn {
3039 0%, 20%, 40%, 60%, 80%, 100% {
3040 -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
3041 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
3042 }
3043 0% {
3044 opacity: 0;
3045 -webkit-transform: scale3d(0.3, 0.3, 0.3);
3046 transform: scale3d(0.3, 0.3, 0.3);
3047 }
3048 20% {
3049 -webkit-transform: scale3d(1.1, 1.1, 1.1);
3050 transform: scale3d(1.1, 1.1, 1.1);
3051 }
3052 40% {
3053 -webkit-transform: scale3d(0.9, 0.9, 0.9);
3054 transform: scale3d(0.9, 0.9, 0.9);
3055 }
3056 60% {
3057 opacity: 1;
3058 -webkit-transform: scale3d(1.03, 1.03, 1.03);
3059 transform: scale3d(1.03, 1.03, 1.03);
3060 }
3061 80% {
3062 -webkit-transform: scale3d(0.97, 0.97, 0.97);
3063 transform: scale3d(0.97, 0.97, 0.97);
3064 }
3065 100% {
3066 opacity: 1;
3067 -webkit-transform: scale3d(1, 1, 1);
3068 transform: scale3d(1, 1, 1);
3069 }
3070 }
3071
3072 #customize-theme-controls #sub-accordion-panel-style_manager_panel .customize-panel-description,
3073 #customize-theme-controls #sub-accordion-panel-theme_options_panel .customize-panel-description {
3074 display: block;
3075 }
3076
3077 #customize-theme-controls li#accordion-panel-style_manager_panel h3.accordion-section-title:before {
3078 position: relative;
3079 float: right;
3080 content: "�
3081 �";
3082 color: #aed2e5;
3083 font-family: dashicons;
3084 padding: 1px;
3085 margin-right: 28px;
3086 font-size: 17px;
3087 -webkit-font-smoothing: antialiased;
3088 }
3089
3090 #customize-theme-controls li#accordion-panel-style_manager_panel h3.accordion-section-title:before {
3091 font-size: 18px;
3092 color: #f8bc30;
3093 }
3094
3095 #customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title:before {
3096 position: relative;
3097 float: right;
3098 content: "ï„€";
3099 color: #aed2e5;
3100 font-family: dashicons;
3101 padding: 1px;
3102 margin-right: 28px;
3103 font-size: 17px;
3104 -webkit-font-smoothing: antialiased;
3105 }
3106
3107 #customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title {
3108 border-top: none;
3109 }
3110
3111 #customize-theme-controls li#accordion-section-sm_font_palettes_section h3.accordion-section-title:before {
3112 position: relative;
3113 float: right;
3114 content: "ï„¢";
3115 color: #aed2e5;
3116 font-family: dashicons;
3117 padding: 1px;
3118 margin-right: 28px;
3119 font-size: 17px;
3120 -webkit-font-smoothing: antialiased;
3121 }
3122
3123 #customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title:before,
3124 #customize-theme-controls li#accordion-section-sm_font_palettes_section h3.accordion-section-title:before {
3125 padding: 3px;
3126 margin-right: 5px;
3127 margin-top: -2px;
3128 }
3129
3130 #customize-theme-controls li#accordion-panel-theme_options_panel h3.accordion-section-title:before {
3131 position: relative;
3132 float: right;
3133 content: "";
3134 color: #aed2e5;
3135 font-family: dashicons;
3136 padding: 1px;
3137 margin-right: 28px;
3138 font-size: 17px;
3139 -webkit-font-smoothing: antialiased;
3140 }
3141
3142 #customize-theme-controls li#accordion-panel-theme_options_panel h3.accordion-section-title {
3143 border-bottom: 1px solid #ddd;
3144 border-left: none;
3145 border-right: none;
3146 margin: 0 0 15px 0;
3147 }
3148
3149 #customize-theme-controls li[id$="[general]"],
3150 #customize-theme-controls li[id$="[footer_section]"] {
3151 border-bottom: 1px solid #ddd;
3152 border-left: none;
3153 border-right: none;
3154 margin: 0 0 15px 0;
3155 }
3156
3157 #customize-theme-controls li[id$="[general]"] h3.accordion-section-title {
3158 border-top: none;
3159 }
3160
3161 .color .disc {
3162 display: block;
3163 overflow: hidden;
3164 position: absolute;
3165 top: 0;
3166 right: 0;
3167 bottom: 0;
3168 left: 0;
3169 z-index: 15;
3170 border-radius: 50%;
3171 pointer-events: none;
3172 opacity: 0;
3173 transition: opacity .3s ease-in-out;
3174 }
3175
3176 .color .disc:after {
3177 content: "";
3178 -webkit-filter: blur(6px) saturate(0.7) brightness(1.1);
3179 filter: blur(6px) saturate(0.7) brightness(1.1);
3180 display: block;
3181 width: 200%;
3182 height: 200%;
3183 padding-top: 100%;
3184 position: absolute;
3185 top: -50%;
3186 left: -50%;
3187 -webkit-transform: scale(1);
3188 transform: scale(1);
3189 background-image: linear-gradient(330deg, transparent 50%, #ff8100 0), linear-gradient(300deg, transparent 50%, #ff5800 0), linear-gradient(270deg, transparent 50%, #c92323 0), linear-gradient(240deg, transparent 50%, #cc42a2 0), linear-gradient(210deg, transparent 50%, #9f49ac 0), linear-gradient(180deg, transparent 50%, #306cd3 0), linear-gradient(150deg, transparent 50%, #179067 0), linear-gradient(120deg, transparent 50%, #0eb5d6 0), linear-gradient(90deg, transparent 50%, #50b517 0), linear-gradient(60deg, transparent 50%, #ede604 0), linear-gradient(30deg, transparent 50%, #fc0 0), linear-gradient(0deg, transparent 50%, #feac00 0);
3190 background-clip: content-box,content-box,content-box,content-box,content-box,content-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box;
3191 }
3192
3193 .color.altered .disc {
3194 opacity: 1;
3195 }
3196
3197 .customize-control-color .wp-picker-container .iris-picker .iris-palette-container {
3198 display: -ms-flexbox;
3199 display: flex;
3200 width: 215px;
3201 }
3202
3203 .customize-control-color .wp-picker-container .iris-picker .iris-palette {
3204 width: auto !important;
3205 height: auto !important;
3206 -ms-flex: 1 1 0;
3207 flex: 1 1 0;
3208 float: none;
3209 }
3210
3211 .customize-control-color .wp-picker-container .iris-picker .iris-palette:after {
3212 content: "";
3213 display: block;
3214 padding-top: 100%;
3215 }
3216