overleaf/services/web/public/stylesheets/app/editor/feature-onboarding.less

97 lines
1.8 KiB
Text
Raw Normal View History

@feat-onboard-wrapper-width: 820px;
@feat-onboard-max-text-width: 750px;
2016-10-21 10:00:26 -04:00
2016-10-20 07:24:07 -04:00
.feat-onboard {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
2016-10-20 11:39:43 -04:00
background-color: rgba(0, 0, 0, .85);
color: #FFF;
text-align: center;
z-index: 102;
transition: left ease-in-out @left-menu-animation-duration;
&::before {
content: '';
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 0;
opacity: 0;
transition: opacity ease-in-out @left-menu-animation-duration, width ease-in-out @left-menu-animation-duration;
}
}
.feat-onboard-step2 {
left: @left-menu-width;
&::before {
content: '';
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: @left-menu-width;
opacity: 1;
background-image: linear-gradient(
180deg,
rgba(0,0,0,.85),
2016-10-26 06:12:34 -04:00
rgba(0,0,0,.85) 530px,
transparent 555px,
transparent 585px,
rgba(0,0,0,.85) 610px,
rgba(0,0,0,.85)
);
}
2016-10-20 11:39:43 -04:00
}
.feat-onboard-wrapper {
2016-10-21 10:00:26 -04:00
position: fixed;
top: 130px;
left: 50%;
width: @feat-onboard-wrapper-width;
margin-left: -@feat-onboard-wrapper-width / 2;
2016-10-31 16:17:58 -04:00
text-shadow: 0 0 70px rgba(255, 255, 255, 0.5);
2016-10-20 11:39:43 -04:00
}
.feat-onboard-title {
color: @brand-primary;
2016-10-21 10:00:26 -04:00
margin-bottom: 50px;
2016-10-31 16:17:58 -04:00
2016-10-20 11:39:43 -04:00
}
.feat-onboard-title-name {
color: #FFF;
font-weight: bold;
}
2016-10-20 11:39:43 -04:00
.feat-onboard-description {
max-width: @feat-onboard-max-text-width;
margin: 0 auto 40px;
2016-10-21 10:00:26 -04:00
padding: 0 80px;
2016-10-20 11:39:43 -04:00
}
.feat-onboard-description-name {
font-weight: bold;
}
.feat-onboard-video {
box-shadow: 0 0 70px rgba(255, 255, 255, 0.3);
}
2016-10-20 11:39:43 -04:00
.feat-onboard-adv-wrapper {
text-align: left;
2016-10-21 10:00:26 -04:00
margin-bottom: 40px;
2016-10-20 11:39:43 -04:00
}
.feat-onboard-adv-title {
color: #FFF;
font-size: 23px;
2016-10-20 11:39:43 -04:00
}
.feat-onboard-adv-title-highlight {
font-weight: bold;
2016-10-21 10:00:26 -04:00
}
.feat-onboard-btn-wrapper {
margin-bottom: 10px;
2016-10-31 16:17:58 -04:00
> .btn {
box-shadow: 0 0 70px rgba(255, 255, 255, 0.3);
}
2016-10-21 10:00:26 -04:00
}