github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2401 from overleaf/cmg-ns-pretty-less

Browse source 
Fix inconsistent use of tabs and spaces in less files

GitOrigin-RevId: c69667f0dc6bc70ea3623890e2b2b741e358d454
This commit is contained in:
nate stemen 2019-12-05 14:09:31 -05:00 committed by Copybot
parent a5757b447c
commit 2d9b089e16
112 changed files with 7806 additions and 7383 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
services/web/frontend/stylesheets/_ol_style_includes.less
View file

@ -1,12 +1,12 @@
@import "app/sidebar-v2-dash-pane.less";
@import "app/front-chat-widget.less";
@import "app/ol-chat.less";
@import "app/templates-v2.less";
@import "app/login-register.less";
@import "app/review-features-page.less";
@import "app/institution-hub.less";
@import "app/publisher-hub.less";
@import "app/admin-hub.less";
@import "app/import.less";
@import "components/lists.less";
@import "components/overbox.less";
@import 'app/sidebar-v2-dash-pane.less';
@import 'app/front-chat-widget.less';
@import 'app/ol-chat.less';
@import 'app/templates-v2.less';
@import 'app/login-register.less';
@import 'app/review-features-page.less';
@import 'app/institution-hub.less';
@import 'app/publisher-hub.less';
@import 'app/admin-hub.less';
@import 'app/import.less';
@import 'components/lists.less';
@import 'components/overbox.less';

140
services/web/frontend/stylesheets/_style_includes.less
View file

@ -1,97 +1,97 @@
@import url(https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import "core/mixins.less";
@import 'core/mixins.less';
// Reset
@import "core/normalize.less";
@import "core/print.less";
@import 'core/normalize.less';
@import 'core/print.less';
// Vendor CSS
@import (less) "vendor/pdfListView/TextLayer.css";
@import (less) "vendor/pdfListView/AnnotationsLayer.css";
@import (less) "vendor/pdfListView/HighlightsLayer.css";
@import (less) "vendor/select/select.css";
@import (less) "vendor/codemirror.css";
@import (less) "vendor/codemirror-dialog.css";
@import (less) "vendor/codemirror-show-hint.css";
@import (less) 'vendor/pdfListView/TextLayer.css';
@import (less) 'vendor/pdfListView/AnnotationsLayer.css';
@import (less) 'vendor/pdfListView/HighlightsLayer.css';
@import (less) 'vendor/select/select.css';
@import (less) 'vendor/codemirror.css';
@import (less) 'vendor/codemirror-dialog.css';
@import (less) 'vendor/codemirror-show-hint.css';
// Core CSS
@import "core/scaffolding.less";
@import "core/type.less";
@import "core/grid.less";
@import "core/accessibility.less";
@import 'core/scaffolding.less';
@import 'core/type.less';
@import 'core/grid.less';
@import 'core/accessibility.less';
// Components
@import "components/tables.less";
@import "components/forms.less";
@import "components/buttons.less";
@import "components/card.less";
@import 'components/tables.less';
@import 'components/forms.less';
@import 'components/buttons.less';
@import 'components/card.less';
//@import "components/code.less";
@import "components/component-animations.less";
@import "components/dropdowns.less";
@import "components/button-groups.less";
@import "components/input-groups.less";
@import "components/navs.less";
@import "components/navbar.less";
@import "components/footer.less";
@import 'components/component-animations.less';
@import 'components/dropdowns.less';
@import 'components/button-groups.less';
@import 'components/input-groups.less';
@import 'components/navs.less';
@import 'components/navbar.less';
@import 'components/footer.less';
//@import "components/breadcrumbs.less";
//@import "components/pagination.less";
@import "components/pager.less";
@import "components/labels.less";
@import 'components/pager.less';
@import 'components/labels.less';
//@import "components/badges.less";
//@import "components/jumbotron.less";
@import "components/thumbnails.less";
@import "components/alerts.less";
@import "components/progress-bars.less";
@import 'components/thumbnails.less';
@import 'components/alerts.less';
@import 'components/progress-bars.less';
// @import "components/media.less";
// @import "components/list-group.less";
// @import "components/panels.less";
// @import "components/wells.less";
@import "components/close.less";
@import "components/fineupload.less";
@import "components/hover.less";
@import "components/ui-select.less";
@import "components/input-suggestions.less";
@import "components/nvd3.less";
@import "components/nvd3_override.less";
@import 'components/close.less';
@import 'components/fineupload.less';
@import 'components/hover.less';
@import 'components/ui-select.less';
@import 'components/input-suggestions.less';
@import 'components/nvd3.less';
@import 'components/nvd3_override.less';
// Components w/ JavaScript
@import "components/modals.less";
@import "components/tooltip.less";
@import "components/popovers.less";
@import "components/carousel.less";
@import "components/daterange-picker";
@import 'components/modals.less';
@import 'components/tooltip.less';
@import 'components/popovers.less';
@import 'components/carousel.less';
@import 'components/daterange-picker';
// ngTagsInput
@import "components/tags-input.less";
@import 'components/tags-input.less';
// Utility classes
@import "core/utilities.less";
@import "core/responsive-utilities.less";
@import 'core/utilities.less';
@import 'core/responsive-utilities.less';
// ShareLaTeX app classes
@import "app/base.less";
@import "app/account-settings.less";
@import "app/beta-program.less";
@import "app/about-page.less";
@import "app/project-list.less";
@import "app/editor.less";
@import "app/homepage.less";
@import "app/plans.less";
@import "app/recurly.less";
@import "app/bonus.less";
@import "app/register.less";
@import "app/blog.less";
@import "app/features.less";
@import "app/templates.less";
@import "app/wiki.less";
@import "app/translations.less";
@import "app/contact-us.less";
@import "app/subscription.less";
@import "app/sprites.less";
@import "app/invite.less";
@import "app/error-pages.less";
@import "app/v1-badge.less";
@import "app/editor/history-v2.less";
@import "app/metrics.less";
@import "app/open-in-overleaf.less";
@import 'app/base.less';
@import 'app/account-settings.less';
@import 'app/beta-program.less';
@import 'app/about-page.less';
@import 'app/project-list.less';
@import 'app/editor.less';
@import 'app/homepage.less';
@import 'app/plans.less';
@import 'app/recurly.less';
@import 'app/bonus.less';
@import 'app/register.less';
@import 'app/blog.less';
@import 'app/features.less';
@import 'app/templates.less';
@import 'app/wiki.less';
@import 'app/translations.less';
@import 'app/contact-us.less';
@import 'app/subscription.less';
@import 'app/sprites.less';
@import 'app/invite.less';
@import 'app/error-pages.less';
@import 'app/v1-badge.less';
@import 'app/editor/history-v2.less';
@import 'app/metrics.less';
@import 'app/open-in-overleaf.less';

15
services/web/frontend/stylesheets/app/about-page.less
View file

@ -1,8 +1,9 @@
.team-profile {
clear: both;
.img-container {
float: left;
overflow: hidden;
margin: (@line-height-computed / 4) @line-height-computed @line-height-computed (@line-height-computed / 2);
}
}
clear: both;
.img-container {
float: left;
overflow: hidden;
margin: (@line-height-computed / 4) @line-height-computed
@line-height-computed (@line-height-computed / 2);
}
}

2
services/web/frontend/stylesheets/app/about.less
View file

@ -30,4 +30,4 @@
}
}
}
}
}

41
services/web/frontend/stylesheets/app/admin-hub.less
View file

@ -5,34 +5,34 @@
width: @size;
height: @size;
text-align: center;
padding-top: @size/6.4;
padding-top: @size / 6.4;
img {
height: @size - @size/3.2;
height: @size - @size / 3.2;
}
}
.hub-header {
h2 {
display: inline-block;
}
a {
color: @ol-dark-green;
}
i {
font-size: 30px;
}
.dropdown {
margin-right: 10px;
}
h2 {
display: inline-block;
}
a {
color: @ol-dark-green;
}
i {
font-size: 30px;
}
.dropdown {
margin-right: 10px;
}
}
.admin-item {
position: relative;
margin-bottom: 60px;
.section-title {
text-transform: capitalize;
text-transform: capitalize;
}
.alert-danger {
color: @ol-red;
color: @ol-red;
}
}
.hidden-chart-section {
@ -56,7 +56,8 @@
line-height: 40px;
color: @accent-color-secondary;
}
.hub-big-number, .hub-number-label {
.hub-big-number,
.hub-number-label {
display: block;
}
.hub-metric-link {
@ -64,10 +65,10 @@
top: 9px;
right: 0;
a {
color: @accent-color-secondary;
color: @accent-color-secondary;
}
i {
margin-right: 5px;
margin-right: 5px;
}
}
.custom-donut-container {
@ -84,7 +85,7 @@
}
.nv-legend-text {
font-family: @font-family-sans-serif;
font-family: @font-family-sans-serif;
font-size: 14px;
}
}

96
services/web/frontend/stylesheets/app/base.less
View file

@ -6,94 +6,104 @@
}
.system-message .close when (@is-overleaf = true) {
color: #FFF;
color: #fff;
opacity: 1;
text-shadow: none;
}
.clickable {
cursor: pointer;
cursor: pointer;
}
.img-circle {
display: inline-block;
overflow: hidden;
border-radius: 50%;
width: @line-height-computed * 4;
height: @line-height-computed * 4;
img {
margin-top: -10px;
}
display: inline-block;
overflow: hidden;
border-radius: 50%;
width: @line-height-computed * 4;
height: @line-height-computed * 4;
img {
margin-top: -10px;
}
}
@-webkit-keyframes bounce {
0%, 10%, 26%, 40%, 50% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
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);
}
20%, 21% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
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);
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
35% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-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);
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
45% {
-webkit-transform: translate3d(0,-2px,0);
transform: translate3d(0,-2px,0);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0);
}
50% {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounce {
0%, 10%, 26%, 40%, 50% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
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);
}
20%, 21% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
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);
-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.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-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);
-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);
-webkit-transform: translate3d(0, -2px, 0);
-ms-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0);
}
50% {
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@ -113,4 +123,4 @@
.grecaptcha-badge {
display: none;
}
}

28
services/web/frontend/stylesheets/app/beta-program.less
View file

@ -1,21 +1,21 @@
.beta-opt-in-wrapper {
min-height: 400px;
min-height: 400px;
}
.beta-opt-in {
.form-group {
margin-top: 15px;
}
.form-group {
margin-top: 15px;
}
}
.beta-feature-badge {
&:extend(.label);
&:extend(.label-warning);
vertical-align: 11%;
padding-bottom: 4px;
padding-top: 2px;
margin-left: 12px;
&:before {
content: "β";
}
}
&:extend(.label);
&:extend(.label-warning);
vertical-align: 11%;
padding-bottom: 4px;
padding-top: 2px;
margin-left: 12px;
&:before {
content: 'β';
}
}

2
services/web/frontend/stylesheets/app/blog-posts.less
View file

@ -57,4 +57,4 @@
font-size: small;
}
}
}
}

102
services/web/frontend/stylesheets/app/blog.less
View file

@ -1,59 +1,59 @@
.author_details {
font-size: .8em;
color: @gray;
font-size: 0.8em;
color: @gray;
}
.post {
img {
border-radius: 3px;
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
max-width: 100%;
height: auto;
}
img {
border-radius: 3px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 100%;
height: auto;
}
}
.blog {
iframe {
width: 100%;
}
> .page-header {
h1 {
margin: 0;
}
padding: 0;
margin: 0;
border: none;
}
.post {
.page-header {
h2 {
margin-top: 0;
}
}
}
.page-header {
h1 {
a {
color: @text-color;
}
.small {
color: @gray-dark;
font-size: 16px;
display: inline-block;
float: right;
margin-top: 22px;
}
}
}
.blurb {
ul {
li {
margin-bottom: @line-height-computed / 4;
}
}
}
iframe {
width: 100%;
}
> .page-header {
h1 {
margin: 0;
}
padding: 0;
margin: 0;
border: none;
}
.post {
.page-header {
h2 {
margin-top: 0;
}
}
}
.page-header {
h1 {
a {
color: @text-color;
}
.small {
color: @gray-dark;
font-size: 16px;
display: inline-block;
float: right;
margin-top: 22px;
}
}
}
.blurb {
ul {
li {
margin-bottom: @line-height-computed / 4;
}
}
}
}

225
services/web/frontend/stylesheets/app/bonus.less
View file

@ -1,127 +1,124 @@
@twitter-color : #1DA1F2;
@facebook-color : #3B5998;
@email-color : #808B9A;
@twitter-color : #1DA1F2;
@facebook-color : #3B5998;
@email-color : #808B9A;
@link-to-us-color : #406EB3;
.bonus {
margin-top: 15px;
.page-header h1 {
text-align: center;
}
margin-top: 15px;
.page-header h1 {
text-align: center;
}
h2 {
text-align: center;
font-size: 20px;
line-height: 28px;
margin-bottom: @line-height-computed;
margin-top: 0;
&.direct-link {
margin-top: @line-height-computed;
}
}
h2 {
text-align: center;
font-size: 20px;
line-height: 28px;
margin-bottom: @line-height-computed;
margin-top: 0;
&.direct-link {
margin-top: @line-height-computed;
}
}
.bonus-banner {
.bonus-top {
border-bottom: 1px solid lighten(@blue, 40%);
}
.title {
a {
display: flex;
align-items: center;
font-size: 18px;
padding: 20px;
background-color: white;
border-bottom: 1px solid lighten(@blue, 40%);
color: @blue;
> i {
margin-right: 10px;
}
&:hover,
&:focus {
background-color: lighten(@blue, 45%);
text-decoration: none;
}
.bonus-banner {
.bonus-top {
border-bottom: 1px solid lighten(@blue, 40%);
}
.title {
a {
display: flex;
align-items: center;
font-size: 18px;
padding: 20px;
background-color: white;
border-bottom: 1px solid lighten(@blue, 40%);
color: @blue;
> i {
margin-right: 10px;
}
&:hover,
&:focus {
background-color: lighten(@blue, 45%);
text-decoration: none;
}
}
}
a.twitter > i {
color: @twitter-color;
}
a.facebook > i {
color: @facebook-color;
}
a.email > i {
color: @email-color;
}
a.link > i {
color: @link-to-us-color;
}
h2.direct-link {
}
}
}
}
a.twitter > i {
color: @twitter-color;
}
a.facebook > i {
color: @facebook-color;
}
a.email > i {
color: @email-color;
}
a.link > i {
color: @link-to-us-color;
}
h2.direct-link {
}
}
p.thanks {
font-size: 18px;
line-height: 28px;
margin-top: 10px;
text-align: center;
}
p.thanks {
font-size: 18px;
line-height: 28px;
margin-top: 10px;
text-align: center;
}
.number {
position: absolute;
margin-left: -13px;
width: 26px;
padding: 3px 0;
text-align: center;
background-color: #ddd;
&.active {
background-color: @blue;
color: white;
}
border-radius: 3px;
}
.number {
position: absolute;
margin-left: -13px;
width: 26px;
padding: 3px 0;
text-align: center;
background-color: #ddd;
&.active {
background-color: @blue;
color: white;
}
border-radius: 3px;
}
.progress {
margin-top: @line-height-computed / 2;
margin-left: -15px;
margin-right: -15px;
height: 30px;
}
.perk {
position: absolute;
background-color: #ddd;
border-radius: 5px;
text-align: center;
padding: 5px 5px;
width: 110px;
margin-left: -50px;
font-size: 14px;
&:before {
border-bottom: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: '';
position: absolute;
left: 42px;
top: -8px;
}
&.active {
color: white;
background-color: @blue;
&:before {
border-bottom: 8px solid @blue;
}
}
}
.progress {
margin-top: @line-height-computed / 2;
margin-left: -15px;
margin-right: -15px;
height: 30px;
}
.perk {
position: absolute;
background-color: #ddd;
border-radius: 5px;
text-align: center;
padding: 5px 5px;
width: 110px;
margin-left: -50px;
font-size: 14px;
&:before {
border-bottom: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: '';
position: absolute;
left: 42px;
top: -8px;
}
&.active {
color: white;
background-color: @blue;
&:before {
border-bottom: 8px solid @blue;
}
}
}
}
.link-modal {
text-align: center;
textarea {
width: 95%;
margin-bottom: 0;
}
text-align: center;
textarea {
width: 95%;
margin-bottom: 0;
}
}

30
services/web/frontend/stylesheets/app/cms-page.less
View file

@ -96,7 +96,8 @@
table {
background: white;
max-width: none;
th, td {
th,
td {
border: 1px solid @gray-lighter;
padding: @padding-sm;
text-align: center;
@ -104,21 +105,25 @@
}
}
}
.table-styled, .features-table {
.fa-check-square, .fa-check {
.table-styled,
.features-table {
.fa-check-square,
.fa-check {
color: @ol-green;
}
}
.features-table {
background: white;
max-width: none;
th, td {
th,
td {
border: 1px solid @gray-lighter;
hyphens: auto;
padding: @padding-sm;
text-align: center;
}
th, td {
th,
td {
width: 20%;
}
.btn {
@ -127,7 +132,8 @@
word-wrap: break-word;
}
&.left-align-first-col {
td, th {
td,
th {
text-align: left;
}
td + td,
@ -139,7 +145,8 @@
display: none;
}
@media screen and (max-width: @screen-xs-max) {
tbody, thead {
tbody,
thead {
display: block;
}
tr {
@ -148,14 +155,15 @@
justify-content: space-around;
}
td, th {
td,
th {
display: block;
width: 25%;
}
tr:first-child {
th {
width: 50%;
}
}
th:first-child {
width: 100%;
}
@ -166,7 +174,7 @@
background: #efefef;
width: 100%;
}
.hidden-row-xs {
display: none;
}
@ -240,4 +248,4 @@
height: auto;
max-width: 100%;
}
}
}

93
services/web/frontend/stylesheets/app/contact-us.less
View file

@ -1,59 +1,58 @@
.contact-us-modal {
textarea {
height: 120px;
}
textarea {
height: 120px;
}
}
.contact-suggestions {
margin: 0 -20px 10px;
padding: 10px 0;
color: @gray-dark;
background-color: @gray-lightest;
border-top: solid 1px @gray-lighter;
border-bottom: solid 1px @gray-lighter;
font-size: 0.9rem;
margin: 0 -20px 10px;
padding: 10px 0;
color: @gray-dark;
background-color: @gray-lightest;
border-top: solid 1px @gray-lighter;
border-bottom: solid 1px @gray-lighter;
font-size: 0.9rem;
}
.contact-suggestion-label {
margin-bottom: 10px;
padding: 0 20px;
}
.contact-suggestion-label {
margin-bottom: 10px;
padding: 0 20px;
}
.contact-suggestion-list {
.list-unstyled();
background-color: #FFF;
border-top: solid 1px @gray-lighter;
border-bottom: solid 1px @gray-lighter;
margin: 0;
.contact-suggestion-list {
.list-unstyled();
background-color: #fff;
border-top: solid 1px @gray-lighter;
border-bottom: solid 1px @gray-lighter;
margin: 0;
li:last-child .contact-suggestion-list-item {
border-bottom: none;
}
}
li:last-child .contact-suggestion-list-item {
border-bottom: none;
}
}
.contact-suggestion-list-item {
display: table;
width: 100%;
color: @dropdown-link-color;
padding: 10px 20px;
border-bottom: solid 1px lighten(@gray-lighter, 10%);
cursor: pointer;
.contact-suggestion-list-item {
display: table;
width: 100%;
color: @dropdown-link-color;
padding: 10px 20px;
border-bottom: solid 1px lighten(@gray-lighter, 10%);
cursor: pointer;
&:hover,
&:focus {
text-decoration: none;
color: @dropdown-link-hover-color!important;
background-color: @dropdown-link-hover-bg;
&:hover,
&:focus {
text-decoration: none;
color: @dropdown-link-hover-color!important;
background-color: @dropdown-link-hover-bg;
.fa {
color: inherit;
}
}
.fa {
color: inherit;
}
}
.fa {
display: table-cell;
text-align: right;
color: @gray-lighter;
}
}
.fa {
display: table-cell;
text-align: right;
color: @gray-lighter;
}
}

8
services/web/frontend/stylesheets/app/content_page.less
View file

@ -28,7 +28,7 @@
*/
section {
padding: @line-height-computed (@grid-gutter-width / 2);
&.color-block {
&.green-dark {
background-color: @ol-dark-green;
@ -47,7 +47,7 @@
margin: 0 auto;
/* match .col-sm-10 */
/* @grid-gutter-width is used for margins */
max-width: (@screen-sm * (10/12)) - @grid-gutter-width;
max-width: (@screen-sm * (10/12)) - @grid-gutter-width;
@media (min-width: @screen-md-min) {
max-width: (@screen-md * (10/12)) - @grid-gutter-width;
}
@ -86,10 +86,10 @@
/*
lists
*/
.list-without-style {
list-style: none;
margin: 0;
padding: 0;
}
}
}

1011
services/web/frontend/stylesheets/app/editor.less
View file

File diff suppressed because it is too large Load diff

99
services/web/frontend/stylesheets/app/editor/binary-file.less
View file

@ -1,52 +1,51 @@
.binary-file {
padding: @line-height-computed / 2;
background-color: @gray-lightest;
text-align: center;
overflow: auto;
img {
max-width: 100%;
max-height: 90%;
display: block;
margin: auto;
margin-top: @line-height-computed / 2;
border: 1px solid @gray;
.box-shadow(0 2px 3px @gray;);
background-color: white;
}
.img-preview {
background: url('/img/spinner.gif') no-repeat;
min-width: 200px;
min-height: 200px;
}
p.no-preview {
margin-top: @line-height-computed / 2;
font-size: 24px;
color: @gray;
}
.text-loading {
margin-top: @line-height-computed / 2;
font-size: 24px;
color: @gray;
}
.text-preview {
margin-top: @line-height-computed / 2;
.scroll-container {
background-color: white;
font-size: 0.8em;
line-height: 1.1em;
overflow: auto;
border: 1px solid @gray-lighter;
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
text-align: left;
white-space: pre;
font-family: monospace;
}
}
.linked-file-icon {
color: @blue
}
padding: @line-height-computed / 2;
background-color: @gray-lightest;
text-align: center;
overflow: auto;
img {
max-width: 100%;
max-height: 90%;
display: block;
margin: auto;
margin-top: @line-height-computed / 2;
border: 1px solid @gray;
.box-shadow(0 2px 3px @gray;);
background-color: white;
}
.img-preview {
background: url('/img/spinner.gif') no-repeat;
min-width: 200px;
min-height: 200px;
}
p.no-preview {
margin-top: @line-height-computed / 2;
font-size: 24px;
color: @gray;
}
.text-loading {
margin-top: @line-height-computed / 2;
font-size: 24px;
color: @gray;
}
.text-preview {
margin-top: @line-height-computed / 2;
.scroll-container {
background-color: white;
font-size: 0.8em;
line-height: 1.1em;
overflow: auto;
border: 1px solid @gray-lighter;
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
text-align: left;
white-space: pre;
font-family: monospace;
}
}
.linked-file-icon {
color: @blue;
}
}

290
services/web/frontend/stylesheets/app/editor/chat.less
View file

@ -1,163 +1,163 @@
@new-message-height: 80px;
#chat-wrapper {
> .ui-layout-resizer > .ui-layout-toggler {
display: none !important;
}
> .ui-layout-resizer > .ui-layout-toggler {
display: none !important;
}
}
.chat {
.loading {
font-family: @font-family-serif;
padding: @line-height-computed / 2;
text-align: center;
}
.no-messages {
padding: @line-height-computed / 2;
}
.first-message {
position: absolute;
bottom: 0;
width: 100%;
padding: @line-height-computed / 2;
}
.messages {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: @new-message-height;
overflow-x: hidden;
background-color: @chat-bg;
.loading {
font-family: @font-family-serif;
padding: @line-height-computed / 2;
text-align: center;
}
li.message {
margin: @line-height-computed / 2;
.date {
font-size: 12px;
color: @chat-message-date-color;
margin-bottom: @line-height-computed / 2;
text-align: right;
}
.date when (@is-overleaf = false) {
border-bottom: 1px solid @gray-lightest;
text-align: center;
}
.avatar {
margin-top: 14px;
float: left;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
img {
width: 100%;
}
}
.message-wrapper {
margin-left: 50px + @line-height-computed/2;
.no-messages {
padding: @line-height-computed / 2;
}
.name {
font-size: 12px;
color: @chat-message-name-color;
margin-bottom: 4px;
min-height: 16px;
}
.message {
border-left: 3px solid transparent;
font-size: 14px;
box-shadow: @chat-message-box-shadow;
border-radius: @chat-message-border-radius;
position: relative;
.message-content {
padding: @chat-message-padding;
overflow-x: auto;
color: @chat-message-color;
font-weight: @chat-message-weight;
}
.first-message {
position: absolute;
bottom: 0;
width: 100%;
padding: @line-height-computed / 2;
}
.arrow {
right: 100%;
top: @line-height-computed / 4;
border: solid;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-width: 10px;
}
}
p {
margin-bottom: @line-height-computed / 4;
&:last-child {
margin-bottom: 0;
}
}
}
.messages {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: @new-message-height;
overflow-x: hidden;
background-color: @chat-bg;
&:not(.self) {
.message {
.arrow {
border-left-color: transparent !important;
}
}
}
li.message {
margin: @line-height-computed / 2;
.date {
font-size: 12px;
color: @chat-message-date-color;
margin-bottom: @line-height-computed / 2;
text-align: right;
}
.date when (@is-overleaf = false) {
border-bottom: 1px solid @gray-lightest;
text-align: center;
}
.avatar {
margin-top: 14px;
float: left;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
img {
width: 100%;
}
}
.message-wrapper {
margin-left: 50px + @line-height-computed / 2;
&.self {
margin-top: @line-height-computed;
.avatar {
display: none;
}
.message-wrapper .message {
border-left: none;
border-right: 3px solid transparent;
.arrow {
left: 100%;
right: auto;
border-right-color: transparent !important;
}
}
}
}
}
.name {
font-size: 12px;
color: @chat-message-name-color;
margin-bottom: 4px;
min-height: 16px;
}
.message {
border-left: 3px solid transparent;
font-size: 14px;
box-shadow: @chat-message-box-shadow;
border-radius: @chat-message-border-radius;
position: relative;
.new-message {
.full-size;
top: auto;
height: @new-message-height;
background-color: @chat-new-message-bg;
padding: @line-height-computed / 4;
border-top: 1px solid @chat-new-message-border-color;
textarea {
overflow: auto;
resize: none;
border-radius: @border-radius-base;
border: 1px solid @chat-new-message-border-color;
height: 100%;
width: 100%;
color: @chat-new-message-textarea-color;
font-size: 14px;
padding: @line-height-computed / 4;
background-color: @chat-new-message-textarea-bg;
}
}
.message-content {
padding: @chat-message-padding;
overflow-x: auto;
color: @chat-message-color;
font-weight: @chat-message-weight;
}
.arrow {
right: 100%;
top: @line-height-computed / 4;
border: solid;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-width: 10px;
}
}
p {
margin-bottom: @line-height-computed / 4;
&:last-child {
margin-bottom: 0;
}
}
}
&:not(.self) {
.message {
.arrow {
border-left-color: transparent !important;
}
}
}
&.self {
margin-top: @line-height-computed;
.avatar {
display: none;
}
.message-wrapper .message {
border-left: none;
border-right: 3px solid transparent;
.arrow {
left: 100%;
right: auto;
border-right-color: transparent !important;
}
}
}
}
}
.new-message {
.full-size;
top: auto;
height: @new-message-height;
background-color: @chat-new-message-bg;
padding: @line-height-computed / 4;
border-top: 1px solid @chat-new-message-border-color;
textarea {
overflow: auto;
resize: none;
border-radius: @border-radius-base;
border: 1px solid @chat-new-message-border-color;
height: 100%;
width: 100%;
color: @chat-new-message-textarea-color;
font-size: 14px;
padding: @line-height-computed / 4;
background-color: @chat-new-message-textarea-bg;
}
}
}
.break-word {
word-break: break-all;
word-break: break-all;
}
.editor-dark when (@is-overleaf = false) {
.chat {
.new-message {
background-color: lighten(@editor-dark-background-color, 10%);
border-color: @editor-dark-toolbar-border-color;
}
}
}
.chat {
.new-message {
background-color: lighten(@editor-dark-background-color, 10%);
border-color: @editor-dark-toolbar-border-color;
}
}
}

602
services/web/frontend/stylesheets/app/editor/file-tree.less
View file

@ -1,332 +1,338 @@
.fake-full-width-bg(@bg-color) {
&::before {
content: '\00a0';
position: absolute;
width: 100%;
right: 100%;
background-color: @bg-color;
}
&::before {
content: '\00a0';
position: absolute;
width: 100%;
right: 100%;
background-color: @bg-color;
}
}
.file-tree {
.toolbar.toolbar-filetree {
.toolbar-small-mixin;
.toolbar-alt-mixin;
padding: 0 5px;
}
.file-tree-inner {
position: absolute;
top: 32px;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
background-color: @file-tree-bg;
.toolbar.toolbar-filetree {
.toolbar-small-mixin;
.toolbar-alt-mixin;
padding: 0 5px;
}
&.no-toolbar {
top: 0;
}
}
.file-tree-inner {
position: absolute;
top: 32px;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
background-color: @file-tree-bg;
// TODO; Consolidate with "Project files" in Overleaf
h3 {
font-size: 1rem;
border-bottom: 1px solid @gray;
padding-bottom: (@line-height-computed / 4);
margin: (@line-height-computed / 2);
}
&.no-toolbar {
top: 0;
}
}
ul.file-tree-list when (@is-overleaf = false) {
font-size: 0.8rem;
padding: (@line-height-computed / 4) 0;
}
// TODO; Consolidate with "Project files" in Overleaf
h3 {
font-size: 1rem;
border-bottom: 1px solid @gray;
padding-bottom: (@line-height-computed / 4);
margin: (@line-height-computed / 2);
}
&-history {
.entity-name {
padding-left: 6px;
&.deleted {
text-decoration: line-through;
}
}
.loading {
padding-left: 6px;
color: #FFF;
ul.file-tree-list when (@is-overleaf = false) {
font-size: 0.8rem;
padding: (@line-height-computed / 4) 0;
}
i.fa {
color: #FFF;
}
}
}
&-history {
.entity-name {
padding-left: 6px;
&.deleted {
text-decoration: line-through;
}
}
.loading {
padding-left: 6px;
color: #fff;
li .entity-name.droppable-hover when (@is-overleaf = true) {
font-weight: bold;
background-color: @file-tree-item-hover-bg;
.fake-full-width-bg(@file-tree-item-hover-bg);
}
li .entity-name.droppable-hover when (@is-overleaf-light = true) {
// color: @file-tree-item-selected-color;
}
i.fa {
color: #fff;
}
}
}
ul.droppable-hover li div.entity-name:hover when (@is-overleaf = true) {
background-color: transparent;
.fake-full-width-bg(transparent);
&.droppable-hover {
background-color: @file-tree-item-hover-bg;
.fake-full-width-bg(@file-tree-item-hover-bg);
}
}
li .entity-name.droppable-hover when (@is-overleaf = true) {
font-weight: bold;
background-color: @file-tree-item-hover-bg;
.fake-full-width-bg(@file-tree-item-hover-bg);
}
li .entity-name.droppable-hover when (@is-overleaf-light = true) {
// color: @file-tree-item-selected-color;
}
ul.file-tree-list {
margin: 0;
overflow-x: hidden;
height: 100%;
ul.droppable-hover li div.entity-name:hover when (@is-overleaf = true) {
background-color: transparent;
.fake-full-width-bg(transparent);
&.droppable-hover {
background-color: @file-tree-item-hover-bg;
.fake-full-width-bg(@file-tree-item-hover-bg);
}
}
ul {
margin-left: (@line-height-computed / 2);
}
ul.file-tree-list {
margin: 0;
overflow-x: hidden;
height: 100%;
li {
line-height: @file-tree-line-height;
position: relative;
ul {
margin-left: (@line-height-computed / 2);
}
.entity {
user-select: none;
}
li {
line-height: @file-tree-line-height;
position: relative;
.entity-name {
color: @file-tree-item-color;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background-color: @file-tree-item-hover-bg;
}
&:hover when (@is-overleaf = true) {
// When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
// element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
// and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
// the empty space.
.fake-full-width-bg(@file-tree-item-hover-bg);
}
input {
line-height: 1.6;
}
&.droppable-hover when (@is-overleaf = false) {
background-color: fade(@file-tree-droppable-bg-color, 60%);
}
}
.entity {
user-select: none;
}
i.fa {
color: @file-tree-item-icon-color;
font-size: 14px;
&.linked-file-highlight {
&when (@is-overleaf = true) {
color: white;
}
&when (@is-overleaf = false) {
color: @blue;
}
position: relative;
top: 4px;
left: -8px;
font-size: 12px;
}
}
.entity-name {
color: @file-tree-item-color;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background-color: @file-tree-item-hover-bg;
}
&:hover when (@is-overleaf = true) {
// When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
// element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
// and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
// the empty space.
.fake-full-width-bg(@file-tree-item-hover-bg);
}
input {
line-height: 1.6;
}
&.droppable-hover when (@is-overleaf = false) {
background-color: fade(@file-tree-droppable-bg-color, 60%);
}
}
i.fa-folder-open, i.fa-folder {
color: @file-tree-item-folder-color;
font-size: 14px;
}
i.fa {
color: @file-tree-item-icon-color;
font-size: 14px;
&.linked-file-highlight {
&when (@is-overleaf = true) {
color: white;
}
&when (@is-overleaf = false) {
color: @blue;
}
position: relative;
top: 4px;
left: -8px;
font-size: 12px;
}
}
i.toggle {
width: 24px;
padding: 6px;
font-size: 0.7rem;
color: @file-tree-item-toggle-color;
}
&.multi-selected {
> .entity > .entity-name when (@is-overleaf = false) {
background-color: @file-tree-multiselect-bg;
&:hover {
background-color: @file-tree-multiselect-hover-bg;
}
}
> .entity when (@is-overleaf = true) {
> .entity-name {
> div > i.fa,
> i.fa,
.entity-menu-toggle i.fa {
color: #FFF;
}
> i.fa i.linked-file-highlight {
color: @blue;
}
color: #FFF;
font-weight: bold;
background-color: @file-tree-multiselect-bg;
.fake-full-width-bg(@file-tree-multiselect-bg);
&:hover {
background-color: @file-tree-multiselect-hover-bg;
.fake-full-width-bg(@file-tree-multiselect-hover-bg);
}
}
}
}
i.fa-folder-open,
i.fa-folder {
color: @file-tree-item-folder-color;
font-size: 14px;
}
.dropdown {
position: absolute;
right: 0;
> a {
padding: 0 12px;
}
}
.rename-input {
display: block;
position: absolute;
top: 1px;
left: 44px;
right: 32px;
color: @file-tree-item-input-color;
input {
width: 100%;
}
}
> .entity > .entity-name {
.entity-menu-toggle {
display: none;
}
}
}
}
&:not(.multi-selected) {
ul.file-tree-list li.selected {
> .entity > .entity-name when (@is-overleaf = false) {
color: @link-color;
border-right: 4px solid @link-color;
font-weight: bold;
padding-right: 32px;
i.fa-folder-open, i.fa {
color: @link-color;
}
.entity-menu-toggle {
display: inline;
}
}
i.toggle {
width: 24px;
padding: 6px;
font-size: 0.7rem;
color: @file-tree-item-toggle-color;
}
> .entity when (@is-overleaf = true) {
> .entity-name {
color: @file-tree-item-selected-color;
> div > i.fa,
> i.fa,
.entity-menu-toggle i.fa {
color: @file-tree-item-selected-color;
}
> i.fa i.linked-file-highlight {
color: @blue;
}
background-color: @file-tree-item-selected-bg;
font-weight: bold;
padding-right: 32px;
.fake-full-width-bg(@file-tree-item-selected-bg);
&.multi-selected {
> .entity > .entity-name when (@is-overleaf = false) {
background-color: @file-tree-multiselect-bg;
&:hover {
background-color: @file-tree-multiselect-hover-bg;
}
}
> .entity when (@is-overleaf = true) {
> .entity-name {
> div > i.fa,
> i.fa,
.entity-menu-toggle i.fa {
color: #fff;
}
> i.fa i.linked-file-highlight {
color: @blue;
}
color: #fff;
font-weight: bold;
background-color: @file-tree-multiselect-bg;
.fake-full-width-bg(@file-tree-multiselect-bg);
&:hover {
background-color: @file-tree-multiselect-hover-bg;
.fake-full-width-bg(@file-tree-multiselect-hover-bg);
}
}
}
}
.entity-menu-toggle {
display: inline;
}
}
}
}
}
.dropdown {
position: absolute;
right: 0;
> a {
padding: 0 12px;
}
}
ul.droppable-hover.file-tree-list when (@is-overleaf = false) {
background-color: fade(@file-tree-droppable-bg-color, 60%);
}
.rename-input {
display: block;
position: absolute;
top: 1px;
left: 44px;
right: 32px;
color: @file-tree-item-input-color;
input {
width: 100%;
}
}
.ui-draggable-dragging when (@is-overleaf = true) {
background-color: fade(@file-tree-item-selected-bg, 60%);
color: @file-tree-item-selected-color;
width: 75%;
padding-left: @line-height-computed;
}
> .entity > .entity-name {
.entity-menu-toggle {
display: none;
}
}
}
}
&:not(.multi-selected) {
ul.file-tree-list li.selected {
> .entity > .entity-name when (@is-overleaf = false) {
color: @link-color;
border-right: 4px solid @link-color;
font-weight: bold;
padding-right: 32px;
i.fa-folder-open,
i.fa {
color: @link-color;
}
.entity-menu-toggle {
display: inline;
}
}
> .entity when (@is-overleaf = true) {
> .entity-name {
color: @file-tree-item-selected-color;
> div > i.fa,
> i.fa,
.entity-menu-toggle i.fa {
color: @file-tree-item-selected-color;
}
> i.fa i.linked-file-highlight {
color: @blue;
}
background-color: @file-tree-item-selected-bg;
font-weight: bold;
padding-right: 32px;
.fake-full-width-bg(@file-tree-item-selected-bg);
.entity-menu-toggle {
display: inline;
}
}
}
}
}
ul.droppable-hover.file-tree-list when (@is-overleaf = false) {
background-color: fade(@file-tree-droppable-bg-color, 60%);
}
.ui-draggable-dragging when (@is-overleaf = true) {
background-color: fade(@file-tree-item-selected-bg, 60%);
color: @file-tree-item-selected-color;
width: 75%;
padding-left: @line-height-computed;
}
}
// TODO check if the OL Beta theme is OK with darker themes.
.editor-dark when (@is-overleaf = false) {
aside#file-tree {
// background-color: lighten(@editor-dark-background-color, 10%);
ul.file-tree-list {
.dropdown-toggle {
color: @editor-dark-highlight-color;
}
li {
.entity-name {
color: #aaaaaa;
&:hover {
background-color: black;
}
}
&.selected {
> .entity > .entity-name {
color: @editor-dark-highlight-color;
border-color: @editor-dark-highlight-color;
i.fa-folder-open, i.fa-folder, i.fa-file, i.fa-image, i.fa-file-pdf-o {
color: @editor-dark-highlight-color;
}
}
}
}
}
}
aside#file-tree {
// background-color: lighten(@editor-dark-background-color, 10%);
ul.file-tree-list {
.dropdown-toggle {
color: @editor-dark-highlight-color;
}
li {
.entity-name {
color: #aaaaaa;
&:hover {
background-color: black;
}
}
&.selected {
> .entity > .entity-name {
color: @editor-dark-highlight-color;
border-color: @editor-dark-highlight-color;
i.fa-folder-open,
i.fa-folder,
i.fa-file,
i.fa-image,
i.fa-file-pdf-o {
color: @editor-dark-highlight-color;
}
}
}
}
}
}
}
.modal-new-file {
padding: 0;
table {
width: 100%;
td {
vertical-align: top;
}
}
.toggle-output-files-button {
font-size: 80%;
}
padding: 0;
table {
width: 100%;
td {
vertical-align: top;
}
}
.toggle-output-files-button {
font-size: 80%;
}
}
.modal-new-file--list {
background-color: @modal-footer-background-color;
width: 220px;
ul {
li {
a {
color: @text-color;
padding: (@line-height-computed / 4);
display: block;
text-decoration: none;
}
}
li.active {
background-color: white;
a {
color: @link-color;
}
}
li:hover {
background-color: white;
}
}
}
.modal-new-file--list {
background-color: @modal-footer-background-color;
width: 220px;
ul {
li {
a {
color: @text-color;
padding: (@line-height-computed / 4);
display: block;
text-decoration: none;
}
}
li.active {
background-color: white;
a {
color: @link-color;
}
}
li:hover {
background-color: white;
}
}
}
.modal-new-file--body {
padding: 20px;
padding-top: (@line-height-computed / 4);
}
.modal-new-file--body {
padding: 20px;
padding-top: (@line-height-computed / 4);
}
.modal-new-file--body-upload {
padding-top: 20px;
}
.modal-new-file--body-upload {
padding-top: 20px;
}

