react-wizard-onboarding/dist/main.css

Pretty fancy onboarding wizard for your website, made in React.

.rwo-onboarding-step-spotlight-wrapper{position:absolute;top:0;left:0;height:100%;width:100%;scrollbar-gutter:stable}.rwo-onboarding-step-spotlight{position:absolute;z-index:10000;border-radius:6px;box-shadow:inset #fff 0 0 0 2px,#000 0 0 0 4000px;opacity:0}.rwo-onboarding-step-spotlight.is-visible{opacity:.5;transition:all .3s cubic-bezier(.6,.4,0,1),opacity .15s ease}.rwo-fixed-onboarding-wizard{position:fixed;display:flex;justify-content:center;align-items:center;flex-direction:column;flex-wrap:nowrap}.rwo-onboarding-modal{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;flex-wrap:nowrap;border-radius:6px;position:relative;width:96%;max-width:700px}.rwo-onboarding-modal__header,.rwo-onboarding-modal__footer{padding:16px}.rwo-onboarding-modal__header,.rwo-onboarding-modal__body,.rwo-onboarding-modal__footer{position:relative;width:100%}.rwo-onboarding-modal__header{display:flex;justify-content:space-between;align-items:center;flex-direction:row;flex-wrap:nowrap;border-bottom:1px solid}.rwo-onboarding-modal__header__left-section,.rwo-onboarding-modal__header__right-section{min-width:64px}.rwo-onboarding-modal__header__left-section{display:flex;justify-content:flex-start;align-items:center;flex-direction:row;flex-wrap:wrap}.rwo-onboarding-modal__header__right-section{display:flex;justify-content:flex-end;align-items:center;flex-direction:row;flex-wrap:wrap}.rwo-onboarding-modal__body{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;flex-wrap:nowrap}.rwo-onboarding-modal__body__image-container{display:flex;justify-content:center;align-items:center;flex-direction:column;flex-wrap:nowrap;max-height:256px;overflow:hidden}.rwo-onboarding-modal__body__image-container img{position:relative;width:100%}.rwo-onboarding-modal__body__text-container{color:inherit;display:flex;justify-content:center;align-items:center;flex-direction:column;flex-wrap:nowrap;padding:16px 32px;text-align:center;width:100%;letter-spacing:.3px;line-height:160%}.rwo-onboarding-modal__footer{display:flex;justify-content:center;align-items:center;flex-direction:column;flex-wrap:nowrap;border-top:1px solid}.rwo-onboarding-modal__footer .rwo-onboarding-modal-step-dot-container{display:flex;justify-content:center;align-items:center;flex-direction:row;flex-wrap:nowrap;gap:12.8px}.rwo-onboarding-modal__footer .rwo-onboarding-modal-step-dot-container .is-active{cursor:default;pointer-events:none}.rwo-onboarding-modal__footer .rwo-onboarding-modal-step-dot-container .rwo-onboarding-modal-step-dot{opacity:.6;cursor:pointer;max-width:8.8px;width:8.8px;height:8.8px;border-radius:50%;transition:opacity .15s ease-in-out,background-color .25s ease-in-out}.rwo-onboarding-modal__footer .rwo-onboarding-modal-step-dot-container .rwo-onboarding-modal-step-dot:hover{opacity:1}.rwo-sticky-onboarding-wizard{position:fixed}.rwo-sticky-onboarding-wizard .rwo-sticky-onboarding-modal{z-index:1;display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;flex-wrap:nowrap;border-radius:6px;position:relative;width:96%;max-width:200px;transition:transform .25s cubic-bezier(.6,.4,0,1)}.rwo-sticky-onboarding-wizard .rwo-sticky-onboarding-modal__header,.rwo-sticky-onboarding-wizard .rwo-sticky-onboarding-modal__footer{padding:16px}.rwo-sticky-onboarding-wizard .rwo-sticky-onboarding-modal__header,.rwo-sticky-onboarding-wizard .rwo-sticky-onboarding-modal__body,.rwo-sticky-onboarding-wizard .rwo-sticky-onboarding-modal__footer{position:relative;width:100%}.rwo-sticky-onboarding-wizard .rwo-sticky-onboarding-modal__header{display:flex;justify-content:space-between;align-items:center;flex-direction:row;flex-wrap:nowrap}.rwo-sticky-onboarding-wizard .rwo-sticky-onboarding-modal__header__left-section{display:flex;justify-content:flex-start;align-items:center;flex-direction:row;flex-wrap:wrap}.rwo-sticky-onboarding-wizard .rwo-sticky-onboarding-modal__header__right-section{display:flex;justify-content:flex-end;align-items:center;flex-direction:row;flex-wrap:wrap}.rwo-sticky-onboarding-wizard .rwo-sticky-onboarding-modal__body{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;flex-wrap:nowrap}.rwo-sticky-onboarding-wizard .rwo-sticky-onboarding-modal__body__text-container{color:inherit;display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;flex-wrap:nowrap;padding:0 16px;width:100%;max-height:512px;overflow-y:auto;letter-spacing:.3px;line-height:160%;font-size:.9rem}.rwo-sticky-onboarding-wizard .rwo-sticky-onboarding-modal__footer{display:flex;justify-content:space-between;align-items:center;flex-direction:row;flex-wrap:nowrap}.rwo-sticky-onboarding-wizard .Top--position-modal.hide-arrow:before,.rwo-sticky-onboarding-wizard .Bottom--position-modal.hide-arrow:before,.rwo-sticky-onboarding-wizard .Left--position-modal.hide-arrow:before,.rwo-sticky-onboarding-wizard .Right--position-modal.hide-arrow:before{display:none!important}.rwo-sticky-onboarding-wizard .Top--position-modal:before,.rwo-sticky-onboarding-wizard .Bottom--position-modal:before,.rwo-sticky-onboarding-wizard .Left--position-modal:before,.rwo-sticky-onboarding-wizard .Right--position-modal:before{position:absolute;width:0;height:0;content:""}.rwo-sticky-onboarding-wizard .Top--position-modal:before,.rwo-sticky-onboarding-wizard .Bottom--position-modal:before{left:calc(50% - 16px)}.rwo-sticky-onboarding-wizard .Left--position-modal:before,.rwo-sticky-onboarding-wizard .Right--position-modal:before{top:calc(50% - 16px)}.rwo-sticky-onboarding-wizard .Top--position-modal:before{bottom:-10.4px;border-left:16px solid transparent;border-top:19.2px solid;border-right:16px solid transparent}.rwo-sticky-onboarding-wizard .Bottom--position-modal:before{top:-10.4px;border-left:16px solid transparent;border-bottom:19.2px solid;border-right:16px solid transparent}.rwo-sticky-onboarding-wizard .Left--position-modal:before{right:-10.4px;border-top:16px solid transparent;border-left:19.2px solid;border-bottom:16px solid transparent}.rwo-sticky-onboarding-wizard .Right--position-modal:before{left:-10.4px;border-top:16px solid transparent;border-right:19.2px solid;border-bottom:16px solid transparent}.rwo-sticky-onboarding-wizard .Top--position-modal.light-modal:before{border-top-color:#fff}.rwo-sticky-onboarding-wizard .Bottom--position-modal.light-modal:before{border-bottom-color:#fff}.rwo-sticky-onboarding-wizard .Left--position-modal.light-modal:before{border-left-color:#fff}.rwo-sticky-onboarding-wizard .Right--position-modal.light-modal:before{border-right-color:#fff}.rwo-sticky-onboarding-wizard .Top--position-modal.dark-modal:before{border-top-color:#111}.rwo-sticky-onboarding-wizard .Bottom--position-modal.dark-modal:before{border-bottom-color:#111}.rwo-sticky-onboarding-wizard .Left--position-modal.dark-modal:before{border-left-color:#111}.rwo-sticky-onboarding-wizard .Right--position-modal.dark-modal:before{border-right-color:#111}.rwo-onboarding-wizard-wrapper{top:0;left:0;height:100%;width:100%;z-index:10001}.rwo-onboarding-wizard-wrapper *{box-sizing:border-box}.rwo-ghost-action-button{-moz-appearance:none;-webkit-appearance:none;-ms-progress-appearance:none;cursor:pointer;border:0;background:transparent;display:flex;justify-content:center;align-items:center;flex-direction:row;flex-wrap:nowrap;padding:8px;font-size:.9rem;font-weight:400;letter-spacing:.3px;border-radius:6px;transition:background-color .25s ease-out}.rwo-modal-title{font-size:1rem;font-weight:700;letter-spacing:.2px;line-height:100%}.rwo-modal-step-counter{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:row;flex-wrap:nowrap;white-space:nowrap;opacity:.64;margin-left:16px;font-size:.84rem;font-weight:700}.light-modal .rwo-onboarding-modal__header,.light-modal .rwo-onboarding-modal__footer{border-color:#11111124}.light-modal{background-color:#fff;color:#111}.light-modal .rwo-onboarding-modal-step-dot:not(.is-active){background-color:#11111124}.light-modal .rwo-ghost-action-button{color:#06c}.light-modal .rwo-ghost-action-button:hover{background:#11111112}.light-modal .is-active{background-color:#06c}.dark-modal .rwo-onboarding-modal__header,.dark-modal .rwo-onboarding-modal__footer{border-color:#ffffff3d}.dark-modal .rwo-onboarding-modal__body__text-container{color:#ffffffe0}.dark-modal{background-color:#111;border-color:#111;color:#fff}.dark-modal .rwo-onboarding-modal-step-dot:not(.is-active){background-color:#ffffff3d}.dark-modal .rwo-ghost-action-button{color:#2997ff}.dark-modal .rwo-ghost-action-button:hover{background:#ffffff24}.dark-modal .is-active{background-color:#2997ff}