59 lines
1.4 KiB
SCSS
59 lines
1.4 KiB
SCSS
// Rôle : regroupe les styles de composants UI partagés hors layout global.
|
|
.ui-tooltip-anchor {
|
|
position: relative;
|
|
}
|
|
|
|
.ui-tooltip {
|
|
position: fixed;
|
|
z-index: 520;
|
|
width: max-content;
|
|
max-width: min(280px, calc(100vw - 24px));
|
|
padding: 8px 10px;
|
|
border: 1px solid rgba(165, 180, 252, 0.18);
|
|
border-radius: var(--radius-md);
|
|
background: rgba(7, 10, 24, 0.98);
|
|
box-shadow: var(--shadow-md);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-xs);
|
|
line-height: 1.35;
|
|
opacity: 1;
|
|
pointer-events: none;
|
|
transform: translate(-50%, -100%);
|
|
transition:
|
|
opacity var(--duration-fast) var(--ease-standard),
|
|
transform var(--duration-fast) var(--ease-standard);
|
|
}
|
|
|
|
.ui-tooltip::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-right: 1px solid rgba(165, 180, 252, 0.18);
|
|
border-bottom: 1px solid rgba(165, 180, 252, 0.18);
|
|
background: rgba(7, 10, 24, 0.98);
|
|
transform: translate(-50%, -4px) rotate(45deg);
|
|
}
|
|
|
|
.ui-tooltip-top-start {
|
|
transform: translate(0, -100%);
|
|
}
|
|
|
|
.ui-tooltip-top-start::after {
|
|
left: 16px;
|
|
}
|
|
|
|
.ui-tooltip-right {
|
|
transform: translate(0, -50%);
|
|
}
|
|
|
|
.ui-tooltip-right::after {
|
|
top: 50%;
|
|
left: 0;
|
|
border-right: 0;
|
|
border-bottom: 1px solid rgba(165, 180, 252, 0.18);
|
|
border-left: 1px solid rgba(165, 180, 252, 0.18);
|
|
transform: translate(-4px, -50%) rotate(45deg);
|
|
}
|