717
services/web/frontend/stylesheets/app/editor/history-v2.less
View file

@ -1,424 +1,419 @@
.history-toolbar {
display: flex;
align-items: center;
position: absolute;
width: 100%;
top: @ide-body-top-offset;
height: @editor-toolbar-height;
line-height: 1;
font-size: @font-size-small;
background-color: @history-toolbar-bg-color;
z-index: 1;
color: @history-toolbar-color;
padding-left: (@line-height-computed / 2);
display: flex;
align-items: center;
position: absolute;
width: 100%;
top: @ide-body-top-offset;
height: @editor-toolbar-height;
line-height: 1;
font-size: @font-size-small;
background-color: @history-toolbar-bg-color;
z-index: 1;
color: @history-toolbar-color;
padding-left: (@line-height-computed / 2);
}
.history-compare-mode-toolbar {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
line-height: 1;
font-size: @font-size-small;
background-color: @history-toolbar-bg-color;
height: @editor-toolbar-height;
color: @history-toolbar-color;
padding: 0 10px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
line-height: 1;
font-size: @font-size-small;
background-color: @history-toolbar-bg-color;
height: @editor-toolbar-height;
color: @history-toolbar-color;
padding: 0 10px;
}
.history-toolbar when (@is-overleaf = false) or (@is-overleaf-light) {
border-bottom: @toolbar-border-bottom;
border-bottom: @toolbar-border-bottom;
}
.history-toolbar-selected-version {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: (@line-height-computed / 2);
}
.history-toolbar-time,
.history-toolbar-selected-label {
font-weight: bold;
}
.history-toolbar-actions {
flex-grow: 1;
flex-shrink: 0;
}
.history-toolbar-btn,
.history-toolbar-btn-danger {
.btn;
.btn-xs;
padding-left: @padding-small-horizontal;
padding-right: @padding-small-horizontal;
margin-right: (@line-height-computed / 2);
}
.history-toolbar-btn {
.btn-info;
}
.history-toolbar-btn-danger {
.btn-danger;
}
.history-toolbar-entries-list {
flex: 0 0 @changesListWidth;
padding: 0 10px;
border-left: 1px solid @editor-border-color;
}
.history-toolbar-selected-version {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: (@line-height-computed / 2);
}
.history-toolbar-time,
.history-toolbar-selected-label {
font-weight: bold;
}
.history-toolbar-actions {
flex-grow: 1;
flex-shrink: 0;
}
.history-toolbar-btn,
.history-toolbar-btn-danger {
.btn;
.btn-xs;
padding-left: @padding-small-horizontal;
padding-right: @padding-small-horizontal;
margin-right: (@line-height-computed / 2);
}
.history-toolbar-btn {
.btn-info;
}
.history-toolbar-btn-danger {
.btn-danger;
}
.history-toolbar-entries-list {
flex: 0 0 @changesListWidth;
padding: 0 10px;
border-left: 1px solid @editor-border-color;
}
.history-entries {
font-size: @history-base-font-size;
color: @history-base-color;
height: 100%;
background-color: @history-base-bg;
position: relative;
&.history-entries-dragging {
cursor: row-resize;
}
font-size: @history-base-font-size;
color: @history-base-color;
height: 100%;
background-color: @history-base-bg;
position: relative;
&.history-entries-dragging {
cursor: row-resize;
}
}
.history-entry-day {
display: block;
background-color: @history-entry-day-bg;
color: #FFF;
padding: 5px 10px;
line-height: 1;
position: sticky;
top: 0;
z-index: 3;
display: block;
background-color: @history-entry-day-bg;
color: #fff;
padding: 5px 10px;
line-height: 1;
position: sticky;
top: 0;
z-index: 3;
}
.history-entry-toV-handle,
.history-entry-fromV-handle {
position: absolute;
background-color: @history-entry-handle-bg;
height: @history-entry-handle-height;
top: 0;
left: 0;
right: 0;
z-index: 2;
cursor: row-resize;
position: absolute;
background-color: @history-entry-handle-bg;
height: @history-entry-handle-height;
top: 0;
left: 0;
right: 0;
z-index: 2;
cursor: row-resize;
&.ui-draggable-dragging {
opacity: 0;
}
&.ui-draggable-dragging {
opacity: 0;
}
&::after {
content: '\00b7\00b7\00b7\00b7';
position: absolute;
text-align: center;
-webkit-font-smoothing: antialiased;
width: 100%;
font-size: 20px;
color: #FFF;
height: @history-entry-handle-height;
line-height: @history-entry-handle-height / 2;
}
&::after {
content: '\00b7\00b7\00b7\00b7';
position: absolute;
text-align: center;
-webkit-font-smoothing: antialiased;
width: 100%;
font-size: 20px;
color: #fff;
height: @history-entry-handle-height;
line-height: @history-entry-handle-height / 2;
}
}
.history-entry-fromV-handle {
top: auto;
bottom: 0;
top: auto;
bottom: 0;
}
.history-entry-details {
position: relative;
background-color: #FFF;
border-bottom: solid 2px @history-base-bg;
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color: #fff;
border-bottom: solid 2px @history-base-bg;
padding: 5px 10px;
cursor: pointer;
}
.history-version-with-label {
.history-entry-details;
padding: 7px 10px;
.history-entry-details;
padding: 7px 10px;
}
.history-entry-selected .history-entry-details,
.history-version-with-label-selected & {
background-color: @history-entry-selected-bg;
color: #FFF;
}
.history-entry-selected .history-entry-details,
.history-version-with-label-selected & {
background-color: @history-entry-selected-bg;
color: #fff;
}
.history-entry-hover-selected .history-entry-details,
.history-entry-hover-selected.history-entry-selected .history-entry-details,
.history-version-with-label-hover-selected &,
.history-version-with-label-hover-selected.history-entry-selected &, {
background-color: tint(@history-entry-selected-bg, 20%);
color: #FFF;
}
.history-entry-hover-selected .history-entry-details,
.history-entry-hover-selected.history-entry-selected .history-entry-details,
.history-version-with-label-hover-selected &,
.history-version-with-label-hover-selected.history-entry-selected & {
background-color: tint(@history-entry-selected-bg, 20%);
color: #fff;
}
.history-entry-selected-to .history-entry-details,
.history-entry-hover-selected-to .history-entry-details,
.history-version-with-label-selected-to &,
.history-version-with-label-hover-selected-to & {
padding-top: @history-entry-handle-height + 5px;
}
.history-entry-selected-to .history-entry-details,
.history-entry-hover-selected-to .history-entry-details,
.history-version-with-label-selected-to &,
.history-version-with-label-hover-selected-to & {
padding-top: @history-entry-handle-height + 5px;
}
.history-entry-selected-from .history-entry-details,
.history-entry-hover-selected-from .history-entry-details,
.history-version-with-label-selected-from &,
.history-version-with-label-hover-selected-from & {
padding-bottom: @history-entry-handle-height + 5px;
}
.history-entry-selected-from .history-entry-details,
.history-entry-hover-selected-from .history-entry-details,
.history-version-with-label-selected-from &,
.history-version-with-label-hover-selected-from & {
padding-bottom: @history-entry-handle-height + 5px;
}
.history-label {
display: inline-block;
color: @history-entry-label-color;
font-size: @font-size-small;
margin-bottom: 3px;
margin-right: 10px;
white-space: nowrap;
.history-entry-selected &,
.history-entry-hover-selected &,
.history-version-with-label-selected &,
.history-version-with-label-hover-selected & {
color: @history-entry-selected-label-color;
}
&.history-label-pseudo-current-state {
.history-entry-selected &,
.history-entry-hover-selected &,
.history-version-with-label-selected &,
.history-version-with-label-hover-selected & {
color: @history-entry-selected-pseudo-label-color;
}
}
}
.history-label-comment,
.history-label-delete-btn {
padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal;
border: 0;
background-color: @history-entry-label-bg-color;
.history-label-pseudo-current-state & {
background-color: @history-entry-pseudo-label-bg-color;
}
.history-entry-selected &,
.history-entry-hover-selected &,
.history-version-with-label-selected &,
.history-version-with-label-hover-selected & {
background-color: @history-entry-selected-label-bg-color;
}
}
.history-label-comment {
display: block;
float: left;
border-radius: 9999px;
max-width: 190px;
overflow: hidden;
text-overflow: ellipsis;
.history-label-own & {
padding-right: (@padding-xs-horizontal / 2);
border-radius: 9999px 0 0 9999px;
}
}
.history-label-delete-btn {
padding-left: (@padding-xs-horizontal / 2);
padding-right: @padding-xs-horizontal;
border-radius: 0 9999px 9999px 0;
&:hover {
background-color: darken(@history-entry-label-bg-color, 8%);
.history-entry-selected &,
.history-entry-hover-selected &,
.history-version-with-label-selected &,
.history-version-with-label-hover-selected & {
background-color: darken(@history-entry-selected-label-bg-color, 8%);
}
}
}
.history-label-tooltip {
white-space: normal;
padding: (@line-height-computed / 4);
text-align: left;
}
.history-label-tooltip-title,
.history-label-tooltip-owner,
.history-label-tooltip-datetime {
margin: 0 0 (@line-height-computed / 4) 0;
}
.history-label-tooltip-title {
font-weight: bold;
}
.history-label-tooltip-datetime {
margin-bottom: 0;
}
.history-label {
display: inline-block;
color: @history-entry-label-color;
font-size: @font-size-small;
margin-bottom: 3px;
margin-right: 10px;
white-space: nowrap;
.history-entry-selected &,
.history-entry-hover-selected &,
.history-version-with-label-selected &,
.history-version-with-label-hover-selected & {
color: @history-entry-selected-label-color;
}
&.history-label-pseudo-current-state {
.history-entry-selected &,
.history-entry-hover-selected &,
.history-version-with-label-selected &,
.history-version-with-label-hover-selected & {
color: @history-entry-selected-pseudo-label-color;
}
}
}
.history-label-comment,
.history-label-delete-btn {
padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal;
border: 0;
background-color: @history-entry-label-bg-color;
.history-label-pseudo-current-state & {
background-color: @history-entry-pseudo-label-bg-color;
.history-entry-changes {
.list-unstyled;
margin-bottom: 3px;
}
.history-entry-change {
word-break: break-all;
}
.history-entry-change-action {
margin-right: 0.5em;
}
}
.history-entry-selected &,
.history-entry-hover-selected &,
.history-version-with-label-selected &,
.history-version-with-label-hover-selected & {
background-color: @history-entry-selected-label-bg-color;
}
}
.history-label-comment {
display: block;
float: left;
border-radius: 9999px;
max-width: 190px;
overflow: hidden;
text-overflow: ellipsis;
.history-label-own & {
padding-right: (@padding-xs-horizontal / 2);
border-radius: 9999px 0 0 9999px;
}
}
.history-label-delete-btn {
padding-left: (@padding-xs-horizontal / 2);
padding-right: @padding-xs-horizontal;
border-radius: 0 9999px 9999px 0;
&:hover {
background-color: darken(@history-entry-label-bg-color, 8%);
.history-entry-selected &,
.history-entry-hover-selected &,
.history-version-with-label-selected &,
.history-version-with-label-hover-selected & {
background-color: darken(@history-entry-selected-label-bg-color, 8%);
}
}
}
.history-entry-change-doc {
color: @history-highlight-color;
font-weight: bold;
.history-label-tooltip {
white-space: normal;
padding: (@line-height-computed / 4);
text-align: left;
}
.history-label-tooltip-title,
.history-label-tooltip-owner,
.history-label-tooltip-datetime {
margin: 0 0 (@line-height-computed / 4) 0;
}
.history-label-tooltip-title {
font-weight: bold;
}
.history-label-tooltip-datetime {
margin-bottom: 0;
}
.history-entry-selected &,
.history-entry-hover-selected &,
.history-version-with-label-selected & {
color: #fff;
}
}
.history-entry-metadata {
}
.history-entry-metadata-time {
white-space: nowrap;
}
.history-entry-changes {
.list-unstyled;
margin-bottom: 3px;
}
.history-entry-change {
word-break: break-all;
}
.history-entry-change-action {
margin-right: 0.5em;
}
.history-entry-change-doc {
color: @history-highlight-color;
font-weight: bold;
.history-entry-selected &,
.history-entry-hover-selected &,
.history-version-with-label-selected & {
color: #FFF;
}
}
.history-entry-metadata {
}
.history-entry-metadata-time {
white-space: nowrap;
}
.history-entry-metadata-users {
display: inline;
padding: 0;
}
.history-entry-metadata-user {
display: inline;
&::after {
content: ', ';
}
&:last-of-type::after {
content: none;
}
}
.history-entry-metadata-users {
display: inline;
padding: 0;
}
.history-entry-metadata-user {
display: inline;
&::after {
content: ', ';
}
&:last-of-type::after {
content: none;
}
}
.history-entries-list-upgrade-prompt {
background-color: #FFF;
margin-bottom: 2px;
padding: 5px 10px;
.change-list-compare & {
font-size: @font-size-small;
}
background-color: #fff;
margin-bottom: 2px;
padding: 5px 10px;
.change-list-compare & {
font-size: @font-size-small;
}
}
.history-labels-list,
.history-labels-list-compare {
.history-entries;
overflow-y: auto;
.history-entries;
overflow-y: auto;
}
.history-labels-list-compare {
background-color: transparent;
background-color: transparent;
}
.history-file-tree-inner {
.full-size;
overflow-y: auto;
background-color: @file-tree-bg;
.full-size;
overflow-y: auto;
background-color: @file-tree-bg;
.loading {
color: #FFF;
font-size: @history-base-font-size;
text-align: center;
font-family: @font-family-serif;
}
.loading {
color: #fff;
font-size: @history-base-font-size;
text-align: center;
font-family: @font-family-serif;
}
}
.tooltip-history-file-tree {
font-size: 12px;
.tooltip-inner {
max-width: 400px;
text-align: left;
}
font-size: 12px;
.tooltip-inner {
max-width: 400px;
text-align: left;
}
}
.history-file-tree-inner when (@is-overleaf = false) {
font-size: 0.8rem;
font-size: 0.8rem;
}
.history-file-entity-wrapper {
color: #FFF;
margin-left: (@line-height-computed / 2);
}
.history-file-entity-link {
display: block;
position: relative;
color: @file-tree-item-color;
line-height: @file-tree-line-height;
&:hover {
background-color: @file-tree-item-hover-bg;
color: @file-tree-item-color;
text-decoration: none;
}
&:focus {
color: @file-tree-item-focus-color;
outline: none;
text-decoration: none;
}
&:hover when (@is-overleaf = true) {
.fake-full-width-bg(@file-tree-item-hover-bg);
}
}
.history-file-entity-link-selected {
background-color: @file-tree-item-selected-bg;
font-weight: bold;
color: #FFF;
.fake-full-width-bg(@file-tree-item-selected-bg);
&:hover {
background-color: @file-tree-item-hover-bg;
}
&:focus {
color: @file-tree-item-focus-selected-color;
}
}
.history-file-entity-name-container {
display: flex;
align-items: center;
}
.history-file-entity-name {
flex: 0 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.history-file-entity-operation-badge {
flex: 0 0 auto;
text-transform: lowercase;
margin-left: .5em;
font-size: .7em;
background: @history-file-badge-bg;
color: @history-file-badge-color;
border-radius: 8px;
line-height: 1;
padding: 2px 4px 3px;
margin-top: 2px;
}
.history-file-entity-wrapper {
color: #fff;
margin-left: (@line-height-computed / 2);
}
.history-file-entity-link {
display: block;
position: relative;
color: @file-tree-item-color;
line-height: @file-tree-line-height;
&:hover {
background-color: @file-tree-item-hover-bg;
color: @file-tree-item-color;
text-decoration: none;
}
&:focus {
color: @file-tree-item-focus-color;
outline: none;
text-decoration: none;
}
&:hover when (@is-overleaf = true) {
.fake-full-width-bg(@file-tree-item-hover-bg);
}
}
.history-file-entity-link-selected {
background-color: @file-tree-item-selected-bg;
font-weight: bold;
color: #fff;
.fake-full-width-bg(@file-tree-item-selected-bg);
&:hover {
background-color: @file-tree-item-hover-bg;
}
&:focus {
color: @file-tree-item-focus-selected-color;
}
}
.history-file-entity-name-container {
display: flex;
align-items: center;
}
.history-file-entity-name {
flex: 0 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.history-file-entity-operation-badge {
flex: 0 0 auto;
text-transform: lowercase;
margin-left: 0.5em;
font-size: 0.7em;
background: @history-file-badge-bg;
color: @history-file-badge-color;
border-radius: 8px;
line-height: 1;
padding: 2px 4px 3px;
margin-top: 2px;
}
.history-file-entity-icon,
.history-file-operation-icon {
flex: 0 0 auto;
color: @file-tree-item-icon-color;
font-size: 14px;
margin-right: .5em;
.history-file-entity-link-selected & {
color: #FFF;
}
}
.history-file-entity-icon,
.history-file-operation-icon {
flex: 0 0 auto;
color: @file-tree-item-icon-color;
font-size: 14px;
margin-right: 0.5em;
.history-file-entity-link-selected & {
color: #fff;
}
}
.history-file-operation-icon {
margin-left: .5em;
margin-right: 0;
}
.history-file-entity-name-edited,
.history-file-entity-name-added,
.history-file-entity-name-removed,
.history-file-entity-name-renamed {
}
.history-file-entity-name-removed {
text-decoration: line-through;
}
.history-file-operation-icon {
margin-left: 0.5em;
margin-right: 0;
}
.history-file-entity-name-edited,
.history-file-entity-name-added,
.history-file-entity-name-removed,
.history-file-entity-name-renamed {
}
.history-file-entity-name-removed {
text-decoration: line-through;
}
.history-file-entity-link-selected when (@is-overleaf = false) {
color: @brand-primary;
&:hover,
&:focus {
color: @brand-primary;
}
.history-file-entity-icon {
color: @brand-primary;
}
}
.history-file-entity-link-selected when (@is-overleaf = false) {
color: @brand-primary;
&:hover,
&:focus {
color: @brand-primary;
}
.history-file-entity-icon {
color: @brand-primary;
}
}

621
services/web/frontend/stylesheets/app/editor/history.less
View file

@ -11,331 +11,334 @@
@history-toolbar-height: 32px;
#history {
.upgrade-prompt {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background-color: rgba(128,128,128,0.4);
.message {
margin: auto;
margin-top: 100px;
padding: (@line-height-computed / 2) @line-height-computed;
width: 400px;
background-color: white;
border-radius: 8px;
}
.message-wider {
width: 650px;
margin-top: 60px;
padding: 0;
}
.upgrade-prompt {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background-color: rgba(128, 128, 128, 0.4);
.message {
margin: auto;
margin-top: 100px;
padding: (@line-height-computed / 2) @line-height-computed;
width: 400px;
background-color: white;
border-radius: 8px;
}
.message-wider {
width: 650px;
margin-top: 60px;
padding: 0;
}
.message-header {
.modal-header;
}
.message-header {
.modal-header;
}
.message-body {
.modal-body;
}
}
.message-body {
.modal-body;
}
}
.diff-panel,
.point-in-time-panel {
.full-size;
margin-right: @changesListWidth;
}
.diff-panel,
.point-in-time-panel {
.full-size;
margin-right: @changesListWidth;
}
.diff {
.full-size;
.toolbar {
padding: 3px;
height: @history-toolbar-height;
.name {
color: #FFF;
float: left;
padding: 3px @line-height-computed / 4;
display: inline-block;
}
}
.diff-editor-v2 {
.full-size;
}
.diff-editor {
.full-size;
top: @history-toolbar-height;
}
.diff-deleted {
padding: @line-height-computed;
}
.deleted-warning {
background-color: @brand-danger;
color: white;
padding: @line-height-computed / 2;
margin-right: @line-height-computed / 4;
}
&-binary {
.alert {
margin: @line-height-computed / 2;
}
}
}
.diff {
.full-size;
.toolbar {
padding: 3px;
height: @history-toolbar-height;
.name {
color: #fff;
float: left;
padding: 3px @line-height-computed / 4;
display: inline-block;
}
}
.diff-editor-v2 {
.full-size;
}
.diff-editor {
.full-size;
top: @history-toolbar-height;
}
.diff-deleted {
padding: @line-height-computed;
}
.deleted-warning {
background-color: @brand-danger;
color: white;
padding: @line-height-computed / 2;
margin-right: @line-height-computed / 4;
}
&-binary {
.alert {
margin: @line-height-computed / 2;
}
}
}
aside.change-list {
border-left: 1px solid @editor-border-color;
height: 100%;
width: @changesListWidth;
position: absolute;
right: 0;
aside.change-list {
border-left: 1px solid @editor-border-color;
height: 100%;
width: @changesListWidth;
position: absolute;
right: 0;
.loading {
text-align: center;
font-family: @font-family-serif;
margin-top: (@line-height-computed / 2);
}
.loading {
text-align: center;
font-family: @font-family-serif;
margin-top: (@line-height-computed / 2);
}
ul {
li.change {
position: relative;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
ul {
li.change {
position: relative;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
.day {
background-color: #fafafa;
border-bottom: 1px solid @editor-border-color;
padding: 4px;
font-weight: bold;
text-align: center;
height: @day-header-height;
font-size: 14px;
line-height: 1;
}
.selectors {
input {
margin: 0;
}
position: absolute;
left: @selector-padding-horizontal;
top: 0;
bottom: 0;
width: 24px;
.selector-from {
position: absolute;
bottom: @selector-padding-vertical;
left: 0;
opacity: 0.8;
}
.selector-to {
position: absolute;
top: @selector-padding-vertical;
left: 0;
opacity: 0.8;
}
.range {
position: absolute;
left: 5px;
width: 4px;
top: 0;
bottom: 0;
}
}
.description {
padding: (@line-height-computed / 4);
padding-left: 38px;
min-height: 38px;
border-bottom: 1px solid @editor-border-color;
cursor: pointer;
&:hover {
background-color: @gray-lightest;
}
}
.users {
.user {
font-size: 0.8rem;
color: @gray;
text-transform: capitalize;
position: relative;
padding-left: 16px;
.color-square {
height: 12px;
width: 12px;
border-radius: 3px;
position: absolute;
left: 0;
bottom: 3px;
}
.name {
width: 94%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.time {
float: right;
color: @gray;
display: inline-block;
padding-right: (@line-height-computed / 2);
font-size: 0.8rem;
line-height: @line-height-computed;
}
.doc {
font-size: 0.9rem;
font-weight: bold;
}
.action {
color: @gray;
text-transform: uppercase;
font-size: 0.7em;
margin-bottom: -2px;
margin-top: 2px;
&-edited {
margin-top: 0;
}
}
}
li.loading-changes, li.empty-message {
padding: 6px;
cursor: default;
&:hover {
background-color: inherit;
}
}
li.selected {
border-left: 4px solid @range-bar-color;
.day {
padding-left: 0;
}
.description {
padding-left: 34px;
}
.selectors {
left: @selector-padding-horizontal - 4px;
.range {
background-color: @range-bar-color;
}
}
}
li.selected-to {
.selectors {
.range {
top: @range-bar-selected-offset;
}
.selector-to {
opacity: 1;
}
}
}
li.selected-from {
.selectors {
.range {
bottom: @range-bar-selected-offset;
}
.selector-from {
opacity: 1;
}
}
}
li.first-in-day {
.selectors {
.selector-to {
top: @day-header-height + @selector-padding-vertical;
}
}
}
li.first-in-day.selected-to {
.selectors {
.range {
top: @day-header-height + @range-bar-selected-offset;
}
}
}
}
ul.hover-state {
li {
.selectors {
.range {
background-color: transparent;
top: 0;
bottom: 0;
}
}
}
li.hover-selected {
.selectors {
.range {
top: 0;
background-color: @gray-light;
}
}
}
li.hover-selected-to {
.selectors {
.range {
top: @range-bar-selected-offset;
}
.selector-to {
opacity: 1;
}
}
}
li.hover-selected-from {
.selectors {
.range {
bottom: @range-bar-selected-offset;
}
.selector-from {
opacity: 1;
}
}
}
li.first-in-day.hover-selected-to {
.selectors {
.range {
top: @day-header-height + @range-bar-selected-offset;
}
}
}
}
}
.day {
background-color: #fafafa;
border-bottom: 1px solid @editor-border-color;
padding: 4px;
font-weight: bold;
text-align: center;
height: @day-header-height;
font-size: 14px;
line-height: 1;
}
.selectors {
input {
margin: 0;
}
position: absolute;
left: @selector-padding-horizontal;
top: 0;
bottom: 0;
width: 24px;
.selector-from {
position: absolute;
bottom: @selector-padding-vertical;
left: 0;
opacity: 0.8;
}
.selector-to {
position: absolute;
top: @selector-padding-vertical;
left: 0;
opacity: 0.8;
}
.range {
position: absolute;
left: 5px;
width: 4px;
top: 0;
bottom: 0;
}
}
.description {
padding: (@line-height-computed / 4);
padding-left: 38px;
min-height: 38px;
border-bottom: 1px solid @editor-border-color;
cursor: pointer;
&:hover {
background-color: @gray-lightest;
}
}
.users {
.user {
font-size: 0.8rem;
color: @gray;
text-transform: capitalize;
position: relative;
padding-left: 16px;
.color-square {
height: 12px;
width: 12px;
border-radius: 3px;
position: absolute;
left: 0;
bottom: 3px;
}
.name {
width: 94%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.time {
float: right;
color: @gray;
display: inline-block;
padding-right: (@line-height-computed / 2);
font-size: 0.8rem;
line-height: @line-height-computed;
}
.doc {
font-size: 0.9rem;
font-weight: bold;
}
.action {
color: @gray;
text-transform: uppercase;
font-size: 0.7em;
margin-bottom: -2px;
margin-top: 2px;
&-edited {
margin-top: 0;
}
}
}
li.loading-changes,
li.empty-message {
padding: 6px;
cursor: default;
&:hover {
background-color: inherit;
}
}
li.selected {
border-left: 4px solid @range-bar-color;
.day {
padding-left: 0;
}
.description {
padding-left: 34px;
}
.selectors {
left: @selector-padding-horizontal - 4px;
.range {
background-color: @range-bar-color;
}
}
}
li.selected-to {
.selectors {
.range {
top: @range-bar-selected-offset;
}
.selector-to {
opacity: 1;
}
}
}
li.selected-from {
.selectors {
.range {
bottom: @range-bar-selected-offset;
}
.selector-from {
opacity: 1;
}
}
}
li.first-in-day {
.selectors {
.selector-to {
top: @day-header-height + @selector-padding-vertical;
}
}
}
li.first-in-day.selected-to {
.selectors {
.range {
top: @day-header-height + @range-bar-selected-offset;
}
}
}
}
ul.hover-state {
li {
.selectors {
.range {
background-color: transparent;
top: 0;
bottom: 0;
}
}
}
li.hover-selected {
.selectors {
.range {
top: 0;
background-color: @gray-light;
}
}
}
li.hover-selected-to {
.selectors {
.range {
top: @range-bar-selected-offset;
}
.selector-to {
opacity: 1;
}
}
}
li.hover-selected-from {
.selectors {
.range {
bottom: @range-bar-selected-offset;
}
.selector-from {
opacity: 1;
}
}
}
li.first-in-day.hover-selected-to {
.selectors {
.range {
top: @day-header-height + @range-bar-selected-offset;
}
}
}
}
}
}
.diff-deleted {
padding-top: 15px;
padding-top: 15px;
}
.hide-ace-cursor {
.ace_active-line, .ace_cursor-layer, .ace_bracket {
display: none;
}
.ace_active-line,
.ace_cursor-layer,
.ace_bracket {
display: none;
}
.ace_gutter-active-line {
background-color: transparent;
}
.ace_gutter-active-line {
background-color: transparent;
}
}
.editor-dark {
#history {
aside.change-list {
border-color: @editor-dark-toolbar-border-color;
ul li.change {
.day {
background-color: darken(@editor-dark-background-color, 10%);
border-bottom: 1px solid @editor-dark-toolbar-border-color;
}
.description {
border-bottom: 1px solid @editor-dark-toolbar-border-color;
&:hover {
background-color: black;
}
}
}
}
}
#history {
aside.change-list {
border-color: @editor-dark-toolbar-border-color;
ul li.change {
.day {
background-color: darken(@editor-dark-background-color, 10%);
border-bottom: 1px solid @editor-dark-toolbar-border-color;
}
.description {
border-bottom: 1px solid @editor-dark-toolbar-border-color;
&:hover {
background-color: black;
}
}
}
}
}
}

48
services/web/frontend/stylesheets/app/editor/hotkeys.less
View file

@ -1,25 +1,25 @@
.modal-hotkeys {
font-size: 14px;
h3:first-child {
margin-top: 0;
}
.hotkey {
margin-bottom: @line-height-computed / 2;
}
.description {
display: inline-block;
}
.combination {
padding: 4px 8px;
border-radius: 3px;
background-color: @gray-dark;
color: white;
font-family: @font-family-sans-serif;
font-weight: 600;
margin-right: @line-height-computed / 4;
}
}
font-size: 14px;
h3:first-child {
margin-top: 0;
}
.hotkey {
margin-bottom: @line-height-computed / 2;
}
.description {
display: inline-block;
}
.combination {
padding: 4px 8px;
border-radius: 3px;
background-color: @gray-dark;
color: white;
font-family: @font-family-sans-serif;
font-weight: 600;
margin-right: @line-height-computed / 4;
}
}

234
services/web/frontend/stylesheets/app/editor/left-menu.less
View file

@ -1,128 +1,128 @@
#left-menu {
position: absolute;
width: @left-menu-width;
padding: (@line-height-computed / 2);
top: 0;
bottom: 0;
background-color: #f4f4f4;
z-index: 100;
overflow-y: auto;
overflow-x: hidden;
-webkit-transition: left ease-in-out @left-menu-animation-duration;
transition: left ease-in-out @left-menu-animation-duration;
font-size: 14px;
position: absolute;
width: @left-menu-width;
padding: (@line-height-computed / 2);
top: 0;
bottom: 0;
background-color: #f4f4f4;
z-index: 100;
overflow-y: auto;
overflow-x: hidden;
-webkit-transition: left ease-in-out @left-menu-animation-duration;
transition: left ease-in-out @left-menu-animation-duration;
font-size: 14px;
left: -280px;
&.shown {
left: 0;
}
left: -280px;
&.shown {
left: 0;
}
h4 {
font-family: @font-family-sans-serif;
font-weight: 400;
font-size: 1rem;
margin: (@line-height-computed / 2) 0;
padding-bottom: (@line-height-computed / 4);
color: @gray-light;
border-bottom: 1px solid @gray-lighter;
}
h4 {
font-family: @font-family-sans-serif;
font-weight: 400;
font-size: 1rem;
margin: (@line-height-computed / 2) 0;
padding-bottom: (@line-height-computed / 4);
color: @gray-light;
border-bottom: 1px solid @gray-lighter;
}
> h4:first-child {
margin-top: 0;
}
> h4:first-child {
margin-top: 0;
}
ul.nav {
a {
cursor: pointer;
&:hover,
&:active,
&:focus {
background-color: @link-color;
color: white;
i {
color: white;
}
}
i {
color: @gray;
}
padding: (@line-height-computed / 4);
font-weight: 700;
}
.link-disabled {
color: @gray-light;
}
}
ul.nav {
a {
cursor: pointer;
&:hover,
&:active,
&:focus {
background-color: @link-color;
color: white;
i {
color: white;
}
}
i {
color: @gray;
}
padding: (@line-height-computed / 4);
font-weight: 700;
}
.link-disabled {
color: @gray-light;
}
}
> ul.nav:last-child {
margin-bottom: @line-height-computed / 2;
}
> ul.nav:last-child {
margin-bottom: @line-height-computed / 2;
}
ul.nav-downloads {
li {
display: inline-block;
text-align: center;
width: 100px;
a {
color: @gray-dark;
}
i {
margin: (@line-height-computed / 4) 0;
}
}
}
ul.nav-downloads {
li {
display: inline-block;
text-align: center;
width: 100px;
a {
color: @gray-dark;
}
i {
margin: (@line-height-computed / 4) 0;
}
}
}
form.settings {
label {
font-weight: normal;
color: @gray-dark;
flex: 1 0 50%;
margin-bottom: 0;
margin-top: 9px;
padding-right: 5px;
white-space: nowrap;
}
select {
width: 50%;
flex: 0 0 50%;
margin: 9px 0;
}
.form-controls {
clear: both;
padding: 0 9px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
border-bottom: solid 1px rgba(0, 0, 0, 0.07);
&:first-child {
margin-top: -9px;
}
&:last-child {
border-bottom: 0;
}
&:hover {
background-color: @link-color;
// select.form-control {
// color: white;
// }
label,
i.fa {
color: white;
}
}
&:after {
content:"";
display:table;
clear:both;
}
}
}
form.settings {
label {
font-weight: normal;
color: @gray-dark;
flex: 1 0 50%;
margin-bottom: 0;
margin-top: 9px;
padding-right: 5px;
white-space: nowrap;
}
select {
width: 50%;
flex: 0 0 50%;
margin: 9px 0;
}
.form-controls {
clear: both;
padding: 0 9px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
border-bottom: solid 1px rgba(0, 0, 0, 0.07);
&:first-child {
margin-top: -9px;
}
&:last-child {
border-bottom: 0;
}
&:hover {
background-color: @link-color;
// select.form-control {
// color: white;
// }
label,
i.fa {
color: white;
}
}
&:after {
content: '';
display: table;
clear: both;
}
}
}
}
#left-menu-mask {
.full-size;
opacity: 0.4;
background-color: #999;
z-index: 99;
}
.full-size;
opacity: 0.4;
background-color: #999;
z-index: 99;
}

75
services/web/frontend/stylesheets/app/editor/online-users.less
View file

@ -1,44 +1,45 @@
@online-user-color: rgb(0, 170, 255);
.online-users {
display: flex;
display: flex;
.online-user {
background-color: @online-user-color;
width: 24px;
display: inline-block;
height: 24px;
margin-right: 8px;
text-align: center;
color: white;
text-transform: uppercase;
border-radius: 3px;
cursor: pointer;
}
.online-user {
background-color: @online-user-color;
width: 24px;
display: inline-block;
height: 24px;
margin-right: 8px;
text-align: center;
color: white;
text-transform: uppercase;
border-radius: 3px;
cursor: pointer;
}
.online-user-multi {
width: auto;
min-width: 24px;
padding-left: 8px;
padding-right: 5px;
display: flex;
align-items: center;
}
.online-user-multi {
width: auto;
min-width: 24px;
padding-left: 8px;
padding-right: 5px;
display: flex;
align-items: center;
}
.dropdown-menu {
margin-right: 8px;
a {
// Override toolbar link styles
display: block;
padding: 4px 10px 5px;
margin: 1px 2px;
color: @text-color;
&:hover, &:active {
color: @text-color!important;
background-color: @gray-lightest;
text-shadow: none;
.box-shadow(none);
}
}
}
.dropdown-menu {
margin-right: 8px;
a {
// Override toolbar link styles
display: block;
padding: 4px 10px 5px;
margin: 1px 2px;
color: @text-color;
&:hover,
&:active {
color: @text-color!important;
background-color: @gray-lightest;
text-shadow: none;
.box-shadow(none);
}
}
}
}

824
services/web/frontend/stylesheets/app/editor/pdf.less
View file

@ -1,507 +1,525 @@
@stripe-width: 20px;
@keyframes pdf-toolbar-stripes {
from { background-position: 0 0; }
to { background-position: @stripe-width 0; }
from {
background-position: 0 0;
}
to {
background-position: @stripe-width 0;
}
}
.pdf .toolbar.toolbar-pdf when (@is-overleaf = true) {
.toolbar-small-mixin;
.toolbar-alt-mixin;
padding-right: 5px;
&.changes-to-autocompile {
#gradient > .striped(@color: rgba(255,255,255,.10), @angle: -45deg);
background-size: @stripe-width @stripe-width;
.animation(pdf-toolbar-stripes 2s linear infinite);
}
.auto-compile-status {
color: white;
margin-right: (@line-height-computed / 2);
i {
color: @brand-danger;
}
}
.auto-compile-status when (@is-overleaf-light = true) {
color: @ol-blue-gray-3;
}
.toolbar-small-mixin;
.toolbar-alt-mixin;
padding-right: 5px;
&.changes-to-autocompile {
#gradient > .striped(@color: rgba(255, 255, 255, 0.1), @angle: -45deg);
background-size: @stripe-width @stripe-width;
.animation(pdf-toolbar-stripes 2s linear infinite);
}
.auto-compile-status {
color: white;
margin-right: (@line-height-computed / 2);
i {
color: @brand-danger;
}
}
.auto-compile-status when (@is-overleaf-light = true) {
color: @ol-blue-gray-3;
}
}
.pdf .toolbar.toolbar-pdf when (@is-overleaf = true) and (@is-overleaf-light = false) {
border-bottom: 0;
.pdf
.toolbar.toolbar-pdf
when
(@is-overleaf = true)
and
(@is-overleaf-light = false) {
border-bottom: 0;
}
.pdf .toolbar.toolbar-pdf when (@is-overleaf = false) {
.toolbar-tall-mixin;
padding: 0 (@line-height-computed / 2);
.auto-compile-status {
display: none;
}
.toolbar-tall-mixin;
padding: 0 (@line-height-computed / 2);
.auto-compile-status {
display: none;
}
}
.pdf {
background-color: @pdf-bg;
background-color: @pdf-bg;
}
.pdf-viewer, .pdf-logs, .pdf-errors, .pdf-uncompiled {
.full-size;
top: @pdf-top-offset;
.pdf-viewer,
.pdf-logs,
.pdf-errors,
.pdf-uncompiled {
.full-size;
top: @pdf-top-offset;
}
.pdf-logs, .pdf-errors, .pdf-uncompiled, .pdf-validation-problems{
padding: @line-height-computed / 2;
.pdf-logs,
.pdf-errors,
.pdf-uncompiled,
.pdf-validation-problems {
padding: @line-height-computed / 2;
}
.pdf-uncompiled {
.fa {
color: @blue;
}
.fa {
color: @blue;
}
}
.btn-recompile-group when (@is-overleaf = true) {
align-self: stretch;
margin-right: 6px;
.btn-recompile {
height: 100%;
.btn-primary;
padding-top: 3px;
padding-bottom: 3px;
&:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&[disabled] {
background-color: mix(@btn-primary-bg, @toolbar-alt-bg-color, 65%);
.opacity(1.0);
}
}
align-self: stretch;
margin-right: 6px;
.btn-recompile {
height: 100%;
.btn-primary;
padding-top: 3px;
padding-bottom: 3px;
&:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&[disabled] {
background-color: mix(@btn-primary-bg, @toolbar-alt-bg-color, 65%);
.opacity(1);
}
}
}
.btn-recompile-group when (@is-overleaf = false) {
margin-right: (@line-height-computed / 2);
.btn-recompile {
.btn-info;
}
margin-right: (@line-height-computed / 2);
.btn-recompile {
.btn-info;
}
}
.btn-split-screen when (@is-overleaf = false) {
.fa {
display: none;
}
.fa {
display: none;
}
}
.btn-split-screen when (@is-overleaf = true) {
.fa {
display: none;
}
.fa {
display: none;
}
}
.pdf-viewer {
iframe {
width: 100%;
height: 100%;
border: none;
}
.pdfjs-viewer {
.full-size;
background-color: @pdfjs-bg;
overflow: scroll;
canvas, div.pdf-canvas {
background: white;
box-shadow: @pdf-page-shadow-color 0px 0px 10px;
}
div.pdf-canvas.pdfng-empty {
background-color: white;
}
div.pdf-canvas.pdfng-loading {
background-color: white;
}
.page-container {
margin: 10px auto;
padding: 0 10px;
box-sizing: content-box;
user-select: none;
}
}
.progress-thin {
position: absolute;
top: -2px;
height: 3px;
left: 0;
right: 0;
.progress-bar {
height: 100%;
background-color: @link-color;
}
}
.pdfjs-controls {
position: absolute;
padding: @line-height-computed / 2;
top: 0;
left: 0;
display: inline-block;
.btn-group {
transition: opacity 0.5s ease, visibility 0 linear 0.5s;
visibility: hidden;
opacity: 0;
}
&:hover, &.flash {
.btn-group {
transition: none;
visibility: visible;
opacity: 1;
}
}
i.fa-arrows-h {
border-right: 2px solid white;
border-left: 2px solid white;
}
i.fa-arrows-v {
border-top: 2px solid white;
border-bottom: 2px solid white;
}
}
iframe {
width: 100%;
height: 100%;
border: none;
}
.pdfjs-viewer {
.full-size;
background-color: @pdfjs-bg;
overflow: scroll;
canvas,
div.pdf-canvas {
background: white;
box-shadow: @pdf-page-shadow-color 0px 0px 10px;
}
div.pdf-canvas.pdfng-empty {
background-color: white;
}
div.pdf-canvas.pdfng-loading {
background-color: white;
}
.page-container {
margin: 10px auto;
padding: 0 10px;
box-sizing: content-box;
user-select: none;
}
}
.progress-thin {
position: absolute;
top: -2px;
height: 3px;
left: 0;
right: 0;
.progress-bar {
height: 100%;
background-color: @link-color;
}
}
.pdfjs-controls {
position: absolute;
padding: @line-height-computed / 2;
top: 0;
left: 0;
display: inline-block;
.btn-group {
transition: opacity 0.5s ease, visibility 0 linear 0.5s;
visibility: hidden;
opacity: 0;
}
&:hover,
&.flash {
.btn-group {
transition: none;
visibility: visible;
opacity: 1;
}
}
i.fa-arrows-h {
border-right: 2px solid white;
border-left: 2px solid white;
}
i.fa-arrows-v {
border-top: 2px solid white;
border-bottom: 2px solid white;
}
}
}
.pdf .toolbar {
.toolbar-right {
a {
&:hover {
i when (@is-overleaf = false) {
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
border-color: @gray-dark;
}
}
i when (@is-overleaf = false) {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid @gray-light;
}
.toolbar-right {
a {
&:hover {
i when (@is-overleaf = false) {
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
border-color: @gray-dark;
}
}
i when (@is-overleaf = false) {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid @gray-light;
}
i.full-screen {
border-top-width: 3px;
border-radius: 2px;
}
i.full-screen {
border-top-width: 3px;
border-radius: 2px;
}
i.full-screen when (@is-overleaf = true) {
display: none;
}
i.split-screen {
width: 7px;
border-top-width: 3px;
border-radius: 2px;
margin-left: 2px;
}
i.full-screen when (@is-overleaf = true) {
display: none;
}
i.split-screen {
width: 7px;
border-top-width: 3px;
border-radius: 2px;
margin-left: 2px;
}
i.split-screen when (@is-overleaf = true) {
display: none;
}
i.split-screen when (@is-overleaf = true) {
display: none;
}
i.fa when (@is-overleaf = false) {
display: none;
}
}
}
i.fa when (@is-overleaf = false) {
display: none;
}
}
}
}
.pdf-logs {
overflow: auto;
.alert {
font-size: 0.9rem;
margin-bottom: @line-height-computed / 2;
cursor: pointer;
.line-no {
float: right;
color: @log-line-no-color;
font-weight: 700;
overflow: auto;
.alert {
font-size: 0.9rem;
margin-bottom: @line-height-computed / 2;
cursor: pointer;
.line-no {
float: right;
color: @log-line-no-color;
font-weight: 700;
.fa {
opacity: 0;
}
}
.entry-message {
font-weight: 700;
//font-family: @font-family-monospace;
}
.entry-content {
white-space: pre-wrap;
font-size: 0.8rem;
//font-family: @font-family-monospace;
}
.fa {
opacity: 0;
}
}
.entry-message {
font-weight: 700;
//font-family: @font-family-monospace;
}
.entry-content {
white-space: pre-wrap;
font-size: 0.8rem;
//font-family: @font-family-monospace;
}
&:hover .line-no {
color: inherit;
.fa {
opacity: 1;
}
}
&:hover .line-no {
color: inherit;
.fa {
opacity: 1;
}
}
&.alert-danger {
background-color: tint(@alert-danger-bg, 15%);
&:hover {
background-color: @alert-danger-bg;
}
}
&.alert-danger {
background-color: tint(@alert-danger-bg, 15%);
&:hover {
background-color: @alert-danger-bg;
}
}
&.alert-warning {
background-color: tint(@alert-warning-bg, 15%);
&:hover {
background-color: @alert-warning-bg;
}
}
&.alert-warning {
background-color: tint(@alert-warning-bg, 15%);
&:hover {
background-color: @alert-warning-bg;
}
}
&.alert-info {
background-color: tint(@alert-info-bg, 15%);
&:hover {
background-color: @alert-info-bg;
}
}
}
pre {
font-size: 12px;
}
.dropdown {
position: relative;
}
.force-recompile {
margin-top: 10px;
text-align: right;
}
&.alert-info {
background-color: tint(@alert-info-bg, 15%);
&:hover {
background-color: @alert-info-bg;
}
}
}
pre {
font-size: 12px;
}
.dropdown {
position: relative;
}
.force-recompile {
margin-top: 10px;
text-align: right;
}
}
.synctex-controls {
position: absolute;
z-index: @synctex-controls-z-index;
padding: @synctex-controls-padding;
top: 68px;
position: absolute;
z-index: @synctex-controls-z-index;
padding: @synctex-controls-padding;
top: 68px;
}
.synctex-controls when (@is-overleaf = true) {
margin-right: -8px;
margin-right: -8px;
}
.synctex-control {
display: block;
margin-bottom: 3px;
.synctex-control {
display: block;
margin-bottom: 3px;
> .synctex-control-icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
> .synctex-control-icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
.synctex-control when (@is-overleaf = true) {
@ol-synctex-control-size: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1em;
width: @ol-synctex-control-size;
height: @ol-synctex-control-size;
border-radius: @ol-synctex-control-size / 2;
padding: 0 0 2px;
background-color: fade(@btn-default-bg, 80%);
transition: background 0.15s ease;
margin-bottom: @ol-synctex-control-size / 2;
}
.synctex-control when (@is-overleaf = true) {
@ol-synctex-control-size: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1em;
width: @ol-synctex-control-size;
height: @ol-synctex-control-size;
border-radius: @ol-synctex-control-size / 2;
padding: 0 0 2px;
background-color: fade(@btn-default-bg, 80%);
transition: background 0.15s ease;
margin-bottom: @ol-synctex-control-size / 2;
}
.synctex-control when (@is-overleaf = false) {
line-height: 1.3;
padding: 0 2px;
}
.synctex-control when (@is-overleaf = false) {
line-height: 1.3;
padding: 0 2px;
}
.synctex-control-goto-pdf > .synctex-control-icon when (@is-overleaf = true) {
text-indent: 1px; // "Optical" adjustment.
&::before {
content: "\f061";
}
}
.synctex-control-goto-code > .synctex-control-icon when (@is-overleaf = true) {
text-indent: -1px; // "Optical" adjustment.
&::before {
content: "\f060";
}
}
.synctex-control-goto-pdf > .synctex-control-icon when (@is-overleaf = true) {
text-indent: 1px; // "Optical" adjustment.
&::before {
content: '\f061';
}
}
.synctex-control-goto-code > .synctex-control-icon when (@is-overleaf = true) {
text-indent: -1px; // "Optical" adjustment.
&::before {
content: '\f060';
}
}
.synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = false) {
content: "\f178";
}
.synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = false) {
content: "\f177";
}
.synctex-control-goto-pdf
> .synctex-control-icon::before
when
(@is-overleaf = false) {
content: '\f178';
}
.synctex-control-goto-code
> .synctex-control-icon::before
when
(@is-overleaf = false) {
content: '\f177';
}
.editor-dark {
.pdf-logs {
background-color: lighten(@editor-dark-background-color, 10%);
}
.pdfjs-viewer {
background-color: lighten(@editor-dark-background-color, 10%);
}
.pdf .toolbar {
.toolbar-right a {
i {
border-color: @gray;
}
&:hover {
i {
border-color: @gray-light;
}
}
}
}
.pdf-logs {
background-color: lighten(@editor-dark-background-color, 10%);
}
.pdfjs-viewer {
background-color: lighten(@editor-dark-background-color, 10%);
}
.pdf .toolbar {
.toolbar-right a {
i {
border-color: @gray;
}
&:hover {
i {
border-color: @gray-light;
}
}
}
}
}
.keyboard-tooltip {
.tooltip-inner {
max-width: none;
}
.tooltip-inner {
max-width: none;
}
}
.keyboard-shortcut {
white-space: nowrap;
white-space: nowrap;
}
@keyframes expand-feedback-area {
from {
max-height: 0;
}
from {
max-height: 0;
}
to {
max-height: 500px;
}
to {
max-height: 500px;
}
}
.card-hint:extend(.card-thin) {
margin-top: 10px;
padding-bottom: 7px;
cursor: default;
margin-top: 10px;
padding-bottom: 7px;
cursor: default;
&-icon-container {
background: currentColor;
width: 2.5rem;
height: 2.5rem;
font-size: 1.5rem;
text-align: center;
border-radius: 50%;
float: left;
margin-right: 10px;
&-icon-container {
background: currentColor;
width: 2.5rem;
height: 2.5rem;
font-size: 1.5rem;
text-align: center;
border-radius: 50%;
float: left;
margin-right: 10px;
.fa {
color: #FFF;
}
.fa {
color: #fff;
}
.alert-danger & {
color: @state-danger-border;
}
.alert-danger & {
color: @state-danger-border;
}
.alert-warning & {
color: @state-warning-border;
}
.alert-warning & {
color: @state-warning-border;
}
.alert-info & {
color: @state-info-border;
}
.alert-info & {
color: @state-info-border;
}
}
}
&-text,
&-feedback-label {
color: @log-hints-color;
font-size: 0.9rem;
margin-bottom: 20px;
}
&-text,
&-feedback-label {
color: @log-hints-color;
font-size: 0.9rem;
margin-bottom: 20px;
}
&-text {
min-height: 35px;
}
&-text {
min-height: 35px;
}
&-feedback-label {
font-size: inherit;
margin-right: 0.5em;
margin-bottom: 0;
font-weight: normal;
}
&-feedback-label {
font-size: inherit;
margin-right: 0.5em;
margin-bottom: 0;
font-weight: normal;
}
&-ext-link,
&-feedback {
display: inline-block;
font-size: 0.8rem;
}
&-ext-link,
&-feedback {
display: inline-block;
font-size: 0.8rem;
}
&-footer a,
&-text a {
.alert-danger & {
color: @state-danger-text;
}
&-footer a,
&-text a {
.alert-danger & {
color: @state-danger-text;
}
.alert-warning & {
color: @state-warning-text;
}
.alert-warning & {
color: @state-warning-text;
}
.alert-info & {
color: @state-info-text;
}
}
.alert-info & {
color: @state-info-text;
}
}
&-feedback {
color: @log-hints-color;
float: right;
}
&-feedback {
color: @log-hints-color;
float: right;
}
&-extra-feedback {
color: @log-hints-color;
font-size: 0.8rem;
margin-top: 10px;
padding-bottom: 5px;
animation: 0.5s ease-out expand-feedback-area;
overflow: hidden;
&-extra-feedback {
color: @log-hints-color;
font-size: 0.8rem;
margin-top: 10px;
padding-bottom: 5px;
animation: 0.5s ease-out expand-feedback-area;
overflow: hidden;
&-label {
margin: 5px 0 10px;
padding-top: 5px;
border-top: solid 1px @gray-lighter;
}
&-label {
margin: 5px 0 10px;
padding-top: 5px;
border-top: solid 1px @gray-lighter;
}
.radio {
margin: 5px;
}
.radio {
margin: 5px;
}
textarea {
font-size: 0.8rem;
margin-bottom: 10px;
padding: 5px;
}
textarea {
font-size: 0.8rem;
margin-bottom: 10px;
padding: 5px;
}
input[type="radio"] {
margin-top: 2px;
}
}
& + p {
margin-top: 20px;
}
input[type='radio'] {
margin-top: 2px;
}
}
& + p {
margin-top: 20px;
}
}
.files-dropdown-container {
.pull-right();
position: relative;
.pull-right();
position: relative;
}
.files-dropdown {
display: inline-block;
}
.files-dropdown {
display: inline-block;
}
.plv-text-layer {
display: none;
user-select: text;
display: none;
user-select: text;
.pdf-page-container:hover &,
.pdfjs-viewer-show-text & {
display: block;
}
.pdf-page-container:hover &,
.pdfjs-viewer-show-text & {
display: block;
}
}

2
services/web/frontend/stylesheets/app/editor/publish-template.less
View file

@ -1,3 +1,3 @@
.publishedDetails {
color: @gray;
color: @gray;
}

1992
services/web/frontend/stylesheets/app/editor/review-panel.less
View file

File diff suppressed because it is too large Load diff

56
services/web/frontend/stylesheets/app/editor/rich-text.less
View file

@ -44,45 +44,45 @@
// wl-indent-X is used to add extra left padding to nested itemize/enumerate
// environments, so that the inner list appears more indented than the outer
.wl-indent-0 {
padding-left: calc(~"2.5em + @{rt-line-padding}") !important;
padding-left: calc(~'2.5em + @{rt-line-padding}') !important;
}
.wl-indent-1 {
padding-left: calc(~"3.5em + @{rt-line-padding}") !important;
padding-left: calc(~'3.5em + @{rt-line-padding}') !important;
}
.wl-indent-2 {
padding-left: calc(~"4.5em + @{rt-line-padding}") !important;
padding-left: calc(~'4.5em + @{rt-line-padding}') !important;
}
.wl-indent-3 {
padding-left: calc(~"5.5em + @{rt-line-padding}") !important;
padding-left: calc(~'5.5em + @{rt-line-padding}') !important;
}
.wl-indent-4 {
padding-left: calc(~"6.5em + @{rt-line-padding}") !important;
padding-left: calc(~'6.5em + @{rt-line-padding}') !important;
}
// wl-indent-env-X is used to add extra left padding to empty nested itemize/
// enumerate environments
.wl-indent-env-0 {
padding-left: calc(~"4px + @{rt-line-padding}") !important;
padding-left: calc(~'4px + @{rt-line-padding}') !important;
}
.wl-indent-env-1 {
padding-left: calc(~"1.5em + @{rt-line-padding}") !important;
padding-left: calc(~'1.5em + @{rt-line-padding}') !important;
}
.wl-indent-env-2 {
padding-left: calc(~"2.5em + @{rt-line-padding}") !important;
padding-left: calc(~'2.5em + @{rt-line-padding}') !important;
}
.wl-indent-env-3 {
padding-left: calc(~"3.5em + @{rt-line-padding}") !important;
padding-left: calc(~'3.5em + @{rt-line-padding}') !important;
}
.wl-indent-env-4 {
padding-left: calc(~"4.5em + @{rt-line-padding}") !important;
padding-left: calc(~'4.5em + @{rt-line-padding}') !important;
}
.wl-enumerate-item-open {
@ -105,7 +105,8 @@
/****************************************************************************/
.wl-abstract-open, .wl-abstract-close {
.wl-abstract-open,
.wl-abstract-close {
border-top: 1px solid #999;
font-size: large;
font-weight: bold;
@ -121,7 +122,7 @@
.wl-figure-wrap {
padding: 10px 0;
background-color: #f5f5f5;
box-shadow: 1.3px 2px 2px #DFDFDF;
box-shadow: 1.3px 2px 2px #dfdfdf;
width: 96%;
margin: 0 auto;
text-align: center;
@ -136,43 +137,55 @@
/****************************************************************************/
.wl-chapter, .wl-chapter-open, .wl-chapter-close {
.wl-chapter,
.wl-chapter-open,
.wl-chapter-close {
font-size: 2.2em;
font-weight: bold;
}
.wl-chapter-open, .wl-chapter-close {
.wl-chapter-open,
.wl-chapter-close {
color: #999;
}
/****************************************************************************/
.wl-section, .wl-section-open, .wl-section-close {
.wl-section,
.wl-section-open,
.wl-section-close {
font-size: 1.8em;
font-weight: bold;
}
.wl-section-open, .wl-section-close {
.wl-section-open,
.wl-section-close {
color: #999;
}
/****************************************************************************/
.wl-subsection, .wl-subsection-open, .wl-subsection-close {
.wl-subsection,
.wl-subsection-open,
.wl-subsection-close {
font-size: 1.5em;
font-weight: bold;
}
.wl-subsection-open, .wl-subsection-close {
.wl-subsection-open,
.wl-subsection-close {
color: #999;
}
/****************************************************************************/
.wl-subsubsection, .wl-subsubsection-open, .wl-subsubsection-close {
.wl-subsubsection,
.wl-subsubsection-open,
.wl-subsubsection-close {
font-size: 1.1em;
font-weight: bold;
}
.wl-subsubsection-open, .wl-subsubsection-close {
.wl-subsubsection-open,
.wl-subsubsection-close {
color: #999;
}
@ -207,7 +220,7 @@
}
.wl-img-default {
width: 0.9em ;
width: 0.9em;
padding: 0 1px 1px;
}
@ -239,4 +252,3 @@
background-position: bottom;
}
}

133
services/web/frontend/stylesheets/app/editor/share.less
View file

@ -1,74 +1,77 @@
.modal-body-share {
h3 {
border-bottom: 1px solid @gray-lighter;
padding-bottom: @line-height-computed / 4;
margin: 0;
font-size: 1rem;
}
h3 {
border-bottom: 1px solid @gray-lighter;
padding-bottom: @line-height-computed / 4;
margin: 0;
font-size: 1rem;
}
.project-member, .project-invite, .public-access-level {
padding: (@line-height-computed / 2) 0;
border-bottom: 1px solid @gray-lighter;
font-size: 14px;
}
.project-member,
.project-invite,
.public-access-level {
padding: (@line-height-computed / 2) 0;
border-bottom: 1px solid @gray-lighter;
font-size: 14px;
}
.public-access-level {
padding-top: 0;
font-size: 13px;
padding-bottom: @modal-inner-padding;
.access-token-display-area {
margin-top: @line-height-computed/4;
.access-token-wrapper {
padding-top: @line-height-computed/4;
.access-token {
margin-top: @line-height-computed/4;
background-color: @gray-lightest;
border: 1px solid @gray-lighter;
padding: 6px 12px 6px 12px
}
}
}
}
.public-access-level {
padding-top: 0;
font-size: 13px;
padding-bottom: @modal-inner-padding;
.access-token-display-area {
margin-top: @line-height-computed / 4;
.access-token-wrapper {
padding-top: @line-height-computed / 4;
.access-token {
margin-top: @line-height-computed / 4;
background-color: @gray-lightest;
border: 1px solid @gray-lighter;
padding: 6px 12px 6px 12px;
}
}
}
}
.public-access-level.public-access-level--notice {
background-color: @gray-lightest;
border-bottom: none;
margin-top: @margin-md;
padding-top: @margin-md;
}
.public-access-level.public-access-level--notice {
background-color: @gray-lightest;
border-bottom: none;
margin-top: @margin-md;
padding-top: @margin-md;
}
.project-member, .project-invite {
&:hover {
background-color: @gray-lightest;
}
}
.project-member,
.project-invite {
&:hover {
background-color: @gray-lightest;
}
}
.invite-controls {
.small {
padding: 2px;
}
padding: @line-height-computed / 2;
background-color: @gray-lightest;
margin-top: @line-height-computed / 2;
form {
.form-group {
margin-bottom: @line-height-computed / 2;
&:last-child {
margin-bottom: 0;
}
}
.privileges {
display: inline-block;
width: auto;
height: 30px;
font-size: 14px;
}
}
}
.invite-controls {
.small {
padding: 2px;
}
padding: @line-height-computed / 2;
background-color: @gray-lightest;
margin-top: @line-height-computed / 2;
form {
.form-group {
margin-bottom: @line-height-computed / 2;
&:last-child {
margin-bottom: 0;
}
}
.privileges {
display: inline-block;
width: auto;
height: 30px;
font-size: 14px;
}
}
}
}
.modal-footer-share {
.modal-footer-left {
max-width: 70%;
text-align: left;
}
.modal-footer-left {
max-width: 70%;
text-align: left;
}
}

493
services/web/frontend/stylesheets/app/editor/toolbar.less
View file

@ -1,207 +1,210 @@
@toolbar-height: 40px;
.toolbar {
display: flex;
align-items: center;
height: @toolbar-height;
border-bottom: @toolbar-border-bottom;
display: flex;
align-items: center;
height: @toolbar-height;
border-bottom: @toolbar-border-bottom;
> a, .toolbar-right > a {
position: relative;
.label {
position: absolute;
top: 0;
right: 0;
padding: .15em .6em .2em;
font-size: 60%;
pointer-events: none; // Labels were capturing button/anchor clicks.
}
}
> a,
.toolbar-right > a {
position: relative;
.label {
position: absolute;
top: 0;
right: 0;
padding: 0.15em 0.6em 0.2em;
font-size: 60%;
pointer-events: none; // Labels were capturing button/anchor clicks.
}
}
> a:focus {
outline: none;
}
> a:focus {
outline: none;
}
> a:not(.btn),
.toolbar-left > a:not(.btn),
.toolbar-right > a:not(.btn) {
display: inline-block;
color: @toolbar-icon-btn-color;
padding: 4px 2px;
line-height: 1;
height: 24px;
border-radius: @border-radius-small;
&.toolbar-header-back-projects {
padding: 5px 10px 4px;
margin-bottom: 1px;
}
> a:not(.btn),
.toolbar-left > a:not(.btn),
.toolbar-right > a:not(.btn) {
display: inline-block;
color: @toolbar-icon-btn-color;
padding: 4px 2px;
line-height: 1;
height: 24px;
border-radius: @border-radius-small;
&.toolbar-header-back-projects {
padding: 5px 10px 4px;
margin-bottom: 1px;
}
&:hover {
text-shadow: @toolbar-icon-btn-hover-shadow;
color: @toolbar-icon-btn-hover-color;
text-decoration: none;
}
&.active, &:active {
.label {
display: none;
}
color: white;
background-color: @link-color;
box-shadow: @toolbar-icon-btn-hover-boxshadow;
&:hover {
color: white;
}
}
}
&:hover {
text-shadow: @toolbar-icon-btn-hover-shadow;
color: @toolbar-icon-btn-hover-color;
text-decoration: none;
}
&.active,
&:active {
.label {
display: none;
}
color: white;
background-color: @link-color;
box-shadow: @toolbar-icon-btn-hover-boxshadow;
&:hover {
color: white;
}
}
}
&.toolbar-pdf > a:not(.btn) {
margin-right: 3px;
}
&.toolbar-pdf > a:not(.btn) {
margin-right: 3px;
}
.btn-full-height {
border: none;
border-radius: 0;
border-right: 1px solid @toolbar-header-btn-border-color;
color: @toolbar-btn-color;
padding: 3px 10px 5px;
font-size: 20px;
max-height: 39px;
&:hover {
text-shadow: @toolbar-btn-hover-text-shadow;
background-color: @toolbar-btn-hover-bg-color;
color: @toolbar-btn-hover-color;
}
&.active, &:active {
color: @toolbar-btn-active-color;
background-color: @toolbar-btn-active-bg-color;
box-shadow: @toolbar-btn-active-shadow;
}
.label {
top: 4px;
right: 4px;
}
.btn-full-height {
border: none;
border-radius: 0;
border-right: 1px solid @toolbar-header-btn-border-color;
color: @toolbar-btn-color;
padding: 3px 10px 5px;
font-size: 20px;
max-height: 39px;
&:hover {
text-shadow: @toolbar-btn-hover-text-shadow;
background-color: @toolbar-btn-hover-bg-color;
color: @toolbar-btn-hover-color;
}
&.active,
&:active {
color: @toolbar-btn-active-color;
background-color: @toolbar-btn-active-bg-color;
box-shadow: @toolbar-btn-active-shadow;
}
.label {
top: 4px;
right: 4px;
}
&.header-cobranding-logo-container {
height: @toolbar-height - 1;
padding: 8px 10px;
background-color: @toolbar-header-branded-btn-bg-color;
}
}
.btn-full-height-no-border {
border-right: 0;
border-left: 0;
}
&.header-cobranding-logo-container {
height: @toolbar-height - 1;
padding: 8px 10px;
background-color: @toolbar-header-branded-btn-bg-color;
}
}
.btn-full-height-no-border {
border-right: 0;
border-left: 0;
}
.toolbar-left {
display: flex;
float: left;
text-align: center;
align-items: center;
}
.toolbar-left {
display: flex;
float: left;
text-align: center;
align-items: center;
}
.toolbar-right {
display: flex;
align-items: center;
flex-grow: 1;
justify-content: flex-end;
.btn-full-height {
border-right: 0;
border-left: 1px solid @toolbar-header-btn-border-color;
}
}
.toolbar-right {
display: flex;
align-items: center;
flex-grow: 1;
justify-content: flex-end;
.btn-full-height {
border-right: 0;
border-left: 1px solid @toolbar-header-btn-border-color;
}
}
.toolbar-center {
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
// At small screen sizes, center relative to the left menu and right buttons
width: 100%;
display: flex;
justify-content: center;
}
.toolbar-center {
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
// At small screen sizes, center relative to the left menu and right buttons
width: 100%;
display: flex;
justify-content: center;
}
&.toolbar-header {
background-color: @toolbar-header-bg-color;
box-shadow: @toolbar-header-shadow;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
&.toolbar-header {
background-color: @toolbar-header-bg-color;
box-shadow: @toolbar-header-shadow;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
&.toolbar-small {
.toolbar-small-mixin;
}
&.toolbar-small {
.toolbar-small-mixin;
}
&.toolbar-tall {
.toolbar-small-mixin;
}
&.toolbar-tall {
.toolbar-small-mixin;
}
&.toolbar-alt {
.toolbar-alt-mixin;
}
&.toolbar-alt {
.toolbar-alt-mixin;
}
}
.header-cobranding-logo {
display: block;
width: auto;
max-height: 100%;
}
.header-cobranding-logo {
display: block;
width: auto;
max-height: 100%;
}
.toolbar-small-mixin() {
height: @toolbar-small-height;
height: @toolbar-small-height;
}
.toolbar-tall-mixin() {
height: @toolbar-tall-height;
padding-top: 10px;
height: @toolbar-tall-height;
padding-top: 10px;
}
.toolbar-alt-mixin() {
background-color: @toolbar-alt-bg-color;
background-color: @toolbar-alt-bg-color;
}
.toolbar-label {
display: none;
margin: 0 4px;
font-size: @toolbar-font-size;
font-weight: 600;
margin-bottom: 2px;
vertical-align: middle;
text-align: left;
display: none;
margin: 0 4px;
font-size: @toolbar-font-size;
font-weight: 600;
margin-bottom: 2px;
vertical-align: middle;
text-align: left;
@media (min-width: @screen-md-min) {
display: inline-block;
}
@media (min-width: @screen-md-min) {
display: inline-block;
}
&.toolbar-label-multiline {
line-height: 1.1;
}
&.toolbar-label-multiline {
line-height: 1.1;
}
}
.editor-dark {
.toolbar-alt {
background-color: darken(@editor-dark-background-color, 0%);
}
.toolbar {
border-color: @editor-dark-toolbar-border-color;
.btn-full-height {
border-color: @editor-dark-toolbar-border-color;
&:hover {
background-color: black;
color: lighten(@link-color, 10%);
}
}
&.toolbar-header {
box-shadow: none;
}
> a:not(.btn) {
color: @gray;
&:hover {
color: @gray-light;
}
}
}
.toolbar-alt {
background-color: darken(@editor-dark-background-color, 0%);
}
.toolbar {
border-color: @editor-dark-toolbar-border-color;
.btn-full-height {
border-color: @editor-dark-toolbar-border-color;
&:hover {
background-color: black;
color: lighten(@link-color, 10%);
}
}
&.toolbar-header {
box-shadow: none;
}
> a:not(.btn) {
color: @gray;
&:hover {
color: @gray-light;
}
}
}
}
/**************************************
@ -209,145 +212,145 @@
***************************************/
.toggle-wrapper {
min-width: 200px;
height: 24px;
min-width: 200px;
height: 24px;
}
.toggle-switch {
position: relative;
height: 100%;
width: 100%;
background-color: @toggle-switch-bg;
border-radius: @btn-border-radius-base;
position: relative;
height: 100%;
width: 100%;
background-color: @toggle-switch-bg;
border-radius: @btn-border-radius-base;
}
.toggle-switch-label {
position: relative;
display: block;
font-weight: normal;
z-index: 2;
float: left;
width: 50%;
height: 100%;
line-height: 24px;
text-align: center;
margin-bottom: 0;
cursor: pointer;
user-select: none;
color: @text-color;
transition: color 0.12s ease-out;
position: relative;
display: block;
font-weight: normal;
z-index: 2;
float: left;
width: 50%;
height: 100%;
line-height: 24px;
text-align: center;
margin-bottom: 0;
cursor: pointer;
user-select: none;
color: @text-color;
transition: color 0.12s ease-out;
}
.toggle-switch-input {
position: absolute;
opacity: 0;
position: absolute;
opacity: 0;
}
.toggle-switch-input:checked + .toggle-switch-label {
color: #fff;
font-weight: bold;
color: #fff;
font-weight: bold;
}
.toggle-switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
right: 2px;
width: calc(~"50% - 2px");
height: calc(~"100% - 4px");
background: @toggle-switch-highlight-color;
border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
transition: transform 0.12s ease-out, border-radius 0.12s ease-out;
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
right: 2px;
width: calc(~'50% - 2px');
height: calc(~'100% - 4px');
background: @toggle-switch-highlight-color;
border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
transition: transform 0.12s ease-out, border-radius 0.12s ease-out;
}
.toggle-switch-input:checked:nth-child(4) ~ .toggle-switch-selection {
transform: translate(100%);
border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
transform: translate(100%);
border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
}
/**************************************
Formatting buttons
***************************************/
.formatting-buttons {
width: 100%;
overflow: hidden;
width: 100%;
overflow: hidden;
}
.formatting-buttons-wrapper {
display: flex;
display: flex;
}
.formatting-btn {
color: @formatting-btn-color;
background-color: @formatting-btn-bg;
padding: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
border: none;
border-left: 1px solid @formatting-btn-border;
border-radius: 0;
color: @formatting-btn-color;
background-color: @formatting-btn-bg;
padding: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
border: none;
border-left: 1px solid @formatting-btn-border;
border-radius: 0;
&:hover {
color: @formatting-btn-color;
}
&:hover {
color: @formatting-btn-color;
}
}
.formatting-btn--icon {
min-width: 32px;
width: 32px;
min-width: 32px;
width: 32px;
}
.formatting-btn--icon:last-of-type {
border-right: 1px solid @formatting-btn-border;
border-right: 1px solid @formatting-btn-border;
}
.formatting-btn--more {
padding-left: 9px;
padding-right: 9px;
padding-left: 9px;
padding-right: 9px;
.caret {
margin-top: 1px;
}
.caret {
margin-top: 1px;
}
}
.formatting-icon {
font-style: normal;
line-height: 1.5;
font-style: normal;
line-height: 1.5;
}
.formatting-icon--small {
font-size: small;
line-height: 1.9;
font-size: small;
line-height: 1.9;
}
.formatting-icon--serif {
font-family: @font-family-serif;
font-family: @font-family-serif;
}
.formatting-more {
margin-left: auto;
margin-left: auto;
}
.formatting-menu {
min-width: auto;
max-width: 130px;
background-color: @formatting-menu-bg;
min-width: auto;
max-width: 130px;
background-color: @formatting-menu-bg;
}
.formatting-menu-item {
float: left;
float: left;
}
.formatting-menu-item > .formatting-btn {
border-right: none;
border-right: none;
}
// Disable border on left-most icon in menu
.formatting-menu-item:nth-of-type(4n + 1) > .formatting-btn {
border-left: none;
border-left: none;
}

190
services/web/frontend/stylesheets/app/error-pages.less
View file

@ -1,110 +1,110 @@
.full-height {
height: 100%;
padding: 0;
height: 100%;
padding: 0;
}
.error-container {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.error-container.full-height when (@is-overleaf = true) {
margin-top: -(@header-height + @content-margin-vertical) / 2;
margin-top: -(@header-height + @content-margin-vertical) / 2;
}
.error-figure {
display: none;
flex: 0 0 50%;
padding: @line-height-computed * 2;
@media (min-width: @screen-sm-min) {
display: block;
}
}
.error-figure {
display: none;
flex: 0 0 50%;
padding: @line-height-computed * 2;
@media (min-width: @screen-sm-min) {
display: block;
}
}
.error-figure when (@is-overleaf = true) {
display: none;
}
.error-figure when (@is-overleaf = true) {
display: none;
}
.error-figure-500 {
&::before {
content: '';
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 80%;
background-image: url(/img/brand/500-visual-plug.svg);
background-size: 400px;
background-repeat: no-repeat;
background-position: right 70%;
pointer-events: none;
}
&::after {
content: '';
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 50%;
background-image: url(/img/brand/500-visual-tail.svg);
background-size: 100px;
background-repeat: no-repeat;
background-position: 90% bottom;
pointer-events: none;
}
}
.error-img {
display: block;
max-width: 380px;
height: auto;
margin: 0 auto;
}
.error-figure-500 {
&::before {
content: '';
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 80%;
background-image: url(/img/brand/500-visual-plug.svg);
background-size: 400px;
background-repeat: no-repeat;
background-position: right 70%;
pointer-events: none;
}
&::after {
content: '';
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 50%;
background-image: url(/img/brand/500-visual-tail.svg);
background-size: 100px;
background-repeat: no-repeat;
background-position: 90% bottom;
pointer-events: none;
}
}
.error-img {
display: block;
max-width: 380px;
height: auto;
margin: 0 auto;
}
.error-details {
flex: 0 1 50%;
padding: @line-height-computed * 2;
}
.error-details when (@is-overleaf = true) {
flex-grow: 1;
}
.error-details {
flex: 0 1 50%;
padding: @line-height-computed * 2;
}
.error-status {
font-family: @font-family-serif;
margin-bottom: (@line-height-computed / 4);
color: @gray-dark;
font-size: @font-size-h1;
}
.error-description {
font-family: @font-family-serif;
font-size: @font-size-h3;
color: @gray;
margin-bottom: @line-height-computed * 2;
}
.error-btn when (@is-overleaf = false) {
color: @navbar-default-link-color;
border: 2px solid @navbar-default-link-color;
border-radius: @border-radius-base;
font-weight: 700;
line-height: 1;
padding: @padding-base-vertical @padding-base-horizontal;
.error-details when (@is-overleaf = true) {
flex-grow: 1;
}
&:hover,
&:focus {
text-decoration: none;
color: #fff;
background-color: @navbar-default-link-hover-bg;
border: 2px solid @navbar-default-link-hover-color;
}
}
.error-status {
font-family: @font-family-serif;
margin-bottom: (@line-height-computed / 4);
color: @gray-dark;
font-size: @font-size-h1;
}
.error-description {
font-family: @font-family-serif;
font-size: @font-size-h3;
color: @gray;
margin-bottom: @line-height-computed * 2;
}
.error-btn when (@is-overleaf = false) {
color: @navbar-default-link-color;
border: 2px solid @navbar-default-link-color;
border-radius: @border-radius-base;
font-weight: 700;
line-height: 1;
padding: @padding-base-vertical @padding-base-horizontal;
.error-btn when (@is-overleaf = true) {
.btn;
.btn-primary;
display: block;
@media (min-width: @screen-sm-min) {
display: inline-block;
}
}
&:hover,
&:focus {
text-decoration: none;
color: #fff;
background-color: @navbar-default-link-hover-bg;
border: 2px solid @navbar-default-link-hover-color;
}
}
.error-btn when (@is-overleaf = true) {
.btn;
.btn-primary;
display: block;
@media (min-width: @screen-sm-min) {
display: inline-block;
}
}

36
services/web/frontend/stylesheets/app/features.less
View file

@ -1,19 +1,19 @@
.long-form-features {
h2 {
margin-top: 0;
margin-bottom: @line-height-computed;
}
img {
border-radius: 3px;
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
max-width: 100%;
height: auto;
}
h3 {
margin: 0;
}
i {
color: lighten(@blue, 15%);
}
}
h2 {
margin-top: 0;
margin-bottom: @line-height-computed;
}
img {
border-radius: 3px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 100%;
height: auto;
}
h3 {
margin: 0;
}
i {
color: lighten(@blue, 15%);
}
}

6
services/web/frontend/stylesheets/app/front-chat-widget.less
View file

@ -1,3 +1,3 @@
#front-chat-holder > div[role=button] {
margin-bottom: @footer-height;
}
#front-chat-holder > div[role='button'] {
margin-bottom: @footer-height;
}

502
services/web/frontend/stylesheets/app/homepage.less
View file

@ -1,292 +1,312 @@
@register-v-spacing: 20px;
.deprecated-sl-masthead {
display: inline-block;
margin-top: @header-height;
width: 100%;
text-align: center;
h1 {
font-size: 3.3rem;
line-height: 5rem;
margin-bottom: 0;
margin-top: @line-height-computed;
}
.img {
max-width: 420px;
background-image: url('/img/ol_plus_sl.png');
background-size: 100%;
background-repeat: no-repeat;
margin: 20px auto 0;
height: 197px;
}
display: inline-block;
margin-top: @header-height;
width: 100%;
text-align: center;
h1 {
font-size: 3.3rem;
line-height: 5rem;
margin-bottom: 0;
margin-top: @line-height-computed;
}
.img {
max-width: 420px;
background-image: url('/img/ol_plus_sl.png');
background-size: 100%;
background-repeat: no-repeat;
margin: 20px auto 0;
height: 197px;
}
}
.deprecated-sl-login-buttons {
margin: 35px 0;
margin: 35px 0;
}
.deprecated-sl-msg {
width: 80%;
margin: 35px auto 0;
width: 80%;
margin: 35px auto 0;
}
.deprecated-sl-long-cta {
padding-top: 12.5px;
padding-bottom: 93px;
.card {
margin-top: 12.5px;
min-height: 397px;
}
h3 {
margin-top: 0;
}
padding-top: 12.5px;
padding-bottom: 93px;
.card {
margin-top: 12.5px;
min-height: 397px;
}
h3 {
margin-top: 0;
}
}
.masthead {
background-image: -webkit-linear-gradient(to left, rgba(79,156,69,1.0), rgba(28,91,38,1.0));
background-image: linear-gradient(to left, rgba(79,156,69,1.0), rgba(28,91,38,1.0));
position: relative;
text-align: center;
overflow: hidden;
padding-top: @header-height;
h1, p, label {
color: white;
text-align: center;
}
h1 {
font-size: 4.75rem;
line-height: 6.25rem;
margin-bottom: 0;
margin-top: @line-height-computed;
text-shadow: 0 1px 3px rgba(0,0,0,0.42);
span {
font-family: @font-family-sans-serif;
font-weight: 100;
letter-spacing: 5px;
}
}
p:first-of-type {
font-size: @line-height-computed;
font-weight: 200;
margin-top: 0;
text-rendering: auto;
margin-bottom: @line-height-computed;
}
label {
display: block;
}
.register-banner {
background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.7),rgba(0,0,0,0.9));
background-image: linear-gradient(to bottom,rgba(0,0,0,0.7),rgba(0,0,0,0.9));
padding: @register-v-spacing 0;
position: absolute;
bottom: 0;
width: 100%;
h2 {
color: white;
margin-top: 0;
font-family: @font-family-sans-serif;
font-weight: 500;
letter-spacing: 1px;
margin-bottom: @register-v-spacing;
}
.form-group {
margin-left: @line-height-computed / 2;
}
.input-lg {
border-radius: 9999px;
}
}
.hp-register-password-error {
margin-bottom: 9px;
}
.register-banner__password-error {
padding: 5px 9px;
border: none;
border-radius: @btn-border-radius-base;
}
.screenshot {
height: 600px;
margin: auto;
margin-bottom: -50px;
overflow-y: hidden;
box-shadow: 0 0 50px rgba(0,0,0,.67);
max-width: 960px;
.img {
max-width: 960px;
background-image: url('/img/homepage.png');
background-size: 100%;
background-repeat: no-repeat;
margin: auto;
height: 672px;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
.img {
background-image: url('/img/homepage@2x.png');
}
}
}
background-image: -webkit-linear-gradient(
to left,
rgba(79, 156, 69, 1),
rgba(28, 91, 38, 1)
);
background-image: linear-gradient(
to left,
rgba(79, 156, 69, 1),
rgba(28, 91, 38, 1)
);
position: relative;
text-align: center;
overflow: hidden;
padding-top: @header-height;
h1,
p,
label {
color: white;
text-align: center;
}
h1 {
font-size: 4.75rem;
line-height: 6.25rem;
margin-bottom: 0;
margin-top: @line-height-computed;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
span {
font-family: @font-family-sans-serif;
font-weight: 100;
letter-spacing: 5px;
}
}
p:first-of-type {
font-size: @line-height-computed;
font-weight: 200;
margin-top: 0;
text-rendering: auto;
margin-bottom: @line-height-computed;
}
label {
display: block;
}
.register-banner {
background-image: -webkit-linear-gradient(
top,
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.9)
);
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.9)
);
padding: @register-v-spacing 0;
position: absolute;
bottom: 0;
width: 100%;
h2 {
color: white;
margin-top: 0;
font-family: @font-family-sans-serif;
font-weight: 500;
letter-spacing: 1px;
margin-bottom: @register-v-spacing;
}
.form-group {
margin-left: @line-height-computed / 2;
}
.input-lg {
border-radius: 9999px;
}
}
.hp-register-password-error {
margin-bottom: 9px;
}
.register-banner__password-error {
padding: 5px 9px;
border: none;
border-radius: @btn-border-radius-base;
}
.screenshot {
height: 600px;
margin: auto;
margin-bottom: -50px;
overflow-y: hidden;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.67);
max-width: 960px;
.img {
max-width: 960px;
background-image: url('/img/homepage.png');
background-size: 100%;
background-repeat: no-repeat;
margin: auto;
height: 672px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
.img {
background-image: url('/img/homepage@2x.png');
}
}
}
}
.hp-register-external-separator {
margin: 0 0 (@register-v-spacing / 2);
color: #FFF;
margin: 0 0 (@register-v-spacing / 2);
color: #fff;
}
.hp-register-external-separator-or {
vertical-align: middle;
&::before,
&::after {
content: "";
display: inline-block;
vertical-align: middle;
width: 5em;
height: 1px;
background-color: rgba(255, 255, 255, .3);
}
&::before {
margin-right: 1.25em;
}
&::after {
margin-left: 1.25em;
}
}
.hp-register-external-separator-or {
vertical-align: middle;
&::before,
&::after {
content: '';
display: inline-block;
vertical-align: middle;
width: 5em;
height: 1px;
background-color: rgba(255, 255, 255, 0.3);
}
&::before {
margin-right: 1.25em;
}
&::after {
margin-left: 1.25em;
}
}
.hp-register-newsletter-checkbox {
font-size: 90%;
& > .checkbox-newsletter {
text-align: left;
@media only screen and (min-width: @screen-sm-min) {
text-align: center;
}
}
font-size: 90%;
& > .checkbox-newsletter {
text-align: left;
@media only screen and (min-width: @screen-sm-min) {
text-align: center;
}
}
}
.hp-login-btn when (@is-overleaf = true) {
.login-btn;
min-width: 220px;
.login-btn;
min-width: 220px;
background-color: @ol-blue-gray-3;
background-color: @ol-blue-gray-3;
&:hover, &:focus, &:active {
background-color: darken(@ol-blue-gray-3, 8%);
}
&:hover,
&:focus,
&:active {
background-color: darken(@ol-blue-gray-3, 8%);
}
}
.hp-register-form-email-pwd {
position: relative;
position: relative;
}
.hp-register-form-email-pwd-btn-container.form-group {
display: block;
margin-top: (@register-v-spacing / 2);
@media only screen and (min-width: @screen-md-min) {
position: absolute;
display: inline-block;
height: 100%;
top: -(@register-v-spacing / 2);
& > .btn-hero {
height: 100%;
}
}
}
.hp-register-form-email-pwd-btn-container.form-group {
display: block;
margin-top: (@register-v-spacing / 2);
@media only screen and (min-width: @screen-md-min) {
position: absolute;
display: inline-block;
height: 100%;
top: -(@register-v-spacing / 2);
& > .btn-hero {
height: 100%;
}
}
}
.universities-container {
border-bottom: 1px solid @gray-lighter;
border-bottom: 1px solid @gray-lighter;
}
.universities {
text-align: center;
.uni-logo {
display: inline-block;
padding: 0 @padding-md;
width: 20%;
}
text-align: center;
.uni-logo {
display: inline-block;
padding: 0 @padding-md;
width: 20%;
}
}
.pattern-container {
background: url('/img/pattern-home.png') repeat #f1f1f1;
border-top: 1px solid @gray-lightest;
border-bottom: 1px solid @gray-lightest;
background: url('/img/pattern-home.png') repeat #f1f1f1;
border-top: 1px solid @gray-lightest;
border-bottom: 1px solid @gray-lightest;
}
.pattern-grid {
background: url('/img/grid.png') repeat @content-alt-bg-color;
border-top: 1px solid @gray-lighter;
border-bottom: 1px solid @gray-lighter;
background: url('/img/grid.png') repeat @content-alt-bg-color;
border-top: 1px solid @gray-lighter;
border-bottom: 1px solid @gray-lighter;
}
.real-time-example {
.cursor {
background-color: hsl(200, 70%, 70%);
display: inline-block;
width: 2px;
color: transparent;
line-height: 1.4;
position: relative;
&:after {
content: "Joe";
top: 22px;
right: 0;
position: absolute;
display: block;
background-color: hsl(200, 70%, 70%);
padding: (@line-height-computed / 4) (@line-height-computed / 2);
font-size: 0.8rem;
z-index: 100;
font-family: @font-family-sans-serif;
color: white;
font-weight: 700;
}
}
.cursor {
background-color: hsl(200, 70%, 70%);
display: inline-block;
width: 2px;
color: transparent;
line-height: 1.4;
position: relative;
&:after {
content: 'Joe';
top: 22px;
right: 0;
position: absolute;
display: block;
background-color: hsl(200, 70%, 70%);
padding: (@line-height-computed / 4) (@line-height-computed / 2);
font-size: 0.8rem;
z-index: 100;
font-family: @font-family-sans-serif;
color: white;
font-weight: 700;
}
}
}
.track-changes-example {
.removed, .added {
color: #333;
margin: 0 -1px;
padding: 0 3px;
}
.added {
background-color: hsl(200, 70%, 80%);
}
.removed {
background-color: hsl(200, 70%, 95%);
position: relative;
&:after {
content: " ";
position: absolute;
top: 50%;
left: 0;
right: 0;
border-top: 1px solid hsl(200, 70%, 40%);
}
}
.removed,
.added {
color: #333;
margin: 0 -1px;
padding: 0 3px;
}
.added {
background-color: hsl(200, 70%, 80%);
}
.removed {
background-color: hsl(200, 70%, 95%);
position: relative;
&:after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
right: 0;
border-top: 1px solid hsl(200, 70%, 40%);
}
}
}
.real-time-example-code {
border-radius: 3px;
border-left: 42px solid @gray-lighter;
background-color: white;
padding: 12px;
font-family: @font-family-monospace;
.highlight {
color: @blue;
}
box-shadow: 0 3px 5px rgba(0,0,0,.3);
border-radius: 3px;
border-left: 42px solid @gray-lighter;
background-color: white;
padding: 12px;
font-family: @font-family-monospace;
.highlight {
color: @blue;
}
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: @screen-sm-max) {
.doc-history-example {
margin-bottom: @margin-md;
}
.universities {
.uni-logo {
padding: @padding-md;
width: 50%;
}
}
}
.doc-history-example {
margin-bottom: @margin-md;
}
.universities {
.uni-logo {
padding: @padding-md;
width: 50%;
}
}
}

7
services/web/frontend/stylesheets/app/institution-hub.less
View file

@ -10,7 +10,9 @@
.overbox {
font-size: 16px;
}
.hub-big-number, .hub-number-label, .worked-on {
.hub-big-number,
.hub-number-label,
.worked-on {
display: block;
width: 50%;
}
@ -18,7 +20,8 @@
padding-right: 10px;
text-align: right;
}
.hub-number-label, .worked-on {
.hub-number-label,
.worked-on {
float: right;
}
.hub-number-label {

22
services/web/frontend/stylesheets/app/invite.less
View file

@ -1,19 +1,19 @@
.project-invite-accept {
form {
padding-top: 15px;
}
margin-bottom: 30px;
form {
padding-top: 15px;
}
margin-bottom: 30px;
}
.project-name-tooltip .tooltip-inner {
max-width: 80vw;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80vw;
overflow: hidden;
text-overflow: ellipsis;
}
.project-invite-invalid {
.actions {
padding-top: 15px;
}
margin-bottom: 30px;
.actions {
padding-top: 15px;
}
margin-bottom: 30px;
}

52
services/web/frontend/stylesheets/app/list/v1-import-modal.less
View file

@ -1,51 +1,51 @@
.v1-import-title {
text-align: center;
margin-top: @line-height-computed / 2;
text-align: center;
margin-top: @line-height-computed / 2;
}
.v1-import-row {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.v1-import-col {
padding-left: 15px;
padding-right: 15px;
padding-left: 15px;
padding-right: 15px;
}
.v1-import-col ul {
margin-bottom: 0;
}
.v1-import-col ul {
margin-bottom: 0;
}
.v1-import-col--left {
flex-shrink: 1.1;
flex-shrink: 1.1;
}
.v1-import-img {
width: 100%;
margin-top: 30px;
width: 100%;
margin-top: 30px;
}
.v1-import-cta {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 90%;
text-align: center;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 90%;
text-align: center;
}
.v1-import-warning {
color: #4B7FD1;
font-size: 10em;
line-height: 1em;
color: #4b7fd1;
font-size: 10em;
line-height: 1em;
}
.v1-import-footer {
display: flex;
justify-content: space-evenly;
text-align: left;
display: flex;
justify-content: space-evenly;
text-align: left;
}
.v1-import-btn {
width: 20rem;
}
.v1-import-btn {
width: 20rem;
}

263
services/web/frontend/stylesheets/app/login-register.less
View file

@ -1,158 +1,157 @@
@brand-ieee-color : #00629B;
@brand-google-color : #276fea; // Not the "official" color but modified for a11y
@brand-twitter-color : #1DA1F2;
@brand-orcid-color : #A6CE39;
@brand-ieee-color : #00629B;
@brand-google-color : #276fea; // Not the "official" color but modified for a11y
@brand-twitter-color : #1DA1F2;
@brand-orcid-color : #A6CE39;
@brand-sharelatex-color : #A93529;
.login-register-alternatives {
.form-group:last-child {
margin-bottom: 0;
}
.form-group:last-child {
margin-bottom: 0;
}
}
.login-register-container {
max-width: 400px;
margin: 0 auto;
max-width: 400px;
margin: 0 auto;
}
.login-register-header {
padding-top: @line-height-computed;
padding-bottom: @line-height-computed - 5;
border-bottom: solid 1px @hr-border;
}
.login-register-header-heading {
margin: 0;
color: @text-color;
}
.login-register-header {
padding-top: @line-height-computed;
padding-bottom: @line-height-computed - 5;
border-bottom: solid 1px @hr-border;
}
.login-register-header-heading {
margin: 0;
color: @text-color;
}
.login-register-card {
padding-top: 0;
padding-bottom: 0;
text-align: center;
}
.login-register-card {
padding-top: 0;
padding-bottom: 0;
text-align: center;
}
.login-register-form,
.login-register-sharelatex {
padding: @line-height-computed;
border-bottom: solid 1px @hr-border;
&:last-child {
border-bottom-width: 0;
}
}
.login-register-other-links {
padding: @line-height-computed;
}
.login-register-form,
.login-register-sharelatex {
padding: @line-height-computed;
border-bottom: solid 1px @hr-border;
&:last-child {
border-bottom-width: 0;
}
}
.login-register-other-links {
padding: @line-height-computed;
}
.login-register-text,
.login-register-hr-text-container {
margin: 0;
}
.login-register-text,
.login-register-hr-text-container {
margin: 0;
}
.login-register-text {
padding-bottom: 25px;
&:last-child {
padding-bottom: 0;
}
}
.login-register-text {
padding-bottom: 25px;
&:last-child {
padding-bottom: 0;
}
}
.login-register-hr-text-container {
line-height: 1;
position: relative;
padding: @line-height-computed 0;
.login-register-hr-text-container {
line-height: 1;
position: relative;
padding: @line-height-computed 0;
&::before {
content: '';
position: absolute;
height: 1px;
background-color: @hr-border;
top: 50%;
left: 0;
right: 0;
}
}
.login-register-hr-text {
position: relative;
background-color: #FFF;
padding: 0 (@line-height-computed / 2);
}
.login-register-sharelatex-tooltip {
display: inline-block;
font-size: 135%;
position: relative;
top: 2px;
margin-left: 3px;
color: @link-color;
cursor: pointer;
}
&::before {
content: '';
position: absolute;
height: 1px;
background-color: @hr-border;
top: 50%;
left: 0;
right: 0;
}
}
.login-register-hr-text {
position: relative;
background-color: #fff;
padding: 0 (@line-height-computed / 2);
}
.login-register-sharelatex-tooltip {
display: inline-block;
font-size: 135%;
position: relative;
top: 2px;
margin-left: 3px;
color: @link-color;
cursor: pointer;
}
.login-register-newsletter {
font-size: 90%;
margin-top: @line-height-computed;
text-align: left;
.login-register-newsletter {
font-size: 90%;
margin-top: @line-height-computed;
text-align: left;
& > .checkbox {
margin-bottom: 0;
}
}
& > .checkbox {
margin-bottom: 0;
}
}
.login-btn {
.btn;
.btn-default;
position: relative;
padding-left: 20px;
padding-right: 0;
}
.login-btn {
.btn;
.btn-default;
position: relative;
padding-left: 20px;
padding-right: 0;
}
.login-btn-sharelatex {
background-color: @brand-sharelatex-color;
&:focus,
&:hover {
background-color: darken(@brand-sharelatex-color, 8%);
}
&:active {
background-color: darken(@brand-sharelatex-color, 16%);
}
}
.login-btn-sharelatex {
background-color: @brand-sharelatex-color;
&:focus,
&:hover {
background-color: darken(@brand-sharelatex-color, 8%);
}
&:active {
background-color: darken(@brand-sharelatex-color, 16%);
}
}
.login-btn-icon {
position: absolute;
top: 4px;
left: 4px;
background: #FFF url(/img/brand/lion.svg) center/20px no-repeat;
border-radius: 99999px;
width: 26px;
height: 26px;
&::before {
content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
}
}
.login-btn-icon {
position: absolute;
top: 4px;
left: 4px;
background: #fff url(/img/brand/lion.svg) center/20px no-repeat;
border-radius: 99999px;
width: 26px;
height: 26px;
.login-btn-icon-ieee {
background-image: url(/img/other-brands/logo_ieee.svg);
}
.login-btn-icon-google {
background-image: url(/img/other-brands/logo_google.svg);
}
.login-btn-icon-twitter {
background-image: url(/img/other-brands/logo_twitter.svg);
}
.login-btn-icon-orcid {
background-image: url(/img/other-brands/logo_orcid.svg);
}
.login-btn-icon-sharelatex {
background-size: 22px;
}
&::before {
content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
}
}
.login-register-header-heading {
margin: 0;
color: @text-color;
}
.login-btn-icon-ieee {
background-image: url(/img/other-brands/logo_ieee.svg);
}
.login-btn-icon-google {
background-image: url(/img/other-brands/logo_google.svg);
}
.login-btn-icon-twitter {
background-image: url(/img/other-brands/logo_twitter.svg);
}
.login-btn-icon-orcid {
background-image: url(/img/other-brands/logo_orcid.svg);
}
.login-btn-icon-sharelatex {
background-size: 22px;
}
.login-register-header-heading {
margin: 0;
color: @text-color;
}
.registration-message-heading {
color: @text-color;
color: @text-color;
}
.registration-message-details {
font-size: 90%;
font-size: 90%;
}

18
services/web/frontend/stylesheets/app/metrics.less
View file

@ -11,7 +11,7 @@
margin: 0;
padding: 40px 20px;
background: #fff;
border: 1px solid #DFDFDF;
border: 1px solid #dfdfdf;
.box {
padding-bottom: 30px;
overflow: hidden;
@ -53,10 +53,10 @@
display: block;
height: 250px;
text {
font-family: "Open Sans", sans-serif;
font-family: 'Open Sans', sans-serif;
}
&:not(:root) {
overflow: visible
overflow: visible;
}
&.hidden-legend-margin-fix {
@ -90,7 +90,7 @@
.metric-tooltip {
top: -1em;
font-size: .5em;
font-size: 0.5em;
}
}
// END: Metrics header
@ -142,11 +142,11 @@
}
#csv {
padding-right: 10px;
padding-right: 10px;
}
h3 {
display: inline-block;
display: inline-block;
}
.section_header {
@ -173,9 +173,9 @@
.daterangepicker {
margin-right: 15px;
}
#metrics-dates {
padding: 0;
}
#metrics-dates {
padding: 0;
}
}
}

4
services/web/frontend/stylesheets/app/ol-chat.less
View file

@ -1,6 +1,6 @@
// Styles for Chat panel in Overleaf v2
.chat .message-wrapper .message .message-content a {
color: inherit;
text-decoration: underline;
color: inherit;
text-decoration: underline;
}

98
services/web/frontend/stylesheets/app/ol-style-guide.less
View file

@ -1,66 +1,66 @@
.renderColorSwatchClasses(@colorName) {
@colorVal: @@colorName;
@colorValRed: red(@colorVal);
@colorValGreen: green(@colorVal);
@colorValBlue: blue(@colorVal);
@colorValAsRGB: 'rgb(@{colorValRed}, @{colorValGreen}, @{colorValBlue})';
@colorVal: @@colorName;
@colorValRed: red(@colorVal);
@colorValGreen: green(@colorVal);
@colorValBlue: blue(@colorVal);
@colorValAsRGB: 'rgb(@{colorValRed}, @{colorValGreen}, @{colorValBlue})';
&.@{colorName} {
.color-swatch {
background-color: @colorVal;
}
.color-less-var::before {
content: '@@{colorName}';
}
.color-hex-val::before {
content: '@{colorVal}';
}
.color-rgb-val::before {
font-size: 10px;
content: '@{colorValAsRGB}';
}
}
&.@{colorName} {
.color-swatch {
background-color: @colorVal;
}
.color-less-var::before {
content: '@@{colorName}';
}
.color-hex-val::before {
content: '@{colorVal}';
}
.color-rgb-val::before {
font-size: 10px;
content: '@{colorValAsRGB}';
}
}
}
.color-row {
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
}
.color-box {
background: white;
margin: 10px 4px;
border-radius: 4px;
width: 16.666%;
.renderColorSwatchClasses(ol-blue-gray-1);
.renderColorSwatchClasses(ol-blue-gray-2);
.renderColorSwatchClasses(ol-blue-gray-3);
.renderColorSwatchClasses(ol-blue-gray-4);
.renderColorSwatchClasses(ol-blue-gray-5);
.renderColorSwatchClasses(ol-blue-gray-6);
.renderColorSwatchClasses(ol-green);
.renderColorSwatchClasses(ol-dark-green);
.renderColorSwatchClasses(ol-blue);
.renderColorSwatchClasses(ol-dark-blue);
.renderColorSwatchClasses(ol-red);
.renderColorSwatchClasses(ol-dark-red);
background: white;
margin: 10px 4px;
border-radius: 4px;
width: 16.666%;
.renderColorSwatchClasses(ol-blue-gray-1);
.renderColorSwatchClasses(ol-blue-gray-2);
.renderColorSwatchClasses(ol-blue-gray-3);
.renderColorSwatchClasses(ol-blue-gray-4);
.renderColorSwatchClasses(ol-blue-gray-5);
.renderColorSwatchClasses(ol-blue-gray-6);
.renderColorSwatchClasses(ol-green);
.renderColorSwatchClasses(ol-dark-green);
.renderColorSwatchClasses(ol-blue);
.renderColorSwatchClasses(ol-dark-blue);
.renderColorSwatchClasses(ol-red);
.renderColorSwatchClasses(ol-dark-red);
}
.color-swatch {
height: 100px;
width: 100px;
margin: 10px auto;
border-radius: 4px;
height: 100px;
width: 100px;
margin: 10px auto;
border-radius: 4px;
}
.color-label {
display: flex;
flex-direction: column;
margin: 0 3px 10px;
display: flex;
flex-direction: column;
margin: 0 3px 10px;
}
.color-label pre {
font-size: 12px;
line-height: 1.8em;
margin: 0 auto;
}
font-size: 12px;
line-height: 1.8em;
margin: 0 auto;
}

26
services/web/frontend/stylesheets/app/plans-ol.less
View file

@ -1,14 +1,14 @@
.plans {
blockquote {
footer{
/* accessibility fix */
color: @ol-blue-gray-3;
}
}
.plans-header{
h1, h2 {
color: @gray-dark;
}
}
}
blockquote {
footer {
/* accessibility fix */
color: @ol-blue-gray-3;
}
}
.plans-header {
h1,
h2 {
color: @gray-dark;
}
}
}

721
services/web/frontend/stylesheets/app/plans.less
View file

@ -1,161 +1,170 @@
.plans {
p {
color: @gray-dark;
margin-bottom: @line-height-computed;
}
.best-value {
color: @brand-secondary;
line-height: @line-height-computed;
text-transform: capitalize;
}
blockquote {
footer{
/* accessibility fix */
color: @gray-med;
}
}
.btn-header {
font-family: @font-family-sans-serif;
margin-left: 10px;
margin-top: -10px;
text-shadow: 0 0 0;
}
.card .btn { white-space:normal; }
.card.features {
margin-top: @line-height-computed;
i {
color: @red;
}
p {
margin: 0;
}
}
.btn-header {
font-family: @font-family-sans-serif;
margin-left: 10px;
margin-top: -10px;
text-shadow: 0 0 0;
}
.card .btn { white-space:normal; }
.card-group {
.card-highlighted {
padding-top: @line-height-computed * 2;
padding-bottom: @line-height-computed * 2;
}
}
.card-first, .card-last {
background: @plans-non-highlighted;
}
.card-highlighted {
border: @border-width-base solid @border-color-base;
padding-top: 10px!important;
.best-value {
margin-bottom: 15px;
}
.card-header {
padding-bottom: 22px; /* align hr with other plans */
}
}
.card-header {
margin-bottom: 15px;
}
.circle {
font-size: 1.5rem;
font-weight: 700;
padding: 46px 18px;
margin: 0 auto @line-height-computed;
text-shadow: 0 -1px 1px darken(@link-color, 10%);
width: 120px;
height: 120px;
border-radius: 50%;
background-color: @brand-secondary;
color: white;
white-space: nowrap;
line-height: 1;
span.small {
color: rgba(255, 255, 255, 0.85);
font-size: @font-size-base * .8;
}
}
.circle-lg {
width: 150px;
height: 150px;
padding-top: 50px;
}
.circle-subtext {
font-size: 1rem;
}
.circle-img {
float: right;
}
.faq {
p {
margin: 0
}
}
.header-with-btn {
line-height: 1.6;
}
.plans-header{
h1, h2, p {
text-shadow: 0 -1px 1px white;
}
h1, h2 {
color: @red;
}
p {
margin-bottom: 0;
}
}
.plans-subheader {
margin-bottom: @line-height-computed;
}
.tagline {
margin-bottom: 20px;
}
ul.nav-pills {
text-align: center;
margin-bottom: @line-height-computed;
li {
float: none;
display: inline-block;
}
> li + li {
margin-left: @line-height-computed / 2;
}
}
p {
color: @gray-dark;
margin-bottom: @line-height-computed;
}
.best-value {
color: @brand-secondary;
line-height: @line-height-computed;
text-transform: capitalize;
}
blockquote {
footer {
/* accessibility fix */
color: @gray-med;
}
}
.btn-header {
font-family: @font-family-sans-serif;
margin-left: 10px;
margin-top: -10px;
text-shadow: 0 0 0;
}
.card .btn {
white-space: normal;
}
.card.features {
margin-top: @line-height-computed;
i {
color: @red;
}
p {
margin: 0;
}
}
.btn-header {
font-family: @font-family-sans-serif;
margin-left: 10px;
margin-top: -10px;
text-shadow: 0 0 0;
}
.card .btn {
white-space: normal;
}
.card-group {
.card-highlighted {
padding-top: @line-height-computed * 2;
padding-bottom: @line-height-computed * 2;
}
}
.card-first,
.card-last {
background: @plans-non-highlighted;
}
.card-highlighted {
border: @border-width-base solid @border-color-base;
padding-top: 10px !important;
.best-value {
margin-bottom: 15px;
}
.card-header {
padding-bottom: 22px; /* align hr with other plans */
}
}
.card-header {
margin-bottom: 15px;
}
.circle {
font-size: 1.5rem;
font-weight: 700;
padding: 46px 18px;
margin: 0 auto @line-height-computed;
text-shadow: 0 -1px 1px darken(@link-color, 10%);
width: 120px;
height: 120px;
border-radius: 50%;
background-color: @brand-secondary;
color: white;
white-space: nowrap;
line-height: 1;
span.small {
color: rgba(255, 255, 255, 0.85);
font-size: @font-size-base * 0.8;
}
}
.circle-lg {
width: 150px;
height: 150px;
padding-top: 50px;
}
.circle-subtext {
font-size: 1rem;
}
.circle-img {
float: right;
}
.faq {
p {
margin: 0;
}
}
.header-with-btn {
line-height: 1.6;
}
.plans-header {
h1,
h2,
p {
text-shadow: 0 -1px 1px white;
}
h1,
h2 {
color: @red;
}
p {
margin-bottom: 0;
}
}
.plans-subheader {
margin-bottom: @line-height-computed;
}
.tagline {
margin-bottom: 20px;
}
ul.nav-pills {
text-align: center;
margin-bottom: @line-height-computed;
li {
float: none;
display: inline-block;
}
> li + li {
margin-left: @line-height-computed / 2;
}
}
}
#changePlanSection {
padding-top: 30px;
.changePlanButton {
padding-top: 15px;
}
padding-top: 30px;
.changePlanButton {
padding-top: 15px;
}
}
.paymentPageFeatures {
h1, h2, h3 {
color: @gray-dark;
}
h3 {
font-size: 18px;
&:first-child {
margin-top: 0;
}
}
p {
font-size: 14px;
color: @gray;
}
.small {
font-size: 12px;
}
h1,
h2,
h3 {
color: @gray-dark;
}
h3 {
font-size: 18px;
&:first-child {
margin-top: 0;
}
}
p {
font-size: 14px;
color: @gray;
}
.small {
font-size: 12px;
}
}
.plansPageStudentLink {
margin-left: 20px;
margin-top: 20px;
margin-left: 20px;
margin-top: 20px;
}
/**
@ -167,235 +176,239 @@
/* Media Queries */
@media (max-width: @screen-sm-max) {
.plans {
.card-group {
/*override style in cards.less */
.card {
margin-left: 0;
margin-right: 0;
}
.card-highlighted {
margin-top: @line-height-computed!important;
}
}
.circle-img {
float: left;
margin: 0 15px;
}
ul.nav-pills {
margin-bottom: @margin-xs;
li {
margin-bottom: @margin-sm;
}
}
}
.plans {
.card-group {
/*override style in cards.less */
.card {
margin-left: 0;
margin-right: 0;
}
.card-highlighted {
margin-top: @line-height-computed!important;
}
}
.circle-img {
float: left;
margin: 0 15px;
}
ul.nav-pills {
margin-bottom: @margin-xs;
li {
margin-bottom: @margin-sm;
}
}
}
}
@media (min-width: @screen-md-min) {
.plans {
blockquote {
margin-bottom: 0;
}
.faq {
.row:nth-child(2) {
h3 {
margin-top: 0;
}
}
}
.top-switch {
.currency-dropdown {
margin-right: -15px;
}
}
}
.plans {
blockquote {
margin-bottom: 0;
}
.faq {
.row:nth-child(2) {
h3 {
margin-top: 0;
}
}
}
.top-switch {
.currency-dropdown {
margin-right: -15px;
}
}
}
}
.student-disclaimer {
font-size: 14px; /* match .paymentPageFeatures p */
color: @gray; /* match .paymentPageFeatures p */
margin: 12.5px 0 0 0;
font-size: 14px; /* match .paymentPageFeatures p */
color: @gray; /* match .paymentPageFeatures p */
margin: 12.5px 0 0 0;
}
/**
Plans Table
*/
.plans-table {
border: 1px solid @gray-lighter;
background-color: @plans-non-highlighted;
margin: @best-val-height 0 15px 0;
table-layout: fixed;
width: 100%;
border: 1px solid @gray-lighter;
background-color: @plans-non-highlighted;
margin: @best-val-height 0 15px 0;
table-layout: fixed;
width: 100%;
th, td {
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box; /* needed for firefox when there is bg color */
border: 1px solid @gray-lighter;
padding: 6px;
text-align: center;
vertical-align: middle;
}
th,
td {
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box; /* needed for firefox when there is bg color */
border: 1px solid @gray-lighter;
padding: 6px;
text-align: center;
vertical-align: middle;
}
td {
font-weight: bold;
}
td {
font-weight: bold;
}
th {
border-top: 0;
font-family: @headings-font-family;
font-size: @font-size-h2;
font-weight: @headings-font-weight;
hyphens: auto;
line-height: @headings-line-height;
padding: 18px;
}
th {
border-top: 0;
font-family: @headings-font-family;
font-size: @font-size-h2;
font-weight: @headings-font-weight;
hyphens: auto;
line-height: @headings-line-height;
padding: 18px;
}
th:first-child, td:first-child {
border-left: 0;
}
th:first-child,
td:first-child {
border-left: 0;
}
th:last-child, td:last-child {
border-right: 0;
}
th:last-child,
td:last-child {
border-right: 0;
}
td:first-child {
font-weight: bold;
padding-left: 18px;
text-align: left;
}
td:first-child {
font-weight: bold;
padding-left: 18px;
text-align: left;
}
tr:first-child {
th {
position: relative;
/* keep here position here, otherwise messes up border on safari */
}
}
tr:first-child {
th {
position: relative;
/* keep here position here, otherwise messes up border on safari */
}
}
tr:last-child {
td {
border-bottom: 0;
padding: 18px;
}
/* highlighted column */
td:nth-child(3) {
position: relative;
/* keep here position here, otherwise messes up border on safari when there is a bg color */
&:before {
/* needed for safafi */
border-top: 1px solid @border-color-base;
content: '';
left: 0;
position: absolute;
top: -1px;
width: 100%;
}
}
td:first-child {
border: 0;
}
}
tr:last-child {
td {
border-bottom: 0;
padding: 18px;
}
/* highlighted column */
td:nth-child(3) {
position: relative;
/* keep here position here, otherwise messes up border on safari when there is a bg color */
&:before {
/* needed for safafi */
border-top: 1px solid @border-color-base;
content: '';
left: 0;
position: absolute;
top: -1px;
width: 100%;
}
}
td:first-child {
border: 0;
}
}
.fa-check {
color: @green;
}
.fa-check {
color: @green;
}
/* accessibility fixes */
.small {
color: @gray-med;
}
/* accessibility fixes */
.small {
color: @gray-med;
}
/* highlighted column */
td:nth-child(3), th:nth-child(3) {
background-color: white;
border-left: @border-width-base solid @border-color-base;
border-right: @border-width-base solid @border-color-base;
}
.outer {
left: -@border-width-base;
right: -@border-width-base;
position: absolute;
/* highlighted column */
td:nth-child(3),
th:nth-child(3) {
background-color: white;
border-left: @border-width-base solid @border-color-base;
border-right: @border-width-base solid @border-color-base;
}
.outer {
left: -@border-width-base;
right: -@border-width-base;
position: absolute;
.outer-content {
background: white;
border: @border-width-base solid @border-color-base;
border-radius: @border-radius-base;
font-size: @font-size-base;
font-family: @font-family-sans-serif;
font-weight: bold;
height: @best-val-height;
padding-top: 10px;
}
}
.outer.outer-top {
top: -@best-val-height;
.outer-content {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
}
}
.outer.outer-btm {
bottom: -@best-val-height/2;
.outer-content {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: 0;
height: @best-val-height/2;
}
}
.outer-content {
background: white;
border: @border-width-base solid @border-color-base;
border-radius: @border-radius-base;
font-size: @font-size-base;
font-family: @font-family-sans-serif;
font-weight: bold;
height: @best-val-height;
padding-top: 10px;
}
}
.outer.outer-top {
top: -@best-val-height;
.outer-content {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
}
}
.outer.outer-btm {
bottom: -@best-val-height / 2;
.outer-content {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: 0;
height: @best-val-height / 2;
}
}
/* highlight rows on hover */
tr:hover {
td {
background-color: @table-hover-bg;
}
}
tr:first-child:hover {
background-color: transparent;
}
tr:last-child:hover {
background-color: transparent;
td {
background-color: transparent;
}
}
/* highlight rows on hover */
tr:hover {
td {
background-color: @table-hover-bg;
}
}
tr:first-child:hover {
background-color: transparent;
}
tr:last-child:hover {
background-color: transparent;
td {
background-color: transparent;
}
}
/* tooltip */
sup {
color: @brand-secondary;
cursor: pointer;
margin-left: 5px;
}
.tooltip.in {
min-width: 200px
}
/* tooltip */
sup {
color: @brand-secondary;
cursor: pointer;
margin-left: 5px;
}
.tooltip.in {
min-width: 200px;
}
/* Media Queries */
@media (max-width: @screen-sm-max) {
font-size: @font-size-small;
hyphens: auto;
margin-top: @best-val-height*2;
th {
font-size: @font-size-base;
padding-left: @padding-xs;
padding-right: @padding-xs;
}
td:first-child {
padding-left: @padding-xs;
}
tr:last-child {
td {
padding: @padding-xs;
.btn {
word-break: normal;
}
}
}
.best-value {
line-height: 1;
}
.btn {
font-size: @font-size-small;
}
}
}
/* Media Queries */
@media (max-width: @screen-sm-max) {
font-size: @font-size-small;
hyphens: auto;
margin-top: @best-val-height*2;
th {
font-size: @font-size-base;
padding-left: @padding-xs;
padding-right: @padding-xs;
}
td:first-child {
padding-left: @padding-xs;
}
tr:last-child {
td {
padding: @padding-xs;
.btn {
word-break: normal;
}
}
}
.best-value {
line-height: 1;
}
.btn {
font-size: @font-size-small;
}
}
}

