@feat-onboard-width: 900px; .feat-onboard { position: fixed; top: 50px; bottom: 50px; left: 50%; width: @feat-onboard-width; margin-left: -(@feat-onboard-width / 2); display: flex; justify-content: center; align-items: baseline; background-color: rgba(0, 0, 0, .85); background-repeat: no-repeat; background-position-x: 0; color: #FFF; text-align: center; border-radius: 1em; z-index: 102; overflow: auto; } .feat-onboard-wrapper { padding: 30px 0; } .feat-onboard-title { color: #FFF; margin-bottom: 30px; } .feat-onboard-description { max-width: 35em; margin: 0 auto 5px; } .feat-onboard-highlight { font-weight: bold; white-space: nowrap; } .feat-onboard-adv-title { font-weight: bold; white-space: nowrap; color: #FFF; font-size: 23px; margin-top: 0; } .feat-onboard-tutorial-wrapper { display: flex; align-items: center; padding: 30px 0 15px; } .feat-onboard-video { width: 616px; margin: 0 30px; box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3); } .feat-onboard-nav-btn { border-radius: 1em; width: 2em; height: 2em; text-align: center; padding: 0; font-size: 1.3em; line-height: 1em; box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3); &[disabled] { opacity: 0.2; } &:focus, &:active:focus { outline: 0; box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3); } } a.feat-onboard-dismiss { position: absolute; top: 10px; right: 10px; width: 1em; height: 1em; line-height: 1em; font-size: 2.5em; color: #FFF; background-color: rgba(0,0,0, .25); opacity: 0.7; border-radius: 0.5em; transition: opacity .15s ease-in-out; &:hover, &:focus { text-decoration: none; color: #FFF; opacity: 1; } } .onboarding-autocompile { display: block; top: 10px; img { margin-bottom: 10px; border: 1px solid @gray-lighter; } &::before, &::after { content: ''; border-width: 11px; border-style: solid; border-color: transparent; top: 7px; display: block; position: absolute; } &.right::before { border-left-width: 0; border-right-color: rgba(0, 0, 0, .3); left: -11px; } &.right::after { border-left-width: 0; border-right-color: #f7f7f7; left: -9.5px; } &.left::before { border-right-width: 0; border-left-color: rgba(0, 0, 0, .3); right: -11px } &.left::after { border-right-width: 0; border-left-color: #f7f7f7; right: -9.5px; } } .onboarding-linksharing { display: block; top: 10px; &.popover { left: auto !important; } img { margin-bottom: 10px; border: 1px solid @gray-lighter; } &::before, &::after { content: ''; border-width: 11px; border-style: solid; border-color: transparent; top: 7px; display: block; position: absolute; } // Bottom &.bottom::before { border-top-width: 0; border-bottom-color: rgba(0, 0, 0, .3); top: -10px; right: 38px; } &.bottom::after { border-top-width: 0; border-bottom-color: #f7f7f7; top: -9.5px; right: 38px; } }