Styles

Variables CSS

Personnalisez chaque pixel avec 19 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.

Overlay & tooltip

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

Variable	Par défaut	Type	Description
`--hub-overlay-backdrop-zindex`	`calc(var(--hub-sys-zindex-dropdown, 1000) - 1)`	number	Overlay backdrop z index
`--hub-overlay-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	Overlay bg
`--hub-overlay-border-radius`	`var(--hub-sys-radius-sm, 0.25rem)`	length	Overlay border radius
`--hub-overlay-shadow`	`var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15))`	shadow	Overlay shadow
`--hub-overlay-zindex`	`var(--hub-sys-zindex-dropdown, 1000)`	number	Overlay z index
`--hub-tooltip-bg`	`var(--hub-ref-color-black, #000)`	color	Couleur de fond de l'info-bulle.
`--hub-tooltip-border-radius`	`var(--hub-sys-radius-md, 0.375rem)`	length	Rayon des coins de l'info-bulle.
`--hub-tooltip-color`	`var(--hub-ref-color-white, #fff)`	color	Couleur du texte de l'info-bulle.
`--hub-tooltip-font-family`	`var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif)`	string	Tooltip font family
`--hub-tooltip-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Taille de police du texte de l'info-bulle.
`--hub-tooltip-font-weight`	`var(--hub-ref-font-weight-base, 400)`	number	Tooltip font weight
`--hub-tooltip-line-height`	`var(--hub-ref-line-height-base, 1.5)`	number	Largeur maximale avant le retour à la ligne du texte.
`--hub-tooltip-max-width`	`200px`	length	Tooltip max width
`--hub-tooltip-opacity`	`0.9`	number	Opacité de l'info-bulle affichée.
`--hub-tooltip-padding-x`	`var(--hub-ref-space-2, 0.5rem)`	length	Padding horizontal à l'intérieur de l'info-bulle.
`--hub-tooltip-padding-y`	`var(--hub-ref-space-1, 0.25rem)`	length	Padding vertical à l'intérieur de l'info-bulle.
`--hub-tooltip-shadow`	`none`	shadow	Tooltip box shadow
`--hub-tooltip-transition-duration`	`0.15s`	transition	Durée du fondu d'apparition/disparition.
`--hub-tooltip-zindex`	`var(--hub-sys-zindex-tooltip, 1080)`	number	Ordre d'empilement de l'élément d'info-bulle.