17
services/web/frontend/stylesheets/app/publisher-hub.less
View file

@ -1,6 +1,6 @@
#publisher-hub{
#publisher-hub {
.recent-activity {
.hub-big-number{
.hub-big-number {
text-align: right;
padding-right: 15px;
}
@ -8,19 +8,19 @@
#templates-container {
width: 100%;
tr{
tr {
border: 1px solid @ol-blue-gray-0;
}
td{
td {
padding: 15px;
}
td:last-child {
text-align: right;
}
.title-cell{
.title-cell {
max-width: 300px;
}
.title-text{
.title-text {
font-weight: bold;
}
.hub-big-number {
@ -29,7 +29,8 @@
padding-top: 10px;
text-align: right;
}
.hub-number-label, .since {
.hub-number-label,
.since {
width: 35%;
float: right;
@media screen and (max-width: 940px) {
@ -45,4 +46,4 @@
font-size: 14px;
}
}
}
}

2
services/web/frontend/stylesheets/app/recurly.less
View file

@ -1,3 +1,3 @@
.recurly-hosted-field {
&:extend(.form-control);
&:extend(.form-control);
}

6
services/web/frontend/stylesheets/app/register.less
View file

@ -1,4 +1,4 @@
.registration_message {
text-align:center;
padding-bottom: 20px;
}
text-align: center;
padding-bottom: 20px;
}

874
services/web/frontend/stylesheets/app/review-features-page.less
View file

@ -6,456 +6,456 @@
@rfp-sl-red: @red;
@rfp-rp-blue: @rp-type-blue;
@rfp-rp-blue-light: #F8F9FD;
@rfp-rp-blue-light: #f8f9fd;
@rfp-rp-blue-dark: shade(@rfp-rp-blue, 50%);
@rfp-rp-blue-darker: shade(@rfp-rp-blue, 65%);
@rfp-rp-blue-darkest: shade(@rfp-rp-blue, 75%);
@rfp-card-shadow: 0 0 30px 5px rgba(0, 0, 0, .3);
@rfp-card-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.3);
@rfp-border-radius: 5px;
@rfp-header-height: 80px;
@rfp-header-height-collapsed: 50px;
.rfp-main {
background-color: @content-alt-bg-color;
font-size: 18px;
min-width: 240px;
background-color: @content-alt-bg-color;
font-size: 18px;
min-width: 240px;
}
// Typographical scale and basics.
.rfp-h1 {
font-size: @rfp-h2-size;
margin-bottom: 1.6em;
color: inherit;
@media (min-width: @screen-xs-min) {
font-size: @rfp-h1-size;
}
}
.rfp-h1-masthead {
color: #FFF;
margin-bottom: 1em;
}
.rfp-h2 {
font-size: @rfp-h2-size;
margin-bottom: 1.6em;
color: inherit;
}
.rfp-h3 {
font-size: @rfp-h3-size;
margin-bottom: 1.6em;
color: inherit;
}
.rfp-h3-cta {
margin-top: 0;
margin-bottom: 40px;
}
.rfp-lead {
margin-bottom: 1.6em;
max-width: 30em;
margin-left: auto;
margin-right: auto;
@media (min-width: @screen-xs-min) {
font-size: @rfp-lead-size;
}
}
.rfp-lead-cta {
margin-top: 0;
margin-bottom: 40px;
}
.rfp-lead-strong {
font-weight: 700;
.rfp-section-masthead & {
margin-bottom: 0;
}
}
.rfp-p {
margin-bottom: 1.6em;
max-width: 30em;
margin-left: auto;
margin-right: auto;
.rfp-section-feature & {
margin-left: initial;
}
.rfp-section-feature-alt & {
margin-left: auto;
margin-right: initial;
}
}
.rfp-highlight {
font-weight: 700;
}
// Sections
.rfp-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2;
height: @rfp-header-height;
transition: height .2s;
background-color: fade(@rfp-rp-blue-darkest, 90%);
padding: 15px 20px;
min-width: 320px;
@media (min-width: @screen-xs-min) {
padding-left: 30px;
padding-right: 30px;
}
@media (min-width: @screen-sm-min) {
padding-left: 60px;
padding-right: 60px;
}
.rfp-main-header-collapsed & {
height: @rfp-header-height-collapsed;
padding-top: 10px;
padding-bottom: 10px;
}
}
.rfp-header-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
max-width: @container-large-desktop;
height: 100%;
margin: auto;
}
.rfp-header-logo-container,
.rfp-header-logo {
height: 100%;
}
.rfp-section {
padding: 30px;
text-align: center;
overflow: hidden;
@media (min-width: @screen-xs-min) {
padding: 30px;
}
@media (min-width: @screen-sm-min) {
padding: 60px;
}
}
.rfp-section-masthead {
color: #FFF;
background-size: cover;
background-position: center;
background-color: @rfp-rp-blue-darker;
padding-top: @rfp-header-height;
.rfp-lead {
opacity: 0;
transition: opacity 0.8s ease;
}
&.rfp-section-masthead-in {
.rfp-lead {
opacity: 1;
}
}
}
.rfp-section-blockquote {
position: relative;
padding-top: 30px;
padding-bottom: 30px;
background-color: @brand-secondary;
box-shadow: @rfp-card-shadow;
}
.rfp-section-feature {
display: block;
text-align: left;
@media (min-width: @screen-sm-min) {
.rfp-section-wrapper {
display: flex;
align-items: center;
}
}
}
.rfp-feature-description-container,
.rfp-feature-video-container {
flex: 0 0 50%;
}
.rfp-feature-description-container {
@media (min-width: @screen-sm-min) {
padding-right: 1em;
.rfp-section-feature-alt & {
padding-right: 0;
padding-left: 1em;
}
}
}
.rfp-feature-video-container {
@media (min-width: @screen-sm-min) {
padding-left: 1em;
.rfp-section-feature-alt & {
padding-left: 0;
padding-right: 1em;
order: -1;
}
}
}
.rfp-section-feature-alt {
color: #FFF;
background-color: @ol-blue-gray-5;
@media (min-width: @screen-sm-min) {
text-align: right;
}
}
.rfp-section-feature-white {
background: #ffffff;
}
.rfp-section-testimonials {
background-color: @rfp-rp-blue-darkest;
}
.rfp-section-final {
background-color: @rfp-rp-blue-darker;
}
.rfp-section-wrapper {
max-width: @container-large-desktop;
margin: 0 auto;
}
// Elements
.rfp-h1-masthead-portion {
display: inline-block;
transform: translate(150px, 0);
opacity: 0;
transition: transform 0.8s ease 0s, opacity 0.8s ease 0s;
&:nth-child(2) {
transition-delay: 0.5s, 0.5s;
}
&:nth-child(3) {
transition-delay: 0.5s, 0.5s;
}
&:nth-child(4) {
transition-delay: 1s, 1s;
}
&:nth-child(5) {
transition-delay: 1s, 1s;
}
// Typographical scale and basics.
.rfp-h1 {
font-size: @rfp-h2-size;
margin-bottom: 1.6em;
color: inherit;
@media (min-width: @screen-xs-min) {
font-size: @rfp-h1-size;
}
}
.rfp-h1-masthead {
color: #fff;
margin-bottom: 1em;
}
.rfp-h2 {
font-size: @rfp-h2-size;
margin-bottom: 1.6em;
color: inherit;
}
.rfp-h3 {
font-size: @rfp-h3-size;
margin-bottom: 1.6em;
color: inherit;
}
.rfp-h3-cta {
margin-top: 0;
margin-bottom: 40px;
}
.rfp-lead {
margin-bottom: 1.6em;
max-width: 30em;
margin-left: auto;
margin-right: auto;
@media (min-width: @screen-xs-min) {
font-size: @rfp-lead-size;
}
}
.rfp-lead-cta {
margin-top: 0;
margin-bottom: 40px;
}
.rfp-lead-strong {
font-weight: 700;
.rfp-section-masthead & {
margin-bottom: 0;
}
}
.rfp-p {
margin-bottom: 1.6em;
max-width: 30em;
margin-left: auto;
margin-right: auto;
.rfp-section-feature & {
margin-left: initial;
}
.rfp-section-feature-alt & {
margin-left: auto;
margin-right: initial;
}
}
.rfp-highlight {
font-weight: 700;
}
// Sections
.rfp-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2;
height: @rfp-header-height;
transition: height 0.2s;
background-color: fade(@rfp-rp-blue-darkest, 90%);
padding: 15px 20px;
min-width: 320px;
@media (min-width: @screen-xs-min) {
padding-left: 30px;
padding-right: 30px;
}
@media (min-width: @screen-sm-min) {
padding-left: 60px;
padding-right: 60px;
}
.rfp-main-header-collapsed & {
height: @rfp-header-height-collapsed;
padding-top: 10px;
padding-bottom: 10px;
}
}
.rfp-header-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
max-width: @container-large-desktop;
height: 100%;
margin: auto;
}
.rfp-header-logo-container,
.rfp-header-logo {
height: 100%;
}
.rfp-section {
padding: 30px;
text-align: center;
overflow: hidden;
@media (min-width: @screen-xs-min) {
padding: 30px;
}
@media (min-width: @screen-sm-min) {
padding: 60px;
}
}
.rfp-section-masthead {
color: #fff;
background-size: cover;
background-position: center;
background-color: @rfp-rp-blue-darker;
padding-top: @rfp-header-height;
.rfp-lead {
opacity: 0;
transition: opacity 0.8s ease;
}
&.rfp-section-masthead-in {
.rfp-lead {
opacity: 1;
}
}
}
.rfp-section-blockquote {
position: relative;
padding-top: 30px;
padding-bottom: 30px;
background-color: @brand-secondary;
box-shadow: @rfp-card-shadow;
}
.rfp-section-feature {
display: block;
text-align: left;
@media (min-width: @screen-sm-min) {
.rfp-section-wrapper {
display: flex;
align-items: center;
}
}
}
.rfp-feature-description-container,
.rfp-feature-video-container {
flex: 0 0 50%;
}
.rfp-feature-description-container {
@media (min-width: @screen-sm-min) {
padding-right: 1em;
.rfp-section-feature-alt & {
padding-right: 0;
padding-left: 1em;
}
}
}
.rfp-feature-video-container {
@media (min-width: @screen-sm-min) {
padding-left: 1em;
.rfp-section-feature-alt & {
padding-left: 0;
padding-right: 1em;
order: -1;
}
}
}
.rfp-section-feature-alt {
color: #fff;
background-color: @ol-blue-gray-5;
@media (min-width: @screen-sm-min) {
text-align: right;
}
}
.rfp-section-feature-white {
background: #ffffff;
}
.rfp-section-testimonials {
background-color: @rfp-rp-blue-darkest;
}
.rfp-section-final {
background-color: @rfp-rp-blue-darker;
}
.rfp-section-wrapper {
max-width: @container-large-desktop;
margin: 0 auto;
}
// Elements
.rfp-h1-masthead-portion {
display: inline-block;
transform: translate(150px, 0);
opacity: 0;
transition: transform 0.8s ease 0s, opacity 0.8s ease 0s;
&:nth-child(2) {
transition-delay: 0.5s, 0.5s;
}
&:nth-child(3) {
transition-delay: 0.5s, 0.5s;
}
&:nth-child(4) {
transition-delay: 1s, 1s;
}
&:nth-child(5) {
transition-delay: 1s, 1s;
}
.rfp-section-masthead-in & {
transform: translate(0, 0);
opacity: 1;
}
}
.rfp-video {
max-width: 100%;
box-shadow: @rfp-card-shadow;
border-radius: @rfp-border-radius;
}
.rfp-video-masthead {
width: 270px;
height: 163px;
margin-bottom: 2em;
transform: translate(0, 100px);
opacity: 0;
transition: transform 0.8s ease 1s, opacity 0.8s ease 1s;
box-shadow: none;
max-width: none;
.rfp-section-masthead-in & {
transform: translate(0, 0);
opacity: 1;
}
}
.rfp-video {
max-width: 100%;
box-shadow: @rfp-card-shadow;
border-radius: @rfp-border-radius;
}
.rfp-video-masthead {
width: 270px;
height: 163px;
margin-bottom: 2em;
transform: translate(0, 100px);
opacity: 0;
transition: transform 0.8s ease 1s, opacity 0.8s ease 1s;
box-shadow: none;
max-width: none;
@media (min-width: @screen-xs-min) {
width: 400px;
height: 241px;
}
@media (min-width: 600px) {
width: 525px;
height: 316px;
}
@media (min-width: @screen-sm-min) {
width: 633px;
height: 381px;
}
@media (min-width: @screen-sm-min) {
width: 697px;
height: 420px;
}
.rfp-section-masthead-in & {
transform: translate(0, 0);
opacity: 1;
box-shadow: @rfp-card-shadow;
}
}
.rfp-video-anim {
transition: transform 0.8s ease, opacity 0.8s ease;
transform: translate(100%, 0);
opacity: 0;
}
.rfp-video-anim-alt {
transform: translate(-100%, 0);
}
.rfp-video-anim-in {
transform: translate(0, 0);
opacity: 1;
}
.rfp-quote-section {
@media (min-width: @screen-md-min) {
display: flex;
}
}
.rfp-quote {
display: block;
width: 100%;
padding: 20px 40px;
border-left: 0;
max-width: 30em;
font-size: @rfp-lead-size;
quotes: "\201C" "\201D";
box-shadow: @rfp-card-shadow;
border-radius: @rfp-border-radius;
background-color: #FFF;
color: @rfp-rp-blue-dark;
font-size: 1em;
margin: 0 auto 20px;
@media (min-width: @screen-xs-min) {
width: 400px;
height: 241px;
}
@media (min-width: 600px) {
width: 525px;
height: 316px;
}
@media (min-width: @screen-sm-min) {
width: 633px;
height: 381px;
}
@media (min-width: @screen-sm-min) {
width: 697px;
height: 420px;
}
.rfp-section-masthead-in & {
transform: translate(0, 0);
opacity: 1;
box-shadow: @rfp-card-shadow;
}
}
.rfp-video-anim {
transition: transform 0.8s ease, opacity 0.8s ease;
transform: translate(100%, 0);
opacity: 0;
}
.rfp-video-anim-alt {
transform: translate(-100%, 0);
}
.rfp-video-anim-in {
transform: translate(0, 0);
opacity: 1;
}
.rfp-quote-section {
@media (min-width: @screen-md-min) {
display: flex;
}
}
.rfp-quote {
display: block;
width: 100%;
padding: 20px 40px;
border-left: 0;
max-width: 30em;
font-size: @rfp-lead-size;
quotes: '\201C' '\201D';
box-shadow: @rfp-card-shadow;
border-radius: @rfp-border-radius;
background-color: #fff;
color: @rfp-rp-blue-dark;
font-size: 1em;
margin: 0 auto 20px;
@media (min-width: @screen-xs-min) {
font-size: @rfp-lead-size;
}
@media (min-width: @screen-xs-min) {
font-size: @rfp-lead-size;
}
@media (min-width: @screen-md-min) {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 0 1 50%;
margin-right: 20px;
}
// Override weird Boostrap default.
p {
display: block;
}
&:last-of-type {
@media (min-width: @screen-md-min) {
margin-right: 0;
}
}
&::before {
content: none;
}
}
.rfp-quote-main {
color: #ffffff;
display: block;
max-width: none;
border-left: 0;
margin: 0 auto;
padding: 0;
quotes: "\201C" "\201D";
font-size: @rfp-lead-size;
@media (min-width: @screen-md-min) {
display: flex;
}
// Override weird Boostrap default.
p {
display: block;
}
&::before {
content: none;
}
}
.rfp-quoted-text {
position: relative;
display: inline-block;
font-family: @font-family-serif;
font-style: italic;
text-align: left;
margin: 0 0 40px 0;
&::before {
content: open-quote;
display: block;
position: absolute;
font-family: @font-family-serif;
font-size: @rfp-lead-size;
line-height: inherit;
color: inherit;
left: -0.75em;
}
.rfp-quote-main & {
@media (min-width: @screen-md-min) {
flex: 1 1 70%;
margin: auto 40px auto auto;
}
}
}
.rfp-quoted-person {
display: inline-block;
font-size: .8em;
.rfp-quote-main & {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 30%;
}
}
.rfp-quoted-person-name {
margin: 0;
}
.rfp-quoted-person-affil {
margin: 0;
font-size: .8em;
&:hover,
&:focus {
text-decoration: none;
cursor: pointer;
}
.rfp-quote-main & {
color: #FFF;
&:hover,
&:focus {
color: #FFF;
}
}
}
.rfp-quoted-person-photo {
border-radius: 3em;
width: 6em;
margin-bottom: 20px;
.rfp-quote-main & {
margin-bottom: 0;
margin-right: 20px;
}
}
.rfp-users {
display: flex;
flex-wrap: wrap;
margin: 0 1em 2em;
@media (min-width: @screen-md-min) {
flex-wrap: nowrap;
align-items: center;
}
}
.rfp-user-container {
flex: 0 0 100%;
padding: 10px;
@media (min-width: @screen-xs-min) {
flex-basis: 50%;
}
@media (min-width: @screen-md-min) {
flex-basis: 25%;
padding: 20px;
}
}
.rfp-user-logo {
max-width: 100%;
}
.rfp-cta-container {
max-width: 40em;
margin: 0 auto;
padding: 40px;
background-color: #FFF;
color: @rfp-rp-blue-dark;
box-shadow: @rfp-card-shadow;
border-radius: @rfp-border-radius;
}
.rfp-cta-header {
font-size: 1em;
padding: .2em 1em;
}
.rfp-cta-main {
display: block;
transition: transform 0.25s;
transform: translate(0, 0);
}
.rfp-cta-extra {
display: block;
position: absolute;
left: 50%;
text-transform: uppercase;
transition: opacity 0.25s, transform 0.25s;
transform: translate(-50%, 100%);
opacity: 0;
font-size: 0.5em;
}
@media (min-width: @screen-md-min) {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 0 1 50%;
margin-right: 20px;
}
// Override weird Boostrap default.
p {
display: block;
}
&:last-of-type {
@media (min-width: @screen-md-min) {
margin-right: 0;
}
}
&::before {
content: none;
}
}
.rfp-quote-main {
color: #ffffff;
display: block;
max-width: none;
border-left: 0;
margin: 0 auto;
padding: 0;
quotes: '\201C' '\201D';
font-size: @rfp-lead-size;
@media (min-width: @screen-md-min) {
display: flex;
}
// Override weird Boostrap default.
p {
display: block;
}
&::before {
content: none;
}
}
.rfp-quoted-text {
position: relative;
display: inline-block;
font-family: @font-family-serif;
font-style: italic;
text-align: left;
margin: 0 0 40px 0;
&::before {
content: open-quote;
display: block;
position: absolute;
font-family: @font-family-serif;
font-size: @rfp-lead-size;
line-height: inherit;
color: inherit;
left: -0.75em;
}
.rfp-quote-main & {
@media (min-width: @screen-md-min) {
flex: 1 1 70%;
margin: auto 40px auto auto;
}
}
}
.rfp-quoted-person {
display: inline-block;
font-size: 0.8em;
.rfp-quote-main & {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 30%;
}
}
.rfp-quoted-person-name {
margin: 0;
}
.rfp-quoted-person-affil {
margin: 0;
font-size: 0.8em;
&:hover,
&:focus {
text-decoration: none;
cursor: pointer;
}
.rfp-quote-main & {
color: #fff;
&:hover,
&:focus {
color: #fff;
}
}
}
.rfp-quoted-person-photo {
border-radius: 3em;
width: 6em;
margin-bottom: 20px;
.rfp-quote-main & {
margin-bottom: 0;
margin-right: 20px;
}
}
.rfp-users {
display: flex;
flex-wrap: wrap;
margin: 0 1em 2em;
@media (min-width: @screen-md-min) {
flex-wrap: nowrap;
align-items: center;
}
}
.rfp-user-container {
flex: 0 0 100%;
padding: 10px;
@media (min-width: @screen-xs-min) {
flex-basis: 50%;
}
@media (min-width: @screen-md-min) {
flex-basis: 25%;
padding: 20px;
}
}
.rfp-user-logo {
max-width: 100%;
}
.rfp-cta-container {
max-width: 40em;
margin: 0 auto;
padding: 40px;
background-color: #fff;
color: @rfp-rp-blue-dark;
box-shadow: @rfp-card-shadow;
border-radius: @rfp-border-radius;
}
.rfp-cta-header {
font-size: 1em;
padding: 0.2em 1em;
}
.rfp-cta-main {
display: block;
transition: transform 0.25s;
transform: translate(0, 0);
}
.rfp-cta-extra {
display: block;
position: absolute;
left: 50%;
text-transform: uppercase;
transition: opacity 0.25s, transform 0.25s;
transform: translate(-50%, 100%);
opacity: 0;
font-size: 0.5em;
}

