@gfazioli/mantine-onboarding-tour/dist/styles.css

A Mantine component enables you to create a onboarding-tour effect using overlays, popovers, and onboarding tours, which enhances element visibility and interactivity.

@keyframes me_67edbf9e{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes me_5e2cbce8{0%,to{box-shadow:0 0 10px var(--mantine-primary-color-1)}50%{box-shadow:0 0 20px var(--mantine-primary-color-9)}}@keyframes me_faf5661f{0%,to{box-shadow:0 0 10px var(--mantine-color-blue-9)}50%{box-shadow:0 0 20px var(--mantine-color-blue-1)}}@keyframes me_ce4a362c{0%,to{box-shadow:0 0 10px var(--mantine-color-red-9)}50%{box-shadow:0 0 20px var(--mantine-color-red-5)}}@keyframes me_640051de{0%,to{box-shadow:0 0 10px var(--mantine-color-green-9)}50%{box-shadow:0 0 20px var(--mantine-color-green-1)}}@keyframes me_6811f30b{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-5px)}}@keyframes me_98e2b9f6{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes me_680fad4f{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes me_cda1699a{0%{transform:scale(1)}20%{transform:scale(1.2)}40%{transform:scale(.9)}60%{transform:scale(1.2)}80%{transform:scale(1.05)}to{transform:scale(1.08)}}@keyframes me_5e356b2e{0%{transform:scale(1)}to{transform:scale(1.1)}}.me_efe7fb15{inset:0;position:fixed!important}.me_7c3423c[data-onboarding-tour-focus-reveal-focused][data-onboarding-tour-focus-reveal-mode=pulse]{animation:me_67edbf9e 1s infinite}.me_7c3423c[data-onboarding-tour-focus-reveal-focused][data-onboarding-tour-focus-reveal-mode=glow]{animation:me_5e2cbce8 2s ease-in-out infinite}.me_7c3423c[data-onboarding-tour-focus-reveal-focused][data-onboarding-tour-focus-reveal-mode=border]{box-shadow:0 0 0 3px var(--mantine-primary-color-5)}.me_7c3423c[data-onboarding-tour-focus-reveal-focused][data-onboarding-tour-focus-reveal-mode=shake]{animation:me_6811f30b .5s ease-in-out 2}.me_7c3423c[data-onboarding-tour-focus-reveal-focused][data-onboarding-tour-focus-reveal-mode=rotate]{animation:me_98e2b9f6 1s linear 2}.me_7c3423c[data-onboarding-tour-focus-reveal-focused][data-onboarding-tour-focus-reveal-mode=scale]{animation:me_680fad4f .5s ease-in-out 3}.me_7c3423c[data-onboarding-tour-focus-reveal-focused][data-onboarding-tour-focus-reveal-mode=glow-blue]{animation:me_faf5661f 2s ease-in-out infinite}.me_7c3423c[data-onboarding-tour-focus-reveal-focused][data-onboarding-tour-focus-reveal-mode=glow-red]{animation:me_ce4a362c 2s ease-in-out infinite}.me_7c3423c[data-onboarding-tour-focus-reveal-focused][data-onboarding-tour-focus-reveal-mode=glow-green]{animation:me_640051de 2s ease-in-out infinite}.me_7c3423c[data-onboarding-tour-focus-reveal-focused][data-onboarding-tour-focus-reveal-mode=elastic]{animation:me_cda1699a .5s ease-in-out forwards}.me_7c3423c[data-onboarding-tour-focus-reveal-focused][data-onboarding-tour-focus-reveal-mode=zoom]{animation:me_5e356b2e .2s ease-in-out forwards}.me_34d8e87a{--onboarding-tour-popover-content-stepper-icon-size:16px;position:relative}.me_1cc044b{border-width:2px;font-size:0;height:var(--onboarding-tour-popover-content-stepper-icon-size);min-height:var(--onboarding-tour-popover-content-stepper-icon-size);min-width:var(--onboarding-tour-popover-content-stepper-icon-size);width:var(--onboarding-tour-popover-content-stepper-icon-size)}.me_500facbf{height:4px;margin:0}.me_7de6bfee{--onboarding-tour-popover-content-stepper-icon-size:16px;position:relative}.me_8b22cfb0{position:absolute;right:-8px;top:-4px}.me_421d82bf{border-width:2px;font-size:0;height:var(--onboarding-tour-popover-content-stepper-icon-size);min-height:var(--onboarding-tour-popover-content-stepper-icon-size);min-width:var(--onboarding-tour-popover-content-stepper-icon-size);width:var(--onboarding-tour-popover-content-stepper-icon-size)}.me_19edfccb{height:4px;margin:0}