Adrien Maston
df2e4c1518
* main: (35 commits) Replace the whole card on update Include bottom inset on the modal and footer, too Attempt to fix expanded search input Lose the second close button This seems to have caused the unwanted effect of not focusing the field in Mobile Safari Always display the cancel button, `esc` isn't obvious Nothing should cover the bar, trays or search results Dark theme color isn't black Add env constaints for mobile layout Smaller on mobile Reasonalbe max heights Remove top orientation (it doesn't work well), make right and left classes exclusive This is too fancy, remove it Set reasonable maxes Restore bubble to Maybe Restore structured logging of `queenbee_id` Add a kamal pre-build hook with some safety checks Configure beta to use production blob store Configure beta load balancer Update beta deployment and secrets config ...
51 lines
1.3 KiB
CSS
51 lines
1.3 KiB
CSS
@layer components {
|
|
[data-controller~="tooltip"] {
|
|
--tooltip-delay: 750ms;
|
|
--tooltip-duration: 150ms;
|
|
|
|
.for-screen-reader {
|
|
background: var(--color-ink);
|
|
border-radius: 0.5ch;
|
|
color: var(--color-canvas);
|
|
font-size: var(--text-x-small);
|
|
font-weight: normal;
|
|
inset: -1ch auto auto 50%;
|
|
max-inline-size: min(50ch, calc(100vw - (var(--inline-space) * 2)));
|
|
opacity: 0;
|
|
padding: 0.25ch 1ch;
|
|
transition: var(--tooltip-duration) ease-out allow-discrete;
|
|
transition-property: opacity;
|
|
translate: -50% -100%;
|
|
text-overflow: ellipsis;
|
|
|
|
&.orient-right {
|
|
inset-inline: 0 auto;
|
|
translate: 0 -100%;
|
|
}
|
|
|
|
&.orient-left {
|
|
inset-inline: auto 0;
|
|
translate: 0 -100%;
|
|
}
|
|
}
|
|
|
|
@media(any-hover: hover) {
|
|
&:hover .for-screen-reader {
|
|
block-size: auto !important;
|
|
clip-path: none !important;
|
|
inline-size: auto !important;
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0); /* Fixes Safari overflow rendering bug */
|
|
transition-delay: var(--tooltip-delay);
|
|
translate: -50% -100%;
|
|
z-index: var(--z-tooltip);
|
|
|
|
&.orient-left,
|
|
&.orient-right {
|
|
translate: 0 -100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|