60
services/web/frontend/stylesheets/app/sidebar-v2-dash-pane.less
View file

@ -1,40 +1,42 @@
.project-list-sidebar-wrapper {
height: 100%;
display: flex;
flex-direction: column;
height: 100%;
display: flex;
flex-direction: column;
}
.project-list-sidebar {
flex-grow: 1;
height: 100%;
padding-left: 15px;
padding-right: 15px;
flex-grow: 1;
height: 100%;
padding-left: 15px;
padding-right: 15px;
}
.project-list-sidebar-v2-pane {
flex-grow: 0;
flex-shrink: 0;
text-align: center;
background-color: @v2-dash-pane-bg;
color: @v2-dash-pane-color;
font-size: 13px;
padding: @line-height-computed / 2;
flex-grow: 0;
flex-shrink: 0;
text-align: center;
background-color: @v2-dash-pane-bg;
color: @v2-dash-pane-color;
font-size: 13px;
padding: @line-height-computed / 2;
}
.project-list-sidebar-v2-pane a {
color: @v2-dash-pane-link-color;
text-decoration: underline;
}
.project-list-sidebar-v2-pane a {
color: @v2-dash-pane-link-color;
text-decoration: underline;
}
.project-list-sidebar-v2-pane a:hover {
text-decoration: none;
}
.project-list-sidebar-v2-pane a:hover {
text-decoration: none;
}
.project-list-sidebar-v2-pane-toggle {
color: @v2-dash-pane-toggle-color;
padding: 0;
line-height: 1;
&:hover, &:active, &:focus {
color: @v2-dash-pane-toggle-color;
}
}
.project-list-sidebar-v2-pane-toggle {
color: @v2-dash-pane-toggle-color;
padding: 0;
line-height: 1;
&:hover,
&:active,
&:focus {
color: @v2-dash-pane-toggle-color;
}
}

