Issues (377)

class-kirki-modules-customizer-styling.php (1 issue)

1
<?php
2
/**
3
 * Changes the styling of the customizer
4
 * based on the settings set using the kirki_config filter.
5
 * For documentation please see
6
 * https://github.com/aristath/kirki/wiki/Styling-the-Customizer
7
 *
8
 * @package     Kirki
9
 * @category    Modules
10
 * @author      Aristeides Stathopoulos
11
 * @copyright   Copyright (c) 2017, Aristeides Stathopoulos
12
 * @license    https://opensource.org/licenses/MIT
13
 * @since       3.0.0
14
 */
15
16
// Exit if accessed directly.
17
if ( ! defined( 'ABSPATH' ) ) {
18
	exit;
19
}
20
21
/**
22
 * Adds styles to the customizer.
23
 */
24
class Kirki_Modules_Customizer_Styling {
25
26
	/**
27
	 * The object instance.
28
	 *
29
	 * @static
30
	 * @access private
31
	 * @since 3.0.0
32
	 * @var object
33
	 */
34
	private static $instance;
35
36
	/**
37
	 * Constructor.
38
	 *
39
	 * @access protected
40
	 */
41
	protected function __construct() {
42
		add_action( 'customize_controls_print_styles', array( $this, 'custom_css' ), 99 );
43
	}
44
45
	/**
46
	 * Gets an instance of this object.
47
	 * Prevents duplicate instances which avoid artefacts and improves performance.
48
	 *
49
	 * @static
50
	 * @access public
51
	 * @since 3.0.0
52
	 * @return object
53
	 */
54
	public static function get_instance() {
55
		if ( ! self::$instance ) {
56
			self::$instance = new self();
57
		}
58
		return self::$instance;
59
	}
60
61
	/**
62
	 * Add custom CSS rules to the head, applying our custom styles.
63
	 *
64
	 * @access public
65
	 */
66
	public function custom_css() {
67
		$config = apply_filters( 'kirki_config', array() );
68
		if ( ! isset( $config['color_accent'] ) && ! isset( $config['color_back'] ) ) {
69
			return;
70
		}
71
		$back = isset( $config['color_back'] ) ? $config['color_back'] : false;
72
73
		$text_on_back              = '';
74
		$border_on_back            = '';
75
		$back_on_back              = '';
76
		$hover_on_back             = '';
77
		$arrows_on_back            = '';
78
		$text_on_accent            = '';
79
		$border_on_accent          = '';
80
		$accent_disabled_obj       = '';
81
		$accent_disabled           = '';
82
		$text_on_accent_disabled   = '';
83
		$border_on_accent_disabled = '';
84
85
		if ( $back ) {
86
			$back_obj       = ariColor::newColor( $back );
87
			$text_on_back   = ( 60 > $back_obj->lightness ) ? $back_obj->getNew( 'lightness', $back_obj->lightness + 60 )->toCSS( $back_obj->mode ) : $back_obj->getNew( 'lightness', $back_obj->lightness - 60 )->toCSS( $back_obj->mode );
88
			$border_on_back = ( 80 < $back_obj->lightness ) ? $back_obj->getNew( 'lightness', $back_obj->lightness - 13 )->toCSS( $back_obj->mode ) : $back_obj->getNew( 'lightness', $back_obj->lightness + 13 )->toCSS( $back_obj->mode );
89
			$back_on_back   = ( 90 < $back_obj->lightness ) ? $back_obj->getNew( 'lightness', $back_obj->lightness - 6 )->toCSS( $back_obj->mode ) : $back_obj->getNew( 'lightness', $back_obj->lightness + 11 )->toCSS( $back_obj->mode );
90
			$hover_on_back  = ( 90 < $back_obj->lightness ) ? $back_obj->getNew( 'lightness', $back_obj->lightness - 3 )->toCSS( $back_obj->mode ) : $back_obj->getNew( 'lightness', $back_obj->lightness + 3 )->toCSS( $back_obj->mode );
91
			$arrows_on_back = ( 50 > $back_obj->lightness ) ? $back_obj->getNew( 'lightness', $back_obj->lightness + 30 )->toCSS( $back_obj->mode ) : $back_obj->getNew( 'lightness', $back_obj->lightness - 30 )->toCSS( $back_obj->mode );
92
		}
93
		$accent = ( isset( $config['color_accent'] ) ) ? $config['color_accent'] : false;
94
		if ( $accent ) {
95
			$accent_obj                = ariColor::newColor( $accent );
96
			$text_on_accent            = ( 60 > $accent_obj->lightness ) ? $accent_obj->getNew( 'lightness', $accent_obj->lightness + 60 )->toCSS( $accent_obj->mode ) : $accent_obj->getNew( 'lightness', $accent_obj->lightness - 60 )->toCSS( $accent_obj->mode );
97
			$border_on_accent          = ( 50 < $accent_obj->lightness ) ? $accent_obj->getNew( 'lightness', $accent_obj->lightness - 4 )->toCSS( $accent_obj->mode ) : $accent_obj->getNew( 'lightness', $accent_obj->lightness + 4 )->toCSS( $accent_obj->mode );
98
			$accent_disabled_obj       = ( 35 < $accent_obj->lightness ) ? $accent_obj->getNew( 'lightness', $accent_obj->lightness - 30 ) : $accent_obj->getNew( 'lightness', $accent_obj->lightness + 30 );
99
			$accent_disabled           = $accent_disabled_obj->toCSS( $accent_disabled_obj->mode );
100
			$text_on_accent_disabled   = ( 60 > $accent_disabled_obj->lightness ) ? $accent_disabled_obj->getNew( 'lightness', $accent_disabled_obj->lightness + 60 )->toCSS( $accent_disabled_obj->mode ) : $accent_disabled_obj->getNew( 'lightness', $accent_disabled_obj->lightness - 60 )->toCSS( $accent_disabled_obj->mode );
101
			$border_on_accent_disabled = ( 50 < $accent_disabled_obj->lightness ) ? $accent_disabled_obj->getNew( 'lightness', $accent_disabled_obj->lightness - 4 )->toCSS( $accent_disabled_obj->mode ) : $accent_disabled_obj->getNew( 'lightness', $accent_disabled_obj->lightness + 4 )->toCSS( $accent_disabled_obj->mode );
102
		}
103
		?>
104
		<style>
105
		.wp-full-overlay-sidebar,
106
		#customize-controls .customize-info .accordion-section-title,
107
		#customize-controls .panel-meta.customize-info .accordion-section-title:hover,
108
		#customize-theme-controls .accordion-section-title,
109
		.customize-section-title,
110
		#customize-theme-controls .control-section-themes .accordion-section-title,
111
		#customize-theme-controls .control-section-themes .accordion-section-title,
112
		#customize-theme-controls .control-section-themes .accordion-section-title:hover,
113
		.outer-section-open #customize-controls .wp-full-overlay-sidebar-content,
114
		#customize-sidebar-outer-content,
115
		#customize-control-changeset_status .customize-inside-control-row,
116
		#customize-control-changeset_preview_link input,
117
		#customize-control-changeset_scheduled_date,
118
		.wp-core-ui .wp-full-overlay .collapse-sidebar {
119
			background: <?php echo esc_html( $back ); ?>;
120
			background-color: <?php echo esc_html( $back ); ?>;
121
			color: <?php echo esc_html( $text_on_back ); ?>;
122
		}
123
124
		<?php if ( $back ) : ?>
125
			.media-widget-preview.media_image, .media-widget-preview.media_audio, .attachment-media-view {
126
				background: none;
127
			}
128
			.wp-core-ui .button-link-delete {
129
				color: <?php echo ( 90 > $back_obj->lightness ) ? '#FF8A80' : '#a00'; ?>;
0 ignored issues
show
Comprehensibility Best Practice introduced by
The variable $back_obj does not seem to be defined for all execution paths leading up to this point.
Loading history...
130
			}
131
			.button.wp-color-result {
132
				text-shadow: none !important;
133
			}
134
		<?php endif; ?>
135
136
137
		#customize-sidebar-outer-content {
138
			border-left-color: <?php echo esc_html( $border_on_back ); ?>;
139
			border-right-color: <?php echo esc_html( $border_on_back ); ?>;
140
		}
141
142
		#customize-controls .customize-info .panel-title,
143
		#customize-controls .customize-pane-child .customize-section-title h3,
144
		#customize-controls .customize-pane-child h3.customize-section-title,
145
		.customize-control,
146
		#customize-controls .description {
147
			color: <?php echo esc_html( $text_on_back ); ?>;
148
		}
