スタイル

CSS 変数

19 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。

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.

変数	デフォルト	型	説明
`--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	ツールチップの背景色。
`--hub-tooltip-border-radius`	`var(--hub-sys-radius-md, 0.375rem)`	length	ツールチップの角丸半径。
`--hub-tooltip-color`	`var(--hub-ref-color-white, #fff)`	color	ツールチップのテキスト色。
`--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	ツールチップテキストのフォントサイズ。
`--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	テキストが折り返されるまでの最大幅。
`--hub-tooltip-max-width`	`200px`	length	Tooltip max width
`--hub-tooltip-opacity`	`0.9`	number	表示中のツールチップの不透明度。
`--hub-tooltip-padding-x`	`var(--hub-ref-space-2, 0.5rem)`	length	ツールチップ内の水平パディング。
`--hub-tooltip-padding-y`	`var(--hub-ref-space-1, 0.25rem)`	length	ツールチップ内の垂直パディング。
`--hub-tooltip-shadow`	`none`	shadow	Tooltip box shadow
`--hub-tooltip-transition-duration`	`0.15s`	transition	フェードイン/アウトの時間。
`--hub-tooltip-zindex`	`var(--hub-sys-zindex-tooltip, 1080)`	number	ツールチップ要素の重なり順。