CSS Variables
Theme-level customization using CSS Custom Properties (CSS Variables) for all or specific vviinn widgets.
Available CSS variables
Section titled “Available CSS variables”General
Section titled “General”--font-family— used for customizing the font family
Search Modal
Section titled “Search Modal”--color-primary— used on the main action button, slider bullets, selected detected object or filter, and some other parts--color-primary-hover— used on the main action button when hovering--modal-border-radius— used on the modal border radius--search-modal-animation-duration— used on the modal animation duration on desktop devices--search-modal-animation-duration-mobile— used on the modal animation duration on mobile devices
Product Card
Section titled “Product Card”--product-card-width— used for minimum width of product card inside the grid--product-card-content-align— used on the product card content alignment--product-card-text-align— used on the product card text alignment--product-card-image-border— used on the product card image border--product-card-image-bg-color— used on the product card background--product-card-image-aspect-ratio— used on the product card image aspect ratio (e.g.,"1 / 1","3 / 4")--product-card-transition-duration— used for duration of skeleton to content transitions--basket-button-bg-color-pressed— used on the pressed basket button background
Note: All widgets that use product cards can be customized with these variables.
Discovery
Section titled “Discovery”--vviinn-carousel-columns— used to set the number of items displayed in grid mode--sidebar-animation-duration— used on the recommendations sidebar animation duration
Applying CSS variables to widgets
Section titled “Applying CSS variables to widgets”Apply the CSS variables to all vviinn widgets on the page by using the html selector:
html { ... --color-primary: #078688; ...}To apply variables to a specific widget, use the widget name as a selector:
vviinn-vps-button { ... --color-primary: #078688; ...}