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