/** * Lubinik Plugin - CSS Variables * * This file contains all CSS variables used throughout the plugin's frontend. * These variables ensure consistent styling and easy customization. * * IMPORTANT: These variables are aligned with the Lubinik theme variables. * The theme variables take precedence over plugin variables. */ :root { /* ----------------------------------------------------------------------------------------- /* Plugin-Specific Variables /* ----------------------------------------------------------------------------------------- */ /* colors variables */ --lubinik-plugin-primary-color: var(--lubinik-primary-color); --lubinik-plugin-primary-color_rgb: var(--lubinik-primary-color-rgb); --lubinik-plugin-secondary-color: var(--lubinik-secondary-color); --lubinik-plugin-secondary-color_rgb: var(--lubinik-secondary-color-rgb); --lubinik-plugin-tertiary-color: var(--lubinik-tertiary-color); --lubinik-plugin-tertiary-color_rgb: var(--lubinik-tertiary-color-rgb); --lubinik-plugin-quaternary-color: var(--lubinik-quaternary-color); --lubinik-plugin-quaternary-color_rgb: var(--lubinik-quaternary-color-rgb); --lubinik-plugin-quinary-color: var(--lubinik-quinary-color); --lubinik-plugin-quinary-color_rgb: var(--lubinik-quinary-color-rgb); --lubinik-plugin-sextary-color: var(--lubinik-sextary-color); --lubinik-plugin-sextary-color_rgb: var(--lubinik-sextary-color-rgb); --lubinik-plugin-background-card-primary: var(--lubinik-background-card-primary); --lubinik-plugin-background-card-secondary: var(--lubinik-background-card-secondary); --lubinik-plugin-background-card-tertiary: var(--lubinik-background-card-tertiary); /***************************************** /* Plugin-Specific Variables for frontend */ /*****************************************/ --lubinik-plugin-global-text-color : var(--lubinik-plugin-secondary-color); --lubinik-plugin-global-header-color : var(--lubinik-plugin-secondary-color); --lubinik-plugin-global-link-color : var(--lubinik-plugin-tertiary-color); --lubinik-plugin-global-link-hover-color : var(--lubinik-plugin-secondary-color); --lubinik-plugin-hero-text-color : var(--lubinik-plugin-primary-color); --lubinik-plugin-hero-title-color : var(--lubinik-plugin-primary-color); --lubinik-plugin-hero-taxonomies-color : var(--lubinik-plugin-primary-color); --lubinik-plugin-single-section-bg-color : var(--lubinik-plugin-quaternary-color); /***************************************** /* Plugin Specific Variables for tabs */ /*****************************************/ --lubinik-plugin-tab-nav-border-color: var(--lubinik-plugin-quaternary-color); --lubinik-plugin-tab-nav-content-border-color: var(--lubinik-plugin-quaternary-color); --lubinik-plugin-tab-nav-color: var(--lubinik-plugin-quaternary-color); --lubinik-plugin-tab-nav-text-color: var(--lubinik-plugin-primary-color); --lubinik-plugin-tab-nav-active-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-tab-nav-active-text-color: var(--lubinik-plugin-primary-color); --lubinik-plugin-tab-nav-hover-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-tab-nav-hover-text-color: var(--lubinik-plugin-primary-color); --lubinik-plugin-tab-nav-heading-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-tab-nav-img-bg-color: var(--lubinik-plugin-quaternary-color); --lubinik-plugin-tab-nav-logo-bg-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-tab-nav-logo-text-color: var(--lubinik-plugin-primary-color); /*************************************************** /* Plugin-Specific Variables for calendar*/ /**************************************************/ --lubinik-plugin-calendar-bg-color: var(--lubinik-plugin-background-card-primary); --lubinik-plugin-calendar-text-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-calendar-title-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-calendar-title-after-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-calendar-link-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-calendar-link-hover-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-calendar-card-bg-color: var(--lubinik-plugin-background-card-primary); --lubinik-plugin-calendar-border-color: var(--lubinik-plugin-quaternary-color); --lubinik-plugin-calendar-title-cell-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-calendar-title-cell-hover-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-calendar-title-cell-active-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-calendar-title-cell-active-hover-color: var(--lubinik-plugin-sextary-color); --lubinik-plugin-calendar-today-color: rgba(var(--lubinik-sextary-color-rgb), 0.2); --lubinik-plugin-calendar-today-text-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-calendar-today-bg-color: var(--lubinik-plugin-background-card-secondary); --lubinik-plugin-calendar-today-border-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-calendar-blocked-color: rgba(var(--lubinik-tertiary-color-rgb), 0.2); --lubinik-plugin-calendar-blocked-text-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-calendar-nav-button-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-calendar-nav-button-hover-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-calendar-nav-button-border-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-calendar-nav-button-bg-color: var(--lubinik-plugin-background-card-secondary); --lubinik-plugin-calendar-nav-button-th-color: var(--lubinik-plugin-background-card-secondary); --lubinik-plugin-calendar-nav-button-td-color: var(--lubinik-plugin-background-card-primary); --lubinik-plugin-calendar-nav-button-th-text-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-calendar-nav-button-td-text-color: var(--lubinik-plugin-secondary-color); /*************************************************** /* Plugin-Specific Variables for galleries*/ /**************************************************/ --lubinik-plugin-galleries-bg-color: var(--lubinik-plugin-primary-color); --lubinik-plugin-galleries-text-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-galleries-caption-color: var(--lubinik-plugin-primary-color); --lubinik-plugin-galleries-title-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-galleries-title-after-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-galleries-title-after-width: 30px; --lubinik-plugin-galleries-title-after-height: 3px; --lubinik-plugin-galleries-link-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-galleries-link-hover-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-galleries-card-bg-color: var(--lubinik-plugin-background-card-primary); --lubinik-plugin-galleries-border-color: rgba(var(--lubinik-secondary-color-rgb), 0.05); --lubinik-plugin-galleries-container-before-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-galleries-prev-next-bg-color: rgba(255, 255, 255, 0.7); --lubinik-plugin-galleries-prev-next-hover-bg-color: rgba(255, 255, 255, 0.9); --lubinik-plugin-galleries-number-text: rgba(255, 255, 255, 0.8); --lubinik-plugin-galleries-prev-next-arrow-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-galleries-dots-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-galleries-dots-active-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-galleries-prev-next-width: 40px; --lubinik-plugin-galleries-prev-next-height: 40px; --lubinik-plugin-galleries-mansory-loading-color: var(--lubinik-plugin-quaternary-color); /*************************************************** /* Plugin-Specific Variables for Filter Panel /**************************************************/ --lubinik-filter-panel-bg-color: var(--lubinik-plugin-background-card-secondary); --lubinik-filter-panel-padding: var(--lubinik-spacing-ml); --lubinik-filter-panel-border-color: var(--lubinik-plugin-quinary-color); --lubinik-filter-panel-border-radius: var(--lubinik-border-radius-sm); --lubinik-filter-panel-margin-bottom: var(--lubinik-spacing-l); --lubinik-filter-section-margin-bottom: var(--lubinik-spacing-ml); --lubinik-filter-section-padding-bottom: var(--lubinik-spacing-ml); --lubinik-filter-section-border-color: var(--lubinik-plugin-quinary-color); --lubinik-filter-label-font-weight: var(--lubinik-font-weight-bold); --lubinik-filter-label-margin-bottom: var(--lubinik-spacing-hxs); --lubinik-filter-label-color: var(--lubinik-plugin-secondary-color); /* For inputs like select, number, text */ --lubinik-filter-input-padding: var(--lubinik-spacing-hxs); /* Was 10px */ --lubinik-filter-input-background-color: var(--lubinik-plugin-primary-color); --lubinik-filter-input-border-color: var(--lubinik-plugin-quinary-color); /* Was #ccc */ --lubinik-filter-input-border-radius: var(--lubinik-border-radius-sm); --lubinik-filter-input-margin-bottom: var(--lubinik-spacing-hxs); /* Was 10px */ /* For checkbox/radio groups */ --lubinik-filter-option-item-margin-bottom: var(--lubinik-spacing-hxs); --lubinik-filter-option-checkbox-radio-margin-right: var(--lubinik-spacing-hxs); --lubinik-filter-option-label-color: var(--lubinik-plugin-quaternary-color); --lubinik-filter-area-inputs-gap: var(--lubinik-spacing-sm); /* Was 15px, sm is 16px */ --lubinik-filter-buttons-margin-top: var(--lubinik-spacing-m); --lubinik-filter-buttons-gap: var(--lubinik-spacing-sm); /* Was 15px, sm is 16px */ --lubinik-filter-button-padding-y: var(--lubinik-spacing-hxs); /* Was 12px, hxs is 8px */ --lubinik-filter-button-padding-x: var(--lubinik-spacing-ml); /* Was 20px, ml is 20px */ --lubinik-filter-button-border-radius: var(--lubinik-border-radius-sm); --lubinik-filter-button-font-size: var(--lubinik-font-size-m); --lubinik-filter-button-transition-speed: var(--lubinik-transition-speed); --lubinik-filter-button-apply-bg-color: var(--lubinik-plugin-tertiary-color); --lubinik-filter-button-apply-text-color: var(--lubinik-plugin-primary-color); --lubinik-filter-button-apply-bg-hover-color: var(--lubinik-plugin-secondary-color); --lubinik-filter-button-reset-bg-color: var(--lubinik-plugin-quinary-color); --lubinik-filter-button-reset-text-color: var(--lubinik-plugin-secondary-color); --lubinik-filter-button-reset-bg-hover-color: var(--lubinik-plugin-quaternary-color); /* New variables for horizontal filter layout and spacing */ --lubinik-filter-section-gap: var(--lubinik-spacing-medium, 20px); /* Gap between filter sections when horizontal */ --lubinik-filter-option-item-gap: var(--lubinik-spacing-small, 10px); /* Gap between checkbox/radio items in a group */ --lubinik-filter-options-max-height: 150px; /* Max height for scrollable amenities/services */ --lubinik-filter-options-padding: var(--lubinik-spacing-extra-small, 5px); /* Padding inside scrollable groups */ --lubinik-filter-section-basis: 220px; /* Default flex-basis for a filter section */ --lubinik-filter-section-min-width: 200px; /* Default min-width for a filter section */ /* global variables */ --lubinik-plugin-global-link-color : var(--lubinik-plugin-tertiary-color); --lubinik-plugin-global-link-hover-color : var(--lubinik-plugin-secondary-color); --lubinik-plugin-global-text-color : var(--lubinik-plugin-secondary-color); --lubinik-plugin-global-text-light-color : var(--lubinik-plugin-primary-color); --lubinik-plugin-global-text-accent-color : var(--lubinik-plugin-tertiary-color); --lubinik-plugin-global-text-primary-color : var(--lubinik-plugin-primary-color); --lubinik-plugin-global-text-secondary-color : var(--lubinik-plugin-secondary-color); --lubinik-plugin-global-title-color : var(--lubinik-plugin-secondary-color); --lubinik-plugin-global-title-light-color : var(--lubinik-plugin-primary-color); --lubinik-plugin-global-title-accent-color : var(--lubinik-plugin-tertiary-color); --lubinik-plugin-global-title-primary-color : var(--lubinik-plugin-primary-color); --lubinik-plugin-global-title-secondary-color : var(--lubinik-plugin-secondary-color); --lubinik-plugin-global-heading-color : var(--lubinik-plugin-tertiary-color); --lubinik-plugin-global-background-primary-color : var(--lubinik-plugin-primary-color); --lubinik-plugin-global-background-secondary-color : var(--lubinik-plugin-secondary-color); --lubinik-plugin-global-background-accent-color : var(--lubinik-plugin-tertiary-color); --lubinik-plugin-global-border-color : var(--lubinik-plugin-tertiary-color); /***************************************** /* Plugin-Specific Variables for book now buttons */ /*****************************************/ /* Plugin-Specific Variables for book now buttons */ --lubinik-plugin-booknow-bg-color: var(--lubinik-plugin-primary-color); --lubinik-plugin-booknow-text-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-booknow-title-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-booknow-button-shadow: 0 2px 4px var(--lubinik-shadow-color-light); --lubinik-plugin-booknow-button-shadow-hover: 0 4px 8px var(--lubinik-shadow-color-medium); /* Button style variations */ --lubinik-plugin-booknow-primary-bg-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-booknow-primary-text-color: var(--lubinik-plugin-primary-color); --lubinik-plugin-booknow-secondary-bg-color: var(--lubinik-plugin-primary-color); --lubinik-plugin-booknow-secondary-text-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-booknow-outline-border-color: var(--lubinik-plugin-tertiary-color); /* Platform-specific colors */ --lubinik-plugin-booknow-airbnb-color: #FF5A5F; --lubinik-plugin-booknow-whatsapp-color: #25D366; --lubinik-plugin-booknow-email-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-booknow-phone-color: #4285F4; --lubinik-plugin-booknow-booking-color: #003580; --lubinik-plugin-booknow-width: 20px; --lubinik-plugin-booknow-height: 20px; /***************************************** /* Plugin-Specific Variables for CTA buttons */ /*****************************************/ /* Plugin-Specific Variables for book now buttons */ --lubinik-plugin-cta-bg-color: var(--lubinik-plugin-primary-color); --lubinik-plugin-cta-text-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-cta-title-color: var(--lubinik-plugin-secondary-color); --lubinik-plugin-cta-button-shadow: 0 2px 4px var(--lubinik-shadow-color-light); --lubinik-plugin-cta-button-shadow-hover: 0 4px 8px var(--lubinik-shadow-color-medium); /* Button style variations */ --lubinik-plugin-cta-primary-bg-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-cta-primary-text-color: var(--lubinik-plugin-primary-color); --lubinik-plugin-cta-secondary-bg-color: var(--lubinik-plugin-primary-color); --lubinik-plugin-cta-secondary-text-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-cta-outline-border-color: var(--lubinik-plugin-tertiary-color); /* Platform-specific colors */ --lubinik-plugin-cta-airbnb-color: #FF5A5F; --lubinik-plugin-cta-whatsapp-color: #25D366; --lubinik-plugin-cta-email-color: var(--lubinik-plugin-tertiary-color); --lubinik-plugin-cta-phone-color: #4285F4; --lubinik-plugin-cta-booking-color: #003580; --lubinik-plugin-cta-width: 20px; --lubinik-plugin-cta-height: 20px; }