MP_Addon_Payoff_CalculatorSettings::calculator_current_styles( array $mortgage_settings, string $calculator )

Styles Current Mortgage Calculator Shortcode.


Parameters Parameters

$mortgage_settings

(array) (Required) attributes

$calculator

(string) (Required) calculator id


Top ↑

Return Return

(string)


Top ↑

Source Source

File: calculator-mortgage-payoff-add-on/inc/MP_Addon_Payoff_CalculatorSettings.php

    public static function calculator_current_styles($mortgage_settings, $calculator)
    {
        global $mortgage_calculator_inc;

        if (isset($mortgage_settings['primary_color']) && ! empty($mortgage_settings['primary_color'])) {
            $color = $mortgage_settings['primary_color'];
        } else {
            $color = get_option(MortgagePlatform::$prefix . 'style')['primary_color'] ?? '#00bf20';
        }

        $font = $mortgage_settings['fonts'] ?? 'default';
        $colordark = MP_Settings::adjust_brightness($color, - 30);


        $styles = '<style type="text/css">
		.mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' >*{
				font-family: '. str_replace('+', ' ', $font) .' !important;
			}
		.mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input:focus {
	        border-bottom: 1px solid ' . $color . ';
	        box-shadow: 0 1px 0 0 ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .tool-tip__box {
	        border: 1px solid ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .tool-tip__arrow {
	        border-color:  ' . $color . ' transparent;
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .button {
	        background-color: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .button:hover {
	        background-color: ' . $colordark . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .button:active,  .mp_calculator .button:focus{
	        background-color: ' . $colordark . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .dropdown__selected:focus {
	        border-bottom: 1px solid ' . $color . ';
	        box-shadow: 0 1px 0 0 ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .dropdown__list-wrapper {
	        border: 1px solid ' . $colordark . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .dropdown__list-item:hover {
	        background-color:  ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .dropdown__arrow {
	        color:  ' . $color . ';
	        fill:  ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .term-switch label:last-of-type:before {
	        background-color: ' . $color . ';
	    }
	    
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .term-switch label.border-button:last-of-type:before{
	        background-color: ' . $color . ';
	    }
	
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .calculate-results-modal-content {
	        border: 5px solid  ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .calculator__amortization-header {
	        color: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .calculator__amortization-header.table-head-sticky {
	        color: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .chart-switch:hover,  .mp_calculator .chart-switch.active{
	        background-color: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .calculatorButtonUp {
	        border: 1px solid ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .calculatorButtonUp:hover {
	        background-color: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .calculatorButtonUp:before {
	        background-color: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .calculatorButtonUp:after {
	        background-color: ' . $color . '
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .calculatorButtonUp:hover:before {
	        background-color: #ffffff
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .calculatorButtonUp:hover:after {
	        background-color: #ffffff
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .button-lead-form{
	        background-color: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .button-lead-form:hover {
	        background-color: ' . $colordark . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .button-lead-form:active, .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .button-lead-form:focus{
	        background-color: ' . $colordark . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .lead-form-input-group select:focus, .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .lead-form-input-group select:active {
	        background-image:  -webkit-linear-gradient(top,rgb(255, 255, 255) 0%,rgb(255, 255, 255) 93%,' . $color . ' 100%);
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .wrapper-calculator-loader .loader {
	        border: 4px solid ' . $color . ';
	        border-top-color: ' . $colordark . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .dropdown__list-item .dropdown_list_checked svg{
	        fill: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .mp_calculator__result--wrapper {
	       border-color: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input.squared_input:focus, .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .dropdown__selected.selected.selectedTitle.squared_input:focus {
	        border: 1px solid ' . $color . ';
	        box-shadow: 0 1px 0 0 ' . $color . '
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input.rounded_input:focus, .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .dropdown__selected.selected.selectedTitle.rounded_input:focus {
	        border: 1px solid ' . $color . '
	        box-shadow: 0 1px 0 0 ' . $color . '
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .lead-form-input-group select.squared_input:focus, .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .lead-form-input-group select.rounded_input:focus {
	        border: 1px solid ' . $color . '
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .shareIcon:hover svg {
	        fill: ' . $color . '
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input[type=range]::-webkit-slider-thumb, .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input[type=range].round::-webkit-slider-thumb {
	        border: 0px solid ' . $color . ';
	        background: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input[type=range]::-moz-range-thumb . .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input[type=range].round::-moz-range-thumb {
	        border: 0px solid ' . $color . ';
	        background: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input[type=range]::-ms-thumb, .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input[type=range].round::-ms-thumb {
	        border: 0px solid ' . $color . ';
	        background: ' . $color . ';
	    } 
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input[type=range].oval::-webkit-slider-runnable-track {
	        background: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input[type=range].oval:focus::-webkit-slider-runnable-track {
	        background: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input[type=range].oval::-moz-range-track {
	        background: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input[type=range].oval::-ms-fill-lower {
	        background: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input[type=range].oval::-ms-fill-upper {
	        background: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input[type=range].triangle::-webkit-slider-thumb {
	        border-bottom: 16px solid ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input[type=range].triangle::-moz-range-thumb {
	        border-bottom: 16px solid ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' input[type=range].triangle::-ms-thumb {
	        border-bottom: 16px solid ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . '.darktheme .chart-switch:hover, .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .chart-switch.active {
	        background-color: ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . '.darktheme input:focus {
	        border-bottom: 1px solid ' . $color . ';
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . '.darktheme .lead-form-input-group select:focus, .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . '.darktheme .lead-form-input-group select:active {
	        background-image: -webkit-linear-gradient(top,#313233 0%,#313233 93%,' . $color . ' 100%);
	    }
	    .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . '.darktheme .lead-form-input-group select.squared_input:focus, .mp_calculator.' . $calculator . '-' . $mortgage_calculator_inc . ' .lead-form-input-group select.rounded_input:focus {
	        border: 1px solid ' . $color . ';
	    }</style>';


        return $styles;
    }

Top ↑

Changelog Changelog

Changelog
Version Description
1.0.0 Introduced.