mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-10-04 02:04:06 +00:00
Pedro Martínandalejandrobailo
ea36f12a01
Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>
87 lines
2.5 KiB
CSS
87 lines
2.5 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;
|
|
}
|
|
|
|
/* Surfaces that must stay usable while a tour drives (the wizard footer, a
|
|
* discovery callout). Clickable regardless of the spotlight; a surface that lives
|
|
* in its own top-level layer (a portal) also rises above the overlay (z 10000). */
|
|
.driver-active [data-tour-interactive],
|
|
.driver-active [data-tour-interactive] * {
|
|
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;
|
|
}
|
|
}
|