mirror of
https://ghproxy.net/https://github.com/AlxMedia/splits.git
synced 2025-08-26 07:44:53 +08:00
422 lines
18 KiB
PHP
422 lines
18 KiB
PHP
<?php
|
|
/**
|
|
* Changes the styling of the customizer
|
|
* based on the settings set using the kirki_config filter.
|
|
* For documentation please see
|
|
* https://github.com/aristath/kirki/wiki/Styling-the-Customizer
|
|
*
|
|
* @package Kirki
|
|
* @category Modules
|
|
* @author Ari Stathopoulos (@aristath)
|
|
* @copyright Copyright (c) 2019, Ari Stathopoulos (@aristath)
|
|
* @license https://opensource.org/licenses/MIT
|
|
* @since 3.0.0
|
|
*/
|
|
|
|
// Exit if accessed directly.
|
|
if ( ! defined( 'ABSPATH' ) ) {
|
|
exit;
|
|
}
|
|
|
|
/**
|
|
* Adds styles to the customizer.
|
|
*/
|
|
class Kirki_Modules_Customizer_Styling {
|
|
|
|
/**
|
|
* The object instance.
|
|
*
|
|
* @static
|
|
* @access private
|
|
* @since 3.0.0
|
|
* @var object
|
|
*/
|
|
private static $instance;
|
|
|
|
/**
|
|
* Constructor.
|
|
*
|
|
* @access protected
|
|
*/
|
|
protected function __construct() {
|
|
add_action( 'customize_controls_print_styles', array( $this, 'custom_css' ), 99 );
|
|
}
|
|
|
|
/**
|
|
* Gets an instance of this object.
|
|
* Prevents duplicate instances which avoid artefacts and improves performance.
|
|
*
|
|
* @static
|
|
* @access public
|
|
* @since 3.0.0
|
|
* @return object
|
|
*/
|
|
public static function get_instance() {
|
|
if ( ! self::$instance ) {
|
|
self::$instance = new self();
|
|
}
|
|
return self::$instance;
|
|
}
|
|
|
|
/**
|
|
* Add custom CSS rules to the head, applying our custom styles.
|
|
*
|
|
* @access public
|
|
*/
|
|
public function custom_css() {
|
|
$config = apply_filters( 'kirki_config', array() );
|
|
if ( ! isset( $config['color_accent'] ) && ! isset( $config['color_back'] ) ) {
|
|
return;
|
|
}
|
|
$back = isset( $config['color_back'] ) ? $config['color_back'] : false;
|
|
|
|
$text_on_back = '';
|
|
$border_on_back = '';
|
|
$back_on_back = '';
|
|
$hover_on_back = '';
|
|
$arrows_on_back = '';
|
|
$text_on_accent = '';
|
|
$border_on_accent = '';
|
|
$accent_disabled_obj = '';
|
|
$accent_disabled = '';
|
|
$text_on_accent_disabled = '';
|
|
$border_on_accent_disabled = '';
|
|
|
|
if ( $back ) {
|
|
$back_obj = ariColor::newColor( $back );
|
|
$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 );
|
|
$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 );
|
|
$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 );
|
|
$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 );
|
|
$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 );
|
|
}
|
|
$accent = ( isset( $config['color_accent'] ) ) ? $config['color_accent'] : false;
|
|
if ( $accent ) {
|
|
$accent_obj = ariColor::newColor( $accent );
|
|
$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 );
|
|
$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 );
|
|
$accent_disabled_obj = ( 35 < $accent_obj->lightness ) ? $accent_obj->getNew( 'lightness', $accent_obj->lightness - 30 ) : $accent_obj->getNew( 'lightness', $accent_obj->lightness + 30 );
|
|
$accent_disabled = $accent_disabled_obj->toCSS( $accent_disabled_obj->mode );
|
|
$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 );
|
|
$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 );
|
|
}
|
|
?>
|
|
<style>
|
|
.wp-full-overlay-sidebar,
|
|
#customize-controls .customize-info .accordion-section-title,
|
|
#customize-controls .panel-meta.customize-info .accordion-section-title:hover,
|
|
#customize-theme-controls .accordion-section-title,
|
|
.customize-section-title,
|
|
#customize-theme-controls .control-section-themes .accordion-section-title,
|
|
#customize-theme-controls .control-section-themes .accordion-section-title,
|
|
#customize-theme-controls .control-section-themes .accordion-section-title:hover,
|
|
.outer-section-open #customize-controls .wp-full-overlay-sidebar-content,
|
|
#customize-sidebar-outer-content,
|
|
#customize-control-changeset_status .customize-inside-control-row,
|
|
#customize-control-changeset_preview_link input,
|
|
#customize-control-changeset_scheduled_date,
|
|
.wp-core-ui .wp-full-overlay .collapse-sidebar {
|
|
background: <?php echo esc_html( $back ); ?>;
|
|
background-color: <?php echo esc_html( $back ); ?>;
|
|
color: <?php echo esc_html( $text_on_back ); ?>;
|
|
}
|
|
|
|
<?php if ( $back ) : ?>
|
|
.media-widget-preview.media_image, .media-widget-preview.media_audio, .attachment-media-view {
|
|
background: none;
|
|
}
|
|
.wp-core-ui .button-link-delete {
|
|
color: <?php echo ( 90 > $back_obj->lightness ) ? '#FF8A80' : '#a00'; ?>;
|
|
}
|
|
.button.wp-color-result {
|
|
text-shadow: none !important;
|
|
}
|
|
<?php endif; ?>
|
|
|
|
|
|
#customize-sidebar-outer-content {
|
|
border-left-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
border-right-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
}
|
|
|
|
#customize-controls .customize-info .panel-title,
|
|
#customize-controls .customize-pane-child .customize-section-title h3,
|
|
#customize-controls .customize-pane-child h3.customize-section-title,
|
|
.customize-control,
|
|
#customize-controls .description {
|
|
color: <?php echo esc_html( $text_on_back ); ?>;
|
|
}
|
|
|
|
#customize-controls .customize-info,
|
|
#customize-header-actions,
|
|
.customize-section-title {
|
|
border-bottom-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
}
|
|
|
|
.wp-full-overlay-sidebar .wp-full-overlay-header,
|
|
.customize-controls-close,
|
|
.expanded .wp-full-overlay-footer {
|
|
color: <?php echo esc_html( $text_on_back ); ?>;
|
|
background-color: <?php echo esc_html( $back_on_back ); ?>;
|
|
border-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
}
|
|
|
|
.accordion-section,
|
|
#customize-theme-controls .customize-pane-child.accordion-section-content {
|
|
background: <?php echo esc_html( $back_on_back ); ?>;
|
|
}
|
|
|
|
#accordion-section-themes+.control-section,
|
|
#customize-theme-controls .control-section:last-of-type.open,
|
|
#customize-theme-controls .control-section:last-of-type > .accordion-section-title,
|
|
#customize-theme-controls .control-section.open {
|
|
border-bottom-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
border-top-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
}
|
|
|
|
#customize-theme-controls .accordion-section-title {
|
|
border-bottom-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
border-left-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
}
|
|
|
|
#customize-theme-controls .control-section-themes .accordion-section-title,
|
|
#customize-theme-controls .control-section-themes .accordion-section-title:hover {
|
|
border-bottom-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
border-top-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
border-bottom-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
}
|
|
|
|
#customize-theme-controls .accordion-section-title:after {
|
|
color: <?php echo esc_html( $arrows_on_back ); ?>;
|
|
}
|
|
|
|
.wp-core-ui .button,
|
|
.wp-core-ui .button-secondary {
|
|
background-color: <?php echo esc_html( $back ); ?>;
|
|
border-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
|
|
-webkit-box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
|
|
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 ); ?>;
|
|
color: <?php echo esc_html( $text_on_back ); ?>;
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
.customize-controls-preview-toggle{
|
|
background-color: <?php echo esc_html( $back ); ?>;
|
|
border-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
box-shadow:0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
|
|
-webkit-box-shadow:0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
|
|
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 ); ?>;
|
|
color: <?php echo esc_html( $text_on_back ); ?>;
|
|
}
|
|
}
|
|
|
|
.wp-core-ui .button.focus,
|
|
.wp-core-ui .button.hover,
|
|
.wp-core-ui .button:focus,
|
|
.wp-core-ui .button:hover,
|
|
.wp-core-ui .button-secondary.focus,
|
|
.wp-core-ui .button-secondary.hover,
|
|
.wp-core-ui .button-secondary:focus,
|
|
.wp-core-ui .button-secondary:hover,
|
|
.customize-panel-back,
|
|
.customize-section-back {
|
|
background-color: <?php echo esc_html( $back_on_back ); ?>;
|
|
border-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
|
|
-webkit-box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
|
|
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 ); ?>;
|
|
color: <?php echo esc_html( $text_on_back ); ?>;
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
.customize-controls-preview-toggle.focus,
|
|
.customize-controls-preview-toggle.hover,
|
|
.customize-controls-preview-toggle:focus,
|
|
.customize-controls-preview-toggle:hover {
|
|
background-color: <?php echo esc_html( $back_on_back ); ?>;
|
|
border-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
|
|
-webkit-box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
|
|
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 ); ?>;
|
|
color:<?php echo esc_html( $text_on_back ); ?>;
|
|
}
|
|
}
|
|
|
|
.customize-control-kirki-background .background-attachment .buttonset .switch-label,
|
|
.customize-control-kirki-background .background-size .buttonset .switch-label,
|
|
.customize-control-kirki-radio-buttonset .buttonset .switch-label {
|
|
color: <?php echo esc_html( $text_on_back ); ?>;
|
|
}
|
|
|
|
.wp-color-result {
|
|
border-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
-webkit-box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
|
|
box-shadow: 0 1px 0 <?php echo esc_html( $border_on_back ); ?>;
|
|
}
|
|
|
|
.wp-color-result:focus,
|
|
.wp-color-result:hover {
|
|
border-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
background: <?php echo esc_html( $back_on_back ); ?>;
|
|
}
|
|
|
|
.wp-color-result:after {
|
|
border-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
background: <?php echo esc_html( $back ); ?>;
|
|
color: <?php echo esc_html( $text_on_back ); ?>;
|
|
}
|
|
|
|
.wp-color-result:focus:after,
|
|
.wp-color-result:hover:after {
|
|
color: <?php echo esc_html( $text_on_back ); ?>;
|
|
}
|
|
|
|
.customize-control input[type=tel],
|
|
.customize-control input[type=url],
|
|
.customize-control input[type=text],
|
|
.customize-control input[type=password],
|
|
.customize-control input[type=email],
|
|
.customize-control input[type=number],
|
|
.customize-control input[type=search],
|
|
.customize-control input[type=radio],
|
|
.customize-control input[type=checkbox],
|
|
.customize-control select,
|
|
.select2-container--default .select2-selection--single,
|
|
.select2-container--default .select2-selection--multiple {
|
|
background: <?php echo esc_html( $back ); ?>;
|
|
border-color: <?php echo esc_html( $border_on_back ); ?>;
|
|
color: <?php echo esc_html( $text_on_back ); ?>;
|
|
}
|
|
|
|
.customize-control-kirki-slider input[type=range]::-webkit-slider-thumb {
|
|
background-color:<?php echo esc_html( $accent ); ?>;
|
|
}
|
|
|
|
.customize-control-kirki-slider input[type=range]::-moz-range-thumb {
|
|
background-color: <?php echo esc_html( $accent ); ?>;
|
|
}
|
|
|
|
.customize-control-kirki-slider input[type=range]::-ms-thumb {
|
|
background-color: <?php echo esc_html( $accent ); ?>;
|
|
}
|
|
|
|
.customize-control-kirki-slider input[type=range] {
|
|
background: <?php echo esc_html( $border_on_back ); ?>;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
color:<?php echo esc_html( $text_on_back ); ?>;
|
|
}
|
|
|
|
.wp-full-overlay-footer .devices {
|
|
background: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
}
|
|
|
|
.kirki-reset-section .dashicons {
|
|
color: <?php echo esc_html( $back_on_back ); ?>;
|
|
}
|
|
|
|
#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,
|
|
.customize-panel-back:focus,
|
|
.customize-panel-back:hover,
|
|
.customize-section-back:focus,
|
|
.customize-section-back:hover {
|
|
background: <?php echo esc_html( $hover_on_back ); ?>;
|
|
color: <?php echo esc_html( $accent ); ?>;
|
|
border-left-color: <?php echo esc_html( $accent ); ?>;
|
|
}
|
|
|
|
.customize-controls-close:hover {
|
|
background-color: <?php echo esc_html( $back ); ?>;
|
|
color: <?php echo esc_html( $accent ); ?>;
|
|
border-color: <?php echo esc_html( $accent ); ?>;
|
|
}
|
|
|
|
#customize-theme-controls .control-section .accordion-section-title:focus:after,
|
|
#customize-theme-controls .control-section .accordion-section-title:hover:after,
|
|
#customize-theme-controls .control-section.open .accordion-section-title:after,
|
|
#customize-theme-controls .control-section:hover>.accordion-section-title:after {
|
|
color: <?php echo esc_html( $accent ); ?>;
|
|
}
|
|
|
|
.wp-core-ui .button.button-primary {
|
|
background-color: <?php echo esc_html( $accent ); ?>;
|
|
border-color: <?php echo esc_html( $border_on_accent ); ?>;
|
|
box-shadow: 0 1px 0 <?php echo esc_html( $border_on_accent ); ?>;
|
|
-webkit-box-shadow: 0 1px 0 <?php echo esc_html( $border_on_accent ); ?>;
|
|
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 ); ?>;
|
|
color: <?php echo esc_html( $text_on_accent ); ?>;
|
|
}
|
|
|
|
.wp-core-ui .button.button-primary.focus,
|
|
.wp-core-ui .button.button-primary.hover,
|
|
.wp-core-ui .button.button-primary:focus,
|
|
.wp-core-ui .button.button-primary:hover {
|
|
background-color: <?php echo esc_html( $accent ); ?>;
|
|
border-color: <?php echo esc_html( $border_on_accent ); ?>;
|
|
box-shadow: 0 1px 0 <?php echo esc_html( $border_on_accent ); ?>;
|
|
-webkit-box-shadow: 0 1px 0 <?php echo esc_html( $border_on_accent ); ?>;
|
|
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 ); ?>;
|
|
color: <?php echo esc_html( $text_on_accent ); ?>;
|
|
}
|
|
|
|
.wp-core-ui .button.button-primary-disabled,
|
|
.wp-core-ui .button.button-primary.disabled,
|
|
.wp-core-ui .button.button-primary:disabled,
|
|
.wp-core-ui .button.button-primary[disabled] {
|
|
background-color: <?php echo esc_html( $accent_disabled ); ?> !important;
|
|
border-color: <?php echo esc_html( $border_on_accent_disabled ); ?> !important;
|
|
box-shadow: 0 1px 0 <?php echo esc_html( $border_on_accent_disabled ); ?> !important;
|
|
-webkit-box-shadow: 0 1px 0 <?php echo esc_html( $border_on_accent_disabled ); ?> !important;
|
|
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;
|
|
color: <?php echo esc_html( $text_on_accent_disabled ); ?> !important;
|
|
}
|
|
|
|
input[type=checkbox]:checked:before {
|
|
color: <?php echo esc_html( $accent ); ?>;
|
|
}
|
|
|
|
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
|
background-color: <?php echo esc_html( $accent ); ?>;
|
|
color: <?php echo esc_html( $text_on_accent ); ?>;
|
|
}
|
|
|
|
.customize-control-kirki-radio-buttonset .buttonset .switch-input:checked + .switch-label,
|
|
.customize-control-kirki-background .background-attachment .buttonset .switch-input:checked + .switch-label,
|
|
.customize-control-kirki-background .background-size .buttonset .switch-input:checked + .switch-label {
|
|
background-color: <?php echo esc_html( $accent ); ?>;
|
|
border-color: <?php echo esc_html( $border_on_accent ); ?>;
|
|
color: <?php echo esc_html( $text_on_accent ); ?>;
|
|
}
|
|
|
|
.notice,
|
|
div.updated,
|
|
div.error {
|
|
color: #444 !important;
|
|
}
|
|
|
|
<?php if ( isset( $config['width'] ) ) : ?>
|
|
.wp-full-overlay-sidebar {
|
|
width: <?php echo esc_html( $config['width'] ); ?>;
|
|
}
|
|
.expanded .wp-full-overlay-footer {
|
|
width: <?php echo esc_html( $config['width'] ); ?>;
|
|
}
|
|
.wp-full-overlay.expanded {
|
|
margin-left: <?php echo esc_html( $config['width'] ); ?>;
|
|
}
|
|
.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
|
|
margin-left: -<?php echo esc_html( $config['width'] ); ?>;
|
|
}
|
|
<?php endif; ?>
|
|
</style>
|
|
<?php
|
|
}
|
|
}
|