1
services/web/frontend/stylesheets/app/sprites.less
View file

@ -1,4 +1,3 @@
.sprite-icon {
background-image: url('/img/sprite.png');
}

110
services/web/frontend/stylesheets/app/subscription.less
View file

@ -1,91 +1,91 @@
.form-helper {
display: inline-block;
width: 1.3em;
height: 1.3em;
line-height: 1.3;
vertical-align: initial;
background-color: @gray;
color: #FFF;
font-weight: bolder;
border-radius: 50%;
display: inline-block;
width: 1.3em;
height: 1.3em;
line-height: 1.3;
vertical-align: initial;
background-color: @gray;
color: #fff;
font-weight: bolder;
border-radius: 50%;
&:hover,
&:focus {
color: #FFF;
text-decoration: none;
}
&:hover,
&:focus {
color: #fff;
text-decoration: none;
}
}
.price-breakdown {
text-align: center;
margin-bottom: -10px;
text-align: center;
margin-bottom: -10px;
}
.input-feedback-message {
display: none;
font-size: 0.8em;
display: none;
font-size: 0.8em;
.has-error & {
display: inline-block;
}
.has-error & {
display: inline-block;
}
}
.payment-submit {
padding-top: (@line-height-computed / 2);
padding-top: (@line-height-computed / 2);
}
.payment-method-toggle {
margin-bottom: (@line-height-computed / 2);
margin-bottom: (@line-height-computed / 2);
&-switch {
display: inline-block;
width: 50%;
text-align: center;
border: solid 1px @gray-lighter;
border-radius: @border-radius-large 0 0 @border-radius-large;
padding: (@line-height-computed / 2);
color: @btn-switch-color;
&-switch {
display: inline-block;
width: 50%;
text-align: center;
border: solid 1px @gray-lighter;
border-radius: @border-radius-large 0 0 @border-radius-large;
padding: (@line-height-computed / 2);
color: @btn-switch-color;
&:hover,
&:focus {
color: @btn-switch-color;
text-decoration: none;
}
&:hover,
&:focus {
color: @btn-switch-color;
text-decoration: none;
}
&:hover {
color: @btn-switch-hover-color;
}
&:hover {
color: @btn-switch-hover-color;
}
& + & {
border-left-width: 0;
border-radius: 0 @border-radius-large @border-radius-large 0;
}
& + & {
border-left-width: 0;
border-radius: 0 @border-radius-large @border-radius-large 0;
}
&-selected {
color: @link-active-color;
box-shadow: inset 0 -2px 0 0;
&-selected {
color: @link-active-color;
box-shadow: inset 0 -2px 0 0;
&:hover,
&:focus {
color: @link-active-color;
}
}
}
&:hover,
&:focus {
color: @link-active-color;
}
}
}
}
.team-invite .message {
margin: 3em 0;
margin: 3em 0;
}
.capitalised {
text-transform:capitalize;
text-transform: capitalize;
}
.three-d-secure-container {
> .three-d-secure-recurly-container {
height: 400px;
> div[data-recurly="three-d-secure-container"] {
> div[data-recurly='three-d-secure-container'] {
height: 100%;
}
}

284
services/web/frontend/stylesheets/app/templates-v2.less
View file

@ -1,203 +1,203 @@
.template-title {
margin-bottom: @margin-xl;
margin-bottom: @margin-xl;
}
.field-title {
font-weight: bold;
font-weight: bold;
}
.filters {
float: right;
margin-bottom: @margin-lg;
float: right;
margin-bottom: @margin-lg;
@media (max-width: @screen-md-min) {
float: none;
}
@media (max-width: @screen-md-min) {
float: none;
}
}
.cta-links {
.cta-link.btn {
margin: 0 @margin-sm @margin-sm 0;
}
.cta-link.btn {
margin: 0 @margin-sm @margin-sm 0;
}
}
.popular-tags {
.template-thumbnail {
margin: 0 0 1em 0!important;
}
.template-thumbnail {
margin: 0 0 1em 0 !important;
}
}
.tag-link {
margin: 0 @margin-xs @margin-sm 0;
max-width: 100%;
white-space: inherit;
margin: 0 @margin-xs @margin-sm 0;
max-width: 100%;
white-space: inherit;
}
.template-abstract {
word-break: break-word;
hyphens: auto;
a {
hyphens: none;
}
word-break: break-word;
hyphens: auto;
a {
hyphens: none;
}
}
.template-thumbnail {
display: inline-block;
margin: 0 0 2em;
width: 100%;
display: inline-block;
margin: 0 0 2em;
width: 100%;
.thumbnail {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 0 0 @margin-sm 0;
padding:0px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
.thumbnail {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 0 0 @margin-sm 0;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
h3 {
color:@link-color;
margin: 10px 0px 10px 20px;
}
h3 {
color: @link-color;
margin: 10px 0px 10px 20px;
}
&.thumbnail-tag {
height: 100px;
}
}
&.thumbnail-tag {
height: 100px;
}
}
.caption {
// Override ShareLatex template styles
background: none;
border: none;
text-align: center;
}
.caption {
// Override ShareLatex template styles
background: none;
border: none;
text-align: center;
}
.caption__description {
font-style: italic;
padding: 0 0 5px 0;
.text-overflow();
}
.caption__description {
font-style: italic;
padding: 0 0 5px 0;
.text-overflow();
}
.caption__title {
display: inline-block;
width: 100%;
text-align: center;
.text-overflow();
}
.caption__title {
display: inline-block;
width: 100%;
text-align: center;
.text-overflow();
}
}
.template-large-pdf-preview {
border: solid 1px @gray-lightest;
margin-top: @margin-lg;
border: solid 1px @gray-lightest;
margin-top: @margin-lg;
}
/* Media Queries */
@media (max-width: @screen-xs-max) {
.templates-container {
column-count: 2;
column-gap: 2em;
}
.templates-container {
column-count: 2;
column-gap: 2em;
}
}
@media (min-width: @screen-sm-min) {
.templates-container {
&.use-column {
column-count: 3;
column-gap: 3em;
}
&.use-percent {
margin: 0 -1.5em;
.template-thumbnail {
width: 33.3333333%;
padding: 0 1.5em;
}
}
}
.templates-container {
&.use-column {
column-count: 3;
column-gap: 3em;
}
&.use-percent {
margin: 0 -1.5em;
.template-thumbnail {
width: 33.3333333%;
padding: 0 1.5em;
}
}
}
}
@media (min-width: @screen-md-min) {
.template-large-pdf-preview {
margin-top: 0;
}
.template-large-pdf-preview {
margin-top: 0;
}
}
.section-tags {
margin-bottom: @margin-xl;
margin-top: @margin-md;
margin-bottom: @margin-xl;
margin-top: @margin-md;
}
.search__container--addsearch {
.search__input-bar {
display: flex;
}
.search__input-bar {
display: flex;
}
.search__input {
flex: 1;
margin-right: 10px;
padding: 0 10px;
}
.search__input {
flex: 1;
margin-right: 10px;
padding: 0 10px;
}
// AddSearch overrides
#addsearch-results {
min-height: 0 !important;
// AddSearch overrides
#addsearch-results {
min-height: 0 !important;
.addsearch-result-item-container {
background-size: auto 80px !important; // Resize image to be smaller
padding: 10px;
margin-left: 10px;
margin-right: 10px;
border-bottom: 2px solid rgb(236, 236, 236);
}
.addsearch-result-item-container {
background-size: auto 80px !important; // Resize image to be smaller
padding: 10px;
margin-left: 10px;
margin-right: 10px;
border-bottom: 2px solid rgb(236, 236, 236);
}
.addsearch-result-item-sub {
min-height: 0 !important;
background: none !important;
border-bottom: none !important;
.addsearch-result-item-sub {
min-height: 0 !important;
background: none !important;
border-bottom: none !important;
h2 {
font-family: @font-family-sans-serif;
}
h2 {
font-family: @font-family-sans-serif;
}
// Unfortunately AddSearch doesn't add very useful classes, so have to use
// some horrible nesting :/
& > div {
min-height: 0 !important;
padding-left: 90px !important;
// Unfortunately AddSearch doesn't add very useful classes, so have to use
// some horrible nesting :/
& > div {
min-height: 0 !important;
padding-left: 90px !important;
// Hide some unnecessary metadata
span {
display: none !important;
}
}
// Hide some unnecessary metadata
span {
display: none !important;
}
}
a {
color: @ol-green !important;
}
a {
color: @ol-green !important;
}
&:hover a {
color: @ol-dark-green !important;
}
}
}
&:hover a {
color: @ol-dark-green !important;
}
}
}
#addsearch-results-bottom {
height: auto !important;
background: none !important;
padding-top: 0 !important;
#addsearch-results-bottom {
height: auto !important;
background: none !important;
padding-top: 0 !important;
#addsearch-rp-paging {
margin-bottom: 10px;
#addsearch-rp-paging {
margin-bottom: 10px;
a {
color: @ol-green !important;
a {
color: @ol-green !important;
&.currentResultPage {
color: @ol-blue-gray-5 !important;
}
}
}
}
&.currentResultPage {
color: @ol-blue-gray-5 !important;
}
}
}
}
#addsearch-logo {
display: none !important;
}
#addsearch-logo {
display: none !important;
}
}

