Настройка внешнего вида календаря бронирования Baza с помощью CSS в WordPress

Плагин «Baza Booking Calendar» разработан так, чтобы органично вписываться в любую тему WordPress.
Вы можете легко настроить его внешний вид — цвета, шрифты, интервалы и даже анимацию — с помощью простых правил CSS. Это дает вам полный контроль над дизайном, при этом плагин остается компактным и гибким.

Использование переменных CSS

Baza Booking Calendar использует пользовательские свойства CSS (переменные), которые определяют его стандартный дизайн.
Эти переменные объявлены в рамках глобального селектора :root, а это означает, что вы можете переопределить их в любом месте вашей темы или пользовательского файла CSS, не затрагивая основной код плагина.

Набор переменных по умолчанию

:root {
    --bbc_color: #FFE050;
    --bbc_color_primary: #111111;
    --bbc_color_secondary: #ffffff;
    --bbc_cubic_bezier: cubic-bezier(0.1, 0.6, 0, 1);
    --bbc_color_disabled: color-mix(in srgb, var(--bbc_color_primary) 12%, transparent);
    --bbc_color_loading: #111111;
    --bbc_color_loading_bg: color-mix(in srgb, var(--bbc_color_secondary) 10%, transparent);
    --bbc_color_bg_time_choise: #111111;
    --bbc_color_time_choise: #ffffff;
    --bbc_color_bg_time_hover: #111111;
    --bbc_color_time_hover: #ffffff;
    --bbc_color_bg_time_booked_choise: color-mix(in srgb, var(--bbc_color_primary) 8%, transparent);
    --bbc_color_bg_order_info: color-mix(in srgb, var(--bbc_color_primary) 8%, transparent);
    --bbc_color_time_booked_choise: #111111;
    --bbc_color_choise: color-mix(in srgb, var(--bbc_color_primary) 12%, transparent);
    --bbc_color_error: #ec5353;
    --bbc_color_success: #50C878;
    --bbc_color_danger: #FF6B6B;
    --bbc_wrapper_background: transparent;
    --bbc_form_background: transparent;
    --bbc_form_field_background: transparent;
    --bbc_notification_background: #111111;
    --bbc_notification_border: #111111;
    --bbc_notification_color: #ffffff;
    --bbc_scrollbar_track_color: color-mix(in srgb, var(--bbc_color_primary) 8%, transparent);
    --bbc_border_radius: 5px;
    --bbc_checkbox_border_radius: 5px;
    --bbc_button_border_radius: 5px;
    --bbc_font_size_xl: 30px;
    --bbc_font_size_l: 18px;
    --bbc_font_size_m: 15px;
    --bbc_font_size_s: 13px;
    --bbc_font_size_xs: 11px;
    --bbc_gap: 25px;
    --bbc_spacing: 25px;
    --bbc_padding: 30px;
    --bbc_field_padding: 12px;
    --bbc_field_height: 40px;
    --bbc_field_height_inner: 38px;
    --bbc_field_width: 40px;
    --bbc_field_width_inner: 38px;
    --bbc_bounce_color_primary: var(--bbc_color_primary);
    --bbc_bounce_color_secondary: var(--bbc_color_secondary);
}

Как переопределить стили плагина

Чтобы изменить внешний вид календаря бронирования Baza, просто переопределите одну или несколько из этих переменных в вашем таблице стилей.
Вам не нужно вносить изменения в плагин — достаточно переопределить эти переменные в вашей теме.

Например

Чтобы изменить основной цвет акцента и радиус рамки:

:root {
    --bbc_color: #0073e6;
    --bbc_border_radius: 10px;
}