Customify – A Theme Customizer Booster - Version 2.0.0

Version Description

  • Added the much improved and overall awesome Color Palettes v2.0 styling system (all modesty aside).
  • Minor improvements that are secondary to the one above. Enjoy.
Download this release

Release Info

Developer vlad.olaru
Plugin Icon Customify – A Theme Customizer Booster
Version 2.0.0
Comparing to
See all releases

Code changes from version 1.9.1 to 2.0.0

Files changed (19) hide show
  1. class-pixcustomify.php +47 -0
  2. css/admin.css +21 -31
  3. css/customizer.css +1578 -3145
  4. customify.php +2 -2
  5. features/class-Font_Selector.php +4 -1
  6. features/customizer/controls/class-Pix_Customize_SM_radio_control.php +36 -0
  7. features/customizer/controls/class-Pix_Customize_SM_switch_control.php +35 -0
  8. includes/class-customify-color-palettes.php +515 -221
  9. includes/class-customify-style-manager.php +28 -9
  10. includes/customify_theme_root.php +5 -5
  11. js/customizer.js +2 -0
  12. js/customizer/color-convert.js +0 -0
  13. js/customizer/color-palettes-variations.js +48 -4
  14. js/customizer/color-palettes.js +464 -201
  15. js/customizer/swap-values.js +0 -5
  16. readme.txt +8 -1
  17. scss/_fields.scss +271 -0
  18. scss/_theme.scss +1 -1
  19. scss/customizer.scss +233 -495
class-pixcustomify.php CHANGED
@@ -180,6 +180,11 @@ class PixCustomifyPlugin {
180
  */
181
  add_action( 'init', array( $this, 'load_plugin_textdomain' ) );
182
 
 
 
 
 
 
183
  /*
184
  * Prepare and load the configuration
185
  */
@@ -251,6 +256,25 @@ class PixCustomifyPlugin {
251
  }
252
  }
253
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
254
  /**
255
  * Initialize Configs, Options and Values methods.
256
  */
@@ -1073,6 +1097,9 @@ class PixCustomifyPlugin {
1073
 
1074
  var append_style_to_iframe = function (ifrm_id, styleElment) {
1075
  var ifrm = window.frames[ifrm_id];
 
 
 
1076
  ifrm = ( ifrm.contentDocument || ifrm.contentDocument || ifrm.document );
1077
  var head = ifrm.getElementsByTagName('head')[0];
1078
 
@@ -1807,6 +1834,26 @@ class PixCustomifyPlugin {
1807
 
1808
  $control_class_name = 'Pix_Customize_Select2_Control';
1809
  break;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1810
 
1811
  case 'preset' :
1812
  if ( ! isset( $field_config['choices'] ) || empty( $field_config['choices'] ) ) {
180
  */
181
  add_action( 'init', array( $this, 'load_plugin_textdomain' ) );
182
 
183
+ /*
184
+ * Load the upgrade logic.
185
+ */
186
+ add_action( 'admin_init', array( $this, 'upgrade' ) );
187
+
188
  /*
189
  * Prepare and load the configuration
190
  */
256
  }
257
  }
258
 
259
+ /**
260
+ * Handle the logic to upgrade between versions. It will run only one per version change.
261
+ */
262
+ public function upgrade() {
263
+ $customify_dbversion = get_option( 'customify_dbversion', '0.0.1' );
264
+ if ( $this->get_version() === $customify_dbversion ) {
265
+ return;
266
+ }
267
+
268
+ // For versions, previous of version 2.0.0 (the Color Palettes v2.0 release).
269
+ if ( version_compare( $customify_dbversion, '2.0.0', '<' ) ) {
270
+ // Delete the option holding the fact that the user offered feedback.
271
+ delete_option( 'style_manager_user_feedback_provided' );
272
+ }
273
+
274
+ // Put the current version in the database.
275
+ update_option( 'customify_dbversion', $this->get_version(), true );
276
+ }
277
+
278
  /**
279
  * Initialize Configs, Options and Values methods.
280
  */
1097
 
1098
  var append_style_to_iframe = function (ifrm_id, styleElment) {
1099
  var ifrm = window.frames[ifrm_id];
1100
+ if ( typeof ifrm === "undefined" ) {
1101
+ return;
1102
+ }
1103
  ifrm = ( ifrm.contentDocument || ifrm.contentDocument || ifrm.document );
1104
  var head = ifrm.getElementsByTagName('head')[0];
1105
 
1834
 
1835
  $control_class_name = 'Pix_Customize_Select2_Control';
1836
  break;
1837
+
1838
+ case 'sm_radio' :
1839
+ if ( ! isset( $field_config['choices'] ) || empty( $field_config['choices'] ) ) {
1840
+ return;
1841
+ }
1842
+
1843
+ $control_args['choices'] = $field_config['choices'];
1844
+
1845
+ $control_class_name = 'Pix_Customize_SM_radio_Control';
1846
+ break;
1847
+
1848
+ case 'sm_switch' :
1849
+ if ( ! isset( $field_config['choices'] ) || empty( $field_config['choices'] ) ) {
1850
+ return;
1851
+ }
1852
+
1853
+ $control_args['choices'] = $field_config['choices'];
1854
+
1855
+ $control_class_name = 'Pix_Customize_SM_switch_Control';
1856
+ break;
1857
 
1858
  case 'preset' :
1859
  if ( ! isset( $field_config['choices'] ) || empty( $field_config['choices'] ) ) {
css/admin.css CHANGED
@@ -1,38 +1,28 @@
1
- /* This stylesheet is used to style the admin option form of the plugin. */
2
- .extendable_options {
3
- height: 0;
4
- overflow: hidden;
5
- }
6
 
7
- fieldset.group {
8
- border-left: 1px solid #333;
9
- padding-left: 20px;
10
- }
11
 
12
- .postbox h3.hndle {
13
- padding: 7px;
14
- font-size: 15px;
15
- }
16
 
17
- .postbox .row {
18
- width: 100%;
19
- display: inline-block;
20
- padding: 5px 0;
21
- }
22
 
23
- .postbox .row .field {
24
- width: 100%;
25
- display: inline-block;
26
- padding: 5px 0;
27
- }
28
 
29
- .postbox .row .group {
30
- border: 1px solid rgba(203, 203, 203, 0.2);
31
- background-color: rgba(203, 203, 203, 0.2);
32
- padding-left: 15px;
33
- margin-left: 5px;
34
- }
35
 
36
- .postbox .uninstall_area {
37
- margin-top: 15px;
 
 
38
  }
1
+ .extendable_options
2
+ {overflow: hidden;
 
 
 
3
 
4
+ height: 0;
5
+ }fieldset.group
6
+ {padding-left: 20px;
 
7
 
8
+ border-left: 1px solid #333;
9
+ }.postbox h3.hndle
10
+ {font-size: 15px;
 
11
 
12
+ padding: 7px;
13
+ }.postbox .row
14
+ {display: inline-block;
 
 
15
 
16
+ width: 100%;padding: 5px 0;
17
+ }.postbox .row .field
18
+ {display: inline-block;
 
 
19
 
20
+ width: 100%;padding: 5px 0;
21
+ }.postbox .row .group
22
+ {margin-left: 5px;padding-left: 15px;
 
 
 
23
 
24
+ border: 1px solid rgba(203,203,203,.2);background-color: rgba(203,203,203,.2);
25
+ }.postbox .uninstall_area
26
+ {
27
+ margin-top: 15px;
28
  }
css/customizer.css CHANGED
@@ -1,411 +1,354 @@
1
- @charset "UTF-8";
2
- .wp-full-overlay-sidebar *, .wp-full-overlay-sidebar *:before, .wp-full-overlay-sidebar *:after {
3
- box-sizing: border-box;
4
- }
5
-
6
- .iris-picker,
7
- .iris-picker * {
8
- box-sizing: content-box;
9
- }
10
-
11
- .wp-full-overlay-sidebar-content .accordion-section-content {
12
- overflow: visible;
13
- }
14
-
15
- .control-section:not(.control-section-themes) .customize-control {
16
- padding: 0;
17
- width: 100%;
18
- min-height: initial;
19
- }
20
-
21
- #customize-header-actions #customize-save-button-wrapper {
22
- margin-top: 7px;
23
- }
24
-
25
- .wp-full-overlay-footer .devices button {
26
- float: left;
27
- border-radius: 0;
28
- }
29
-
30
- .customize-controls-close {
31
- width: 48px;
32
- height: 44px;
33
- color: #7da9c3;
34
- background: #ffffff;
35
- border-top: none;
36
- border-right-color: #e0e8ef;
37
- }
38
-
39
- .customize-controls-close:focus, .customize-controls-close:hover {
40
- background: #f5fcff;
41
- }
42
-
43
- .customize-controls-close:before {
44
- top: 0px;
45
- }
46
-
47
- #customize-controls .customize-info {
48
- border-bottom-color: #e0e8ef;
49
- }
50
-
51
- .customize-panel-back, .customize-section-back {
52
- height: 74px;
53
- color: #7da9c3;
54
- border-right-color: #e0e8ef;
55
- }
56
-
57
- .customize-panel-back:hover, .customize-panel-back:focus, .customize-section-back:hover, .customize-section-back:focus {
58
- border-left-color: #f5fcff;
59
- background: #f5fcff;
60
- }
61
-
62
- #customize-theme-controls .theme * {
63
- box-sizing: content-box;
64
- }
65
-
66
- #customize-theme-controls .accordion-section-content {
67
- padding: 17px;
68
- }
69
-
70
- #customize-theme-controls .customize-section-title {
71
- margin-top: -17px;
72
- margin-right: -17px;
73
- }
74
-
75
- #customize-theme-controls .control-panel-content .control-section:nth-child(2),
76
- #customize-theme-controls .control-panel-content .control-section:nth-child(3) {
77
- border-top: none;
78
- }
79
-
80
- #customize-theme-controls #accordion-section-add_menu {
81
- border-bottom: none;
82
- }
83
-
84
- #customize-theme-controls #accordion-section-add_menu .add-menu-toggle {
85
- float: none;
86
- }
87
-
88
- #customize-theme-controls .customize-pane-child.open {
89
- height: 100%;
90
- }
91
-
92
- #customize-controls .description {
93
- font-size: 12px;
94
- font-weight: 300;
95
- font-style: normal;
96
- line-height: 1.6;
97
- color: #4d7b90;
98
- text-indent: 0;
99
- }
100
-
101
- .customize-control-description {
102
- margin-top: 6px;
103
- }
104
-
105
- .customize-control {
106
- margin-bottom: 24px;
107
- }
108
-
109
- #accordion-section-themes + .control-section {
110
- border-top: none;
111
- }
112
-
113
- #customize-controls .panel-meta.customize-info .accordion-section-title {
114
- border-top: none;
115
- height: 74px;
116
- }
117
-
118
- .button-controls:after {
119
- content: " ";
120
- display: table;
121
- clear: both;
122
- }
123
-
124
- .wp-core-ui .button:not(.theme-details):not(.collapse-sidebar):not(.wp-color-result),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
125
  .wp-core-ui .button-primary,
126
- .wp-core-ui .button-secondary {
127
- width: auto;
128
- padding-left: 15px;
129
- padding-right: 15px;
130
- font-weight: 400;
131
- color: #F5FCFF;
132
- text-shadow: none;
133
- border: none;
134
- background: #AED2E5;
135
- box-shadow: 0px 2px 0px 0px #8DBED7;
136
- border-radius: 4px;
137
- }
138
 
139
- .wp-core-ui .button:not(.theme-details):not(.collapse-sidebar):not(.wp-color-result):hover,
 
140
  .wp-core-ui .button-primary:hover,
141
- .wp-core-ui .button-secondary:hover {
142
- color: white;
143
- text-shadow: none;
144
- background: #98C6DD;
145
- box-shadow: 0px 2px 0px 0px #74A7C2;
146
- }
147
-
148
- .wp-core-ui #customize-header-actions .button-primary {
149
- background: #73C5EE;
150
- box-shadow: 0px 2px 0px 0px #57ABD5;
151
- }
152
-
153
- .wp-core-ui #customize-header-actions .button-primary:hover {
154
- background: #58B0DD;
155
- box-shadow: 0px 2px 0px 0px #3F8AAF;
156
- }
157
-
158
- .wp-core-ui #customize-header-actions .button-primary.has-next-sibling {
159
- border-right: 1px solid #57ABD5;
160
- }
161
-
162
- .wp-core-ui #customize-header-actions .button-primary:disabled {
163
- color: white !important;
164
- background: #AED2E5 !important;
165
- opacity: 0.7;
166
- box-shadow: 0px 2px 0px 0px #8db5ca !important;
167
- }
168
-
169
- .wp-core-ui #customize-header-actions .button-primary:disabled.has-next-sibling {
170
- border-right: none;
171
- }
172
-
173
- .wp-core-ui .reset_section,
174
- .wp-core-ui .reset_panel {
175
- width: 100%;
176
- height: 4em;
177
- display: block;
178
- margin: 0px 0 25px;
179
- }
180
-
181
- .wp-core-ui .reset_panel {
182
- margin-top: 10px;
183
- }
184
-
185
- .separator.label {
186
- display: block;
187
- font-size: 14px;
188
- line-height: 24px;
189
- font-weight: 600;
190
- }
191
-
192
- .customize-control-title, .separator.label {
193
- color: #416B7E;
194
- }
195
-
196
- .separator.section:before, .separator.sub-section:before {
197
- content: "";
198
- position: absolute;
199
- top: 0;
200
- bottom: 0;
201
- left: -18px;
202
- right: -18px;
203
- z-index: -1;
204
- }
205
-
206
- .separator.label {
207
- font-weight: 500;
208
- }
209
-
210
- .separator.large {
211
- margin-top: 12px;
212
- font-size: 16px;
213
- color: #39474D;
214
- }
215
-
216
- .separator.section {
217
- position: relative;
218
- padding: 14px 0;
219
- margin-bottom: 0;
220
- background: none;
221
- border: none;
222
- }
223
-
224
- .separator.section[id*="layout"] {
225
- margin-top: 0;
226
- }
227
-
228
- .separator.section[id*="layout"]:before {
229
- border: none;
230
- }
231
-
232
- .separator.section:before {
233
- border: 1px solid #e0e8ef;
234
- background-color: #ffffff;
235
- box-shadow: 0px 1px 0px 0px #DFE8EF;
236
- }
237
-
238
- .separator.sub-section {
239
- position: relative;
240
- padding: 12px 0;
241
- }
242
-
243
- .separator.sub-section:before {
244
- border-top: 1px solid #e0e8ef;
245
- border-bottom: 1px solid #e0e8ef;
246
- background-color: #f6fbff;
247
- }
248
-
249
- .separator.sub-section + span {
250
- margin-top: 20px;
251
- font-style: normal;
252
- }
253
-
254
- .section-navigation-wrapper {
255
- position: relative;
256
- height: 43px;
257
- margin: -15px -12px 0 -12px;
258
- margin-right: -17px;
259
- margin-left: -17px;
260
- }
261
-
262
- .section-navigation {
263
- display: -ms-flexbox;
264
- display: flex;
265
- margin-top: -1px;
266
- clear: both;
267
- border-top: 1px solid #e0e8ef;
268
- }
269
-
270
- .section-navigation a {
271
- -ms-flex: 1 1 auto;
272
- flex: 1 1 auto;
273
- display: block;
274
- padding: 12px 0;
275
- color: #3b484e;
276
- background-color: #ffffff;
277
- border-bottom: 1px solid #e0e8ef;
278
- border-right: 1px solid #e0e8ef;
279
- text-align: center;
280
- text-decoration: none;
281
- transition: background-color .15s ease-in-out;
282
- }
283
-
284
- .section-navigation a:last-child {
285
- border-right: 0;
286
- }
287
-
288
- #customize-controls .customize-info.is-sticky.is-sticky,
289
- #customize-controls .customize-section-title.is-sticky.is-sticky {
290
- top: 40px;
291
- }
292
-
293
- #customize-controls .customize-info.is-in-view.is-in-view,
294
- #customize-controls .customize-section-title.is-in-view.is-in-view {
295
- box-shadow: none;
296
- }
297
-
298
- #customize-controls .has-nav .customize-info,
299
- #customize-controls .has-nav .customize-section-title {
300
- margin-right: -12px;
301
- }
302
-
303
- #customize-controls .customize-section-title.customize-section-title {
304
- border-bottom: 0;
305
- }
306
-
307
- .customize-section-description-container.section-meta.has-nav {
308
- margin-bottom: 0;
309
- }
310
-
311
- .font-options__wrapper {
312
- position: relative;
313
- }
314
-
315
- .font-options__wrapper:after {
316
- content: "";
317
- position: absolute;
318
- top: 90%;
319
- left: 0;
320
- right: 0;
321
- z-index: 0;
322
- display: block;
323
- height: 30px;
324
- }
325
-
326
- .font-options__head {
327
- display: -ms-flexbox;
328
- display: flex;
329
- -ms-flex-pack: justify;
330
- justify-content: space-between;
331
- }
332
-
333
- .font-options__head.font-options__head {
334
- -webkit-appearance: none;
335
- text-overflow: ellipsis;
336
- white-space: nowrap;
337
- }
338
-
339
- .font-options__font-title {
340
- margin-right: 26px;
341
- margin-left: 10px;
342
- font-size: 12px;
343
- line-height: 20px;
344
- font-weight: 300;
345
- color: #98c6dd;
346
- text-overflow: ellipsis;
347
- overflow: hidden;
348
- white-space: nowrap;
349
- }
350
-
351
- .font-options__options-list {
352
- position: absolute;
353
- top: calc(100% + 6px);
354
- left: -6px;
355
- right: -6px;
356
- z-index: 2;
357
- display: block;
358
- padding: 10px;
359
- border: 1px solid #dfe8ef;
360
- border-radius: 5px;
361
- background-color: #ffffff;
362
- opacity: 0;
363
- display: none;
364
- transition: opacity .15s linear;
365
- }
366
-
367
- .font-options__options-list:last-child {
368
- margin-bottom: 0;
369
- }
370
-
371
- .font-options__options-list:before, .font-options__options-list:after {
372
- content: "";
373
- position: absolute;
374
- top: -20px;
375
- right: 25px;
376
- height: 0;
377
- width: 0;
378
- border: solid transparent;
379
- z-index: 10;
380
- }
381
-
382
- .font-options__options-list:before {
383
- border-bottom-color: white;
384
- border-width: 10px;
385
- z-index: 11;
386
- }
387
-
388
- .font-options__options-list:after {
389
- border-bottom-color: rgba(0, 0, 0, 0.075);
390
- border-width: 12px;
391
- top: -24px;
392
- right: 23px;
393
- }
394
-
395
- .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap:after {
396
- content: "";
397
- position: absolute;
398
- bottom: 100%;
399
- right: 12px;
400
- border-collapse: separate;
401
- width: 0;
402
- height: 0;
403
- border-width: 0 9px 9px 9px;
404
- border-style: solid;
405
- border-color: transparent transparent #fff transparent;
406
- }
407
-
408
- .font-options__head, .wp-full-overlay-sidebar-content .customize-control input[type=text]:not(#_customize-input-wpcom_custom_css_content_width_control):not(.wp-color-picker),
409
  .wp-full-overlay-sidebar-content .customize-control input[type=checkbox],
410
  .wp-full-overlay-sidebar-content .customize-control input[type=password],
411
  .wp-full-overlay-sidebar-content .customize-control input[type=color],
@@ -423,20 +366,14 @@
423
  .wp-full-overlay-sidebar-content .customize-control input[type=search],
424
  .wp-full-overlay-sidebar-content .customize-control select,
425
  .wp-full-overlay-sidebar-content .customize-control textarea,
426
- .wp-full-overlay-sidebar-content .customize-control input[type="number"].range-value, ul.font-options__options-list .select2-container .select2-selection--single, #customize-theme-controls .select2-container .select2-selection--multiple {
427
- width: 100%;
428
- height: 44px;
429
- padding: 10px 14px;
430
- background: #FFFFFF;
431
- border: 2px solid #B8DAEB;
432
- border-radius: 4px;
433
- font-size: 14px;
434
- line-height: 1.5;
435
- color: #416B7E;
436
- outline: 0;
437
- }
438
-
439
- .font-options__head:focus, .wp-full-overlay-sidebar-content .customize-control input[type=text]:focus:not(#_customize-input-wpcom_custom_css_content_width_control):not(.wp-color-picker),
440
  .wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:focus,
441
  .wp-full-overlay-sidebar-content .customize-control input[type=password]:focus,
442
  .wp-full-overlay-sidebar-content .customize-control input[type=color]:focus,
@@ -454,2761 +391,1257 @@
454
  .wp-full-overlay-sidebar-content .customize-control input[type=search]:focus,
455
  .wp-full-overlay-sidebar-content .customize-control select:focus,
456
  .wp-full-overlay-sidebar-content .customize-control textarea:focus,
457
- .wp-full-overlay-sidebar-content .customize-control input[type="number"].range-value:focus, ul.font-options__options-list .select2-container .select2-selection--single:focus, #customize-theme-controls .select2-container .select2-selection--multiple:focus {
458
- border-color: #73C5EE;
459
- box-shadow: none;
460
- }
461
-
462
- .font-options__head, .wp-full-overlay-sidebar-content .customize-control select, ul.font-options__options-list .select2-container .select2-selection--single, #customize-theme-controls .select2-container .select2-selection--multiple {
463
- width: 100%;
464
- -webkit-appearance: button;
465
- -moz-appearance: none;
466
- font-weight: 600;
467
- background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE1cHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTUgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjU2LjAwMDAwMCwgLTM4Ni4wMDAwMDApIiBmaWxsPSIjOThDNkRFIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iVGl0bGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjAwMDAwMCwgMjE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1TZWxlY3QtQ29weSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iU2VsZWN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMjcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI1NC40ODEyLDE4IEwyNTYsMTkuNTE0IEwyNDguNSwyNyBMMjQxLDE5LjUxNCBMMjQyLjUxODgsMTggTDI0OC41LDIzLjk2NzIgTDI1NC40ODEyLDE4IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
468
- background-position: right 16px top 16px;
469
- }
470
-
471
- [multiple].font-options__head, .wp-full-overlay-sidebar-content .customize-control select[multiple], ul.font-options__options-list .select2-container [multiple].select2-selection--single, #customize-theme-controls .select2-container [multiple].select2-selection--multiple {
472
- background: white;
473
- }
474
-
475
- .wp-full-overlay-sidebar-content .customize-control input[type=text],
476
- .wp-full-overlay-sidebar-content .customize-control textarea {
477
- font-size: 13px;
478
- }
479
-
480
- .wp-full-overlay-sidebar-content .customize-control textarea {
481
- height: auto;
482
- }
483
-
484
- .wp-full-overlay-sidebar-content .customize-control input[type=checkbox],
485
- .wp-full-overlay-sidebar-content .customize-control input[type=radio] {
486
- width: 22px;
487
- height: 22px;
488
- }
489
-
490
- .wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:checked,
491
- .wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked {
492
- background: #73C5EE;
493
- border-color: #5AB9E8;
494
- }
495
-
496
- .wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:checked:before,
497
- .wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked:before {
498
- color: white;
499
- margin: -1px 0 0 -2px;
500
- }
501
-
502
- .wp-full-overlay-sidebar-content .customize-control .awesome_preset input[type=radio]:checked {
503
- background: transparent;
504
- }
505
-
506
- .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control) label:not(:only-of-type),
507
- .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control) > .customize-inside-control-row:not(:only-of-type), .wp-full-overlay-sidebar-content .customize-control.customize-control-radio label:not(:only-of-type),
508
- .wp-full-overlay-sidebar-content .customize-control.customize-control-radio > .customize-inside-control-row:not(:only-of-type) {
509
- margin-left: 30px;
510
- padding-top: 0;
511
- padding-bottom: 0;
512
- display: inline-block;
513
- width: calc(49% - 30px);
514
- text-indent: -6px;
515
- }
516
-
517
- .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control) label, .wp-full-overlay-sidebar-content .customize-control.customize-control-radio label {
518
- color: #416B7E;
519
- }
520
-
521
- [id*="divider"] + .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control), [id*="divider"] + .wp-full-overlay-sidebar-content .customize-control.customize-control-radio {
522
- margin-top: 0;
523
- }
524
-
525
- .wp-full-overlay-sidebar-content .customize-control input[type=radio] {
526
- border-radius: 50%;
527
- }
528
-
529
- .wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked:before {
530
- content: none;
531
- }
532
-
533
- .customize-control-html + .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox {
534
- margin-top: -24px;
535
- }
536
-
537
- .wp-full-overlay-sidebar-content .customize-control.customize-control-radio label,
538
- .wp-full-overlay-sidebar-content .customize-control.customize-control-radio .customize-inside-control-row {
539
- margin-top: 12px;
540
- }
541
-
542
- .wp-full-overlay-sidebar-content .customize-control.customize-control-radio#customize-control-changeset_status .customize-inside-control-row {
543
- margin-top: 0;
544
- text-indent: 0;
545
- }
546
-
547
- .wp-full-overlay-sidebar-content .customize-control input[type="range"] {
548
- width: 65%;
549
- }
550
-
551
- .wp-full-overlay-sidebar-content .customize-control input[type="range"] {
552
- position: relative;
553
- -webkit-appearance: none;
554
- width: calc(100% - 55px);
555
- height: 22px;
556
- overflow: hidden;
557
- outline: none;
558
- background: none;
559
- }
560
-
561
- .wp-full-overlay-sidebar-content .customize-control input[type="range"]:before {
562
- content: " ";
563
- position: absolute;
564
- top: 8px;
565
- left: 0;
566
- height: 6px;
567
- width: 100%;
568
- background: #DFE8EF;
569
- box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
570
- border-radius: 10px;
571
- }
572
-
573
- .wp-full-overlay-sidebar-content .customize-control input[type="range"]::-webkit-slider-thumb {
574
- -webkit-appearance: none;
575
- width: 22px;
576
- height: 22px;
577
- background: #27ae60;
578
- position: relative;
579
- z-index: 3;
580
- background: #FFFFFF;
581
- border: 2px solid #B8DAEB;
582
- border-radius: 4px;
583
- }
584
-
585
- .wp-full-overlay-sidebar-content .customize-control input[type="range"]::-webkit-slider-thumb:before {
586
- content: "..";
587
- position: absolute;
588
- left: 5px;
589
- top: -5px;
590
- color: #B8DAEB;
591
- font-size: 1em;
592
- letter-spacing: 1px;
593
- }
594
-
595
- .wp-full-overlay-sidebar-content .customize-control input[type="range"]::-webkit-slider-thumb:after {
596
- content: " ";
597
- width: calc(100% - 55px);
598
- height: 6px;
599
- position: absolute;
600
- z-index: 1;
601
- right: 20px;
602
- top: 6px;
603
- background: #73C5EE;
604
- }
605
-
606
- .wp-full-overlay-sidebar-content .customize-control input[type="number"].range-value {
607
- min-width: 40px;
608
- max-width: 80px;
609
- width: auto;
610
- height: 30px;
611
- top: -5px;
612
- float: right;
613
- padding: 4px 0px 5px 0px;
614
- margin-left: 10px;
615
- font-size: 13px;
616
- line-height: 1;
617
- text-align: center;
618
- }
619
-
620
- .wp-full-overlay-sidebar-content .customize-control input[type=number]::-webkit-inner-spin-button,
621
- .wp-full-overlay-sidebar-content .customize-control input[type=number]::-webkit-outer-spin-button {
622
- -webkit-appearance: none;
623
- margin: 0;
624
- }
625
-
626
- .customize-control-color {
627
- display: block;
628
- }
629
-
630
- .customize-control-color .customize-control-title, .customize-control-color .separator.label {
631
- float: left;
632
- }
633
-
634
- .customize-control-color .wp-picker-container {
635
- position: relative;
636
- float: right;
637
- top: -3px;
638
- }
639
-
640
- .customize-control-color .wp-picker-container .wp-picker-holder {
641
- position: relative;
642
- }
643
-
644
- .customize-control-color .wp-picker-container .wp-color-result,
645
- .customize-control-color .wp-picker-container .wp-color-result.button {
646
- top: 0;
647
- height: 30px;
648
- width: 40px;
649
- margin: 0;
650
- padding: 0;
651
- border-radius: 4px;
652
- background: #2ECC71;
653
- border: 2px solid #B8DAEB;
654
- box-shadow: none;
655
- }
656
-
657
- .customize-control-color .wp-picker-container .wp-color-result:after,
658
  .customize-control-color .wp-picker-container .wp-color-result .wp-color-result-text,
659
  .customize-control-color .wp-picker-container .wp-color-result.button:after,
660
- .customize-control-color .wp-picker-container .wp-color-result.button .wp-color-result-text {
661
- display: none;
662
- }
663
-
664
- .customize-control-color .wp-picker-container .iris-picker {
665
- position: absolute;
666
- top: 40px;
667
- right: 0;
668
- z-index: 1000;
669
- width: 275px !important;
670
- border-top: none;
671
- border-color: #DFDFDE;
672
- border-radius: 0 0 3px 3px;
673
- border: none;
674
- background: white;
675
- }
676
-
677
- .customize-control-color .wp-picker-container .iris-picker, .customize-control-color .wp-picker-container .iris-picker * {
678
- box-sizing: content-box;
679
- }
680
-
681
- .customize-control-color .wp-picker-container .iris-picker .iris-square {
682
- width: 215px !important;
683
- height: 173px !important;
684
- margin-right: 0;
685
- }
686
-
687
- .customize-control-color .wp-picker-container .iris-picker .iris-strip {
688
- float: right;
689
- box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px inset;
690
- }
691
-
692
- .customize-control-color .wp-picker-container .iris-picker .iris-strip .ui-slider-handle {
693
- border-color: #aaa !important;
694
- opacity: 1;
695
- box-shadow: none;
696
- }
697
-
698
- .customize-control-color .wp-picker-container .iris-picker .iris-palette {
699
- width: 24px !important;
700
- height: 24px !important;
701
- border-radius: 50px;
702
- box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px inset;
703
- }
704
-
705
- .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap {
706
- position: absolute;
707
- z-index: 1000;
708
- top: 35px;
709
- right: 0;
710
- width: 275px;
711
- padding: 9px 12px;
712
- background: white;
713
- border: none;
714
- border-radius: 3px 3px 0 0;
715
- }
716
-
717
- .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap input.wp-color-picker {
718
- float: left;
719
- width: 100px;
720
- font-size: 13px;
721
- text-align: left;
722
- margin: 0;
723
- padding: 6px 12px;
724
- height: auto;
725
- }
726
-
727
- .customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap input.button {
728
- float: right;
729
- padding: 4px 12px;
730
- height: 30px;
731
- }
732
-
733
- .customize-control-font:last-child {
734
- margin-bottom: 150px;
735
- }
736
-
737
- #accordion-section-live_css_edit_section .customize-section-title {
738
- margin-top: -13px;
739
- border-bottom: 1px solid #ddd;
740
- }
741
-
742
- #accordion-section-live_css_edit_section #css_editor {
743
- top: 70px;
744
- border-top: 10px solid white;
745
- overflow: visible;
746
- }
747
-
748
- #accordion-section-live_css_edit_section #css_editor:before {
749
- content: "";
750
- width: 48px;
751
- height: 10px;
752
- display: block;
753
- background: #e8e8e8;
754
- top: -10px;
755
- position: absolute;
756
- z-index: 10000000;
757
- left: 0;
758
- }
759
-
760
- #accordion-section-live_css_edit_section .ace_scroller {
761
- padding-left: 10px;
762
- }
763
-
764
- .wp-full-overlay.editor_opened {
765
- margin-left: 500px;
766
- }
767
-
768
- .wp-full-overlay.editor_opened #customize-controls {
769
- width: 500px;
770
- }
771
-
772
- .wp-full-overlay.editor_opened.collapsed #customize-controls {
773
- width: 300px;
774
- }
775
-
776
- .customize-control-media .current,
777
  .customize-control-site_icon .current,
778
- li#customize-control-site_logo .current {
779
- margin-bottom: 10px;
780
- min-height: 44px;
781
- background: #F5FCFF;
782
- border: 2px solid #B8DAEB;
783
- border-radius: 4px;
784
- }
785
-
786
- .customize-control-media .current .container, .customize-control-media .current span,
787
  .customize-control-site_icon .current .container,
788
  .customize-control-site_icon .current span,
789
  li#customize-control-site_logo .current .container,
790
- li#customize-control-site_logo .current span {
791
- border: none;
792
- }
793
-
794
- .customize-control-media .inner, .customize-control-media .current span,
795
  .customize-control-site_icon .inner,
796
  .customize-control-site_icon .current span,
797
  li#customize-control-site_logo .inner,
798
- li#customize-control-site_logo .current span {
799
- font-size: 13px;
800
- color: #98C6DD;
801
- }
802
-
803
- .customize-control-media .inner,
804
  .customize-control-site_icon .inner,
805
- li#customize-control-site_logo .inner {
806
- line-height: 1.4;
807
- }
808
-
809
- .customize-control-media .thumbnail-image,
810
  .customize-control-site_icon .thumbnail-image,
811
- li#customize-control-site_logo .thumbnail-image {
812
- padding: 14px;
813
- text-align: center;
814
- }
815
-
816
- .customize-control-media .thumbnail-image img,
817
  .customize-control-site_icon .thumbnail-image img,
818
- li#customize-control-site_logo .thumbnail-image img {
819
- width: auto;
820
- }
821
-
822
- .customize-control-media .actions,
823
  .customize-control-site_icon .actions,
824
- li#customize-control-site_logo .actions {
825
- margin-bottom: 0;
826
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
827
 
828
- .customize-control-typography select, .customize-control-typography select {
829
- margin-bottom: 10px;
830
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
831
 
832
- .customize-control-typography .description, .customize-control-typography .description {
833
- margin-top: -3px;
834
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
835
 
836
- .customize-control-typography ul li, .customize-control-typography ul li {
837
- width: 100%;
838
- margin: 0;
839
- }
840
 
841
- .default-preset-button {
842
- background-color: #F5F6F6;
843
- float: right;
844
- padding: 1px 8px;
845
- border-radius: 3px;
846
- border: 1px solid #CBCBCB;
847
- margin-right: 4px;
848
- font-family: "Open Sans",sans-serif;
849
- font-size: 13px;
850
- }
851
 
852
- .customize-control-preset .description {
853
- margin-right: 5px;
854
- font-style: normal;
855
- }
856
 
857
- .customify_preset.radio_buttons .customify_radio_button {
858
- border: none;
859
- display: inline-block;
860
- padding: 2px;
861
- margin: 3px;
862
- position: relative;
863
- overflow: hidden;
864
- height: auto;
865
- }
866
-
867
- .customify_preset.radio_buttons .customify_radio_button input[type="radio"] {
868
- opacity: 0;
869
- width: 100%;
870
- height: 100%;
871
- position: absolute;
872
- z-index: 9999;
873
- }
874
-
875
- .customify_preset.radio_buttons .customify_radio_button input[type="radio"]:checked + label {
876
- background-color: #ebebeb;
877
- }
878
-
879
- .customify_preset.radio_buttons .customify_radio_button input[type="radio"]:checked + label:before {
880
- content: '>';
881
- color: inherit;
882
- }
883
-
884
- .customify_preset.radio_buttons .customify_radio_button input[type="radio"]:checked + label:after {
885
- content: '<';
886
- color: inherit;
887
- }
888
-
889
- .customify_preset.radio_buttons .customify_radio_button input[type="radio"]:checked:before {
890
- opacity: 0;
891
- }
892
-
893
- .customify_preset.radio_buttons .customify_radio_button label {
894
- position: relative;
895
- z-index: 999;
896
- border-left: 4px solid;
897
- }
898
-
899
- .customify_preset .awesome_preset {
900
- width: 45%;
901
- position: relative;
902
- display: inline-block;
903
- text-align: center;
904
- color: white;
905
- margin-top: 5px;
906
- margin-bottom: 25px;
907
- transition: all 0.2s;
908
- }
909
-
910
- .customify_preset .awesome_preset:hover {
911
- opacity: 0.9;
912
- }
913
-
914
- .customify_preset .awesome_preset:before {
915
- content: '';
916
- position: absolute;
917
- top: 1px;
918
- left: 1px;
919
- right: 1px;
920
- bottom: 1px;
921
- border: 1px solid #FFF;
922
- background: transparent;
923
- opacity: .5;
924
- border-radius: 4px;
925
- z-index: 5;
926
- }
927
-
928
- .customify_preset .awesome_preset .preset-wrap .preset-color {
929
- height: 128px;
930
- border-radius: 4px 4px 0 0;
931
- padding: 17px 0 27px;
932
- }
933
-
934
- .customify_preset .awesome_preset .preset-wrap .preset-color .first-font {
935
- display: inline-block;
936
- width: 100%;
937
- font-size: 55px;
938
- line-height: 1;
939
- }
940
-
941
- .customify_preset .awesome_preset .preset-wrap .preset-color .secondary-font {
942
- display: inline-block;
943
- width: 100%;
944
- font-size: 20px;
945
- line-height: 1;
946
- margin-top: 8px;
947
- }
948
-
949
- .customify_preset .awesome_preset .preset-wrap .preset-name {
950
- position: relative;
951
- font-size: 11px;
952
- text-transform: UPPERCASE;
953
- border-radius: 0 0 4px 4px;
954
- padding: 1px;
955
- }
956
-
957
- .customify_preset .awesome_preset .preset-wrap .preset-name:before {
958
- content: '';
959
- position: absolute;
960
- border-color: inherit;
961
- border: 10px solid;
962
- border-left-color: transparent;
963
- border-right-color: transparent;
964
- border-top: transparent;
965
- top: -10px;
966
- border-bottom-color: inherit;
967
- left: 40%;
968
- }
969
-
970
- .customify_preset .awesome_preset:nth-child(odd) {
971
- margin-right: 7%;
972
- }
973
-
974
- .customify_preset .awesome_preset input[type=radio] {
975
- height: 100%;
976
- width: 100%;
977
- position: absolute;
978
- border: 0;
979
- box-shadow: none;
980
- color: #006505;
981
- background-color: transparent;
982
- border-radius: 0;
983
- margin: 0;
984
- display: inline-block;
985
- top: 0;
986
- left: 0;
987
- z-index: 10;
988
- }
989
-
990
- .customify_preset .awesome_preset input[type=radio]:checked:before {
991
- position: absolute;
992
- height: 25px;
993
- width: 25px;
994
- top: -13px;
995
- right: -14px;
996
- background: #FFF;
997
- z-index: 1;
998
- }
999
-
1000
- .customify_preset .awesome_preset input[type=radio]:checked:after {
1001
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
1002
- filter: alpha(opacity=0);
1003
- content: '';
1004
- position: absolute;
1005
- width: 26px;
1006
- height: 26px;
1007
- border-radius: 50%;
1008
- top: -5px;
1009
- right: -5px;
1010
- z-index: 10;
1011
- background: #73C5EE url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzcHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTMgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgLTQwOC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1DaGVja2JveC1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNy4wMDAwMDAsIDI0OS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IkNoZWNrYm94IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMzAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuMDM4NDk1LDE2IEwxNy4xMTYxMzc1LDguOTIxNDg3NiBMMTUuMTk0NjQ5OCw3IEwxMC4wMzg0OTUsMTIuMTU1MDY3NCBMNi45MjE0ODc2LDkuMDM4OTI5OTcgTDUsMTAuOTYwNDE3NiBMMTAuMDM4NDk1LDE2IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
1012
- background-position: center center;
1013
- }
1014
-
1015
- .customify_radio_image {
1016
- display: inline-block;
1017
- }
1018
-
1019
- .customify_radio_image label {
1020
- display: block;
1021
- float: left;
1022
- margin-right: 10px;
1023
- position: relative;
1024
- }
1025
-
1026
- .customify_radio_image label input[type=radio] {
1027
- position: absolute;
1028
- top: 0;
1029
- bottom: 0;
1030
- left: 0;
1031
- right: 0;
1032
- width: 100%;
1033
- height: 100%;
1034
- visibility: hidden;
1035
- }
1036
-
1037
- .customify_radio_image label input[type=radio] img {
1038
- cursor: pointer;
1039
- border: 2px solid transparent;
1040
- }
1041
-
1042
- .customify_radio_image label input[type=radio]:checked + img {
1043
- border: 3px solid #73C5EE;
1044
- }
1045
-
1046
- .customify_ace_editor {
1047
- display: block;
1048
- min-height: 200px;
1049
- border: 1px solid #ddd;
1050
- }
1051
-
1052
- .customize-control-custom_background .hide {
1053
- display: none;
1054
- }
1055
-
1056
- .customize-control-custom_background .upload_button_div {
1057
- margin: 10px 0;
1058
- }
1059
-
1060
- .customize-control-custom_background .upload_button_div > * {
1061
- margin-right: 10px;
1062
- }
1063
-
1064
- .customize-control-custom_background .preview_screenshot {
1065
- text-align: center;
1066
- margin: 10px 0;
1067
- }
1068
-
1069
- .customize-control-custom_background .preview_screenshot img {
1070
- border: 2px solid #ccc;
1071
- }
1072
-
1073
- #customify_import_demo_data_button {
1074
- width: 70%;
1075
- text-align: center;
1076
- padding: 10px;
1077
- display: inline-block;
1078
- height: auto;
1079
- margin: 0 15% 10% 15%;
1080
- }
1081
-
1082
- .import_step_note {
1083
- margin: 5px;
1084
- width: 100%;
1085
- display: inline-block;
1086
- }
1087
-
1088
- .import_step_note:before {
1089
- content: "\1F449";
1090
- }
1091
-
1092
- .import_step_note.success:before {
1093
- content: "\1F44D";
1094
- }
1095
-
1096
- .import_step_note.failed:before {
1097
- content: "\274C";
1098
- }
1099
-
1100
- #customize-header-actions {
1101
- background: #ffffff;
1102
- border-color: #e0e8ef;
1103
- }
1104
-
1105
- .wp-full-overlay-sidebar,
1106
- .customize-themes-panel,
1107
- #customize-sidebar-outer-content {
1108
- background: #eaf9fe;
1109
- border-right: 1px solid #e0e8ef;
1110
- }
1111
-
1112
- .outer-section-open #customize-controls .wp-full-overlay-sidebar-content,
1113
- .attachment-media-view, .media-widget-preview.media_audio, .media-widget-preview.media_image {
1114
- background: #eaf9fe;
1115
- }
1116
-
1117
- #customize-theme-controls #accordion-section-menu_locations {
1118
- border-bottom: 1px solid #e0e8ef;
1119
- }
1120
-
1121
- #customize-controls #accordion-section-themes > .accordion-section-title {
1122
- font-weight: 600;
1123
- border-bottom: 1px solid #e0e8ef;
1124
- }
1125
-
1126
- #customize-controls #accordion-section-themes > .accordion-section-title:hover {
1127
- background: #fff;
1128
- }
1129
-
1130
- #customize-controls .panel-meta.customize-info {
1131
- border-bottom-color: #e0e8ef;
1132
- }
1133
-
1134
- #customize-theme-controls .control-section .accordion-section-title {
1135
- font-weight: 400;
1136
- border-top: 1px solid #e0e8ef;
1137
- border-bottom: none;
1138
- }
1139
-
1140
- #customize-theme-controls .control-section:last-of-type > .accordion-section-title {
1141
- border-bottom: 1px solid #e0e8ef;
1142
- }
1143
-
1144
- #customize-theme-controls .customize-section-title {
1145
- border-top: 1px solid #e0e8ef;
1146
- border-bottom: 1px solid #e0e8ef;
1147
- }
1148
-
1149
- #customize-controls .control-section .accordion-section-title:focus, #customize-controls .control-section .accordion-section-title:hover, #customize-controls .control-section.open .accordion-section-title, #customize-controls .control-section:hover > .accordion-section-title {
1150
- color: #056184;
1151
- background: #f5fcff;
1152
- border-left-color: #f5fcff;
1153
- }
1154
-
1155
- .wp-customizer {
1156
- /* SECTION: NAV MENUS */
1157
- }
1158
-
1159
- .wp-customizer .menu-item-edit-active .menu-item-handle, .wp-customizer .section-open .menu-item-settings, .wp-customizer .menu-item-bar .menu-item-handle:hover {
1160
- border-color: #e0e8ef;
1161
- }
1162
-
1163
- .wp-customizer .section-open .menu-item-settings {
1164
- background: #f5fcff;
1165
- }
1166
-
1167
- .wp-customizer .control-section-nav_menu .menu-location-settings {
1168
- border-top-color: #e0e8ef !important;
1169
- }
1170
-
1171
- [data-balloon] {
1172
- position: relative;
1173
- }
1174
-
1175
- [data-balloon]::before {
1176
- opacity: 0;
1177
- pointer-events: none;
1178
- transition: all .18s ease-out;
1179
- background: rgba(17, 17, 17, 0.9);
1180
- border-radius: 4px;
1181
- color: #fff;
1182
- content: attr(data-balloon);
1183
- font-size: 12px;
1184
- padding: .5em 1em;
1185
- position: absolute;
1186
- white-space: nowrap;
1187
- z-index: 10;
1188
- }
1189
-
1190
- [data-balloon]::after {
1191
- background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(0)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1192
- background-size: 100% auto;
1193
- width: 18px;
1194
- height: 6px;
1195
- opacity: 0;
1196
- pointer-events: none;
1197
- transition: all .18s ease-out;
1198
- content: '';
1199
- position: absolute;
1200
- z-index: 10;
1201
- }
1202
-
1203
- [data-balloon]:hover::before, [data-balloon]:hover::after {
1204
- opacity: 1;
1205
- pointer-events: auto;
1206
- }
1207
-
1208
- [data-balloon][data-balloon-pos="up"]::before {
1209
- bottom: 100%;
1210
- left: 50%;
1211
- margin-bottom: 11px;
1212
- -webkit-transform: translate3d(-50%, 10px, 0);
1213
- transform: translate3d(-50%, 10px, 0);
1214
- -webkit-transform-origin: top;
1215
- transform-origin: top;
1216
- }
1217
-
1218
- [data-balloon][data-balloon-pos="up"]::after {
1219
- bottom: 100%;
1220
- left: 50%;
1221
- margin-bottom: 5px;
1222
- -webkit-transform: translate3d(-50%, 10px, 0);
1223
- transform: translate3d(-50%, 10px, 0);
1224
- -webkit-transform-origin: top;
1225
- transform-origin: top;
1226
- }
1227
-
1228
- [data-balloon][data-balloon-pos="up"]:hover::before {
1229
- -webkit-transform: translate3d(-50%, 0, 0);
1230
- transform: translate3d(-50%, 0, 0);
1231
- }
1232
-
1233
- [data-balloon][data-balloon-pos="up"]:hover::after {
1234
- -webkit-transform: translate3d(-50%, 0, 0);
1235
- transform: translate3d(-50%, 0, 0);
1236
- }
1237
-
1238
- [data-balloon][data-balloon-pos='down']::before {
1239
- left: 50%;
1240
- margin-top: 11px;
1241
- top: 100%;
1242
- -webkit-transform: translate3d(-50%, -10px, 0);
1243
- transform: translate3d(-50%, -10px, 0);
1244
- }
1245
-
1246
- [data-balloon][data-balloon-pos='down']::after {
1247
- background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(180 18 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1248
- background-size: 100% auto;
1249
- width: 18px;
1250
- height: 6px;
1251
- left: 50%;
1252
- margin-top: 5px;
1253
- top: 100%;
1254
- -webkit-transform: translate3d(-50%, -10px, 0);
1255
- transform: translate3d(-50%, -10px, 0);
1256
- }
1257
-
1258
- [data-balloon][data-balloon-pos='down']:hover::before {
1259
- -webkit-transform: translate3d(-50%, 0, 0);
1260
- transform: translate3d(-50%, 0, 0);
1261
- }
1262
-
1263
- [data-balloon][data-balloon-pos='down']:hover::after {
1264
- -webkit-transform: translate3d(-50%, 0, 0);
1265
- transform: translate3d(-50%, 0, 0);
1266
- }
1267
-
1268
- [data-balloon][data-balloon-pos='left']::before {
1269
- margin-right: 11px;
1270
- right: 100%;
1271
- top: 50%;
1272
- -webkit-transform: translate3d(10px, -50%, 0);
1273
- transform: translate3d(10px, -50%, 0);
1274
- }
1275
-
1276
- [data-balloon][data-balloon-pos='left']::after {
1277
- background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(-90 18 18)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1278
- background-size: 100% auto;
1279
- width: 6px;
1280
- height: 18px;
1281
- margin-right: 5px;
1282
- right: 100%;
1283
- top: 50%;
1284
- -webkit-transform: translate3d(10px, -50%, 0);
1285
- transform: translate3d(10px, -50%, 0);
1286
- }
1287
-
1288
- [data-balloon][data-balloon-pos='left']:hover::before {
1289
- -webkit-transform: translate3d(0, -50%, 0);
1290
- transform: translate3d(0, -50%, 0);
1291
- }
1292
-
1293
- [data-balloon][data-balloon-pos='left']:hover::after {
1294
- -webkit-transform: translate3d(0, -50%, 0);
1295
- transform: translate3d(0, -50%, 0);
1296
- }
1297
-
1298
- [data-balloon][data-balloon-pos='right']::before {
1299
- left: 100%;
1300
- margin-left: 11px;
1301
- top: 50%;
1302
- -webkit-transform: translate3d(-10px, -50%, 0);
1303
- transform: translate3d(-10px, -50%, 0);
1304
- }
1305
-
1306
- [data-balloon][data-balloon-pos='right']::after {
1307
- background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(90 6 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
1308
- background-size: 100% auto;
1309
- width: 6px;
1310
- height: 18px;
1311
- left: 100%;
1312
- margin-left: 5px;
1313
- top: 50%;
1314
- -webkit-transform: translate3d(-10px, -50%, 0);
1315
- transform: translate3d(-10px, -50%, 0);
1316
- }
1317
-
1318
- [data-balloon][data-balloon-pos='right']:hover::before {
1319
- -webkit-transform: translate3d(0, -50%, 0);
1320
- transform: translate3d(0, -50%, 0);
1321
- }
1322
-
1323
- [data-balloon][data-balloon-pos='right']:hover::after {
1324
- -webkit-transform: translate3d(0, -50%, 0);
1325
- transform: translate3d(0, -50%, 0);
1326
- }
1327
-
1328
- [data-balloon][data-balloon-length='small']::before {
1329
- white-space: normal;
1330
- width: 80px;
1331
- }
1332
-
1333
- [data-balloon][data-balloon-length='medium']::before {
1334
- white-space: normal;
1335
- width: 150px;
1336
- }
1337
-
1338
- [data-balloon][data-balloon-length='large']::before {
1339
- white-space: normal;
1340
- width: 260px;
1341
- }
1342
-
1343
- [data-balloon][data-balloon-length='xlarge']::before {
1344
- white-space: normal;
1345
- width: 380px;
1346
- }
1347
-
1348
- @media screen and (max-width: 768px) {
1349
- [data-balloon][data-balloon-length='xlarge']::before {
1350
- white-space: normal;
1351
- width: 90vw;
1352
- }
1353
- }
1354
-
1355
- [data-balloon][data-balloon-length='fit']::before {
1356
- white-space: normal;
1357
- width: 100%;
1358
- }
1359
-
1360
- /* ==========================================================================
1361
- #FEEDBACK MODAL
1362
- ========================================================================== */
1363
- body.modal-open {
1364
- overflow: hidden;
1365
- }
1366
-
1367
- body.modal-open #style-manager-user-feedback-modal .modal {
1368
- overflow-x: hidden;
1369
- overflow-y: auto;
1370
- visibility: visible;
1371
- opacity: 1;
1372
- -webkit-transform: translate(0, 0);
1373
- transform: translate(0, 0);
1374
- }
1375
-
1376
- #style-manager-user-feedback-modal {
1377
- height: 100%;
1378
- }
1379
-
1380
- #style-manager-user-feedback-modal .modal {
1381
- position: relative;
1382
- height: 100%;
1383
- display: -ms-flexbox;
1384
- display: flex;
1385
- -ms-flex-align: center;
1386
- align-items: center;
1387
- top: 0;
1388
- right: 0;
1389
- bottom: 0;
1390
- left: 0;
1391
- z-index: 1050;
1392
- opacity: 0;
1393
- visibility: hidden;
1394
- overflow: hidden;
1395
- outline: 0;
1396
- transition: all .3s ease;
1397
- -webkit-transform: translate(0, -10%);
1398
- transform: translate(0, -10%);
1399
- font-family: 'Galano Grotesque Alt', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1400
- font-weight: 400;
1401
- font-size: 16px;
1402
- line-height: 1.7;
1403
- }
1404
-
1405
- #style-manager-user-feedback-modal .modal-dialog {
1406
- position: relative;
1407
- width: auto;
1408
- margin: 10px;
1409
- text-align: left;
1410
- }
1411
-
1412
- #style-manager-user-feedback-modal .modal-content {
1413
- position: relative;
1414
- display: -ms-flexbox;
1415
- display: flex;
1416
- -ms-flex-direction: column;
1417
- flex-direction: column;
1418
- background-color: #fff;
1419
- background-clip: padding-box;
1420
- border: none;
1421
- border-radius: 4px;
1422
- box-shadow: 0 4px 4px 0 rgba(42, 54, 52, 0.1), 0 8px 8px 0 rgba(42, 54, 52, 0.1), 0 16px 16px 0 rgba(42, 54, 52, 0.1), 0 16px 32px 0 rgba(42, 54, 52, 0.1), 0 32px 64px 0 rgba(42, 54, 52, 0.1), 0 64px 128px 0 rgba(42, 54, 52, 0.1);
1423
- outline: 0;
1424
- }
1425
-
1426
- #style-manager-user-feedback-modal .modal-content p {
1427
- color: #000;
1428
- }
1429
-
1430
- #style-manager-user-feedback-modal .modal-content p a {
1431
- font-weight: 500;
1432
- color: #9660C6;
1433
- border-bottom: 1px solid #9660C6;
1434
- }
1435
-
1436
- #style-manager-user-feedback-modal .modal-content > form {
1437
- margin-bottom: 20px;
1438
- }
1439
-
1440
- #style-manager-user-feedback-modal .modal-backdrop {
1441
- position: fixed;
1442
- top: 0;
1443
- right: 0;
1444
- bottom: 0;
1445
- left: 0;
1446
- z-index: 1040;
1447
- background-color: #000;
1448
- opacity: 0;
1449
- visibility: hidden;
1450
- transition: all 0.3s ease;
1451
- }
1452
-
1453
- .modal-open #style-manager-user-feedback-modal .modal-backdrop {
1454
- opacity: 0.8;
1455
- visibility: visible;
1456
- }
1457
-
1458
- #style-manager-user-feedback-modal .modal-header {
1459
- display: -ms-flexbox;
1460
- display: flex;
1461
- -ms-flex-align: start;
1462
- align-items: flex-start;
1463
- -ms-flex-pack: justify;
1464
- justify-content: space-between;
1465
- padding: 30px 48px 10px 48px;
1466
- }
1467
-
1468
- #style-manager-user-feedback-modal .modal-header .close.button {
1469
- top: -10px;
1470
- }
1471
-
1472
- #style-manager-user-feedback-modal .modal-header .close.icon {
1473
- opacity: 0.5;
1474
- }
1475
-
1476
- #style-manager-user-feedback-modal .modal-header .close:hover {
1477
- opacity: 1;
1478
- }
1479
-
1480
- #style-manager-user-feedback-modal .modal-title {
1481
- margin-bottom: 10px;
1482
- line-height: 1.5;
1483
- }
1484
-
1485
- #style-manager-user-feedback-modal .modal-title.modal-title--small {
1486
- font-weight: 500;
1487
- }
1488
-
1489
- #style-manager-user-feedback-modal .modal-body {
1490
- position: relative;
1491
- -ms-flex: 1 1 auto;
1492
- flex: 1 1 auto;
1493
- padding: 30px 30px 0 30px;
1494
- }
1495
-
1496
- #style-manager-user-feedback-modal .modal-body.full {
1497
- padding: 0;
1498
- }
1499
-
1500
- #style-manager-user-feedback-modal .modal-body.full .box {
1501
- padding-top: 0;
1502
- padding-bottom: 0;
1503
- margin-top: 0;
1504
- }
1505
-
1506
- #style-manager-user-feedback-modal .modal-body.full + .modal-footer.full .box {
1507
- padding-top: 18px;
1508
- }
1509
-
1510
- #style-manager-user-feedback-modal .modal-footer {
1511
- padding: 30px;
1512
- text-align: center;
1513
- }
1514
-
1515
- #style-manager-user-feedback-modal .modal-footer .box .button:last-child {
1516
- margin-bottom: 0;
1517
- }
1518
-
1519
- #style-manager-user-feedback-modal .modal-footer.full {
1520
- padding: 0;
1521
- }
1522
-
1523
- #style-manager-user-feedback-modal .modal-scrollbar-measure {
1524
- position: absolute;
1525
- top: -9999px;
1526
- width: 50px;
1527
- height: 50px;
1528
- overflow: scroll;
1529
- }
1530
-
1531
- #style-manager-user-feedback-modal .modal-state {
1532
- display: none;
1533
- }
1534
-
1535
- #style-manager-user-feedback-modal .modal-state:checked + .modal {
1536
- opacity: 1;
1537
- visibility: visible;
1538
- }
1539
-
1540
- #style-manager-user-feedback-modal .modal-state:checked + .modal .modal__inner {
1541
- top: 0;
1542
- }
1543
-
1544
- @media (min-width: 576px) {
1545
- #style-manager-user-feedback-modal .modal-dialog {
1546
- max-width: 655px;
1547
- margin: 30px auto;
1548
- }
1549
- #style-manager-user-feedback-modal .modal-sm {
1550
- max-width: 300px;
1551
- }
1552
- }
1553
-
1554
- @media (min-width: 576px) {
1555
- #style-manager-user-feedback-modal .modal-lg {
1556
- max-width: 800px;
1557
- }
1558
- }
1559
-
1560
- #style-manager-user-feedback .modal-body .box {
1561
- position: relative;
1562
- -ms-flex-direction: column;
1563
- flex-direction: column;
1564
- display: -ms-flexbox;
1565
- display: flex;
1566
- -ms-flex-wrap: nowrap;
1567
- flex-wrap: nowrap;
1568
- -ms-flex-align: center;
1569
- align-items: center;
1570
- margin: 20px 0;
1571
- padding: 16px 52px;
1572
- border-radius: 4px;
1573
- }
1574
-
1575
- #style-manager-user-feedback .modal-body .box > * {
1576
- width: 100%;
1577
- }
1578
-
1579
- #style-manager-user-feedback .modal-body p {
1580
- font-size: 16px;
1581
- margin-bottom: 20px;
1582
- }
1583
-
1584
- #style-manager-user-feedback .modal-body textarea {
1585
- width: 100%;
1586
- margin: 0;
1587
- padding: 11px 18px;
1588
- border: 1px solid #dddddd;
1589
- border-radius: 4px;
1590
- box-shadow: none;
1591
- font-family: 'Galano Grotesque Alt', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1592
- font-size: 16px;
1593
- line-height: 26px;
1594
- color: #473850;
1595
- }
1596
-
1597
- #style-manager-user-feedback .modal-title {
1598
- margin-top: 0;
1599
- margin-bottom: 34px;
1600
- font-family: 'Galano Classic', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1601
- font-weight: 600;
1602
- font-size: 28px;
1603
- line-height: 1.4;
1604
- text-align: center;
1605
- }
1606
-
1607
- #style-manager-user-feedback .button {
1608
- text-decoration: none;
1609
- cursor: pointer;
1610
- -webkit-font-smoothing: antialiased;
1611
- position: relative;
1612
- transition-duration: .2s;
1613
- transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
1614
- transition-property: -webkit-transform,background,background-color,color,box-shadow;
1615
- transition-property: transform,background,background-color,color,box-shadow;
1616
- display: inline-block;
1617
- padding: 15px 50px;
1618
- border-radius: 2px;
1619
- font-family: "Galano Classic", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1620
- font-size: 16px;
1621
- line-height: 23px;
1622
- font-weight: 600;
1623
- text-align: center;
1624
- background-color: #9660c6;
1625
- color: #ffffff;
1626
- border-radius: 4px;
1627
- box-shadow: none;
1628
- height: auto;
1629
- width: 100%;
1630
- margin-top: 20px;
1631
- }
1632
-
1633
- #style-manager-user-feedback .button:hover {
1634
- background-color: #9660c6;
1635
- color: #ffffff;
1636
- -webkit-transform: scale(1.05) translateY(-3px);
1637
- transform: scale(1.05) translateY(-3px);
1638
- box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.7);
1639
- }
1640
-
1641
- #style-manager-user-feedback .second-step {
1642
- margin-top: 18px;
1643
- }
1644
-
1645
- #style-manager-user-feedback .thanks-step,
1646
- #style-manager-user-feedback .error-step {
1647
- text-align: center;
1648
- }
1649
-
1650
- #style-manager-user-feedback .thanks-step .modal-title,
1651
- #style-manager-user-feedback .error-step .modal-title {
1652
- margin-bottom: 0;
1653
- }
1654
-
1655
- #style-manager-user-feedback .thanks-step p:last-child,
1656
- #style-manager-user-feedback .error-step p:last-child {
1657
- margin-bottom: 10px;
1658
- }
1659
-
1660
- .scorecard {
1661
- display: -ms-flexbox;
1662
- display: flex;
1663
- -ms-flex-align: baseline;
1664
- align-items: baseline;
1665
- -ms-flex-pack: space-evenly;
1666
- justify-content: space-evenly;
1667
- color: #9660C6;
1668
- font-family: "Galano Classic", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
1669
- font-size: 18px;
1670
- font-weight: 600;
1671
- text-align: center;
1672
- }
1673
-
1674
- .scorecard > label {
1675
- font-size: 20px;
1676
- }
1677
-
1678
- .scorecard > label span {
1679
- display: block;
1680
- width: 46px;
1681
- border: 2px solid #9660C6;
1682
- line-height: 46px;
1683
- border-radius: 100%;
1684
- background: #FFF;
1685
- transition: all 0.25s ease;
1686
- }
1687
-
1688
- .scorecard > label input[type="radio"] {
1689
- display: none;
1690
- }
1691
-
1692
- .scorecard > label span:hover,
1693
- .scorecard > label input[type="radio"]:checked ~ span {
1694
- background: #9660C6;
1695
- color: #FFF;
1696
- }
1697
-
1698
- .font-options__wrapper .font-options__options-list {
1699
- border-color: #B8DAEB;
1700
- box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
1701
- }
1702
-
1703
- .font-options__wrapper .font-options__option {
1704
- margin-bottom: 12px;
1705
- }
1706
-
1707
- .font-options__wrapper .font-options__option label {
1708
- display: block;
1709
- margin-bottom: 6px;
1710
- }
1711
-
1712
- .font-options__wrapper [type=checkbox]:checked ~ .font-options__options-list {
1713
- opacity: 1;
1714
- display: block;
1715
- }
1716
-
1717
- input.customify_font_tooltip {
1718
- display: none;
1719
- }
1720
-
1721
- ul.font-options__options-list .select2-container {
1722
- width: 100% !important;
1723
- }
1724
-
1725
- ul.font-options__options-list .select2-container .select2-selection--single {
1726
- -webkit-appearance: initial;
1727
- }
1728
-
1729
- ul.font-options__options-list .select2-container .select2-selection--single .select2-selection__arrow {
1730
- display: none;
1731
- }
1732
-
1733
- ul.font-options__options-list .select2-container--default .select2-selection--single .select2-selection__rendered {
1734
- color: inherit;
1735
- line-height: initial;
1736
- }
1737
-
1738
- .select2-container.select2-container--open {
1739
- z-index: 99999999;
1740
- }
1741
-
1742
- #customize-theme-controls .select2-container {
1743
- width: 100% !important;
1744
- }
1745
-
1746
- #customize-theme-controls .select2-container .select2-selection--multiple {
1747
- -webkit-appearance: initial;
1748
- padding: 4px 8px 4px;
1749
- height: auto;
1750
- background: none;
1751
- }
1752
-
1753
- #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__arrow {
1754
- display: none;
1755
- }
1756
-
1757
- #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered {
1758
- padding: 0;
1759
- display: -ms-flexbox;
1760
- display: flex;
1761
- }
1762
-
1763
- #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search--inline {
1764
- -ms-flex: 1;
1765
- flex: 1;
1766
- }
1767
-
1768
- #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search--inline .select2-search__field[class] {
1769
- min-width: 100%;
1770
- border-width: 0;
1771
- margin-top: 3px !important;
1772
- }
1773
-
1774
- #customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
1775
- padding: 3px 7px;
1776
- margin-right: 6px;
1777
- margin-top: 0px;
1778
- border-color: #e0e8ef;
1779
- background-color: #f6fbff;
1780
- }
1781
-
1782
- #customize-theme-controls .select2-container .select2-search--inline .select2-search__field {
1783
- height: 29px;
1784
- min-width: 9em;
1785
- margin-top: 0;
1786
- }
1787
-
1788
- .select2-container--default .select2-results__option[aria-selected=true][class] {
1789
- background: transparent;
1790
- opacity: 0.3;
1791
- pointer-events: none;
1792
- }
1793
-
1794
- .select2-container .select2-dropdown {
1795
- border-color: #e0e8ef;
1796
- }
1797
-
1798
- #customize-theme-controls .widget-content .accordion-container {
1799
- margin-left: -10px;
1800
- margin-right: -10px;
1801
- margin-top: 20px;
1802
- margin-bottom: 10px;
1803
- }
1804
-
1805
- #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content {
1806
- position: relative;
1807
- left: 0;
1808
- max-height: 0;
1809
- padding-top: 0;
1810
- padding-bottom: 0;
1811
- overflow: hidden;
1812
- transition: all .4s ease;
1813
- color: #416B7E;
1814
- }
1815
-
1816
- #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content p:first-child {
1817
- margin-top: 0;
1818
- }
1819
-
1820
- #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content p:last-child {
1821
- margin-bottom: 0;
1822
- }
1823
-
1824
- #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-title {
1825
- color: #39474D;
1826
- }
1827
-
1828
- #customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-title:after {
1829
- content: "\f142";
1830
- -webkit-transform: rotate(180deg);
1831
- transform: rotate(180deg);
1832
- }
1833
-
1834
- #customize-theme-controls .widget-content .accordion-container .accordion-section.open {
1835
- border-bottom: none;
1836
- }
1837
-
1838
- #customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-content {
1839
- max-height: 100%;
1840
- padding-top: 17px;
1841
- padding-bottom: 17px;
1842
- }
1843
-
1844
- #customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-title {
1845
- border-bottom: 1px solid;
1846
- }
1847
-
1848
- #customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-title:after {
1849
- -webkit-transform: rotate(0deg);
1850
- transform: rotate(0deg);
1851
- }
1852
-
1853
- #customize-theme-controls .widget-content .accordion-container label.customize-control-title, #customize-theme-controls .widget-content .accordion-container label.separator.label {
1854
- cursor: default;
1855
- }
1856
-
1857
- .widget .widget-content > p input[type=checkbox],
1858
- .widget .widget-content > p input[type=radio] {
1859
- margin-bottom: 3px;
1860
- margin-top: 3px;
1861
- }
1862
-
1863
- .widget .widget-content small {
1864
- margin-top: 5px;
1865
- display: block;
1866
- }
1867
-
1868
- #available-widgets [class*=pixelgrade] .widget .widget-title:before,
1869
- #available-widgets [class*=featured-posts] .widget .widget-title:before,
1870
- #available-widgets [class*=categories-image-grid] .widget .widget-title:before {
1871
- content: "\f538";
1872
- color: #9660c6;
1873
- }
1874
-
1875
- #available-widgets [class*=pixelgrade-featured-posts-slideshow] .widget .widget-title:before {
1876
- content: "\f233";
1877
- }
1878
-
1879
- #available-widgets [class*=pixelgrade-featured-posts-carousel] .widget .widget-title:before {
1880
- content: "\f169";
1881
- }
1882
-
1883
- #available-widgets [class*=featured-posts-grid] .widget .widget-title:before {
1884
- content: "\f180";
1885
- }
1886
-
1887
- #available-widgets [class*=featured-posts-list] .widget .widget-title:before {
1888
- content: "\f164";
1889
- }
1890
-
1891
- #available-widgets [class*=categories-image-grid] .widget .widget-title:before {
1892
- content: "\f163";
1893
- }
1894
-
1895
- #available-widgets [class*=pixelgrade-promo-box] .widget .widget-title:before {
1896
- content: "\f488";
1897
- }
1898
-
1899
- .ui-tooltip {
1900
- z-index: 999999;
1901
- }
1902
-
1903
- .wp-customizer .widget-conditional .condition-control:after {
1904
- content: " ";
1905
- display: table;
1906
- clear: both;
1907
- }
1908
-
1909
- .wp-customizer .widget-conditional .selection {
1910
- padding-right: 50px;
1911
- padding-left: 28px;
1912
- padding-bottom: 19px;
1913
- margin-left: 0;
1914
- margin-right: 0;
1915
- margin-bottom: 10px;
1916
- border-bottom: 1px solid #cbcfd4;
1917
- }
1918
-
1919
- .wp-customizer .widget-conditional .condition:last-child .selection {
1920
- border: 0;
1921
- }
1922
-
1923
- .wp-customizer .widget-conditional select {
1924
- max-width: 100%;
1925
- width: 170px;
1926
- }
1927
-
1928
- .wp-customizer .widget-conditional .condition-top select {
1929
- width: 130px;
1930
- }
1931
-
1932
- .pix_customizer_setting .customize-inside-control-row {
1933
- position: relative;
1934
- width: 100% !important;
1935
- margin-left: 0 !important;
1936
- text-indent: 0 !important;
1937
- background-size: cover;
1938
- background-position: 50% 50%;
1939
- height: 64px;
1940
- border-radius: 5px;
1941
- overflow: hidden;
1942
- }
1943
-
1944
- .pix_customizer_setting .customize-inside-control-row:before {
1945
- content: '';
1946
- position: absolute;
1947
- top: 0;
1948
- bottom: 0;
1949
- left: 0;
1950
- right: 0;
1951
- z-index: 10;
1952
- pointer-events: none;
1953
- box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15), inset 0 1px 3px 0 rgba(0, 0, 0, 0.15);
1954
- }
1955
-
1956
- .pix_customizer_setting .customize-inside-control-row:hover:before {
1957
- box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.15), inset 0 0 3px 0 rgba(0, 0, 0, 0.15);
1958
- }
1959
-
1960
- .pix_customizer_setting .customize-inside-control-row:hover .palette__item {
1961
- -webkit-transform: translateY(0%);
1962
- transform: translateY(0%);
1963
- }
1964
-
1965
- .pix_customizer_setting .customize-inside-control-row:hover label {
1966
- left: 10px;
1967
- }
1968
-
1969
- .pix_customizer_setting .customize-inside-control-row input {
1970
- opacity: 0;
1971
- }
1972
-
1973
- .pix_customizer_setting .customize-inside-control-row input:checked + label .preview__letter--checked {
1974
- display: inline-block;
1975
- vertical-align: middle;
1976
- }
1977
-
1978
- .pix_customizer_setting .customize-inside-control-row input:checked + label .preview__letter {
1979
- display: none;
1980
- }
1981
-
1982
- .pix_customizer_setting .customize-inside-control-row label {
1983
- position: absolute;
1984
- display: -ms-flexbox;
1985
- display: flex;
1986
- z-index: 2;
1987
- width: 100%;
1988
- height: 100%;
1989
- top: 0;
1990
- left: 0;
1991
- padding: 0 10px;
1992
- margin-top: 0 !important;
1993
- -ms-flex-align: center;
1994
- align-items: center;
1995
- transition: all .3s ease;
1996
- }
1997
-
1998
- .pix_customizer_setting .customize-inside-control-row .palette {
1999
- position: absolute;
2000
- display: -ms-flexbox;
2001
- display: flex;
2002
- top: 0;
2003
- left: 0;
2004
- z-index: 1;
2005
- width: 100%;
2006
- height: 100%;
2007
- transition: all .2s ease;
2008
- }
2009
-
2010
- .pix_customizer_setting .customize-inside-control-row .palette__item {
2011
- -ms-flex: 1;
2012
- flex: 1;
2013
- -webkit-transform: translateY(100%);
2014
- transform: translateY(100%);
2015
- transition: all .3s ease;
2016
- }
2017
-
2018
- .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(1) {
2019
- transition-delay: 0s;
2020
- }
2021
-
2022
- .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(2) {
2023
- transition-delay: 0.05s;
2024
- }
2025
-
2026
- .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(3) {
2027
- transition-delay: 0.1s;
2028
- }
2029
-
2030
- .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(4) {
2031
- transition-delay: 0.15s;
2032
- }
2033
-
2034
- .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(5) {
2035
- transition-delay: 0.2s;
2036
- }
2037
-
2038
- .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(6) {
2039
- transition-delay: 0.25s;
2040
- }
2041
-
2042
- .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(7) {
2043
- transition-delay: 0.3s;
2044
- }
2045
-
2046
- .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(8) {
2047
- transition-delay: 0.35s;
2048
- }
2049
-
2050
- .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(9) {
2051
- transition-delay: 0.4s;
2052
- }
2053
-
2054
- .pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(10) {
2055
- transition-delay: 0.45s;
2056
- }
2057
-
2058
- .pix_customizer_setting .customize-inside-control-row .preview__letter,
2059
- .pix_customizer_setting .customize-inside-control-row .preview__letter--checked {
2060
- display: inline-block;
2061
- padding: 3px;
2062
- border-radius: 2px;
2063
- color: white;
2064
- margin-right: 5px;
2065
- min-height: 26px;
2066
- min-width: 26px;
2067
- text-align: center;
2068
- background-position: center center;
2069
- background-repeat: no-repeat;
2070
- background-size: 15px 15px;
2071
- font-style: normal;
2072
- vertical-align: baseline;
2073
- }
2074
-
2075
- .pix_customizer_setting .customize-inside-control-row .preview__letter--checked {
2076
- display: none;
2077
- }
2078
-
2079
- [id*="sm_current_color_palette_control"] .customize-inside-control-row .palette__item[class] {
2080
- -webkit-transform: none;
2081
- transform: none;
2082
- }
2083
-
2084
- [id*="sm_current_color_palette_control"] .variation-control {
2085
- display: -ms-flexbox;
2086
- display: flex;
2087
- }
2088
-
2089
- [id="customize-control-sm_color_primary_control"],
2090
- [id="customize-control-sm_dark_primary_control"],
2091
- [id="customize-control-sm_light_primary_control"],
2092
- [id="customize-control-sm_color_secondary_control"],
2093
- [id="customize-control-sm_dark_secondary_control"],
2094
- [id="customize-control-sm_light_secondary_control"],
2095
- [id="customize-control-sm_color_tertiary_control"],
2096
- [id="customize-control-sm_dark_tertiary_control"],
2097
- [id="customize-control-sm_light_tertiary_control"] {
2098
- visibility: hidden;
2099
- }
2100
-
2101
- [id="customize-control-sm_color_primary_control"] > span,
2102
- [id="customize-control-sm_dark_primary_control"] > span,
2103
- [id="customize-control-sm_light_primary_control"] > span,
2104
- [id="customize-control-sm_color_secondary_control"] > span,
2105
- [id="customize-control-sm_dark_secondary_control"] > span,
2106
- [id="customize-control-sm_light_secondary_control"] > span,
2107
- [id="customize-control-sm_color_tertiary_control"] > span,
2108
- [id="customize-control-sm_dark_tertiary_control"] > span,
2109
- [id="customize-control-sm_light_tertiary_control"] > span {
2110
- display: none;
2111
- }
2112
-
2113
- [id="customize-control-sm_color_primary_control"] .wp-picker-input-wrap,
2114
- [id="customize-control-sm_color_primary_control"] .wp-picker-holder,
2115
- [id="customize-control-sm_dark_primary_control"] .wp-picker-input-wrap,
2116
- [id="customize-control-sm_dark_primary_control"] .wp-picker-holder,
2117
- [id="customize-control-sm_light_primary_control"] .wp-picker-input-wrap,
2118
- [id="customize-control-sm_light_primary_control"] .wp-picker-holder,
2119
- [id="customize-control-sm_color_secondary_control"] .wp-picker-input-wrap,
2120
- [id="customize-control-sm_color_secondary_control"] .wp-picker-holder,
2121
- [id="customize-control-sm_dark_secondary_control"] .wp-picker-input-wrap,
2122
- [id="customize-control-sm_dark_secondary_control"] .wp-picker-holder,
2123
- [id="customize-control-sm_light_secondary_control"] .wp-picker-input-wrap,
2124
- [id="customize-control-sm_light_secondary_control"] .wp-picker-holder,
2125
- [id="customize-control-sm_color_tertiary_control"] .wp-picker-input-wrap,
2126
- [id="customize-control-sm_color_tertiary_control"] .wp-picker-holder,
2127
- [id="customize-control-sm_dark_tertiary_control"] .wp-picker-input-wrap,
2128
- [id="customize-control-sm_dark_tertiary_control"] .wp-picker-holder,
2129
- [id="customize-control-sm_light_tertiary_control"] .wp-picker-input-wrap,
2130
- [id="customize-control-sm_light_tertiary_control"] .wp-picker-holder {
2131
- visibility: visible;
2132
- }
2133
-
2134
- [id="customize-control-sm_color_primary_control"] .wp-picker-container,
2135
- [id="customize-control-sm_dark_primary_control"] .wp-picker-container,
2136
- [id="customize-control-sm_light_primary_control"] .wp-picker-container,
2137
- [id="customize-control-sm_color_secondary_control"] .wp-picker-container,
2138
- [id="customize-control-sm_dark_secondary_control"] .wp-picker-container,
2139
- [id="customize-control-sm_light_secondary_control"] .wp-picker-container,
2140
- [id="customize-control-sm_color_tertiary_control"] .wp-picker-container,
2141
- [id="customize-control-sm_dark_tertiary_control"] .wp-picker-container,
2142
- [id="customize-control-sm_light_tertiary_control"] .wp-picker-container {
2143
- width: 100%;
2144
- float: left;
2145
- }
2146
-
2147
- [id="customize-control-sm_color_primary_control"] .wp-picker-container button:before,
2148
- [id="customize-control-sm_dark_primary_control"] .wp-picker-container button:before,
2149
- [id="customize-control-sm_light_primary_control"] .wp-picker-container button:before,
2150
- [id="customize-control-sm_color_secondary_control"] .wp-picker-container button:before,
2151
- [id="customize-control-sm_dark_secondary_control"] .wp-picker-container button:before,
2152
- [id="customize-control-sm_light_secondary_control"] .wp-picker-container button:before,
2153
- [id="customize-control-sm_color_tertiary_control"] .wp-picker-container button:before,
2154
- [id="customize-control-sm_dark_tertiary_control"] .wp-picker-container button:before,
2155
- [id="customize-control-sm_light_tertiary_control"] .wp-picker-container button:before {
2156
- content: "";
2157
- position: relative;
2158
- display: block;
2159
- visibility: visible;
2160
- background-color: inherit;
2161
- width: 90px;
2162
- height: 90px;
2163
- border-radius: 50%;
2164
- border: 3px solid #DDD;
2165
- }
2166
-
2167
- #customize-control-sm_color_palette_control ~ [id*="sm_color_secondary"] .wp-picker-container button:before {
2168
- top: -54px;
2169
- right: -70px;
2170
- }
2171
-
2172
- #customize-control-sm_color_palette_control ~ [id*="sm_color_tertiary"] .wp-picker-container button:before {
2173
- top: -108px;
2174
- right: -140px;
2175
- }
2176
-
2177
- #customize-control-sm_color_palette_control ~ [id*="sm_dark_primary"] .wp-picker-container button:before {
2178
- top: -54px;
2179
- }
2180
-
2181
- #customize-control-sm_color_palette_control ~ [id*="sm_dark_secondary"] .wp-picker-container button:before {
2182
- top: -108px;
2183
- right: -70px;
2184
- }
2185
-
2186
- #customize-control-sm_color_palette_control ~ [id*="sm_dark_tertiary"] .wp-picker-container button:before {
2187
- top: -162px;
2188
- right: -140px;
2189
- }
2190
-
2191
- #customize-control-sm_color_palette_control ~ [id*="sm_light_primary"] .wp-picker-container button:before {
2192
- top: -108px;
2193
- }
2194
-
2195
- #customize-control-sm_color_palette_control ~ [id*="sm_light_secondary"] .wp-picker-container button:before {
2196
- top: -162px;
2197
- right: -70px;
2198
- }
2199
-
2200
- #customize-control-sm_color_palette_control ~ [id*="sm_light_tertiary"] .wp-picker-container button:before {
2201
- top: -216px;
2202
- right: -140px;
2203
- }
2204
-
2205
- .c-color-palette {
2206
- position: relative;
2207
- }
2208
-
2209
- .c-color-palette .c-color-palette__label {
2210
- -ms-flex-positive: 1;
2211
- flex-grow: 1;
2212
- }
2213
-
2214
- .c-color-palette:after {
2215
- height: 64px;
2216
- border-radius: 5px;
2217
- }
2218
-
2219
- .c-color-palette:after {
2220
- content: "";
2221
- display: block;
2222
- position: absolute;
2223
- top: 0;
2224
- left: 0;
2225
- right: 0;
2226
- box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15), inset 0 1px 3px 0 rgba(0, 0, 0, 0.15);
2227
- pointer-events: none;
2228
- }
2229
-
2230
- .label__inner {
2231
- color: #000000;
2232
- background: #F5F6F1;
2233
- padding: 7px 12px 7px 7px;
2234
- z-index: 2;
2235
- border-radius: 3px;
2236
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
2237
- }
2238
-
2239
- .c-color-palette__label {
2240
- display: -ms-flexbox;
2241
- display: flex;
2242
- -ms-flex-align: center;
2243
- align-items: center;
2244
- height: 40px;
2245
- padding: 12px;
2246
- color: black;
2247
- background: white;
2248
- }
2249
-
2250
- .colors {
2251
- position: relative;
2252
- display: -ms-flexbox;
2253
- display: flex;
2254
- -ms-flex-align: stretch;
2255
- align-items: stretch;
2256
- width: 100%;
2257
- }
2258
-
2259
- .fill {
2260
- position: relative;
2261
- height: 64px;
2262
- margin-bottom: 1em;
2263
- }
2264
-
2265
- .c-color-palette__overlay {
2266
- position: absolute;
2267
- top: 0;
2268
- left: 0;
2269
- right: 0;
2270
- height: 64px;
2271
- display: -ms-flexbox;
2272
- display: flex;
2273
- -ms-flex-align: center;
2274
- align-items: center;
2275
- }
2276
-
2277
- .fill:before {
2278
- position: absolute;
2279
- top: 0;
2280
- left: 0;
2281
- right: 0;
2282
- bottom: 0;
2283
- }
2284
-
2285
- .fill:before {
2286
- content: "";
2287
- background: currentColor;
2288
- }
2289
-
2290
- .picker {
2291
- position: relative;
2292
- top: 0;
2293
- left: 50%;
2294
- width: 80%;
2295
- max-width: 3em;
2296
- margin-top: auto;
2297
- margin-bottom: auto;
2298
- border-radius: 50%;
2299
- -webkit-transform: translate3d(-50%, 0, 0);
2300
- transform: translate3d(-50%, 0, 0);
2301
- }
2302
-
2303
- .colors.next .picker > i {
2304
- display: block;
2305
- position: absolute;
2306
- top: 0;
2307
- right: 0;
2308
- bottom: 0;
2309
- left: 0;
2310
- border-radius: 50%;
2311
- box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15), inset 0 1px 3px 0 rgba(0, 0, 0, 0.15);
2312
- pointer-events: none;
2313
- z-index: 20;
2314
- }
2315
-
2316
- .picker:before,
2317
- .picker:after {
2318
- content: "";
2319
- display: block;
2320
- background: currentColor;
2321
- border-radius: 50%;
2322
- }
2323
-
2324
- .picker:before {
2325
- padding-top: 100%;
2326
- }
2327
-
2328
- .picker:after {
2329
- position: absolute;
2330
- top: 0;
2331
- left: 0;
2332
- width: 100%;
2333
- height: 100%;
2334
- }
2335
-
2336
- .fill {
2337
- overflow: hidden;
2338
- }
2339
-
2340
- .color:first-child .fill {
2341
- border-top-left-radius: 5px;
2342
- border-bottom-left-radius: 5px;
2343
- }
2344
-
2345
- .color:last-child .fill {
2346
- border-top-right-radius: 5px;
2347
- border-bottom-right-radius: 5px;
2348
- }
2349
-
2350
- .colors.next {
2351
- position: absolute;
2352
- top: 0;
2353
- left: 0;
2354
- }
2355
-
2356
- .colors.next .fill:before {
2357
- -webkit-transform: translateY(-100%);
2358
- transform: translateY(-100%);
2359
- }
2360
-
2361
- .colors.next .picker:before {
2362
- -webkit-transform: translateY(-100%);
2363
- transform: translateY(-100%);
2364
- opacity: 0;
2365
- }
2366
-
2367
- .colors.next .picker:after {
2368
- opacity: 0;
2369
- }
2370
-
2371
- .c-color-palette.animate .next .fill:before {
2372
- -webkit-animation: fill 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2373
- animation: fill 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2374
- }
2375
-
2376
- .c-color-palette.animate .next .picker {
2377
- -webkit-animation: picker-filter 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2378
- animation: picker-filter 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2379
- }
2380
-
2381
- .c-color-palette.animate .next .picker:before {
2382
- -webkit-animation: fill-picker-before 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2383
- animation: fill-picker-before 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2384
- }
2385
-
2386
- .c-color-palette.animate .next .picker:after {
2387
- -webkit-animation: fill-picker-after 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2388
- animation: fill-picker-after 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
2389
- }
2390
-
2391
- .c-color-palette.animate .current .fill,
2392
- .c-color-palette.animate .current .picker {
2393
- -webkit-animation: fade-out 1s forwards;
2394
- animation: fade-out 1s forwards;
2395
- }
2396
-
2397
- .c-color-palette.animate .color:nth-child(1) .fill,
2398
- .c-color-palette.animate .color:nth-child(1) .fill:before,
2399
- .c-color-palette.animate .color:nth-child(1) .picker,
2400
- .c-color-palette.animate .color:nth-child(1) .picker:after,
2401
- .c-color-palette.animate .color:nth-child(1) .picker:before {
2402
- -webkit-animation-delay: 0.1s;
2403
- animation-delay: 0.1s;
2404
- }
2405
-
2406
- .c-color-palette.animate .color:nth-child(2) .fill,
2407
- .c-color-palette.animate .color:nth-child(2) .fill:before,
2408
- .c-color-palette.animate .color:nth-child(2) .picker,
2409
- .c-color-palette.animate .color:nth-child(2) .picker:after,
2410
- .c-color-palette.animate .color:nth-child(2) .picker:before {
2411
- -webkit-animation-delay: 0.05s;
2412
- animation-delay: 0.05s;
2413
- }
2414
-
2415
- .c-color-palette.animate .color:nth-child(3) .fill,
2416
- .c-color-palette.animate .color:nth-child(3) .fill:before,
2417
- .c-color-palette.animate .color:nth-child(3) .picker,
2418
- .c-color-palette.animate .color:nth-child(3) .picker:after,
2419
- .c-color-palette.animate .color:nth-child(3) .picker:before {
2420
- -webkit-animation-delay: 0.25s;
2421
- animation-delay: 0.25s;
2422
- }
2423
-
2424
- .c-color-palette.animate .color:nth-child(4) .fill,
2425
- .c-color-palette.animate .color:nth-child(4) .fill:before,
2426
- .c-color-palette.animate .color:nth-child(4) .picker,
2427
- .c-color-palette.animate .color:nth-child(4) .picker:after,
2428
- .c-color-palette.animate .color:nth-child(4) .picker:before {
2429
- -webkit-animation-delay: 0.45s;
2430
- animation-delay: 0.45s;
2431
- }
2432
-
2433
- .c-color-palette.animate .color:nth-child(5) .fill,
2434
- .c-color-palette.animate .color:nth-child(5) .fill:before,
2435
- .c-color-palette.animate .color:nth-child(5) .picker,
2436
- .c-color-palette.animate .color:nth-child(5) .picker:after,
2437
- .c-color-palette.animate .color:nth-child(5) .picker:before {
2438
- -webkit-animation-delay: 0.2s;
2439
- animation-delay: 0.2s;
2440
- }
2441
-
2442
- .c-color-palette.animate .color:nth-child(6) .fill,
2443
- .c-color-palette.animate .color:nth-child(6) .fill:before,
2444
- .c-color-palette.animate .color:nth-child(6) .picker,
2445
- .c-color-palette.animate .color:nth-child(6) .picker:after,
2446
- .c-color-palette.animate .color:nth-child(6) .picker:before {
2447
- -webkit-animation-delay: 0.4s;
2448
- animation-delay: 0.4s;
2449
- }
2450
-
2451
- .c-color-palette.animate .color:nth-child(7) .fill,
2452
- .c-color-palette.animate .color:nth-child(7) .fill:before,
2453
- .c-color-palette.animate .color:nth-child(7) .picker,
2454
- .c-color-palette.animate .color:nth-child(7) .picker:after,
2455
- .c-color-palette.animate .color:nth-child(7) .picker:before {
2456
- -webkit-animation-delay: 0.35s;
2457
- animation-delay: 0.35s;
2458
- }
2459
-
2460
- .c-color-palette.animate .color:nth-child(8) .fill,
2461
- .c-color-palette.animate .color:nth-child(8) .fill:before,
2462
- .c-color-palette.animate .color:nth-child(8) .picker,
2463
- .c-color-palette.animate .color:nth-child(8) .picker:after,
2464
- .c-color-palette.animate .color:nth-child(8) .picker:before {
2465
- -webkit-animation-delay: 0.3s;
2466
- animation-delay: 0.3s;
2467
- }
2468
-
2469
- .c-color-palette.animate .color:nth-child(9) .fill,
2470
- .c-color-palette.animate .color:nth-child(9) .fill:before,
2471
- .c-color-palette.animate .color:nth-child(9) .picker,
2472
- .c-color-palette.animate .color:nth-child(9) .picker:after,
2473
- .c-color-palette.animate .color:nth-child(9) .picker:before {
2474
- -webkit-animation-delay: 0.15s;
2475
- animation-delay: 0.15s;
2476
- }
2477
-
2478
- @-webkit-keyframes fill {
2479
- 30% {
2480
- -webkit-transform: translateY(0);
2481
- transform: translateY(0);
2482
- }
2483
- 100% {
2484
- -webkit-transform: translateY(0);
2485
- transform: translateY(0);
2486
- }
2487
- }
2488
-
2489
- @keyframes fill {
2490
- 30% {
2491
- -webkit-transform: translateY(0);
2492
- transform: translateY(0);
2493
- }
2494
- 100% {
2495
- -webkit-transform: translateY(0);
2496
- transform: translateY(0);
2497
- }
2498
- }
2499
-
2500
- @-webkit-keyframes picker-filter {
2501
- 0% {
2502
- -webkit-filter: none;
2503
- filter: none;
2504
- }
2505
- 1% {
2506
- -webkit-filter: url("#goo");
2507
- filter: url("#goo");
2508
- }
2509
- 99% {
2510
- -webkit-filter: url("#goo");
2511
- filter: url("#goo");
2512
- }
2513
- 100% {
2514
- -webkit-filter: none;
2515
- filter: none;
2516
- }
2517
- }
2518
-
2519
- @keyframes picker-filter {
2520
- 0% {
2521
- -webkit-filter: none;
2522
- filter: none;
2523
- }
2524
- 1% {
2525
- -webkit-filter: url("#goo");
2526
- filter: url("#goo");
2527
- }
2528
- 99% {
2529
- -webkit-filter: url("#goo");
2530
- filter: url("#goo");
2531
- }
2532
- 100% {
2533
- -webkit-filter: none;
2534
- filter: none;
2535
- }
2536
- }
2537
-
2538
- @-webkit-keyframes fill-picker-before {
2539
- 24% {
2540
- opacity: 0;
2541
- -webkit-transform: translateY(-130%);
2542
- transform: translateY(-130%);
2543
- }
2544
- 25% {
2545
- opacity: 1;
2546
- -webkit-transform: translateY(-130%);
2547
- transform: translateY(-130%);
2548
- }
2549
- 32% {
2550
- opacity: 1;
2551
- -webkit-transform: translateY(-130%);
2552
- transform: translateY(-130%);
2553
- }
2554
- 52% {
2555
- opacity: 1;
2556
- -webkit-transform: translateY(-130%);
2557
- transform: translateY(-130%);
2558
- }
2559
- 99% {
2560
- opacity: 1;
2561
- -webkit-transform: translateY(-160%);
2562
- transform: translateY(-160%);
2563
- }
2564
- 100% {
2565
- opacity: 0;
2566
- -webkit-transform: translateY(-160%);
2567
- transform: translateY(-160%);
2568
- }
2569
- }
2570
-
2571
- @keyframes fill-picker-before {
2572
- 24% {
2573
- opacity: 0;
2574
- -webkit-transform: translateY(-130%);
2575
- transform: translateY(-130%);
2576
- }
2577
- 25% {
2578
- opacity: 1;
2579
- -webkit-transform: translateY(-130%);
2580
- transform: translateY(-130%);
2581
- }
2582
- 32% {
2583
- opacity: 1;
2584
- -webkit-transform: translateY(-130%);
2585
- transform: translateY(-130%);
2586
- }
2587
- 52% {
2588
- opacity: 1;
2589
- -webkit-transform: translateY(-130%);
2590
- transform: translateY(-130%);
2591
- }
2592
- 99% {
2593
- opacity: 1;
2594
- -webkit-transform: translateY(-160%);
2595
- transform: translateY(-160%);
2596
- }
2597
- 100% {
2598
- opacity: 0;
2599
- -webkit-transform: translateY(-160%);
2600
- transform: translateY(-160%);
2601
- }
2602
- }
2603
 
2604
- @-webkit-keyframes fill-picker-after {
2605
- 24% {
2606
- opacity: 0;
2607
- -webkit-transform: translateY(-160%);
2608
- transform: translateY(-160%);
2609
- }
2610
- 25% {
2611
- opacity: 1;
2612
- -webkit-transform: translateY(-160%);
2613
- transform: translateY(-160%);
2614
- }
2615
- 32% {
2616
- opacity: 1;
2617
- -webkit-transform: translateY(-120%);
2618
- transform: translateY(-120%);
2619
- }
2620
- 100% {
2621
- opacity: 1;
2622
- -webkit-transform: translateY(0);
2623
- transform: translateY(0);
2624
- }
2625
- }
2626
 
2627
- @keyframes fill-picker-after {
2628
- 24% {
2629
- opacity: 0;
2630
- -webkit-transform: translateY(-160%);
2631
- transform: translateY(-160%);
2632
- }
2633
- 25% {
2634
- opacity: 1;
2635
- -webkit-transform: translateY(-160%);
2636
- transform: translateY(-160%);
2637
- }
2638
- 32% {
2639
- opacity: 1;
2640
- -webkit-transform: translateY(-120%);
2641
- transform: translateY(-120%);
2642
- }
2643
- 100% {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2644
  opacity: 1;
2645
- -webkit-transform: translateY(0);
2646
- transform: translateY(0);
2647
- }
2648
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2649
 
2650
- @-webkit-keyframes fade-out {
2651
- 90% {
2652
  opacity: 1;
2653
- }
2654
- 100% {
2655
- opacity: 0;
2656
- }
2657
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2658
 
2659
- @keyframes fade-out {
2660
- 90% {
2661
  opacity: 1;
2662
- }
2663
- 100% {
2664
- opacity: 0;
2665
- }
2666
- }
2667
-
2668
- .label {
2669
- margin-right: auto;
2670
- }
2671
-
2672
- .c-color-palette__blur {
2673
- display: none;
2674
- }
2675
-
2676
- #customize-theme-controls [id*="sm_current_color_palette_control"] {
2677
- display: block;
2678
- margin: -12px -12px 19px;
2679
- width: auto;
2680
- }
2681
-
2682
- #customize-theme-controls [id*="sm_current_color_palette_control"] .color-palette-container {
2683
- padding: 19px;
2684
- background: white;
2685
- }
2686
-
2687
- #customize-theme-controls [id*="sm_current_color_palette_control"] .color-palette-container .description {
2688
- margin-bottom: 15px;
2689
- }
2690
-
2691
- #customize-theme-controls [id*="sm_current_color_palette_control"] .description.c-color-palette__notification {
2692
- padding-top: 19px;
2693
- margin-bottom: 0;
2694
- font-size: inherit;
2695
- font-weight: bold;
2696
- }
2697
-
2698
- .c-color-palette__name {
2699
- margin-right: auto;
2700
- }
2701
-
2702
- .c-color-palette__control {
2703
- width: 2em;
2704
- height: 2em;
2705
- margin-left: 0.25em;
2706
- display: -ms-flexbox;
2707
- display: flex;
2708
- -ms-flex-pack: center;
2709
- justify-content: center;
2710
- -ms-flex-align: center;
2711
- align-items: center;
2712
- border-radius: 50%;
2713
- }
2714
-
2715
- .c-color-palette__control, .c-color-palette__control span {
2716
- transition: color .3s ease-in-out;
2717
- }
2718
-
2719
- .c-color-palette__control span {
2720
- color: rgba(0, 0, 0, 0.25);
2721
- -webkit-transform: scale(0.8);
2722
- transform: scale(0.8);
2723
- }
2724
-
2725
- .c-color-palette__control.active {
2726
- background: currentColor;
2727
- }
2728
-
2729
- .c-color-palette__control.active span {
2730
- color: white;
2731
- }
2732
-
2733
- #sub-accordion-section-sm_color_palettes_section {
2734
- display: -ms-flexbox !important;
2735
- display: flex !important;
2736
- -ms-flex-direction: column;
2737
- flex-direction: column;
2738
- padding: 12px 0 0 !important;
2739
- overflow: hidden;
2740
- }
2741
-
2742
- #sub-accordion-section-sm_color_palettes_section > * {
2743
- display: block !important;
2744
- -ms-flex-positive: 0;
2745
- flex-grow: 0;
2746
- padding: 0 12px;
2747
- }
2748
-
2749
- #sub-accordion-section-sm_color_palettes_section #customize-control-sm_color_palette_control {
2750
- -ms-flex-negative: 0;
2751
- flex-shrink: 0;
2752
- -ms-flex-positive: 1;
2753
- flex-grow: 1;
2754
- overflow-y: scroll;
2755
- margin-top: -19px;
2756
- padding-top: 19px;
2757
- margin-bottom: 0;
2758
- }
2759
-
2760
- #sub-accordion-section-sm_color_palettes_section:not(.advanced) #customize-control-sm_color_palette_control ~ li:not([id="customize-control-sm_toggle_advanced_settings_control"]) {
2761
- display: none !important;
2762
- }
2763
-
2764
- #sub-accordion-section-sm_color_palettes_section.advanced #customize-control-sm_color_palette_control {
2765
- display: none !important;
2766
- }
2767
-
2768
- .c-color-palette .iris-picker {
2769
- position: absolute;
2770
- top: 100%;
2771
- left: 0;
2772
- z-index: 100;
2773
- margin-top: 1em;
2774
- border: 0;
2775
- box-shadow: black 0 3px 12px -4px;
2776
- }
2777
-
2778
- .c-color-palette .iris-picker .iris-square-handle {
2779
- border-color: transparent;
2780
- left: -6px;
2781
- top: -6px;
2782
- }
2783
-
2784
- .c-color-palette .iris-picker .iris-square-handle:after {
2785
- position: absolute;
2786
- bottom: 0;
2787
- right: 0;
2788
- left: 0;
2789
- top: 0;
2790
- border: 2px solid white;
2791
- }
2792
-
2793
- .c-color-palette .iris-picker .iris-square-value {
2794
- box-shadow: none !important;
2795
- }
2796
-
2797
- .color {
2798
- display: -ms-flexbox;
2799
- display: flex;
2800
- -ms-flex-direction: column;
2801
- flex-direction: column;
2802
- -ms-flex: 1 1 0;
2803
- flex: 1 1 0;
2804
- overflow: hidden;
2805
- }
2806
-
2807
- .c-color-palette.animate .color {
2808
- transition: -ms-flex-positive 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
2809
- transition: flex-grow 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
2810
- }
2811
-
2812
- .c-color-palette.animate .color.hidden {
2813
- transition: -ms-flex-positive 0.3s cubic-bezier(0.6, -1, 0.74, 0.05);
2814
- transition: flex-grow 0.3s cubic-bezier(0.6, -1, 0.74, 0.05);
2815
- }
2816
-
2817
- .color.hidden {
2818
- display: -ms-flexbox;
2819
- display: flex;
2820
- -ms-flex-positive: 0;
2821
- flex-grow: 0;
2822
- }
2823
-
2824
- .color.hidden .picker {
2825
- opacity: 0;
2826
- transition: opacity .2s ease-out;
2827
- }
2828
-
2829
- .color .picker {
2830
- border: 2px solid transparent;
2831
- transition: opacity .3s ease-in-out, border-color .3s ease-in-out;
2832
- cursor: pointer;
2833
- }
2834
-
2835
- .color .picker i {
2836
- transition: box-shadow .3s ease-in-out;
2837
- }
2838
-
2839
- .color.inactive .picker {
2840
- opacity: 0.2;
2841
- }
2842
-
2843
- .color.active .picker {
2844
- border-color: #73C5EE;
2845
- }
2846
-
2847
- .colors .color.active i {
2848
- box-shadow: inset 0 0 3px 0 transparent, inset 0 1px 3px 0 transparent;
2849
- }
2850
-
2851
- .color.inactive .picker:hover {
2852
- opacity: 1;
2853
- }
2854
-
2855
- .c-color-palette__tooltip {
2856
- position: absolute;
2857
- bottom: 100%;
2858
- left: 50%;
2859
- z-index: 300;
2860
- margin-bottom: 5px;
2861
- padding: 4px 14px;
2862
- opacity: 0;
2863
- -webkit-transform: translateX(-50%);
2864
- transform: translateX(-50%);
2865
- transition: opacity .2s ease-out;
2866
- color: white;
2867
- background-color: #606A72;
2868
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
2869
- }
2870
-
2871
- .c-color-palette__tooltip:after {
2872
- content: "";
2873
- position: absolute;
2874
- top: 100%;
2875
- left: 50%;
2876
- display: block;
2877
- border: 5px solid transparent;
2878
- border-bottom-width: 0;
2879
- border-top-color: #606A72;
2880
- -webkit-transform: translateX(-50%);
2881
- transform: translateX(-50%);
2882
- }
2883
-
2884
- .c-color-palette__control:hover .c-color-palette__tooltip {
2885
- opacity: 1;
2886
- }
2887
-
2888
- .c-color-palette__control {
2889
- position: relative;
2890
- cursor: pointer;
2891
- }
2892
-
2893
- input.c-color-palette__input[class] {
2894
- margin-top: 1em;
2895
- }
2896
-
2897
- #customize-control-sm_toggle_advanced_settings_control {
2898
- margin-bottom: 0;
2899
- opacity: 0;
2900
- }
2901
-
2902
- #customize-control-sm_toggle_advanced_settings_control button {
2903
- width: 100%;
2904
- }
2905
-
2906
- .sm_color_matrix {
2907
- display: -ms-flexbox;
2908
- display: flex;
2909
- -ms-flex-wrap: wrap;
2910
- flex-wrap: wrap;
2911
- margin-top: -15px;
2912
- margin-left: -15px;
2913
- }
2914
-
2915
- .sm_color_matrix > * {
2916
- display: -ms-flexbox;
2917
- display: flex;
2918
- -ms-flex-wrap: wrap;
2919
- flex-wrap: wrap;
2920
- -ms-flex-line-pack: start;
2921
- align-content: flex-start;
2922
- -ms-flex: 0 0 33.33333%;
2923
- flex: 0 0 33.33333%;
2924
- padding-top: 15px;
2925
- padding-left: 15px;
2926
- }
2927
-
2928
- .sm_color_matrix > * > * {
2929
- background-color: currentColor;
2930
- border-radius: 50%;
2931
- border: 1px solid #ccc;
2932
- -webkit-animation-duration: 0.75s;
2933
- animation-duration: 0.75s;
2934
- -webkit-animation-name: bounceIn;
2935
- animation-name: bounceIn;
2936
- }
2937
-
2938
- .sm_color_matrix > * {
2939
- display: grid;
2940
- grid-auto-rows: 2px;
2941
- grid-auto-columns: 2px;
2942
- }
2943
-
2944
- .sm_color_matrix > * > :nth-child(1) {
2945
- grid-area: 16 / 12 / span 12 / span 12;
2946
- }
2947
-
2948
- .sm_color_matrix > * > :nth-child(2) {
2949
- grid-area: 26 / 24 / span 4 / span 4;
2950
- }
2951
-
2952
- .sm_color_matrix > * > :nth-child(3) {
2953
- grid-area: 13 / 24 / span 4 / span 4;
2954
- }
2955
-
2956
- .sm_color_matrix > * > :nth-child(4) {
2957
- grid-area: 8 / 8 / span 8 / span 8;
2958
- }
2959
-
2960
- .sm_color_matrix > * > :nth-child(5) {
2961
- grid-area: 32 / 8 / span 4 / span 4;
2962
- }
2963
-
2964
- .sm_color_matrix > * > :nth-child(6) {
2965
- grid-area: 30 / 16 / span 8 / span 8;
2966
- }
2967
-
2968
- .sm_color_matrix > * > :nth-child(7) {
2969
- grid-area: 4 / 20 / span 8 / span 8;
2970
- }
2971
-
2972
- .sm_color_matrix > * > :nth-child(8) {
2973
- grid-area: 17 / 26 / span 8 / span 8;
2974
- }
2975
-
2976
- .sm_color_matrix > * > :nth-child(9) {
2977
- grid-area: 22 / 2 / span 8 / span 8;
2978
- }
2979
-
2980
- .sm_color_matrix > * > :nth-child(10) {
2981
- grid-area: 28 / 11 / span 2 / span 2;
2982
- }
2983
-
2984
- .sm_color_matrix > * > :nth-child(11) {
2985
- grid-area: 9 / 31 / span 6 / span 6;
2986
- }
2987
-
2988
- .sm_color_matrix > * > :nth-child(11) {
2989
- grid-area: 26 / 30 / span 9 / span 9;
2990
- }
2991
-
2992
- .sm_color_matrix > * > :nth-child(12) {
2993
- grid-area: 17 / 7 / span 4 / span 4;
2994
- }
2995
-
2996
- .sm_color_matrix > * > :nth-child(13) {
2997
- grid-area: 19 / 36 / span 6 / span 6;
2998
- }
2999
-
3000
- .sm_color_matrix > * > :nth-child(14) {
3001
- grid-area: 12 / 18 / span 2 / span 2;
3002
- }
3003
-
3004
- @-webkit-keyframes bounceIn {
3005
- 0%, 20%, 40%, 60%, 80%, 100% {
3006
- -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
3007
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
3008
- }
3009
- 0% {
3010
  opacity: 0;
3011
- -webkit-transform: scale3d(0.3, 0.3, 0.3);
3012
- transform: scale3d(0.3, 0.3, 0.3);
3013
- }
3014
- 20% {
3015
- -webkit-transform: scale3d(1.1, 1.1, 1.1);
3016
- transform: scale3d(1.1, 1.1, 1.1);
3017
- }
3018
- 40% {
3019
- -webkit-transform: scale3d(0.9, 0.9, 0.9);
3020
- transform: scale3d(0.9, 0.9, 0.9);
3021
- }
3022
- 60% {
3023
- opacity: 1;
3024
- -webkit-transform: scale3d(1.03, 1.03, 1.03);
3025
- transform: scale3d(1.03, 1.03, 1.03);
3026
- }
3027
- 80% {
3028
- -webkit-transform: scale3d(0.97, 0.97, 0.97);
3029
- transform: scale3d(0.97, 0.97, 0.97);
3030
- }
3031
- 100% {
3032
- opacity: 1;
3033
- -webkit-transform: scale3d(1, 1, 1);
3034
- transform: scale3d(1, 1, 1);
3035
- }
3036
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3037
 
3038
- @keyframes bounceIn {
3039
- 0%, 20%, 40%, 60%, 80%, 100% {
3040
- -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
3041
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
3042
- }
3043
- 0% {
3044
  opacity: 0;
3045
- -webkit-transform: scale3d(0.3, 0.3, 0.3);
3046
- transform: scale3d(0.3, 0.3, 0.3);
3047
- }
3048
- 20% {
3049
- -webkit-transform: scale3d(1.1, 1.1, 1.1);
3050
- transform: scale3d(1.1, 1.1, 1.1);
3051
- }
3052
- 40% {
3053
- -webkit-transform: scale3d(0.9, 0.9, 0.9);
3054
- transform: scale3d(0.9, 0.9, 0.9);
3055
- }
3056
- 60% {
3057
  opacity: 1;
3058
- -webkit-transform: scale3d(1.03, 1.03, 1.03);
3059
- transform: scale3d(1.03, 1.03, 1.03);
3060
- }
3061
- 80% {
3062
- -webkit-transform: scale3d(0.97, 0.97, 0.97);
3063
- transform: scale3d(0.97, 0.97, 0.97);
3064
- }
3065
- 100% {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3066
  opacity: 1;
3067
- -webkit-transform: scale3d(1, 1, 1);
3068
- transform: scale3d(1, 1, 1);
3069
- }
3070
- }
3071
-
3072
- #customize-theme-controls #sub-accordion-panel-style_manager_panel .customize-panel-description,
3073
- #customize-theme-controls #sub-accordion-panel-theme_options_panel .customize-panel-description {
3074
- display: block;
3075
- }
3076
-
3077
- #customize-theme-controls li#accordion-panel-style_manager_panel h3.accordion-section-title:before {
3078
- position: relative;
3079
- float: right;
3080
- content: "";
3081
- color: #aed2e5;
3082
- font-family: dashicons;
3083
- padding: 1px;
3084
- margin-right: 28px;
3085
- font-size: 17px;
3086
- -webkit-font-smoothing: antialiased;
3087
- }
3088
-
3089
- #customize-theme-controls li#accordion-panel-style_manager_panel h3.accordion-section-title:before {
3090
- font-size: 18px;
3091
- color: #f8bc30;
3092
- }
3093
-
3094
- #customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title:before {
3095
- position: relative;
3096
- float: right;
3097
- content: "";
3098
- color: #aed2e5;
3099
- font-family: dashicons;
3100
- padding: 1px;
3101
- margin-right: 28px;
3102
- font-size: 17px;
3103
- -webkit-font-smoothing: antialiased;
3104
- }
3105
-
3106
- #customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title {
3107
- border-top: none;
3108
- }
3109
-
3110
- #customize-theme-controls li#accordion-section-sm_font_palettes_section h3.accordion-section-title:before {
3111
- position: relative;
3112
- float: right;
3113
- content: "";
3114
- color: #aed2e5;
3115
- font-family: dashicons;
3116
- padding: 1px;
3117
- margin-right: 28px;
3118
- font-size: 17px;
3119
- -webkit-font-smoothing: antialiased;
3120
- }
3121
-
3122
- #customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title:before,
3123
- #customize-theme-controls li#accordion-section-sm_font_palettes_section h3.accordion-section-title:before {
3124
- padding: 3px;
3125
- margin-right: 5px;
3126
- margin-top: -2px;
3127
- }
3128
-
3129
- #customize-theme-controls li#accordion-panel-theme_options_panel h3.accordion-section-title:before {
3130
- position: relative;
3131
- float: right;
3132
- content: "";
3133
- color: #aed2e5;
3134
- font-family: dashicons;
3135
- padding: 1px;
3136
- margin-right: 28px;
3137
- font-size: 17px;
3138
- -webkit-font-smoothing: antialiased;
3139
- }
3140
-
3141
- #customize-theme-controls li#accordion-panel-theme_options_panel h3.accordion-section-title {
3142
- border-bottom: 1px solid #ddd;
3143
- border-left: none;
3144
- border-right: none;
3145
- margin: 0 0 15px 0;
3146
- }
3147
-
3148
- #customize-theme-controls li[id$="[general]"],
3149
- #customize-theme-controls li[id$="[footer_section]"] {
3150
- border-bottom: 1px solid #ddd;
3151
- border-left: none;
3152
- border-right: none;
3153
- margin: 0 0 15px 0;
3154
- }
3155
-
3156
- #customize-theme-controls li[id$="[general]"] h3.accordion-section-title {
3157
- border-top: none;
3158
- }
3159
-
3160
- .color .disc {
3161
- display: block;
3162
- overflow: hidden;
3163
- position: absolute;
3164
- top: 0;
3165
- right: 0;
3166
- bottom: 0;
3167
- left: 0;
3168
- z-index: 15;
3169
- border-radius: 50%;
3170
- pointer-events: none;
3171
- opacity: 0;
3172
- transition: opacity .3s ease-in-out;
3173
- }
3174
-
3175
- .color .disc:after {
3176
- content: "";
3177
- -webkit-filter: blur(6px) saturate(0.7) brightness(1.1);
3178
- filter: blur(6px) saturate(0.7) brightness(1.1);
3179
- display: block;
3180
- width: 200%;
3181
- height: 200%;
3182
- padding-top: 100%;
3183
- position: absolute;
3184
- top: -50%;
3185
- left: -50%;
3186
- -webkit-transform: scale(1);
3187
- transform: scale(1);
3188
- 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);
3189
- 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;
3190
- }
3191
-
3192
- .color.altered .disc {
3193
- opacity: 1;
3194
- }
3195
-
3196
- .customize-control-color .wp-picker-container .iris-picker .iris-palette-container {
3197
- display: -ms-flexbox;
3198
- display: flex;
3199
- width: 215px;
3200
- }
3201
-
3202
- .customize-control-color .wp-picker-container .iris-picker .iris-palette {
3203
- width: auto !important;
3204
- height: auto !important;
3205
- -ms-flex: 1 1 0;
3206
- flex: 1 1 0;
3207
- float: none;
3208
- }
3209
-
3210
- .customize-control-color .wp-picker-container .iris-picker .iris-palette:after {
3211
- content: "";
3212
- display: block;
3213
- padding-top: 100%;
 
 
 
 
 
 
 
 
 
 
 
3214
  }
1
+ .sm-radio-group
2
+ {font-size: 14px;font-weight: 600;line-height: 1.142em;
3
+
4
+ position: relative;display: -ms-flexbox;display: flex;overflow: hidden;height: 2.428em;color: rgba(65,107,126,.7);border-radius: 999em;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-ms-flex-align: stretch;align-items: stretch;-webkit-font-smoothing: antialiased;
5
+ }.sm-radio-group > *
6
+ {
7
+ -ms-flex: 1 1 0 ;flex: 1 1 0;
8
+ }.sm-radio-group:after
9
+ {position: absolute;top: 0;right: 0;bottom: 0;left: 0;
10
+
11
+ content: '';pointer-events: none;border: .142em solid #57abd5;border-radius: 999em;
12
+ }.sm-radio-group input[type='radio']
13
+ {
14
+ display: none;
15
+ }.sm-radio-group input[type='radio']:checked + label
16
+ {color: #fff;
17
+ background-color: #57abd5;
18
+ }.sm-radio-group input[type='radio']:checked + label:before
19
+ {position: relative;top: .285em;display: inline-block;width: .55em;height: .8em;margin-right: .45em;
20
+
21
+ content: '';-webkit-transform: translateY(-50%) rotate(45deg);transform: translateY(-50%) rotate(45deg);color: inherit;border-right: 2px solid;border-bottom: 2px solid;
22
+ }.sm-radio-group label
23
+ {position: relative;
24
+
25
+ display: -ms-flexbox ;display: flex;cursor: pointer;transition: all .25s ease;color: inherit;-ms-flex-align: center;align-items: center;-ms-flex-pack: center;justify-content: center;
26
+ }.sm-radio-group label:hover
27
+ {
28
+ color: #416b7e;
29
+ }.sm-radio-group label:nth-of-type(2)
30
+ {border-right: 2px solid #57abd5;
31
+ border-left: 2px solid #57abd5;
32
+ }[id='customize-control-sm_coloration_level_control'] .sm-radio-group
33
+ {
34
+ display: -ms-flexbox ;display: flex;flex-direction: row-reverse;-ms-flex-direction: row-reverse;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-ms-flex-align: stretch;align-items: stretch;-ms-flex-pack: start;justify-content: flex-start;
35
+ }[id='customize-control-sm_coloration_level_control'] .sm-radio-group > *
36
+ {
37
+ -ms-flex: 0 0 33.33% ;flex: 0 0 33.33%;
38
+ }[id='customize-control-sm_coloration_level_control'] .sm-radio-group input[type='radio']:last-of-type:checked + label
39
+ {
40
+ background: linear-gradient(90deg, #3daae0 0%, #d557be 100%);
41
+ }[id='customize-control-sm_coloration_level_control'] .sm-radio-group input[type='radio']:nth-of-type(1):checked ~ label:last-of-type,
42
+ [id='customize-control-sm_coloration_level_control'] .sm-radio-group input[type='radio']:nth-of-type(2):checked ~ label:last-of-type
43
+ {
44
+ margin-right: -33.33%;
45
+ }[id='customize-control-sm_coloration_level_control'] .sm-radio-group label:nth-of-type(1)
46
+ {
47
+ -ms-flex-order: 4;order: 4;
48
+ }[id='customize-control-sm_coloration_level_control'] .sm-radio-group label:nth-of-type(2)
49
+ {border-right: 2px solid #57abd5;border-left: 2px solid #57abd5;
50
+
51
+ -ms-flex-order: 3;order: 3;
52
+ }[id='customize-control-sm_coloration_level_control'] .sm-radio-group label:nth-of-type(3)
53
+ {
54
+ -ms-flex-order: 2;order: 2;
55
+ }[id='customize-control-sm_coloration_level_control'] .sm-radio-group label:nth-of-type(4)
56
+ {border-left: 2px solid #57abd5;
57
+
58
+ -ms-flex-order: 1;order: 1;
59
+ }[id='sub-accordion-section-sm_color_palettes_section'].sm-view-customize li.customize-control-sm_switch
60
+ {
61
+ display: -ms-flexbox !important ;display: flex !important;padding-top: 42px;padding-bottom: 42px;-ms-flex-align: center;align-items: center;-ms-flex-pack: justify;justify-content: space-between;
62
+ }[id='sub-accordion-section-sm_color_palettes_section'].sm-view-customize li.customize-control-sm_switch .customize-control-title,
63
+ [id='sub-accordion-section-sm_color_palettes_section'].sm-view-customize li.customize-control-sm_switch .separator.label
64
+ {
65
+ display: inline-block;
66
+ }.sm-switch
67
+ {font-size: 14px;font-weight: 600;line-height: 1.142em;position: relative;z-index: 10;
68
+
69
+ display: -ms-flexbox;display: flex;overflow: hidden;max-width: 5.5em;height: 2.428em;color: #fff;border-radius: 999em;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-ms-flex-align: stretch;align-items: stretch;-ms-flex-pack: start;justify-content: flex-start;-webkit-font-smoothing: antialiased;
70
+ }.sm-switch input[type='radio']
71
+ {
72
+ display: none;
73
+ }.sm-switch input[type='radio'] + label
74
+ {
75
+ display: -ms-flexbox ;display: flex;-ms-flex-align: center;align-items: center;-ms-flex: 0 0 100%;flex: 0 0 100%;
76
+ }.sm-switch input[type='radio'] + label,
77
+ .sm-switch input[type='radio'] + label:after
78
+ {
79
+ transition: all .2s ease-out;
80
+ }.sm-switch input[type='radio']:checked + label
81
+ {
82
+ pointer-events: none;
83
+ }.sm-switch input[type='radio']:nth-of-type(1) + label
84
+ {
85
+ padding-left: 1.214em;
86
+ }.sm-switch input[type='radio']:nth-of-type(1) + label:after
87
+ {position: absolute;z-index: -1;top: 0;right: 0;bottom: 0;left: 0;
88
+
89
+ content: '';background-color: #57abd5;
90
+ }.sm-switch input[type='radio']:nth-of-type(1):not(:checked) + label
91
+ {
92
+ -webkit-transform: translateX(-100%) translateX(2.125em) ;transform: translateX(-100%) translateX(2.125em);
93
+ }.sm-switch input[type='radio']:nth-of-type(1):not(:checked) + label:after
94
+ {-webkit-transform: translateX(100%) translateX(-2.125em) ;transform: translateX(100%) translateX(-2.125em);
95
+
96
+ background: #ccc;
97
+ }.sm-switch input[type='radio']:nth-of-type(1):not(:checked) + label ~ label
98
+ {
99
+ -webkit-transform: translateX(-100%) ;transform: translateX(-100%);
100
+ }.sm-switch input[type='radio']:nth-of-type(1):checked + label ~ label
101
+ {
102
+ -webkit-transform: translateX(-2.4em) ;transform: translateX(-2.4em);
103
+ }.sm-switch input[type='radio']:nth-of-type(1):checked + label ~ label:before
104
+ {
105
+ -webkit-transform: translateX(-100%) translateX(2.125em) ;transform: translateX(-100%) translateX(2.125em);
106
+ }.sm-switch input[type='radio']:nth-of-type(2) + label
107
+ {flex-direction: row-reverse;padding-right: 1em;
108
+
109
+ -ms-flex-direction: row-reverse;
110
+ }.sm-switch input[type='radio']:nth-of-type(2) + label:before
111
+ {position: absolute;top: 0;right: 0;bottom: 0;left: 0;
112
+
113
+ content: '';
114
+ }.sm-switch input[type='radio']:nth-of-type(2) + label:after
115
+ {display: block;width: 2.142em;height: 2.142em;margin-right: auto;margin-left: .125em;
116
+
117
+ content: '';pointer-events: none;border-radius: 50%;background-color: #fff;box-shadow: 1px 2px 2px 0 rgba(23,21,21,.15);
118
+ }.wp-full-overlay-sidebar *,
119
+ .wp-full-overlay-sidebar *:before,
120
+ .wp-full-overlay-sidebar *:after
121
+ {
122
+ box-sizing: border-box;
123
+ }.iris-picker,
124
+ .iris-picker *
125
+ {
126
+ box-sizing: content-box;
127
+ }.wp-full-overlay-sidebar-content .accordion-section-content
128
+ {
129
+ overflow: visible;
130
+ }.control-section:not(.control-section-themes) .customize-control
131
+ {width: 100%;min-height: initial;
132
+ padding: 0;
133
+ }#customize-header-actions #customize-save-button-wrapper
134
+ {
135
+ margin-top: 7px;
136
+ }.wp-full-overlay-footer .devices button
137
+ {
138
+ float: left;border-radius: 0;
139
+ }.customize-controls-close
140
+ {
141
+ width: 48px;height: 44px;color: #7da9c3;border-top: none;border-right-color: #e0e8ef;background: #fff;
142
+ }.customize-controls-close:focus,
143
+ .customize-controls-close:hover
144
+ {
145
+ background: #f5fcff;
146
+ }.customize-controls-close:before
147
+ {
148
+ top: 0;
149
+ }#customize-controls .customize-info
150
+ {
151
+ border-bottom-color: #e0e8ef;
152
+ }.customize-panel-back,
153
+ .customize-section-back
154
+ {
155
+ height: 74px;color: #7da9c3;border-right-color: #e0e8ef;
156
+ }.customize-panel-back:hover,
157
+ .customize-panel-back:focus,
158
+ .customize-section-back:hover,
159
+ .customize-section-back:focus
160
+ {
161
+ border-left-color: #f5fcff;background: #f5fcff;
162
+ }#customize-theme-controls .theme *
163
+ {
164
+ box-sizing: content-box;
165
+ }#customize-theme-controls .accordion-section-content
166
+ {
167
+ padding: 17px;
168
+ }#customize-theme-controls .customize-section-title
169
+ {
170
+ margin-top: -17px;margin-right: -17px;
171
+ }#customize-theme-controls .control-panel-content .control-section:nth-child(2),
172
+ #customize-theme-controls .control-panel-content .control-section:nth-child(3)
173
+ {
174
+ border-top: none;
175
+ }#customize-theme-controls #accordion-section-add_menu
176
+ {
177
+ border-bottom: none;
178
+ }#customize-theme-controls #accordion-section-add_menu .add-menu-toggle
179
+ {
180
+ float: none;
181
+ }#customize-theme-controls .customize-pane-child.open
182
+ {
183
+ height: 100%;
184
+ }#customize-controls .description
185
+ {
186
+ font-size: 12px;font-weight: 300;font-style: normal;line-height: 1.6;text-indent: 0;color: #4d7b90;
187
+ }.customize-control-description
188
+ {
189
+ margin-top: 6px;
190
+ }.customize-control
191
+ {
192
+ margin-bottom: 24px;
193
+ }#accordion-section-themes + .control-section
194
+ {
195
+ border-top: none;
196
+ }#customize-controls .panel-meta.customize-info .accordion-section-title
197
+ {height: 74px;
198
+
199
+ border-top: none;
200
+ }.button-controls:after
201
+ {display: table;clear: both;
202
+
203
+ content: ' ';
204
+ }.wp-core-ui .button:not(.theme-details):not(.collapse-sidebar):not(.wp-color-result),
205
  .wp-core-ui .button-primary,
206
+ .wp-core-ui .button-secondary
207
+ {font-weight: 400;
 
 
 
 
 
 
 
 
 
 
208
 
209
+ width: auto;padding-right: 15px;padding-left: 15px;color: #f5fcff;border: none;border-radius: 4px;background: #aed2e5;box-shadow: 0 2px 0 0 #8dbed7;text-shadow: none;
210
+ }.wp-core-ui .button:not(.theme-details):not(.collapse-sidebar):not(.wp-color-result):hover,
211
  .wp-core-ui .button-primary:hover,
212
+ .wp-core-ui .button-secondary:hover
213
+ {
214
+ color: white;background: #98c6dd;box-shadow: 0 2px 0 0 #74a7c2;text-shadow: none;
215
+ }.wp-core-ui #customize-header-actions .button-primary
216
+ {
217
+ background: #73c5ee;box-shadow: 0 2px 0 0 #57abd5;
218
+ }.wp-core-ui #customize-header-actions .button-primary:hover
219
+ {
220
+ background: #58b0dd;box-shadow: 0 2px 0 0 #3f8aaf;
221
+ }.wp-core-ui #customize-header-actions .button-primary.has-next-sibling
222
+ {
223
+ border-right: 1px solid #57abd5;
224
+ }.wp-core-ui #customize-header-actions .button-primary:disabled
225
+ {opacity: .7;
226
+ color: white !important;background: #aed2e5 !important;box-shadow: 0 2px 0 0 #8db5ca !important;
227
+ }.wp-core-ui #customize-header-actions .button-primary:disabled.has-next-sibling
228
+ {
229
+ border-right: none;
230
+ }.wp-core-ui .reset_section,
231
+ .wp-core-ui .reset_panel
232
+ {display: block;
233
+
234
+ width: 100%;height: 4em;margin: 0 0 25px;
235
+ }.wp-core-ui .reset_panel
236
+ {
237
+ margin-top: 10px;
238
+ }.separator.label
239
+ {font-size: 14px;font-weight: 500;line-height: 24px;
240
+
241
+ display: block;
242
+ }.customize-control-title,
243
+ .separator.label
244
+ {
245
+ color: #2a3b44;
246
+ }.separator.section:before,
247
+ .separator.sub-section:before
248
+ {position: absolute;z-index: -1;top: 0;right: -18px;bottom: 0;left: -18px;
249
+
250
+ content: '';
251
+ }.separator.label
252
+ {
253
+ font-weight: 500;
254
+ }.separator.large
255
+ {font-size: 16px;
256
+
257
+ margin-top: 12px;color: #39474d;
258
+ }.separator.section
259
+ {
260
+ position: relative;margin-bottom: 0;padding: 14px 0;border: none;background: none;
261
+ }.separator.section[id*='layout']
262
+ {
263
+ margin-top: 0;
264
+ }.separator.section[id*='layout']:before
265
+ {
266
+ border: none;
267
+ }.separator.section:before
268
+ {
269
+ border: 1px solid #e0e8ef;background-color: #fff;box-shadow: 0 1px 0 0 #dfe8ef;
270
+ }.separator.sub-section
271
+ {
272
+ position: relative;padding: 12px 0;
273
+ }.separator.sub-section:before
274
+ {
275
+ border-top: 1px solid #e0e8ef;border-bottom: 1px solid #e0e8ef;background-color: #f6fbff;
276
+ }.separator.sub-section + span
277
+ {font-style: normal;
278
+
279
+ margin-top: 20px;
280
+ }.section-navigation-wrapper
281
+ {
282
+ position: relative;height: 43px;margin: -15px -12px 0 -12px;margin-right: -17px;margin-left: -17px;
283
+ }.section-navigation
284
+ {
285
+ display: -ms-flexbox ;display: flex;clear: both;margin-top: -1px;border-top: 1px solid #e0e8ef;
286
+ }.section-navigation a
287
+ {display: block;padding: 12px 0;transition: background-color .15s ease-in-out;text-align: center;text-decoration: none;color: #3b484e;border-right: 1px solid #e0e8ef;border-bottom: 1px solid #e0e8ef;background-color: #fff;
288
+
289
+ -ms-flex: 1 1 auto;flex: 1 1 auto;
290
+ }.section-navigation a:last-child
291
+ {
292
+ border-right: 0;
293
+ }#customize-controls .customize-info.is-sticky.is-sticky,
294
+ #customize-controls .customize-section-title.is-sticky.is-sticky
295
+ {
296
+ top: 40px;
297
+ }#customize-controls .customize-info.is-in-view.is-in-view,
298
+ #customize-controls .customize-section-title.is-in-view.is-in-view
299
+ {
300
+ box-shadow: none;
301
+ }#customize-controls .has-nav .customize-info,
302
+ #customize-controls .has-nav .customize-section-title
303
+ {
304
+ margin-right: -12px;
305
+ }#customize-controls .customize-section-title.customize-section-title
306
+ {
307
+ border-bottom: 0;
308
+ }.customize-section-description-container.section-meta.has-nav
309
+ {
310
+ margin-bottom: 0;
311
+ }.font-options__wrapper
312
+ {
313
+ position: relative;
314
+ }.font-options__wrapper:after
315
+ {position: absolute;z-index: 0;top: 90%;right: 0;left: 0;display: block;height: 30px;
316
+
317
+ content: '';
318
+ }.font-options__head
319
+ {
320
+ display: -ms-flexbox ;display: flex;-ms-flex-pack: justify;justify-content: space-between;
321
+ }.font-options__head.font-options__head
322
+ {white-space: nowrap;text-overflow: ellipsis;
323
+
324
+ -webkit-appearance: none;
325
+ }.font-options__font-title
326
+ {font-size: 12px;font-weight: 300;line-height: 20px;overflow: hidden;
327
+
328
+ margin-right: 26px;margin-left: 10px;white-space: nowrap;text-overflow: ellipsis;color: #98c6dd;
329
+ }.font-options__options-list
330
+ {
331
+ position: absolute;z-index: 2;top: calc(100% + 6px);right: -6px;left: -6px;display: block;display: none;padding: 10px;transition: opacity .15s linear;opacity: 0;border: 1px solid #dfe8ef;border-radius: 5px;background-color: #fff;
332
+ }.font-options__options-list:last-child
333
+ {
334
+ margin-bottom: 0;
335
+ }.font-options__options-list:before,
336
+ .font-options__options-list:after
337
+ {position: absolute;z-index: 10;top: -20px;right: 25px;width: 0;height: 0;
338
+
339
+ content: '';border: solid transparent;
340
+ }.font-options__options-list:before
341
+ {z-index: 11;border-width: 10px;
342
+ border-bottom-color: white;
343
+ }.font-options__options-list:after
344
+ {top: -24px;right: 23px;border-width: 12px;
345
+ border-bottom-color: rgba(0,0,0,.075);
346
+ }.customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap:after
347
+ {position: absolute;right: 12px;bottom: 100%;width: 0;height: 0;border-collapse: separate;
348
+
349
+ content: '';border-width: 0 9px 9px 9px;border-style: solid;border-color: transparent transparent #fff transparent;
350
+ }.font-options__head,
351
+ .wp-full-overlay-sidebar-content .customize-control input[type=text]:not(#_customize-input-wpcom_custom_css_content_width_control):not(.wp-color-picker),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
352
  .wp-full-overlay-sidebar-content .customize-control input[type=checkbox],
353
  .wp-full-overlay-sidebar-content .customize-control input[type=password],
354
  .wp-full-overlay-sidebar-content .customize-control input[type=color],
366
  .wp-full-overlay-sidebar-content .customize-control input[type=search],
367
  .wp-full-overlay-sidebar-content .customize-control select,
368
  .wp-full-overlay-sidebar-content .customize-control textarea,
369
+ .wp-full-overlay-sidebar-content .customize-control input[type='number'].range-value,
370
+ ul.font-options__options-list .select2-container .select2-selection--single,
371
+ #customize-theme-controls .select2-container .select2-selection--multiple
372
+ {font-size: 14px;line-height: 1.5;
373
+
374
+ width: 100%;height: 44px;padding: 10px 14px;color: #416b7e;border: 2px solid #b8daeb;border-radius: 4px;outline: 0;background: #fff;
375
+ }.font-options__head:focus,
376
+ .wp-full-overlay-sidebar-content .customize-control input[type=text]:focus:not(#_customize-input-wpcom_custom_css_content_width_control):not(.wp-color-picker),
 
 
 
 
 
 
377
  .wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:focus,
378
  .wp-full-overlay-sidebar-content .customize-control input[type=password]:focus,
379
  .wp-full-overlay-sidebar-content .customize-control input[type=color]:focus,
391
  .wp-full-overlay-sidebar-content .customize-control input[type=search]:focus,
392
  .wp-full-overlay-sidebar-content .customize-control select:focus,
393
  .wp-full-overlay-sidebar-content .customize-control textarea:focus,
394
+ .wp-full-overlay-sidebar-content .customize-control input[type='number'].range-value:focus,
395
+ ul.font-options__options-list .select2-container .select2-selection--single:focus,
396
+ #customize-theme-controls .select2-container .select2-selection--multiple:focus
397
+ {
398
+ border-color: #73c5ee;box-shadow: none;
399
+ }.font-options__head,
400
+ .wp-full-overlay-sidebar-content .customize-control select,
401
+ ul.font-options__options-list .select2-container .select2-selection--single,
402
+ #customize-theme-controls .select2-container .select2-selection--multiple
403
+ {font-weight: 600;
404
+
405
+ width: 100%;background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE1cHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTUgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjU2LjAwMDAwMCwgLTM4Ni4wMDAwMDApIiBmaWxsPSIjOThDNkRFIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iVGl0bGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjAwMDAwMCwgMjE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1TZWxlY3QtQ29weSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iU2VsZWN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMjcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI1NC40ODEyLDE4IEwyNTYsMTkuNTE0IEwyNDguNSwyNyBMMjQxLDE5LjUxNCBMMjQyLjUxODgsMTggTDI0OC41LDIzLjk2NzIgTDI1NC40ODEyLDE4IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;background-position: right 16px top 16px;-webkit-appearance: button;-moz-appearance: none;
406
+ }[multiple].font-options__head,
407
+ .wp-full-overlay-sidebar-content .customize-control select[multiple],
408
+ ul.font-options__options-list .select2-container [multiple].select2-selection--single,
409
+ #customize-theme-controls .select2-container [multiple].select2-selection--multiple
410
+ {
411
+ background: white;
412
+ }.wp-full-overlay-sidebar-content .customize-control input[type=text],
413
+ .wp-full-overlay-sidebar-content .customize-control textarea
414
+ {
415
+ font-size: 13px;
416
+ }.wp-full-overlay-sidebar-content .customize-control textarea
417
+ {
418
+ height: auto;
419
+ }.wp-full-overlay-sidebar-content .customize-control input[type=checkbox],
420
+ .wp-full-overlay-sidebar-content .customize-control input[type=radio]
421
+ {
422
+ width: 22px;height: 22px;
423
+ }.wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:checked,
424
+ .wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked
425
+ {border-color: #5ab9e8;
426
+ background: #73c5ee;
427
+ }.wp-full-overlay-sidebar-content .customize-control input[type=checkbox]:checked:before,
428
+ .wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked:before
429
+ {margin: -1px 0 0 -2px;
430
+
431
+ color: white;
432
+ }.wp-full-overlay-sidebar-content .customize-control .awesome_preset input[type=radio]:checked
433
+ {
434
+ background: transparent;
435
+ }.wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control) label:not(:only-of-type),
436
+ .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),
437
+ .wp-full-overlay-sidebar-content .customize-control.customize-control-radio label:not(:only-of-type),
438
+ .wp-full-overlay-sidebar-content .customize-control.customize-control-radio > .customize-inside-control-row:not(:only-of-type)
439
+ {display: inline-block;width: calc(49% - 30px);
440
+ margin-left: 30px;padding-top: 0;padding-bottom: 0;text-indent: -6px;
441
+ }.wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control) label,
442
+ .wp-full-overlay-sidebar-content .customize-control.customize-control-radio label
443
+ {
444
+ color: #416b7e;
445
+ }[id*='divider'] + .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox:not(#customize-control-jetpack_css_mode_control),
446
+ [id*='divider'] + .wp-full-overlay-sidebar-content .customize-control.customize-control-radio
447
+ {
448
+ margin-top: 0;
449
+ }.wp-full-overlay-sidebar-content .customize-control input[type=radio]
450
+ {
451
+ border-radius: 50%;
452
+ }.wp-full-overlay-sidebar-content .customize-control input[type=radio]:checked:before
453
+ {
454
+ content: none;
455
+ }.customize-control-html + .wp-full-overlay-sidebar-content .customize-control.customize-control-checkbox
456
+ {
457
+ margin-top: -24px;
458
+ }.wp-full-overlay-sidebar-content .customize-control.customize-control-radio label,
459
+ .wp-full-overlay-sidebar-content .customize-control.customize-control-radio .customize-inside-control-row
460
+ {
461
+ margin-top: 12px;
462
+ }.wp-full-overlay-sidebar-content .customize-control.customize-control-radio#customize-control-changeset_status .customize-inside-control-row
463
+ {
464
+ margin-top: 0;text-indent: 0;
465
+ }.wp-full-overlay-sidebar-content .customize-control input[type='range']
466
+ {
467
+ width: 65%;
468
+ }.wp-full-overlay-sidebar-content .customize-control input[type='range']
469
+ {
470
+ position: relative;overflow: hidden;width: calc(100% - 55px);height: 22px;outline: none;background: none;-webkit-appearance: none;
471
+ }.wp-full-overlay-sidebar-content .customize-control input[type='range']:before
472
+ {position: absolute;top: 8px;left: 0;width: 100%;height: 6px;
473
+
474
+ content: ' ';border-radius: 10px;background: #dfe8ef;box-shadow: inset 0 1px 3px 0 rgba(0,0,0,.3);
475
+ }.wp-full-overlay-sidebar-content .customize-control input[type='range']::-webkit-slider-thumb
476
+ {position: relative;z-index: 3;width: 22px;height: 22px;border: 2px solid #b8daeb;border-radius: 4px;background: #27ae60;background: #fff;
477
+
478
+ -webkit-appearance: none;
479
+ }.wp-full-overlay-sidebar-content .customize-control input[type='range']::-webkit-slider-thumb:before
480
+ {font-size: 1em;position: absolute;top: -5px;left: 5px;
481
+
482
+ content: '..';letter-spacing: 1px;color: #b8daeb;
483
+ }.wp-full-overlay-sidebar-content .customize-control input[type='range']::-webkit-slider-thumb:after
484
+ {position: absolute;z-index: 1;top: 6px;right: 20px;width: calc(100% - 55px);height: 6px;
485
+
486
+ content: ' ';background: #73c5ee;
487
+ }.wp-full-overlay-sidebar-content .customize-control input[type='number'].range-value
488
+ {font-size: 13px;line-height: 1;top: -5px;float: right;width: auto;
489
+ min-width: 40px;max-width: 80px;height: 30px;margin-left: 10px;padding: 4px 0 5px 0;text-align: center;
490
+ }.wp-full-overlay-sidebar-content .customize-control input[type=number]::-webkit-inner-spin-button,
491
+ .wp-full-overlay-sidebar-content .customize-control input[type=number]::-webkit-outer-spin-button
492
+ {margin: 0;
493
+
494
+ -webkit-appearance: none;
495
+ }.customize-control-color
496
+ {
497
+ display: block;
498
+ }.customize-control-color .customize-control-title,
499
+ .customize-control-color .separator.label
500
+ {
501
+ float: left;
502
+ }.customize-control-color .wp-picker-container
503
+ {
504
+ position: relative;top: -3px;float: right;
505
+ }.customize-control-color .wp-picker-container .wp-picker-holder
506
+ {
507
+ position: relative;
508
+ }.customize-control-color .wp-picker-container .wp-color-result,
509
+ .customize-control-color .wp-picker-container .wp-color-result.button
510
+ {
511
+ top: 0;width: 40px;height: 30px;margin: 0;padding: 0;border: 2px solid #b8daeb;border-radius: 4px;background: #2ecc71;box-shadow: none;
512
+ }.customize-control-color .wp-picker-container .wp-color-result:after,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
513
  .customize-control-color .wp-picker-container .wp-color-result .wp-color-result-text,
514
  .customize-control-color .wp-picker-container .wp-color-result.button:after,
515
+ .customize-control-color .wp-picker-container .wp-color-result.button .wp-color-result-text
516
+ {
517
+ display: none;
518
+ }.customize-control-color .wp-picker-container .iris-picker
519
+ {
520
+ position: absolute;z-index: 1000;top: 40px;right: 0;width: 275px !important;border: none;border-color: #dfdfde;border-top: none;border-radius: 0 0 3px 3px;background: white;
521
+ }.customize-control-color .wp-picker-container .iris-picker,
522
+ .customize-control-color .wp-picker-container .iris-picker *
523
+ {
524
+ box-sizing: content-box;
525
+ }.customize-control-color .wp-picker-container .iris-picker .iris-square
526
+ {
527
+ width: 215px !important;height: 173px !important;margin-right: 0;
528
+ }.customize-control-color .wp-picker-container .iris-picker .iris-strip
529
+ {
530
+ float: right;box-shadow: rgba(0,0,0,.4) 0 1px 1px inset;
531
+ }.customize-control-color .wp-picker-container .iris-picker .iris-strip .ui-slider-handle
532
+ {opacity: 1;
533
+ border-color: #aaa !important;box-shadow: none;
534
+ }.customize-control-color .wp-picker-container .iris-picker .iris-palette
535
+ {
536
+ width: 24px !important;height: 24px !important;border-radius: 50px;box-shadow: rgba(0,0,0,.4) 0 1px 1px inset;
537
+ }.customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap
538
+ {
539
+ position: absolute;z-index: 1000;top: 35px;right: 0;width: 275px;padding: 9px 12px;border: none;border-radius: 3px 3px 0 0;background: white;
540
+ }.customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap input.wp-color-picker
541
+ {font-size: 13px;
542
+
543
+ float: left;width: 100px;height: auto;margin: 0;padding: 6px 12px;text-align: left;
544
+ }.customize-control-color .wp-picker-container .wp-picker-open + .wp-picker-input-wrap input.button
545
+ {
546
+ float: right;height: 30px;padding: 4px 12px;
547
+ }.customize-control-font:last-child
548
+ {
549
+ margin-bottom: 150px;
550
+ }#accordion-section-live_css_edit_section .customize-section-title
551
+ {
552
+ margin-top: -13px;border-bottom: 1px solid #ddd;
553
+ }#accordion-section-live_css_edit_section #css_editor
554
+ {
555
+ top: 70px;overflow: visible;border-top: 10px solid white;
556
+ }#accordion-section-live_css_edit_section #css_editor:before
557
+ {position: absolute;z-index: 10000000;top: -10px;left: 0;display: block;width: 48px;height: 10px;
558
+
559
+ content: '';background: #e8e8e8;
560
+ }#accordion-section-live_css_edit_section .ace_scroller
561
+ {
562
+ padding-left: 10px;
563
+ }.wp-full-overlay.editor_opened
564
+ {
565
+ margin-left: 500px;
566
+ }.wp-full-overlay.editor_opened #customize-controls
567
+ {
568
+ width: 500px;
569
+ }.wp-full-overlay.editor_opened.collapsed #customize-controls
570
+ {
571
+ width: 300px;
572
+ }.customize-control-media .current,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
573
  .customize-control-site_icon .current,
574
+ li#customize-control-site_logo .current
575
+ {min-height: 44px;
576
+ margin-bottom: 10px;border: 2px solid #b8daeb;border-radius: 4px;background: #f5fcff;
577
+ }.customize-control-media .current .container,
578
+ .customize-control-media .current span,
 
 
 
 
579
  .customize-control-site_icon .current .container,
580
  .customize-control-site_icon .current span,
581
  li#customize-control-site_logo .current .container,
582
+ li#customize-control-site_logo .current span
583
+ {
584
+ border: none;
585
+ }.customize-control-media .inner,
586
+ .customize-control-media .current span,
587
  .customize-control-site_icon .inner,
588
  .customize-control-site_icon .current span,
589
  li#customize-control-site_logo .inner,
590
+ li#customize-control-site_logo .current span
591
+ {
592
+ font-size: 13px;color: #98c6dd;
593
+ }.customize-control-media .inner,
 
 
594
  .customize-control-site_icon .inner,
595
+ li#customize-control-site_logo .inner
596
+ {
597
+ line-height: 1.4;
598
+ }.customize-control-media .thumbnail-image,
 
599
  .customize-control-site_icon .thumbnail-image,
600
+ li#customize-control-site_logo .thumbnail-image
601
+ {
602
+ padding: 14px;text-align: center;
603
+ }.customize-control-media .thumbnail-image img,
 
 
604
  .customize-control-site_icon .thumbnail-image img,
605
+ li#customize-control-site_logo .thumbnail-image img
606
+ {
607
+ width: auto;
608
+ }.customize-control-media .actions,
 
609
  .customize-control-site_icon .actions,
610
+ li#customize-control-site_logo .actions
611
+ {
612
+ margin-bottom: 0;
613
+ }.customize-control-typography select,
614
+ .customize-control-typography select
615
+ {
616
+ margin-bottom: 10px;
617
+ }.customize-control-typography .description,
618
+ .customize-control-typography .description
619
+ {
620
+ margin-top: -3px;
621
+ }.customize-control-typography ul li,
622
+ .customize-control-typography ul li
623
+ {
624
+ width: 100%;margin: 0;
625
+ }.default-preset-button
626
+ {font-family: 'Open Sans',sans-serif;font-size: 13px;float: right;margin-right: 4px;padding: 1px 8px;border: 1px solid #cbcbcb;border-radius: 3px;
627
+ background-color: #f5f6f6;
628
+ }.customize-control-preset .description
629
+ {font-style: normal;
630
+
631
+ margin-right: 5px;
632
+ }.customify_preset.radio_buttons .customify_radio_button
633
+ {position: relative;display: inline-block;overflow: hidden;height: auto;margin: 3px;padding: 2px;
634
+
635
+ border: none;
636
+ }.customify_preset.radio_buttons .customify_radio_button input[type='radio']
637
+ {position: absolute;z-index: 9999;width: 100%;height: 100%;
638
 
639
+ opacity: 0;
640
+ }.customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked + label
641
+ {
642
+ background-color: #ebebeb;
643
+ }.customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked + label:before
644
+ {
645
+ content: '>';color: inherit;
646
+ }.customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked + label:after
647
+ {
648
+ content: '<';color: inherit;
649
+ }.customify_preset.radio_buttons .customify_radio_button input[type='radio']:checked:before
650
+ {
651
+ opacity: 0;
652
+ }.customify_preset.radio_buttons .customify_radio_button label
653
+ {
654
+ position: relative;z-index: 999;border-left: 4px solid;
655
+ }.customify_preset .awesome_preset
656
+ {position: relative;display: inline-block;
657
+
658
+ width: 45%;margin-top: 5px;margin-bottom: 25px;transition: all .2s;text-align: center;color: white;
659
+ }.customify_preset .awesome_preset:hover
660
+ {
661
+ opacity: .9;
662
+ }.customify_preset .awesome_preset:before
663
+ {position: absolute;z-index: 5;top: 1px;right: 1px;bottom: 1px;left: 1px;
664
+
665
+ content: '';opacity: .5;border: 1px solid #fff;border-radius: 4px;background: transparent;
666
+ }.customify_preset .awesome_preset .preset-wrap .preset-color
667
+ {
668
+ height: 128px;padding: 17px 0 27px;border-radius: 4px 4px 0 0;
669
+ }.customify_preset .awesome_preset .preset-wrap .preset-color .first-font
670
+ {font-size: 55px;line-height: 1;
671
+
672
+ display: inline-block;width: 100%;
673
+ }.customify_preset .awesome_preset .preset-wrap .preset-color .secondary-font
674
+ {font-size: 20px;line-height: 1;
675
+
676
+ display: inline-block;width: 100%;margin-top: 8px;
677
+ }.customify_preset .awesome_preset .preset-wrap .preset-name
678
+ {font-size: 11px;
679
+
680
+ position: relative;padding: 1px;text-transform: UPPERCASE;border-radius: 0 0 4px 4px;
681
+ }.customify_preset .awesome_preset .preset-wrap .preset-name:before
682
+ {position: absolute;top: -10px;left: 40%;
683
+
684
+ content: '';border: 10px solid;border-color: inherit;border-top: transparent;border-right-color: transparent;border-bottom-color: inherit;border-left-color: transparent;
685
+ }.customify_preset .awesome_preset:nth-child(odd)
686
+ {
687
+ margin-right: 7%;
688
+ }.customify_preset .awesome_preset input[type=radio]
689
+ {position: absolute;z-index: 10;top: 0;left: 0;display: inline-block;width: 100%;
690
+ height: 100%;margin: 0;color: #006505;border: 0;border-radius: 0;background-color: transparent;box-shadow: none;
691
+ }.customify_preset .awesome_preset input[type=radio]:checked:before
692
+ {
693
+ position: absolute;z-index: 1;top: -13px;right: -14px;width: 25px;height: 25px;background: #fff;
694
+ }.customify_preset .awesome_preset input[type=radio]:checked:after
695
+ {position: absolute;z-index: 10;top: -5px;right: -5px;width: 26px;height: 26px;content: '';border-radius: 50%;background: #73c5ee url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzcHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTMgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgLTQwOC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1DaGVja2JveC1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNy4wMDAwMDAsIDI0OS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IkNoZWNrYm94IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMzAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuMDM4NDk1LDE2IEwxNy4xMTYxMzc1LDguOTIxNDg3NiBMMTUuMTk0NjQ5OCw3IEwxMC4wMzg0OTUsMTIuMTU1MDY3NCBMNi45MjE0ODc2LDkuMDM4OTI5OTcgTDUsMTAuOTYwNDE3NiBMMTAuMDM4NDk1LDE2IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;background-position: center center;
696
+
697
+ -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';filter: alpha(opacity=0);
698
+ }.customify_radio_image
699
+ {
700
+ display: inline-block;
701
+ }.customify_radio_image label
702
+ {position: relative;
703
+
704
+ display: block;float: left;margin-right: 10px;
705
+ }.customify_radio_image label input[type=radio]
706
+ {
707
+ position: absolute;top: 0;right: 0;bottom: 0;left: 0;visibility: hidden;width: 100%;height: 100%;
708
+ }.customify_radio_image label input[type=radio] img
709
+ {
710
+ cursor: pointer;border: 2px solid transparent;
711
+ }.customify_radio_image label input[type=radio]:checked + img
712
+ {
713
+ border: 3px solid #73c5ee;
714
+ }.customify_ace_editor
715
+ {
716
+ display: block;min-height: 200px;border: 1px solid #ddd;
717
+ }.customize-control-custom_background .hide
718
+ {
719
+ display: none;
720
+ }.customize-control-custom_background .upload_button_div
721
+ {
722
+ margin: 10px 0;
723
+ }.customize-control-custom_background .upload_button_div > *
724
+ {
725
+ margin-right: 10px;
726
+ }.customize-control-custom_background .preview_screenshot
727
+ {margin: 10px 0;
728
+
729
+ text-align: center;
730
+ }.customize-control-custom_background .preview_screenshot img
731
+ {
732
+ border: 2px solid #ccc;
733
+ }#customify_import_demo_data_button
734
+ {display: inline-block;
735
+
736
+ width: 70%;height: auto;margin: 0 15% 10% 15%;padding: 10px;text-align: center;
737
+ }.import_step_note
738
+ {display: inline-block;width: 100%;
739
+ margin: 5px;
740
+ }.import_step_note:before
741
+ {
742
+ content: '\1F449';
743
+ }.import_step_note.success:before
744
+ {
745
+ content: '\1F44D';
746
+ }.import_step_note.failed:before
747
+ {
748
+ content: '\274C';
749
+ }#customize-header-actions
750
+ {border-color: #e0e8ef;
751
+ background: #fff;
752
+ }.wp-full-overlay-sidebar,
753
+ .customize-themes-panel,
754
+ #customize-sidebar-outer-content
755
+ {border-right: 1px solid #e0e8ef;
756
+ background: #f7f9fa;
757
+ }.outer-section-open #customize-controls .wp-full-overlay-sidebar-content,
758
+ .attachment-media-view,
759
+ .media-widget-preview.media_audio,
760
+ .media-widget-preview.media_image
761
+ {
762
+ background: #f7f9fa;
763
+ }#customize-theme-controls #accordion-section-menu_locations
764
+ {
765
+ border-bottom: 1px solid #e0e8ef;
766
+ }#customize-controls #accordion-section-themes > .accordion-section-title
767
+ {
768
+ font-weight: 600;border-bottom: 1px solid #e0e8ef;
769
+ }#customize-controls #accordion-section-themes > .accordion-section-title:hover
770
+ {
771
+ background: #fff;
772
+ }#customize-controls .panel-meta.customize-info
773
+ {
774
+ border-bottom-color: #e0e8ef;
775
+ }#customize-theme-controls .control-section .accordion-section-title
776
+ {
777
+ font-weight: 400;border-top: 1px solid #e0e8ef;border-bottom: none;
778
+ }#customize-theme-controls .control-section:last-of-type > .accordion-section-title
779
+ {
780
+ border-bottom: 1px solid #e0e8ef;
781
+ }#customize-theme-controls .customize-section-title
782
+ {
783
+ border-top: 1px solid #e0e8ef;border-bottom: 1px solid #e0e8ef;
784
+ }#customize-controls .control-section .accordion-section-title:focus,
785
+ #customize-controls .control-section .accordion-section-title:hover,
786
+ #customize-controls .control-section.open .accordion-section-title,
787
+ #customize-controls .control-section:hover > .accordion-section-title
788
+ {
789
+ color: #056184;border-left-color: #f5fcff;background: #f5fcff;
790
+ }.wp-customizer .menu-item-edit-active .menu-item-handle,
791
+ .wp-customizer .section-open .menu-item-settings,
792
+ .wp-customizer .menu-item-bar .menu-item-handle:hover
793
+ {
794
+ border-color: #e0e8ef;
795
+ }.wp-customizer .section-open .menu-item-settings
796
+ {
797
+ background: #f5fcff;
798
+ }.wp-customizer .control-section-nav_menu .menu-location-settings
799
+ {
800
+ border-top-color: #e0e8ef !important;
801
+ }[data-balloon]
802
+ {
803
+ position: relative;
804
+ }[data-balloon]::before
805
+ {font-size: 12px;position: absolute;z-index: 10;padding: .5em 1em;content: attr(data-balloon);transition: all .18s ease-out;white-space: nowrap;pointer-events: none;
806
+
807
+ opacity: 0;color: #fff;border-radius: 4px;background: rgba(17,17,17,.9);
808
+ }[data-balloon]::after
809
+ {position: absolute;z-index: 10;width: 18px;height: 6px;content: '';transition: all .18s ease-out;pointer-events: none;opacity: 0;
810
+ 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>');background-size: 100% auto;
811
+ }[data-balloon]:hover::before,
812
+ [data-balloon]:hover::after
813
+ {pointer-events: auto;
814
 
815
+ opacity: 1;
816
+ }[data-balloon][data-balloon-pos='up']::before
817
+ {
818
+ bottom: 100%;left: 50%;margin-bottom: 11px;-webkit-transform: translate3d(-50%, 10px, 0);transform: translate3d(-50%, 10px, 0);-webkit-transform-origin: top;transform-origin: top;
819
+ }[data-balloon][data-balloon-pos='up']::after
820
+ {
821
+ bottom: 100%;left: 50%;margin-bottom: 5px;-webkit-transform: translate3d(-50%, 10px, 0);transform: translate3d(-50%, 10px, 0);-webkit-transform-origin: top;transform-origin: top;
822
+ }[data-balloon][data-balloon-pos='up']:hover::before
823
+ {
824
+ -webkit-transform: translate3d(-50%, 0, 0) ;transform: translate3d(-50%, 0, 0);
825
+ }[data-balloon][data-balloon-pos='up']:hover::after
826
+ {
827
+ -webkit-transform: translate3d(-50%, 0, 0) ;transform: translate3d(-50%, 0, 0);
828
+ }[data-balloon][data-balloon-pos='down']::before
829
+ {top: 100%;
830
+ left: 50%;margin-top: 11px;-webkit-transform: translate3d(-50%, -10px, 0);transform: translate3d(-50%, -10px, 0);
831
+ }[data-balloon][data-balloon-pos='down']::after
832
+ {top: 100%;left: 50%;width: 18px;height: 6px;margin-top: 5px;-webkit-transform: translate3d(-50%, -10px, 0);transform: translate3d(-50%, -10px, 0);
833
+
834
+ 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>');background-size: 100% auto;
835
+ }[data-balloon][data-balloon-pos='down']:hover::before
836
+ {
837
+ -webkit-transform: translate3d(-50%, 0, 0) ;transform: translate3d(-50%, 0, 0);
838
+ }[data-balloon][data-balloon-pos='down']:hover::after
839
+ {
840
+ -webkit-transform: translate3d(-50%, 0, 0) ;transform: translate3d(-50%, 0, 0);
841
+ }[data-balloon][data-balloon-pos='left']::before
842
+ {top: 50%;right: 100%;
843
+
844
+ margin-right: 11px;-webkit-transform: translate3d(10px, -50%, 0);transform: translate3d(10px, -50%, 0);
845
+ }[data-balloon][data-balloon-pos='left']::after
846
+ {top: 50%;right: 100%;width: 6px;height: 18px;margin-right: 5px;-webkit-transform: translate3d(10px, -50%, 0);transform: translate3d(10px, -50%, 0);
847
+
848
+ 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>');background-size: 100% auto;
849
+ }[data-balloon][data-balloon-pos='left']:hover::before
850
+ {
851
+ -webkit-transform: translate3d(0, -50%, 0) ;transform: translate3d(0, -50%, 0);
852
+ }[data-balloon][data-balloon-pos='left']:hover::after
853
+ {
854
+ -webkit-transform: translate3d(0, -50%, 0) ;transform: translate3d(0, -50%, 0);
855
+ }[data-balloon][data-balloon-pos='right']::before
856
+ {top: 50%;
857
+ left: 100%;margin-left: 11px;-webkit-transform: translate3d(-10px, -50%, 0);transform: translate3d(-10px, -50%, 0);
858
+ }[data-balloon][data-balloon-pos='right']::after
859
+ {top: 50%;left: 100%;width: 6px;height: 18px;margin-left: 5px;-webkit-transform: translate3d(-10px, -50%, 0);transform: translate3d(-10px, -50%, 0);
860
+
861
+ 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>');background-size: 100% auto;
862
+ }[data-balloon][data-balloon-pos='right']:hover::before
863
+ {
864
+ -webkit-transform: translate3d(0, -50%, 0) ;transform: translate3d(0, -50%, 0);
865
+ }[data-balloon][data-balloon-pos='right']:hover::after
866
+ {
867
+ -webkit-transform: translate3d(0, -50%, 0) ;transform: translate3d(0, -50%, 0);
868
+ }[data-balloon][data-balloon-length='small']::before
869
+ {width: 80px;
870
 
871
+ white-space: normal;
872
+ }[data-balloon][data-balloon-length='medium']::before
873
+ {width: 150px;
 
874
 
875
+ white-space: normal;
876
+ }[data-balloon][data-balloon-length='large']::before
877
+ {width: 260px;
 
 
 
 
 
 
 
878
 
879
+ white-space: normal;
880
+ }[data-balloon][data-balloon-length='xlarge']::before
881
+ {width: 380px;
 
882
 
883
+ white-space: normal;
884
+ }@media screen and (max-width: 768px)
885
+ {
886
+ [data-balloon][data-balloon-length='xlarge']::before
887
+ {width: 90vw;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
888
 
889
+ white-space: normal;
890
+ }
891
+ }[data-balloon][data-balloon-length='fit']::before
892
+ {width: 100%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
893
 
894
+ white-space: normal;
895
+ }body.modal-open
896
+ {
897
+ overflow: hidden;
898
+ }body.modal-open #style-manager-user-feedback-modal .modal
899
+ {visibility: visible;
900
+ overflow-x: hidden;overflow-y: auto;-webkit-transform: translate(0, 0);transform: translate(0, 0);opacity: 1;
901
+ }#style-manager-user-feedback-modal
902
+ {
903
+ height: 100%;
904
+ }#style-manager-user-feedback-modal .modal
905
+ {font-family: 'Galano Grotesque Alt', -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;font-size: 16px;font-weight: 400;line-height: 1.7;
906
+
907
+ position: relative;z-index: 1050;top: 0;right: 0;bottom: 0;left: 0;display: -ms-flexbox;display: flex;visibility: hidden;overflow: hidden;height: 100%;transition: all .3s ease;-webkit-transform: translate(0, -10%);transform: translate(0, -10%);opacity: 0;outline: 0;-ms-flex-align: center;align-items: center;
908
+ }#style-manager-user-feedback-modal .modal-dialog
909
+ {
910
+ position: relative;width: auto;margin: 10px;text-align: left;
911
+ }#style-manager-user-feedback-modal .modal-content
912
+ {
913
+ position: relative;display: -ms-flexbox;display: flex;flex-direction: column;border: none;border-radius: 4px;outline: 0;background-color: #fff;background-clip: padding-box;box-shadow: 0 4px 4px 0 rgba(42,54,52,.1),0 8px 8px 0 rgba(42,54,52,.1),0 16px 16px 0 rgba(42,54,52,.1),0 16px 32px 0 rgba(42,54,52,.1),0 32px 64px 0 rgba(42,54,52,.1),0 64px 128px 0 rgba(42,54,52,.1);-ms-flex-direction: column;
914
+ }#style-manager-user-feedback-modal .modal-content p
915
+ {
916
+ color: #000;
917
+ }#style-manager-user-feedback-modal .modal-content p a
918
+ {
919
+ font-weight: 500;color: #9660c6;border-bottom: 1px solid #9660c6;
920
+ }#style-manager-user-feedback-modal .modal-content > form
921
+ {
922
+ margin-bottom: 20px;
923
+ }#style-manager-user-feedback-modal .modal-backdrop
924
+ {
925
+ position: fixed;z-index: 1040;top: 0;right: 0;bottom: 0;left: 0;visibility: hidden;transition: all .3s ease;opacity: 0;background-color: #000;
926
+ }.modal-open #style-manager-user-feedback-modal .modal-backdrop
927
+ {visibility: visible;
928
+
929
+ opacity: .8;
930
+ }#style-manager-user-feedback-modal .modal-header
931
+ {
932
+ display: -ms-flexbox ;display: flex;padding: 30px 48px 10px 48px;-ms-flex-align: start;align-items: flex-start;-ms-flex-pack: justify;justify-content: space-between;
933
+ }#style-manager-user-feedback-modal .modal-header .close.button
934
+ {
935
+ top: -10px;
936
+ }#style-manager-user-feedback-modal .modal-header .close.icon
937
+ {
938
+ opacity: .5;
939
+ }#style-manager-user-feedback-modal .modal-header .close:hover
940
+ {
941
  opacity: 1;
942
+ }#style-manager-user-feedback-modal .modal-title
943
+ {line-height: 1.5;
944
+
945
+ margin-bottom: 10px;
946
+ }#style-manager-user-feedback-modal .modal-title.modal-title--small
947
+ {
948
+ font-weight: 500;
949
+ }#style-manager-user-feedback-modal .modal-body
950
+ {
951
+ position: relative;padding: 30px 30px 0 30px;-ms-flex: 1 1 auto;flex: 1 1 auto;
952
+ }#style-manager-user-feedback-modal .modal-body.full
953
+ {
954
+ padding: 0;
955
+ }#style-manager-user-feedback-modal .modal-body.full .box
956
+ {margin-top: 0;
957
+ padding-top: 0;padding-bottom: 0;
958
+ }#style-manager-user-feedback-modal .modal-body.full + .modal-footer.full .box
959
+ {
960
+ padding-top: 18px;
961
+ }#style-manager-user-feedback-modal .modal-footer
962
+ {
963
+ padding: 30px;text-align: center;
964
+ }#style-manager-user-feedback-modal .modal-footer .box .button:last-child
965
+ {
966
+ margin-bottom: 0;
967
+ }#style-manager-user-feedback-modal .modal-footer.full
968
+ {
969
+ padding: 0;
970
+ }#style-manager-user-feedback-modal .modal-scrollbar-measure
971
+ {
972
+ position: absolute;top: -9999px;overflow: scroll;width: 50px;height: 50px;
973
+ }#style-manager-user-feedback-modal .modal-state
974
+ {
975
+ display: none;
976
+ }#style-manager-user-feedback-modal .modal-state:checked + .modal
977
+ {visibility: visible;
978
 
 
 
979
  opacity: 1;
980
+ }#style-manager-user-feedback-modal .modal-state:checked + .modal .modal__inner
981
+ {
982
+ top: 0;
983
+ }@media (min-width: 576px)
984
+ {
985
+ #style-manager-user-feedback-modal .modal-dialog
986
+ {
987
+ max-width: 655px;margin: 30px auto;
988
+ }#style-manager-user-feedback-modal .modal-sm
989
+ {
990
+ max-width: 300px;
991
+ }
992
+ }@media (min-width: 576px)
993
+ {
994
+ #style-manager-user-feedback-modal .modal-lg
995
+ {
996
+ max-width: 800px;
997
+ }
998
+ }#style-manager-user-feedback .modal-body .box
999
+ {
1000
+ position: relative;display: -ms-flexbox;display: flex;flex-direction: column;margin: 20px 0;padding: 16px 52px;border-radius: 4px;-ms-flex-direction: column;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-ms-flex-align: center;align-items: center;
1001
+ }#style-manager-user-feedback .modal-body .box > *
1002
+ {
1003
+ width: 100%;
1004
+ }#style-manager-user-feedback .modal-body p
1005
+ {
1006
+ font-size: 16px;margin-bottom: 20px;
1007
+ }#style-manager-user-feedback .modal-body textarea
1008
+ {font-family: 'Galano Grotesque Alt', -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;font-size: 16px;line-height: 26px;
1009
+
1010
+ width: 100%;margin: 0;padding: 11px 18px;color: #473850;border: 1px solid #ddd;border-radius: 4px;box-shadow: none;
1011
+ }#style-manager-user-feedback .modal-title
1012
+ {font-family: 'Galano Classic', -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;font-size: 28px;font-weight: 600;line-height: 1.4;
1013
+
1014
+ margin-top: 0;margin-bottom: 34px;text-align: center;
1015
+ }#style-manager-user-feedback .button
1016
+ {font-family: 'Galano Classic', -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;font-size: 16px;font-weight: 600;line-height: 23px;position: relative;display: inline-block;width: 100%;height: auto;margin-top: 20px;padding: 15px 50px;cursor: pointer;transition-timing-function: cubic-bezier(0, 0, .58, 1);transition-duration: .2s;transition-property: -webkit-transform,background,background-color,color,box-shadow;transition-property: transform,background,background-color,color,box-shadow;text-align: center;
1017
+ text-decoration: none;color: #fff;border-radius: 2px;border-radius: 4px;background-color: #9660c6;box-shadow: none;-webkit-font-smoothing: antialiased;
1018
+ }#style-manager-user-feedback .button:hover
1019
+ {-webkit-transform: scale(1.05) translateY(-3px) ;transform: scale(1.05) translateY(-3px);color: #fff;
1020
+ background-color: #9660c6;box-shadow: 0 10px 20px -10px rgba(0,0,0,.7);
1021
+ }#style-manager-user-feedback .second-step
1022
+ {
1023
+ margin-top: 18px;
1024
+ }#style-manager-user-feedback .thanks-step,
1025
+ #style-manager-user-feedback .error-step
1026
+ {
1027
+ text-align: center;
1028
+ }#style-manager-user-feedback .thanks-step .modal-title,
1029
+ #style-manager-user-feedback .error-step .modal-title
1030
+ {
1031
+ margin-bottom: 0;
1032
+ }#style-manager-user-feedback .thanks-step p:last-child,
1033
+ #style-manager-user-feedback .error-step p:last-child
1034
+ {
1035
+ margin-bottom: 10px;
1036
+ }.scorecard
1037
+ {font-family: 'Galano Classic', -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;font-size: 18px;font-weight: 600;
1038
+
1039
+ display: -ms-flexbox;display: flex;text-align: center;color: #9660c6;-ms-flex-align: baseline;align-items: baseline;-ms-flex-pack: space-evenly;justify-content: space-evenly;
1040
+ }.scorecard > label
1041
+ {
1042
+ font-size: 20px;
1043
+ }.scorecard > label span
1044
+ {line-height: 46px;
1045
+
1046
+ display: block;width: 46px;transition: all .25s ease;border: 2px solid #9660c6;border-radius: 100%;background: #fff;
1047
+ }.scorecard > label input[type='radio']
1048
+ {
1049
+ display: none;
1050
+ }.scorecard > label span:hover,
1051
+ .scorecard > label input[type='radio']:checked ~ span
1052
+ {color: #fff;
1053
+ background: #9660c6;
1054
+ }.font-options__wrapper .font-options__options-list
1055
+ {
1056
+ border-color: #b8daeb;box-shadow: 0 10px 20px 0 rgba(0,0,0,.15);
1057
+ }.font-options__wrapper .font-options__option
1058
+ {
1059
+ margin-bottom: 12px;
1060
+ }.font-options__wrapper .font-options__option label
1061
+ {
1062
+ display: block;margin-bottom: 6px;
1063
+ }.font-options__wrapper [type=checkbox]:checked ~ .font-options__options-list
1064
+ {display: block;
1065
 
 
 
1066
  opacity: 1;
1067
+ }input.customify_font_tooltip
1068
+ {
1069
+ display: none;
1070
+ }ul.font-options__options-list .select2-container
1071
+ {
1072
+ width: 100% !important;
1073
+ }ul.font-options__options-list .select2-container .select2-selection--single
1074
+ {
1075
+ -webkit-appearance: initial;
1076
+ }ul.font-options__options-list .select2-container .select2-selection--single .select2-selection__arrow
1077
+ {
1078
+ display: none;
1079
+ }ul.font-options__options-list .select2-container--default .select2-selection--single .select2-selection__rendered
1080
+ {line-height: initial;
1081
+
1082
+ color: inherit;
1083
+ }.select2-container.select2-container--open
1084
+ {
1085
+ z-index: 99999999;
1086
+ }#customize-theme-controls .select2-container
1087
+ {
1088
+ width: 100% !important;
1089
+ }#customize-theme-controls .select2-container .select2-selection--multiple
1090
+ {height: auto;padding: 4px 8px 4px;background: none;
1091
+
1092
+ -webkit-appearance: initial;
1093
+ }#customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__arrow
1094
+ {
1095
+ display: none;
1096
+ }#customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered
1097
+ {display: -ms-flexbox;display: flex;
1098
+
1099
+ padding: 0;
1100
+ }#customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search--inline
1101
+ {
1102
+ -ms-flex: 1 ;flex: 1;
1103
+ }#customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search--inline .select2-search__field[class]
1104
+ {
1105
+ min-width: 100%;margin-top: 3px !important;border-width: 0;
1106
+ }#customize-theme-controls .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice
1107
+ {margin-top: 0;margin-right: 6px;
1108
+ padding: 3px 7px;border-color: #e0e8ef;background-color: #f6fbff;
1109
+ }#customize-theme-controls .select2-container .select2-search--inline .select2-search__field
1110
+ {min-width: 9em;
1111
+ height: 29px;margin-top: 0;
1112
+ }.select2-container--default .select2-results__option[aria-selected=true][class]
1113
+ {pointer-events: none;opacity: .3;
1114
+ background: transparent;
1115
+ }.select2-container .select2-dropdown
1116
+ {
1117
+ border-color: #e0e8ef;
1118
+ }#customize-theme-controls .widget-content .accordion-container
1119
+ {margin-top: 20px;margin-right: -10px;margin-bottom: 10px;
1120
+ margin-left: -10px;
1121
+ }#customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content
1122
+ {
1123
+ position: relative;left: 0;overflow: hidden;max-height: 0;padding-top: 0;padding-bottom: 0;transition: all .4s ease;color: #416b7e;
1124
+ }#customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content p:first-child
1125
+ {
1126
+ margin-top: 0;
1127
+ }#customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-content p:last-child
1128
+ {
1129
+ margin-bottom: 0;
1130
+ }#customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-title
1131
+ {
1132
+ color: #39474d;
1133
+ }#customize-theme-controls .widget-content .accordion-container .accordion-section .accordion-section-title:after
1134
+ {
1135
+ content: '\f142';-webkit-transform: rotate(180deg);transform: rotate(180deg);
1136
+ }#customize-theme-controls .widget-content .accordion-container .accordion-section.open
1137
+ {
1138
+ border-bottom: none;
1139
+ }#customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-content
1140
+ {
1141
+ max-height: 100%;padding-top: 17px;padding-bottom: 17px;
1142
+ }#customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-title
1143
+ {
1144
+ border-bottom: 1px solid;
1145
+ }#customize-theme-controls .widget-content .accordion-container .accordion-section.open .accordion-section-title:after
1146
+ {
1147
+ -webkit-transform: rotate(0deg) ;transform: rotate(0deg);
1148
+ }#customize-theme-controls .widget-content .accordion-container label.customize-control-title,
1149
+ #customize-theme-controls .widget-content .accordion-container label.separator.label
1150
+ {
1151
+ cursor: default;
1152
+ }.widget .widget-content > p input[type=checkbox],
1153
+ .widget .widget-content > p input[type=radio]
1154
+ {margin-top: 3px;
1155
+ margin-bottom: 3px;
1156
+ }.widget .widget-content small
1157
+ {display: block;
1158
+
1159
+ margin-top: 5px;
1160
+ }#available-widgets [class*=pixelgrade] .widget .widget-title:before,
1161
+ #available-widgets [class*=featured-posts] .widget .widget-title:before,
1162
+ #available-widgets [class*=categories-image-grid] .widget .widget-title:before
1163
+ {
1164
+ content: '\f538';color: #9660c6;
1165
+ }#available-widgets [class*=pixelgrade-featured-posts-slideshow] .widget .widget-title:before
1166
+ {
1167
+ content: '\f233';
1168
+ }#available-widgets [class*=pixelgrade-featured-posts-carousel] .widget .widget-title:before
1169
+ {
1170
+ content: '\f169';
1171
+ }#available-widgets [class*=featured-posts-grid] .widget .widget-title:before
1172
+ {
1173
+ content: '\f180';
1174
+ }#available-widgets [class*=featured-posts-list] .widget .widget-title:before
1175
+ {
1176
+ content: '\f164';
1177
+ }#available-widgets [class*=categories-image-grid] .widget .widget-title:before
1178
+ {
1179
+ content: '\f163';
1180
+ }#available-widgets [class*=pixelgrade-promo-box] .widget .widget-title:before
1181
+ {
1182
+ content: '\f488';
1183
+ }.ui-tooltip
1184
+ {
1185
+ z-index: 999999;
1186
+ }.wp-customizer .widget-conditional .condition-control:after
1187
+ {display: table;clear: both;
1188
+
1189
+ content: ' ';
1190
+ }.wp-customizer .widget-conditional .selection
1191
+ {margin-right: 0;margin-bottom: 10px;margin-left: 0;
1192
+ padding-right: 50px;padding-bottom: 19px;padding-left: 28px;border-bottom: 1px solid #cbcfd4;
1193
+ }.wp-customizer .widget-conditional .condition:last-child .selection
1194
+ {
1195
+ border: 0;
1196
+ }.wp-customizer .widget-conditional select
1197
+ {width: 170px;
1198
+ max-width: 100%;
1199
+ }.wp-customizer .widget-conditional .condition-top select
1200
+ {
1201
+ width: 130px;
1202
+ }.pix_customizer_setting .customize-inside-control-row
1203
+ {
1204
+ position: relative;overflow: hidden;width: 100% !important;height: 64px;margin-left: 0 !important;text-indent: 0 !important;border-radius: 5px;background-position: 50% 50%;background-size: cover;
1205
+ }.pix_customizer_setting .customize-inside-control-row:before
1206
+ {position: absolute;z-index: 10;top: 0;right: 0;bottom: 0;left: 0;
1207
+
1208
+ content: '';pointer-events: none;box-shadow: inset 0 0 3px 0 rgba(0,0,0,.2);
1209
+ }.pix_customizer_setting .customize-inside-control-row:hover:before
1210
+ {
1211
+ box-shadow: inset 0 0 3px 0 rgba(0,0,0,.4);
1212
+ }.pix_customizer_setting .customize-inside-control-row:hover .palette__item
1213
+ {
1214
+ -webkit-transform: translateY(0%) ;transform: translateY(0%);
1215
+ }.pix_customizer_setting .customize-inside-control-row:hover label
1216
+ {
1217
+ left: 10px;
1218
+ }.pix_customizer_setting .customize-inside-control-row input
1219
+ {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1220
  opacity: 0;
1221
+ }.pix_customizer_setting .customize-inside-control-row input:checked + label .preview__letter--checked
1222
+ {
1223
+ display: inline-block;vertical-align: middle;
1224
+ }.pix_customizer_setting .customize-inside-control-row input:checked + label .preview__letter
1225
+ {
1226
+ display: none;
1227
+ }.pix_customizer_setting .customize-inside-control-row label
1228
+ {
1229
+ position: absolute;z-index: 2;top: 0;left: 0;display: -ms-flexbox;display: flex;width: 100%;height: 100%;margin-top: 0 !important;padding: 0 10px;transition: all .3s ease;-ms-flex-align: center;align-items: center;
1230
+ }.pix_customizer_setting .customize-inside-control-row .palette
1231
+ {
1232
+ position: absolute;z-index: 1;top: 0;left: 0;display: -ms-flexbox;display: flex;width: 100%;height: 100%;transition: all .2s ease;
1233
+ }.pix_customizer_setting .customize-inside-control-row .palette__item
1234
+ {transition: all .3s ease;-webkit-transform: translateY(100%);transform: translateY(100%);
1235
+
1236
+ -ms-flex: 1;flex: 1;
1237
+ }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(1)
1238
+ {
1239
+ transition-delay: 0s;
1240
+ }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(2)
1241
+ {
1242
+ transition-delay: .05s;
1243
+ }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(3)
1244
+ {
1245
+ transition-delay: .1s;
1246
+ }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(4)
1247
+ {
1248
+ transition-delay: .15s;
1249
+ }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(5)
1250
+ {
1251
+ transition-delay: .2s;
1252
+ }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(6)
1253
+ {
1254
+ transition-delay: .25s;
1255
+ }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(7)
1256
+ {
1257
+ transition-delay: .3s;
1258
+ }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(8)
1259
+ {
1260
+ transition-delay: .35s;
1261
+ }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(9)
1262
+ {
1263
+ transition-delay: .4s;
1264
+ }.pix_customizer_setting .customize-inside-control-row .palette__item:nth-child(10)
1265
+ {
1266
+ transition-delay: .45s;
1267
+ }.pix_customizer_setting .customize-inside-control-row .preview__letter,
1268
+ .pix_customizer_setting .customize-inside-control-row .preview__letter--checked
1269
+ {font-style: normal;
1270
+
1271
+ display: inline-block;min-width: 26px;min-height: 26px;margin-right: 5px;padding: 3px;text-align: center;vertical-align: baseline;color: white;border-radius: 2px;background-repeat: no-repeat;background-position: center center;background-size: 15px 15px;
1272
+ }.pix_customizer_setting .customize-inside-control-row .preview__letter--checked
1273
+ {
1274
+ display: none;
1275
+ }[id*='sm_current_color_palette_control'] .customize-inside-control-row .palette__item[class]
1276
+ {
1277
+ -webkit-transform: none ;transform: none;
1278
+ }[id*='sm_current_color_palette_control'] .variation-control
1279
+ {
1280
+ display: -ms-flexbox ;display: flex;
1281
+ }.label__inner
1282
+ {z-index: 2;padding: 7px 12px 7px 7px;
1283
+
1284
+ color: #000;border-radius: 3px;background: #f5f6f1;box-shadow: 0 2px 5px rgba(0,0,0,.15);
1285
+ }.picker
1286
+ {
1287
+ position: relative;top: 0;left: 50%;overflow: hidden;width: 80%;max-width: 3em;margin-top: auto;margin-bottom: auto;-webkit-transform: translate3d(-50%, 0, 0);transform: translate3d(-50%, 0, 0);border-radius: 50%;
1288
+ }.colors .picker > i
1289
+ {position: absolute;z-index: 20;top: 0;right: 0;bottom: 0;left: 0;
1290
+
1291
+ display: block;pointer-events: none;border-radius: 50%;box-shadow: inset 0 0 3px 0 rgba(0,0,0,.2);
1292
+ }.picker:before,
1293
+ .picker:after
1294
+ {display: block;
1295
+
1296
+ content: '';border-radius: 50%;background: currentColor;
1297
+ }.picker:before
1298
+ {
1299
+ padding-top: 100%;
1300
+ }.picker:after
1301
+ {
1302
+ position: absolute;top: 0;left: 0;width: 100%;height: 100%;
1303
+ }.fill
1304
+ {
1305
+ overflow: hidden;
1306
+ }.color:first-child .fill
1307
+ {
1308
+ border-top-left-radius: 5px;border-bottom-left-radius: 5px;
1309
+ }.color:last-child .fill
1310
+ {
1311
+ border-top-right-radius: 5px;border-bottom-right-radius: 5px;
1312
+ }.label
1313
+ {
1314
+ margin-right: auto;
1315
+ }#customize-theme-controls [id*='sm_current_color_palette_control']
1316
+ {
1317
+ display: block;width: auto;
1318
+ }#customize-theme-controls [id*='sm_current_color_palette_control'] .color-palette-container
1319
+ {
1320
+ background: white;
1321
+ }#customize-theme-controls [id*='sm_current_color_palette_control'] .color-palette-container .description
1322
+ {
1323
+ margin-bottom: 15px;
1324
+ }#customize-theme-controls [id*='sm_current_color_palette_control'] .description.c-color-palette__notification
1325
+ {font-size: inherit;font-weight: bold;margin-bottom: 0;
1326
+ padding-top: 19px;
1327
+ }.c-color-palette__fields
1328
+ {
1329
+ position: relative;
1330
+ }.c-color-palette .iris-picker
1331
+ {
1332
+ position: absolute;z-index: 100;top: 100%;left: 0;margin-top: 1em;border: 0;box-shadow: black 0 3px 12px -4px;
1333
+ }.c-color-palette .iris-picker .iris-square-handle
1334
+ {top: -6px;left: -6px;
1335
+
1336
+ border-color: transparent;
1337
+ }.c-color-palette .iris-picker .iris-square-handle:after
1338
+ {
1339
+ position: absolute;top: 0;right: 0;bottom: 0;left: 0;border: 2px solid white;
1340
+ }.c-color-palette .iris-picker .iris-square-value
1341
+ {
1342
+ box-shadow: none !important;
1343
+ }.colors
1344
+ {
1345
+ position: relative;display: -ms-flexbox;display: flex;width: 100%;height: 3em;-ms-flex-wrap: wrap;flex-wrap: wrap;-ms-flex-align: center;align-items: center;
1346
+ }.color
1347
+ {
1348
+ display: -ms-flexbox ;display: flex;overflow: hidden;flex-direction: column;transition: -ms-flex-positive .3s cubic-bezier(.18, .89, .32, 1.28);transition: flex-grow .3s cubic-bezier(.18, .89, .32, 1.28);-ms-flex-direction: column;-ms-flex: 1 1 0;flex: 1 1 0;
1349
+ }.color.hidden
1350
+ {
1351
+ display: -ms-flexbox ;display: flex;transition: -ms-flex-positive .3s cubic-bezier(.6, -1, .74, .05);transition: flex-grow .3s cubic-bezier(.6, -1, .74, .05);-ms-flex-positive: 0;flex-grow: 0;
1352
+ }.color.hidden .picker
1353
+ {transition: opacity .2s ease-out;
1354
 
 
 
 
 
 
 
1355
  opacity: 0;
1356
+ }.color .picker
1357
+ {cursor: pointer;
1358
+ transition: opacity .3s ease-in-out, border-color .3s ease-in-out;
1359
+ }.color.inactive .picker
1360
+ {
1361
+ opacity: .2;
1362
+ }.color.inactive .picker:hover
1363
+ {
 
 
 
 
1364
  opacity: 1;
1365
+ }input.c-color-palette__input[class]
1366
+ {
1367
+ margin-top: 1em;
1368
+ }#customize-control-sm_toggle_advanced_settings_control
1369
+ {
1370
+ margin-bottom: 0;opacity: 0;
1371
+ }#customize-control-sm_toggle_advanced_settings_control button
1372
+ {
1373
+ width: 100%;
1374
+ }@-webkit-keyframes bounceIn
1375
+ {
1376
+ 0%,
1377
+ 20%,
1378
+ 40%,
1379
+ 60%,
1380
+ 80%,
1381
+ 100%
1382
+ {
1383
+ -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1) ;animation-timing-function: cubic-bezier(.215, .61, .355, 1);
1384
+ }0%
1385
+ {-webkit-transform: scale3d(.3, .3, .3) ;transform: scale3d(.3, .3, .3);
1386
+
1387
+ opacity: 0;
1388
+ }20%
1389
+ {
1390
+ -webkit-transform: scale3d(1.1, 1.1, 1.1) ;transform: scale3d(1.1, 1.1, 1.1);
1391
+ }40%
1392
+ {
1393
+ -webkit-transform: scale3d(.9, .9, .9) ;transform: scale3d(.9, .9, .9);
1394
+ }60%
1395
+ {-webkit-transform: scale3d(1.03, 1.03, 1.03) ;transform: scale3d(1.03, 1.03, 1.03);
1396
+
1397
+ opacity: 1;
1398
+ }80%
1399
+ {
1400
+ -webkit-transform: scale3d(.97, .97, .97) ;transform: scale3d(.97, .97, .97);
1401
+ }100%
1402
+ {-webkit-transform: scale3d(1, 1, 1) ;transform: scale3d(1, 1, 1);
1403
+
1404
+ opacity: 1;
1405
+ }
1406
+ }@keyframes bounceIn
1407
+ {
1408
+ 0%,
1409
+ 20%,
1410
+ 40%,
1411
+ 60%,
1412
+ 80%,
1413
+ 100%
1414
+ {
1415
+ -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1) ;animation-timing-function: cubic-bezier(.215, .61, .355, 1);
1416
+ }0%
1417
+ {-webkit-transform: scale3d(.3, .3, .3) ;transform: scale3d(.3, .3, .3);
1418
+
1419
+ opacity: 0;
1420
+ }20%
1421
+ {
1422
+ -webkit-transform: scale3d(1.1, 1.1, 1.1) ;transform: scale3d(1.1, 1.1, 1.1);
1423
+ }40%
1424
+ {
1425
+ -webkit-transform: scale3d(.9, .9, .9) ;transform: scale3d(.9, .9, .9);
1426
+ }60%
1427
+ {-webkit-transform: scale3d(1.03, 1.03, 1.03) ;transform: scale3d(1.03, 1.03, 1.03);
1428
+
1429
+ opacity: 1;
1430
+ }80%
1431
+ {
1432
+ -webkit-transform: scale3d(.97, .97, .97) ;transform: scale3d(.97, .97, .97);
1433
+ }100%
1434
+ {-webkit-transform: scale3d(1, 1, 1) ;transform: scale3d(1, 1, 1);
1435
+
1436
+ opacity: 1;
1437
+ }
1438
+ }#customize-theme-controls #sub-accordion-panel-style_manager_panel .customize-panel-description,
1439
+ #customize-theme-controls #sub-accordion-panel-theme_options_panel .customize-panel-description
1440
+ {
1441
+ display: block;
1442
+ }#customize-theme-controls li#accordion-panel-style_manager_panel h3.accordion-section-title:before
1443
+ {font-family: dashicons;font-size: 17px;
1444
+
1445
+ position: relative;float: right;margin-right: 28px;padding: 1px;content: '';color: #aed2e5;-webkit-font-smoothing: antialiased;
1446
+ }#customize-theme-controls li#accordion-panel-style_manager_panel h3.accordion-section-title:before
1447
+ {
1448
+ font-size: 18px;color: #f8bc30;
1449
+ }#customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title:before
1450
+ {font-family: dashicons;font-size: 17px;
1451
+
1452
+ position: relative;float: right;margin-right: 28px;padding: 1px;content: '';color: #aed2e5;-webkit-font-smoothing: antialiased;
1453
+ }#customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title
1454
+ {
1455
+ border-top: none;
1456
+ }#customize-theme-controls li#accordion-section-sm_font_palettes_section h3.accordion-section-title:before
1457
+ {font-family: dashicons;font-size: 17px;
1458
+
1459
+ position: relative;float: right;margin-right: 28px;padding: 1px;content: '';color: #aed2e5;-webkit-font-smoothing: antialiased;
1460
+ }#customize-theme-controls li#accordion-section-sm_color_palettes_section h3.accordion-section-title:before,
1461
+ #customize-theme-controls li#accordion-section-sm_font_palettes_section h3.accordion-section-title:before
1462
+ {margin-top: -2px;margin-right: 5px;
1463
+ padding: 3px;
1464
+ }#customize-theme-controls li#accordion-panel-theme_options_panel h3.accordion-section-title:before
1465
+ {font-family: dashicons;font-size: 17px;
1466
+
1467
+ position: relative;float: right;margin-right: 28px;padding: 1px;content: '';color: #aed2e5;-webkit-font-smoothing: antialiased;
1468
+ }#customize-theme-controls li#accordion-panel-theme_options_panel h3.accordion-section-title
1469
+ {margin: 0 0 15px 0;border-right: none;
1470
+ border-bottom: 1px solid #ddd;border-left: none;
1471
+ }#customize-theme-controls li[id$='[general]'],
1472
+ #customize-theme-controls li[id$='[footer_section]']
1473
+ {margin: 0 0 15px 0;border-right: none;
1474
+ border-bottom: 1px solid #ddd;border-left: none;
1475
+ }#customize-theme-controls li[id$='[general]'] h3.accordion-section-title
1476
+ {
1477
+ border-top: none;
1478
+ }.color .disc
1479
+ {position: absolute;z-index: 15;top: 0;right: 0;bottom: 0;left: 0;
1480
+
1481
+ display: block;overflow: hidden;transition: opacity .3s ease-in-out;pointer-events: none;opacity: 0;
1482
+ }.color .disc:after
1483
+ {position: absolute;top: -50%;left: -50%;display: block;width: 200%;height: 200%;padding-top: 100%;
1484
+
1485
+ content: '';-webkit-transform: scale(1);transform: scale(1);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);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;-webkit-filter: blur(6px) saturate(.7) brightness(1.1);filter: blur(6px) saturate(.7) brightness(1.1);
1486
+ }.color.altered .disc
1487
+ {
1488
  opacity: 1;
1489
+ }.customize-control-color .wp-picker-container .iris-picker .iris-palette-container
1490
+ {
1491
+ display: -ms-flexbox ;display: flex;width: 215px;
1492
+ }.customize-control-color .wp-picker-container .iris-picker .iris-palette
1493
+ {float: none;
1494
+
1495
+ width: auto !important;height: auto !important;-ms-flex: 1 1 0;flex: 1 1 0;
1496
+ }.customize-control-color .wp-picker-container .iris-picker .iris-palette:after
1497
+ {display: block;padding-top: 100%;
1498
+
1499
+ content: '';
1500
+ }.c-color-palette
1501
+ {
1502
+ padding: 30px 20px 18px;
1503
+ }[id='customize-control-sm_current_color_palette_control'][id]
1504
+ {
1505
+ margin-bottom: 0;
1506
+ }[id='customize-control-sm_current_color_palette_control'][id] ~ .customize-control
1507
+ {margin-bottom: 0;padding: 24px 20px 0;
1508
+
1509
+ background-color: #fff;
1510
+ }#customize-control-sm_dark_color_primary_slider_control,
1511
+ #customize-control-sm_dark_color_secondary_slider_control,
1512
+ #customize-control-sm_dark_color_tertiary_slider_control
1513
+ {
1514
+ display: none !important;
1515
+ }.sm_color_matrix
1516
+ {
1517
+ display: -ms-flexbox ;display: flex;display: none;margin-left: -15px;-ms-flex-wrap: wrap;flex-wrap: wrap;
1518
+ }.sm_color_matrix > *
1519
+ {
1520
+ display: grid;padding-top: 15px;padding-left: 15px;grid-auto-rows: 2px;grid-auto-columns: 2px;-ms-flex: 0 0 33.33333%;flex: 0 0 33.33333%;
1521
+ }.sm_color_matrix > * > *
1522
+ {-webkit-animation-name: bounceIn ;animation-name: bounceIn;-webkit-animation-duration: .75s;animation-duration: .75s;border: 1px solid #ccc;border-radius: 50%;
1523
+ background-color: currentColor;
1524
+ }.sm_color_matrix > * > :nth-child(1)
1525
+ {
1526
+ grid-area: 16 / 12 / span 12 / span 12;
1527
+ }.sm_color_matrix > * > :nth-child(2)
1528
+ {
1529
+ grid-area: 26 / 24 / span 4 / span 4;
1530
+ }.sm_color_matrix > * > :nth-child(3)
1531
+ {
1532
+ grid-area: 13 / 24 / span 4 / span 4;
1533
+ }.sm_color_matrix > * > :nth-child(4)
1534
+ {
1535
+ grid-area: 8 / 8 / span 8 / span 8;
1536
+ }.sm_color_matrix > * > :nth-child(5)
1537
+ {
1538
+ grid-area: 32 / 8 / span 4 / span 4;
1539
+ }.sm_color_matrix > * > :nth-child(6)
1540
+ {
1541
+ grid-area: 30 / 16 / span 8 / span 8;
1542
+ }.sm_color_matrix > * > :nth-child(7)
1543
+ {
1544
+ grid-area: 4 / 20 / span 8 / span 8;
1545
+ }.sm_color_matrix > * > :nth-child(8)
1546
+ {
1547
+ grid-area: 17 / 26 / span 8 / span 8;
1548
+ }.sm_color_matrix > * > :nth-child(9)
1549
+ {
1550
+ grid-area: 22 / 2 / span 8 / span 8;
1551
+ }.sm_color_matrix > * > :nth-child(10)
1552
+ {
1553
+ grid-area: 28 / 11 / span 2 / span 2;
1554
+ }.sm_color_matrix > * > :nth-child(11)
1555
+ {
1556
+ grid-area: 9 / 31 / span 6 / span 6;
1557
+ }.sm_color_matrix > * > :nth-child(11)
1558
+ {
1559
+ grid-area: 26 / 30 / span 9 / span 9;
1560
+ }.sm_color_matrix > * > :nth-child(12)
1561
+ {
1562
+ grid-area: 17 / 7 / span 4 / span 4;
1563
+ }.sm_color_matrix > * > :nth-child(13)
1564
+ {
1565
+ grid-area: 19 / 36 / span 6 / span 6;
1566
+ }.sm_color_matrix > * > :nth-child(14)
1567
+ {
1568
+ grid-area: 12 / 18 / span 2 / span 2;
1569
+ }.sm_color_matrix > * > :nth-child(n+15)
1570
+ {
1571
+ display: none;
1572
+ }.sm-tabs
1573
+ {
1574
+ display: -ms-flexbox ;display: flex;padding: 0 16px;text-align: center;border-bottom: 1px solid #dfe8ef;-ms-flex-pack: justify;justify-content: space-between;
1575
+ }.sm-tabs__item
1576
+ {font-size: 14px;margin-bottom: -1px;
1577
+ padding: 12px 0;cursor: pointer;transition: all .2s ease;opacity: .7;color: #416b7e;border-bottom: 3px solid transparent;-ms-flex-preferred-size: 31%;flex-basis: 31%;
1578
+ }.sm-tabs__item:not(.sm-tabs__item--active):hover
1579
+ {opacity: 1;
1580
+ color: #2a3b44;border-bottom-color: #e2e4e7;
1581
+ }.sm-tabs__item--active
1582
+ {opacity: 1;
1583
+ color: #2a3b44;border-bottom-color: #57abd5;
1584
+ }[id='sub-accordion-section-sm_color_palettes_section']
1585
+ {
1586
+ display: -ms-flexbox !important ;display: flex !important;overflow: hidden;flex-direction: column;padding: 12px 0 0 !important;-ms-flex-direction: column;
1587
+ }[id='sub-accordion-section-sm_color_palettes_section'] #customize-control-sm_color_palette_control
1588
+ {overflow-y: scroll;margin-bottom: 0;padding-top: 12px;
1589
+
1590
+ -ms-flex-negative: 0;flex-shrink: 0;-ms-flex-positive: 1;flex-grow: 1;
1591
+ }[id='sub-accordion-section-sm_color_palettes_section'] > *
1592
+ {padding: 0 12px;
1593
+
1594
+ -ms-flex-positive: 0;flex-grow: 0;
1595
+ }[id='sub-accordion-section-sm_color_palettes_section'] [id='customize-control-sm_current_color_palette_control'] ~ *
1596
+ {
1597
+ display: none !important;
1598
+ }[id='sub-accordion-section-sm_color_palettes_section'] [id='customize-control-sm_palettes_description_control'] span,
1599
+ [id='sub-accordion-section-sm_color_palettes_section'] [id='customize-control-sm_filters_description_control'] span,
1600
+ [id='sub-accordion-section-sm_color_palettes_section'] [id='customize-control-sm_customize_description_control'] span
1601
+ {
1602
+ margin: 0;
1603
+ }[id='sub-accordion-section-sm_color_palettes_section'].sm-view-palettes [id='customize-control-sm_palettes_description_control'],
1604
+ [id='sub-accordion-section-sm_color_palettes_section'].sm-view-palettes [id='customize-control-sm_color_palette_control']
1605
+ {
1606
+ display: block !important;
1607
+ }[id='sub-accordion-section-sm_color_palettes_section'].sm-view-filters [id='customize-control-sm_filters_description_control'],
1608
+ [id='sub-accordion-section-sm_color_palettes_section'].sm-view-filters [id='customize-control-sm_palette_filter_control']
1609
+ {
1610
+ display: block !important;
1611
+ }[id='sub-accordion-section-sm_color_palettes_section'].sm-view-customize [id='customize-control-sm_customize_description_control'],
1612
+ [id='sub-accordion-section-sm_color_palettes_section'].sm-view-customize [id='customize-control-sm_coloration_level_control'],
1613
+ [id='sub-accordion-section-sm_color_palettes_section'].sm-view-customize [id='customize-control-sm_color_diversity_control'],
1614
+ [id='sub-accordion-section-sm_color_palettes_section'].sm-view-customize [id='customize-control-sm_shuffle_colors_control'],
1615
+ [id='sub-accordion-section-sm_color_palettes_section'].sm-view-customize [id='customize-control-sm_dark_mode_control']
1616
+ {
1617
+ display: block !important;
1618
+ }[id='sub-accordion-section-sm_color_palettes_section'] [id='customize-control-sm_spacing_bottom_control'][id]
1619
+ {
1620
+ display: block !important;min-height: 24px;-ms-flex-positive: 1;flex-grow: 1;
1621
+ }[id='customize-control-sm_color_palette_control'] .customize-control-title,
1622
+ [id='customize-control-sm_color_palette_control'] .separator.label,
1623
+ [id='customize-control-sm_color_palette_control'] .customize-control-description
1624
+ {
1625
+ display: none;
1626
+ }.customize-control-radio[class][id='customize-control-sm_palette_filter_control'] > .customize-inside-control-row:not(:only-of-type)
1627
+ {
1628
+ display: block;width: auto;
1629
+ }.color[class*='sm_color'][class*='_connected'],
1630
+ .color[class*='sm_dark'][class*='_connected'],
1631
+ .color[class*='sm_light'][class*='_connected']
1632
+ {
1633
+ display: none;
1634
+ }.c-color-palette__colors
1635
+ {
1636
+ position: relative;
1637
+ }.c-color-palette canvas,
1638
+ .c-color-palette svg
1639
+ {
1640
+ max-width: 100%;height: auto;
1641
+ }.c-color-palette__fields
1642
+ {
1643
+ position: absolute;z-index: 100;top: 100%;right: 0;left: 0;
1644
+ }[id='sub-accordion-section-sm_color_palettes_section'] > .customize-section-description-container
1645
+ {
1646
+ margin-bottom: 0;border-bottom: 1px solid #dfe8ef;
1647
  }
customify.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Customify
4
  Plugin URI: https://wordpress.org/plugins/customify/
5
  Description: A Theme Customizer Booster
6
- Version: 1.9.1
7
  Author: Pixelgrade
8
  Author URI: https://pixelgrade.com
9
  Author Email: contact@pixelgrade.com
@@ -61,7 +61,7 @@ function PixCustomifyPlugin() {
61
  */
62
  require_once plugin_dir_path( __FILE__ ) . 'class-pixcustomify.php';
63
 
64
- $instance = PixCustomifyPlugin::instance( __FILE__, '1.9.1' );
65
 
66
  return $instance;
67
  }
3
  Plugin Name: Customify
4
  Plugin URI: https://wordpress.org/plugins/customify/
5
  Description: A Theme Customizer Booster
6
+ Version: 2.0.0
7
  Author: Pixelgrade
8
  Author URI: https://pixelgrade.com
9
  Author Email: contact@pixelgrade.com
61
  */
62
  require_once plugin_dir_path( __FILE__ ) . 'class-pixcustomify.php';
63
 
64
+ $instance = PixCustomifyPlugin::instance( __FILE__, '2.0.0' );
65
 
66
  return $instance;
67
  }
features/class-Font_Selector.php CHANGED
@@ -54,7 +54,10 @@ class Customify_Font_Selector {
54
 
55
  var append_style_to_iframe = function (ifrm_id, styleElment) {
56
  var ifrm = window.frames[ifrm_id];
57
- ifrm = ( ifrm.contentDocument || ifrm.contentDocument || ifrm.document );
 
 
 
58
  var head = ifrm.getElementsByTagName('head')[0];
59
 
60
  if (typeof styleElment !== "undefined") {
54
 
55
  var append_style_to_iframe = function (ifrm_id, styleElment) {
56
  var ifrm = window.frames[ifrm_id];
57
+ if ( typeof ifrm === "undefined" ) {
58
+ return;
59
+ }
60
+ ifrm = ( ifrm.contentDocument || ifrm.document );
61
  var head = ifrm.getElementsByTagName('head')[0];
62
 
63
  if (typeof styleElment !== "undefined") {
features/customizer/controls/class-Pix_Customize_SM_radio_control.php ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Class Pix_Customize_SM_radio_Control
4
+ */
5
+ class Pix_Customize_SM_radio_Control extends Pix_Customize_Control {
6
+ public $type = 'sm_radio';
7
+
8
+ /**
9
+ * Render the control's content.
10
+ *
11
+ * @since 3.4.0
12
+ */
13
+ public function render_content() {
14
+ $input_id = '_customize-input-' . $this->id;
15
+ $name = '_customize-radio-' . $this->id;
16
+ ?>
17
+ <?php if ( ! empty( $this->label ) ) : ?>
18
+ <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
19
+ <?php endif; ?>
20
+ <div class="sm-radio-group">
21
+ <?php foreach ( $this->choices as $value => $label ) { ?>
22
+ <input
23
+ type="radio"
24
+ value="<?php echo esc_attr( $value ) ?>"
25
+ id="<?php echo esc_attr( $input_id . '-radio-' . $value ); ?>"
26
+ name="<?php echo esc_attr( $name ) ?>"
27
+ <?php $this->link(); ?>
28
+ <?php if ( $value === $this->settings['default']->default ) { echo 'data-default="true"'; }; ?>
29
+ <?php checked( $this->value(), $value, true ); ?>
30
+ >
31
+ <label for="<?php echo esc_attr( $input_id . '-radio-' . $value ); ?>"><?php echo esc_html( $label ) ?></label>
32
+ <?php } ?>
33
+ </div>
34
+
35
+ <?php }
36
+ }
features/customizer/controls/class-Pix_Customize_SM_switch_control.php ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Class Pix_Customize_SM_radio_Control
4
+ */
5
+ class Pix_Customize_SM_switch_Control extends Pix_Customize_Control {
6
+ public $type = 'sm_switch';
7
+
8
+ /**
9
+ * Render the control's content.
10
+ *
11
+ * @since 3.4.0
12
+ */
13
+ public function render_content() {
14
+ $input_id = '_customize-input-' . $this->id;
15
+ $name = '_customize-radio-' . $this->id;
16
+ ?>
17
+ <?php if ( ! empty( $this->label ) ) : ?>
18
+ <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
19
+ <?php endif; ?>
20
+ <div class="sm-switch">
21
+ <?php foreach ( array_reverse( $this->choices ) as $value => $label ) { ?>
22
+ <input
23
+ type="radio"
24
+ value="<?php echo esc_attr( $value ) ?>"
25
+ id="<?php echo esc_attr( $input_id . '-radio-' . $value ); ?>"
26
+ name="<?php echo esc_attr( $name ) ?>"
27
+ <?php $this->link(); ?>
28
+ <?php checked( $this->value(), $value, true ); ?>
29
+ >
30
+ <label for="<?php echo esc_attr( $input_id . '-radio-' . $value ); ?>"><?php echo $label ?></label>
31
+ <?php } ?>
32
+ </div>
33
+
34
+ <?php }
35
+ }
includes/class-customify-color-palettes.php CHANGED
@@ -169,26 +169,29 @@ class Customify_Color_Palettes {
169
  'choices_type' => 'color_palette',
170
  'choices' => $this->get_palettes(),
171
  ),
172
- 'sm_color_palette_variation' => array(
173
  'type' => 'radio',
174
  'setting_type' => 'option',
175
- 'setting_id' => 'sm_color_palette_variation',
176
- 'label' => esc_html__( 'Palette Variation', 'customify' ),
177
- 'default' => 'light',
 
178
  'live' => true,
179
- 'priority' => 10.5,
180
- 'choices' => array(
181
- 'light' => esc_html__( 'light', 'customify' ),
182
- 'light_alt' => esc_html__( 'light_alt', 'customify' ),
183
-
184
- 'dark' => esc_html__( 'dark', 'customify' ),
185
- 'dark_alt' => esc_html__( 'dark_alt', 'customify' ),
186
-
187
- 'colorful' => esc_html__( 'colorful', 'customify' ),
188
- 'colorful_alt' => esc_html__( 'colorful_alt', 'customify' ),
 
 
189
  ),
190
  ),
191
- 'sm_color_primary' => array(
192
  'type' => 'color',
193
  // We will bypass the plugin setting regarding where to store - we will store it cross-theme in wp_options
194
  'setting_type' => 'option',
@@ -196,90 +199,297 @@ class Customify_Color_Palettes {
196
  'setting_id' => 'sm_color_primary',
197
  // We don't want to refresh the preview window, even though we have no direct effect on it through this field.
198
  'live' => true,
199
- 'priority' => 20,
200
  'label' => esc_html__( 'Color Primary', 'customify' ),
201
  'default' => '#ffeb00',
202
- 'connected_fields' => array(),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
203
  ),
204
  'sm_color_secondary' => array(
205
  'type' => 'color',
206
  'setting_type' => 'option',
207
  'setting_id' => 'sm_color_secondary',
208
  'live' => true,
209
- 'priority' => 20.1,
210
  'label' => esc_html__( 'Color Secondary', 'customify' ),
211
  'default' => '#00ecff',
212
- 'connected_fields' => array(),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
213
  ),
214
  'sm_color_tertiary' => array(
215
  'type' => 'color',
216
  'setting_type' => 'option',
217
  'setting_id' => 'sm_color_tertiary',
218
  'live' => true,
219
- 'priority' => 20.2,
220
  'label' => esc_html__( 'Color Tertiary', 'customify' ),
221
  'default' => '#00ecff',
222
- 'connected_fields' => array(),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
223
  ),
224
  'sm_dark_primary' => array(
225
  'type' => 'color',
226
  'setting_type' => 'option',
227
  'setting_id' => 'sm_dark_primary',
228
  'live' => true,
229
- 'priority' => 20.3,
230
  'label' => esc_html__( 'Dark Primary', 'customify' ),
231
  'default' => '#171617',
232
- 'connected_fields' => array(),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
233
  ),
234
  'sm_dark_secondary' => array(
235
  'type' => 'color',
236
  'setting_type' => 'option',
237
  'setting_id' => 'sm_dark_secondary',
238
  'live' => true,
239
- 'priority' => 20.4,
240
  'label' => esc_html__( 'Dark Secondary', 'customify' ),
241
  'default' => '#383c50',
242
- 'connected_fields' => array(),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
243
  ),
244
  'sm_dark_tertiary' => array(
245
  'type' => 'color',
246
  'setting_type' => 'option',
247
  'setting_id' => 'sm_dark_tertiary',
248
  'live' => true,
249
- 'priority' => 20.5,
250
  'label' => esc_html__( 'Dark Tertiary', 'customify' ),
251
  'default' => '#65726F',
252
- 'connected_fields' => array(),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
253
  ),
254
  'sm_light_primary' => array(
255
  'type' => 'color',
256
  'setting_type' => 'option',
257
  'setting_id' => 'sm_light_primary',
258
  'live' => true,
259
- 'priority' => 20.6,
260
  'label' => esc_html__( 'Light Primary', 'customify' ),
261
  'default' => '#ffffff',
262
- 'connected_fields' => array(),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
263
  ),
264
  'sm_light_secondary' => array(
265
  'type' => 'color',
266
  'setting_type' => 'option',
267
  'setting_id' => 'sm_light_secondary',
268
  'live' => true,
269
- 'priority' => 20.7,
270
  'label' => esc_html__( 'Light Secondary', 'customify' ),
271
  'default' => '#ffffff',
272
- 'connected_fields' => array(),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
273
  ),
274
  'sm_light_tertiary' => array(
275
  'type' => 'color',
276
  'setting_type' => 'option',
277
  'setting_id' => 'sm_light_tertiary',
278
  'live' => true,
279
- 'priority' => 20.8,
280
  'label' => esc_html__( 'Light Tertiary', 'customify' ),
281
  'default' => '#ffffff',
282
- 'connected_fields' => array(),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
283
  ),
284
  'sm_swap_colors' => array(
285
  'type' => 'button',
@@ -313,13 +523,11 @@ class Customify_Color_Palettes {
313
  'label' => esc_html__( 'Swap Secondary Color ⇆ Secondary Dark', 'customify' ),
314
  'action' => 'sm_swap_secondary_colors_dark',
315
  ),
316
- 'sm_advanced_toggle' => array(
317
- 'type' => 'button',
318
- 'setting_type' => 'option',
319
- 'setting_id' => 'sm_toggle_advanced_settings',
320
- 'priority' => 30.4,
321
- 'label' => esc_html__( 'Toggle Advanced Settings', 'customify' ),
322
- 'action' => 'sm_toggle_advanced_settings',
323
  ),
324
  ),
325
  ) );
@@ -347,28 +555,24 @@ class Customify_Color_Palettes {
347
  }
348
 
349
  $current_palette = '';
350
- $current_palette_sets = array( 'current', 'next' );
351
 
352
  $master_color_controls_ids = $this->get_all_master_color_controls_ids( $config['sections']['style_manager_section']['options'] );
353
 
354
- foreach ( $current_palette_sets as $set ) {
355
- $current_palette .= '<div class="colors ' . $set . '">';
356
- foreach ( $master_color_controls_ids as $setting_id ) {
357
- $current_palette .=
358
- '<div class="color ' . $setting_id . '" data-setting="' . $setting_id . '">' . PHP_EOL .
359
- '<div class="fill"></div>' . PHP_EOL .
360
- '<div class="picker">' .
361
- '<div class="disc"></div>'.
362
- '<i></i>'.
363
- '</div>' . PHP_EOL .
364
- '</div>' . PHP_EOL;
365
- }
366
- $current_palette .= '</div>';
367
  }
 
368
 
369
  $current_palette .= '<div class="c-color-palette__fields">';
370
  $current_palette .= '<div class="c-color-palette__notification description hidden js-altered-notification">' . PHP_EOL .
371
- __( 'One or more colors connected to your color palette have been modified. By changing or altering the current palette you will lose changes made prior to this action.', '__theme_txtd' ) . PHP_EOL .
372
  '</div>' . PHP_EOL;
373
  foreach ( $master_color_controls_ids as $setting_id ) {
374
  $current_palette .= '<input id="current-palette-' . $setting_id . '" class="c-color-palette__input ' . $setting_id . '" type="text">';
@@ -378,201 +582,291 @@ class Customify_Color_Palettes {
378
  // The section might be already defined, thus we merge, not replace the entire section config.
379
  $config['sections']['style_manager_section']['options'] = array(
380
  'sm_current_color_palette' => array(
381
- 'type' => 'html',
382
  'setting_id' => 'sm_current_color_palette',
383
- 'html' =>
384
- '<div class="color-palette-container">' . PHP_EOL .
385
- '<span class="customize-control-title">Current Color Palette:</span>' . PHP_EOL .
386
- '<span class="description customize-control-description">Choose a color palette to start with. Adjust its style using the variation buttons below.</span>' . PHP_EOL .
387
  '<div class="c-color-palette">' . PHP_EOL .
388
- $current_palette .
389
- '<div class="c-color-palette__overlay">' . PHP_EOL .
390
- '<div class="c-color-palette__label">' .
391
- '<div class="c-color-palette__name">' . 'Original Style' . '</div>' .
392
- '<div class="c-color-palette__control variation-light active" data-target="#_customize-input-sm_color_palette_variation_control-radio-light">' .
393
- '<span class="dashicons dashicons-image-rotate"></span>' .
394
- '<div class="c-color-palette__tooltip">Light</div>' .
395
- '</div>' .
396
- '<div class="c-color-palette__control variation-dark" data-target="#_customize-input-sm_color_palette_variation_control-radio-dark">' .
397
- '<span class="dashicons dashicons-image-filter"></span>'.
398
- '<div class="c-color-palette__tooltip">Dark</div>' .
399
- '</div>' .
400
- '<div class="c-color-palette__control variation-colorful" data-target="#_customize-input-sm_color_palette_variation_control-radio-colorful">' .
401
- '<span class="dashicons dashicons-admin-appearance"></span>' .
402
- '<div class="c-color-palette__tooltip">Colorful</div>' .
403
- '</div>' .
404
- '</div>' . PHP_EOL .
405
- '</div>' . PHP_EOL .
406
  '</div>' . PHP_EOL .
407
- '</div>' . PHP_EOL .
408
- '<svg class="c-color-palette__blur" width="15em" height="15em" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" version="1.1">' . PHP_EOL .
409
- '<defs>' . PHP_EOL .
410
- '<filter id="goo">' . PHP_EOL .
411
- '<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />' . PHP_EOL .
412
- '<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 50 -20" result="goo" />' . PHP_EOL .
413
- '<feBlend in="SourceGraphic" in2="goo" />' . PHP_EOL .
414
- '</filter>' . PHP_EOL .
415
- '</defs>' . PHP_EOL .
416
- '</svg>',
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
417
  ),
418
- // 'sm_color_matrix' => array(
419
- // 'type' => 'html',
420
- // 'setting_id' => 'sm_color_matrix',
421
- // 'html' => '<div class="sm_color_matrix"></div>'
422
- // ),
423
- // 'sm_dark_color_master_slider' => array(
424
- // 'setting_id' => 'sm_dark_color_master_slider',
425
- // 'type' => 'range',
426
- // 'label' => esc_html__( 'Dark to Color (master)', 'customify' ),
427
- // 'desc' => '',
428
- // 'live' => true,
429
- // 'default' => 50, // this should be set by the theme (previously 1300)
430
- // 'input_attrs' => array(
431
- // 'min' => 0,
432
- // 'max' => 100,
433
- // 'step' => 1,
434
- // 'data-preview' => true,
435
- // ),
436
- // 'css' => array(),
437
- // ),
438
- // 'sm_dark_color_primary_slider' => array(
439
- // 'setting_id' => 'sm_dark_color_primary_slider',
440
- // 'type' => 'range',
441
- // 'label' => esc_html__( 'Dark to Color (primary)', 'customify' ),
442
- // 'desc' => '',
443
- // 'live' => true,
444
- // 'default' => $this->get_dark_to_color_slider_default_value( $config['sections']['style_manager_section']['options'], 'sm_dark_primary', 'sm_color_primary' ),
445
- // 'input_attrs' => array(
446
- // 'min' => 0,
447
- // 'max' => 100,
448
- // 'step' => 1,
449
- // 'data-preview' => true,
450
- // ),
451
- // 'css' => array(),
452
- // ),
453
- // 'sm_dark_color_secondary_slider' => array(
454
- // 'setting_id' => 'sm_dark_color_secondary_slider',
455
- // 'type' => 'range',
456
- // 'label' => esc_html__( 'Dark to Color (secondary)', 'customify' ),
457
- // 'desc' => '',
458
- // 'live' => true,
459
- // 'default' => $this->get_dark_to_color_slider_default_value( $config['sections']['style_manager_section']['options'], 'sm_dark_secondary', 'sm_color_secondary' ), // this should be set by the theme (previously 1300)
460
- // 'input_attrs' => array(
461
- // 'min' => 0,
462
- // 'max' => 100,
463
- // 'step' => 1,
464
- // 'data-preview' => true,
465
- // ),
466
- // 'css' => array(),
467
- // ),
468
- // 'sm_dark_color_tertiary_slider' => array(
469
- // 'setting_id' => 'sm_dark_color_tertiary_slider',
470
- // 'type' => 'range',
471
- // 'label' => esc_html__( 'Dark to Color (tertiary)', 'customify' ),
472
- // 'desc' => '',
473
- // 'live' => true,
474
- // 'default' => $this->get_dark_to_color_slider_default_value( $config['sections']['style_manager_section']['options'], 'sm_dark_tertiary', 'sm_color_tertiary' ), // this should be set by the theme (previously 1300)
475
- // 'input_attrs' => array(
476
- // 'min' => 0,
477
- // 'max' => 100,
478
- // 'step' => 1,
479
- // 'data-preview' => true,
480
- // ),
481
- // 'css' => array(),
482
- // ),
483
- // 'sm_colors_dispersion' => array(
484
- // 'setting_id' => 'sm_colors_dispersion',
485
- // 'type' => 'range',
486
- // 'label' => esc_html__( 'Colors dispersion range', 'customify' ),
487
- // 'desc' => '',
488
- // 'live' => true,
489
- // 'default' => $this->get_color_dispersion_slider_default_value( $config['sections']['style_manager_section']['options'] ),
490
- // 'input_attrs' => array(
491
- // 'min' => 1,
492
- // 'max' => 100,
493
- // 'step' => 1,
494
- // 'data-preview' => true,
495
- // ),
496
- // 'css' => array(),
497
- // ),
498
- // 'sm_colors_focus_point' => array(
499
- // 'setting_id' => 'sm_colors_focus_point',
500
- // 'type' => 'range',
501
- // 'label' => esc_html__( 'Colors focus point', 'customify' ),
502
- // 'desc' => '',
503
- // 'live' => true,
504
- // 'default' => $this->get_color_focus_slider_default_value( $config['sections']['style_manager_section']['options'] ),
505
- // 'input_attrs' => array(
506
- // 'min' => 0,
507
- // 'max' => 100,
508
- // 'step' => 1,
509
- // 'data-preview' => true,
510
- // ),
511
- // 'css' => array(),
512
- // ),
513
  ) + $config['sections']['style_manager_section']['options'];
514
 
515
  return $config;
516
  }
517
 
518
- private function get_dark_to_color_slider_default_value( $options, $dark_id, $color_id ) {
519
- $dark_count = count($options[$dark_id]['connected_fields']);
520
- $color_count = count($options[$color_id]['connected_fields']);
521
- $total_count = $dark_count + $color_count;
522
 
523
- if ( $total_count === 0 ) {
524
- return 0;
 
525
  }
526
 
527
- return 100 * $color_count / $total_count;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
528
  }
529
 
 
 
530
 
531
- private function get_color_dispersion_slider_default_value( $options ) {
532
- $primary_count = count($options['sm_color_primary']['connected_fields']);
533
- $secondary_count = count($options['sm_color_secondary']['connected_fields']);
534
- $tertiary_count = count($options['sm_color_tertiary']['connected_fields']);
535
- $total_count = $primary_count + $secondary_count + $tertiary_count;
536
- $n = 3;
537
 
538
- $average = ( $primary_count + $secondary_count + $tertiary_count ) / $n;
 
 
 
539
 
540
- $diff_primary = pow( $primary_count - $average, 2 );
541
- $diff_secondary = pow( $secondary_count - $average, 2 );
542
- $diff_tertiary = pow( $tertiary_count - $average, 2 );
543
 
544
- $diff_average = ( $diff_primary + $diff_secondary + $diff_tertiary ) / $n; // presupun ca e intre 0 si total * 2 / 3
 
545
 
546
- $diff1 = pow( $total_count - $average, 2);
547
- $diff2 = pow( $average, 2);
548
- $diff3 = $diff2;
 
 
 
 
549
 
550
- $min = 0; // dispersion = 1
551
- $max = ($diff1 + $diff2 + $diff3) / 3;
552
- // $max = 2 * ($n - 1) * $average / $n; // dispersion = 0;
553
 
554
- // avoid division by zero
555
- if ( $max === 0 ) {
556
- return 100;
557
  }
558
 
559
- return 100 * ($diff_average / max($primary_count, $secondary_count, $tertiary_count));
 
 
 
 
560
  }
561
 
562
- private function get_color_focus_slider_default_value( $options ) {
563
- $primary_count = count($options['sm_color_primary']['connected_fields']);
564
- $secondary_count = count($options['sm_color_secondary']['connected_fields']);
565
- $tertiary_count = count($options['sm_color_tertiary']['connected_fields']);
566
- $total_count = $primary_count + $secondary_count + $tertiary_count;
567
 
568
- // avoid division by zero
569
- if ( $total_count === 0 ) {
570
- return 50;
 
 
 
 
 
 
 
 
 
571
  }
572
 
573
- $focus_point = (0 * $primary_count + 0.5 * $secondary_count + 1 * $tertiary_count ) / $total_count;
 
 
 
 
 
 
 
 
 
 
 
 
574
 
575
- return $focus_point * 100;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
576
  }
577
 
578
  /**
169
  'choices_type' => 'color_palette',
170
  'choices' => $this->get_palettes(),
171
  ),
172
+ 'sm_palette_filter' => array(
173
  'type' => 'radio',
174
  'setting_type' => 'option',
175
+ 'setting_id' => 'sm_palette_filter',
176
+ 'label' => esc_html__( 'Filters:', 'customify' ),
177
+ 'default' => 'original',
178
+ 'priority' => 10.1,
179
  'live' => true,
180
+ 'choices' => array(
181
+ 'original' => esc_html__( 'Original', 'customify' ),
182
+ 'clarendon' => esc_html__( 'Clarendon', 'customify' ),
183
+ 'vivid' => esc_html__( 'Vivid', 'customify' ),
184
+ 'softer' => esc_html__( 'Softer', 'customify' ),
185
+ 'pastel' => esc_html__( 'Pastel', 'customify' ),
186
+ 'greyish' => esc_html__( 'Greyish', 'customify' ),
187
+ // 'warm' => esc_html__( 'Warming', 'customify' ),
188
+ // 'cold' => esc_html__( 'Cooling', 'customify' ),
189
+ // 'sierra' => esc_html__( 'Sierra', 'customify' ),
190
+ // 'mayfair' => esc_html__( 'Mayfair', 'customify' ),
191
+ // 'dumb' => esc_html__( 'Dumb', 'customify' ),
192
  ),
193
  ),
194
+ 'sm_color_primary' => array(
195
  'type' => 'color',
196
  // We will bypass the plugin setting regarding where to store - we will store it cross-theme in wp_options
197
  'setting_type' => 'option',
199
  'setting_id' => 'sm_color_primary',
200
  // We don't want to refresh the preview window, even though we have no direct effect on it through this field.
201
  'live' => true,
202
+ 'priority' => 20,
203
  'label' => esc_html__( 'Color Primary', 'customify' ),
204
  'default' => '#ffeb00',
205
+ 'connected_fields' => array(
206
+ // 'sm_color_primary_connected'
207
+ ),
208
+ 'css' => array(
209
+ array(
210
+ 'selector' => ':root',
211
+ 'property' => '--sm-color-primary',
212
+ ),
213
+ ),
214
+ ),
215
+ 'sm_color_primary_connected' => array(
216
+ 'type' => 'color',
217
+ 'setting_type' => 'option',
218
+ 'setting_id' => 'sm_color_primary_connected',
219
+ 'priority' => 21,
220
+ 'label' => esc_html__( 'Color Primary Connected', 'customify' ),
221
+ 'live' => true,
222
+ 'default' => '#ffeb00',
223
+ 'css' => array(
224
+ array(
225
+ 'selector' => ':root',
226
+ 'property' => '--sm-color-primary-connected',
227
+ ),
228
+ ),
229
  ),
230
  'sm_color_secondary' => array(
231
  'type' => 'color',
232
  'setting_type' => 'option',
233
  'setting_id' => 'sm_color_secondary',
234
  'live' => true,
235
+ 'priority' => 20.1,
236
  'label' => esc_html__( 'Color Secondary', 'customify' ),
237
  'default' => '#00ecff',
238
+ 'connected_fields' => array(
239
+ // 'sm_color_secondary_connected'
240
+ ),
241
+ 'css' => array(
242
+ array(
243
+ 'selector' => ':root',
244
+ 'property' => '--sm-color-secondary',
245
+ ),
246
+ ),
247
+ ),
248
+ 'sm_color_secondary_connected' => array(
249
+ 'type' => 'color',
250
+ 'setting_type' => 'option',
251
+ 'setting_id' => 'sm_color_secondary_connected',
252
+ 'priority' => 21,
253
+ 'label' => esc_html__( 'Color Secondary Connected', 'customify' ),
254
+ 'live' => true,
255
+ 'default' => '#00ecff',
256
+ 'css' => array(
257
+ array(
258
+ 'selector' => ':root',
259
+ 'property' => '--sm-color-secondary-connected',
260
+ ),
261
+ ),
262
  ),
263
  'sm_color_tertiary' => array(
264
  'type' => 'color',
265
  'setting_type' => 'option',
266
  'setting_id' => 'sm_color_tertiary',
267
  'live' => true,
268
+ 'priority' => 20.2,
269
  'label' => esc_html__( 'Color Tertiary', 'customify' ),
270
  'default' => '#00ecff',
271
+ 'connected_fields' => array(
272
+ // 'sm_color_tertiary_connected'
273
+ ),
274
+ 'css' => array(
275
+ array(
276
+ 'selector' => ':root',
277
+ 'property' => '--sm-color-tertiary',
278
+ ),
279
+ ),
280
+ ),
281
+ 'sm_color_tertiary_connected' => array(
282
+ 'type' => 'color',
283
+ 'setting_type' => 'option',
284
+ 'setting_id' => 'sm_color_tertiary_connected',
285
+ 'priority' => 21,
286
+ 'label' => esc_html__( 'Color Tertiary Connected', 'customify' ),
287
+ 'live' => true,
288
+ 'default' => '#00ecff',
289
+ 'css' => array(
290
+ array(
291
+ 'selector' => ':root',
292
+ 'property' => '--sm-color-tertiary-connected',
293
+ ),
294
+ ),
295
  ),
296
  'sm_dark_primary' => array(
297
  'type' => 'color',
298
  'setting_type' => 'option',
299
  'setting_id' => 'sm_dark_primary',
300
  'live' => true,
301
+ 'priority' => 20.3,
302
  'label' => esc_html__( 'Dark Primary', 'customify' ),
303
  'default' => '#171617',
304
+ 'connected_fields' => array(
305
+ // 'sm_dark_primary_connected'
306
+ ),
307
+ 'css' => array(
308
+ array(
309
+ 'selector' => ':root',
310
+ 'property' => '--sm-dark-primary',
311
+ ),
312
+ ),
313
+ ),
314
+ 'sm_dark_primary_connected' => array(
315
+ 'type' => 'color',
316
+ 'setting_type' => 'option',
317
+ 'setting_id' => 'sm_dark_primary_connected',
318
+ 'priority' => 21,
319
+ 'label' => esc_html__( 'Dark Primary Connected', 'customify' ),
320
+ 'live' => true,
321
+ 'default' => '#171617',
322
+ 'css' => array(
323
+ array(
324
+ 'selector' => ':root',
325
+ 'property' => '--sm-dark-primary-connected',
326
+ ),
327
+ ),
328
  ),
329
  'sm_dark_secondary' => array(
330
  'type' => 'color',
331
  'setting_type' => 'option',
332
  'setting_id' => 'sm_dark_secondary',
333
  'live' => true,
334
+ 'priority' => 20.4,
335
  'label' => esc_html__( 'Dark Secondary', 'customify' ),
336
  'default' => '#383c50',
337
+ 'connected_fields' => array(
338
+ // 'sm_dark_secondary_connected'
339
+ ),
340
+ 'css' => array(
341
+ array(
342
+ 'selector' => ':root',
343
+ 'property' => '--sm-dark-secondary',
344
+ ),
345
+ ),
346
+ ),
347
+ 'sm_dark_secondary_connected' => array(
348
+ 'type' => 'color',
349
+ 'setting_type' => 'option',
350
+ 'setting_id' => 'sm_dark_secondary_connected',
351
+ 'priority' => 21,
352
+ 'label' => esc_html__( 'Color Primary Connected', 'customify' ),
353
+ 'live' => true,
354
+ 'default' => '#ffeb00',
355
+ 'css' => array(
356
+ array(
357
+ 'selector' => ':root',
358
+ 'property' => '--sm-dark-secondary-connected',
359
+ ),
360
+ ),
361
  ),
362
  'sm_dark_tertiary' => array(
363
  'type' => 'color',
364
  'setting_type' => 'option',
365
  'setting_id' => 'sm_dark_tertiary',
366
  'live' => true,
367
+ 'priority' => 20.5,
368
  'label' => esc_html__( 'Dark Tertiary', 'customify' ),
369
  'default' => '#65726F',
370
+ 'connected_fields' => array(
371
+ // 'sm_dark_tertiary_connected'
372
+ ),
373
+ 'css' => array(
374
+ array(
375
+ 'selector' => ':root',
376
+ 'property' => '--sm-dark-tertiary',
377
+ ),
378
+ ),
379
+ ),
380
+ 'sm_dark_tertiary_connected' => array(
381
+ 'type' => 'color',
382
+ 'setting_type' => 'option',
383
+ 'setting_id' => 'sm_dark_tertiary_connected',
384
+ 'priority' => 21,
385
+ 'label' => esc_html__( 'Dark Tertiary Connected', 'customify' ),
386
+ 'live' => true,
387
+ 'default' => '#ffeb00',
388
+ 'css' => array(
389
+ array(
390
+ 'selector' => ':root',
391
+ 'property' => '--sm-dark-tertiary-connected',
392
+ ),
393
+ ),
394
  ),
395
  'sm_light_primary' => array(
396
  'type' => 'color',
397
  'setting_type' => 'option',
398
  'setting_id' => 'sm_light_primary',
399
  'live' => true,
400
+ 'priority' => 20.6,
401
  'label' => esc_html__( 'Light Primary', 'customify' ),
402
  'default' => '#ffffff',
403
+ 'connected_fields' => array(
404
+ // 'sm_light_primary_connected'
405
+ ),
406
+ 'css' => array(
407
+ array(
408
+ 'selector' => ':root',
409
+ 'property' => '--sm-light-primary',
410
+ ),
411
+ ),
412
+ ),
413
+ 'sm_light_primary_connected' => array(
414
+ 'type' => 'color',
415
+ 'setting_type' => 'option',
416
+ 'setting_id' => 'sm_light_primary_connected',
417
+ 'priority' => 21,
418
+ 'label' => esc_html__( 'Light Primary Connected', 'customify' ),
419
+ 'live' => true,
420
+ 'default' => '#ffffff',
421
+ 'css' => array(
422
+ array(
423
+ 'selector' => ':root',
424
+ 'property' => '--sm-light-primary-connected',
425
+ ),
426
+ ),
427
  ),
428
  'sm_light_secondary' => array(
429
  'type' => 'color',
430
  'setting_type' => 'option',
431
  'setting_id' => 'sm_light_secondary',
432
  'live' => true,
433
+ 'priority' => 20.7,
434
  'label' => esc_html__( 'Light Secondary', 'customify' ),
435
  'default' => '#ffffff',
436
+ 'connected_fields' => array(
437
+ // 'sm_light_secondary_connected'
438
+ ),
439
+ 'css' => array(
440
+ array(
441
+ 'selector' => ':root',
442
+ 'property' => '--sm-light-secondary',
443
+ ),
444
+ ),
445
+ ),
446
+ 'sm_light_secondary_connected' => array(
447
+ 'type' => 'color',
448
+ 'setting_type' => 'option',
449
+ 'setting_id' => 'sm_light_secondary_connected',
450
+ 'priority' => 21,
451
+ 'label' => esc_html__( 'Light Secondary Connected', 'customify' ),
452
+ 'live' => true,
453
+ 'default' => '#ffffff',
454
+ 'css' => array(
455
+ array(
456
+ 'selector' => ':root',
457
+ 'property' => '--sm-light-secondary-connected',
458
+ ),
459
+ ),
460
  ),
461
  'sm_light_tertiary' => array(
462
  'type' => 'color',
463
  'setting_type' => 'option',
464
  'setting_id' => 'sm_light_tertiary',
465
  'live' => true,
466
+ 'priority' => 20.8,
467
  'label' => esc_html__( 'Light Tertiary', 'customify' ),
468
  'default' => '#ffffff',
469
+ 'connected_fields' => array(
470
+ // 'sm_light_tertiary_connected'
471
+ ),
472
+ 'css' => array(
473
+ array(
474
+ 'selector' => ':root',
475
+ 'property' => '--sm-light-tertiary',
476
+ ),
477
+ ),
478
+ ),
479
+ 'sm_light_tertiary_connected' => array(
480
+ 'type' => 'color',
481
+ 'setting_type' => 'option',
482
+ 'setting_id' => 'sm_light_tertiary_connected',
483
+ 'priority' => 21,
484
+ 'label' => esc_html__( 'Light Tertiary Connected', 'customify' ),
485
+ 'live' => true,
486
+ 'default' => '#ffffff',
487
+ 'css' => array(
488
+ array(
489
+ 'selector' => ':root',
490
+ 'property' => '--sm-light-tertiary-connected',
491
+ ),
492
+ ),
493
  ),
494
  'sm_swap_colors' => array(
495
  'type' => 'button',
523
  'label' => esc_html__( 'Swap Secondary Color ⇆ Secondary Dark', 'customify' ),
524
  'action' => 'sm_swap_secondary_colors_dark',
525
  ),
526
+ 'sm_spacing_bottom' => array(
527
+ 'type' => 'html',
528
+ 'html' => '',
529
+ 'setting_id' => 'sm_spacing_bottom',
530
+ 'priority' => 31,
 
 
531
  ),
532
  ),
533
  ) );
555
  }
556
 
557
  $current_palette = '';
 
558
 
559
  $master_color_controls_ids = $this->get_all_master_color_controls_ids( $config['sections']['style_manager_section']['options'] );
560
 
561
+ $current_palette .= '<div class="colors">';
562
+ foreach ( $master_color_controls_ids as $setting_id ) {
563
+ $current_palette .=
564
+ '<div class="color ' . $setting_id . '" data-setting="' . $setting_id . '">' . PHP_EOL .
565
+ '<div class="picker">' .
566
+ '<div class="disc"></div>'.
567
+ '<i></i>'.
568
+ '</div>' . PHP_EOL .
569
+ '</div>' . PHP_EOL;
 
 
 
 
570
  }
571
+ $current_palette .= '</div>';
572
 
573
  $current_palette .= '<div class="c-color-palette__fields">';
574
  $current_palette .= '<div class="c-color-palette__notification description hidden js-altered-notification">' . PHP_EOL .
575
+ wp_kses( __( 'One or more colors connected to your color palette have been modified. By changing or altering the current palette you will lose changes made prior to this action.', 'customify' ), array( 'em' => array(), 'b' => array(), 'strong' => array(), 'i' => array() ) ) . PHP_EOL .
576
  '</div>' . PHP_EOL;
577
  foreach ( $master_color_controls_ids as $setting_id ) {
578
  $current_palette .= '<input id="current-palette-' . $setting_id . '" class="c-color-palette__input ' . $setting_id . '" type="text">';
582
  // The section might be already defined, thus we merge, not replace the entire section config.
583
  $config['sections']['style_manager_section']['options'] = array(
584
  'sm_current_color_palette' => array(
585
+ 'type' => 'html',
586
  'setting_id' => 'sm_current_color_palette',
587
+ 'html' =>
 
 
 
588
  '<div class="c-color-palette">' . PHP_EOL .
589
+ '<div class="c-color-palette__colors">' . $current_palette . '</div>' . PHP_EOL .
590
+ '<div class="sm_color_matrix"></div>' . PHP_EOL .
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
591
  '</div>' . PHP_EOL .
592
+ '<div class="sm-tabs">' . PHP_EOL .
593
+ '<div class="sm-tabs__item" data-target="palettes">' . esc_html__( 'Palettes', 'customify' ) . '</div>' . PHP_EOL .
594
+ '<div class="sm-tabs__item" data-target="filters">' . esc_html__( 'Filters', 'customify' ) . '</div>' . PHP_EOL .
595
+ '<div class="sm-tabs__item" data-target="customize">' . esc_html__( 'Customize', 'customify' ) . '</div>' . PHP_EOL .
596
+ '</div>',
597
+ ),
598
+ 'sm_palettes_description' => array(
599
+ 'type' => 'html',
600
+ 'setting_id' => 'sm_palettes_description',
601
+ 'html' => '<span class="description customize-control-description">' . wp_kses( __( 'Choose your <em>base color palette</em> and go deeper with the <em>Filters</em> and <em>Customize</em> tabs. Make it shine, mate!', 'customify' ), array(
602
+ 'em' => array(),
603
+ 'b' => array(),
604
+ 'strong' => array(),
605
+ 'i' => array(),
606
+ ) ) . '</span>' . PHP_EOL,
607
+ ),
608
+ 'sm_filters_description' => array(
609
+ 'type' => 'html',
610
+ 'setting_id' => 'sm_filters_description',
611
+ 'html' => '<span class="description customize-control-description">' . wp_kses( __( 'Adjust the <i>colors properties</i> by using the filters. Keep the look fresh and engaging!', 'customify' ), array(
612
+ 'em' => array(),
613
+ 'b' => array(),
614
+ 'strong' => array(),
615
+ 'i' => array(),
616
+ ) ) . '</span>' . PHP_EOL,
617
+ ),
618
+ 'sm_customize_description' => array(
619
+ 'type' => 'html',
620
+ 'setting_id' => 'sm_customize_description',
621
+ 'html' => '<span class="description customize-control-description">' . wp_kses( __( 'Adjust how the colors are used on your site with ease. Modify their usage level to craft a playful design!', 'customify' ), array( 'em' => array(),
622
+ 'b' => array(),
623
+ 'strong' => array(),
624
+ 'i' => array(),
625
+ ) ) . '</span>' . PHP_EOL,
626
+ ),
627
+ 'sm_coloration_level' => array(
628
+ 'type' => 'sm_radio',
629
+ 'setting_type' => 'option',
630
+ 'setting_id' => 'sm_coloration_level',
631
+ 'label' => esc_html__( 'Coloration Level', 'customify' ),
632
+ 'default' => $this->get_coloration_level_default_value( $config ),
633
+ 'live' => true,
634
+ 'choices' => array(
635
+ $this->get_coloration_level_point_value( $config, 'low' ) => esc_html__( 'Low', 'customify' ),
636
+ $this->get_coloration_level_point_value( $config, 'medium' ) => esc_html__( 'Medium', 'customify' ),
637
+ $this->get_coloration_level_point_value( $config, 'high' ) => esc_html__( 'High', 'customify' ),
638
+ $this->get_coloration_level_point_value( $config, 'striking' ) => esc_html__( 'Striking', 'customify' ),
639
+ ),
640
+ ),
641
+ 'sm_color_diversity' => array(
642
+ 'type' => 'sm_radio',
643
+ 'setting_type' => 'option',
644
+ 'setting_id' => 'sm_color_diversity',
645
+ 'label' => esc_html__( 'Color Diversity', 'customify' ),
646
+ 'default' => $this->get_color_diversity_default_value( $config ),
647
+ 'live' => true,
648
+ 'choices' => array(
649
+ 'low' => esc_html__( 'Low', 'customify' ),
650
+ 'medium' => esc_html__( 'Medium', 'customify' ),
651
+ 'high' => esc_html__( 'High', 'customify' ),
652
+ ),
653
+ ),
654
+ 'sm_shuffle_colors' => array(
655
+ 'type' => 'sm_radio',
656
+ 'setting_type' => 'option',
657
+ 'setting_id' => 'sm_shuffle_colors',
658
+ 'label' => esc_html__( 'Shuffle Colors', 'customify' ),
659
+ 'default' => 'default',
660
+ 'live' => true,
661
+ 'choices' => array(
662
+ 'default' => esc_html__( 'Default', 'customify' ),
663
+ 'mixed' => esc_html__( 'Mixed', 'customify' ),
664
+ 'remix' => esc_html__( 'Remix', 'customify' ),
665
+ ),
666
+ ),
667
+ 'sm_dark_mode' => array(
668
+ 'type' => 'sm_switch',
669
+ 'setting_type' => 'option',
670
+ 'setting_id' => 'sm_dark_mode',
671
+ 'label' => esc_html__( 'Dark Mode', 'customify' ),
672
+ 'default' => 'off',
673
+ 'live' => true,
674
+ 'choices' => array(
675
+ 'off' => esc_html__( 'Off', 'customify' ),
676
+ 'on' => esc_html__( 'On', 'customify' ),
677
+ ),
678
+ ),
679
+ 'sm_dark_color_primary_slider' => array(
680
+ 'setting_id' => 'sm_dark_color_primary_slider',
681
+ 'type' => 'range',
682
+ 'label' => esc_html__( 'Dark to Color (primary)', 'customify' ),
683
+ 'desc' => '',
684
+ 'live' => true,
685
+ 'default' => $this->get_dark_to_color_slider_default_value( $config['sections']['style_manager_section']['options'], 'sm_dark_primary', 'sm_color_primary' ),
686
+ 'input_attrs' => array(
687
+ 'min' => 0,
688
+ 'max' => 100,
689
+ 'step' => 1,
690
+ 'data-preview' => true,
691
+ ),
692
+ 'css' => array(),
693
+ ),
694
+ 'sm_dark_color_secondary_slider' => array(
695
+ 'setting_id' => 'sm_dark_color_secondary_slider',
696
+ 'type' => 'range',
697
+ 'label' => esc_html__( 'Dark to Color (secondary)', 'customify' ),
698
+ 'desc' => '',
699
+ 'live' => true,
700
+ 'default' => $this->get_dark_to_color_slider_default_value( $config['sections']['style_manager_section']['options'], 'sm_dark_secondary', 'sm_color_secondary' ),
701
+ // this should be set by the theme (previously 1300)
702
+ 'input_attrs' => array(
703
+ 'min' => 0,
704
+ 'max' => 100,
705
+ 'step' => 1,
706
+ 'data-preview' => true,
707
+ ),
708
+ 'css' => array(),
709
+ ),
710
+ 'sm_dark_color_tertiary_slider' => array(
711
+ 'setting_id' => 'sm_dark_color_tertiary_slider',
712
+ 'type' => 'range',
713
+ 'label' => esc_html__( 'Dark to Color (tertiary)', 'customify' ),
714
+ 'desc' => '',
715
+ 'live' => true,
716
+ 'default' => $this->get_dark_to_color_slider_default_value( $config['sections']['style_manager_section']['options'], 'sm_dark_tertiary', 'sm_color_tertiary' ),
717
+ // this should be set by the theme (previously 1300)
718
+ 'input_attrs' => array(
719
+ 'min' => 0,
720
+ 'max' => 100,
721
+ 'step' => 1,
722
+ 'data-preview' => true,
723
+ ),
724
+ 'css' => array(),
725
  ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
726
  ) + $config['sections']['style_manager_section']['options'];
727
 
728
  return $config;
729
  }
730
 
731
+ private function get_color_diversity_default_value( $config ) {
732
+ $optionsArrayObject = new ArrayObject( $config['sections']['style_manager_section']['options'] );
733
+ $optionsCopy = $optionsArrayObject->getArrayCopy();
 
734
 
735
+ $pos1 = array_search('sm_color_primary_connected', $optionsCopy['sm_color_primary']['connected_fields'] );
736
+ if ( false !== $pos1 ) {
737
+ unset( $optionsCopy['sm_color_primary']['connected_fields'][$pos1] );
738
  }
739
 
740
+ $pos2 = array_search('sm_color_secondary_connected', $optionsCopy['sm_color_secondary']['connected_fields'] );
741
+ if ( false !== $pos2 ) {
742
+ unset( $optionsCopy['sm_color_secondary']['connected_fields'][$pos2] );
743
+ }
744
+
745
+ $pos3 = array_search('sm_color_tertiary_connected', $optionsCopy['sm_color_tertiary']['connected_fields'] );
746
+ if ( false !== $pos3 ) {
747
+ unset( $optionsCopy['sm_color_tertiary']['connected_fields'][$pos3] );
748
+ }
749
+
750
+ $colors1 = empty( $optionsCopy['sm_color_primary']['connected_fields'] ) ? 0 : 1;
751
+ $colors2 = empty( $optionsCopy['sm_color_secondary']['connected_fields'] ) ? 0 : 1;
752
+ $colors3 = empty( $optionsCopy['sm_color_tertiary']['connected_fields'] ) ? 0 : 1;
753
+ $colors = $colors1 + $colors2 + $colors3;
754
+
755
+ if ( $colors > 2 ) {
756
+ return 'high';
757
+ }
758
+
759
+ if ( $colors > 1 ) {
760
+ return 'medium';
761
+ }
762
+
763
+ return 'low';
764
  }
765
 
766
+ private function get_coloration_level_average( $config ) {
767
+ $options = $config['sections']['style_manager_section']['options'];
768
 
769
+ $colors1 = count( $options['sm_color_primary']['connected_fields'] );
770
+ $colors2 = count( $options['sm_color_secondary']['connected_fields'] );
771
+ $colors3 = count( $options['sm_color_tertiary']['connected_fields'] );
772
+ $colors = $colors1 + $colors2 + $colors3;
 
 
773
 
774
+ $dark1 = count( $options['sm_dark_primary']['connected_fields'] );
775
+ $dark2 = count( $options['sm_dark_secondary']['connected_fields'] );
776
+ $dark3 = count( $options['sm_dark_tertiary']['connected_fields'] );
777
+ $dark = $dark1 + $dark2 + $dark3;
778
 
779
+ $total = $colors + $dark;
 
 
780
 
781
+ return $colors * 100 / $total;
782
+ }
783
 
784
+ private function get_coloration_level_default_value( $config ) {
785
+ $label = $this->get_coloration_level_default_label( $config );
786
+ return $this->get_coloration_level_point_value( $config, $label );
787
+ }
788
+
789
+ private function get_coloration_level_default_label( $config ) {
790
+ $average = $this->get_coloration_level_average( $config );
791
 
792
+ if ( $average < 25 ) {
793
+ return 'low';
794
+ }
795
 
796
+ if ( $average < 50 ) {
797
+ return 'medium';
 
798
  }
799
 
800
+ if ( $average < 75 ) {
801
+ return 'high';
802
+ }
803
+
804
+ return 'striking';
805
  }
806
 
807
+ private function get_coloration_levels( $config ) {
808
+ $average = $this->get_coloration_level_average( $config );
809
+ $default = $this->get_coloration_level_default_label( $config );
 
 
810
 
811
+ if ( 'low' === $default ) {
812
+ $values['low'] = intval( $average );
813
+ $values['medium'] = intval( $average + (100 - $average) / 4 );
814
+ $values['high'] = intval( $average + (100 - $average) * 2 / 4 );
815
+ $values['striking'] = intval( $average + (100 - $average) * 3 / 4 );
816
+ }
817
+
818
+ if ( 'medium' === $default ) {
819
+ $values['low'] = intval( $average / 2 );
820
+ $values['medium'] = intval( $average );
821
+ $values['high'] = intval( $average + (100 - $average) / 3 );
822
+ $values['striking'] = intval( $average + (100 - $average) * 2 / 3 );
823
  }
824
 
825
+ if ( 'high' === $default ) {
826
+ $values['low'] = intval( $average / 3 );
827
+ $values['medium'] = intval( $average * 2 / 3 );
828
+ $values['high'] = intval( $average );
829
+ $values['striking'] = intval( $average + (100 - $average) / 2 );
830
+ }
831
+
832
+ if ( 'striking' === $default ) {
833
+ $values['low'] = intval( $average / 4 );
834
+ $values['medium'] = intval( $average * 2 / 4 );
835
+ $values['high'] = intval( $average * 3 / 4 );
836
+ $values['striking'] = intval( $average );
837
+ }
838
 
839
+ return $values;
840
+ }
841
+
842
+ private function get_coloration_level_point_value( $config, $point ) {
843
+ $values = $this->get_coloration_levels( $config );
844
+ return $values[$point];
845
+ }
846
+
847
+ private function get_dark_to_color_slider_default_value( $options, $dark_id, $color_id ) {
848
+ $optionsArrayObject = new ArrayObject( $options );
849
+ $optionsCopy = $optionsArrayObject->getArrayCopy();
850
+
851
+ $pos1 = array_search($color_id . '_connected', $optionsCopy[$color_id]['connected_fields'] );
852
+ if ( false !== $pos1 ) {
853
+ unset( $optionsCopy[$color_id]['connected_fields'][$pos1] );
854
+ }
855
+
856
+ $pos2 = array_search($dark_id . '_connected', $optionsCopy[$dark_id]['connected_fields'] );
857
+ if ( false !== $pos2 ) {
858
+ unset( $optionsCopy[$dark_id]['connected_fields'][$pos2] );
859
+ }
860
+
861
+ $dark_count = count($optionsCopy[$dark_id]['connected_fields']);
862
+ $color_count = count($optionsCopy[$color_id]['connected_fields']);
863
+ $total_count = $dark_count + $color_count;
864
+
865
+ if ( $total_count === 0 ) {
866
+ return 0;
867
+ }
868
+
869
+ return 100 * $color_count / $total_count;
870
  }
871
 
872
  /**
includes/class-customify-style-manager.php CHANGED
@@ -267,7 +267,15 @@ class Customify_Style_Manager {
267
  // We need to split the fields in the Style Manager section into two: color palettes and fonts.
268
  $color_palettes_fields = array(
269
  'sm_current_color_palette',
 
 
 
270
  'sm_color_matrix',
 
 
 
 
 
271
  'sm_dark_color_master_slider',
272
  'sm_dark_color_primary_slider',
273
  'sm_dark_color_secondary_slider',
@@ -277,19 +285,29 @@ class Customify_Style_Manager {
277
  'sm_color_palette',
278
  'sm_color_palette_variation',
279
  'sm_color_primary',
 
280
  'sm_color_secondary',
 
281
  'sm_color_tertiary',
 
282
  'sm_dark_primary',
 
283
  'sm_dark_secondary',
 
284
  'sm_dark_tertiary',
 
285
  'sm_light_primary',
 
286
  'sm_light_secondary',
 
287
  'sm_light_tertiary',
 
288
  'sm_swap_colors',
289
  'sm_swap_dark_light',
290
  'sm_swap_colors_dark',
291
  'sm_swap_secondary_colors_dark',
292
  'sm_advanced_toggle',
 
293
  );
294
 
295
  $color_palettes_section_config = array(
@@ -456,9 +474,9 @@ class Customify_Style_Manager {
456
  <div class="modal-body full">
457
  <div class="box box--large">
458
  <div class="first-step">
459
- <h2 class="modal-title">How would you rate your experience with using Color Palettes?</h2>
460
  <div class="scorecard">
461
- <span>Worst</span>
462
  <label>
463
  <input type="radio" name="rating" value="1" required />
464
  <span>1</span>
@@ -479,22 +497,23 @@ class Customify_Style_Manager {
479
  <input type="radio" name="rating" value="5" required />
480
  <span>5</span>
481
  </label>
482
- <span>Best</span>
483
  </div>
484
  </div>
485
  <div class="second-step hidden">
486
- <p><strong>What makes you give <span class="rating-placeholder">5</span>*?</strong> I hope you’ll answer and help us do better:</p>
487
  <div class="not-floating-labels">
488
  <div class="form-row field">
489
- <textarea name="message" placeholder="Your message.."
490
- id="style-manager-user-feedback-message" rows="4" oninvalid="this.setCustomValidity('May we have a little more info about your experience?')" oninput="setCustomValidity('')" required></textarea>
491
  </div>
492
  </div>
493
- <button id="style-manager-user-feedback_btn" class="button" type="submit"><?php _e( 'Submit my feedback', 'customify' ); ?></button>
494
  </div>
495
  <div class="thanks-step hidden">
496
- <h3 class="modal-title">Thanks for your feedback!</h3>
497
- <p>This will help us improve the product. Stay awesome! 🤗</p>
 
498
  </div>
499
  <div class="error-step hidden">
500
  <h3 class="modal-title">We've hit a snag!</h3>
267
  // We need to split the fields in the Style Manager section into two: color palettes and fonts.
268
  $color_palettes_fields = array(
269
  'sm_current_color_palette',
270
+ 'sm_palettes_description',
271
+ 'sm_filters_description',
272
+ 'sm_customize_description',
273
  'sm_color_matrix',
274
+ 'sm_palette_filter',
275
+ 'sm_coloration_level',
276
+ 'sm_color_diversity',
277
+ 'sm_shuffle_colors',
278
+ 'sm_dark_mode',
279
  'sm_dark_color_master_slider',
280
  'sm_dark_color_primary_slider',
281
  'sm_dark_color_secondary_slider',
285
  'sm_color_palette',
286
  'sm_color_palette_variation',
287
  'sm_color_primary',
288
+ 'sm_color_primary_connected',
289
  'sm_color_secondary',
290
+ 'sm_color_secondary_connected',
291
  'sm_color_tertiary',
292
+ 'sm_color_tertiary_connected',
293
  'sm_dark_primary',
294
+ 'sm_dark_primary_connected',
295
  'sm_dark_secondary',
296
+ 'sm_dark_secondary_connected',
297
  'sm_dark_tertiary',
298
+ 'sm_dark_tertiary_connected',
299
  'sm_light_primary',
300
+ 'sm_light_primary_connected',
301
  'sm_light_secondary',
302
+ 'sm_light_secondary_connected',
303
  'sm_light_tertiary',
304
+ 'sm_light_tertiary_connected',
305
  'sm_swap_colors',
306
  'sm_swap_dark_light',
307
  'sm_swap_colors_dark',
308
  'sm_swap_secondary_colors_dark',
309
  'sm_advanced_toggle',
310
+ 'sm_spacing_bottom',
311
  );
312
 
313
  $color_palettes_section_config = array(
474
  <div class="modal-body full">
475
  <div class="box box--large">
476
  <div class="first-step">
477
+ <h2 class="modal-title">How would you rate your experience in finding the right colors for your site?</h2>
478
  <div class="scorecard">
479
+ <span>Poor</span>
480
  <label>
481
  <input type="radio" name="rating" value="1" required />
482
  <span>1</span>
497
  <input type="radio" name="rating" value="5" required />
498
  <span>5</span>
499
  </label>
500
+ <span>Great</span>
501
  </div>
502
  </div>
503
  <div class="second-step hidden">
504
+ <p><strong>What points along the way made this a <span class="rating-placeholder">5</span>* experience for you?</strong><br>We are counting on your insights to guide us in doing better 🙏</p>
505
  <div class="not-floating-labels">
506
  <div class="form-row field">
507
+ <textarea name="message" placeholder="Describe your experience in customizing your site colors.."
508
+ id="style-manager-user-feedback-message" rows="6" oninvalid="this.setCustomValidity('May we have a little more info about your experience?')" oninput="setCustomValidity('')" required></textarea>
509
  </div>
510
  </div>
511
+ <button id="style-manager-user-feedback_btn" class="button" type="submit"><?php _e( 'Send us your insights', 'customify' ); ?></button>
512
  </div>
513
  <div class="thanks-step hidden">
514
+ <h3 class="modal-title">Thank you so much for your feedback!</h3>
515
+ <p>It means the world to us as we strive to constantly push the limits and aim higher. Stay awesome! 🤗</p>
516
+ <p><em>The Pixelgrade Team</em></p>
517
  </div>
518
  <div class="error-step hidden">
519
  <h3 class="modal-title">We've hit a snag!</h3>
includes/customify_theme_root.php CHANGED
@@ -88,7 +88,7 @@ $config['sections'] = [
88
  ],
89
  'header_site_title_font' => array(
90
  'type' => 'font',
91
- 'label' => esc_html__( 'Site Title Font', '__components_txtd' ),
92
  'selector' => '.page-template-template-homepage .entry-header h1',
93
  'callback' => 'typeline_font_cb',
94
 
@@ -118,7 +118,7 @@ $config['sections'] = [
118
  ),
119
  'header_navigation_font' => array(
120
  'type' => 'font',
121
- 'label' => esc_html__( 'Navigation Text', '__components_txtd' ),
122
  'selector' => '.storefront-primary-navigation',
123
  'callback' => 'typeline_font_cb',
124
 
@@ -156,7 +156,7 @@ $config['sections'] = [
156
  ],
157
  'main_content_page_title_font' => array(
158
  'type' => 'font',
159
- 'label' => esc_html__( 'Page Title Font', '__components_txtd' ),
160
  'selector' => '.page-template-template-homepage .entry-header h1',
161
  'callback' => 'typeline_font_cb',
162
 
@@ -186,7 +186,7 @@ $config['sections'] = [
186
  ),
187
  'main_content_body_text_font' => array(
188
  'type' => 'font',
189
- 'label' => esc_html__( 'Body Text Font', '__components_txtd' ),
190
  'selector' => 'body',
191
  'callback' => 'typeline_body_font_cb',
192
 
@@ -216,7 +216,7 @@ $config['sections'] = [
216
  ),
217
  'main_content_quote_block_font' => array(
218
  'type' => 'font',
219
- 'label' => esc_html__( 'Quote Block Font', '__components_txtd' ),
220
  'selector' => 'blockquote',
221
  'callback' => 'typeline_font_cb',
222
  'default' => array(
88
  ],
89
  'header_site_title_font' => array(
90
  'type' => 'font',
91
+ 'label' => esc_html__( 'Site Title Font', 'customify' ),
92
  'selector' => '.page-template-template-homepage .entry-header h1',
93
  'callback' => 'typeline_font_cb',
94
 
118
  ),
119
  'header_navigation_font' => array(
120
  'type' => 'font',
121
+ 'label' => esc_html__( 'Navigation Text', 'customify' ),
122
  'selector' => '.storefront-primary-navigation',
123
  'callback' => 'typeline_font_cb',
124
 
156
  ],
157
  'main_content_page_title_font' => array(
158
  'type' => 'font',
159
+ 'label' => esc_html__( 'Page Title Font', 'customify' ),
160
  'selector' => '.page-template-template-homepage .entry-header h1',
161
  'callback' => 'typeline_font_cb',
162
 
186
  ),
187
  'main_content_body_text_font' => array(
188
  'type' => 'font',
189
+ 'label' => esc_html__( 'Body Text Font', 'customify' ),
190
  'selector' => 'body',
191
  'callback' => 'typeline_body_font_cb',
192
 
216
  ),
217
  'main_content_quote_block_font' => array(
218
  'type' => 'font',
219
+ 'label' => esc_html__( 'Quote Block Font', 'customify' ),
220
  'selector' => 'blockquote',
221
  'callback' => 'typeline_font_cb',
222
  'default' => array(
js/customizer.js CHANGED
@@ -513,6 +513,8 @@
513
  break;
514
 
515
  case 'radio':
 
 
516
  case 'radio_image':
517
 
518
  // in case of an array of values we use the ( val in array) condition
513
  break;
514
 
515
  case 'radio':
516
+ case 'sm_radio':
517
+ case 'sm_switch':
518
  case 'radio_image':
519
 
520
  // in case of an array of values we use the ( val in array) condition
js/customizer/color-convert.js ADDED
File without changes
js/customizer/color-palettes-variations.js CHANGED
@@ -1,4 +1,29 @@
1
  window.colorPalettesVariations = {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  'light': {
3
  'sm_color_primary': ['sm_color_primary'],
4
  'sm_color_secondary': ['sm_color_secondary'],
@@ -11,9 +36,6 @@ window.colorPalettesVariations = {
11
  'sm_light_tertiary': ['sm_light_tertiary'],
12
  },
13
  'dark': {
14
- 'sm_color_primary': ['sm_color_primary'],
15
- 'sm_color_secondary': ['sm_color_secondary'],
16
- 'sm_color_tertiary': ['sm_color_tertiary'],
17
  'sm_dark_primary': ['sm_light_primary'],
18
  'sm_dark_secondary': ['sm_light_secondary'],
19
  'sm_dark_tertiary': ['sm_light_tertiary'],
@@ -21,7 +43,7 @@ window.colorPalettesVariations = {
21
  'sm_light_secondary': ['sm_dark_secondary'],
22
  'sm_light_tertiary': ['sm_dark_tertiary'],
23
  },
24
- 'colorful': {
25
  'sm_color_primary': ['sm_light_primary'],
26
  'sm_color_secondary': ['sm_light_secondary'],
27
  'sm_color_tertiary': ['sm_light_tertiary'],
@@ -32,6 +54,28 @@ window.colorPalettesVariations = {
32
  'sm_light_secondary': ['sm_color_secondary', 'sm_dark_secondary'],
33
  'sm_light_tertiary': ['sm_color_tertiary', 'sm_dark_tertiary'],
34
  },
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  'dark_alt': {
36
  'sm_color_primary': ['sm_light_primary'],
37
  'sm_color_secondary': ['sm_light_secondary'],
1
  window.colorPalettesVariations = {
2
+ 'color_diversity_low': {
3
+ 'sm_color_primary': ['sm_color_primary','sm_color_secondary','sm_color_tertiary'],
4
+ 'sm_color_secondary': [],
5
+ 'sm_color_tertiary': [],
6
+ },
7
+ 'color_diversity_medium': {
8
+ 'sm_color_primary': ['sm_color_primary','sm_color_secondary'],
9
+ 'sm_color_secondary': ['sm_color_tertiary'],
10
+ 'sm_color_tertiary': [],
11
+ },
12
+ 'color_diversity_high': {
13
+ 'sm_color_primary': ['sm_color_primary'],
14
+ 'sm_color_secondary': ['sm_color_secondary'],
15
+ 'sm_color_tertiary': ['sm_color_tertiary'],
16
+ },
17
+ 'shuffle_remix': {
18
+ 'sm_color_primary': ['sm_color_secondary'],
19
+ 'sm_color_secondary': ['sm_color_tertiary'],
20
+ 'sm_color_tertiary': ['sm_color_primary'],
21
+ },
22
+ 'shuffle_mixed': {
23
+ 'sm_color_primary': ['sm_color_tertiary'],
24
+ 'sm_color_secondary': ['sm_color_primary'],
25
+ 'sm_color_tertiary': ['sm_color_secondary'],
26
+ },
27
  'light': {
28
  'sm_color_primary': ['sm_color_primary'],
29
  'sm_color_secondary': ['sm_color_secondary'],
36
  'sm_light_tertiary': ['sm_light_tertiary'],
37
  },
38
  'dark': {
 
 
 
39
  'sm_dark_primary': ['sm_light_primary'],
40
  'sm_dark_secondary': ['sm_light_secondary'],
41
  'sm_dark_tertiary': ['sm_light_tertiary'],
43
  'sm_light_secondary': ['sm_dark_secondary'],
44
  'sm_light_tertiary': ['sm_dark_tertiary'],
45
  },
46
+ 'colorful2': {
47
  'sm_color_primary': ['sm_light_primary'],
48
  'sm_color_secondary': ['sm_light_secondary'],
49
  'sm_color_tertiary': ['sm_light_tertiary'],
54
  'sm_light_secondary': ['sm_color_secondary', 'sm_dark_secondary'],
55
  'sm_light_tertiary': ['sm_color_tertiary', 'sm_dark_tertiary'],
56
  },
57
+ 'colorful3': {
58
+ 'sm_color_primary': ['sm_light_primary'],
59
+ 'sm_color_secondary': ['sm_light_secondary'],
60
+ 'sm_color_tertiary': ['sm_light_tertiary'],
61
+ 'sm_dark_primary': ['sm_color_primary', 'sm_color_secondary', 'sm_color_tertiary'],
62
+ 'sm_dark_secondary': [],
63
+ 'sm_dark_tertiary': [],
64
+ 'sm_light_primary': ['sm_dark_primary', 'sm_dark_secondary', 'sm_dark_tertiary'],
65
+ 'sm_light_secondary': [],
66
+ 'sm_light_tertiary': [],
67
+ },
68
+ 'colorful': {
69
+ 'sm_color_primary': ['sm_color_secondary'],
70
+ 'sm_color_secondary': ['sm_color_tertiary'],
71
+ 'sm_color_tertiary': ['sm_color_primary'],
72
+ 'sm_dark_primary': ['sm_dark_primary'],
73
+ 'sm_dark_secondary': ['sm_dark_secondary'],
74
+ 'sm_dark_tertiary': ['sm_dark_tertiary'],
75
+ 'sm_light_primary': ['sm_light_primary'],
76
+ 'sm_light_secondary': ['sm_light_secondary'],
77
+ 'sm_light_tertiary': ['sm_light_tertiary'],
78
+ },
79
  'dark_alt': {
80
  'sm_color_primary': ['sm_light_primary'],
81
  'sm_color_secondary': ['sm_light_secondary'],
js/customizer/color-palettes.js CHANGED
@@ -1,7 +1,7 @@
1
  let ColorPalettes = ( function( $, exports, wp ) {
2
 
3
  const defaultVariation = 'light';
4
- const masterSettingIds = [
5
  "sm_color_primary",
6
  "sm_color_secondary",
7
  "sm_color_tertiary",
@@ -13,14 +13,22 @@ let ColorPalettes = ( function( $, exports, wp ) {
13
  "sm_light_tertiary"
14
  ];
15
 
16
- // const master_color_selector = '#_customize-input-sm_dark_color_master_slider_control';
17
- // const primary_color_selector = '#_customize-input-sm_dark_color_primary_slider_control';
18
- // const secondary_color_selector = '#_customize-input-sm_dark_color_secondary_slider_control';
19
- // const tertiary_color_selector = '#_customize-input-sm_dark_color_tertiary_slider_control';
20
- // const color_dispersion_selector = '#_customize-input-sm_colors_dispersion_control';
21
- // const color_focus_point_selector = '#_customize-input-sm_colors_focus_point_control';
22
- // const color_sliders_selector = primary_color_selector + ', ' + secondary_color_selector + ', ' + tertiary_color_selector;
23
- // const all_sliders_selector = color_sliders_selector + ', ' + color_dispersion_selector + ', ' + color_focus_point_selector;
 
 
 
 
 
 
 
 
24
 
25
  let setupGlobalsDone = false;
26
 
@@ -46,71 +54,104 @@ let ColorPalettes = ( function( $, exports, wp ) {
46
 
47
  const hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
48
 
49
- function rgb2hex(rgb) {
50
- rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
51
- return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
52
- }
53
-
54
- function hex(x) {
55
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
56
  }
57
 
58
- const setCurrentPalette = ( label ) => {
59
- const $palette = $( '.c-color-palette' );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
 
61
- if ( ! $palette.length ) {
62
- return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  }
 
 
64
 
65
- const $current = $palette.find( '.colors.current' );
66
- const $next = $palette.find( '.colors.next' );
67
-
68
- label = label || 'Custom Style';
69
- $palette.find( '.c-color-palette__name' ).text( label );
70
-
71
- // apply the last animate set of colors to the "current" color palette
72
- _.each( masterSettingIds, function( setting_id ) {
73
- const color = $next.find( '.' + setting_id ).css( 'color' );
74
- $current.find( '.color.' + setting_id ).css( 'color', color );
75
- $palette.find( 'input.' + setting_id ).val( rgb2hex( color ) );
76
- });
77
-
78
- // removing the "animate" class will put the "next" color palette out view
79
- // so we can update the colors in it
80
- $palette.removeClass( 'animate' );
81
-
82
- // update the colors in the "next" palette with the new values
83
  _.each( masterSettingIds, function( setting_id ) {
84
  const setting = wp.customize( setting_id );
85
 
86
  if ( typeof setting !== "undefined" ) {
87
- $next.find( '.' + setting_id ).css( 'color', setting() );
 
 
 
 
 
 
 
 
 
 
 
 
88
  }
89
  });
90
-
91
- $palette.find( '.altered' ).removeClass( 'altered' );
92
- // trigger transition to new color palette
93
- setTimeout(function() {
94
- $palette.addClass( 'animate' );
95
- updateActiveVariationControlColor();
96
- });
97
  };
98
 
99
- const updateActiveVariationControlColor = _.debounce( () => {
100
- var color = $( '.colors.next .color' ).first( ':visible' ).css( 'color' );
101
- $( '.c-color-palette__control' ).css( 'color', color );
102
- }, 30 );
103
 
104
- const resetSettings = () => {
105
- _.each( masterSettingIds, function( setting_id ) {
106
- const setting = wp.customize( setting_id );
 
 
 
107
 
108
- if ( typeof setting !== "undefined" ) {
109
- let value = setting();
110
- setting.set( value + "ff" );
111
- setting.set( value );
112
- }
113
- });
114
  };
115
 
116
  const getMasterFieldCallback = function( parent_setting_data, parent_setting_id ) {
@@ -123,7 +164,7 @@ let ColorPalettes = ( function( $, exports, wp ) {
123
  if ( _.isUndefined( setting ) ) {
124
  return;
125
  }
126
- setting.set( new_value );
127
  } );
128
  }
129
  };
@@ -141,8 +182,11 @@ let ColorPalettes = ( function( $, exports, wp ) {
141
  _.each( parent_setting_data.connected_fields, function( connected_field_data ) {
142
  let connected_setting_id = connected_field_data.setting_id;
143
  let connected_setting = wp.customize(connected_setting_id);
144
- window.connectedFieldsCallbacks[connected_setting_id] = toggleAlteredClassOnMasterControls;
145
- connected_setting.bind(window.connectedFieldsCallbacks[connected_setting_id]);
 
 
 
146
  } );
147
  }
148
  }
@@ -174,9 +218,11 @@ let ColorPalettes = ( function( $, exports, wp ) {
174
  return variation;
175
  };
176
 
177
- // return an array with the hex values of a certain color palette
178
- const getPaletteColors = ( palette_id ) => {
179
-
 
 
180
  };
181
 
182
  // return an array with the hex values of the current palette
@@ -190,6 +236,188 @@ let ColorPalettes = ( function( $, exports, wp ) {
190
  return colors;
191
  };
192
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
193
  const createCurrentPaletteControls = () => {
194
  const $palette = $( '.c-color-palette' );
195
  const $fields = $palette.find( '.c-color-palette__fields' ).find( 'input' );
@@ -198,7 +426,7 @@ let ColorPalettes = ( function( $, exports, wp ) {
198
  return;
199
  }
200
 
201
- const $colors = $palette.find( '.colors.next .color' );
202
 
203
  $colors.each( ( i, obj ) => {
204
  const $obj = $( obj );
@@ -210,18 +438,12 @@ let ColorPalettes = ( function( $, exports, wp ) {
210
 
211
  $input.iris( {
212
  change: ( event, ui ) => {
213
- const lastColor = setting();
214
  const currentColor = ui.color.toString();
215
 
216
- updateActiveVariationControlColor();
 
217
  setPalettesOnConnectedFields();
218
 
219
- if ( lastColor !== currentColor ) {
220
- $obj.css( 'color', currentColor );
221
- setting.set( currentColor );
222
- $palette.find( '.c-color-palette__name' ).text( 'Custom Style' );
223
- }
224
-
225
  if ( event.originalEvent.type !== 'external' ) {
226
  $palette.find( '.color.' + setting_id ).removeClass( 'altered' );
227
  }
@@ -276,15 +498,20 @@ let ColorPalettes = ( function( $, exports, wp ) {
276
  } );
277
 
278
  const $iris = $input.next( '.iris-picker' );
279
- const paletteWidth = $palette.outerWidth();
280
  const $visibleColors = $colors.filter( ':visible' );
281
  const index = $visibleColors.index( $obj );
282
 
283
  $iris.css( 'left', ( paletteWidth - 200 ) * index / ( $visibleColors.length - 1 ) );
284
 
285
- $input.iris( 'color', $obj.css( 'color' ) );
 
286
  $input.iris( 'show' );
287
  } );
 
 
 
 
288
  } );
289
 
290
  $( 'body' ).on( 'click', function() {
@@ -296,25 +523,27 @@ let ColorPalettes = ( function( $, exports, wp ) {
296
  $input.hide();
297
  } );
298
  } );
299
-
300
- setCurrentPalette();
301
  };
302
 
303
- const onPaletteChange = function() {
304
- const $label = $( this ).next( 'label' ).clone();
305
- let label;
 
 
306
 
307
- $label.find( '.preview__letter' ).remove();
308
- label = $label.text();
309
- $label.remove();
 
 
 
 
 
310
 
 
311
  $( this ).trigger( 'customify:preset-change' );
312
-
313
- setCurrentPalette( label );
314
-
315
- setPalettesOnConnectedFields();
316
-
317
- // buildColorMatrix();
318
  };
319
 
320
  // this function goes through all the connected fields and adds swatches to the default color picker for all the colors in the current color palette
@@ -350,16 +579,15 @@ let ColorPalettes = ( function( $, exports, wp ) {
350
 
351
  if ( ! $matrix.children().length ) {
352
  _.each( masterSettingIds, function( setting_id ) {
353
- const $bucket = $( '<div class="' + setting_id + '">' ).appendTo( $matrix );
354
  } );
355
  }
356
 
357
  _.each( masterSettingIds, function( setting_id ) {
358
  const $bucket = $matrix.children( '.' + setting_id );
359
- const color = wp.customize( setting_id )();
360
  let classes = [];
361
 
362
- $bucket.css( 'color', color );
363
 
364
  _.each( wp.customize.settings.settings[setting_id]['connected_fields'], function( connected_field ) {
365
  const field_id = connected_field.setting_id;
@@ -367,7 +595,7 @@ let ColorPalettes = ( function( $, exports, wp ) {
367
  classes.push( fieldClassName );
368
 
369
  if ( ! $bucket.children( '.' + fieldClassName ).length ) {
370
- const $color = $( '<div title="' + field_id + '" class="' + fieldClassName + '">' ).appendTo( $bucket );
371
  }
372
  } );
373
 
@@ -399,9 +627,14 @@ let ColorPalettes = ( function( $, exports, wp ) {
399
  if ( ! _.isUndefined( connectedFields ) && connectedFields.length ) {
400
  _.each( connectedFields, function( connectedField ) {
401
  let connectedSettingId = connectedField.setting_id;
402
- let connectedFieldValue = wp.customize( connectedSettingId )();
403
- if ( connectedFieldValue.toLowerCase() !== masterSettingValue.toLowerCase() ) {
404
- connectedFieldsWereAltered = true;
 
 
 
 
 
405
  }
406
  } );
407
 
@@ -414,10 +647,9 @@ let ColorPalettes = ( function( $, exports, wp ) {
414
  alteredSettingsSelector = '.' + alteredSettings.join(', .');
415
 
416
  $( '.c-color-palette .color' ).removeClass( 'altered' );
417
- $( '.js-altered-notification' ).toggleClass( 'hidden', ! alteredSettings.length );
418
 
419
  if ( alteredSettings.length ) {
420
- $( '.c-color-palette .color' ).filter( alteredSettingsSelector ).addClass( 'altered' );
421
  }
422
 
423
  }, 30 );
@@ -443,12 +675,11 @@ let ColorPalettes = ( function( $, exports, wp ) {
443
  const refreshCurrentPaletteControl = () => {
444
  toggleAlteredClassOnMasterControls();
445
  toggleHiddenClassOnMasterControls();
446
- updateActiveVariationControlColor();
 
447
  };
448
 
449
- const swapConnectedFields = ( settings ) => {
450
- let variation = getCurrentVariation();
451
- let swapMap = window.colorPalettesVariations[variation];
452
  let newSettings = JSON.parse(JSON.stringify(settings));
453
  let oldSettings = JSON.parse(JSON.stringify(settings));
454
 
@@ -509,99 +740,113 @@ let ColorPalettes = ( function( $, exports, wp ) {
509
  return settings;
510
  };
511
 
512
- const disperseColorConnectedFields = ( oldSettings, dispersion, focus ) => {
 
513
 
514
- let settings = _.clone(oldSettings);
 
 
 
 
515
 
516
- if ( _.isUndefined( settings['sm_color_primary']['connected_fields'] ) ) {
517
- settings['sm_color_primary']['connected_fields'] = [];
518
- }
519
 
520
- if ( _.isUndefined( settings['sm_color_secondary']['connected_fields'] ) ) {
521
- settings['sm_color_secondary']['connected_fields'] = [];
522
- }
523
 
524
- if ( _.isUndefined( settings['sm_color_tertiary']['connected_fields'] ) ) {
525
- settings['sm_color_tertiary']['connected_fields'] = [];
526
- }
527
 
528
- const primaryConnectedFields = Object.values( settings['sm_color_primary']['connected_fields'] );
529
- const secondaryConnectedFields = Object.values( settings['sm_color_secondary']['connected_fields'] );
530
- const tertiaryConnectedFields = Object.values( settings['sm_color_tertiary']['connected_fields'] );
531
-
532
- // A1 A2 A3 A4
533
- // |--- primary ---|-- secondary --|-- tertiary --|
534
- // B1 B2
535
- // |----- focus -----|
536
-
537
- const b1 = Math.max(0, focus - dispersion / 2 );
538
- const b2 = Math.min(1, focus + dispersion / 2 );
539
- const a1 = 0;
540
- const a2 = 0.334;
541
- const a3 = 0.667;
542
- const a4 = 1;
543
-
544
- const primaryWidth = b1 > a2 || b2 < a1 ? 0 : Math.min(a2, b2) - Math.max(a1, b1);
545
- const secondaryWidth = b1 > a3 || b2 < a2 ? 0 : Math.min(a3, b2) - Math.max(a2, b1);
546
- const tertiaryWidth = b1 > a4 || b2 < a3 ? 0 : Math.min(a4, b2) - Math.max(a3, b1);
547
-
548
- const totalWidth = primaryWidth + secondaryWidth + tertiaryWidth;
549
- const connectedFields = primaryConnectedFields.concat( secondaryConnectedFields ).concat( tertiaryConnectedFields );
550
- const primaryFieldsCount = Math.round(connectedFields.length * primaryWidth / totalWidth);
551
- const secondaryFieldsCount = Math.round(connectedFields.length * secondaryWidth / totalWidth);
552
-
553
- let newPrimaryConnectedFields = connectedFields.slice(0, primaryFieldsCount);
554
- let newSecondaryConnectedFields = connectedFields.slice(primaryFieldsCount, primaryFieldsCount + secondaryFieldsCount);
555
- let newTertiaryConnectedFields = connectedFields.slice(primaryFieldsCount + secondaryFieldsCount);
556
-
557
- newPrimaryConnectedFields = Object.keys( newPrimaryConnectedFields ).map( function(key) {
558
- return newPrimaryConnectedFields[key];
559
- });
560
- newSecondaryConnectedFields = Object.keys( newSecondaryConnectedFields ).map( function(key) {
561
- return newSecondaryConnectedFields[key];
562
- });
563
- newTertiaryConnectedFields = Object.keys( newTertiaryConnectedFields ).map( function(key) {
564
- return newTertiaryConnectedFields[key];
565
- });
566
 
567
- settings['sm_color_primary']['connected_fields'] = newPrimaryConnectedFields;
568
- settings['sm_color_secondary']['connected_fields'] = newSecondaryConnectedFields;
569
- settings['sm_color_tertiary']['connected_fields'] = newTertiaryConnectedFields;
 
 
570
 
571
- return settings;
572
- };
 
 
 
573
 
574
- const reloadConnectedFields = () => {
575
- // const primaryRatio = $( primary_color_selector ).val() / 100;
576
- // const secondaryRatio = $( secondary_color_selector ).val() / 100;
577
- // const tertiaryRatio = $( tertiary_color_selector ).val() / 100;
578
- // const colorDispersion = $( color_dispersion_selector ).val() / 100;
579
- // const focusPoint = $( color_focus_point_selector ).val() / 100;
580
 
581
- let tempSettings = JSON.parse(JSON.stringify(window.settingsClone));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
582
 
583
- // tempSettings = moveConnectedFields( tempSettings, 'sm_dark_primary', 'sm_color_primary', primaryRatio );
584
- // tempSettings = moveConnectedFields( tempSettings, 'sm_dark_secondary', 'sm_color_secondary', secondaryRatio );
585
- // tempSettings = moveConnectedFields( tempSettings, 'sm_dark_tertiary', 'sm_color_tertiary', tertiaryRatio );
586
- // tempSettings = disperseColorConnectedFields( tempSettings, colorDispersion, focusPoint );
587
 
588
- tempSettings = swapConnectedFields( tempSettings );
589
- wp.customize.settings.settings = tempSettings;
590
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
591
 
592
  const reinitializeConnectedFields = () => {
593
  reloadConnectedFields();
 
594
  unbindConnectedFields();
595
  bindConnectedFields();
596
- resetSettings();
597
- refreshCurrentPaletteControl();
598
  };
599
 
600
- const confirmChanges = ( callback ) => {
601
- if ( typeof callback !== 'function' ) {
602
- return;
603
- }
604
-
605
  let altered = !! $( '.c-color-palette .color.altered' ).length;
606
  let confirmed = true;
607
 
@@ -610,8 +855,13 @@ let ColorPalettes = ( function( $, exports, wp ) {
610
  }
611
 
612
  if ( ! altered || confirmed ) {
613
- callback();
 
 
 
614
  }
 
 
615
  };
616
 
617
  const bindEvents = () => {
@@ -622,30 +872,42 @@ let ColorPalettes = ( function( $, exports, wp ) {
622
  $paletteControl.removeClass( 'active' );
623
  $paletteControl.filter( '.variation-' + variation ).addClass( 'active' );
624
 
625
- $( 'body' ).on( 'click', paletteControlSelector, function() {
626
- confirmChanges( () => {
627
- let $obj = $( this ),
628
- $target = $( $obj.data( 'target' ) );
 
629
 
630
- $obj.siblings( paletteControlSelector ).removeClass( 'active' );
631
- $obj.addClass( 'active' );
632
- $target.prop( 'checked', true ).trigger( 'change' );
633
- } );
634
- } );
635
 
636
- // when variation is changed reload connected fields from cached version of customizer settings config
637
- $( document ).on( 'change', '[name="_customize-radio-sm_color_palette_variation_control"]', reinitializeConnectedFields );
 
 
 
638
 
639
- $( document ).on( 'click', '.customify_preset.color_palette input', function () {
640
- confirmChanges( onPaletteChange.bind( this ) );
 
 
 
 
 
641
  } );
642
 
643
- // $( all_sliders_selector ).on( 'input', reloadConnectedFields );
644
- //
645
- // $( master_color_selector ).on( 'input', function() {
646
- // const masterValue = $( master_color_selector ).val();
647
- // $( color_sliders_selector ).val( masterValue ).trigger( 'input' );
648
- // } );
 
 
 
 
 
 
 
 
649
  };
650
 
651
  wp.customize.bind( 'ready', function() {
@@ -653,11 +915,12 @@ let ColorPalettes = ( function( $, exports, wp ) {
653
 
654
  createCurrentPaletteControls();
655
 
656
- // buildColorMatrix();
657
  reloadConnectedFields();
658
- bindConnectedFields();
659
- refreshCurrentPaletteControl();
660
- setPalettesOnConnectedFields();
 
 
661
 
662
  bindEvents();
663
  } );
1
  let ColorPalettes = ( function( $, exports, wp ) {
2
 
3
  const defaultVariation = 'light';
4
+ const masterSettingIds = [
5
  "sm_color_primary",
6
  "sm_color_secondary",
7
  "sm_color_tertiary",
13
  "sm_light_tertiary"
14
  ];
15
 
16
+ const filteredColors = {
17
+ sm_color_primary: '',
18
+ sm_color_secondary: '',
19
+ sm_color_tertiary: '',
20
+ sm_dark_primary: '',
21
+ sm_dark_secondary: '',
22
+ sm_dark_tertiary: '',
23
+ sm_light_primary: '',
24
+ sm_light_secondary: '',
25
+ sm_light_tertiary: ''
26
+ };
27
+
28
+ const primary_color_selector = '#_customize-input-sm_dark_color_primary_slider_control';
29
+ const secondary_color_selector = '#_customize-input-sm_dark_color_secondary_slider_control';
30
+ const tertiary_color_selector = '#_customize-input-sm_dark_color_tertiary_slider_control';
31
+ const color_sliders_selector = primary_color_selector + ', ' + secondary_color_selector + ', ' + tertiary_color_selector;
32
 
33
  let setupGlobalsDone = false;
34
 
54
 
55
  const hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
56
 
57
+ function hex( x ) {
 
 
 
 
 
58
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
59
  }
60
 
61
+ function rgb2hex( color ) {
62
+ return '#' + hex( color[0] ) + hex( color[1] ) + hex( color[2] );
63
+ }
64
+
65
+ function hsl2hex( color ) {
66
+ var rgb = hsl2Rgb( color.hue, color.saturation, color.lightness );
67
+ return rgb2hex( rgb );
68
+ }
69
+
70
+ function hex2rgba( hex ) {
71
+ var matches = /^#([A-Fa-f0-9]{3,4}){1,2}$/.test( hex );
72
+ var r = 0, g = 0, b = 0, a = 0;
73
+ if ( matches ) {
74
+ hex = hex.substring(1).split('');
75
+ if ( hex.length === 3 ) {
76
+ hex = [hex[0], hex[0], hex[1], hex[1], hex[2], hex[2], 'F', 'F'];
77
+ }
78
+ if ( hex.length === 4 ) {
79
+ hex = [hex[0], hex[0], hex[1], hex[1], hex[2], hex[2], hex[3], hex[3]];
80
+ }
81
+ r = parseInt( [ hex[0], hex[1] ].join(''), 16 );
82
+ g = parseInt( [ hex[2], hex[3] ].join(''), 16 );
83
+ b = parseInt( [ hex[4], hex[5] ].join(''), 16 );
84
+ a = parseInt( [ hex[6], hex[7] ].join(''), 16 );
85
+ }
86
+ var hsl = rgbToHsl(r, g, b);
87
+ var rgba = {
88
+ red: r,
89
+ green: g,
90
+ blue: b,
91
+ alpha: a,
92
+ hue: hsl[0],
93
+ saturation: hsl[1],
94
+ lightness: hsl[2],
95
+ luma: 0.2126 * r + 0.7152 * g + 0.0722 * b
96
+ };
97
+ return rgba;
98
+ }
99
 
100
+ function rgbToHsl(r, g, b){
101
+ r /= 255, g /= 255, b /= 255;
102
+ var max = Math.max(r, g, b), min = Math.min(r, g, b);
103
+ var h, s, l = (max + min) / 2;
104
+
105
+ if(max == min){
106
+ h = s = 0; // achromatic
107
+ }else{
108
+ var d = max - min;
109
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
110
+ switch(max){
111
+ case r: h = (g - b) / d + (g < b ? 6 : 0); break;
112
+ case g: h = (b - r) / d + 2; break;
113
+ case b: h = (r - g) / d + 4; break;
114
+ }
115
+ h /= 6;
116
  }
117
+ return [h, s, l];
118
+ }
119
 
120
+ const resetSettings = () => {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
121
  _.each( masterSettingIds, function( setting_id ) {
122
  const setting = wp.customize( setting_id );
123
 
124
  if ( typeof setting !== "undefined" ) {
125
+ let value = setting();
126
+ let parent_setting_data = wp.customize.settings.settings[setting_id];
127
+
128
+ _.each( parent_setting_data.connected_fields, function( connected_field_data ) {
129
+ if ( _.isUndefined( connected_field_data ) || _.isUndefined( connected_field_data.setting_id ) || ! _.isString( connected_field_data.setting_id ) ) {
130
+ return;
131
+ }
132
+ const connected_setting = wp.customize( connected_field_data.setting_id );
133
+ if ( _.isUndefined( connected_setting ) ) {
134
+ return;
135
+ }
136
+ connected_setting.set( getFilteredColor( setting_id ) );
137
+ } );
138
  }
139
  });
 
 
 
 
 
 
 
140
  };
141
 
142
+ const updateFilteredColors = () => {
143
+ _.each( masterSettingIds, function( setting_id ) {
144
+ const setting = wp.customize( setting_id );
 
145
 
146
+ if ( typeof setting !== "undefined" ) {
147
+ let value = setting();
148
+ filteredColors[setting_id] = filterColor( value );
149
+ }
150
+ });
151
+ };
152
 
153
+ const getFilteredColor = ( setting_id ) => {
154
+ return filteredColors[setting_id];
 
 
 
 
155
  };
156
 
157
  const getMasterFieldCallback = function( parent_setting_data, parent_setting_id ) {
164
  if ( _.isUndefined( setting ) ) {
165
  return;
166
  }
167
+ setting.set( getFilteredColor( parent_setting_id ) );
168
  } );
169
  }
170
  };
182
  _.each( parent_setting_data.connected_fields, function( connected_field_data ) {
183
  let connected_setting_id = connected_field_data.setting_id;
184
  let connected_setting = wp.customize(connected_setting_id);
185
+
186
+ if ( typeof connected_setting !== "undefined" ) {
187
+ window.connectedFieldsCallbacks[connected_setting_id] = toggleAlteredClassOnMasterControls;
188
+ connected_setting.bind(window.connectedFieldsCallbacks[connected_setting_id]);
189
+ }
190
  } );
191
  }
192
  }
218
  return variation;
219
  };
220
 
221
+ const getSwapMap = ( variation ) => {
222
+ if ( ! window.colorPalettesVariations.hasOwnProperty( variation ) ) {
223
+ return defaultVariation;
224
+ }
225
+ return window.colorPalettesVariations[variation];
226
  };
227
 
228
  // return an array with the hex values of the current palette
236
  return colors;
237
  };
238
 
239
+ function hsl2Rgb(h, s, l){
240
+ var r, g, b;
241
+
242
+ if(s == 0){
243
+ r = g = b = l; // achromatic
244
+ }else{
245
+ var hue2rgb = function hue2rgb(p, q, t){
246
+ if(t < 0) t += 1;
247
+ if(t > 1) t -= 1;
248
+ if(t < 1/6) return p + (q - p) * 6 * t;
249
+ if(t < 1/2) return q;
250
+ if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
251
+ return p;
252
+ };
253
+
254
+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
255
+ var p = 2 * l - q;
256
+ r = hue2rgb(p, q, h + 1/3);
257
+ g = hue2rgb(p, q, h);
258
+ b = hue2rgb(p, q, h - 1/3);
259
+ }
260
+
261
+ return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
262
+ }
263
+
264
+ function mixRGB(color1, color2, ratio) {
265
+ ratio = ratio || 0.5;
266
+ color1.red = parseInt( color2.red * ratio + color1.red * ( 1 - ratio ), 10);
267
+ color1.green = parseInt( color2.green * ratio + color1.green * ( 1 - ratio ), 10);
268
+ color1.blue = parseInt( color2.blue * ratio + color1.blue * ( 1 - ratio ), 10);
269
+ return hex2rgba( rgb2hex( [color1.red, color1.green, color1.blue] ) );
270
+ }
271
+
272
+ function mix(property, color1, color2, ratio) {
273
+ return color1[property] * ( 1 - ratio ) + color2[property] * ratio;
274
+ }
275
+
276
+ function mixValues( value1, value2, ratio ) {
277
+ return value1 * ( 1 - ratio ) + value2 * ratio;
278
+ }
279
+
280
+ const filterColor = ( color ) => {
281
+ let filter = $( '[name*="sm_palette_filter"]:checked' ).val();
282
+ let newColor = hex2rgba( color );
283
+ var palette = getCurrentPaletteColors();
284
+ var paletteColors = palette.slice(0,3);
285
+ var paletteDark = palette.slice(3,6);
286
+ var average = getAveragePixel( getPixelsFromColors( palette ) );
287
+ var averageColor = getAveragePixel( getPixelsFromColors( paletteColors ) );
288
+ var averageDark = getAveragePixel( getPixelsFromColors( paletteDark ) );
289
+
290
+ // Intensity Filters
291
+ if ( filter === 'vivid' ) {
292
+ newColor = hsl2Rgb( newColor.hue, mixValues( newColor.saturation, 1, 0.5 ), newColor.lightness );
293
+ return rgb2hex( newColor );
294
+ }
295
+
296
+ if ( filter === 'warm' && color !== palette[0] ) {
297
+ var sepia = hex2rgba( '#704214' );
298
+ sepia.saturation = mix( 'saturation', sepia, newColor, 1 );
299
+ sepia.lightness = mix( 'lightness', sepia, newColor, 1 );
300
+ sepia = hex2rgba( hsl2hex( sepia ) );
301
+ newColor.saturation = newColor.saturation * 0.75;
302
+ newColor = hex2rgba( hsl2hex( newColor ) );
303
+ newColor = mixRGB( newColor, sepia, 0.75 );
304
+
305
+ newColor.lightness = mix( 'lightness', newColor, hex2rgba( newColor.lightness > 0.5 ? '#FFF' : '#000' ), 0.2 );
306
+ return hsl2hex( newColor );
307
+ }
308
+
309
+ if ( filter === 'softer' ) {
310
+ // if ( paletteColors.indexOf( color ) !== -1 ) {
311
+ // newColor = mixRGB( newColor, averageColor, 0.5 );
312
+ // return rgb2hex( [ newColor.red, newColor.green, newColor.blue ] );
313
+ // }
314
+ newColor.saturation = mix( 'saturation', newColor, hex2rgba( '#FFF' ), 0.3 );
315
+ newColor.lightness = mix( 'lightness', newColor, hex2rgba( '#FFF' ), 0.1 );
316
+ // newColor.hue = mix( 'hue', newColor, averageColor, 1 );
317
+ return hsl2hex( newColor );
318
+ }
319
+
320
+ if ( filter === 'pastel' ) {
321
+ newColor.saturation = mix( 'saturation', newColor, hex2rgba( '#FFF' ), 0.6 );
322
+ newColor.lightness = mix( 'lightness', newColor, hex2rgba( '#FFF' ), 0.2 );
323
+ return hsl2hex( newColor );
324
+ }
325
+
326
+ if ( filter === 'greyish' ) {
327
+ newColor = hsl2Rgb( newColor.hue, mixValues( newColor.saturation, 0, 0.8 ), newColor.lightness );
328
+ return rgb2hex(newColor);
329
+ }
330
+
331
+ // Custom (Real) Filters
332
+ if ( filter === 'clarendon' ) {
333
+ // Color Group
334
+ // Slightly increase saturation
335
+ if ( color === palette[0] || color === palette[1] || color === palette[2] ) {
336
+ newColor = hsl2Rgb( newColor.hue, mixValues( newColor.saturation, 1, 0.3 ), newColor.lightness );
337
+ return rgb2hex( newColor );
338
+ }
339
+
340
+ // Dark Group
341
+ // Add dark to darker colors
342
+ if ( color === palette[3] || color === palette[4] || color === palette[5] ) {
343
+ newColor.lightness = mix( 'lightness', newColor, hex2rgba( '#000' ), 0.4 );
344
+ }
345
+
346
+ // Light Group
347
+ // Add light to lighter colors
348
+ if ( color === palette[6] || color === palette[7] || color === palette[8] ) {
349
+ newColor.lightness = mix( 'lightness', newColor, hex2rgba( '#FFF' ), 0.4 );
350
+ }
351
+
352
+ return hsl2hex( newColor );
353
+ }
354
+
355
+ // Inactive Below
356
+ if ( filter === 'cold' && color !== palette[0] ) {
357
+ var targetHue = 0.55;
358
+
359
+ newColor.saturation = mix( 'saturation', newColor, hex2rgba( '#FFF' ), 0.4 );
360
+ newColor.hue = ( newColor.hue - targetHue ) / 18 + targetHue;
361
+ newColor = hex2rgba( hsl2hex( newColor ) );
362
+
363
+ // increase contrast ( saturation +10%, lightness +/- 20% );
364
+ var newColorHSL = rgbToHsl( newColor.red, newColor.green, newColor.blue );
365
+ newColor.hue = newColorHSL[0];
366
+ newColor.saturation = mixValues( newColorHSL[1], 1, 0.1 );
367
+ newColor.lightness = mix( 'lightness', newColor, hex2rgba( newColor.lightness > 0.5 ? '#FFF' : '#000' ), 0.2 );
368
+ return hsl2hex( newColor );
369
+ }
370
+
371
+ if ( filter === 'dumb' ) {
372
+
373
+ if ( color === palette[1] || color === palette[2] ) {
374
+ newColor = hex2rgba(palette[0]);
375
+ newColor.lightness = mix( 'lightness', newColor, hex2rgba( '#000' ), 0.2 );
376
+ newColor.saturation = mix( 'saturation', newColor, hex2rgba( '#000' ), 0.2 );
377
+
378
+ if ( color === palette[2] ) {
379
+ newColor.lightness = mix( 'lightness', newColor, hex2rgba( '#000' ), 0.2 );
380
+ newColor.saturation = mix( 'saturation', newColor, hex2rgba( '#000' ), 0.2 );
381
+ }
382
+ return hsl2hex( newColor );
383
+ } else {
384
+ newColor.hue = hex2rgba(palette[0]).hue;
385
+ return hsl2hex( newColor );
386
+ }
387
+ }
388
+
389
+ if ( filter === 'mayfair' ) {
390
+ if ( color === palette[1] || color === palette[2] ) {
391
+ newColor = hex2rgba(palette[0]);
392
+ newColor.hue = ( newColor.hue + 0.05 ) % 1;
393
+ if ( color === palette[2] ) {
394
+ newColor.hue = ( newColor.hue + 0.05 ) % 1;
395
+ }
396
+ return hsl2hex( newColor );
397
+ } else {
398
+ newColor.hue = hex2rgba(palette[0]).hue;
399
+ return hsl2hex( newColor );
400
+ }
401
+ }
402
+
403
+
404
+ if ( filter === 'sierra' ) {
405
+ if ( color === palette[1] || color === palette[2] ) {
406
+ newColor = hex2rgba(palette[0]);
407
+ newColor.hue = ( newColor.hue + 0.95 ) % 1;
408
+ if ( color === palette[2] ) {
409
+ newColor.hue = ( newColor.hue + 0.95 ) % 1;
410
+ }
411
+ return hsl2hex( newColor );
412
+ } else {
413
+ newColor.hue = hex2rgba(palette[0]).hue;
414
+ return hsl2hex( newColor );
415
+ }
416
+ }
417
+
418
+ return color;
419
+ };
420
+
421
  const createCurrentPaletteControls = () => {
422
  const $palette = $( '.c-color-palette' );
423
  const $fields = $palette.find( '.c-color-palette__fields' ).find( 'input' );
426
  return;
427
  }
428
 
429
+ const $colors = $palette.find( '.colors .color' );
430
 
431
  $colors.each( ( i, obj ) => {
432
  const $obj = $( obj );
438
 
439
  $input.iris( {
440
  change: ( event, ui ) => {
 
441
  const currentColor = ui.color.toString();
442
 
443
+ $obj.css( 'color', filterColor( currentColor ) );
444
+ setting.set( currentColor );
445
  setPalettesOnConnectedFields();
446
 
 
 
 
 
 
 
447
  if ( event.originalEvent.type !== 'external' ) {
448
  $palette.find( '.color.' + setting_id ).removeClass( 'altered' );
449
  }
498
  } );
499
 
500
  const $iris = $input.next( '.iris-picker' );
501
+ const paletteWidth = $palette.find( '.c-color-palette__colors' ).outerWidth();
502
  const $visibleColors = $colors.filter( ':visible' );
503
  const index = $visibleColors.index( $obj );
504
 
505
  $iris.css( 'left', ( paletteWidth - 200 ) * index / ( $visibleColors.length - 1 ) );
506
 
507
+ showOldColors();
508
+
509
  $input.iris( 'show' );
510
  } );
511
+
512
+ $input.on( 'focusout', ( e ) => {
513
+ showNewColors();
514
+ });
515
  } );
516
 
517
  $( 'body' ).on( 'click', function() {
523
  $input.hide();
524
  } );
525
  } );
 
 
526
  };
527
 
528
+ const showNewColors = function() {
529
+ _.each(masterSettingIds, function( id ) {
530
+ $( '.c-color-palette' ).find( '.color.' + id ).css( 'color', getFilteredColor( id ) );
531
+ });
532
+ };
533
 
534
+ const showOldColors = function() {
535
+ _.each(masterSettingIds, function( id ) {
536
+ const setting = wp.customize( id );
537
+ const initialColor = setting();
538
+ $( '.c-color-palette' ).find( '.c-color-palette__fields' ).find( 'input.' + id ).iris( 'color', initialColor );
539
+ $( '.c-color-palette' ).find( '.color.' + id ).css( 'color', initialColor );
540
+ });
541
+ };
542
 
543
+ const onPaletteChange = function() {
544
  $( this ).trigger( 'customify:preset-change' );
545
+ updateFilteredColors();
546
+ reinitializeConnectedFields();
 
 
 
 
547
  };
548
 
549
  // this function goes through all the connected fields and adds swatches to the default color picker for all the colors in the current color palette
579
 
580
  if ( ! $matrix.children().length ) {
581
  _.each( masterSettingIds, function( setting_id ) {
582
+ $( '<div class="' + setting_id + '">' ).appendTo( $matrix );
583
  } );
584
  }
585
 
586
  _.each( masterSettingIds, function( setting_id ) {
587
  const $bucket = $matrix.children( '.' + setting_id );
 
588
  let classes = [];
589
 
590
+ $bucket.css( 'color', getFilteredColor( setting_id ) );
591
 
592
  _.each( wp.customize.settings.settings[setting_id]['connected_fields'], function( connected_field ) {
593
  const field_id = connected_field.setting_id;
595
  classes.push( fieldClassName );
596
 
597
  if ( ! $bucket.children( '.' + fieldClassName ).length ) {
598
+ $( '<div title="' + field_id + '" class="' + fieldClassName + '">' ).appendTo( $bucket );
599
  }
600
  } );
601
 
627
  if ( ! _.isUndefined( connectedFields ) && connectedFields.length ) {
628
  _.each( connectedFields, function( connectedField ) {
629
  let connectedSettingId = connectedField.setting_id;
630
+ let connectedSetting = wp.customize( connectedSettingId );
631
+
632
+ if ( typeof connectedSetting !== "undefined" ) {
633
+ let connectedFieldValue = connectedSetting();
634
+
635
+ if ( connectedFieldValue.toLowerCase() !== filterColor( masterSettingValue ).toLowerCase() ) {
636
+ connectedFieldsWereAltered = true;
637
+ }
638
  }
639
  } );
640
 
647
  alteredSettingsSelector = '.' + alteredSettings.join(', .');
648
 
649
  $( '.c-color-palette .color' ).removeClass( 'altered' );
 
650
 
651
  if ( alteredSettings.length ) {
652
+ $( '.c-color-palette .color' ).filter( alteredSettingsSelector ).addClass( 'altered' );
653
  }
654
 
655
  }, 30 );
675
  const refreshCurrentPaletteControl = () => {
676
  toggleAlteredClassOnMasterControls();
677
  toggleHiddenClassOnMasterControls();
678
+ // setPalettesOnConnectedFields();
679
+ showNewColors();
680
  };
681
 
682
+ const swapConnectedFields = ( settings, swapMap ) => {
 
 
683
  let newSettings = JSON.parse(JSON.stringify(settings));
684
  let oldSettings = JSON.parse(JSON.stringify(settings));
685
 
740
  return settings;
741
  };
742
 
743
+ const reloadConnectedFields = () => {
744
+ let tempSettings = JSON.parse(JSON.stringify(window.settingsClone));
745
 
746
+ if ( typeof $( '[name*="sm_color_diversity"]:checked' ).data( 'default' ) === 'undefined'
747
+ || typeof $( '[name*="sm_coloration_level"]:checked' ).data( 'default' ) === 'undefined' ) {
748
+ const primaryRatio = $( primary_color_selector ).val() / 100;
749
+ const secondaryRatio = $( secondary_color_selector ).val() / 100;
750
+ const tertiaryRatio = $( tertiary_color_selector ).val() / 100;
751
 
752
+ tempSettings = moveConnectedFields( tempSettings, 'sm_dark_primary', 'sm_color_primary', primaryRatio );
753
+ tempSettings = moveConnectedFields( tempSettings, 'sm_dark_secondary', 'sm_color_secondary', secondaryRatio );
754
+ tempSettings = moveConnectedFields( tempSettings, 'sm_dark_tertiary', 'sm_color_tertiary', tertiaryRatio );
755
 
756
+ var diversity = $( '[name*="sm_color_diversity"]:checked' ).val();
757
+ var diversity_variation = getSwapMap( 'color_diversity_low' );
758
+ tempSettings = swapConnectedFields( tempSettings, diversity_variation );
759
 
760
+ if ( diversity === 'medium' ) {
761
+ tempSettings = moveConnectedFields( tempSettings, 'sm_color_primary', 'sm_color_secondary', 0.5 );
762
+ }
763
 
764
+ if ( diversity === 'high' ) {
765
+ tempSettings = moveConnectedFields( tempSettings, 'sm_color_primary', 'sm_color_secondary', 0.67 );
766
+ tempSettings = moveConnectedFields( tempSettings, 'sm_color_secondary', 'sm_color_tertiary', 0.50 );
767
+ }
768
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
769
 
770
+ var shuffle = $( '[name*="sm_shuffle_colors"]:checked' ).val();
771
+ if ( shuffle !== 'default' ) {
772
+ var shuffle_variation = getSwapMap( 'shuffle_' + shuffle );
773
+ tempSettings = swapConnectedFields( tempSettings, shuffle_variation );
774
+ }
775
 
776
+ var dark_mode = $( '[name*="sm_dark_mode"]:checked' ).val();
777
+ if ( dark_mode === 'on' ) {
778
+ var dark_mmode_variation = getSwapMap( 'dark' );
779
+ tempSettings = swapConnectedFields( tempSettings, dark_mmode_variation );
780
+ }
781
 
782
+ wp.customize.settings.settings = tempSettings;
783
+ };
 
 
 
 
784
 
785
+ const getPixelsFromColors = function( colors ) {
786
+ var pixels = [];
787
+ _.each( colors, function( color ) {
788
+ pixels.push( hex2rgba( color ) );
789
+ });
790
+ return pixels;
791
+ }
792
+
793
+ const getAveragePixel = function( pixels ) {
794
+ var averagePixel = {
795
+ red: 0,
796
+ green: 0,
797
+ blue: 0,
798
+ alpha: 0,
799
+ hue: 0,
800
+ saturation: 0,
801
+ lightness: 0,
802
+ luma: 0
803
+ };
804
+
805
+ for ( var i = 0; i < pixels.length; i++ ) {
806
+ var pixel = pixels[i];
807
+
808
+ for ( var k in averagePixel ) {
809
+ averagePixel[k] += pixel[k];
810
+ }
811
+ }
812
 
813
+ for ( var k in averagePixel ) {
814
+ averagePixel[k] /= pixels.length;
815
+ }
 
816
 
817
+ return averagePixel;
818
+ }
819
+
820
+ const applyColorationValueToFields = () => {
821
+ var setting_id = 'sm_coloration_level';
822
+ var setting = wp.customize( setting_id );
823
+ var coloration = $( '[name*="sm_coloration_level"]:checked' ).val();
824
+
825
+ if ( typeof $( '[name*="sm_coloration_level"]:checked' ).data( 'default' ) !== 'undefined' ) {
826
+
827
+ var sliders = ['sm_dark_color_primary_slider', 'sm_dark_color_secondary_slider', 'sm_dark_color_tertiary_slider'];
828
+ _.each(sliders, function( slider_id ) {
829
+ var slider_setting = customify_settings.settings[ slider_id ];
830
+ wp.customize( slider_id ).set( slider_setting.default );
831
+ $( '#_customize-input-' + slider_id + '_control ').val( slider_setting.default );
832
+ });
833
+ } else {
834
+ var ratio = parseFloat( coloration );
835
+ $( color_sliders_selector ).val( ratio );
836
+ }
837
+ reinitializeConnectedFields();
838
+ };
839
 
840
  const reinitializeConnectedFields = () => {
841
  reloadConnectedFields();
842
+ buildColorMatrix();
843
  unbindConnectedFields();
844
  bindConnectedFields();
845
+ refreshCurrentPaletteControl();
846
+ resetSettings();
847
  };
848
 
849
+ const confirmChanges = ( callback ) => {
 
 
 
 
850
  let altered = !! $( '.c-color-palette .color.altered' ).length;
851
  let confirmed = true;
852
 
855
  }
856
 
857
  if ( ! altered || confirmed ) {
858
+ if ( typeof callback === 'function' ) {
859
+ callback();
860
+ }
861
+ return true;
862
  }
863
+
864
+ return false;
865
  };
866
 
867
  const bindEvents = () => {
872
  $paletteControl.removeClass( 'active' );
873
  $paletteControl.filter( '.variation-' + variation ).addClass( 'active' );
874
 
875
+ $( document ).on( 'click', '.customify_preset.color_palette input', function (e) {
876
+ if ( ! confirmChanges( onPaletteChange.bind( this ) ) ) {
877
+ e.preventDefault();
878
+ }
879
+ } );
880
 
 
 
 
 
 
881
 
882
+ $( '[for*="sm_palette_filter"], [for*="sm_coloration_level"], [for*="sm_color_diversity"], [for*="sm_shuffle_colors"], [for*="sm_dark_mode"]' ).on( 'click', function(e) {
883
+ if ( ! confirmChanges() ) {
884
+ e.preventDefault();
885
+ }
886
+ });
887
 
888
+ $( '[name*="sm_coloration_level"]' ).on( 'change', applyColorationValueToFields );
889
+ $( '[name*="sm_color_diversity"]' ).on( 'change', reinitializeConnectedFields );
890
+ $( '[name*="sm_shuffle_colors"]' ).on( 'change', reinitializeConnectedFields );
891
+ $( '[name*="sm_dark_mode"]' ).on( 'change', reinitializeConnectedFields );
892
+ $( '[name*="sm_palette_filter"]' ).on( 'change', () => {
893
+ updateFilteredColors();
894
+ reinitializeConnectedFields();
895
  } );
896
 
897
+ $( document ).on( 'click', '.sm-tabs__item', function( e ) {
898
+ e.preventDefault();
899
+
900
+ var $section = $( '#sub-accordion-section-sm_color_palettes_section' );
901
+ var $tabs = $( '.sm-tabs__item' );
902
+ var $active = $(this);
903
+ var target = $active.data('target');
904
+
905
+ $tabs.removeClass( 'sm-tabs__item--active' );
906
+ $active.addClass( 'sm-tabs__item--active' );
907
+ $section.removeClass( 'sm-view-palettes sm-view-filters sm-view-customize').addClass( 'sm-view-' + target );
908
+ } );
909
+
910
+ $( '.sm-tabs__item' ).first().trigger( 'click' );
911
  };
912
 
913
  wp.customize.bind( 'ready', function() {
915
 
916
  createCurrentPaletteControls();
917
 
 
918
  reloadConnectedFields();
919
+ updateFilteredColors();
920
+ unbindConnectedFields();
921
+ bindConnectedFields();
922
+ refreshCurrentPaletteControl();
923
+ buildColorMatrix();
924
 
925
  bindEvents();
926
  } );
js/customizer/swap-values.js CHANGED
@@ -35,11 +35,6 @@
35
  swap_values( 'sm_color_secondary', 'sm_dark_secondary' );
36
  } );
37
 
38
- $document.on( 'click', '[data-action="sm_toggle_advanced_settings"]', function( e ) {
39
- e.preventDefault();
40
- $( '#sub-accordion-section-sm_color_palettes_section' ).toggleClass( 'advanced' );
41
- } );
42
-
43
  } );
44
 
45
  } )( jQuery, window, wp );
35
  swap_values( 'sm_color_secondary', 'sm_dark_secondary' );
36
  } );
37
 
 
 
 
 
 
38
  } );
39
 
40
  } )( jQuery, window, wp );
readme.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: pixelgrade, euthelup, babbardel, vlad.olaru, cristianfrumusanu, ra
3
  Tags: customizer, css, editor, live, preview, customizer
4
  Requires at least: 4.7.0
5
  Tested up to: 4.9.8
6
- Stable tag: 1.9.0
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -45,6 +45,13 @@ With [Customify](https://github.com/pixelgrade/customify), developers can easily
45
 
46
  == Changelog ==
47
 
 
 
 
 
 
 
 
48
  = 1.9.0 =
49
  * Added ability to modify existing Customizer panels, sections, controls
50
  * Added system for admin notifications
3
  Tags: customizer, css, editor, live, preview, customizer
4
  Requires at least: 4.7.0
5
  Tested up to: 4.9.8
6
+ Stable tag: 1.9.1
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
45
 
46
  == Changelog ==
47
 
48
+ = 2.0.0 =
49
+ * Added the much improved and overall awesome **Color Palettes v2.0 styling system** (all modesty aside).
50
+ * Minor improvements that are secondary to the one above. Enjoy.
51
+
52
+ = 1.9.1 =
53
+ * Fixed the Customizer JS crash due to wrong merge.
54
+
55
  = 1.9.0 =
56
  * Added ability to modify existing Customizer panels, sections, controls
57
  * Added system for admin notifications
scss/_fields.scss ADDED
@@ -0,0 +1,271 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ $accent-color: #57abd5;
2
+ $light-color: #ffffff;
3
+ $color-grey: #cccccc;
4
+ $text-color-dark: #416b7e;
5
+ $text-color-light: rgba(65, 107, 126, 0.7);
6
+
7
+ // ---TABS---
8
+ .sm-radio-group {
9
+ position: relative;
10
+ border-radius: 999em;
11
+ overflow: hidden;
12
+
13
+ //max-width: 20.285em;
14
+ height: 2.428em;
15
+
16
+ display: flex;
17
+ flex-wrap: nowrap;
18
+ align-items: stretch;
19
+
20
+ color: $text-color-light;
21
+
22
+ font-size: 14px;
23
+ -webkit-font-smoothing: antialiased;
24
+ font-weight: 600;
25
+ line-height: 1.142em;
26
+
27
+ > * {
28
+ flex: 1 1 0;
29
+ }
30
+
31
+ &:after {
32
+ content: "";
33
+
34
+ position: absolute;
35
+ top: 0;
36
+ right: 0;
37
+ bottom: 0;
38
+ left: 0;
39
+
40
+ border: .142em solid $accent-color;
41
+ border-radius: 999em;
42
+ pointer-events: none;
43
+ }
44
+
45
+ input[type="radio"] {
46
+ display: none;
47
+
48
+ &:checked + label {
49
+ background-color: $accent-color;
50
+ color: $light-color;
51
+
52
+ &:before {
53
+ content: "";
54
+
55
+ display: inline-block;
56
+ color: inherit;
57
+
58
+ position: relative;
59
+ top: .285em;
60
+ margin-right: .45em;
61
+
62
+ height: .8em;
63
+ width: .55em;
64
+
65
+ border-right: 2px solid;
66
+ border-bottom: 2px solid;
67
+
68
+ transform: translateY(-50%) rotate(45deg);
69
+ }
70
+ }
71
+ }
72
+
73
+ label {
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+
78
+ position: relative;
79
+ cursor: pointer;
80
+ transition: all .25s ease;
81
+
82
+ color: inherit;
83
+
84
+ &:hover {
85
+ color: $text-color-dark;
86
+ }
87
+
88
+ &:nth-of-type(2) {
89
+ border-left: 2px solid $accent-color;
90
+ border-right: 2px solid $accent-color;
91
+ }
92
+ }
93
+
94
+ //----- HIDDEN TABS ----
95
+ @at-root [id="customize-control-sm_coloration_level_control"] .sm-radio-group {
96
+ display: flex;
97
+ flex-direction: row-reverse;
98
+ flex-wrap: nowrap;
99
+ align-items: stretch;
100
+ justify-content: flex-start;
101
+
102
+ > * {
103
+ flex: 0 0 33.33%;
104
+ }
105
+
106
+ input[type="radio"] {
107
+ &:last-of-type:checked + label {
108
+ background: linear-gradient(90deg, #3DAAE0 0%, #D557BE 100%);
109
+ }
110
+
111
+ &:nth-of-type(1):checked,
112
+ &:nth-of-type(2):checked {
113
+ ~ label:last-of-type {
114
+ margin-right: -33.33%;
115
+ }
116
+ }
117
+ }
118
+
119
+ label {
120
+ &:nth-of-type(1) {
121
+ order: 4;
122
+ }
123
+
124
+ &:nth-of-type(2) {
125
+ order: 3;
126
+ border-left: 2px solid $accent-color;
127
+ border-right: 2px solid $accent-color;
128
+ }
129
+
130
+ &:nth-of-type(3) {
131
+ order: 2;
132
+ }
133
+
134
+ &:nth-of-type(4) {
135
+ order: 1;
136
+ border-left: 2px solid $accent-color;
137
+ }
138
+ }
139
+ }
140
+ }
141
+
142
+ [id="sub-accordion-section-sm_color_palettes_section"].sm-view-customize li.customize-control-sm_switch {
143
+ display: flex !important;
144
+ align-items: center;
145
+ justify-content: space-between;
146
+
147
+ padding-top: 42px;
148
+ padding-bottom: 42px;
149
+
150
+ .customize-control-title {
151
+ display: inline-block;
152
+ }
153
+ }
154
+
155
+ //---- TOGGLE BUTTON ----
156
+ .sm-switch {
157
+ display: flex;
158
+ flex-wrap: nowrap;
159
+ align-items: stretch;
160
+ justify-content: flex-start;
161
+ overflow: hidden;
162
+
163
+ position: relative;
164
+ height: 2.428em;
165
+ max-width: 5.5em;
166
+
167
+ border-radius: 999em;
168
+ color: $light-color;
169
+ font-size: 14px;
170
+ -webkit-font-smoothing: antialiased;
171
+ font-weight: 600;
172
+ line-height: 1.142em;
173
+
174
+ z-index: 10;
175
+
176
+ input[type="radio"] {
177
+ display: none;
178
+
179
+ + label {
180
+ display: flex;
181
+ align-items: center;
182
+ flex: 0 0 100%;
183
+
184
+ &,
185
+ &:after {
186
+ transition: all 0.2s ease-out;
187
+ }
188
+ }
189
+
190
+ &:checked + label {
191
+ pointer-events: none;
192
+ }
193
+
194
+ &:nth-of-type(1) {
195
+ + label {
196
+ padding-left: 1.214em;
197
+
198
+ &:after {
199
+ content: "";
200
+
201
+ position: absolute;
202
+ top: 0;
203
+ right: 0;
204
+ bottom: 0;
205
+ left: 0;
206
+
207
+ background-color: $accent-color;
208
+ z-index: -1;
209
+ }
210
+ }
211
+
212
+ &:not(:checked) {
213
+ + label {
214
+ transform: translateX(-100%) translateX(2.125em);
215
+ }
216
+
217
+ + label:after {
218
+ background: $color-grey;
219
+ transform: translateX(100%) translateX(-2.125em);
220
+ }
221
+
222
+ + label ~ label {
223
+ transform: translateX(-100%);
224
+ }
225
+ }
226
+
227
+ &:checked {
228
+ + label ~ label {
229
+ transform: translateX(-2.4em);
230
+ }
231
+
232
+ + label ~ label:before {
233
+ transform: translateX(-100%) translateX(2.125em);
234
+ }
235
+ }
236
+ }
237
+
238
+ &:nth-of-type(2) {
239
+ + label {
240
+ flex-direction: row-reverse;
241
+ padding-right: 1em;
242
+
243
+ &:before {
244
+ content: "";
245
+
246
+ position: absolute;
247
+ top: 0;
248
+ right: 0;
249
+ bottom: 0;
250
+ left: 0;
251
+ }
252
+
253
+ &:after {
254
+ content: "";
255
+ display: block;
256
+
257
+ height: 2.142em;
258
+ width: 2.142em;
259
+ margin-right: auto;
260
+ margin-left: 0.125em;
261
+
262
+ border-radius: 50%;
263
+ background-color: $light-color;
264
+ box-shadow: 1px 2px 2px 0 rgba(23,21,21,0.15);
265
+ pointer-events: none;
266
+ }
267
+ }
268
+ }
269
+ }
270
+ }
271
+
scss/_theme.scss CHANGED
@@ -6,7 +6,7 @@
6
 
7
  $borders : #e0e8ef;
8
  $background-hover : #f5fcff;
9
- $background-sidebar : #eaf9fe;
10
 
11
  #customize-header-actions {
12
  background: #ffffff;
6
 
7
  $borders : #e0e8ef;
8
  $background-hover : #f5fcff;
9
+ $background-sidebar : #F7F9FA;;
10
 
11
  #customize-header-actions {
12
  background: #ffffff;
scss/customizer.scss CHANGED
@@ -1,5 +1,5 @@
1
  @charset "UTF-8";
2
-
3
 
4
 
5
 
@@ -21,6 +21,7 @@ $popup : 275px;
21
  $container-spacing : 17px;
22
 
23
  $blue-dark : #416B7E;
 
24
 
25
  $fields_height : 44px;
26
  $fields_spacing : 24px;
@@ -62,7 +63,7 @@ $background-hover : #f5fcff;
62
 
63
  .control-section:not(.control-section-themes) .customize-control {
64
  padding: 0;
65
- width:100%;
66
  min-height: initial;
67
  }
68
 
@@ -300,12 +301,12 @@ $background-hover : #f5fcff;
300
  display: block;
301
  font-size: 14px;
302
  line-height: 24px;
303
- font-weight: 600;
304
  // margin-bottom: 5px;
305
  }
306
 
307
  .customize-control-title {
308
- color: $blue-dark;
309
  }
310
 
311
  %section-background {
@@ -1828,8 +1829,8 @@ ul.font-options__options-list {
1828
 
1829
  // COLOR PALETTES SECTION //
1830
 
1831
- $palette_box_shadow: inset 0 0 3px 0 rgba(0,0,0,0.15), inset 0 1px 3px 0 rgba(0,0,0,0.15);
1832
- $palette_box_shadow_stronger: inset 0 2px 3px 0 rgba(0,0,0,0.15), inset 0 0 3px 0 rgba(0,0,0,0.15);
1833
 
1834
  .pix_customizer_setting {
1835
  .customize-inside-control-row {
@@ -1927,13 +1928,6 @@ $palette_box_shadow_stronger: inset 0 2px 3px 0 rgba(0,0,0,0.15), inset 0 0 3px
1927
  @for $i from 1 through 10 {
1928
  &:nth-child(#{$i}) {
1929
  transition-delay: 0s + $i/20 - 1/20;
1930
-
1931
- // PLAYGROUND:
1932
- // Size items based on color accent
1933
- // Higher size for accent colors
1934
- // Lower sizes for light colors
1935
-
1936
- // flex-grow: 1/$i * 10 + $i/10;
1937
  }
1938
  }
1939
  }
@@ -1977,129 +1971,11 @@ $palette_box_shadow_stronger: inset 0 2px 3px 0 rgba(0,0,0,0.15), inset 0 0 3px
1977
  }
1978
  }
1979
 
1980
- [id="customize-control-sm_color_primary_control"],
1981
- [id="customize-control-sm_dark_primary_control"],
1982
- [id="customize-control-sm_light_primary_control"],
1983
- [id="customize-control-sm_color_secondary_control"],
1984
- [id="customize-control-sm_dark_secondary_control"],
1985
- [id="customize-control-sm_light_secondary_control"],
1986
- [id="customize-control-sm_color_tertiary_control"],
1987
- [id="customize-control-sm_dark_tertiary_control"],
1988
- [id="customize-control-sm_light_tertiary_control"] {
1989
- visibility: hidden;
1990
-
1991
- > span {
1992
- display: none;
1993
- }
1994
-
1995
- .wp-picker-input-wrap,
1996
- .wp-picker-holder {
1997
- visibility: visible;
1998
- }
1999
-
2000
- .wp-picker-container {
2001
- width: 100%;
2002
- float: left;
2003
- //border-radius: 50%;
2004
-
2005
- button {
2006
- //width: 100px;
2007
- //height: 100px;
2008
- //border-radius: 50%;
2009
- //border: 4px solid #CCC;
2010
-
2011
- &:before {
2012
- content: "";
2013
- position: relative;
2014
- display: block;
2015
- visibility: visible;
2016
- background-color: inherit;
2017
- width: 90px;
2018
- height: 90px;
2019
- border-radius: 50%;
2020
- border: 3px solid #DDD;
2021
- }
2022
- }
2023
- }
2024
- }
2025
-
2026
- #customize-control-sm_color_palette_control {
2027
-
2028
- $x: 70px;
2029
- $y: 54px;
2030
-
2031
- ~ [id*="sm_color_primary"] .wp-picker-container button:before {
2032
-
2033
- }
2034
-
2035
- ~ [id*="sm_color_secondary"] .wp-picker-container button:before {
2036
- top: -1 * $y;
2037
- right: -1 * $x;
2038
- }
2039
-
2040
- ~ [id*="sm_color_tertiary"] .wp-picker-container button:before {
2041
- top: -2 * $y;
2042
- right: -2 * $x;
2043
- }
2044
-
2045
- ~ [id*="sm_dark_primary"] .wp-picker-container button:before {
2046
- top: -1 * $y;
2047
- }
2048
-
2049
- ~ [id*="sm_dark_secondary"] .wp-picker-container button:before {
2050
- top: -2 * $y;
2051
- right: -1 * $x;
2052
- }
2053
-
2054
- ~ [id*="sm_dark_tertiary"] .wp-picker-container button:before {
2055
- top: -3 * $y;
2056
- right: -2 * $x;
2057
- }
2058
-
2059
- ~ [id*="sm_light_primary"] .wp-picker-container button:before {
2060
- top: -2 * $y;
2061
- }
2062
-
2063
- ~ [id*="sm_light_secondary"] .wp-picker-container button:before {
2064
- top: -3 * $y;
2065
- right: -1 * $x;
2066
- }
2067
-
2068
- ~ [id*="sm_light_tertiary"] .wp-picker-container button:before {
2069
- top: -4 * $y;
2070
- right: -2 * $x;
2071
- }
2072
- }
2073
-
2074
  /// ------------------
2075
 
2076
  $palette_height: 64px;
2077
  $palette_border-radius: 5px;
2078
 
2079
- .c-color-palette {
2080
- position: relative;
2081
-
2082
- .c-color-palette__label {
2083
- flex-grow: 1;
2084
- }
2085
- }
2086
-
2087
- .c-color-palette:after {
2088
- height: $palette_height;
2089
- border-radius: $palette_border-radius;
2090
- }
2091
-
2092
- .c-color-palette:after {
2093
- content: "";
2094
- display: block;
2095
- position: absolute;
2096
- top: 0;
2097
- left: 0;
2098
- right: 0;
2099
- box-shadow: $palette_box_shadow;
2100
- pointer-events: none;
2101
- }
2102
-
2103
  .label__inner {
2104
  color: #000000;
2105
  background: #F5F6F1;
@@ -2110,53 +1986,6 @@ $palette_border-radius: 5px;
2110
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
2111
  }
2112
 
2113
- .c-color-palette__label {
2114
- display: flex;
2115
- align-items: center;
2116
- height: 40px;
2117
- padding: 12px;
2118
-
2119
- color: black;
2120
- background: white;
2121
- }
2122
-
2123
- .colors {
2124
- position: relative;
2125
- display: flex;
2126
- align-items: stretch;
2127
- width: 100%;
2128
- }
2129
-
2130
- .fill {
2131
- position: relative;
2132
- height: $palette_height;
2133
- margin-bottom: 1em;
2134
- }
2135
-
2136
- .c-color-palette__overlay {
2137
- position: absolute;
2138
- top: 0;
2139
- left: 0;
2140
- right: 0;
2141
- height: $palette_height;
2142
-
2143
- display: flex;
2144
- align-items: center;
2145
- }
2146
-
2147
- .fill:before {
2148
- position: absolute;
2149
- top: 0;
2150
- left: 0;
2151
- right: 0;
2152
- bottom: 0;
2153
- }
2154
-
2155
- .fill:before {
2156
- content: "";
2157
- background: currentColor;
2158
- }
2159
-
2160
  .picker {
2161
  position: relative;
2162
  top: 0;
@@ -2168,18 +1997,19 @@ $palette_border-radius: 5px;
2168
  margin-bottom: auto;
2169
 
2170
  border-radius: 50%;
 
2171
  transform: translate3d(-50%,0,0);
2172
  }
2173
 
2174
- .colors.next .picker > i {
2175
  display: block;
2176
  position: absolute;
2177
  top: 0;
2178
  right: 0;
2179
  bottom: 0;
2180
  left: 0;
2181
- border-radius: 50%;
2182
  box-shadow: $palette_box_shadow;
 
2183
  pointer-events: none;
2184
  z-index: 20;
2185
  }
@@ -2218,149 +2048,15 @@ $palette_border-radius: 5px;
2218
  border-bottom-right-radius: $palette_border-radius;
2219
  }
2220
 
2221
- $animation-duration: 1s;
2222
-
2223
- .colors.next {
2224
- position: absolute;
2225
- top: 0;
2226
- left: 0;
2227
-
2228
- .fill:before {
2229
- transform: translateY(-100%);
2230
- }
2231
-
2232
- .picker:before {
2233
- transform: translateY(-100%);
2234
- opacity: 0;
2235
- }
2236
-
2237
- .picker:after {
2238
- opacity: 0;
2239
- }
2240
- }
2241
-
2242
- .c-color-palette.animate {
2243
-
2244
- .next {
2245
-
2246
- .fill:before {
2247
- animation: fill $animation-duration cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
2248
- }
2249
-
2250
- .picker {
2251
- animation: picker-filter $animation-duration cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
2252
- }
2253
-
2254
- .picker:before {
2255
- animation: fill-picker-before $animation-duration cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
2256
- }
2257
-
2258
- .picker:after {
2259
- animation: fill-picker-after $animation-duration cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
2260
- }
2261
- }
2262
-
2263
- .current {
2264
- .fill,
2265
- .picker {
2266
- animation: fade-out $animation-duration forwards;
2267
- }
2268
- }
2269
-
2270
- @function remove-nth($list, $index) {
2271
- $result: null;
2272
-
2273
- @if type-of($index) != number {
2274
- @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
2275
- } @else if $index == 0 {
2276
- @warn "List index 0 must be a non-zero integer for `remove-nth`.";
2277
- } @else if abs($index) > length($list) {
2278
- @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
2279
- } @else {
2280
- $result: ();
2281
- $index: if($index < 0, length($list) + $index + 1, $index);
2282
-
2283
- @for $i from 1 through length($list) {
2284
- @if $i != $index {
2285
- $result: append($result, nth($list, $i));
2286
- }
2287
- }
2288
- }
2289
-
2290
- @return $result;
2291
- }
2292
-
2293
- $list: 1, 2, 3, 4, 5, 6, 7, 8, 9;
2294
-
2295
- @for $i from 1 through length($list) {
2296
- .color:nth-child(#{$i}) {
2297
-
2298
- $random: random( length($list) );
2299
- $delay: nth($list, $random);
2300
- $list: remove-nth($list, $random);
2301
-
2302
- .fill,
2303
- .fill:before,
2304
- .picker,
2305
- .picker:after,
2306
- .picker:before {
2307
- animation-delay: #{$delay * 0.05}s;
2308
- }
2309
- }
2310
- }
2311
- }
2312
-
2313
- @keyframes fill {
2314
- 30% { transform: translateY(0); }
2315
- 100% { transform: translateY(0); }
2316
- }
2317
-
2318
- @keyframes picker-filter {
2319
- 0% { filter: none; }
2320
- 1% { filter: url('#goo'); }
2321
- 99% { filter: url('#goo'); }
2322
- 100% { filter: none; }
2323
- }
2324
-
2325
- @keyframes fill-picker-before {
2326
- 24% { opacity: 0; transform: translateY(-130%); }
2327
- 25% { opacity: 1; transform: translateY(-130%); }
2328
- 32% { opacity: 1; transform: translateY(-130%); }
2329
- 52% { opacity: 1; transform: translateY(-130%); }
2330
- 99% { opacity: 1; transform: translateY(-160%); }
2331
- 100% { opacity: 0; transform: translateY(-160%); }
2332
- }
2333
-
2334
- @keyframes fill-picker-after {
2335
- 24% { opacity: 0; transform: translateY(-160%); }
2336
- 25% { opacity: 1; transform: translateY(-160%); }
2337
- 32% { opacity: 1; transform: translateY(-120%); }
2338
- 100% { opacity: 1; transform: translateY(0); }
2339
- }
2340
-
2341
- @keyframes fade-out {
2342
- 90% { opacity: 1; }
2343
- 100% { opacity: 0; }
2344
- }
2345
-
2346
  .label {
2347
  margin-right: auto;
2348
  }
2349
 
2350
- .colors.next .picker {
2351
- }
2352
-
2353
- .c-color-palette__blur {
2354
- display: none;
2355
- }
2356
-
2357
  #customize-theme-controls [id*="sm_current_color_palette_control"] {
2358
  display: block;
2359
- margin: -12px -12px 19px;
2360
  width: auto;
2361
 
2362
  .color-palette-container {
2363
- padding: 19px;
2364
  background: white;
2365
 
2366
  .description {
@@ -2376,68 +2072,10 @@ $animation-duration: 1s;
2376
  }
2377
  }
2378
 
2379
- .c-color-palette__name {
2380
- margin-right: auto;
2381
- }
2382
-
2383
- .c-color-palette__control {
2384
- width: 2em;
2385
- height: 2em;
2386
- margin-left: 0.25em;
2387
-
2388
- display: flex;
2389
- justify-content: center;
2390
- align-items: center;
2391
- border-radius: 50%;
2392
-
2393
- &, span {
2394
- transition: color .3s ease-in-out;
2395
- }
2396
-
2397
- span {
2398
- color: rgba(0,0,0,0.25);
2399
- transform: scale(0.8);
2400
- }
2401
-
2402
- &.active {
2403
- background: currentColor;
2404
-
2405
- span {
2406
- color: white;
2407
- }
2408
- }
2409
  }
2410
 
2411
- #sub-accordion-section-sm_color_palettes_section {
2412
- display: flex !important;
2413
- flex-direction: column;
2414
- padding: 12px 0 0 !important;
2415
- overflow: hidden;
2416
-
2417
- > * {
2418
- display: block !important;
2419
- flex-grow: 0;
2420
- padding: 0 12px;
2421
- }
2422
-
2423
- #customize-control-sm_color_palette_control {
2424
- // flex-basis: 0;
2425
- flex-shrink: 0;
2426
- flex-grow: 1;
2427
- overflow-y: scroll;
2428
- margin-top: -19px;
2429
- padding-top: 19px;
2430
- margin-bottom: 0;
2431
- }
2432
-
2433
- &:not(.advanced) #customize-control-sm_color_palette_control ~ li:not([id="customize-control-sm_toggle_advanced_settings_control"]) {
2434
- display: none !important;
2435
- }
2436
-
2437
- &.advanced #customize-control-sm_color_palette_control {
2438
- display: none !important;
2439
- }
2440
- }
2441
  .c-color-palette .iris-picker {
2442
  position: absolute;
2443
  top: 100%;
@@ -2469,24 +2107,27 @@ $animation-duration: 1s;
2469
  }
2470
  }
2471
 
 
 
 
 
 
 
 
 
 
2472
  .color {
2473
  display: flex;
2474
  flex-direction: column;
2475
 
2476
  flex: 1 1 0;
2477
  overflow: hidden;
2478
-
2479
- .c-color-palette.animate & {
2480
- transition: flex-grow .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
2481
-
2482
- &.hidden {
2483
- transition: flex-grow .3s cubic-bezier(0.6, -1.00, 0.74, 0.05); // easeBackInMega
2484
- }
2485
- }
2486
 
2487
  &.hidden {
2488
  display: flex;
2489
  flex-grow: 0;
 
2490
 
2491
  .picker {
2492
  opacity: 0;
@@ -2495,76 +2136,19 @@ $animation-duration: 1s;
2495
  }
2496
 
2497
  .picker {
2498
- border: 2px solid transparent;
2499
  transition: opacity .3s ease-in-out, border-color .3s ease-in-out;
2500
  cursor: pointer;
2501
  }
2502
 
2503
- .picker i {
2504
- transition: box-shadow .3s ease-in-out;
2505
- }
2506
-
2507
  &.inactive .picker {
2508
  opacity: 0.2;
2509
  }
2510
 
2511
- &.active .picker {
2512
- border-color: #73C5EE;
2513
- }
2514
-
2515
- .colors &.active {
2516
- i {
2517
- box-shadow: inset 0 0 3px 0 transparent, inset 0 1px 3px 0 transparent;
2518
- }
2519
- }
2520
-
2521
  &.inactive .picker:hover {
2522
  opacity: 1;
2523
  }
2524
  }
2525
 
2526
- .c-color-palette__tooltip {
2527
- position: absolute;
2528
- bottom: 100%;
2529
- left: 50%;
2530
- z-index: 300;
2531
-
2532
- margin-bottom: 5px;
2533
- padding: 4px 14px;
2534
-
2535
- opacity: 0;
2536
- transform: translateX(-50%);
2537
- transition: opacity .2s ease-out;
2538
-
2539
- color: white;
2540
- background-color: #606A72;
2541
- box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15);
2542
-
2543
- &:after {
2544
- content: "";
2545
-
2546
- position: absolute;
2547
- top: 100%;
2548
- left: 50%;
2549
-
2550
- display: block;
2551
- border: 5px solid transparent;
2552
- border-bottom-width: 0;
2553
- border-top-color: #606A72;
2554
-
2555
- transform: translateX(-50%);
2556
- }
2557
-
2558
- .c-color-palette__control:hover & {
2559
- opacity: 1;
2560
- }
2561
- }
2562
-
2563
- .c-color-palette__control {
2564
- position: relative;
2565
- cursor: pointer;
2566
- }
2567
-
2568
  input.c-color-palette__input[class] {
2569
  margin-top: 1em;
2570
  }
@@ -2578,61 +2162,6 @@ input.c-color-palette__input[class] {
2578
  }
2579
  }
2580
 
2581
- //.wp-full-overlay-sidebar {
2582
- // overflow: hidden;
2583
- //}
2584
-
2585
- .sm_color_matrix {
2586
- display: flex;
2587
- flex-wrap: wrap;
2588
- margin-top: -15px;
2589
- margin-left: -15px;
2590
-
2591
- > * {
2592
- display: flex;
2593
- flex-wrap: wrap;
2594
- align-content: flex-start;
2595
- flex: 0 0 percentage(1/3);
2596
- padding-top: 15px;
2597
- padding-left: 15px;
2598
-
2599
- > * {
2600
- // width: 15px;
2601
- // height: 15px;
2602
- // margin: 2px;
2603
- background-color: currentColor;
2604
- border-radius: 50%;
2605
- border: 1px solid #ccc;
2606
- animation-duration: 0.75s;
2607
- animation-name: bounceIn;
2608
- }
2609
- }
2610
- }
2611
-
2612
- .sm_color_matrix > * {
2613
- display: grid;
2614
- grid-auto-rows: 2px;
2615
- grid-auto-columns: 2px;
2616
-
2617
-
2618
-
2619
- > :nth-child(1) { grid-area: 16 / 12 / span 12 / span 12; }
2620
- > :nth-child(2) { grid-area: 26 / 24 / span 4 / span 4; }
2621
- > :nth-child(3) { grid-area: 13 / 24 / span 4 / span 4; }
2622
- > :nth-child(4) { grid-area: 8 / 8 / span 8 / span 8; }
2623
- > :nth-child(5) { grid-area: 32 / 8 / span 4 / span 4; }
2624
- > :nth-child(6) { grid-area: 30 / 16 / span 8 / span 8; }
2625
- > :nth-child(7) { grid-area: 4 / 20 / span 8 / span 8; }
2626
- > :nth-child(8) { grid-area: 17 / 26 / span 8 / span 8; }
2627
- > :nth-child(9) { grid-area: 22 / 2 / span 8 / span 8; }
2628
- > :nth-child(10) { grid-area: 28 / 11 / span 2 / span 2; }
2629
- > :nth-child(11) { grid-area: 9 / 31 / span 6 / span 6; }
2630
- > :nth-child(11) { grid-area: 26 / 30 / span 9 / span 9; }
2631
- > :nth-child(12) { grid-area: 17 / 7 / span 4 / span 4; }
2632
- > :nth-child(13) { grid-area: 19 / 36 / span 6 / span 6; }
2633
- > :nth-child(14) { grid-area: 12 / 18 / span 2 / span 2; }
2634
- }
2635
-
2636
  @keyframes bounceIn {
2637
  0%, 20%, 40%, 60%, 80%, 100% {
2638
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
@@ -2766,7 +2295,6 @@ input.c-color-palette__input[class] {
2766
  bottom: 0;
2767
  left: 0;
2768
  z-index: 15;
2769
- border-radius: 50%;
2770
  pointer-events: none;
2771
  opacity: 0;
2772
  transition: opacity .3s ease-in-out;
@@ -2826,3 +2354,213 @@ input.c-color-palette__input[class] {
2826
  }
2827
  }
2828
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  @charset "UTF-8";
2
+ @import 'fields';
3
 
4
 
5
 
21
  $container-spacing : 17px;
22
 
23
  $blue-dark : #416B7E;
24
+ $blue-darker : #2A3B44;
25
 
26
  $fields_height : 44px;
27
  $fields_spacing : 24px;
63
 
64
  .control-section:not(.control-section-themes) .customize-control {
65
  padding: 0;
66
+ width: 100%;
67
  min-height: initial;
68
  }
69
 
301
  display: block;
302
  font-size: 14px;
303
  line-height: 24px;
304
+ font-weight: 500;
305
  // margin-bottom: 5px;
306
  }
307
 
308
  .customize-control-title {
309
+ color: $blue-darker;
310
  }
311
 
312
  %section-background {
1829
 
1830
  // COLOR PALETTES SECTION //
1831
 
1832
+ $palette_box_shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);
1833
+ $palette_box_shadow_stronger: inset 0 0 3px 0 rgba(0,0,0,0.4);
1834
 
1835
  .pix_customizer_setting {
1836
  .customize-inside-control-row {
1928
  @for $i from 1 through 10 {
1929
  &:nth-child(#{$i}) {
1930
  transition-delay: 0s + $i/20 - 1/20;
 
 
 
 
 
 
 
1931
  }
1932
  }
1933
  }
1971
  }
1972
  }
1973
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1974
  /// ------------------
1975
 
1976
  $palette_height: 64px;
1977
  $palette_border-radius: 5px;
1978
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1979
  .label__inner {
1980
  color: #000000;
1981
  background: #F5F6F1;
1986
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
1987
  }
1988
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1989
  .picker {
1990
  position: relative;
1991
  top: 0;
1997
  margin-bottom: auto;
1998
 
1999
  border-radius: 50%;
2000
+ overflow: hidden;
2001
  transform: translate3d(-50%,0,0);
2002
  }
2003
 
2004
+ .colors .picker > i {
2005
  display: block;
2006
  position: absolute;
2007
  top: 0;
2008
  right: 0;
2009
  bottom: 0;
2010
  left: 0;
 
2011
  box-shadow: $palette_box_shadow;
2012
+ border-radius: 50%;
2013
  pointer-events: none;
2014
  z-index: 20;
2015
  }
2048
  border-bottom-right-radius: $palette_border-radius;
2049
  }
2050
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2051
  .label {
2052
  margin-right: auto;
2053
  }
2054
 
 
 
 
 
 
 
 
2055
  #customize-theme-controls [id*="sm_current_color_palette_control"] {
2056
  display: block;
 
2057
  width: auto;
2058
 
2059
  .color-palette-container {
 
2060
  background: white;
2061
 
2062
  .description {
2072
  }
2073
  }
2074
 
2075
+ .c-color-palette__fields {
2076
+ position: relative;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2077
  }
2078
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2079
  .c-color-palette .iris-picker {
2080
  position: absolute;
2081
  top: 100%;
2107
  }
2108
  }
2109
 
2110
+ .colors {
2111
+ position: relative;
2112
+ display: flex;
2113
+ flex-wrap: wrap;
2114
+ align-items: center;
2115
+ width: 100%;
2116
+ height: 3em;
2117
+ }
2118
+
2119
  .color {
2120
  display: flex;
2121
  flex-direction: column;
2122
 
2123
  flex: 1 1 0;
2124
  overflow: hidden;
2125
+ transition: flex-grow .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
 
 
 
 
 
 
 
2126
 
2127
  &.hidden {
2128
  display: flex;
2129
  flex-grow: 0;
2130
+ transition: flex-grow .3s cubic-bezier(0.6, -1.00, 0.74, 0.05); // easeBackInMega
2131
 
2132
  .picker {
2133
  opacity: 0;
2136
  }
2137
 
2138
  .picker {
 
2139
  transition: opacity .3s ease-in-out, border-color .3s ease-in-out;
2140
  cursor: pointer;
2141
  }
2142
 
 
 
 
 
2143
  &.inactive .picker {
2144
  opacity: 0.2;
2145
  }
2146
 
 
 
 
 
 
 
 
 
 
 
2147
  &.inactive .picker:hover {
2148
  opacity: 1;
2149
  }
2150
  }
2151
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2152
  input.c-color-palette__input[class] {
2153
  margin-top: 1em;
2154
  }
2162
  }
2163
  }
2164
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2165
  @keyframes bounceIn {
2166
  0%, 20%, 40%, 60%, 80%, 100% {
2167
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
2295
  bottom: 0;
2296
  left: 0;
2297
  z-index: 15;
 
2298
  pointer-events: none;
2299
  opacity: 0;
2300
  transition: opacity .3s ease-in-out;
2354
  }
2355
  }
2356
 
2357
+ .c-color-palette {
2358
+ padding: 30px 20px 18px;
2359
+ }
2360
+
2361
+ [id="customize-control-sm_current_color_palette_control"][id] {
2362
+ margin-bottom: 0;
2363
+
2364
+ ~ .customize-control {
2365
+ background-color: #FFFFFF;
2366
+ margin-bottom: 0;
2367
+ padding: 24px 20px 0;
2368
+ }
2369
+ }
2370
+
2371
+ // hide the matrix control
2372
+ #customize-control-sm_dark_color_primary_slider_control,
2373
+ #customize-control-sm_dark_color_secondary_slider_control,
2374
+ #customize-control-sm_dark_color_tertiary_slider_control {
2375
+ display: none !important;
2376
+ }
2377
+
2378
+ .sm_color_matrix {
2379
+ display: flex;
2380
+ display: none;
2381
+ flex-wrap: wrap;
2382
+ margin-left: -15px;
2383
+
2384
+ > * {
2385
+ display: grid;
2386
+ grid-auto-rows: 2px;
2387
+ grid-auto-columns: 2px;
2388
+
2389
+ flex: 0 0 percentage(1/3);
2390
+ padding-top: 15px;
2391
+ padding-left: 15px;
2392
+
2393
+ > * {
2394
+ background-color: currentColor;
2395
+ border-radius: 50%;
2396
+ border: 1px solid #ccc;
2397
+ animation-duration: 0.75s;
2398
+ animation-name: bounceIn;
2399
+ }
2400
+
2401
+ > :nth-child(1) { grid-area: 16 / 12 / span 12 / span 12; }
2402
+ > :nth-child(2) { grid-area: 26 / 24 / span 4 / span 4; }
2403
+ > :nth-child(3) { grid-area: 13 / 24 / span 4 / span 4; }
2404
+ > :nth-child(4) { grid-area: 8 / 8 / span 8 / span 8; }
2405
+ > :nth-child(5) { grid-area: 32 / 8 / span 4 / span 4; }
2406
+ > :nth-child(6) { grid-area: 30 / 16 / span 8 / span 8; }
2407
+ > :nth-child(7) { grid-area: 4 / 20 / span 8 / span 8; }
2408
+ > :nth-child(8) { grid-area: 17 / 26 / span 8 / span 8; }
2409
+ > :nth-child(9) { grid-area: 22 / 2 / span 8 / span 8; }
2410
+ > :nth-child(10) { grid-area: 28 / 11 / span 2 / span 2; }
2411
+ > :nth-child(11) { grid-area: 9 / 31 / span 6 / span 6; }
2412
+ > :nth-child(11) { grid-area: 26 / 30 / span 9 / span 9; }
2413
+ > :nth-child(12) { grid-area: 17 / 7 / span 4 / span 4; }
2414
+ > :nth-child(13) { grid-area: 19 / 36 / span 6 / span 6; }
2415
+ > :nth-child(14) { grid-area: 12 / 18 / span 2 / span 2; }
2416
+ > :nth-child(n+15) { display: none; }
2417
+ }
2418
+ }
2419
+
2420
+
2421
+ .sm-tabs {
2422
+ display: flex;
2423
+ justify-content: space-between;
2424
+ padding: 0 16px;
2425
+ text-align: center;
2426
+
2427
+ border-bottom: 1px solid #DFE8EF;
2428
+
2429
+ &__item {
2430
+ padding: 12px 0;
2431
+ margin-bottom: -1px;
2432
+ // flex-grow: 1;
2433
+ flex-basis: 31%;
2434
+
2435
+ font-size: 14px;
2436
+ // font-weight: 500;
2437
+ color: $blue-dark;
2438
+ opacity: 0.7;
2439
+
2440
+ border-bottom: 3px solid transparent;
2441
+ cursor: pointer;
2442
+
2443
+ transition: all 0.2s ease;
2444
+
2445
+ &:not(&--active):hover {
2446
+ color: $blue-darker;
2447
+ border-bottom-color: #E2E4E7;
2448
+ opacity: 1;
2449
+ }
2450
+ }
2451
+
2452
+ &__item--active {
2453
+ color: $blue-darker;
2454
+ border-bottom-color: #57ABD5;
2455
+ opacity: 1;
2456
+ }
2457
+ }
2458
+
2459
+ [id="sub-accordion-section-sm_color_palettes_section"] {
2460
+ display: flex !important;
2461
+ flex-direction: column;
2462
+ padding: 12px 0 0 !important;
2463
+ overflow: hidden;
2464
+
2465
+ #customize-control-sm_color_palette_control {
2466
+ flex-shrink: 0;
2467
+ flex-grow: 1;
2468
+ overflow-y: scroll;
2469
+ margin-bottom: 0;
2470
+ padding-top: 12px;
2471
+ }
2472
+
2473
+ > * {
2474
+ flex-grow: 0;
2475
+ padding: 0 12px;
2476
+ }
2477
+
2478
+ [id="customize-control-sm_current_color_palette_control"] ~ * {
2479
+
2480
+
2481
+ display: none !important;
2482
+ }
2483
+
2484
+ [id="customize-control-sm_palettes_description_control"],
2485
+ [id="customize-control-sm_filters_description_control"],
2486
+ [id="customize-control-sm_customize_description_control"] {
2487
+ span {
2488
+ margin: 0;
2489
+ }
2490
+ }
2491
+
2492
+ &.sm-view-palettes {
2493
+ [id="customize-control-sm_palettes_description_control"],
2494
+ [id="customize-control-sm_color_palette_control"] {
2495
+ display: block !important;
2496
+ }
2497
+ }
2498
+
2499
+ &.sm-view-filters {
2500
+ [id="customize-control-sm_filters_description_control"],
2501
+ [id="customize-control-sm_palette_filter_control"] {
2502
+ display: block !important;
2503
+ }
2504
+ }
2505
+
2506
+ &.sm-view-customize {
2507
+ [id="customize-control-sm_customize_description_control"],
2508
+ [id="customize-control-sm_coloration_level_control"],
2509
+ [id="customize-control-sm_color_diversity_control"],
2510
+ [id="customize-control-sm_shuffle_colors_control"],
2511
+ [id="customize-control-sm_dark_mode_control"] {
2512
+ display: block !important;
2513
+ }
2514
+ }
2515
+
2516
+ [id="customize-control-sm_spacing_bottom_control"][id] {
2517
+ display: block !important;
2518
+ min-height: 24px;
2519
+ flex-grow: 1;
2520
+ }
2521
+ }
2522
+
2523
+ [id="customize-control-sm_color_palette_control"] {
2524
+ .customize-control-title,
2525
+ .customize-control-description {
2526
+ display: none;
2527
+ }
2528
+ }
2529
+
2530
+ // display each palette filter on its own row
2531
+ .customize-control-radio[class][id="customize-control-sm_palette_filter_control"] > .customize-inside-control-row:not(:only-of-type) {
2532
+ display: block;
2533
+ width: auto;
2534
+ }
2535
+
2536
+ .color {
2537
+ &[class*="sm_color"][class*="_connected"],
2538
+ &[class*="sm_dark"][class*="_connected"],
2539
+ &[class*="sm_light"][class*="_connected"] {
2540
+ display: none;
2541
+ }
2542
+ }
2543
+
2544
+ .c-color-palette__colors {
2545
+ position: relative;
2546
+ }
2547
+
2548
+ .c-color-palette {
2549
+ canvas, svg {
2550
+ max-width: 100%;
2551
+ height: auto;
2552
+ }
2553
+ }
2554
+
2555
+ .c-color-palette__fields {
2556
+ position: absolute;
2557
+ top: 100%;
2558
+ left: 0;
2559
+ right: 0;
2560
+ z-index: 100;
2561
+ }
2562
+
2563
+ [id="sub-accordion-section-sm_color_palettes_section"] > .customize-section-description-container {
2564
+ margin-bottom: 0;
2565
+ border-bottom: 1px solid #DFE8EF;
2566
+ }