88
services/web/frontend/stylesheets/app/templates.less
View file

@ -1,69 +1,69 @@
.template-page-header {
padding-top: unit(@line-height-base,rem);
h1, h2 {
margin-top: 6px;
margin-right: @line-height-base * 5;
line-height: 1;
}
padding-top: unit(@line-height-base, rem);
h1,
h2 {
margin-top: 6px;
margin-right: @line-height-base * 5;
line-height: 1;
}
}
.template-thumbnail {
.thumbnail {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
img {
width: 100%;
}
}
.thumbnail {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);
img {
width: 100%;
}
}
a {
padding:0px;
h3 {
color:@link-color;
margin: 10px 0px 10px 20px;
}
}
.caption {
background: lighten(@gray-lightest, 3%);
border-top: 1px solid #ddd;
}
a {
padding: 0px;
h3 {
color: @link-color;
margin: 10px 0px 10px 20px;
}
}
.caption {
background: lighten(@gray-lightest, 3%);
border-top: 1px solid #ddd;
}
}
.template-section-header:extend(.page-header) {
margin-top: 0px;
margin-top: 0px;
}
.download-buttons, .social_buttons {
padding-top: 20px;
.download-buttons,
.social_buttons {
padding-top: 20px;
}
.sample-template {
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.3);
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.template-details-section {
padding-bottom: 20px;
padding-bottom: 20px;
.btn {
margin-left: 6px;
margin-left: 6px;
}
}
.searchResult {
h1 {
color:@link-color;
}
img {
max-width: 100%;
height: auto;
}
h1 {
color: @link-color;
}
img {
max-width: 100%;
height: auto;
}
}
.template-large-pdf-preview {
img {
max-width: 100%;
}
}
img {
max-width: 100%;
}
}

36
services/web/frontend/stylesheets/app/translations.less
View file

@ -1,23 +1,23 @@
.translations-message {
.system-message;
text-align:center;
img {
vertical-align: text-bottom;
margin-bottom: -1px;
}
.system-message;
text-align: center;
img {
vertical-align: text-bottom;
margin-bottom: -1px;
}
}
.translations-message when (@is-overleaf = true) {
.close {
color: #FFF;
opacity: 1;
text-shadow: none;
}
a {
color: #FFF;
&:hover,
&:focus {
color: #FFF;
}
}
.close {
color: #fff;
opacity: 1;
text-shadow: none;
}
a {
color: #fff;
&:hover,
&:focus {
color: #fff;
}
}
}

18
services/web/frontend/stylesheets/app/v1-badge.less
View file

@ -1,10 +1,10 @@
.v1-badge {
&:extend(.label);
&:extend(.label-default);
vertical-align: 11%;
padding: 1px 3px;
margin: 0 6px;
&:before {
content: "V1";
}
}
&:extend(.label);
&:extend(.label-default);
vertical-align: 11%;
padding: 1px 3px;
margin: 0 6px;
&:before {
content: 'V1';
}
}

348
services/web/frontend/stylesheets/app/wiki.less
View file

