Skip to main content

Configuration

Css variables

Widget

  • --ol-widget-background-color: Color de fondo del widget.
  • --ol-widget-max-width: Ancho máximo del widget.
  • --ol-widget-margin: Margen alrededor del widget.
  • --ol-widget-spacing: Espaciado entre elementos dentro del widget.
  • --ol-widget-z-index: Posición en el eje Z del widget.

Section

  • --ol-section-background-color: Color de fondo de la sección.
  • --ol-section-header-margin: Margen del encabezado de la sección.
  • --ol-section-title-font-size: Tamaño de fuente del título de la sección.
  • --ol-section-title-font-weight: Peso de la fuente del título de la sección.
  • --ol-section-title-line-height: Altura de línea del título de la sección.
  • --ol-section-title-margin: Margen alrededor del título de la sección.
  • --ol-section-title-color: Color del título de la sección.
  • --ol-section-title-text-transform: Transformación de texto del título de la sección.

Highlight Container

  • --ol-highlight-container-flex-direction: Dirección de los elementos flexibles en el contenedor de resaltado.

Highlight Event Card

  • --ol-highlight-event-card-spacing: Espaciado entre tarjetas de eventos destacados.
  • --ol-highlight-event-card-padding: Relleno dentro de las tarjetas de eventos destacados.
  • --ol-highlight-event-card-border: Borde de las tarjetas de eventos destacados.
  • --ol-highlight-event-card-border-radius: Radio del borde de las tarjetas de eventos destacados.
  • --ol-highlight-event-card-background-color: Color de fondo de las tarjetas de eventos destacados.
  • --ol-highlight-event-card-box-shadow: Sombra de caja de las tarjetas de eventos destacados.
  • --ol-highlight-event-card-hover-box-shadow: Sombra de caja al pasar el mouse sobre las tarjetas de eventos destacados.
  • --ol-highlight-event-card-image-margin: Margen de la imagen en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-image-width: Ancho de la imagen en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-image-height: Altura de la imagen en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-image-aspect-ratio: Proporción de aspecto de la imagen en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-image-object-fit: Ajuste del objeto de la imagen en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-image-align: Alineación de la imagen en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-title-font-size: Tamaño de fuente del título en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-title-font-weight: Peso de la fuente del título en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-title-line-height: Altura de línea del título en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-title-font-family: Familia de fuentes del título en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-title-color: Color del título en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-title-margin: Margen del título en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-title-text-transform: Transformación de texto del título en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-title-word-wrap: Ajuste de palabras del título en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-description-font-size: Tamaño de fuente de la descripción en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-description-font-weight: Peso de la fuente de la descripción en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-description-line-height: Altura de línea de la descripción en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-description-font-family: Familia de fuentes de la descripción en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-description-color: Color de la descripción en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-description-margin: Margen de la descripción en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-description-text-transform: Transformación de texto de la descripción en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-date-overline-past-event-display: Visualización de la línea superior de la fecha para eventos pasados en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-date-overline-upcoming-event-display: Visualización de la línea superior de la fecha para eventos próximos en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-date-overline-near-event-display: Visualización de la línea superior de la fecha para eventos cercanos en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-date-overline-color: Color de la línea superior de la fecha en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-date-overline-font-size: Tamaño de fuente de la línea superior de la fecha en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-date-overline-font-weight: Peso de la fuente de la línea superior de la fecha en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-date-overline-text-transform: Transformación de texto de la línea superior de la fecha en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-date-display: Visualización de la fecha en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-date-color: Color de la fecha en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-date-font-size: Tamaño de fuente de la fecha en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-date-font-weight: Peso de la fuente de la fecha en las tarjetas de eventos destacados.
  • --ol-highlight-event-card-date-text-transform: Transformación de texto de la fecha en las tarjetas de eventos destacados.

Event Card

  • --ol-event-card-height: Altura de las tarjetas de eventos.
  • --ol-event-card-border: Borde de las tarjetas de eventos.
  • --ol-event-card-border-radius: Radio del borde de las tarjetas de eventos.
  • --ol-event-card-background-color: Color de fondo de las tarjetas de eventos.
  • --ol-event-card-box-shadow: Sombra de caja de las tarjetas de eventos.
  • --ol-event-card-hover-box-shadow: Sombra de caja al pasar el mouse sobre las tarjetas de eventos.
  • --ol-event-card-title-color: Color del título en las tarjetas de eventos.
  • --ol-event-card-title-font-size: Tamaño de fuente del título en las tarjetas de eventos.
  • --ol-event-card-title-font-weight: Peso de la fuente del título en las tarjetas de eventos.
  • --ol-event-card-title-line-height: Altura de línea del título en las tarjetas de eventos.
  • --ol-event-card-title-font-family: Familia de fuentes del título en las tarjetas de eventos.
  • --ol-event-card-title-margin: Margen del título en las tarjetas de eventos.
  • --ol-event-card-title-text-transform: Transformación de texto del título en las tarjetas de eventos.
  • --ol-event-card-title-word-wrap: Ajuste de palabras del título en las tarjetas de eventos.
  • --ol-event-card-description-color: Color de la descripción en las tarjetas de eventos.
  • --ol-event-card-description-font-size: Tamaño de fuente de la descripción en las tarjetas de eventos.
  • --ol-event-card-description-font-weight: Peso de la fuente de la descripción en las tarjetas de eventos.
  • --ol-event-card-description-line-height: Altura de línea de la descripción en las tarjetas de eventos.
  • --ol-event-card-description-font-family: Familia de fuentes de la descripción en las tarjetas de eventos.
  • --ol-event-card-description-margin: Margen de la descripción en las tarjetas de eventos.
  • --ol-event-card-description-text-transform: Transformación de texto de la descripción en las tarjetas de eventos.
  • --ol-event-card-image-aspect-ratio: Proporción de aspecto de la imagen en las tarjetas de eventos.
  • --ol-event-card-image-width: Ancho de la imagen en las tarjetas de eventos.
  • --ol-event-card-image-height: Altura de la imagen en las tarjetas de eventos.
  • --ol-event-card-image-object-fit: Ajuste del objeto de la imagen en las tarjetas de eventos.
  • --ol-event-card-content-padding: Relleno del contenido en las tarjetas de eventos.
  • --ol-event-card-content-spacing: Espaciado del contenido en las tarjetas de eventos.
  • --ol-event-card-content-backdrop-filter: Filtro de fondo del contenido en las tarjetas de eventos.

