Da

✏️ Editing: class-fire-resources_styles.php

<?php
/**
* Loads front end CSS
* Inline front end skin
*
*
* @package            Customizr
*/
if ( !class_exists( 'CZR_resources_styles' ) ) :
   class CZR_resources_styles {
        //Access any method or var of the class with classname::$instance->var or method():
        static $instance;

private $_is_css_minified;
        private $_resources_version;

function __construct () {
            self::$instance =& $this;
            //setup version param and is_css_minified bool
            add_action( 'after_setup_theme'                   , array( $this , 'czr_fn_setup_properties' ), 20 );
            add_action( 'wp_enqueue_scripts'                  , array( $this , 'czr_fn_enqueue_front_styles' ) );

add_filter( 'czr_user_options_style'              , array( $this , 'czr_fn_maybe_write_skin_inline_css') );
            add_filter( 'czr_user_options_style'              , array( $this , 'czr_fn_maybe_write_header_custom_skin_inline_css') );

add_filter( 'czr_user_options_style'              , array( $this , 'czr_fn_maybe_write_boxed_layout_inline_css' ) );

add_filter( 'czr_user_options_style'              , array( $this , 'czr_fn_write_custom_css') , apply_filters( 'czr_custom_css_priority', 9999 ) );
        }

//hook: after_setup_theme
        function czr_fn_setup_properties() {

$this->_resouces_version             = CZR_DEBUG_MODE || CZR_DEV_MODE ? CUSTOMIZR_VER . time() : CUSTOMIZR_VER;

$this->_is_css_minified              = CZR_DEBUG_MODE || CZR_DEV_MODE ? false : true ;
              $this->_is_css_minified              = esc_attr( czr_fn_opt( 'tc_minified_skin' ) ) ? $this->_is_css_minified : false;

}

/**
         * Registers and enqueues Customizr stylesheets
         * @package Customizr
         * @since Customizr 1.1
         */
         function czr_fn_enqueue_front_styles() {
              $_path       = CZR_ASSETS_PREFIX . 'front/css/';
              $_ver        = $this->_resouces_version;
              $_ext        = $this->_is_css_minified ? '.min.css' : '.css';

// Even if using the full nimble template, we still need the Customizr stylesheet to style the widget zones.
              // if ( czr_fn_is_full_nimble_tmpl() )
              //   return;

//wp_enqueue_style( 'customizr-flickity'       , czr_fn_get_theme_file_url( "{$_path}flickity{$_ext}" ), array(), $_ver, 'all' );
              //wp_enqueue_style( 'customizr-magnific'       , czr_fn_get_theme_file_url( "{$_path}magnific-popup{$_ext}" ), array(), $_ver, 'all' );
              //wp_enqueue_style( 'customizr-scrollbar'      , czr_fn_get_theme_file_url( "{$_path}jquery.mCustomScrollbar.min.css" ), array(), $_ver, 'all' );

$main_theme_file_name  = is_rtl() ? 'rtl' : 'style';

//Customizr main stylesheets
              wp_enqueue_style( 'customizr-main'         , czr_fn_get_theme_file_url( "{$_path}{$main_theme_file_name}{$_ext}"), array(), $_ver, 'all' );

//Modular scale respond
              //Customizr main stylesheet
              if ( 1 == esc_attr( czr_fn_opt( 'tc_ms_respond_css' ) ) ) {
                  wp_enqueue_style( 'customizr-ms-respond'     , czr_fn_get_theme_file_url( "{$_path}style-modular-scale{$_ext}"), array(), $_ver, 'all' );
              }

//Customizer user defined style options : the custom CSS is written with a high priority here
              wp_add_inline_style( 'customizr-main'      , apply_filters( 'czr_user_options_style' , '' ) );

//enqueue placeholders style
              if ( apply_filters(  'czr_enqueue_placeholders_resources', false ) ) {
                  wp_enqueue_style( 'customizr-front-placholders', CZR_FRONT_ASSETS_URL . 'css/style-front-placeholders.css', array(), $_ver, 'all' );
              }

//Customizr stylesheet (style.css)
              if ( czr_fn_is_child() ) {
                  wp_enqueue_style( 'customizr-style'          , czr_fn_get_theme_file_url( "style.css"), array(), $_ver, 'all' );
              }
         }

/**
         * Writes the sanitized custom CSS from options array into the custom user stylesheet, at the very end (priority 9999)
         * hook : czr_user_options_style
         * @package Customizr
         * @since Customizr 2.0.7
         */
         function czr_fn_write_custom_css( $_css = null ) {

$_css                     = isset( $_css ) ? $_css : '';
               $_moved_opts              = czr_fn_opt(  '__moved_opts' );

/*
               * Do not print old custom css if moved in the WP Custom CSS
               */
               if ( !empty( $_moved_opts ) && is_array( $_moved_opts ) && in_array( 'custom_css', $_moved_opts) ) {
                     return $_css;
               }

$tc_custom_css            = czr_fn_opt( 'tc_custom_css' );
               $esc_tc_custom_css        = esc_html( $tc_custom_css );

if ( !isset( $esc_tc_custom_css ) || empty( $esc_tc_custom_css ) )
                     return $_css;

return apply_filters( 'czr_write_custom_css',
                     $_css . "\n" . html_entity_decode( $esc_tc_custom_css ),
                     $_css,
                     $tc_custom_css
               );

}//end of function

/* See: https://github.com/presscustomizr/customizr/issues/605 */
         function czr_fn_apply_media_upload_front_patch( $_css ) {

global $wp_version;
               if ( version_compare( '4.5', $wp_version, '<=' ) )
                     $_css = sprintf("%s%s", $_css, 'table { border-collapse: separate; } body table { border-collapse: collapse; }');

return $_css;

}

//hook : czr_user_options_style
         function czr_fn_maybe_write_header_custom_skin_inline_css( $_css ) {
               //retrieve the current option
               $skin_color                             = czr_fn_get_header_skin();

if ( 'custom' != $skin_color )
                     return $_css;

//retrieve the current option
               $header_bg_color                        = czr_fn_opt( 'tc_header_custom_bg_color' );
               $header_fg_color                        = czr_fn_opt( 'tc_header_custom_fg_color' );

$header_bg_inverted_color               = czr_fn_hex_invert( $header_bg_color );

//shaded
               $header_bg_inverted_color_shade_highest = czr_fn_hex2rgba( $header_bg_inverted_color, 0.045, $array = false, $make_prop_value = true );

$header_bg_color_shade_low              = czr_fn_hex2rgba( $header_bg_color, 0.9, $array = false, $make_prop_value = true );
               $header_bg_color_shade_lowest           = czr_fn_hex2rgba( $header_bg_color, 0.98, $array = false, $make_prop_value = true );

$header_fg_color_shade_very_high        = czr_fn_hex2rgba( $header_fg_color, 0.09, $array = false, $make_prop_value = true );
               $header_fg_color_shade_highest          = czr_fn_hex2rgba( $header_fg_color, 0.075, $array = false, $make_prop_value = true );

//in header _skins.scss this is the $secondary_color which is $grey-light or $grey-dark depending on whether
               //the header skin is light or dark, so it's constant and not depending on the primary color.
               //This color is used for the tagline color, the menu items hover color etc.
               //In the dynamic skin we want to refer everything to two colors: foreground and backgorund that's why we use a shdaded version
               //of the foreground color.
               //Also consider that $grey-dark, for our settings is the same as $grey, and the $secondary-color-light is always $grey-light
               //So since here we don't differentiate between $grey-light and $grey-dark, we'll use the following color for the $secondary-color-light too.
               //TODO: unify this in the header _skins.scss too?!
               $header_fg_color_shade_low              = czr_fn_hex2rgba( $header_fg_color, 0.7, $array = false, $make_prop_value = true );

//LET'S DANCE
               //start computing style
               $header_skin                            = array();
               $glue                                   = $this->_is_css_minified || esc_attr( czr_fn_opt( 'tc_minified_skin' ) ) ? '' : "\n";

$header_skin_style_map                  = array(

'header_fg_color' => array(
                           'color'  => $header_fg_color,
                           'rules'  => array(
                                 //prop => selectors
                                 'color'  => array(
                                       '.tc-header',
                                       '#tc-sn .tc-sn-inner',
                                       '.czr-overlay',
                                       '.add-menu-button',
                                       '.tc-header .socials a',
                                       '.tc-header .socials a:focus',
                                       '.tc-header .socials a:active',
                                       '.nav__utils',
                                       '.nav__utils a',
                                       '.nav__utils a:focus',
                                       '.nav__utils a:active',
                                       '.header-contact__info a',
                                       '.header-contact__info a:focus',
                                       '.header-contact__info a:active',
                                       '.czr-overlay a:hover',
                                       '.dropdown-menu',
                                       '.tc-header .navbar-brand-sitename',
                                       '[class*=nav__menu] .nav__link',
                                       '[class*=nav__menu] .nav__link-wrapper .caret__dropdown-toggler',
                                       '[class*=nav__menu] .dropdown-menu .nav__link',
                                       '[class*=nav__menu] .dropdown-item .nav__link:hover',
                                       '.tc-header form.czr-form label',
                                       '.czr-overlay form.czr-form label',
                                       ".tc-header .czr-form input:not([type='submit']):not([type='button']):not([type='number']):not([type='checkbox']):not([type='radio'])",
                                       '.tc-header .czr-form textarea',
                                       '.tc-header .czr-form .form-control',
                                       ".czr-overlay .czr-form input:not([type='submit']):not([type='button']):not([type='number']):not([type='checkbox']):not([type='radio'])",
                                       '.czr-overlay .czr-form textarea',
                                       '.czr-overlay .czr-form .form-control',
                                       '.tc-header h1',
                                       '.tc-header h2',
                                       '.tc-header h3',
                                       '.tc-header h4',
                                       '.tc-header h5',
                                       '.tc-header h6',
                                 ),
                                 'border-color' => array(
                                       ".tc-header .czr-form input:not([type='submit']):not([type='button']):not([type='number']):not([type='checkbox']):not([type='radio'])",
                                       '.tc-header .czr-form textarea',
                                       '.tc-header .czr-form .form-control',
                                       ".czr-overlay .czr-form input:not([type='submit']):not([type='button']):not([type='number']):not([type='checkbox']):not([type='radio'])",
                                       '.czr-overlay .czr-form textarea',
                                       '.czr-overlay .czr-form .form-control'
                                 ),
                                 'background-color' => array(
                                       '.ham__toggler-span-wrapper .line',
                                       '[class*=nav__menu] .nav__title::before',
                                 )
                           )
                     ),
                     'header_fg_color_shade_low' => array(
                           'color'  => $header_fg_color_shade_low,
                           'rules'  => array(
                                 //prop => selectors
                                 'color' => array(
                                         '.header-tagline',
                                         '[class*=nav__menu] .nav__link:hover',
                                         '[class*=nav__menu] .nav__link-wrapper .caret__dropdown-toggler:hover',
                                         '[class*=nav__menu] .show:not(.dropdown-item) > .nav__link',
                                         '[class*=nav__menu] .show:not(.dropdown-item) > .nav__link-wrapper .nav__link',
                                         '.czr-highlight-contextual-menu-items [class*=nav__menu] li:not(.dropdown-item).current-active > .nav__link',
                                         '.czr-highlight-contextual-menu-items [class*=nav__menu] li:not(.dropdown-item).current-active > .nav__link-wrapper .nav__link',
                                         '.czr-highlight-contextual-menu-items [class*=nav__menu] .current-menu-item > .nav__link',
                                         '.czr-highlight-contextual-menu-items [class*=nav__menu] .current-menu-item > .nav__link-wrapper .nav__link',
                                         '[class*=nav__menu] .dropdown-item .nav__link',
                                         '.czr-overlay a',
                                         '.tc-header .socials a:hover',
                                         '.nav__utils a:hover',
                                         '.czr-highlight-contextual-menu-items .nav__utils a.current-active',
                                         '.header-contact__info a:hover',
                                         '.tc-header .czr-form .form-group.in-focus label',
                                         '.czr-overlay .czr-form .form-group.in-focus label'
                                 ),
                                 'background-color' => array(
                                         '.nav__utils .ham-toggler-menu.czr-collapsed:hover .line',
                                 )
                           )
                     ),
                     'header_fg_color_shade_very_high' => array(
                           'color'  => $header_fg_color_shade_very_high,
                           'rules'  => array(
                                 //prop => selectors
                                 'border-color' => array(
                                         '.topbar-navbar__wrapper',
                                         '.dropdown-item:not(:last-of-type)'
                                 ),
                                 'border-bottom-color' => array(
                                         '.tc-header',
                                 ),
                                 'outline-color' => array(
                                         '#tc-sn'
                                 )
                           )
                     ),
                     'header_fg_color_shade_highest' => array(
                           'color'  => $header_fg_color_shade_highest,
                           'rules'  => array(
                                 //prop => selectors
                                 'border-color' => array(
                                         '.mobile-nav__container',
                                         '.header-search__container',
                                         '.mobile-nav__nav',
                                         '.vertical-nav > li:not(:last-of-type)'
                                 ),
                           )
                     ),
                     'header_bg_color' => array(
                           'color'  => $header_bg_color,
                           'rules'  => array(
                                 //prop => selectors
                                 'background-color' => array(
                                       '.tc-header',
                                       '#tc-sn .tc-sn-inner',
                                       '.dropdown-menu',
                                       '.dropdown-item:active',
                                       '.dropdown-item:focus',
                                       '.dropdown-item:hover'
                                 )
                           )
                     ),
                     'header_bg_color_shade_low' => array(
                           'color'  => $header_bg_color_shade_low,
                           'rules'  => array(
                                 //prop => selectors
                                 'background-color' => array(
                                       '.sticky-transparent.is-sticky .mobile-sticky',  //the alpha param is actually set at 0.7 for the dark_skin in the header skin scss, here we set it always at 0.9 which is the value used for the light skin
                                       '.sticky-transparent.is-sticky .desktop-sticky', //the alpah param is actually set at 0.7 for the dark_skin in the header skin scss, here we set it always at 0.9 which is the value used for the light skin
                                       '.sticky-transparent.is-sticky .mobile-nav__nav',
                                       '.header-transparent:not(.is-sticky) .mobile-nav__nav',
                                       '.header-transparent:not(.is-sticky) .dropdown-menu'
                                 )
                           )
                     ),
                     'header_bg_color_shade_lowest' => array(
                           'color'  => $header_bg_color_shade_lowest,
                           'rules'  => array(
                                 //prop => selectors
                                 'background-color' => array(
                                       '.czr-overlay',
                                 )
                           )
                     ),
                     'header_bg_inverted_color_shade_highest' => array(
                           'color'  => $header_bg_inverted_color_shade_highest,
                           'rules'  => array(
                                 //prop => selectors
                                 'background-color' => array(
                                       '.dropdown-item:before',
                                       '.vertical-nav .caret__dropdown-toggler'
                                 )
                           )
                     ),
               );

$header_skin  = self::czr_fn_build_inline_style_from_map( $header_skin_style_map, $glue );

// end computing
               if ( empty ( $header_skin ) ) {
                     return $_css;
               }

//LET's GET IT ON
               $header_skin  = implode( "{$glue}{$glue}", $header_skin );

return $_css . $header_skin;
         }

//@return string
         function czr_fn_maybe_write_skin_inline_css( $_css ) {

//retrieve the current option
               $skin_color                     = czr_fn_opt( 'tc_skin_color' );

//retrieve the default color
               $defaults                       = czr_fn_get_default_options();

$def_skin_color                 = isset( $defaults['tc_skin_color'] ) ? $defaults['tc_skin_color'] : false;

if ( in_array( $def_skin_color, array( $skin_color, strtoupper( $skin_color) ) ) )
                     return $_css;

$skin_dark_color                = czr_fn_darken_hex( $skin_color, '12%' );
               $skin_light_color               = czr_fn_lighten_hex( $skin_color, '15%' );
               $skin_lightest_color            = czr_fn_lighten_hex( $skin_color, '20%' );

//shaded
               $skin_lightest_color_shade_high = czr_fn_hex2rgba( $skin_lightest_color, 0.2, $array = false, $make_prop_value = true );
               $skin_dark_color_shade_high     = czr_fn_hex2rgba( $skin_dark_color, 0.2, $array = false, $make_prop_value = true );
               $skin_dark_color_shade_low      = czr_fn_hex2rgba( $skin_dark_color, 0.8, $array = false, $make_prop_value = true);

//LET'S DANCE
               //start computing style
               $skin                           = array();
               $glue                           = $this->_is_css_minified || esc_attr( czr_fn_opt( 'tc_minified_skin' ) ) ? '' : "\n";

$skin_style_map                 = array(

'skin_color' => array(
                           'color'  => $skin_color,
                           'rules'  => array(
                                 //prop => selectors
                                 'color'  => array(
                                       'a',
                                       '.btn-skin:active',
                                       '.btn-skin:focus',
                                       '.btn-skin:hover',
                                       '.btn-skin.inverted',
                                       '.grid-container__classic .post-type__icon',
                                       '.post-type__icon:hover .icn-format',
                                       '.grid-container__classic .post-type__icon:hover .icn-format',
                                       "[class*='grid-container__'] .entry-title a.czr-title:hover",
                                       'input[type=checkbox]:checked::before',
                                 ),
                                 'border-color' => array(
                                       '.czr-css-loader > div ',
                                       '.btn-skin',
                                       '.btn-skin:active',
                                       '.btn-skin:focus',
                                       '.btn-skin:hover',
                                       '.btn-skin-h-dark',
                                       '.btn-skin-h-dark.inverted:active',
                                       '.btn-skin-h-dark.inverted:focus',
                                       '.btn-skin-h-dark.inverted:hover',

),
                                 'border-top-color' => array(
                                       '.tc-header.border-top'
                                  ),
                                 'background-color' => array(
                                       "[class*='grid-container__'] .entry-title a:hover::after",
                                       '.grid-container__classic .post-type__icon',
                                       '.btn-skin',
                                       '.btn-skin.inverted:active',
                                       '.btn-skin.inverted:focus',
                                       '.btn-skin.inverted:hover',
                                       '.btn-skin-h-dark',
                                       '.btn-skin-h-dark.inverted:active',
                                       '.btn-skin-h-dark.inverted:focus',
                                       '.btn-skin-h-dark.inverted:hover',
                                       '.sidebar .widget-title::after',
                                       'input[type=radio]:checked::before'
                                 )
                           )
                     ),

'skin_light_color' => array(
                           'color'  => $skin_light_color,
                           'rules'  => array(
                                 //prop => selectors
                                 'color'  => array(
                                       '.btn-skin-light:active',
                                       '.btn-skin-light:focus',
                                       '.btn-skin-light:hover',
                                       '.btn-skin-light.inverted',
                                 ),

'border-color' => array(
                                       "input:not([type='submit']):not([type='button']):not([type='number']):not([type='checkbox']):not([type='radio']):focus",
                                       'textarea:focus',
                                       '.btn-skin-light',
                                       '.btn-skin-light.inverted',
                                       '.btn-skin-light:active',
                                       '.btn-skin-light:focus',
                                       '.btn-skin-light:hover',
                                       '.btn-skin-light.inverted:active',
                                       '.btn-skin-light.inverted:focus',
                                       '.btn-skin-light.inverted:hover',
                                 ),

'background-color' => array(
                                       '.btn-skin-light',
                                       '.btn-skin-light.inverted:active',
                                       '.btn-skin-light.inverted:focus',
                                       '.btn-skin-light.inverted:hover',
                                 ),
                           )
                     ),

'skin_lightest_color' => array(
                           'color'  => $skin_lightest_color,
                           'rules'  => array(
                                 //prop => selectors
                                 'color'  => array(
                                       '.btn-skin-lightest:active',
                                       '.btn-skin-lightest:focus',
                                       '.btn-skin-lightest:hover',
                                       '.btn-skin-lightest.inverted',
                                 ),

'border-color' => array(
                                       '.btn-skin-lightest',
                                       '.btn-skin-lightest.inverted',
                                       '.btn-skin-lightest:active',
                                       '.btn-skin-lightest:focus',
                                       '.btn-skin-lightest:hover',
                                       '.btn-skin-lightest.inverted:active',
                                       '.btn-skin-lightest.inverted:focus',
                                       '.btn-skin-lightest.inverted:hover',
                                 ),

'background-color' => array(
                                       '.btn-skin-lightest',
                                       '.btn-skin-lightest.inverted:active',
                                       '.btn-skin-lightest.inverted:focus',
                                       '.btn-skin-lightest.inverted:hover',
                                 ),
                           )
                     ),

'skin_dark_color' => array(
                           'color'  => $skin_dark_color,
                           'rules'  => array(
                                 //prop => selectors
                                 'color'  => array(
                                       '.pagination',
                                       'a:hover',
                                       'a:focus',
                                       'a:active',
                                       '.btn-skin-dark:active',
                                       '.btn-skin-dark:focus',
                                       '.btn-skin-dark:hover',
                                       '.btn-skin-dark.inverted',
                                       '.btn-skin-dark-oh:active',
                                       '.btn-skin-dark-oh:focus',
                                       '.btn-skin-dark-oh:hover',
                                       '.post-info a:not(.btn):hover',
                                       '.grid-container__classic .post-type__icon .icn-format',
                                       "[class*='grid-container__'] .hover .entry-title a",
                                       '.widget-area a:not(.btn):hover',
                                       'a.czr-format-link:hover',
                                       '.format-link.hover a.czr-format-link',
                                       'button[type=submit]:hover',
                                       'button[type=submit]:active',
                                       'button[type=submit]:focus',
                                       'input[type=submit]:hover',
                                       'input[type=submit]:active',
                                       'input[type=submit]:focus',
                                       '.tabs .nav-link:hover',
                                       '.tabs .nav-link.active',
                                       '.tabs .nav-link.active:hover',
                                       '.tabs .nav-link.active:focus'
                                 ),

'border-color' => array(
                                       '.grid-container__classic.tc-grid-border .grid__item',
                                       '.btn-skin-dark',
                                       '.btn-skin-dark.inverted',
                                       'button[type=submit]',
                                       'input[type=submit]',
                                       '.btn-skin-dark:active',
                                       '.btn-skin-dark:focus',
                                       '.btn-skin-dark:hover',
                                       '.btn-skin-dark.inverted:active',
                                       '.btn-skin-dark.inverted:focus',
                                       '.btn-skin-dark.inverted:hover',
                                       '.btn-skin-h-dark:active',
                                       '.btn-skin-h-dark:focus',
                                       '.btn-skin-h-dark:hover',
                                       '.btn-skin-h-dark.inverted',
                                       '.btn-skin-h-dark.inverted',
                                       '.btn-skin-h-dark.inverted',
                                       '.btn-skin-dark-oh:active',
                                       '.btn-skin-dark-oh:focus',
                                       '.btn-skin-dark-oh:hover',
                                       '.btn-skin-dark-oh.inverted:active',
                                       '.btn-skin-dark-oh.inverted:focus',
                                       '.btn-skin-dark-oh.inverted:hover',
                                       'button[type=submit]:hover',
                                       'button[type=submit]:active',
                                       'button[type=submit]:focus',
                                       'input[type=submit]:hover',
                                       'input[type=submit]:active',
                                       'input[type=submit]:focus',

'background-color' => array(
                                       '.btn-skin-dark',
                                       '.btn-skin-dark.inverted:active',
                                       '.btn-skin-dark.inverted:focus',
                                       '.btn-skin-dark.inverted:hover',
                                       '.btn-skin-h-dark:active',
                                       '.btn-skin-h-dark:focus',
                                       '.btn-skin-h-dark:hover',
                                       '.btn-skin-h-dark.inverted',
                                       '.btn-skin-h-dark.inverted',
                                       '.btn-skin-h-dark.inverted',
                                       '.btn-skin-dark-oh.inverted:active',
                                       '.btn-skin-dark-oh.inverted:focus',
                                       '.btn-skin-dark-oh.inverted:hover',
                                       '.grid-container__classic .post-type__icon:hover',
                                       'button[type=submit]',
                                       'input[type=submit]',
                                       '.czr-link-hover-underline .widgets-list-layout-links a:not(.btn)::before', //<-jetpack top post/pages textual links only
                                       '.czr-link-hover-underline .widget_archive a:not(.btn)::before',
                                       '.czr-link-hover-underline .widget_nav_menu a:not(.btn)::before',
                                       '.czr-link-hover-underline .widget_rss ul a:not(.btn)::before',
                                       '.czr-link-hover-underline .widget_recent_entries a:not(.btn)::before',
                                       '.czr-link-hover-underline .widget_categories a:not(.btn)::before',
                                       '.czr-link-hover-underline .widget_meta a:not(.btn)::before',
                                       '.czr-link-hover-underline .widget_recent_comments a:not(.btn)::before',
                                       '.czr-link-hover-underline .widget_pages a:not(.btn)::before',
                                       '.czr-link-hover-underline .widget_calendar a:not(.btn)::before',
                                       "[class*='grid-container__'] .hover .entry-title a::after",
                                       'a.czr-format-link::before',
                                       '.comment-author a::before',
                                       '.comment-link::before',
                                       '.tabs .nav-link.active::before'
                                 ),
                           )
                     ),

'skin_dark_color_shade_high' => array(
                           'color'  => $skin_dark_color_shade_high,
                           'rules'  => array(
                                 //prop => selectors
                                 'background-color' => array(
                                       '.btn-skin-dark-shaded:active',
                                       '.btn-skin-dark-shaded:focus',
                                       '.btn-skin-dark-shaded:hover',
                                       '.btn-skin-dark-shaded.inverted',
                                 )
                           )
                     ),

'skin_dark_color_shade_low' => array(
                           'color'  => $skin_dark_color_shade_low,
                           'rules'  => array(
                                 //prop => selectors
                                 'background-color' => array(
                                       '.btn-skin-dark-shaded',
                                       '.btn-skin-dark-shaded.inverted:active',
                                       '.btn-skin-dark-shaded.inverted:focus',
                                       '.btn-skin-dark-shaded.inverted:hover',
                                 )
                           )
                     )

);

//these break the style, let's separate them from the others;
               $skin[]  = '::-moz-selection{background-color:'. $skin_color .'}';
               $skin[]  = '::selection{background-color:'. $skin_color .'}';

$skin    = array_merge( $skin, self::czr_fn_build_inline_style_from_map( $skin_style_map, $glue ) );

// end computing
               if ( empty ( $skin ) ) {
                     return $_css;
               }

//LET's GET IT ON
               $skin    = implode( "{$glue}{$glue}", $skin );

return $_css . $skin;
         }

//hook : czr_user_options_style
         function czr_fn_maybe_write_boxed_layout_inline_css( $_css ) {
               if ( 'boxed' != esc_attr( czr_fn_opt( 'tc_site_layout') ) ) {
                     return $_css;
               }
               /**
                * When we choose a boxed layout we increase the .container right and left paddings from 15px to 30px
                * though their inner .row still have a negative right and left margin of 15px
                * and the col-X inside will still have the left and right padding of 15px.
                * hence to ensure the actual contained elements always have the same width ( e.g. 1110px in desktop)
                * whether or not we're in a boxed layout, we have to increase the .container widths (for the viewports within it's defined)
                * of 30px.
                */

//get default container widths
               /*
               CZR_init::$instance->$css_container_width looks like:

array(
                   //min-widths: 1200px, 992px, 768px,
                   //xl, lg, md, sm, xs
                   '1140', '960', '720', '540' //, no xs => 100%

'xl' => '1140',
                   'lg' => '960',
                   'md' => '720',
                   'sm' => '540'
               )
               */
               $css_container_widths   = CZR_init::$instance->css_container_widths;

/*
               CZR_init::$instance->$css_mq_breakpoints looks like:

array(
                     'xl' => '1200',
                     'lg' => '992',
                     'md' => '768',
                     'sm' => '575'
               )
               */
               $css_mq_breakpoints          = CZR_init::$instance->css_mq_breakpoints;
               $css_container               = array();
               $container_selector          = '.czr-boxed-layout .container';
               $glue                        = $this->_is_css_minified || esc_attr( czr_fn_opt( 'tc_minified_skin' ) ) ? '' : "\n";
               $additional_width            = 30; //px

//Add some rules from sm up
               //add padding
               $css_container[]        = sprintf( '@media (min-width: %1$spx){ %2$s{ padding-right: %3$spx; padding-left:  %3$spx; } }',
                           $css_mq_breakpoints[ 'sm' ],
                           $container_selector,
                           $additional_width
               );

//define container widths
               foreach ( array_reverse( $css_mq_breakpoints, true ) as $mq => $mq_w_width ) {

$container_width  = $css_container_widths[ $mq ] + $additional_width;

$css_container[]  = sprintf( '@media (min-width: %1$spx){ %2$s{ width: %3$spx } }',
                                 $mq_w_width,
                                 $container_selector,
                                 $container_width
                     );
               }

//LET's GET IT ON
               $css_container           = implode( "{$glue}{$glue}", $css_container );

return $_css . $css_container;

}

//@return string
         public static function czr_fn_build_inline_style_from_map( $style_map = array(), $glue = '') {

$style = array();

if ( empty( $style_map ) )
                     return $style;

//Builder
               foreach ( $style_map as $color => $params ) {

foreach ( $params['rules'] as $prop => $selectors ) {

$_selectors = implode( ",{$glue}", apply_filters( "czr_dynamic_{$color}_{$prop}_prop_selectors", $selectors ) );

if ( $_selectors ) {
                                 $style[] = sprintf( '%1$s{%2$s:%3$s}',
                                       $_selectors,
                                       $prop, //property
                                       $params['color'] //color
                                 );
                           }//end if $_selectors

}//end foreach $param['rules'] as ...

}//end foreach $style_map as ...

return $style;
         }

}//end of CZR_resources_styles
endif;

📁 Sid Gifari File Manager