@ -1,95 +1,101 @@
.wiki {
.contents {
ul {
padding: 0;
li {
font-size: 14px;
list-style: none;
margin-bottom: 6px;
}
}
h2 {
font-size: 18px;
}
}
.contents {
ul {
padding: 0;
li {
font-size: 14px;
list-style: none;
margin-bottom: 6px;
}
}
img {
height: auto;
max-width: 100%;
}
.page-header {
a {
font-size: 0.8em;
line-height: 1;
}
}
.editsection {
display: none;
}
table {
th, td {
padding: (@line-height-computed / 4) (@line-height-computed / 2);
border-bottom: 1px solid @gray-lighter;
}
th {
font-weight: 700;
text-align: left;
font-family: @font-family-serif;
}
margin-bottom: @line-height-computed / 2;
}
.table-no-borders {
th, td {
border: 0px;
}
}
.example {
max-width: 100%;
h2 {
font-size: 18px;
}
}
.code {
pre {
background-color: @gray-lightest;
border-radius: 6px;
padding: (@line-height-computed / 2);
white-space: pre-wrap;
margin: 0;
}
}
.output {
text-align: center;
padding-top: 10px;
img {
width: auto;
height: auto;
max-width: 100%;
box-shadow: 0 1px 3px @gray-light;
border-radius: 6px;
}
}
}
@media (min-width: 1360px) {
.example {
margin-right: -200px;
}
}
@media (max-width: @screen-sm) {
.contents {
margin-top: @margin-lg;
}
}
/*<![CDATA[*/
.source-latex {line-height: normal;}
.source-latex li, .source-latex pre {
line-height: normal; border: 0px none white;
}
/**
img {
height: auto;
max-width: 100%;
}
.page-header {
a {
font-size: 0.8em;
line-height: 1;
}
}
.editsection {
display: none;
}
table {
th,
td {
padding: (@line-height-computed / 4) (@line-height-computed / 2);
border-bottom: 1px solid @gray-lighter;
}
th {
font-weight: 700;
text-align: left;
font-family: @font-family-serif;
}
margin-bottom: @line-height-computed / 2;
}
.table-no-borders {
th,
td {
border: 0px;
}
}
.example {
max-width: 100%;
.code {
pre {
background-color: @gray-lightest;
border-radius: 6px;
padding: (@line-height-computed / 2);
white-space: pre-wrap;
margin: 0;
}
}
.output {
text-align: center;
padding-top: 10px;
img {
width: auto;
height: auto;
max-width: 100%;
box-shadow: 0 1px 3px @gray-light;
border-radius: 6px;
}
}
}
@media (min-width: 1360px) {
.example {
margin-right: -200px;
}
}
@media (max-width: @screen-sm) {
.contents {
margin-top: @margin-lg;
}
}
/*<![CDATA[*/
.source-latex {
line-height: normal;
}
.source-latex li,
.source-latex pre {
line-height: normal;
border: 0px none white;
}
/**
* GeSHi Dynamically Generated Stylesheet
* --------------------------------------
* Dynamically generated stylesheet for latex
@ -98,53 +104,123 @@
* (http://qbnz.com/highlighter/ and http://geshi.org/)
* --------------------------------------
*/
.latex.source-latex .imp {font-weight: bold; color: red;}
.latex.source-latex li, .latex.source-latex .li1 {font-weight: normal; vertical-align:top;}
.latex.source-latex .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}
.latex.source-latex .li2 {font-weight: bold; vertical-align:top;}
.latex.source-latex .kw1 {color: #800000;}
.latex.source-latex .co1 {color: #2C922C; font-style: italic;}
.latex.source-latex .es0 {color: #000000; font-weight: bold;}
.latex.source-latex .sy0 {color: #E02020; }
.latex.source-latex .st0 {color: #000000;}
.latex.source-latex .re1 {color: #8020E0; font-weight: normal;}
.latex.source-latex .re2 {color: #C08020; font-weight: normal;}
.latex.source-latex .re3 {color: #8020E0; font-weight: normal;}
.latex.source-latex .re4 {color: #800000; font-weight: normal;}
.latex.source-latex .re5 {color: #00008B; font-weight: bold;}
.latex.source-latex .re6 {color: #800000; font-weight: normal;}
.latex.source-latex .re7 {color: #0000D0; font-weight: normal;}
.latex.source-latex .re8 {color: #C00000; font-weight: normal;}
.latex.source-latex .re9 {color: #2020C0; font-weight: normal;}
.latex.source-latex .re10 {color: #800000; font-weight: normal;}
.latex.source-latex .re11 {color: #E00000; font-weight: normal;}
.latex.source-latex .re12 {color: #800000; font-weight: normal;}
.latex.source-latex .ln-xtra, .latex.source-latex li.ln-xtra, .latex.source-latex div.ln-xtra {background-color: #ffc;}
.latex.source-latex span.xtra { display:block; }
.latex.source-latex .imp {
font-weight: bold;
color: red;
}
.latex.source-latex li,
.latex.source-latex .li1 {
font-weight: normal;
vertical-align: top;
}
.latex.source-latex .ln {
width: 1px;
text-align: right;
margin: 0;
padding: 0 2px;
vertical-align: top;
}
.latex.source-latex .li2 {
font-weight: bold;
vertical-align: top;
}
.latex.source-latex .kw1 {
color: #800000;
}
.latex.source-latex .co1 {
color: #2c922c;
font-style: italic;
}
.latex.source-latex .es0 {
color: #000000;
font-weight: bold;
}
.latex.source-latex .sy0 {
color: #e02020;
}
.latex.source-latex .st0 {
color: #000000;
}
.latex.source-latex .re1 {
color: #8020e0;
font-weight: normal;
}
.latex.source-latex .re2 {
color: #c08020;
font-weight: normal;
}
.latex.source-latex .re3 {
color: #8020e0;
font-weight: normal;
}
.latex.source-latex .re4 {
color: #800000;
font-weight: normal;
}
.latex.source-latex .re5 {
color: #00008b;
font-weight: bold;
}
.latex.source-latex .re6 {
color: #800000;
font-weight: normal;
}
.latex.source-latex .re7 {
color: #0000d0;
font-weight: normal;
}
.latex.source-latex .re8 {
color: #c00000;
font-weight: normal;
}
.latex.source-latex .re9 {
color: #2020c0;
font-weight: normal;
}
.latex.source-latex .re10 {
color: #800000;
font-weight: normal;
}
.latex.source-latex .re11 {
color: #e00000;
font-weight: normal;
}
.latex.source-latex .re12 {
color: #800000;
font-weight: normal;
}
.latex.source-latex .ln-xtra,
.latex.source-latex li.ln-xtra,
.latex.source-latex div.ln-xtra {
background-color: #ffc;
}
.latex.source-latex span.xtra {
display: block;
}
/*]]>*/
/*]]>*/
a.search-result {
display: block;
margin-top: @line-height-computed / 2;
.search-result-content {
margin-top: @line-height-computed / 4;
white-space: pre-wrap;
font-size: 0.8em;
color: @gray-dark;
em {
font-weight: bold;
}
}
&:hover, &:active, &:focus {
text-decoration: none;
.search-result-content {
color: @gray-darker;
}
box-shadow: 0 2px 4px rgba(0,0,0,0.35);
}
}
a.search-result {
display: block;
margin-top: @line-height-computed / 2;
.search-result-content {
margin-top: @line-height-computed / 4;
white-space: pre-wrap;
font-size: 0.8em;
color: @gray-dark;
em {
font-weight: bold;
}
}
}
&:hover,
&:active,
&:focus {
text-decoration: none;
.search-result-content {
color: @gray-darker;
}
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
}
}

5
services/web/frontend/stylesheets/components/alerts.less
View file

@ -2,7 +2,6 @@
// Alerts
// --------------------------------------------------
// Base styles
// -------------------------
@ -38,7 +37,7 @@
// Expand the right padding and account for the close button's positioning.
.alert-dismissable {
padding-right: (@alert-padding + 20);
padding-right: (@alert-padding + 20);
// Adjust close link position
.close {
@ -78,4 +77,4 @@
.btn {
text-decoration: none;
}
}
}

1
services/web/frontend/stylesheets/components/badges.less
View file

@ -2,7 +2,6 @@
// Badges
// --------------------------------------------------
// Base classes
.badge {
display: inline-block;

3
services/web/frontend/stylesheets/components/breadcrumbs.less
View file

@ -2,7 +2,6 @@
// Breadcrumbs
// --------------------------------------------------
.breadcrumb {
padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
margin-bottom: @line-height-computed;
@ -14,7 +13,7 @@
display: inline-block;
+ li:before {
content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
content: '@{breadcrumb-separator}\00a0'; // Unicode space added since inline-block means non-collapsing white-space
padding: 0 5px;
color: @breadcrumb-color;
}

29
services/web/frontend/stylesheets/components/button-groups.less
View file

@ -91,15 +91,19 @@
outline: 0;
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn { &:extend(.btn-xs); }
.btn-group-sm > .btn { &:extend(.btn-sm); }
.btn-group-lg > .btn { &:extend(.btn-lg); }
.btn-group-xs > .btn {
&:extend(.btn-xs);
}
.btn-group-sm > .btn {
&:extend(.btn-sm);
}
.btn-group-lg > .btn {
&:extend(.btn-lg);
}
// Split button dropdowns
// ----------------------
@ -117,7 +121,7 @@
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
@ -125,7 +129,6 @@
}
}
// Reposition the caret
.btn .caret {
margin-left: 0;
@ -140,7 +143,6 @@
border-width: 0 @caret-width-large @caret-width-large;
}
// Vertical button groups
// ----------------------
@ -193,12 +195,12 @@
.border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
.btn-group-vertical
> .btn-group:last-child:not(:first-child)
> .btn:first-child {
.border-top-radius(0);
}
// Justified button groups
// ----------------------
@ -218,9 +220,8 @@
}
}
// Checkbox and radio options
[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
[data-toggle='buttons'] > .btn > input[type='radio'],
[data-toggle='buttons'] > .btn > input[type='checkbox'] {
display: none;
}

39
services/web/frontend/stylesheets/components/buttons.less
View file

@ -2,7 +2,6 @@
// Buttons
// --------------------------------------------------
// Base styles
// --------------------------------------------------
@ -17,7 +16,10 @@
border: @btn-border-width solid transparent;
border-bottom: @btn-border-bottom-width solid transparent;
white-space: nowrap;
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
.button-size(
@padding-base-vertical; @padding-base-horizontal; @font-size-base;
@line-height-base; @btn-border-radius-base
);
.user-select(none);
&,
@ -38,7 +40,7 @@
&.active {
outline: 0;
background-image: none;
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
}
&.disabled,
@ -46,12 +48,11 @@
fieldset[disabled] & {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
.opacity(.65);
.opacity(0.65);
.box-shadow(none);
}
}
// Alternate buttons
// --------------------------------------------------
@ -81,7 +82,6 @@
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
// Link buttons
// -------------------------
@ -132,22 +132,33 @@
// --------------------------------------------------
.btn-xl {
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-h2; @line-height-large; @btn-border-radius-large);
.button-size(
@padding-large-vertical; @padding-large-horizontal; @font-size-h2;
@line-height-large; @btn-border-radius-large
);
}
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large);
.button-size(
@padding-large-vertical; @padding-large-horizontal; @font-size-large;
@line-height-large; @btn-border-radius-large
);
}
.btn-sm {
// line-height: ensure proper height of button next to small input
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
.button-size(
@padding-small-vertical; @padding-small-horizontal; @font-size-small;
@line-height-small; @btn-border-radius-small
);
}
.btn-xs {
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
.button-size(
@padding-xs-vertical; @padding-xs-horizontal; @font-size-small;
@line-height-small; @btn-border-radius-small
);
}
// Block button
// --------------------------------------------------
@ -164,9 +175,9 @@
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
input[type='submit'],
input[type='reset'],
input[type='button'] {
&.btn-block {
width: 100%;
}

58
services/web/frontend/stylesheets/components/card.less
View file

@ -4,22 +4,24 @@
box-shadow: @card-box-shadow;
padding: @line-height-computed;
.page-header {
margin: 0 0 1.5625rem;
h1, h2, h3 {
margin-top: 0;
}
margin: 0 0 1.5625rem;
h1,
h2,
h3 {
margin-top: 0;
}
}
> .container-fluid {
padding: 0;
}
.card-header {
border-bottom: 1px solid @gray-lighter;
padding-bottom: @line-height-computed;
margin-bottom: @line-height-computed;
h2 {
margin: 0;
}
border-bottom: 1px solid @gray-lighter;
padding-bottom: @line-height-computed;
margin-bottom: @line-height-computed;
h2 {
margin: 0;
}
}
> :first-child {
@ -31,29 +33,29 @@
}
.card-thin {
padding: @line-height-computed / 2
padding: @line-height-computed / 2;
}
.card-group {
.card {
margin: @line-height-computed -15px 0 -15px;
border-radius: 0;
.card {
margin: @line-height-computed -15px 0 -15px;
border-radius: 0;
&.card-highlighted {
// Make it taller and card like
margin-top: 0;
border-radius: @border-radius-base;
}
&.card-first {
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
&.card-last {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
&.card-highlighted {
// Make it taller and card like
margin-top: 0;
border-radius: @border-radius-base;
}
&.card-first {
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
&.card-last {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
}
}
.card-border {

34
services/web/frontend/stylesheets/components/carousel.less
View file

@ -2,7 +2,6 @@
// Carousel
// --------------------------------------------------
// Wrapper for the slide container and indicators
.carousel {
position: relative;
@ -16,7 +15,7 @@
> .item {
display: none;
position: relative;
.transition(.6s ease-in-out left);
.transition(0.6s ease-in-out left);
// Account for jankitude on images
> img,
@ -28,7 +27,9 @@
> .active,
> .next,
> .prev { display: block; }
> .prev {
display: block;
}
> .active {
left: 0;
@ -58,7 +59,6 @@
> .active.right {
left: 100%;
}
}
// Left/right controls for nav
@ -80,12 +80,18 @@
// Set gradients for backgrounds
&.left {
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
#gradient >
.horizontal(
@start-color: rgba(0, 0, 0, 0.5) ; @end-color: rgba(0, 0, 0, 0.0001)
);
}
&.right {
left: auto;
right: 0;
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
#gradient >
.horizontal(
@start-color: rgba(0, 0, 0, 0.0001) ; @end-color: rgba(0, 0, 0, 0.5)
);
}
// Hover/focus state
@ -94,7 +100,7 @@
outline: none;
color: @carousel-control-color;
text-decoration: none;
.opacity(.9);
.opacity(0.9);
}
// Toggles
@ -117,7 +123,7 @@
}
.icon-prev,
.icon-next {
width: 20px;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
@ -126,12 +132,12 @@
.icon-prev {
&:before {
content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
content: '\2039'; // SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
}
}
.icon-next {
&:before {
content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
content: '\203a'; // SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
}
}
}
@ -154,7 +160,7 @@
li {
display: inline-block;
width: 10px;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
@ -171,11 +177,11 @@
// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
// set alpha transparency for the best results possible.
background-color: #000 \9; // IE8
background-color: rgba(0,0,0,0); // IE9
background-color: rgba(0, 0, 0, 0); // IE9
}
.active {
margin: 0;
width: 12px;
width: 12px;
height: 12px;
background-color: @carousel-indicator-active-bg;
}
@ -200,10 +206,8 @@
}
}
// Scale up controls for tablets and up
@media screen and (min-width: @screen-sm-min) {
// Scale up the controls a smidge
.carousel-control {
.glyphicon-chevron-left,

5
services/web/frontend/stylesheets/components/close.less
View file

@ -2,7 +2,6 @@
// Close icons
// --------------------------------------------------
.close {
float: right;
font-size: (@font-size-base * 1.5);
@ -10,14 +9,14 @@
line-height: 1;
color: @close-color;
text-shadow: @close-text-shadow;
.opacity(.4);
.opacity(0.4);
&:hover,
&:focus {
color: @close-color;
text-decoration: none;
cursor: pointer;
.opacity(.5);
.opacity(0.5);
}
// Additional properties for button version

3
services/web/frontend/stylesheets/components/code.less
View file

@ -2,7 +2,6 @@
// Code (inline and block)
// --------------------------------------------------
// Inline and block code styles
code,
kbd,
@ -28,7 +27,7 @@ kbd {
color: @kbd-color;
background-color: @kbd-bg;
border-radius: @border-radius-small;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
// Blocks of code

4
services/web/frontend/stylesheets/components/component-animations.less
View file

@ -9,7 +9,7 @@
.fade {
opacity: 0;
.transition(opacity .15s linear);
.transition(opacity 0.15s linear);
&.in {
opacity: 1;
}
@ -25,5 +25,5 @@
position: relative;
height: 0;
overflow: hidden;
.transition(height .35s ease);
.transition(height 0.35s ease);
}

202
services/web/frontend/stylesheets/components/daterange-picker.less
View file

@ -14,61 +14,60 @@
// Settings
// The class name to contain everything within.
@arrow-size: 7px;
@arrow-size: 7px;
//
// Colors
@daterangepicker-color: @brand-primary;
@daterangepicker-bg-color: #fff;
@daterangepicker-color: @brand-primary;
@daterangepicker-bg-color: #fff;
@daterangepicker-cell-color: @daterangepicker-color;
@daterangepicker-cell-border-color: transparent;
@daterangepicker-cell-bg-color: @daterangepicker-bg-color;
@daterangepicker-cell-color: @daterangepicker-color;
@daterangepicker-cell-border-color: transparent;
@daterangepicker-cell-bg-color: @daterangepicker-bg-color;
@daterangepicker-cell-hover-color: @daterangepicker-color;
@daterangepicker-cell-hover-border-color: @daterangepicker-cell-border-color;
@daterangepicker-cell-hover-bg-color: #eee;
@daterangepicker-cell-hover-color: @daterangepicker-color;
@daterangepicker-cell-hover-border-color: @daterangepicker-cell-border-color;
@daterangepicker-cell-hover-bg-color: #eee;
@daterangepicker-in-range-color: #000;
@daterangepicker-in-range-border-color: transparent;
@daterangepicker-in-range-bg-color: #ebf4f8;
@daterangepicker-in-range-color: #000;
@daterangepicker-in-range-border-color: transparent;
@daterangepicker-in-range-bg-color: #ebf4f8;
@daterangepicker-active-color: #fff;
@daterangepicker-active-bg-color: #138A07;
@daterangepicker-active-border-color: transparent;
@daterangepicker-active-color: #fff;
@daterangepicker-active-bg-color: #138a07;
@daterangepicker-active-border-color: transparent;
@daterangepicker-unselected-color: #999;
@daterangepicker-unselected-border-color: transparent;
@daterangepicker-unselected-bg-color: #fff;
@daterangepicker-unselected-color: #999;
@daterangepicker-unselected-border-color: transparent;
@daterangepicker-unselected-bg-color: #fff;
//
// daterangepicker
@daterangepicker-width: 278px;
@daterangepicker-padding: 4px;
@daterangepicker-z-index: 3000;
@daterangepicker-border-size: 1px;
@daterangepicker-border-color: #ccc;
@daterangepicker-border-radius: 4px;
@daterangepicker-width: 278px;
@daterangepicker-padding: 4px;
@daterangepicker-z-index: 3000;
@daterangepicker-border-size: 1px;
@daterangepicker-border-color: #ccc;
@daterangepicker-border-radius: 4px;
//
// Calendar
@daterangepicker-calendar-margin: @daterangepicker-padding;
@daterangepicker-calendar-bg-color: @daterangepicker-bg-color;
@daterangepicker-calendar-margin: @daterangepicker-padding;
@daterangepicker-calendar-bg-color: @daterangepicker-bg-color;
@daterangepicker-calendar-border-size: 1px;
@daterangepicker-calendar-border-color: @daterangepicker-bg-color;
@daterangepicker-calendar-border-radius: @daterangepicker-border-radius;
@daterangepicker-calendar-border-size: 1px;
@daterangepicker-calendar-border-color: @daterangepicker-bg-color;
@daterangepicker-calendar-border-radius: @daterangepicker-border-radius;
//
// Calendar Cells
@daterangepicker-cell-size: 20px;
@daterangepicker-cell-width: @daterangepicker-cell-size;
@daterangepicker-cell-height: @daterangepicker-cell-size;
@daterangepicker-cell-size: 20px;
@daterangepicker-cell-width: @daterangepicker-cell-size;
@daterangepicker-cell-height: @daterangepicker-cell-size;
@daterangepicker-cell-border-radius: @daterangepicker-calendar-border-radius;
@daterangepicker-cell-border-size: 1px;
@daterangepicker-cell-border-radius: @daterangepicker-calendar-border-radius;
@daterangepicker-cell-border-size: 1px;
//
// Dropdowns
@ -76,37 +75,37 @@
//
// Controls
@daterangepicker-control-height: 30px;
@daterangepicker-control-line-height: @daterangepicker-control-height;
@daterangepicker-control-color: #555;
@daterangepicker-control-height: 30px;
@daterangepicker-control-line-height: @daterangepicker-control-height;
@daterangepicker-control-color: #555;
@daterangepicker-control-border-size: 1px;
@daterangepicker-control-border-color: #ccc;
@daterangepicker-control-border-radius: 4px;
@daterangepicker-control-border-size: 1px;
@daterangepicker-control-border-color: #ccc;
@daterangepicker-control-border-radius: 4px;
@daterangepicker-control-active-border-size: 1px;
@daterangepicker-control-active-border-color: @brand-primary;
@daterangepicker-control-active-border-size: 1px;
@daterangepicker-control-active-border-color: @brand-primary;
@daterangepicker-control-active-border-radius: @daterangepicker-control-border-radius;
@daterangepicker-control-disabled-color: #ccc;
@daterangepicker-control-disabled-color: #ccc;
//
// Ranges
@daterangepicker-ranges-color: @brand-primary;
@daterangepicker-ranges-bg-color: daterangepicker-ranges-color;
@daterangepicker-ranges-color: @brand-primary;
@daterangepicker-ranges-bg-color: daterangepicker-ranges-color;
@daterangepicker-ranges-border-size: 1px;
@daterangepicker-ranges-border-color: @daterangepicker-ranges-bg-color;
@daterangepicker-ranges-border-radius: @daterangepicker-border-radius;
@daterangepicker-ranges-border-size: 1px;
@daterangepicker-ranges-border-color: @daterangepicker-ranges-bg-color;
@daterangepicker-ranges-border-radius: @daterangepicker-border-radius;
@daterangepicker-ranges-hover-color: #fff;
@daterangepicker-ranges-hover-bg-color: @daterangepicker-ranges-color;
@daterangepicker-ranges-hover-border-size: @daterangepicker-ranges-border-size;
@daterangepicker-ranges-hover-border-color: @daterangepicker-ranges-hover-bg-color;
@daterangepicker-ranges-hover-border-radius: @daterangepicker-border-radius;
@daterangepicker-ranges-hover-color: #fff;
@daterangepicker-ranges-hover-bg-color: @daterangepicker-ranges-color;
@daterangepicker-ranges-hover-border-size: @daterangepicker-ranges-border-size;
@daterangepicker-ranges-hover-border-color: @daterangepicker-ranges-hover-bg-color;
@daterangepicker-ranges-hover-border-radius: @daterangepicker-border-radius;
@daterangepicker-ranges-active-border-size: @daterangepicker-ranges-border-size;
@daterangepicker-ranges-active-border-color: @daterangepicker-ranges-bg-color;
@daterangepicker-ranges-active-border-size: @daterangepicker-ranges-border-size;
@daterangepicker-ranges-active-border-color: @daterangepicker-ranges-bg-color;
@daterangepicker-ranges-active-border-radius: @daterangepicker-border-radius;
//
@ -128,7 +127,8 @@
@arrow-prefix-size: @arrow-size;
@arrow-suffix-size: (@arrow-size - @daterangepicker-border-size);
&:before, &:after {
&:before,
&:after {
position: absolute;
display: inline-block;
@ -207,7 +207,7 @@
&:after {
top: initial;
bottom:-@arrow-suffix-size;
bottom: -@arrow-suffix-size;
border-bottom: initial;
border-top: @arrow-suffix-size solid @daterangepicker-bg-color;
}
@ -219,7 +219,8 @@
}
&.single {
.ranges, .calendar {
.ranges,
.calendar {
float: none;
}
}
@ -242,7 +243,8 @@
}
}
th, td {
th,
td {
white-space: nowrap;
text-align: center;
@ -252,7 +254,8 @@
}
.calendar-table {
border: @daterangepicker-calendar-border-size solid @daterangepicker-calendar-border-color;
border: @daterangepicker-calendar-border-size solid
@daterangepicker-calendar-border-color;
padding: @daterangepicker-calendar-margin;
border-radius: @daterangepicker-calendar-border-radius;
background-color: @daterangepicker-calendar-bg-color;
@ -263,12 +266,14 @@
margin: 0;
}
td, th {
td,
th {
text-align: center;
width: @daterangepicker-cell-width;
height: @daterangepicker-cell-height;
border-radius: @daterangepicker-cell-border-radius;
border: @daterangepicker-cell-border-size solid @daterangepicker-cell-border-color;
border: @daterangepicker-cell-border-size solid
@daterangepicker-cell-border-color;
white-space: nowrap;
cursor: pointer;
@ -288,7 +293,10 @@
td {
&.off {
&, &.in-range, &.start-date, &.end-date {
&,
&.in-range,
&.start-date,
&.end-date {
background-color: @daterangepicker-unselected-bg-color;
border-color: @daterangepicker-unselected-border-color;
color: @daterangepicker-unselected-color;
@ -307,11 +315,13 @@
}
&.start-date {
border-radius: @daterangepicker-cell-border-radius 0 0 @daterangepicker-cell-border-radius;
border-radius: @daterangepicker-cell-border-radius 0 0
@daterangepicker-cell-border-radius;
}
&.end-date {
border-radius: 0 @daterangepicker-cell-border-radius @daterangepicker-cell-border-radius 0;
border-radius: 0 @daterangepicker-cell-border-radius
@daterangepicker-cell-border-radius 0;
}
&.start-date.end-date {
@ -319,7 +329,8 @@
}
&.active {
&, &:hover {
&,
&:hover {
background-color: @daterangepicker-active-bg-color;
border-color: @daterangepicker-active-border-color;
color: @daterangepicker-active-color;
@ -336,7 +347,8 @@
//
// Disabled Controls
//
td, option {
td,
option {
&.disabled {
color: #999;
cursor: not-allowed;
@ -345,7 +357,8 @@
}
select {
&.monthselect, &.yearselect {
&.monthselect,
&.yearselect {
font-size: 12px;
padding: 1px;
height: auto;
@ -362,7 +375,10 @@
width: 40%;
}
&.hourselect, &.minuteselect, &.secondselect, &.ampmselect {
&.hourselect,
&.minuteselect,
&.secondselect,
&.ampmselect {
width: 50px;
margin-bottom: 0;
}
@ -372,7 +388,8 @@
// Text Input Controls (above calendar)
//
.input-mini {
border: @daterangepicker-control-border-size solid @daterangepicker-control-border-color;
border: @daterangepicker-control-border-size solid
@daterangepicker-control-border-color;
border-radius: @daterangepicker-control-border-radius;
color: @daterangepicker-control-color;
height: @daterangepicker-control-line-height;
@ -386,7 +403,8 @@
width: 100%;
&.active {
border: @daterangepicker-control-active-border-size solid @daterangepicker-control-active-border-color;
border: @daterangepicker-control-active-border-size solid
@daterangepicker-control-active-border-color;
border-radius: @daterangepicker-control-active-border-radius;
}
}
@ -453,7 +471,8 @@
li {
font-size: 13px;
background-color: @daterangepicker-ranges-bg-color;
border: @daterangepicker-ranges-border-size solid @daterangepicker-ranges-border-color;
border: @daterangepicker-ranges-border-size solid
@daterangepicker-ranges-border-color;
border-radius: @daterangepicker-ranges-border-radius;
color: @daterangepicker-ranges-color;
padding: 3px 12px;
@ -467,7 +486,8 @@
&.active {
background-color: @daterangepicker-ranges-hover-bg-color;
border: @daterangepicker-ranges-hover-border-size solid @daterangepicker-ranges-hover-border-color;
border: @daterangepicker-ranges-hover-border-size solid
@daterangepicker-ranges-hover-border-color;
color: @daterangepicker-ranges-hover-color;
}
}
@ -479,14 +499,14 @@
.glyphicon {
font-family: FontAwesome;
}
.glyphicon-chevron-left:before{
content: "\f053";
.glyphicon-chevron-left:before {
content: '\f053';
}
.glyphicon-chevron-right:before{
content: "\f054";
.glyphicon-chevron-right:before {
content: '\f054';
}
.glyphicon-calendar:before{
content: "\f073";
.glyphicon-calendar:before {
content: '\f073';
}
width: auto;
@ -509,13 +529,15 @@
}
&.ltr {
.ranges, .calendar {
float:left;
.ranges,
.calendar {
float: left;
}
}
&.rtl {
.ranges, .calendar {
float:right;
.ranges,
.calendar {
float: right;
}
}
}
@ -523,7 +545,7 @@
&.ltr {
direction: ltr;
text-align: left;
.calendar{
.calendar {
&.left {
clear: left;
margin-right: 0;
@ -554,14 +576,15 @@
padding-right: 12px;
}
.ranges, .calendar {
.ranges,
.calendar {
float: left;
}
}
&.rtl {
direction: rtl;
text-align: right;
.calendar{
.calendar {
&.left {
clear: right;
margin-left: 0;
@ -592,7 +615,8 @@
padding-left: 12px;
}
.ranges, .calendar {
.ranges,
.calendar {
text-align: right;
float: right;
}
@ -616,7 +640,7 @@
&.ltr {
.ranges {
float: left;
clear: none !important
clear: none !important;
}
}
&.rtl {

24
services/web/frontend/stylesheets/components/dropdowns.less
View file

@ -2,7 +2,6 @@
// Dropdown menus
// --------------------------------------------------
// Dropdown arrow/caret
.caret {
display: inline-block;
@ -10,10 +9,10 @@
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: @caret-width-base solid;
border-top: @caret-width-base solid;
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
margin-top: -@caret-width-base/2;
border-left: @caret-width-base solid transparent;
margin-top: -@caret-width-base / 2;
}
// The dropdown wrapper (div)
@ -43,7 +42,7 @@
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
.box-shadow(0 6px 12px rgba(0,0,0,.175));
.box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));
background-clip: padding-box;
// Aligns the dropdown menu to right
@ -60,7 +59,9 @@
}
// Links and other items within the dropdown menu
> li > a,div, .dropdown-menu-button {
> li > a,
div,
.dropdown-menu-button {
display: block;
padding: @dropdown-item-padding;
clear: both;
@ -69,10 +70,10 @@
color: @dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
&.subdued {
color: #7a7a7a
color: #7a7a7a;
}
.subdued {
color: #7a7a7a
color: #7a7a7a;
}
}
@ -85,7 +86,8 @@
}
// Hover/Focus state
.dropdown-menu > li > a, .dropdown-menu .dropdown-menu-button {
.dropdown-menu > li > a,
.dropdown-menu .dropdown-menu-button {
&:hover,
&:focus {
text-decoration: none;
@ -200,7 +202,7 @@
.caret {
border-top: 0;
border-bottom: @caret-width-base solid;
content: "";
content: '';
}
// Different positioning for bottom up menu
.dropdown-menu {
@ -210,7 +212,6 @@
}
}
// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.
@ -227,4 +228,3 @@
}
}
}

2
services/web/frontend/stylesheets/components/embed-responsive.less
View file

@ -23,4 +23,4 @@
}
.embed-responsive-4by3 {
padding-bottom: 75% !important;
}
}

77
services/web/frontend/stylesheets/components/footer.less
View file

@ -1,51 +1,50 @@
footer.site-footer {
background-color: @footer-bg-color;
border-top: 1px solid @gray-lighter;
font-size: 0.9rem;
position: absolute;
bottom: 0;
width: 100%;
height: @footer-height;
line-height: @footer-height - 1; // Hack — in Chrome, using the full @footer-height would generate vertical scrolling
ul {
list-style: none;
margin: 0px;
li {
display: inline-block;
margin: 0 .5em;
}
i {
font-size: 1.2rem;
}
}
li.lngOption {
background-color: @footer-bg-color;
border-top: 1px solid @gray-lighter;
font-size: 0.9rem;
position: absolute;
bottom: 0;
width: 100%;
height: @footer-height;
line-height: @footer-height - 1; // Hack — in Chrome, using the full @footer-height would generate vertical scrolling
text-align: left;
display: list-item;
ul {
list-style: none;
margin: 0px;
li {
display: inline-block;
margin: 0 0.5em;
}
i {
font-size: 1.2rem;
}
}
li.lngOption {
text-align: left;
display: list-item;
img {
vertical-align: text-bottom;
}
}
img {
vertical-align: text-bottom;
}
}
a {
color: @footer-link-color;
&:hover,
&:focus {
color: @footer-link-hover-color;
}
}
a {
color: @footer-link-color;
&:hover,
&:focus {
color: @footer-link-hover-color;
}
}
}
.site-footer-content when (@is-overleaf = true) {
.container-fluid;
.container-fluid;
}
.site-footer-content when (@is-overleaf = false) {
.container;
.container;
}
.sprite-icon-lang {
display: inline-block;
vertical-align: middle;
}
display: inline-block;
vertical-align: middle;
}

93
services/web/frontend/stylesheets/components/forms.less
View file

@ -2,7 +2,6 @@
// Forms
// --------------------------------------------------
// Normalize non-controls
//
// Restyle and baseline non-control form elements.
@ -35,7 +34,6 @@ label {
font-weight: bold;
}
// Normalize form controls
//
// While most of our form styles require extra classes, some basic normalization
@ -43,25 +41,25 @@ label {
// address browser inconsistencies.
// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
input[type='search'] {
.box-sizing(border-box);
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
input[type='radio'],
input[type='checkbox'] {
margin: 4px 0 0;
margin-top: 1px \9; /* IE8-9 */
line-height: normal;
}
// Set the height of file controls to match text inputs
input[type="file"] {
input[type='file'] {
display: block;
}
// Make range inputs behave like textual form controls
input[type="range"] {
input[type='range'] {
display: block;
width: 100%;
}
@ -73,9 +71,9 @@ select[size] {
}
// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
input[type='file']:focus,
input[type='radio']:focus,
input[type='checkbox']:focus {
.tab-focus();
}
@ -88,7 +86,6 @@ output {
color: @input-color;
}
// Common form controls
//
// Shared size and type resets for form controls. Apply `.form-control` to any
@ -123,8 +120,8 @@ output {
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border;
border-radius: @input-border-radius;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
.box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
.transition(~'border-color ease-in-out .15s, box-shadow ease-in-out .15s');
// Customize the `:focus` state to imitate native WebKit styles.
.form-control-focus();
@ -150,13 +147,12 @@ output {
height: auto;
border-radius: @border-radius-base;
}
// Smaller border-radius for `select` inputs
select& {
// Smaller border-radius for `select` inputs
select& {
border-radius: @border-radius-base;
}
}
}
// Search inputs in iOS
//
// This overrides the extra rounded corners on search inputs in iOS so that our
@ -164,21 +160,19 @@ output {
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
input[type="search"] {
input[type='search'] {
-webkit-appearance: none;
}
// Special styles for iOS date input
//
// In Mobile Safari, date inputs require a pixel line-height that matches the
// given height of the input.
input[type="date"] {
input[type='date'] {
line-height: @input-height-base;
}
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
@ -188,7 +182,6 @@ input[type="date"] {
margin-bottom: 15px;
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
@ -206,10 +199,10 @@ input[type="date"] {
cursor: pointer;
}
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
.radio input[type='radio'],
.radio-inline input[type='radio'],
.checkbox input[type='checkbox'],
.checkbox-inline input[type='checkbox'] {
float: left;
margin-left: -20px;
}
@ -237,8 +230,8 @@ input[type="date"] {
// Apply same disabled cursor tweak as for inputs
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"],
input[type='radio'],
input[type='checkbox'],
.radio,
.radio-inline,
.checkbox,
@ -249,21 +242,25 @@ input[type="checkbox"],
}
}
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
.input-sm {
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
.input-size(
@input-height-small; @padding-small-vertical; @padding-small-horizontal;
@font-size-small; @line-height-small; @border-radius-small
);
}
.input-lg {
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
.input-size(
@input-height-large; @padding-large-vertical; @padding-large-horizontal;
@font-size-large; @line-height-large; @border-radius-large
);
}
// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.
@ -309,27 +306,35 @@ input[type="checkbox"],
// Feedback states
.has-success {
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
.form-control-validation(
@state-success-text; @state-success-text; @state-success-bg
);
}
.has-warning {
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
.form-control-validation(
@state-warning-text; @state-warning-text; @state-warning-bg
);
}
.has-external-error {
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
color:@red;
.form-control-validation(
@state-danger-text; @state-danger-text; @state-danger-bg
);
color: @red;
}
.form-control.ng-dirty.ng-invalid:not(:focus) {
border-color: @state-danger-text;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
.box-shadow(
inset 0 1px 1px rgba(0, 0, 0, 0.075)
); // Redeclare so transitions work
&:focus {
border-color: darken(@state-danger-text, 10%);
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@state-danger-text, 20%);
@shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 6px lighten(@state-danger-text, 20%);
.box-shadow(@shadow);
}
}
// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
@ -339,7 +344,6 @@ input[type="checkbox"],
margin-bottom: 0; // Remove default margin from `p`
}
// Help text
//
// Apply to any element you wish to create light text for placement immediately
@ -352,8 +356,6 @@ input[type="checkbox"],
color: lighten(@text-color, 25%); // lighten the text some for contrast
}
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
@ -366,7 +368,6 @@ input[type="checkbox"],
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
.form-inline {
// Kick in the inline
@media (min-width: @screen-sm-min) {
// Inline-block all the things for "inline"
@ -403,8 +404,8 @@ input[type="checkbox"],
padding-left: 0;
vertical-align: middle;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
.radio input[type='radio'],
.checkbox input[type='checkbox'] {
float: none;
margin-left: 0;
}
@ -419,14 +420,12 @@ input[type="checkbox"],
}
}
// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.
.form-horizontal {
// Consistent vertical alignment of labels, radios, and checkboxes
.control-label,
.radio,

20
services/web/frontend/stylesheets/components/hover.less
View file

@ -1,11 +1,11 @@
.hover-container {
.show-on-hover {
display: none;
}
&:hover {
.show-on-hover {
display: initial;
}
}
}
.show-on-hover {
display: none;
}
&:hover {
.show-on-hover {
display: initial;
}
}
}

2
services/web/frontend/stylesheets/components/icons.less
View file

@ -6,4 +6,4 @@
// Sizes
.icon-lg {
font-size: @font-size-h1;
}
}

28
services/web/frontend/stylesheets/components/images.less
View file

@ -1,17 +1,17 @@
.circle-img {
border-radius: 50%;
float: left;
// float: right;
height: 100px;
overflow: hidden;
position: relative;
max-width: 100px;
img {
display: inline;
margin: 0 auto;
width: 100%;
}
border-radius: 50%;
float: left;
// float: right;
height: 100px;
overflow: hidden;
position: relative;
max-width: 100px;
img {
display: inline;
margin: 0 auto;
width: 100%;
}
}
.blockquote-with-img {
margin-left: 115px;
}
margin-left: 115px;
}

15
services/web/frontend/stylesheets/components/input-groups.less
View file

@ -10,7 +10,7 @@
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
// Undo padding and float of grid classes
&[class*="col-"] {
&[class*='col-'] {
float: none;
padding-left: 0;
padding-right: 0;
@ -39,11 +39,14 @@
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn { .input-lg(); }
.input-group-lg > .input-group-btn > .btn {
.input-lg();
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn { .input-sm(); }
.input-group-sm > .input-group-btn > .btn {
.input-sm();
}
// Display as table-cell
// -------------------------
@ -90,8 +93,8 @@
}
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
input[type='radio'],
input[type='checkbox'] {
margin-top: 0;
}
}

34
services/web/frontend/stylesheets/components/input-suggestions.less
View file

@ -1,21 +1,21 @@
.input-suggestions {
position: relative;
height: @input-height-base;
position: relative;
height: @input-height-base;
}
.input-suggestions-main {
position: absolute;
top: 0;
background-color: transparent;
}
.input-suggestions-main {
position: absolute;
top: 0;
background-color: transparent;
}
.input-suggestions-shadow {
background-color: @input-bg;
padding-top: @input-suggestion-v-offset;
}
.input-suggestions-shadow-existing {
color: transparent;
}
.input-suggestions-shadow {
background-color: @input-bg;
padding-top: @input-suggestion-v-offset;
}
.input-suggestions-shadow-existing {
color: transparent;
}
.input-suggestions-shadow-suggested {
color: lighten(@input-color, 25%);
}
.input-suggestions-shadow-suggested {
color: lighten(@input-color, 25%);
}

5
services/web/frontend/stylesheets/components/jumbotron.less
View file

@ -2,7 +2,6 @@
// Jumbotron
// --------------------------------------------------
.jumbotron {
padding: @jumbotron-padding;
margin-bottom: @jumbotron-padding;
@ -28,11 +27,11 @@
}
@media screen and (min-width: @screen-sm-min) {
padding-top: (@jumbotron-padding * 1.6);
padding-top: (@jumbotron-padding * 1.6);
padding-bottom: (@jumbotron-padding * 1.6);
.container & {
padding-left: (@jumbotron-padding * 2);
padding-left: (@jumbotron-padding * 2);
padding-right: (@jumbotron-padding * 2);
}

4
services/web/frontend/stylesheets/components/labels.less
View file

@ -4,7 +4,7 @@
.label {
display: inline;
padding: .2em .6em .3em;
padding: 0.2em 0.6em 0.3em;
font-size: @labels-font-size;
font-weight: bold;
line-height: 1;
@ -12,7 +12,7 @@
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
border-radius: 0.25em;
// Add hover effects, but only for links
&[href] {

5
services/web/frontend/stylesheets/components/list-group.less
View file

@ -2,7 +2,6 @@
// List groups
// --------------------------------------------------
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
@ -13,7 +12,6 @@
padding-left: 0; // reset padding because ul and ol
}
// Individual list items
//
// Use on `li`s or `div`s within the `.list-group` parent.
@ -45,7 +43,6 @@
}
}
// Linked list items
//
// Use anchor elements instead of `li`s or `div`s to create linked list items.
@ -84,7 +81,6 @@ a.list-group-item {
}
}
// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
@ -95,7 +91,6 @@ a.list-group-item {
.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
// Custom content options
//
// Extra classes for creating well-formatted content within `.list-group-item`s.

44
services/web/frontend/stylesheets/components/lists.less
View file

@ -1,23 +1,23 @@
.list-like-table {
border: 1px solid @hr-border;
border-radius: @border-radius-base;
list-style: none;
margin: 0;
padding: 0 @padding-sm;
li {
border-top: 1px solid @hr-border;
div {
display: table-cell;
float: none;
vertical-align: middle;
}
.row {
display: table;
margin: 0;
width: 100%;
}
&:first-child {
border-top: 0;
}
}
}
border: 1px solid @hr-border;
border-radius: @border-radius-base;
list-style: none;
margin: 0;
padding: 0 @padding-sm;
li {
border-top: 1px solid @hr-border;
div {
display: table-cell;
float: none;
vertical-align: middle;
}
.row {
display: table;
margin: 0;
width: 100%;
}
&:first-child {
border-top: 0;
}
}
}

3
services/web/frontend/stylesheets/components/media.less
View file

@ -2,7 +2,6 @@
// Source: http://stubbornella.org/content/?p=497
// --------------------------------------------------
// Common styles
// -------------------------
@ -32,7 +31,6 @@
margin: 0 0 5px;
}
// Media image alignment
// -------------------------
@ -45,7 +43,6 @@
}
}
// Media list variation
// -------------------------

36
services/web/frontend/stylesheets/components/modals.less
View file

@ -32,9 +32,12 @@
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
.translate(0, -25%);
.transition-transform(~"0.3s ease-out");
.transition-transform(~'0.3s ease-out');
}
&.in .modal-dialog {
// prettier-ignore
.translate(0, 0);
}
&.in .modal-dialog { .translate(0, 0)}
}
// Shell div to position the modal with bottom padding
@ -51,7 +54,7 @@
border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
.box-shadow(0 3px 9px rgba(0, 0, 0, 0.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: none;
@ -67,8 +70,12 @@
z-index: @zindex-modal-background;
background-color: @modal-backdrop-bg;
// Fade for backdrop
&.fade { .opacity(0); }
&.in { .opacity(@modal-backdrop-opacity); }
&.fade {
.opacity(0);
}
&.in {
.opacity(@modal-backdrop-opacity);
}
}
// Modal header
@ -83,7 +90,11 @@
margin-top: -2px;
}
.modal-header {
h1, h2, h3, h4, h5 {
h1,
h2,
h3,
h4,
h5 {
margin: 0;
font-family: @font-family-sans-serif;
font-weight: 700;
@ -111,7 +122,8 @@
border-top: 1px solid @modal-footer-border-color;
background-color: @modal-footer-background-color;
border-radius: 0 0 @border-radius-large @border-radius-large;
&:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
&:extend(.clearfix
all); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn {
@ -140,13 +152,17 @@
margin: 30px auto;
}
.modal-content {
.box-shadow(0 5px 15px rgba(0,0,0,.5));
.box-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}
// Modal sizes
.modal-sm { width: @modal-sm; }
.modal-sm {
width: @modal-sm;
}
}
@media (min-width: @screen-md-min) {
.modal-lg { width: @modal-lg; }
.modal-lg {
width: @modal-lg;
}
}

64
services/web/frontend/stylesheets/components/navbar.less
View file

@ -2,7 +2,6 @@
// Navbars
// --------------------------------------------------
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
@ -35,7 +34,6 @@
}
}
// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
@ -50,7 +48,7 @@
max-height: @navbar-collapse-max-height;
overflow-x: visible;
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
&:extend(.clearfix all);
-webkit-overflow-scrolling: touch;
@ -85,7 +83,6 @@
}
}
.navbar-main {
z-index: 1;
.container-fluid > .navbar-collapse {
@ -106,13 +103,13 @@
padding: 0;
@media (min-width: @grid-float-breakpoint) {
// Get back to regular layout mode as soon as the menu items are
// Get back to regular layout mode as soon as the menu items are
// expanded (i.e. not contained within the hamburguer menu).
position: static;
background-color: transparent;
border-bottom: 0;
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
}
}
}
@ -125,16 +122,15 @@
> .navbar-header,
> .navbar-collapse {
margin-right: -@navbar-padding-horizontal;
margin-left: -@navbar-padding-horizontal;
margin-left: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) {
margin-right: 0;
margin-left: 0;
margin-left: 0;
}
}
}
//
// Navbar alignment options
//
@ -174,7 +170,6 @@
border-width: 1px 0 0;
}
// Brand/project name
.navbar-brand {
@ -198,17 +193,18 @@
}
.navbar-title {
font-size: 20px;
display: inline-block;
margin-top: 2px;
color: @navbar-title-color;
&:hover, &:active, &:focus {
color: @navbar-title-color-hover;
text-decoration: none;
}
font-size: 20px;
display: inline-block;
margin-top: 2px;
color: @navbar-title-color;
&:hover,
&:active,
&:focus {
color: @navbar-title-color-hover;
text-decoration: none;
}
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
@ -233,7 +229,6 @@
}
}
// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
@ -243,7 +238,7 @@
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
> li > a {
padding-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
line-height: @line-height-computed;
}
@ -275,7 +270,6 @@
}
> li > div.subdued {
line-height: @line-height-computed;
}
}
}
@ -288,7 +282,7 @@
> li {
float: left;
> a {
padding-top: @navbar-padding-vertical;
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
}
}
@ -299,7 +293,6 @@
}
}
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
@ -307,11 +300,14 @@
// though so that navbar contents properly stack and align in mobile.
@media (min-width: @grid-float-breakpoint) {
.navbar-left { .pull-left(); }
.navbar-right { .pull-right(); }
.navbar-left {
.pull-left();
}
.navbar-right {
.pull-right();
}
}
// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
@ -323,7 +319,8 @@
padding: 10px @navbar-padding-horizontal;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
@shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 1px 0 rgba(255, 255, 255, 0.1);
.box-shadow(@shadow);
// Mixin behavior for optimum display
@ -355,7 +352,6 @@
}
}
// Dropdown menus
// Menu position and menu carets
@ -368,7 +364,6 @@
.border-bottom-radius(0);
}
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
@ -384,7 +379,6 @@
}
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
@ -416,7 +410,7 @@
top: 0;
width: 100%;
height: @header-height;
.navbar-brand {
position: absolute;
top: 5px;
@ -482,7 +476,7 @@
background-color: @navbar-subdued-hover-bg;
}
&:focus {
.tab-focus()
.tab-focus();
}
@media (min-width: @grid-float-breakpoint) {
padding: @navbar-subdued-padding;
@ -514,7 +508,7 @@
}
.navbar-collapse.in {
box-shadow: 0 10px 15px rgba(0, 0, 0, .25);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25);
}
// Dropdown menu items
.navbar-nav {
@ -576,7 +570,6 @@
}
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
@ -587,7 +580,6 @@
color: @navbar-default-link-hover-color;
}
}
}
.navbar-default when (@is-overleaf = true) {

2
services/web/frontend/stylesheets/components/navs-ol.less
View file

@ -4,4 +4,4 @@
border-radius: @btn-border-radius-base;
}
}
}
}

14
services/web/frontend/stylesheets/components/navs.less
View file

@ -2,7 +2,6 @@
// Navs
// --------------------------------------------------
// Base class
// --------------------------------------------------
@ -69,7 +68,6 @@
}
}
// Tabs
// -------------------------
@ -89,7 +87,8 @@
border-radius: @border-radius-base @border-radius-base 0 0;
&:hover {
cursor: pointer;
border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
border-color: @nav-tabs-link-hover-border-color
@nav-tabs-link-hover-border-color @nav-tabs-border-color;
}
}
@ -113,7 +112,6 @@
}
}
// Pills
// -------------------------
.nav-pills {
@ -149,7 +147,6 @@
}
}
// Stacked pills
.nav-stacked {
> li {
@ -161,7 +158,6 @@
}
}
// Nav variations
// --------------------------------------------------
@ -173,7 +169,7 @@
> li {
float: none;
> a {
> a {
text-align: center;
margin-bottom: 5px;
}
@ -226,7 +222,6 @@
}
}
// Tabbable tabs
// -------------------------
@ -244,7 +239,6 @@
}
}
// Dropdowns
// -------------------------
@ -254,4 +248,4 @@
margin-top: -1px;
// Remove the top rounded corners here since there is a hard edge above the menu
.border-top-radius(0);
}
}

1217
services/web/frontend/stylesheets/components/nvd3.less
View file

File diff suppressed because it is too large Load diff

2
services/web/frontend/stylesheets/components/pager.less
View file

@ -2,7 +2,6 @@
// Pager pagination
// --------------------------------------------------
.pager {
padding-left: 0;
margin: @line-height-computed 0;
@ -51,5 +50,4 @@
cursor: not-allowed;
}
}
}

10
services/web/frontend/stylesheets/components/pagination.less
View file

@ -79,10 +79,16 @@
// Large
.pagination-lg {
.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large);
.pagination-size(
@padding-large-vertical; @padding-large-horizontal; @font-size-large;
@border-radius-large
);
}
// Small
.pagination-sm {
.pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small);
.pagination-size(
@padding-small-vertical; @padding-small-horizontal; @font-size-small;
@border-radius-small
);
}