Event Subscription

  • --ol-event-subscription-image-height: Altura de la imagen en la suscripción al evento.
  • --ol-event-subscription-image-width: Ancho de la imagen en la suscripción al evento.
  • --ol-event-subscription-image-aspect-ratio: Proporción de aspecto de la imagen en la suscripción al evento.
  • --ol-event-subscription-title-display: Visualización del título en la suscripción al evento.

Live Preview

  • --ol-live-preview-width: Ancho de la vista previa en vivo.
  • --ol-live-preview-height: Altura de la vista previa en vivo.
  • --ol-live-preview-edge-spacing-x: Espaciado del borde X de la vista previa en vivo.
  • --ol-live-preview-edge-spacing-y: Espaciado del borde Y de la vista previa en vivo.
  • --ol-live-preview-border-radius: Radio del borde de la vista previa en vivo.
  • --ol-live-preview-box-shadow: Sombra de caja de la vista previa en vivo.
  • --ol-live-preview-z-index: Posición en el eje Z de la vista previa en vivo.

Buttons

  • --ol-primary-button-background-color: Color de fondo del botón primario.
  • --ol-primary-button-border-color: Color del borde del botón primario.
  • --ol-primary-button-color: Color del texto del botón primario.
  • --ol-primary-button-font-weight: Peso de la fuente del botón primario.
  • --ol-primary-button-text-transform: Transformación de texto del botón primario.
  • --ol-primary-button-hover-background-color: Color de fondo del botón primario al pasar el mouse.
  • --ol-primary-button-hover-border-color: Color del borde del botón primario al pasar el mouse.
  • --ol-primary-button-hover-color: Color del texto del botón primario al pasar el mouse.
  • --ol-primary-button-padding: Relleno del botón primario.
  • --ol-primary-button-border-radius: Radio del borde del botón primario.
  • --ol-primary-button-border-radius-small: Radio del borde pequeño del botón primario.
  • --ol-primary-button-border-radius-medium: Radio del borde mediano del botón primario.
  • --ol-primary-button-border-radius-large: Radio del borde grande del botón primario.
  • --ol-secondary-button-background-color: Color de fondo del botón secundario.
  • --ol-secondary-button-border-color: Color del borde del botón secundario.
  • --ol-secondary-button-color: Color del texto del botón secundario.
  • --ol-secondary-button-font-weight: Peso de la fuente del botón secundario.
  • --ol-secondary-button-text-transform: Transformación de texto del botón secundario.
  • --ol-secondary-button-hover-background-color: Color de fondo del botón secundario al pasar el mouse.
  • --ol-secondary-button-hover-border-color: Color del borde del botón secundario al pasar el mouse.
  • --ol-secondary-button-hover-color: Color del texto del botón secundario al pasar el mouse.
  • --ol-secondary-button-padding: Relleno del botón secundario.
  • --ol-secondary-button-border-radius: Radio del borde del botón secundario.
  • --ol-secondary-button-border-radius-small: Radio del borde pequeño del botón secundario.
  • --ol-secondary-button-border-radius-medium: Radio del borde mediano del botón secundario.
  • --ol-secondary-button-border-radius-large: Radio del borde grande del botón secundario.

Inputs

  • --ol-text-input-height: Altura del campo de texto.
  • --ol-text-input-font-size: Tamaño de fuente del campo de texto.
  • --ol-text-input-border-width: Ancho del borde del campo de texto.
  • --ol-text-input-border-color: Color del borde del campo de texto.
  • --ol-text-input-background-color: Color de fondo del campo de texto.
  • --ol-text-input-focus-border-color: Color del borde del campo de texto al estar en foco.
  • --ol-text-input-focus-background-color: Color de fondo del campo de texto al estar en foco.
  • --ol-text-input-focus-box-shadow: Sombra de caja del campo de texto al estar en foco.
  • --ol-text-input-label-color: Color de la etiqueta del campo de texto.
  • --ol-text-input-label-font-size: Tamaño de fuente de la etiqueta del campo de texto.
  • --ol-text-input-label-margin-bottom: Margen inferior de la etiqueta del campo de texto.

Scroll Bar

  • --ol-scrollbar-width-mode: Modo de ancho de la barra de desplazamiento.
  • --ol-scrollbar-width-px: Ancho en píxeles de la barra de desplazamiento.
  • --ol-scrollbar-color: Color de la barra de desplazamiento.
  • --ol-scrollbar-background-color: Color de fondo de la barra de desplazamiento.