Month_View::get_css_template( string $css_template )

Grab the CSS rules template


Parameters

$css_template

(string) (Required) The Customizer CSS string/template.


Top ↑

Return

(string) The Customizer CSS string/template, with v2 Month View styles added.


Top ↑

Source

File: src/Tribe/Views/V2/Customizer/Section/Month_View.php

	public function get_css_template( $css_template ) {
		if ( ! tribe_events_views_v2_is_enabled() ) {
			return $css_template;
		}

		$new_styles = [];

		// It's all custom props now, baby...

		if ( $this->should_include_setting_css( 'grid_lines_color' ) ) {
			$grid_lines_color = $this->get_option( 'grid_lines_color' );
			$new_styles[] = "--tec-color-border-secondary-month-grid: {$grid_lines_color};";
		}

		if ( $this->should_include_setting_css( 'grid_hover_color' ) ) {
			$grid_hover_color = $this->get_option( 'grid_hover_color' );
			$new_styles[] = "--tec-color-border-active-month-grid-hover: {$grid_hover_color};";
		}

		if ( $this->should_include_setting_css( 'grid_background_color_choice' ) ) {
			$grid_background_color = $this->should_include_setting_css( 'grid_background_color' )
				? $this->get_option( 'grid_background_color' )
				: "#fff";

			$new_styles[] = "--tec-color-background-month-grid: {$grid_background_color};";
		} elseif (
			$this->should_include_setting_css( 'tooltip_background_color' )
			&& $this->should_include_setting_css( 'background_color_choice', 'global_elements' )
		) {
			$tooltip_background_color = tribe( 'customizer' )->get_option( [ 'global_elements', 'background_color' ] );
			$new_styles[] = "--tec-color-background-tooltip: {$tooltip_background_color};";
		}

		if ( $this->should_include_setting_css( 'days_of_week_color' )  ) {
			$days_of_week_color = $this->get_option( 'days_of_week_color' );
			$new_styles[] = "--tec-color-text-day-of-week-month: {$days_of_week_color};";
		}

		if ( $this->should_include_setting_css( 'date_marker_color' )  ) {
			$date_marker_color = $this->get_option( 'date_marker_color' );
			$new_styles[] = "--tec-color-day-marker-month: {$date_marker_color};";
			$new_styles[] = "--tec-color-day-marker-past-month: {$date_marker_color};";
		}

		if (
			$this->should_include_setting_css( 'multiday_event_bar_color_choice' )
			&& $this->should_include_setting_css( 'multiday_event_bar_color' )
		) {
			$bar_color_rgb = $this->get_rgb_color( 'multiday_event_bar_color' );
			$new_styles[] = "--tec-color-background-primary-multiday: rgba({$bar_color_rgb}, 0.24);";
			$new_styles[] = "--tec-color-background-primary-multiday-hover: rgba({$bar_color_rgb}, 0.34);";
			$new_styles[] = "--tec-color-background-primary-multiday-active: rgba({$bar_color_rgb}, 0.34);";
			$new_styles[] = "--tec-color-background-secondary-multiday: rgba({$bar_color_rgb}, 0.24);";
			$new_styles[] = "--tec-color-background-secondary-multiday-hover: rgba({$bar_color_rgb}, 0.34);";
		}

		if ( empty( $new_styles ) ) {
			return $css_template;
		}

		$new_css = sprintf(
			':root {
				/* Customizer-added Month View styles */
				%1$s
			}',
			implode( "\n", $new_styles )
		);

		return $css_template . $new_css;
	}