149
150
		#customize-controls .customize-info,
151
		#customize-header-actions,
152
		.customize-section-title {
153
			border-bottom-color: <?php echo esc_html( $border_on_back ); ?>;
154
		}
155
156
		.wp-full-overlay-sidebar .wp-full-overlay-header,
157
		.customize-controls-close,
158
		.expanded .wp-full-overlay-footer {
159
			color: <?php echo esc_html( $text_on_back ); ?>;
160
			background-color: <?php echo esc_html( $back_on_back ); ?>;
161
			border-color: <?php echo esc_html( $border_on_back ); ?>;
162
		}
163
164
		.accordion-section,
165
		#customize-theme-controls .customize-pane-child.accordion-section-content {
166
			background: <?php echo esc_html( $back_on_back ); ?>;
167
		}
168
169
		#accordion-section-themes+.control-section,
170
		#customize-theme-controls .control-section:last-of-type.open,
171
		#customize-theme-controls .control-section:last-of-type > .accordion-section-title,
172
		#customize-theme-controls .control-section.open {
173
			border-bottom-color: <?php echo esc_html( $border_on_back ); ?>;
174
			border-top-color: <?php echo esc_html( $border_on_back ); ?>;
175
		}
176
177
		#customize-theme-controls .accordion-section-title {
