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