37
services/web/frontend/stylesheets/components/panels.less
View file

@ -2,14 +2,13 @@
// Panels
// --------------------------------------------------
// Base class
.panel {
margin-bottom: @line-height-computed;
background-color: @panel-bg;
border: 1px solid transparent;
border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05));
.box-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
}
// Panel contents
@ -49,7 +48,6 @@
.border-bottom-radius((@panel-border-radius - 1));
}
// List groups in panels
//
// By default, space out list group content from panel headings to account for
@ -87,7 +85,6 @@
}
}
// Tables in panels
//
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
@ -186,7 +183,6 @@
}
}
// Collapsable panels (aka, accordion)
//
// Wrap a series of panels in `.panel-group` to turn them into an accordion with
@ -219,23 +215,40 @@
}
}
// Contextual variations
.panel-default {
.panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
.panel-variant(
@panel-default-border; @panel-default-text; @panel-default-heading-bg;
@panel-default-border
);
}
.panel-primary {
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
.panel-variant(
@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg;
@panel-primary-border
);
}
.panel-success {
.panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
.panel-variant(
@panel-success-border; @panel-success-text; @panel-success-heading-bg;
@panel-success-border
);
}
.panel-info {
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
.panel-variant(
@panel-info-border; @panel-info-text; @panel-info-heading-bg;
@panel-info-border
);
}
.panel-warning {
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
.panel-variant(
@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg;
@panel-warning-border
);
}
.panel-danger {
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
.panel-variant(
@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg;
@panel-danger-border
);
}

30
services/web/frontend/stylesheets/components/popovers.less
View file

@ -2,7 +2,6 @@
// Popovers
// --------------------------------------------------
.popover {
position: absolute;
top: 0;
@ -17,16 +16,24 @@
border: 1px solid @popover-fallback-border-color;
border: 1px solid @popover-border-color;
border-radius: @border-radius-large;
.box-shadow(0 5px 10px rgba(0,0,0,.2));
.box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
// Overrides for proper insertion
white-space: normal;
// Offset the popover to account for the popover arrow
&.top { margin-top: -@popover-arrow-width; }
&.right { margin-left: @popover-arrow-width; }
&.bottom { margin-top: @popover-arrow-width; }
&.left { margin-left: -@popover-arrow-width; }
&.top {
margin-top: -@popover-arrow-width;
}
&.right {
margin-left: @popover-arrow-width;
}
&.bottom {
margin-top: @popover-arrow-width;
}
&.left {
margin-left: -@popover-arrow-width;
}
}
.popover-title {
@ -64,7 +71,7 @@
}
.popover > .arrow:after {
border-width: @popover-arrow-width;
content: "";
content: '';
}
.popover {
@ -76,7 +83,7 @@
border-top-color: @popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width;
&:after {
content: " ";
content: ' ';
bottom: 1px;
margin-left: -@popover-arrow-width;
border-bottom-width: 0;
@ -91,7 +98,7 @@
border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-right-color: @popover-arrow-outer-color;
&:after {
content: " ";
content: ' ';
left: 1px;
bottom: -@popover-arrow-width;
border-left-width: 0;
@ -106,7 +113,7 @@
border-bottom-color: @popover-arrow-outer-color;
top: -@popover-arrow-outer-width;
&:after {
content: " ";
content: ' ';
top: 1px;
margin-left: -@popover-arrow-width;
border-top-width: 0;
@ -122,12 +129,11 @@
border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-left-color: @popover-arrow-outer-color;
&:after {
content: " ";
content: ' ';
right: 1px;
border-right-width: 0;
border-left-color: @popover-arrow-color;
bottom: -@popover-arrow-width;
}
}
}

25
services/web/frontend/stylesheets/components/progress-bars.less
View file

@ -2,24 +2,29 @@
// Progress bars
// --------------------------------------------------
// Bar animations
// -------------------------
// WebKit
@-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
// Spec and IE10+
@keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
// Bar itself
// -------------------------
@ -31,7 +36,7 @@
background-color: @progress-bg;
border-radius: @progress-border-radius;
border: @progress-border-width solid @progress-border-color;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
.box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1));
}
// Bar of progress
@ -45,7 +50,7 @@
text-align: center;
background-color: @progress-bar-bg;
.box-shadow(@progress-bar-shadow);
.transition(width .6s ease);
.transition(width 0.6s ease);
}
// Striped bars
@ -59,8 +64,6 @@
.animation(progress-bar-stripes 2s linear infinite);
}
// Variations
// -------------------------

14
services/web/frontend/stylesheets/components/tables.less
View file

@ -2,7 +2,6 @@
// Tables
// --------------------------------------------------
table {
max-width: 100%;
background-color: @table-bg;
@ -11,7 +10,6 @@ th {
text-align: left;
}
// Baseline styles
.table {
@ -58,7 +56,6 @@ th {
}
}
// Condensed table w/ half padding
.table-condensed {
@ -74,7 +71,6 @@ th {
}
}
// Bordered version
//
// Add borders all around the table and between all the columns.
@ -99,7 +95,6 @@ th {
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
@ -113,7 +108,6 @@ th {
}
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
@ -127,12 +121,11 @@ th {
}
}
// Table cell sizing
//
// Reset default table behavior
table col[class*="col-"] {
table col[class*='col-'] {
position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
float: none;
display: table-column;
@ -140,7 +133,7 @@ table col[class*="col-"] {
table {
td,
th {
&[class*="col-"] {
&[class*='col-'] {
position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
float: none;
display: table-cell;
@ -148,7 +141,6 @@ table {
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
@ -161,7 +153,6 @@ table {
.table-row-variant(warning; @state-warning-bg);
.table-row-variant(danger; @state-danger-bg);
// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
@ -227,7 +218,6 @@ table {
}
}
}
}
}
}

15
services/web/frontend/stylesheets/components/tabs.less
View file

@ -1,7 +1,7 @@
.ol-tabs {
// Overrides for nav.less
.nav-tabs {
border: 0!important;
border: 0 !important;
margin-bottom: 0;
margin-top: -@line-height-computed; //- adjusted for portal-name
padding: @padding-lg 0 @padding-md;
@ -14,8 +14,9 @@
a {
border: 0;
color: @link-color-alt;
&:focus, &:hover {
background-color: transparent!important;
&:focus,
&:hover {
background-color: transparent !important;
border: 0;
color: @link-hover-color-alt;
}
@ -23,8 +24,8 @@
}
li.active > a {
background-color: transparent!important;
border: 0!important;
background-color: transparent !important;
border: 0 !important;
border-bottom: 1px solid @accent-color-secondary!important;
color: @accent-color-secondary!important;
&:hover {
@ -33,7 +34,7 @@
}
}
.tab-content:extend(.container) {
background-color: transparent!important;
border: none!important;
background-color: transparent !important;
border: none !important;
}
}

20
services/web/frontend/stylesheets/components/tags-input.less
View file

@ -1,7 +1,9 @@
tags-input {
display: block;
}
tags-input *, tags-input *:before, tags-input *:after {
tags-input *,
tags-input *:before,
tags-input *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@ -86,8 +88,18 @@ tags-input[disabled] .tags {
}
tags-input[disabled] .tags .tag-item {
opacity: 0.65;
background: -webkit-linear-gradient(top, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%);
background: linear-gradient(to bottom, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%);
background: -webkit-linear-gradient(
top,
#f0f9ff 0%,
rgba(203, 235, 255, 0.75) 47%,
rgba(161, 219, 255, 0.62) 100%
);
background: linear-gradient(
to bottom,
#f0f9ff 0%,
rgba(203, 235, 255, 0.75) 47%,
rgba(161, 219, 255, 0.62) 100%
);
}
tags-input[disabled] .tags .tag-item .remove-button {
cursor: default;
@ -131,7 +143,7 @@ tags-input .autocomplete .suggestion-item.selected {
color: white;
background-color: @brand-primary;
.subdued {
color: white;
color: white;
}
}
tags-input .autocomplete .suggestion-item em {

205
services/web/frontend/stylesheets/components/theme.less
View file

@ -1,12 +1,9 @@
//
// Load core variables and mixins
// --------------------------------------------------
@import "variables.less";
@import "mixins.less";
@import 'variables.less';
@import 'mixins.less';
//
// Buttons
@ -19,26 +16,30 @@
.btn-info,
.btn-warning,
.btn-danger {
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
@shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 1px 1px rgba(0, 0, 0, 0.075);
.box-shadow(@shadow);
// Reset the shadow
&:active,
&.active {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
}
}
// Mixin for generating new styles
.btn-styles(@btn-color: #555) {
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
.reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
#gradient >
.vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
.reset-filter(
); // Disable gradients for IE9 because filter bleeds through rounded corners
background-repeat: repeat-x;
border-color: darken(@btn-color, 14%);
&:hover,
&:focus {
&:focus {
background-color: darken(@btn-color, 12%);
background-position: 0 -15px;
}
@ -60,14 +61,26 @@
}
// Apply the mixin to the buttons
.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
.btn-primary { .btn-styles(@btn-primary-bg); }
.btn-success { .btn-styles(@btn-success-bg); }
.btn-info { .btn-styles(@btn-info-bg); }
.btn-warning { .btn-styles(@btn-warning-bg); }
.btn-danger { .btn-styles(@btn-danger-bg); }
.btn-default {
.btn-styles(@btn-default-bg);
text-shadow: 0 1px 0 #fff;
border-color: #ccc;
}
.btn-primary {
.btn-styles(@btn-primary-bg);
}
.btn-success {
.btn-styles(@btn-success-bg);
}
.btn-info {
.btn-styles(@btn-info-bg);
}
.btn-warning {
.btn-styles(@btn-warning-bg);
}
.btn-danger {
.btn-styles(@btn-danger-bg);
}
//
// Images
@ -75,64 +88,89 @@
.thumbnail,
.img-thumbnail {
.box-shadow(0 1px 2px rgba(0,0,0,.075));
.box-shadow(0 1px 2px rgba(0, 0, 0, 0.075));
}
//
// Dropdowns
// --------------------------------------------------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
#gradient >
.vertical(
@start-color: @dropdown-link-hover-bg; @end-color:
darken(@dropdown-link-hover-bg, 5%)
);
background-color: darken(@dropdown-link-hover-bg, 5%);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
#gradient >
.vertical(
@start-color: @dropdown-link-active-bg; @end-color:
darken(@dropdown-link-active-bg, 5%)
);
background-color: darken(@dropdown-link-active-bg, 5%);
}
//
// Navbar
// --------------------------------------------------
// Default navbar
.navbar-default {
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
#gradient >
.vertical(
@start-color: lighten(@navbar-default-bg, 10%) ; @end-color:
@navbar-default-bg
);
.reset-filter(
); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
border-radius: @navbar-border-radius;
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
@shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 1px 5px rgba(0, 0, 0, 0.075);
.box-shadow(@shadow);
.navbar-nav > .active > a {
#gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%));
.box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
#gradient >
.vertical(
@start-color: darken(@navbar-default-bg, 5%) ; @end-color:
darken(@navbar-default-bg, 2%)
);
.box-shadow(inset 0 3px 9px rgba(0, 0, 0, 0.075));
}
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 1px 0 rgba(255,255,255,.25);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
// Inverted navbar
.navbar-inverse {
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
#gradient >
.vertical(
@start-color: lighten(@navbar-inverse-bg, 10%) ; @end-color:
@navbar-inverse-bg
);
.reset-filter(
); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
.navbar-nav > .active > a {
#gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%));
.box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
#gradient >
.vertical(
@start-color: @navbar-inverse-bg; @end-color:
lighten(@navbar-inverse-bg, 2.5%)
);
.box-shadow(inset 0 3px 9px rgba(0, 0, 0, 0.25));
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
}
@ -143,16 +181,15 @@
border-radius: 0;
}
//
// Alerts
// --------------------------------------------------
// Common styles
.alert {
text-shadow: 0 1px 0 rgba(255,255,255,.2);
@shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
@shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 2px rgba(0, 0, 0, 0.05);
.box-shadow(@shadow);
}
@ -163,12 +200,18 @@
}
// Apply the mixin to the alerts
.alert-success { .alert-styles(@alert-success-bg); }
.alert-info { .alert-styles(@alert-info-bg); }
.alert-warning { .alert-styles(@alert-warning-bg); }
.alert-danger { .alert-styles(@alert-danger-bg); }
.alert-success {
.alert-styles(@alert-success-bg);
}
.alert-info {
.alert-styles(@alert-info-bg);
}
.alert-warning {
.alert-styles(@alert-warning-bg);
}
.alert-danger {
.alert-styles(@alert-danger-bg);
}
//
// Progress bars
@ -176,7 +219,8 @@
// Give the progress background some depth
.progress {
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
#gradient >
.vertical(@start-color: darken(@progress-bg, 4%) ; @end-color: @progress-bg);
}
// Mixin for generating new styles
@ -185,13 +229,21 @@
}
// Apply the mixin to the progress bars
.progress-bar { .progress-bar-styles(@progress-bar-bg); }
.progress-bar-success { .progress-bar-styles(@progress-bar-success-bg); }
.progress-bar-info { .progress-bar-styles(@progress-bar-info-bg); }
.progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); }
.progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); }
.progress-bar {
.progress-bar-styles(@progress-bar-bg);
}
.progress-bar-success {
.progress-bar-styles(@progress-bar-success-bg);
}
.progress-bar-info {
.progress-bar-styles(@progress-bar-info-bg);
}
.progress-bar-warning {
.progress-bar-styles(@progress-bar-warning-bg);
}
.progress-bar-danger {
.progress-bar-styles(@progress-bar-danger-bg);
}
//
// List groups
@ -199,25 +251,27 @@
.list-group {
border-radius: @border-radius-base;
.box-shadow(0 1px 2px rgba(0,0,0,.075));
.box-shadow(0 1px 2px rgba(0, 0, 0, 0.075));
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
#gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
#gradient >
.vertical(
@start-color: @list-group-active-bg; @end-color:
darken(@list-group-active-bg, 7.5%)
);
border-color: darken(@list-group-active-border, 7.5%);
}
//
// Panels
// --------------------------------------------------
// Common styles
.panel {
.box-shadow(0 1px 2px rgba(0,0,0,.05));
.box-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
}
// Mixin for generating new styles
@ -226,22 +280,33 @@
}
// Apply the mixin to the panel headings only
.panel-default > .panel-heading { .panel-heading-styles(@panel-default-heading-bg); }
.panel-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); }
.panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); }
.panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); }
.panel-warning > .panel-heading { .panel-heading-styles(@panel-warning-heading-bg); }
.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); }
.panel-default > .panel-heading {
.panel-heading-styles(@panel-default-heading-bg);
}
.panel-primary > .panel-heading {
.panel-heading-styles(@panel-primary-heading-bg);
}
.panel-success > .panel-heading {
.panel-heading-styles(@panel-success-heading-bg);
}
.panel-info > .panel-heading {
.panel-heading-styles(@panel-info-heading-bg);
}
.panel-warning > .panel-heading {
.panel-heading-styles(@panel-warning-heading-bg);
}
.panel-danger > .panel-heading {
.panel-heading-styles(@panel-danger-heading-bg);
}
//
// Wells
// --------------------------------------------------
.well {
#gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
#gradient >
.vertical(@start-color: darken(@well-bg, 5%) ; @end-color: @well-bg);
border-color: darken(@well-bg, 10%);
@shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
@shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
.box-shadow(@shadow);
}

3
services/web/frontend/stylesheets/components/thumbnails.less
View file

@ -2,7 +2,6 @@
// Thumbnails
// --------------------------------------------------
// Mixin and adjust the regular image class
.thumbnail {
display: block;
@ -12,7 +11,7 @@
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out);
.transition(all 0.2s ease-in-out);
> img,
a > img {

31
services/web/frontend/stylesheets/components/tooltip.less
View file

@ -2,7 +2,6 @@
// Tooltips
// --------------------------------------------------
// Base class
.tooltip {
position: absolute;
@ -13,11 +12,25 @@
line-height: 1.4;
.opacity(0);
&.in { .opacity(@tooltip-opacity); }
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
&.in {
.opacity(@tooltip-opacity);
}
&.top {
margin-top: -3px;
padding: @tooltip-arrow-width 0;
}
&.right {
margin-left: 3px;
padding: 0 @tooltip-arrow-width;
}
&.bottom {
margin-top: 3px;
padding: @tooltip-arrow-width 0;
}
&.left {
margin-left: -3px;
padding: 0 @tooltip-arrow-width;
}
}
// Wrapper for the tooltip content
@ -63,14 +76,16 @@
top: 50%;
left: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width
0;
border-right-color: @tooltip-arrow-color;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width
@tooltip-arrow-width;
border-left-color: @tooltip-arrow-color;
}
&.bottom .tooltip-arrow {

95
services/web/frontend/stylesheets/components/ui-select.less
View file

@ -1,63 +1,64 @@
.ui-select-bootstrap > .ui-select-choices,
.ui-select-bootstrap > .ui-select-no-choice {
width: auto;
max-width: 400px;
width: auto;
max-width: 400px;
}
.dropdown-menu .ui-select-choices-row {
padding: 4px 0;
padding: 4px 0;
> .ui-select-choices-row-inner {
overflow: hidden;
text-overflow: ellipsis;
}
> .ui-select-choices-row-inner {
overflow: hidden;
text-overflow: ellipsis;
}
}
.ui-select-placeholder,
.ui-select-match-text {
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
}
.ui-select-bootstrap {
&:focus {
outline: none;
}
> .ui-select-match {
&:focus {
outline: none;
}
&.btn-default-focus {
outline: 0;
box-shadow: none;
background-color: transparent;
> .btn {
border-color: @input-border-focus;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px fade(@input-border-focus, 60%);
padding-top: @input-suggestion-v-offset;
}
}
> .btn {
color: @input-color;
background-color: @input-bg;
border: 1px solid @input-border;
padding-top: @input-suggestion-v-offset;
&[disabled] {
cursor: not-allowed;
background-color: @input-bg-disabled;
opacity: 1;
}
}
}
&:focus {
outline: none;
}
> .ui-select-match {
&:focus {
outline: none;
}
&.btn-default-focus {
outline: 0;
box-shadow: none;
background-color: transparent;
> .btn {
border-color: @input-border-focus;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 8px fade(@input-border-focus, 60%);
padding-top: @input-suggestion-v-offset;
}
}
> .btn {
color: @input-color;
background-color: @input-bg;
border: 1px solid @input-border;
padding-top: @input-suggestion-v-offset;
&[disabled] {
cursor: not-allowed;
background-color: @input-bg-disabled;
opacity: 1;
}
}
}
}
.ui-select-container[tagging] {
.ui-select-toggle {
cursor: text;
padding-top: @input-suggestion-v-offset;
> i.caret.pull-right {
display: none;
}
}
}
.ui-select-toggle {
cursor: text;
padding-top: @input-suggestion-v-offset;
> i.caret.pull-right {
display: none;
}
}
}

5
services/web/frontend/stylesheets/components/wells.less
View file

@ -2,7 +2,6 @@
// Wells
// --------------------------------------------------
// Base class
.well {
min-height: 20px;
@ -11,10 +10,10 @@
background-color: @well-bg;
border: 1px solid @well-border;
border-radius: @border-radius-base;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
.box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
blockquote {
border-color: #ddd;
border-color: rgba(0,0,0,.15);
border-color: rgba(0, 0, 0, 0.15);
}
}

8
services/web/frontend/stylesheets/core/accessibility.less
View file

@ -8,7 +8,7 @@
// <del> styling taken from:
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del#Accessibility_concerns
del::before,
del::before,
del::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
@ -19,9 +19,9 @@ del::after {
width: 1px;
}
del::before {
content: " [deletion start] ";
content: ' [deletion start] ';
}
del::after {
content: " [deletion end] ";
}
content: ' [deletion end] ';
}

8
services/web/frontend/stylesheets/core/grid.less
View file

@ -2,7 +2,6 @@
// Grid system
// --------------------------------------------------
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
@ -21,7 +20,6 @@
}
}
// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
@ -31,7 +29,6 @@
.container-fixed();
}
// Row
//
// Rows contain and clear the floats of your columns.
@ -40,14 +37,12 @@
.make-row();
}
// Columns
//
// Common styles for small and large grid columns
.make-grid-columns();
// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
@ -55,7 +50,6 @@
.make-grid(xs);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
@ -65,7 +59,6 @@
.make-grid(sm);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@ -74,7 +67,6 @@
.make-grid(md);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

386
services/web/frontend/stylesheets/core/mixins.less
View file

@ -2,7 +2,6 @@
// Mixins
// --------------------------------------------------
// Utilities
// -------------------------
@ -19,7 +18,7 @@
.clearfix() {
&:before,
&:after {
content: " "; // 1
content: ' '; // 1
display: table; // 2
}
&:after {
@ -54,10 +53,16 @@
// Placeholder text
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; // Firefox
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
&::-moz-placeholder {
color: @color; // Firefox
opacity: 1;
} // See https://github.com/twbs/bootstrap/pull/11526
&:-ms-input-placeholder {
color: @color;
} // Internet Explorer 10+
&::-webkit-input-placeholder {
color: @color;
} // Safari and Chrome
}
// Text overflow
@ -79,7 +84,7 @@
// Deprecated as of v3.0.1 (will be removed in v4)
.hide-text() {
font: ~"0/0" a;
font: ~'0/0' a;
color: transparent;
text-shadow: none;
background-color: transparent;
@ -90,27 +95,25 @@
.hide-text();
}
// CSS3 PROPERTIES
// --------------------------------------------------
// Single side border-radius
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
border-top-left-radius: @radius;
}
// Drop shadows
@ -120,139 +123,139 @@
// standard `box-shadow` property.
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
box-shadow: @shadow;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
// Transformations
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
// Animations
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
animation-direction: @direction;
}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`
.backface-visibility(@visibility){
.backface-visibility(@visibility) {
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
backface-visibility: @visibility;
}
// Box sizing
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
// User select
// For selecting text on the page
.user-select(@select) {
-webkit-user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select; // IE10+
user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select; // IE10+
user-select: @select;
}
// Resize anything
@ -264,21 +267,21 @@
// CSS3 Content Columns
.content-columns(@column-count; @column-gap: @grid-gutter-width) {
-webkit-column-count: @column-count;
-moz-column-count: @column-count;
column-count: @column-count;
-moz-column-count: @column-count;
column-count: @column-count;
-webkit-column-gap: @column-gap;
-moz-column-gap: @column-gap;
column-gap: @column-gap;
-moz-column-gap: @column-gap;
column-gap: @column-gap;
}
// Optional hyphenation
.hyphens(@mode: auto) {
word-wrap: break-word;
-webkit-hyphens: @mode;
-moz-hyphens: @mode;
-ms-hyphens: @mode; // IE10+
-o-hyphens: @mode;
hyphens: @mode;
-moz-hyphens: @mode;
-ms-hyphens: @mode; // IE10+
-o-hyphens: @mode;
hyphens: @mode;
}
// Opacity
@ -286,25 +289,36 @@
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
filter: ~'alpha(opacity=@{opacity-ie})';
}
// GRADIENTS
// --------------------------------------------------
#gradient {
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-image: -webkit-linear-gradient(
left,
color-stop(@start-color @start-percent),
color-stop(@end-color @end-percent)
); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient(
to right,
@start-color @start-percent,
@end-color @end-percent
); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
filter: e(
%(
"progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",
argb(@start-color),
argb(@end-color)
)
); // IE9 and down
}
// Vertical gradient, from top to bottom
@ -312,37 +326,111 @@
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-image: -webkit-linear-gradient(
top,
@start-color @start-percent,
@end-color @end-percent
); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient(
to bottom,
@start-color @start-percent,
@end-color @end-percent
); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
filter: e(
%(
"progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",
argb(@start-color),
argb(@end-color)
)
); // IE9 and down
}
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-image: -webkit-linear-gradient(
@deg,
@start-color,
@end-color
); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient(
@deg,
@start-color,
@end-color
); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
}
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
background-image: -webkit-linear-gradient(
left,
@start-color,
@mid-color @color-stop,
@end-color
);
background-image: linear-gradient(
to right,
@start-color,
@mid-color @color-stop,
@end-color
);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
filter: e(
%(
"progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",
argb(@start-color),
argb(@end-color)
)
); // IE9 and down, gets no color-stop at all for proper fallback
}
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-image: -webkit-linear-gradient(
@start-color,
@mid-color @color-stop,
@end-color
);
background-image: linear-gradient(
@start-color,
@mid-color @color-stop,
@end-color
);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
filter: e(
%(
"progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",
argb(@start-color),
argb(@end-color)
)
); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@inner-color: #555; @outer-color: #333) {
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
background-image: -webkit-radial-gradient(
circle,
@inner-color,
@outer-color
);
background-image: radial-gradient(circle, @inner-color, @outer-color);
background-repeat: no-repeat;
}
.striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
.striped(@color: rgba(255,255,255,0.15); @angle: 45deg) {
background-image: -webkit-linear-gradient(
@angle,
@color 25%,
transparent 25%,
transparent 50%,
@color 50%,
@color 75%,
transparent 75%,
transparent
);
background-image: linear-gradient(
@angle,
@color 25%,
transparent 25%,
transparent 50%,
@color 50%,
@color 75%,
transparent 75%,
transparent
);
}
}
@ -351,31 +439,27 @@
// When you need to remove a gradient background, do not forget to use this to reset
// the IE filter for IE9 and below.
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
filter: e(%('progid:DXImageTransform.Microsoft.gradient(enabled = false)'));
}
// Retina images
//
// Short retina mixin for setting background-image and -size
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
background-image: url('@{file-1x}');
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
background-image: url('@{file-2x}');
background-size: @width-1x @height-1x;
}
}
// Responsive image
//
// Keep images from scaling beyond the width of their parents.
@ -386,7 +470,6 @@
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}
// COMPONENT MIXINS
// --------------------------------------------------
@ -439,17 +522,20 @@
display: inline-block;
font-weight: bold;
text-decoration: none;
.button-variant(#FFF, shade(@background, 20%), transparent);
.button-size(@padding-xs-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
.button-variant(#fff, shade(@background, 20%), transparent);
.button-size(
@padding-xs-vertical; @padding-small-horizontal; @font-size-small;
@line-height-small; @btn-border-radius-small
);
&:hover {
text-decoration: none;
}
}
small,
.small {
color: @text-color;
}
.small {
color: @text-color;
}
}
// Tables
@ -490,7 +576,9 @@
a& {
color: @color;
.list-group-item-heading { color: inherit; }
.list-group-item-heading {
color: inherit;
}
&:hover,
&:focus {
@ -518,7 +606,7 @@
border-color: @border;
.alert & when (@is-overleaf = true) {
background-color: darken(@background, 16%);
background-color: darken(@background, 16%);
}
&:hover,
@ -529,10 +617,10 @@
.open .dropdown-toggle& {
color: @color;
background-color: darken(@background, 8%);
border-color: darken(@border, 12%);
.alert & when (@is-overleaf = true) {
background-color: darken(@background, 24%);
}
border-color: darken(@border, 12%);
.alert & when (@is-overleaf = true) {
background-color: darken(@background, 24%);
}
}
&:active,
&.active,
@ -548,7 +636,7 @@
&:active,
&.active {
background-color: @background;
border-color: @border;
border-color: @border;
}
}
@ -690,17 +778,22 @@
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
display: block !important;
table& { display: table; }
tr& { display: table-row !important; }
table& {
display: table;
}
tr& {
display: table-row !important;
}
th&,
td& { display: table-cell !important; }
td& {
display: table-cell !important;
}
}
.responsive-invisibility() {
display: none !important;
}
// Grid System
// -----------
@ -708,14 +801,14 @@
.container-fixed() {
margin-right: auto;
margin-left: auto;
padding-left: (@grid-gutter-width / 2);
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
&:extend(.clearfix all);
}
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
margin-left: (@gutter / -2);
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
&:extend(.clearfix all);
}
@ -726,7 +819,7 @@
float: left;
width: percentage((@columns / @grid-columns));
min-height: 1px;
padding-left: (@gutter / 2);
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
.make-xs-column-offset(@columns) {
@ -745,12 +838,11 @@
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-sm-min) {
@ -774,12 +866,11 @@
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-md-min) {
@ -803,12 +894,11 @@
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-lg-min) {
@ -832,7 +922,6 @@
}
}
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
@ -840,21 +929,24 @@
.make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) when (@index = 1) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col(@index) when (@index = 1) {
// initial
@item: ~'.col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}';
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
.col(@index, @list) when (@index =< @grid-columns) {
// general; "=<" isn't a typo
@item: ~'.col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}';
.col((@index + 1), ~'@{list}, @{item}');
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
.col(@index, @list) when (@index > @grid-columns) {
// terminal
@{list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
}
@ -862,15 +954,18 @@
}
.float-grid-columns(@class) {
.col(@index) when (@index = 1) { // initial
@item: ~".col-@{class}-@{index}";
.col(@index) when (@index = 1) {
// initial
@item: ~'.col-@{class}-@{index}';
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
.col(@index, @list) when (@index =< @grid-columns) {
// general
@item: ~'.col-@{class}-@{index}';
.col((@index + 1), ~'@{list}, @{item}');
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
.col(@index, @list) when (@index > @grid-columns) {
// terminal
@{list} {
float: left;
}
@ -927,16 +1022,19 @@
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
.checkbox-inline {
color: @text-color;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: @border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
.box-shadow(
inset 0 1px 1px rgba(0, 0, 0, 0.075)
); // Redeclare so transitions work
&:focus {
border-color: darken(@border-color, 10%);
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
@shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 6px lighten(@border-color, 20%);
.box-shadow(@shadow);
}
}
@ -966,11 +1064,11 @@
// contrast against a dark gray background.
.form-control-focus(@color: @input-border-focus) {
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
@color-rgba: rgba(red(@color), green(@color), blue(@color), 0.6);
&:focus {
border-color: @color;
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
.box-shadow(~'inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}');
}
}

16
services/web/frontend/stylesheets/core/normalize.less vendored
View file

@ -327,8 +327,8 @@ input {
// 2. Remove excess padding in IE 8/9/10.
//
input[type="checkbox"],
input[type="radio"] {
input[type='checkbox'],
input[type='radio'] {
box-sizing: border-box; // 1
padding: 0; // 2
}
@ -339,8 +339,8 @@ input[type="radio"] {
// decrement button to change from `default` to `text`.
//
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
height: auto;
}
@ -350,7 +350,7 @@ input[type="number"]::-webkit-outer-spin-button {
// (include `-moz` to future-proof).
//
input[type="search"] {
input[type='search'] {
-webkit-appearance: textfield; // 1
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; // 2
@ -363,8 +363,8 @@ input[type="search"] {
// padding (and `textfield` appearance).
//
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
@ -420,4 +420,4 @@ table {
td,
th {
padding: 0;
}
}

Some files were not shown because too many files have changed in this diff Show more