178
			border-bottom-color: <?php echo esc_html( $border_on_back ); ?>;
179
			border-left-color: <?php echo esc_html( $border_on_back ); ?>;
180
		}
181
182
		#customize-theme-controls .control-section-themes .accordion-section-title,
183
		#customize-theme-controls .control-section-themes .accordion-section-title:hover {
184
			border-bottom-color: <?php echo esc_html( $border_on_back ); ?>;
185
			border-top-color: <?php echo esc_html( $border_on_back ); ?>;
186
			border-bottom-color: <?php echo esc_html( $border_on_back ); ?>;
187
		}
188
189
		#customize-theme-controls .accordion-section-title:after {
190
			color: <?php echo esc_html( $arrows_on_back ); ?>;
191
		}
192
193
		.wp-core-ui .button,
194
		.wp-core-ui .button-secondary {
195
			background-color: <?php echo esc_html( $back ); ?>;
196
			border-color: <?php echo esc_html( $border_on_back ); ?>;
197
			box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
198
			-webkit-box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
199
			text-shadow: 0 -1px 1px <?php echo esc_html( $border_on_back ); ?>, 1px 0 1px <?php echo esc_html( $border_on_back ); ?>, 0 1px 1px <?php echo esc_html( $border_on_back ); ?>, -1px 0 1px <?php echo esc_html( $border_on_back ); ?>;
200
			color: <?php echo esc_html( $text_on_back ); ?>;
201
		}
202
203
		@media screen and (max-width: 640px) {
204
			.customize-controls-preview-toggle{
205
				background-color: <?php echo esc_html( $back ); ?>;
206
				border-color: <?php echo esc_html( $border_on_back ); ?>;
207
				box-shadow:0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
208
				-webkit-box-shadow:0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
209
				text-shadow:0 -1px 1px <?php echo esc_html( $border_on_back ); ?>, 1px 0 1px <?php echo esc_html( $border_on_back ); ?>, 0 1px 1px <?php echo esc_html( $border_on_back ); ?>, -1px 0 1px <?php echo esc_html( $border_on_back ); ?>;
210
				color: <?php echo esc_html( $text_on_back ); ?>;
211
			}
212
		}
213
214
		.wp-core-ui .button.focus,
215
		.wp-core-ui .button.hover,
216
		.wp-core-ui .button:focus,
217
		.wp-core-ui .button:hover,
218
		.wp-core-ui .button-secondary.focus,
219
		.wp-core-ui .button-secondary.hover,
220
		.wp-core-ui .button-secondary:focus,
221
		.wp-core-ui .button-secondary:hover,
222
		.customize-panel-back,
223
		.customize-section-back {
224
			background-color: <?php echo esc_html( $back_on_back ); ?>;
225
			border-color: <?php echo esc_html( $border_on_back ); ?>;
226
			box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
227
			-webkit-box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
228
			text-shadow: 0 -1px 1px <?php echo esc_html( $border_on_back ); ?>, 1px 0 1px <?php echo esc_html( $border_on_back ); ?>, 0 1px 1px <?php echo esc_html( $border_on_back ); ?>, -1px 0 1px <?php echo esc_html( $border_on_back ); ?>;
229
			color: <?php echo esc_html( $text_on_back ); ?>;
230
		}
231
232
		@media screen and (max-width: 640px) {
233
			.customize-controls-preview-toggle.focus,
234
			.customize-controls-preview-toggle.hover,
235
			.customize-controls-preview-toggle:focus,
236
			.customize-controls-preview-toggle:hover {
237
				background-color: <?php echo esc_html( $back_on_back ); ?>;
238
				border-color: <?php echo esc_html( $border_on_back ); ?>;
239
				box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
240
				-webkit-box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
241
				text-shadow: 0 -1px 1px <?php echo esc_html( $border_on_back ); ?>, 1px 0 1px <?php echo esc_html( $border_on_back ); ?>, 0 1px 1px <?php echo esc_html( $border_on_back ); ?>, -1px 0 1px <?php echo esc_html( $border_on_back ); ?>;
242
				color:<?php echo esc_html( $text_on_back ); ?>;
243
			}
244
		}
