Files
Alan Buscaglia 49309b43d3 feat(ui): UI onboarding system (#11430)
Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com>
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>
Co-authored-by: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com>
2026-06-15 13:53:48 +02:00

79 lines
2.2 KiB
CSS

.driver-active .driver-overlay,
.driver-active * {
pointer-events: none;
}
.driver-active .driver-active-element,
.driver-active .driver-active-element *,
.driver-popover,
.driver-popover * {
pointer-events: auto;
}
@keyframes driver-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.driver-fade .driver-overlay,
.driver-fade .driver-popover {
animation: driver-fade-in 0.2s ease-in-out;
}
/* Theme layer over driver.css: keep its positioning/stage, strip the default popover
* chrome (background, border, padding, shadow) so the React tour card is the only
* visible surface. Do NOT set position/top/right here — driver.js places the popover. */
.driver-popover.prowler-theme {
box-sizing: border-box;
margin: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
min-width: min(250px, calc(100vw - 32px));
max-width: min(320px, calc(100vw - 32px));
font-family: inherit;
/* Reset driver.css's hard-coded #2d2d2d so the card text follows the app theme
* (the card title inherits this; descriptions set their own muted token). */
color: var(--color-text-neutral-primary);
}
.driver-popover.prowler-theme * {
box-sizing: border-box;
font-family: inherit;
}
/* The visible popover is our React card (mounted at [data-tour-popover-root]).
* Keep driver.js's native chrome in the DOM (tour-popover-render reads its text and
* progress) but force it hidden — driver.css sets display:block/flex on these, which
* would otherwise override the `hidden` attribute and duplicate the card content. */
.driver-popover.prowler-theme .driver-popover-title,
.driver-popover.prowler-theme .driver-popover-description,
.driver-popover.prowler-theme .driver-popover-footer,
.driver-popover.prowler-theme .driver-popover-progress-text,
.driver-popover.prowler-theme .driver-popover-close-btn,
.driver-popover.prowler-theme .driver-popover-arrow {
display: none !important;
}
:not(body):has(> .driver-active-element) {
overflow: hidden !important;
}
.driver-no-interaction,
.driver-no-interaction * {
pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
.driver-popover.prowler-theme {
transition: none !important;
}
}