overleaf/services/web/frontend/stylesheets/app/base.less

221 lines
4.6 KiB
Text
Raw Normal View History

.system-messages {
list-style: none;
margin: 0;
padding: 0;
}
2014-07-24 08:24:08 -04:00
.system-message {
2018-03-28 07:05:47 -04:00
padding: (@line-height-computed / 4) (@line-height-computed / 2);
2018-03-28 09:46:07 -04:00
background-color: @sys-msg-background;
color: @sys-msg-color;
border-bottom: @sys-msg-border;
a {
color: @sidebar-link-color;
text-decoration: underline;
}
2018-03-28 09:46:07 -04:00
}
.system-message .close {
color: #fff;
2018-03-28 09:46:07 -04:00
opacity: 1;
text-shadow: none;
2014-07-24 08:24:08 -04:00
}
.light.close {
color: #000;
}
.dark.close {
color: #fff;
opacity: 1;
text-shadow: none;
}
.clickable {
cursor: pointer;
}
2014-07-07 08:43:36 -04:00
.img-circle {
display: inline-block;
overflow: hidden;
border-radius: 50%;
width: @line-height-computed * 4;
height: @line-height-computed * 4;
img {
margin-top: -10px;
}
2014-07-17 06:05:08 -04:00
}
@-webkit-keyframes bounce {
0%,
10%,
26%,
40%,
50% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
2014-07-17 06:05:08 -04:00
}
20%,
21% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
2014-07-17 06:05:08 -04:00
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
35% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
2014-07-17 06:05:08 -04:00
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
45% {
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0);
2014-07-17 06:05:08 -04:00
}
2014-07-17 06:05:08 -04:00
50% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
2014-07-17 06:05:08 -04:00
}
}
@keyframes bounce {
0%,
10%,
26%,
40%,
50% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
2014-07-17 06:05:08 -04:00
}
20%,
21% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
2014-07-17 06:05:08 -04:00
-webkit-transform: translate3d(0, -10px, 0);
-ms-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
35% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
2014-07-17 06:05:08 -04:00
-webkit-transform: translate3d(0, -5px, 0);
-ms-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
45% {
-webkit-transform: translate3d(0, -2px, 0);
-ms-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0);
2014-07-17 06:05:08 -04:00
}
50% {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
2014-07-17 06:05:08 -04:00
}
}
@keyframes pulse {
0% {
opacity: 0.7;
}
100% {
opacity: 0.9;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
2014-07-17 06:05:08 -04:00
.bounce {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom;
}
2017-12-11 08:01:21 -05:00
.grecaptcha-badge {
visibility: hidden;
height: 0 !important; // Prevent layout shift
}
.recaptcha-branding {
padding: @padding-sm @padding-sm 0 @padding-sm;
text-align: center;
font-size: @font-size-small;
}
.tos-agreement-notice {
text-align: center;
margin-top: (@line-height-computed / 4);
margin-bottom: 0;
font-size: @font-size-small;
&.tos-agreement-notice-homepage {
margin-top: (@line-height-computed / 2);
color: #fff;
& > a {
color: #fff;
text-decoration: underline;
}
}
}
.website-redesign {
.recaptcha-branding {
padding: @padding-sm 0;
text-align: left;
font-size: @font-size-extra-small;
& > a {
color: var(--green-50);
&:hover {
color: var(--green-60);
}
text-decoration: underline;
}
}
.light-design {
.recaptcha-branding {
padding: @padding-sm 0;
text-align: center; // This is different from above
font-size: @font-size-extra-small;
& > a {
color: var(--green-50);
&:hover {
color: var(--green-60);
}
text-decoration: underline;
}
}
}
}