245
246
		.customize-control-kirki-background .background-attachment .buttonset .switch-label,
247
		.customize-control-kirki-background .background-size .buttonset .switch-label,
248
		.customize-control-kirki-radio-buttonset .buttonset .switch-label {
249
			color: <?php echo esc_html( $text_on_back ); ?>;
250
		}
251
252
		.wp-color-result {
253
			border-color: <?php echo esc_html( $border_on_back ); ?>;
254
			-webkit-box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
255
			box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
256
		}
257
258
		.wp-color-result:focus,
259
		.wp-color-result:hover {
260
			border-color: <?php echo esc_html( $border_on_back ); ?>;
261
			background: <?php echo esc_html( $back_on_back ); ?>;
262
		}
263
264
		.wp-color-result:after {
265
			border-color: <?php echo esc_html( $border_on_back ); ?>;
266
			background: <?php echo esc_html( $back ); ?>;
267
			color: <?php echo esc_html( $text_on_back ); ?>;
268
		}
269
270
		.wp-color-result:focus:after,
271
		.wp-color-result:hover:after {
272
			color: <?php echo esc_html( $text_on_back ); ?>;
273
		}
274
275
		.customize-control input[type=tel],
276
		.customize-control input[type=url],
277
		.customize-control input[type=text],
278
		.customize-control input[type=password],
279
		.customize-control input[type=email],
280
		.customize-control input[type=number],
281
		.customize-control input[type=search],
282
		.customize-control input[type=radio],
283
		.customize-control input[type=checkbox],
284
		.customize-control select,
285
		.select2-container--default .select2-selection--single,
286
		.select2-container--default .select2-selection--multiple {
287
			background: <?php echo esc_html( $back ); ?>;
288
			border-color: <?php echo esc_html( $border_on_back ); ?>;
289
			color: <?php echo esc_html( $text_on_back ); ?>;
290
		}
291
292
		.customize-control-kirki-slider input[type=range]::-webkit-slider-thumb {
293
			background-color:<?php echo esc_html( $accent ); ?>;
294
		}
295
296
		.customize-control-kirki-slider input[type=range]::-moz-range-thumb {
297
			background-color: <?php echo esc_html( $accent ); ?>;
298
		}
299
300
		.customize-control-kirki-slider input[type=range]::-ms-thumb {
301
			background-color: <?php echo esc_html( $accent ); ?>;
302
		}
303
304
		.customize-control-kirki-slider input[type=range] {
305
			background: <?php echo esc_html( $border_on_back ); ?>;
306
		}
307
308
		.select2-container--default .select2-selection--single .select2-selection__rendered {
309
			color:<?php echo esc_html( $text_on_back ); ?>;
310
		}
311
312
		.wp-full-overlay-footer .devices {
313
			background: none;
314
			background: transparent;
315
			box-shadow: none;
316
			-webkit-box-shadow: none;
317
		}
318
319
		.kirki-reset-section .dashicons {
320
			color: <?php echo esc_html( $back_on_back ); ?>;
321
		}
322
323
		#customize-controls .control-section .accordion-section-title:focus,
324
		#customize-controls .control-section .accordion-section-title:hover,
325
		#customize-controls .control-section.open .accordion-section-title,
326
		#customize-controls .control-section:hover > .accordion-section-title,
327
		.customize-panel-back:focus,
328
		.customize-panel-back:hover,
329
		.customize-section-back:focus,
330
		.customize-section-back:hover {
331
			background: <?php echo esc_html( $hover_on_back ); ?>;
332
			color: <?php echo esc_html( $accent ); ?>;
333
			border-left-color: <?php echo esc_html( $accent ); ?>;
334
		}
335
336
		.customize-controls-close:hover {
337
			background-color: <?php echo esc_html( $back ); ?>;
338
			color: <?php echo esc_html( $accent ); ?>;
339
			border-color: <?php echo esc_html( $accent ); ?>;
340
		}
341
342
		#customize-theme-controls .control-section .accordion-section-title:focus:after,
343
		#customize-theme-controls .control-section .accordion-section-title:hover:after,
344
		#customize-theme-controls .control-section.open .accordion-section-title:after,
345
		#customize-theme-controls .control-section:hover>.accordion-section-title:after {
346
			color: <?php echo esc_html( $accent ); ?>;
347
		}
348
349
		.wp-core-ui .button.button-primary {
350
			background-color: <?php echo esc_html( $accent ); ?>;
351
			border-color: <?php echo esc_html( $border_on_accent ); ?>;
352
			box-shadow: 0 1px 0 <?php echo esc_html( $border_on_accent ); ?>;
353
			-webkit-box-shadow: 0 1px 0 <?php echo esc_html( $border_on_accent ); ?>;
354
			text-shadow: 0 -1px 1px <?php echo esc_html( $border_on_accent ); ?>, 1px 0 1px <?php echo esc_html( $border_on_accent ); ?>, 0 1px 1px <?php echo esc_html( $border_on_accent ); ?>, -1px 0 1px <?php echo esc_html( $border_on_accent ); ?>;
355
			color: <?php echo esc_html( $text_on_accent ); ?>;
356
		}
357
358
		.wp-core-ui .button.button-primary.focus,
359
		.wp-core-ui .button.button-primary.hover,
360
		.wp-core-ui .button.button-primary:focus,
361
		.wp-core-ui .button.button-primary:hover {
362
			background-color: <?php echo esc_html( $accent ); ?>;
363
			border-color: <?php echo esc_html( $border_on_accent ); ?>;
364
			box-shadow: 0 1px 0 <?php echo esc_html( $border_on_accent ); ?>;
365
			-webkit-box-shadow: 0 1px 0 <?php echo esc_html( $border_on_accent ); ?>;
366
			text-shadow: 0 -1px 1px <?php echo esc_html( $border_on_accent ); ?>, 1px 0 1px <?php echo esc_html( $border_on_accent ); ?>, 0 1px 1px <?php echo esc_html( $border_on_accent ); ?>, -1px 0 1px <?php echo esc_html( $border_on_accent ); ?>;
367
			color: <?php echo esc_html( $text_on_accent ); ?>;
368
		}
369
370
		.wp-core-ui .button.button-primary-disabled,
371
		.wp-core-ui .button.button-primary.disabled,
372
		.wp-core-ui .button.button-primary:disabled,
373
		.wp-core-ui .button.button-primary[disabled] {
374
			background-color: <?php echo esc_html( $accent_disabled ); ?> !important;
375
			border-color: <?php echo esc_html( $border_on_accent_disabled ); ?> !important;
376
			box-shadow: 0 1px 0 <?php echo esc_html( $border_on_accent_disabled ); ?> !important;
377
			-webkit-box-shadow: 0 1px 0 <?php echo esc_html( $border_on_accent_disabled ); ?> !important;
378
			text-shadow: 0 -1px 1px <?php echo esc_html( $border_on_accent_disabled ); ?>, 1px 0 1px <?php echo esc_html( $border_on_accent_disabled ); ?>, 0 1px 1px <?php echo esc_html( $border_on_accent_disabled ); ?>, -1px 0 1px <?php echo esc_html( $border_on_accent_disabled ); ?> !important;
379
			color: <?php echo esc_html( $text_on_accent_disabled ); ?> !important;
380
		}
381
382
		input[type=checkbox]:checked:before {
383
			color: <?php echo esc_html( $accent ); ?>;
384
		}
385
386
		.select2-container--default .select2-results__option--highlighted[aria-selected] {
387
			background-color: <?php echo esc_html( $accent ); ?>;
388
			color: <?php echo esc_html( $text_on_accent ); ?>;
389
		}
390
391
		.customize-control-kirki-radio-buttonset .buttonset .switch-input:checked + .switch-label,
392
		.customize-control-kirki-background .background-attachment .buttonset .switch-input:checked + .switch-label,
393
		.customize-control-kirki-background .background-size .buttonset .switch-input:checked + .switch-label {
394
			background-color: <?php echo esc_html( $accent ); ?>;
395
			border-color: <?php echo esc_html( $border_on_accent ); ?>;
396
			color: <?php echo esc_html( $text_on_accent ); ?>;
397
		}
398
399
		.notice,
400
		div.updated,
401
		div.error {
402
			color: #444 !important;
403
		}
404
405
		<?php if ( isset( $config['width'] ) ) : ?>
406
			.wp-full-overlay-sidebar {
407
				width: <?php echo esc_html( $config['width'] ); ?>;
408
			}
409
			.expanded .wp-full-overlay-footer {
410
				width: <?php echo esc_html( $config['width'] ); ?>;
411
			}
412
			.wp-full-overlay.expanded {
413
				margin-left: <?php echo esc_html( $config['width'] ); ?>;
414
			}
415
			.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
416
				margin-left: -<?php echo esc_html( $config['width'] ); ?>;
417
			}
418
		<?php endif; ?>
419
		</style>
420
		<?php
421
	}
422
}
423