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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -28,7 +28,7 @@
*/ */
section { section {
padding: @line-height-computed (@grid-gutter-width / 2); padding: @line-height-computed (@grid-gutter-width / 2);
&.color-block { &.color-block {
&.green-dark { &.green-dark {
background-color: @ol-dark-green; background-color: @ol-dark-green;
@ -47,7 +47,7 @@
margin: 0 auto; margin: 0 auto;
/* match .col-sm-10 */ /* match .col-sm-10 */
/* @grid-gutter-width is used for margins */ /* @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) { @media (min-width: @screen-md-min) {
max-width: (@screen-md * (10/12)) - @grid-gutter-width; max-width: (@screen-md * (10/12)) - @grid-gutter-width;
} }
@ -86,10 +86,10 @@
/* /*
lists lists
*/ */
.list-without-style { .list-without-style {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 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 { .binary-file {
padding: @line-height-computed / 2; padding: @line-height-computed / 2;
background-color: @gray-lightest; background-color: @gray-lightest;
text-align: center; text-align: center;
overflow: auto; overflow: auto;
img { img {
max-width: 100%; max-width: 100%;
max-height: 90%; max-height: 90%;
display: block; display: block;
margin: auto; margin: auto;
margin-top: @line-height-computed / 2; margin-top: @line-height-computed / 2;
border: 1px solid @gray; border: 1px solid @gray;
.box-shadow(0 2px 3px @gray;); .box-shadow(0 2px 3px @gray;);
background-color: white; background-color: white;
} }
.img-preview { .img-preview {
background: url('/img/spinner.gif') no-repeat; background: url('/img/spinner.gif') no-repeat;
min-width: 200px; min-width: 200px;
min-height: 200px; min-height: 200px;
} }
p.no-preview { p.no-preview {
margin-top: @line-height-computed / 2; margin-top: @line-height-computed / 2;
font-size: 24px; font-size: 24px;
color: @gray; color: @gray;
} }
.text-loading { .text-loading {
margin-top: @line-height-computed / 2; margin-top: @line-height-computed / 2;
font-size: 24px; font-size: 24px;
color: @gray; color: @gray;
} }
.text-preview { .text-preview {
margin-top: @line-height-computed / 2; margin-top: @line-height-computed / 2;
.scroll-container { .scroll-container {
background-color: white; background-color: white;
font-size: 0.8em; font-size: 0.8em;
line-height: 1.1em; line-height: 1.1em;
overflow: auto; overflow: auto;
border: 1px solid @gray-lighter; border: 1px solid @gray-lighter;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
text-align: left; text-align: left;
white-space: pre; white-space: pre;
font-family: monospace; font-family: monospace;
} }
} }
.linked-file-icon { .linked-file-icon {
color: @blue color: @blue;
} }
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,207 +1,210 @@
@toolbar-height: 40px; @toolbar-height: 40px;
.toolbar { .toolbar {
display: flex; display: flex;
align-items: center; align-items: center;
height: @toolbar-height; height: @toolbar-height;
border-bottom: @toolbar-border-bottom; border-bottom: @toolbar-border-bottom;
> a, .toolbar-right > a { > a,
position: relative; .toolbar-right > a {
.label { position: relative;
position: absolute; .label {
top: 0; position: absolute;
right: 0; top: 0;
padding: .15em .6em .2em; right: 0;
font-size: 60%; padding: 0.15em 0.6em 0.2em;
pointer-events: none; // Labels were capturing button/anchor clicks. font-size: 60%;
} pointer-events: none; // Labels were capturing button/anchor clicks.
} }
}
> a:focus { > a:focus {
outline: none; outline: none;
} }
> a:not(.btn), > a:not(.btn),
.toolbar-left > a:not(.btn), .toolbar-left > a:not(.btn),
.toolbar-right > a:not(.btn) { .toolbar-right > a:not(.btn) {
display: inline-block; display: inline-block;
color: @toolbar-icon-btn-color; color: @toolbar-icon-btn-color;
padding: 4px 2px; padding: 4px 2px;
line-height: 1; line-height: 1;
height: 24px; height: 24px;
border-radius: @border-radius-small; border-radius: @border-radius-small;
&.toolbar-header-back-projects { &.toolbar-header-back-projects {
padding: 5px 10px 4px; padding: 5px 10px 4px;
margin-bottom: 1px; margin-bottom: 1px;
} }
&:hover { &:hover {
text-shadow: @toolbar-icon-btn-hover-shadow; text-shadow: @toolbar-icon-btn-hover-shadow;
color: @toolbar-icon-btn-hover-color; color: @toolbar-icon-btn-hover-color;
text-decoration: none; text-decoration: none;
} }
&.active, &:active { &.active,
.label { &:active {
display: none; .label {
} display: none;
color: white; }
background-color: @link-color; color: white;
box-shadow: @toolbar-icon-btn-hover-boxshadow; background-color: @link-color;
&:hover { box-shadow: @toolbar-icon-btn-hover-boxshadow;
color: white; &:hover {
} color: white;
} }
} }
}
&.toolbar-pdf > a:not(.btn) { &.toolbar-pdf > a:not(.btn) {
margin-right: 3px; margin-right: 3px;
} }
.btn-full-height { .btn-full-height {
border: none; border: none;
border-radius: 0; border-radius: 0;
border-right: 1px solid @toolbar-header-btn-border-color; border-right: 1px solid @toolbar-header-btn-border-color;
color: @toolbar-btn-color; color: @toolbar-btn-color;
padding: 3px 10px 5px; padding: 3px 10px 5px;
font-size: 20px; font-size: 20px;
max-height: 39px; max-height: 39px;
&:hover { &:hover {
text-shadow: @toolbar-btn-hover-text-shadow; text-shadow: @toolbar-btn-hover-text-shadow;
background-color: @toolbar-btn-hover-bg-color; background-color: @toolbar-btn-hover-bg-color;
color: @toolbar-btn-hover-color; color: @toolbar-btn-hover-color;
} }
&.active, &:active { &.active,
color: @toolbar-btn-active-color; &:active {
background-color: @toolbar-btn-active-bg-color; color: @toolbar-btn-active-color;
box-shadow: @toolbar-btn-active-shadow; background-color: @toolbar-btn-active-bg-color;
} box-shadow: @toolbar-btn-active-shadow;
.label { }
top: 4px; .label {
right: 4px; top: 4px;
} right: 4px;
}
&.header-cobranding-logo-container { &.header-cobranding-logo-container {
height: @toolbar-height - 1; height: @toolbar-height - 1;
padding: 8px 10px; padding: 8px 10px;
background-color: @toolbar-header-branded-btn-bg-color; background-color: @toolbar-header-branded-btn-bg-color;
} }
} }
.btn-full-height-no-border { .btn-full-height-no-border {
border-right: 0; border-right: 0;
border-left: 0; border-left: 0;
} }
.toolbar-left { .toolbar-left {
display: flex; display: flex;
float: left; float: left;
text-align: center; text-align: center;
align-items: center; align-items: center;
} }
.toolbar-right { .toolbar-right {
display: flex; display: flex;
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
justify-content: flex-end; justify-content: flex-end;
.btn-full-height { .btn-full-height {
border-right: 0; border-right: 0;
border-left: 1px solid @toolbar-header-btn-border-color; border-left: 1px solid @toolbar-header-btn-border-color;
} }
} }
.toolbar-center { .toolbar-center {
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
// At small screen sizes, center relative to the left menu and right buttons // At small screen sizes, center relative to the left menu and right buttons
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
&.toolbar-header { &.toolbar-header {
background-color: @toolbar-header-bg-color; background-color: @toolbar-header-bg-color;
box-shadow: @toolbar-header-shadow; box-shadow: @toolbar-header-shadow;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 1; z-index: 1;
} }
&.toolbar-small { &.toolbar-small {
.toolbar-small-mixin; .toolbar-small-mixin;
} }
&.toolbar-tall { &.toolbar-tall {
.toolbar-small-mixin; .toolbar-small-mixin;
} }
&.toolbar-alt { &.toolbar-alt {
.toolbar-alt-mixin; .toolbar-alt-mixin;
} }
} }
.header-cobranding-logo { .header-cobranding-logo {
display: block; display: block;
width: auto; width: auto;
max-height: 100%; max-height: 100%;
} }
.toolbar-small-mixin() { .toolbar-small-mixin() {
height: @toolbar-small-height; height: @toolbar-small-height;
} }
.toolbar-tall-mixin() { .toolbar-tall-mixin() {
height: @toolbar-tall-height; height: @toolbar-tall-height;
padding-top: 10px; padding-top: 10px;
} }
.toolbar-alt-mixin() { .toolbar-alt-mixin() {
background-color: @toolbar-alt-bg-color; background-color: @toolbar-alt-bg-color;
} }
.toolbar-label { .toolbar-label {
display: none; display: none;
margin: 0 4px; margin: 0 4px;
font-size: @toolbar-font-size; font-size: @toolbar-font-size;
font-weight: 600; font-weight: 600;
margin-bottom: 2px; margin-bottom: 2px;
vertical-align: middle; vertical-align: middle;
text-align: left; text-align: left;
@media (min-width: @screen-md-min) { @media (min-width: @screen-md-min) {
display: inline-block; display: inline-block;
} }
&.toolbar-label-multiline { &.toolbar-label-multiline {
line-height: 1.1; line-height: 1.1;
} }
} }
.editor-dark { .editor-dark {
.toolbar-alt { .toolbar-alt {
background-color: darken(@editor-dark-background-color, 0%); background-color: darken(@editor-dark-background-color, 0%);
} }
.toolbar { .toolbar {
border-color: @editor-dark-toolbar-border-color; border-color: @editor-dark-toolbar-border-color;
.btn-full-height { .btn-full-height {
border-color: @editor-dark-toolbar-border-color; border-color: @editor-dark-toolbar-border-color;
&:hover { &:hover {
background-color: black; background-color: black;
color: lighten(@link-color, 10%); color: lighten(@link-color, 10%);
} }
} }
&.toolbar-header { &.toolbar-header {
box-shadow: none; box-shadow: none;
} }
> a:not(.btn) { > a:not(.btn) {
color: @gray; color: @gray;
&:hover { &:hover {
color: @gray-light; color: @gray-light;
} }
} }
} }
} }
/************************************** /**************************************
@ -209,145 +212,145 @@
***************************************/ ***************************************/
.toggle-wrapper { .toggle-wrapper {
min-width: 200px; min-width: 200px;
height: 24px; height: 24px;
} }
.toggle-switch { .toggle-switch {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: @toggle-switch-bg; background-color: @toggle-switch-bg;
border-radius: @btn-border-radius-base; border-radius: @btn-border-radius-base;
} }
.toggle-switch-label { .toggle-switch-label {
position: relative; position: relative;
display: block; display: block;
font-weight: normal; font-weight: normal;
z-index: 2; z-index: 2;
float: left; float: left;
width: 50%; width: 50%;
height: 100%; height: 100%;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
margin-bottom: 0; margin-bottom: 0;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
color: @text-color; color: @text-color;
transition: color 0.12s ease-out; transition: color 0.12s ease-out;
} }
.toggle-switch-input { .toggle-switch-input {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
} }
.toggle-switch-input:checked + .toggle-switch-label { .toggle-switch-input:checked + .toggle-switch-label {
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
} }
.toggle-switch-selection { .toggle-switch-selection {
display: block; display: block;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 2px; top: 2px;
left: 2px; left: 2px;
right: 2px; right: 2px;
width: calc(~"50% - 2px"); width: calc(~'50% - 2px');
height: calc(~"100% - 4px"); height: calc(~'100% - 4px');
background: @toggle-switch-highlight-color; background: @toggle-switch-highlight-color;
border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base; border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
transition: transform 0.12s ease-out, border-radius 0.12s ease-out; transition: transform 0.12s ease-out, border-radius 0.12s ease-out;
} }
.toggle-switch-input:checked:nth-child(4) ~ .toggle-switch-selection { .toggle-switch-input:checked:nth-child(4) ~ .toggle-switch-selection {
transform: translate(100%); transform: translate(100%);
border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0; border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
} }
/************************************** /**************************************
Formatting buttons Formatting buttons
***************************************/ ***************************************/
.formatting-buttons { .formatting-buttons {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
.formatting-buttons-wrapper { .formatting-buttons-wrapper {
display: flex; display: flex;
} }
.formatting-btn { .formatting-btn {
color: @formatting-btn-color; color: @formatting-btn-color;
background-color: @formatting-btn-bg; background-color: @formatting-btn-bg;
padding: 0; padding: 0;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: none; box-shadow: none;
border: none; border: none;
border-left: 1px solid @formatting-btn-border; border-left: 1px solid @formatting-btn-border;
border-radius: 0; border-radius: 0;
&:hover { &:hover {
color: @formatting-btn-color; color: @formatting-btn-color;
} }
} }
.formatting-btn--icon { .formatting-btn--icon {
min-width: 32px; min-width: 32px;
width: 32px; width: 32px;
} }
.formatting-btn--icon:last-of-type { .formatting-btn--icon:last-of-type {
border-right: 1px solid @formatting-btn-border; border-right: 1px solid @formatting-btn-border;
} }
.formatting-btn--more { .formatting-btn--more {
padding-left: 9px; padding-left: 9px;
padding-right: 9px; padding-right: 9px;
.caret { .caret {
margin-top: 1px; margin-top: 1px;
} }
} }
.formatting-icon { .formatting-icon {
font-style: normal; font-style: normal;
line-height: 1.5; line-height: 1.5;
} }
.formatting-icon--small { .formatting-icon--small {
font-size: small; font-size: small;
line-height: 1.9; line-height: 1.9;
} }
.formatting-icon--serif { .formatting-icon--serif {
font-family: @font-family-serif; font-family: @font-family-serif;
} }
.formatting-more { .formatting-more {
margin-left: auto; margin-left: auto;
} }
.formatting-menu { .formatting-menu {
min-width: auto; min-width: auto;
max-width: 130px; max-width: 130px;
background-color: @formatting-menu-bg; background-color: @formatting-menu-bg;
} }
.formatting-menu-item { .formatting-menu-item {
float: left; float: left;
} }
.formatting-menu-item > .formatting-btn { .formatting-menu-item > .formatting-btn {
border-right: none; border-right: none;
} }
// Disable border on left-most icon in menu // Disable border on left-most icon in menu
.formatting-menu-item:nth-of-type(4n + 1) > .formatting-btn { .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 { .full-height {
height: 100%; height: 100%;
padding: 0; padding: 0;
} }
.error-container { .error-container {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.error-container.full-height when (@is-overleaf = true) { .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 { .error-figure {
display: none; display: none;
flex: 0 0 50%; flex: 0 0 50%;
padding: @line-height-computed * 2; padding: @line-height-computed * 2;
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
display: block; display: block;
} }
} }
.error-figure when (@is-overleaf = true) { .error-figure when (@is-overleaf = true) {
display: none; display: none;
} }
.error-figure-500 { .error-figure-500 {
&::before { &::before {
content: ''; content: '';
display: block; display: block;
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 80%; right: 80%;
background-image: url(/img/brand/500-visual-plug.svg); background-image: url(/img/brand/500-visual-plug.svg);
background-size: 400px; background-size: 400px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 70%; background-position: right 70%;
pointer-events: none; pointer-events: none;
} }
&::after { &::after {
content: ''; content: '';
display: block; display: block;
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 50%; right: 50%;
background-image: url(/img/brand/500-visual-tail.svg); background-image: url(/img/brand/500-visual-tail.svg);
background-size: 100px; background-size: 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 90% bottom; background-position: 90% bottom;
pointer-events: none; pointer-events: none;
} }
} }
.error-img { .error-img {
display: block; display: block;
max-width: 380px; max-width: 380px;
height: auto; height: auto;
margin: 0 auto; margin: 0 auto;
} }
.error-details { .error-details {
flex: 0 1 50%; flex: 0 1 50%;
padding: @line-height-computed * 2; padding: @line-height-computed * 2;
} }
.error-details when (@is-overleaf = true) {
flex-grow: 1;
}
.error-status { .error-details when (@is-overleaf = true) {
font-family: @font-family-serif; flex-grow: 1;
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;
&:hover, .error-status {
&:focus { font-family: @font-family-serif;
text-decoration: none; margin-bottom: (@line-height-computed / 4);
color: #fff; color: @gray-dark;
background-color: @navbar-default-link-hover-bg; font-size: @font-size-h1;
border: 2px solid @navbar-default-link-hover-color; }
} .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) { &:hover,
.btn; &:focus {
.btn-primary; text-decoration: none;
display: block; color: #fff;
@media (min-width: @screen-sm-min) { background-color: @navbar-default-link-hover-bg;
display: inline-block; 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 { .long-form-features {
h2 { h2 {
margin-top: 0; margin-top: 0;
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
} }
img { img {
border-radius: 3px; border-radius: 3px;
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
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%; max-width: 100%;
height: auto; height: auto;
} }
h3 { h3 {
margin: 0; margin: 0;
} }
i { i {
color: lighten(@blue, 15%); 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] { #front-chat-holder > div[role='button'] {
margin-bottom: @footer-height; margin-bottom: @footer-height;
} }

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

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

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

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

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

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

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

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

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

@ -1,158 +1,157 @@
@brand-ieee-color : #00629B; @brand-ieee-color : #00629B;
@brand-google-color : #276fea; // Not the "official" color but modified for a11y @brand-google-color : #276fea; // Not the "official" color but modified for a11y
@brand-twitter-color : #1DA1F2; @brand-twitter-color : #1DA1F2;
@brand-orcid-color : #A6CE39; @brand-orcid-color : #A6CE39;
@brand-sharelatex-color : #A93529; @brand-sharelatex-color : #A93529;
.login-register-alternatives { .login-register-alternatives {
.form-group:last-child { .form-group:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.login-register-container { .login-register-container {
max-width: 400px; max-width: 400px;
margin: 0 auto; 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 { .login-register-card {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
text-align: center; text-align: center;
} }
.login-register-form, .login-register-form,
.login-register-sharelatex { .login-register-sharelatex {
padding: @line-height-computed; padding: @line-height-computed;
border-bottom: solid 1px @hr-border; border-bottom: solid 1px @hr-border;
&:last-child { &:last-child {
border-bottom-width: 0; border-bottom-width: 0;
} }
} }
.login-register-other-links { .login-register-other-links {
padding: @line-height-computed; padding: @line-height-computed;
} }
.login-register-text, .login-register-text,
.login-register-hr-text-container { .login-register-hr-text-container {
margin: 0; margin: 0;
} }
.login-register-text { .login-register-text {
padding-bottom: 25px; padding-bottom: 25px;
&:last-child { &:last-child {
padding-bottom: 0; padding-bottom: 0;
} }
} }
.login-register-hr-text-container { .login-register-hr-text-container {
line-height: 1; line-height: 1;
position: relative; position: relative;
padding: @line-height-computed 0; padding: @line-height-computed 0;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
height: 1px; height: 1px;
background-color: @hr-border; background-color: @hr-border;
top: 50%; top: 50%;
left: 0; left: 0;
right: 0; right: 0;
} }
} }
.login-register-hr-text { .login-register-hr-text {
position: relative; position: relative;
background-color: #FFF; background-color: #fff;
padding: 0 (@line-height-computed / 2); padding: 0 (@line-height-computed / 2);
} }
.login-register-sharelatex-tooltip { .login-register-sharelatex-tooltip {
display: inline-block; display: inline-block;
font-size: 135%; font-size: 135%;
position: relative; position: relative;
top: 2px; top: 2px;
margin-left: 3px; margin-left: 3px;
color: @link-color; color: @link-color;
cursor: pointer; cursor: pointer;
} }
.login-register-newsletter { .login-register-newsletter {
font-size: 90%; font-size: 90%;
margin-top: @line-height-computed; margin-top: @line-height-computed;
text-align: left; text-align: left;
& > .checkbox { & > .checkbox {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.login-btn { .login-btn {
.btn; .btn;
.btn-default; .btn-default;
position: relative; position: relative;
padding-left: 20px; padding-left: 20px;
padding-right: 0; padding-right: 0;
} }
.login-btn-sharelatex { .login-btn-sharelatex {
background-color: @brand-sharelatex-color; background-color: @brand-sharelatex-color;
&:focus, &:focus,
&:hover { &:hover {
background-color: darken(@brand-sharelatex-color, 8%); background-color: darken(@brand-sharelatex-color, 8%);
} }
&:active { &:active {
background-color: darken(@brand-sharelatex-color, 16%); background-color: darken(@brand-sharelatex-color, 16%);
} }
} }
.login-btn-icon { .login-btn-icon {
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 4px; left: 4px;
background: #FFF url(/img/brand/lion.svg) center/20px no-repeat; background: #fff url(/img/brand/lion.svg) center/20px no-repeat;
border-radius: 99999px; border-radius: 99999px;
width: 26px; width: 26px;
height: 26px; height: 26px;
&::before {
content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
}
}
.login-btn-icon-ieee { &::before {
background-image: url(/img/other-brands/logo_ieee.svg); content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
} }
.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 { .login-btn-icon-ieee {
margin: 0; background-image: url(/img/other-brands/logo_ieee.svg);
color: @text-color; }
} .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 { .registration-message-heading {
color: @text-color; color: @text-color;
} }
.registration-message-details { .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; margin: 0;
padding: 40px 20px; padding: 40px 20px;
background: #fff; background: #fff;
border: 1px solid #DFDFDF; border: 1px solid #dfdfdf;
.box { .box {
padding-bottom: 30px; padding-bottom: 30px;
overflow: hidden; overflow: hidden;
@ -53,10 +53,10 @@
display: block; display: block;
height: 250px; height: 250px;
text { text {
font-family: "Open Sans", sans-serif; font-family: 'Open Sans', sans-serif;
} }
&:not(:root) { &:not(:root) {
overflow: visible overflow: visible;
} }
&.hidden-legend-margin-fix { &.hidden-legend-margin-fix {
@ -90,7 +90,7 @@
.metric-tooltip { .metric-tooltip {
top: -1em; top: -1em;
font-size: .5em; font-size: 0.5em;
} }
} }
// END: Metrics header // END: Metrics header
@ -142,11 +142,11 @@
} }
#csv { #csv {
padding-right: 10px; padding-right: 10px;
} }
h3 { h3 {
display: inline-block; display: inline-block;
} }
.section_header { .section_header {
@ -173,9 +173,9 @@
.daterangepicker { .daterangepicker {
margin-right: 15px; margin-right: 15px;
} }
#metrics-dates { #metrics-dates {
padding: 0; padding: 0;
} }
} }
} }

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

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

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

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

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

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

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

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

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

@ -1,3 +1,3 @@
.recurly-hosted-field { .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 { .registration_message {
text-align:center; text-align: center;
padding-bottom: 20px; padding-bottom: 20px;
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,95 +1,101 @@
.wiki { .wiki {
.contents { .contents {
ul { ul {
padding: 0; padding: 0;
li { li {
font-size: 14px; font-size: 14px;
list-style: none; list-style: none;
margin-bottom: 6px; margin-bottom: 6px;
} }
} }
h2 {
font-size: 18px;
}
}
img { h2 {
height: auto; font-size: 18px;
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 { img {
pre { height: auto;
background-color: @gray-lightest; max-width: 100%;
border-radius: 6px; }
padding: (@line-height-computed / 2);
white-space: pre-wrap; .page-header {
margin: 0; a {
} font-size: 0.8em;
} line-height: 1;
.output { }
text-align: center; }
padding-top: 10px;
.editsection {
img { display: none;
width: auto; }
height: auto;
max-width: 100%; table {
box-shadow: 0 1px 3px @gray-light; th,
border-radius: 6px; td {
} padding: (@line-height-computed / 4) (@line-height-computed / 2);
} border-bottom: 1px solid @gray-lighter;
} }
@media (min-width: 1360px) { th {
.example { font-weight: 700;
margin-right: -200px; text-align: left;
} font-family: @font-family-serif;
} }
@media (max-width: @screen-sm) { margin-bottom: @line-height-computed / 2;
.contents { }
margin-top: @margin-lg; .table-no-borders {
} th,
} td {
border: 0px;
/*<![CDATA[*/ }
.source-latex {line-height: normal;} }
.source-latex li, .source-latex pre {
line-height: normal; border: 0px none white; .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 * GeSHi Dynamically Generated Stylesheet
* -------------------------------------- * --------------------------------------
* Dynamically generated stylesheet for latex * Dynamically generated stylesheet for latex
@ -98,53 +104,123 @@
* (http://qbnz.com/highlighter/ and http://geshi.org/) * (http://qbnz.com/highlighter/ and http://geshi.org/)
* -------------------------------------- * --------------------------------------
*/ */
.latex.source-latex .imp {font-weight: bold; color: red;} .latex.source-latex .imp {
.latex.source-latex li, .latex.source-latex .li1 {font-weight: normal; vertical-align:top;} font-weight: bold;
.latex.source-latex .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;} color: red;
.latex.source-latex .li2 {font-weight: bold; vertical-align:top;} }
.latex.source-latex .kw1 {color: #800000;} .latex.source-latex li,
.latex.source-latex .co1 {color: #2C922C; font-style: italic;} .latex.source-latex .li1 {
.latex.source-latex .es0 {color: #000000; font-weight: bold;} font-weight: normal;
.latex.source-latex .sy0 {color: #E02020; } vertical-align: top;
.latex.source-latex .st0 {color: #000000;} }
.latex.source-latex .re1 {color: #8020E0; font-weight: normal;} .latex.source-latex .ln {
.latex.source-latex .re2 {color: #C08020; font-weight: normal;} width: 1px;
.latex.source-latex .re3 {color: #8020E0; font-weight: normal;} text-align: right;
.latex.source-latex .re4 {color: #800000; font-weight: normal;} margin: 0;
.latex.source-latex .re5 {color: #00008B; font-weight: bold;} padding: 0 2px;
.latex.source-latex .re6 {color: #800000; font-weight: normal;} vertical-align: top;
.latex.source-latex .re7 {color: #0000D0; font-weight: normal;} }
.latex.source-latex .re8 {color: #C00000; font-weight: normal;} .latex.source-latex .li2 {
.latex.source-latex .re9 {color: #2020C0; font-weight: normal;} font-weight: bold;
.latex.source-latex .re10 {color: #800000; font-weight: normal;} vertical-align: top;
.latex.source-latex .re11 {color: #E00000; font-weight: normal;} }
.latex.source-latex .re12 {color: #800000; font-weight: normal;} .latex.source-latex .kw1 {
.latex.source-latex .ln-xtra, .latex.source-latex li.ln-xtra, .latex.source-latex div.ln-xtra {background-color: #ffc;} color: #800000;
.latex.source-latex span.xtra { display:block; } }
.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 { a.search-result {
display: block; display: block;
margin-top: @line-height-computed / 2; margin-top: @line-height-computed / 2;
.search-result-content { .search-result-content {
margin-top: @line-height-computed / 4; margin-top: @line-height-computed / 4;
white-space: pre-wrap; white-space: pre-wrap;
font-size: 0.8em; font-size: 0.8em;
color: @gray-dark; color: @gray-dark;
em { em {
font-weight: bold; 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);
}
}
} &: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 // Alerts
// -------------------------------------------------- // --------------------------------------------------
// Base styles // Base styles
// ------------------------- // -------------------------
@ -38,7 +37,7 @@
// Expand the right padding and account for the close button's positioning. // Expand the right padding and account for the close button's positioning.
.alert-dismissable { .alert-dismissable {
padding-right: (@alert-padding + 20); padding-right: (@alert-padding + 20);
// Adjust close link position // Adjust close link position
.close { .close {
@ -78,4 +77,4 @@
.btn { .btn {
text-decoration: none; text-decoration: none;
} }
} }

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

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

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

@ -2,7 +2,6 @@
// Breadcrumbs // Breadcrumbs
// -------------------------------------------------- // --------------------------------------------------
.breadcrumb { .breadcrumb {
padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal; padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
@ -14,7 +13,7 @@
display: inline-block; display: inline-block;
+ li:before { + 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; padding: 0 5px;
color: @breadcrumb-color; color: @breadcrumb-color;
} }

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

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

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

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

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

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

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

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

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

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

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

@ -2,7 +2,6 @@
// Code (inline and block) // Code (inline and block)
// -------------------------------------------------- // --------------------------------------------------
// Inline and block code styles // Inline and block code styles
code, code,
kbd, kbd,
@ -28,7 +27,7 @@ kbd {
color: @kbd-color; color: @kbd-color;
background-color: @kbd-bg; background-color: @kbd-bg;
border-radius: @border-radius-small; 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 // Blocks of code

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,17 +1,17 @@
.circle-img { .circle-img {
border-radius: 50%; border-radius: 50%;
float: left; float: left;
// float: right; // float: right;
height: 100px; height: 100px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
max-width: 100px; max-width: 100px;
img { img {
display: inline; display: inline;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
} }
} }
.blockquote-with-img { .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 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 // Undo padding and float of grid classes
&[class*="col-"] { &[class*='col-'] {
float: none; float: none;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
@ -39,11 +39,14 @@
.input-group-lg > .form-control, .input-group-lg > .form-control,
.input-group-lg > .input-group-addon, .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 > .form-control,
.input-group-sm > .input-group-addon, .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 // Display as table-cell
// ------------------------- // -------------------------
@ -90,8 +93,8 @@
} }
// Nuke default margins from checkboxes and radios to vertically center within. // Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"], input[type='radio'],
input[type="checkbox"] { input[type='checkbox'] {
margin-top: 0; margin-top: 0;
} }
} }

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

@ -1,21 +1,21 @@
.input-suggestions { .input-suggestions {
position: relative; position: relative;
height: @input-height-base; 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 { .input-suggestions-shadow {
background-color: @input-bg; background-color: @input-bg;
padding-top: @input-suggestion-v-offset; padding-top: @input-suggestion-v-offset;
} }
.input-suggestions-shadow-existing { .input-suggestions-shadow-existing {
color: transparent; color: transparent;
} }
.input-suggestions-shadow-suggested { .input-suggestions-shadow-suggested {
color: lighten(@input-color, 25%); color: lighten(@input-color, 25%);
} }

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

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

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

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

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

@ -2,7 +2,6 @@
// List groups // List groups
// -------------------------------------------------- // --------------------------------------------------
// Base class // Base class
// //
// Easily usable on <ul>, <ol>, or <div>. // Easily usable on <ul>, <ol>, or <div>.
@ -13,7 +12,6 @@
padding-left: 0; // reset padding because ul and ol padding-left: 0; // reset padding because ul and ol
} }
// Individual list items // Individual list items
// //
// Use on `li`s or `div`s within the `.list-group` parent. // Use on `li`s or `div`s within the `.list-group` parent.
@ -45,7 +43,6 @@
} }
} }
// Linked list items // Linked list items
// //
// Use anchor elements instead of `li`s or `div`s to create 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 // Contextual variants
// //
// Add modifier classes to change text and background color on individual items. // 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(warning; @state-warning-bg; @state-warning-text);
.list-group-item-variant(danger; @state-danger-bg; @state-danger-text); .list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
// Custom content options // Custom content options
// //
// Extra classes for creating well-formatted content within `.list-group-item`s. // 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 { .list-like-table {
border: 1px solid @hr-border; border: 1px solid @hr-border;
border-radius: @border-radius-base; border-radius: @border-radius-base;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0 @padding-sm; padding: 0 @padding-sm;
li { li {
border-top: 1px solid @hr-border; border-top: 1px solid @hr-border;
div { div {
display: table-cell; display: table-cell;
float: none; float: none;
vertical-align: middle; vertical-align: middle;
} }
.row { .row {
display: table; display: table;
margin: 0; margin: 0;
width: 100%; width: 100%;
} }
&:first-child { &:first-child {
border-top: 0; border-top: 0;
} }
} }
} }

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

@ -2,7 +2,6 @@
// Source: http://stubbornella.org/content/?p=497 // Source: http://stubbornella.org/content/?p=497
// -------------------------------------------------- // --------------------------------------------------
// Common styles // Common styles
// ------------------------- // -------------------------
@ -32,7 +31,6 @@
margin: 0 0 5px; margin: 0 0 5px;
} }
// Media image alignment // Media image alignment
// ------------------------- // -------------------------
@ -45,7 +43,6 @@
} }
} }
// Media list variation // 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 // When fading in the modal, animate it to slide down
&.fade .modal-dialog { &.fade .modal-dialog {
.translate(0, -25%); .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 // 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-fallback-border-color; //old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color; border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large; 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; background-clip: padding-box;
// Remove focus outline from opened modal // Remove focus outline from opened modal
outline: none; outline: none;
@ -67,8 +70,12 @@
z-index: @zindex-modal-background; z-index: @zindex-modal-background;
background-color: @modal-backdrop-bg; background-color: @modal-backdrop-bg;
// Fade for backdrop // Fade for backdrop
&.fade { .opacity(0); } &.fade {
&.in { .opacity(@modal-backdrop-opacity); } .opacity(0);
}
&.in {
.opacity(@modal-backdrop-opacity);
}
} }
// Modal header // Modal header
@ -83,7 +90,11 @@
margin-top: -2px; margin-top: -2px;
} }
.modal-header { .modal-header {
h1, h2, h3, h4, h5 { h1,
h2,
h3,
h4,
h5 {
margin: 0; margin: 0;
font-family: @font-family-sans-serif; font-family: @font-family-sans-serif;
font-weight: 700; font-weight: 700;
@ -111,7 +122,8 @@
border-top: 1px solid @modal-footer-border-color; border-top: 1px solid @modal-footer-border-color;
background-color: @modal-footer-background-color; background-color: @modal-footer-background-color;
border-radius: 0 0 @border-radius-large @border-radius-large; 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 // Properly space out buttons
.btn + .btn { .btn + .btn {
@ -140,13 +152,17 @@
margin: 30px auto; margin: 30px auto;
} }
.modal-content { .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 sizes
.modal-sm { width: @modal-sm; } .modal-sm {
width: @modal-sm;
}
} }
@media (min-width: @screen-md-min) { @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 // Navbars
// -------------------------------------------------- // --------------------------------------------------
// Wrapper and base class // Wrapper and base class
// //
// Provide a static navbar from which we expand to create full-width, fixed, and // Provide a static navbar from which we expand to create full-width, fixed, and
@ -35,7 +34,6 @@
} }
} }
// Navbar collapse (body) // Navbar collapse (body)
// //
// Group your navbar content into this for easy collapsing and expanding across // Group your navbar content into this for easy collapsing and expanding across
@ -50,7 +48,7 @@
max-height: @navbar-collapse-max-height; max-height: @navbar-collapse-max-height;
overflow-x: visible; overflow-x: visible;
padding-right: @navbar-padding-horizontal; padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal; padding-left: @navbar-padding-horizontal;
&:extend(.clearfix all); &:extend(.clearfix all);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -85,7 +83,6 @@
} }
} }
.navbar-main { .navbar-main {
z-index: 1; z-index: 1;
.container-fluid > .navbar-collapse { .container-fluid > .navbar-collapse {
@ -106,13 +103,13 @@
padding: 0; padding: 0;
@media (min-width: @grid-float-breakpoint) { @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). // expanded (i.e. not contained within the hamburguer menu).
position: static; position: static;
background-color: transparent; background-color: transparent;
border-bottom: 0; border-bottom: 0;
padding-right: @navbar-padding-horizontal; padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal; padding-left: @navbar-padding-horizontal;
} }
} }
} }
@ -125,16 +122,15 @@
> .navbar-header, > .navbar-header,
> .navbar-collapse { > .navbar-collapse {
margin-right: -@navbar-padding-horizontal; margin-right: -@navbar-padding-horizontal;
margin-left: -@navbar-padding-horizontal; margin-left: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
} }
} }
} }
// //
// Navbar alignment options // Navbar alignment options
// //
@ -174,7 +170,6 @@
border-width: 1px 0 0; border-width: 1px 0 0;
} }
// Brand/project name // Brand/project name
.navbar-brand { .navbar-brand {
@ -198,17 +193,18 @@
} }
.navbar-title { .navbar-title {
font-size: 20px; font-size: 20px;
display: inline-block; display: inline-block;
margin-top: 2px; margin-top: 2px;
color: @navbar-title-color; color: @navbar-title-color;
&:hover, &:active, &:focus { &:hover,
color: @navbar-title-color-hover; &:active,
text-decoration: none; &:focus {
} color: @navbar-title-color-hover;
text-decoration: none;
}
} }
// Navbar toggle // Navbar toggle
// //
// Custom button for toggling the `.navbar-collapse`, powered by the collapse // Custom button for toggling the `.navbar-collapse`, powered by the collapse
@ -233,7 +229,6 @@
} }
} }
// Navbar nav links // Navbar nav links
// //
// Builds on top of the `.nav` components with its own modifier class to make // 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; margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
> li > a { > li > a {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
line-height: @line-height-computed; line-height: @line-height-computed;
} }
@ -275,7 +270,6 @@
} }
> li > div.subdued { > li > div.subdued {
line-height: @line-height-computed; line-height: @line-height-computed;
} }
} }
} }
@ -288,7 +282,7 @@
> li { > li {
float: left; float: left;
> a { > a {
padding-top: @navbar-padding-vertical; padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical; padding-bottom: @navbar-padding-vertical;
} }
} }
@ -299,7 +293,6 @@
} }
} }
// Component alignment // Component alignment
// //
// Repurpose the pull utilities as their own navbar utilities to avoid specificity // 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. // though so that navbar contents properly stack and align in mobile.
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
.navbar-left { .pull-left(); } .navbar-left {
.navbar-right { .pull-right(); } .pull-left();
}
.navbar-right {
.pull-right();
}
} }
// Navbar form // Navbar form
// //
// Extension of the `.form-inline` with some extra flavor for optimum display in // Extension of the `.form-inline` with some extra flavor for optimum display in
@ -323,7 +319,8 @@
padding: 10px @navbar-padding-horizontal; padding: 10px @navbar-padding-horizontal;
border-top: 1px solid transparent; border-top: 1px solid transparent;
border-bottom: 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); .box-shadow(@shadow);
// Mixin behavior for optimum display // Mixin behavior for optimum display
@ -355,7 +352,6 @@
} }
} }
// Dropdown menus // Dropdown menus
// Menu position and menu carets // Menu position and menu carets
@ -368,7 +364,6 @@
.border-bottom-radius(0); .border-bottom-radius(0);
} }
// Buttons in navbars // Buttons in navbars
// //
// Vertically center a button within a navbar (when *not* in a form). // Vertically center a button within a navbar (when *not* in a form).
@ -384,7 +379,6 @@
} }
} }
// Text in navbars // Text in navbars
// //
// Add a class to make any element properly align itself vertically within the navbars. // Add a class to make any element properly align itself vertically within the navbars.
@ -416,7 +410,7 @@
top: 0; top: 0;
width: 100%; width: 100%;
height: @header-height; height: @header-height;
.navbar-brand { .navbar-brand {
position: absolute; position: absolute;
top: 5px; top: 5px;
@ -482,7 +476,7 @@
background-color: @navbar-subdued-hover-bg; background-color: @navbar-subdued-hover-bg;
} }
&:focus { &:focus {
.tab-focus() .tab-focus();
} }
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
padding: @navbar-subdued-padding; padding: @navbar-subdued-padding;
@ -514,7 +508,7 @@
} }
.navbar-collapse.in { .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 // Dropdown menu items
.navbar-nav { .navbar-nav {
@ -576,7 +570,6 @@
} }
} }
// Links in navbars // Links in navbars
// //
// Add a class to ensure links outside the navbar nav are colored correctly. // Add a class to ensure links outside the navbar nav are colored correctly.
@ -587,7 +580,6 @@
color: @navbar-default-link-hover-color; color: @navbar-default-link-hover-color;
} }
} }
} }
.navbar-default when (@is-overleaf = true) { .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; border-radius: @btn-border-radius-base;
} }
} }
} }

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

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

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

@ -79,10 +79,16 @@
// Large // Large
.pagination-lg { .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 // Small
.pagination-sm { .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 // Panels
// -------------------------------------------------- // --------------------------------------------------
// Base class // Base class
.panel { .panel {
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
background-color: @panel-bg; background-color: @panel-bg;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: @panel-border-radius; 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 // Panel contents
@ -49,7 +48,6 @@
.border-bottom-radius((@panel-border-radius - 1)); .border-bottom-radius((@panel-border-radius - 1));
} }
// List groups in panels // List groups in panels
// //
// By default, space out list group content from panel headings to account for // By default, space out list group content from panel headings to account for
@ -87,7 +85,6 @@
} }
} }
// Tables in panels // Tables in panels
// //
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
@ -186,7 +183,6 @@
} }
} }
// Collapsable panels (aka, accordion) // Collapsable panels (aka, accordion)
// //
// Wrap a series of panels in `.panel-group` to turn them into an accordion with // Wrap a series of panels in `.panel-group` to turn them into an accordion with
@ -219,23 +215,40 @@
} }
} }
// Contextual variations // Contextual variations
.panel-default { .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-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-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-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-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-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 // Popovers
// -------------------------------------------------- // --------------------------------------------------
.popover { .popover {
position: absolute; position: absolute;
top: 0; top: 0;
@ -17,16 +16,24 @@
border: 1px solid @popover-fallback-border-color; border: 1px solid @popover-fallback-border-color;
border: 1px solid @popover-border-color; border: 1px solid @popover-border-color;
border-radius: @border-radius-large; 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 // Overrides for proper insertion
white-space: normal; white-space: normal;
// Offset the popover to account for the popover arrow // Offset the popover to account for the popover arrow
&.top { margin-top: -@popover-arrow-width; } &.top {
&.right { margin-left: @popover-arrow-width; } margin-top: -@popover-arrow-width;
&.bottom { margin-top: @popover-arrow-width; } }
&.left { margin-left: -@popover-arrow-width; } &.right {
margin-left: @popover-arrow-width;
}
&.bottom {
margin-top: @popover-arrow-width;
}
&.left {
margin-left: -@popover-arrow-width;
}
} }
.popover-title { .popover-title {
@ -64,7 +71,7 @@
} }
.popover > .arrow:after { .popover > .arrow:after {
border-width: @popover-arrow-width; border-width: @popover-arrow-width;
content: ""; content: '';
} }
.popover { .popover {
@ -76,7 +83,7 @@
border-top-color: @popover-arrow-outer-color; border-top-color: @popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width; bottom: -@popover-arrow-outer-width;
&:after { &:after {
content: " "; content: ' ';
bottom: 1px; bottom: 1px;
margin-left: -@popover-arrow-width; margin-left: -@popover-arrow-width;
border-bottom-width: 0; border-bottom-width: 0;
@ -91,7 +98,7 @@
border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-right-color: @popover-arrow-outer-color; border-right-color: @popover-arrow-outer-color;
&:after { &:after {
content: " "; content: ' ';
left: 1px; left: 1px;
bottom: -@popover-arrow-width; bottom: -@popover-arrow-width;
border-left-width: 0; border-left-width: 0;
@ -106,7 +113,7 @@
border-bottom-color: @popover-arrow-outer-color; border-bottom-color: @popover-arrow-outer-color;
top: -@popover-arrow-outer-width; top: -@popover-arrow-outer-width;
&:after { &:after {
content: " "; content: ' ';
top: 1px; top: 1px;
margin-left: -@popover-arrow-width; margin-left: -@popover-arrow-width;
border-top-width: 0; border-top-width: 0;
@ -122,12 +129,11 @@
border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-left-color: @popover-arrow-outer-color; border-left-color: @popover-arrow-outer-color;
&:after { &:after {
content: " "; content: ' ';
right: 1px; right: 1px;
border-right-width: 0; border-right-width: 0;
border-left-color: @popover-arrow-color; border-left-color: @popover-arrow-color;
bottom: -@popover-arrow-width; bottom: -@popover-arrow-width;
} }
} }
} }

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

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

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

@ -2,7 +2,6 @@
// Tables // Tables
// -------------------------------------------------- // --------------------------------------------------
table { table {
max-width: 100%; max-width: 100%;
background-color: @table-bg; background-color: @table-bg;
@ -11,7 +10,6 @@ th {
text-align: left; text-align: left;
} }
// Baseline styles // Baseline styles
.table { .table {
@ -58,7 +56,6 @@ th {
} }
} }
// Condensed table w/ half padding // Condensed table w/ half padding
.table-condensed { .table-condensed {
@ -74,7 +71,6 @@ th {
} }
} }
// Bordered version // Bordered version
// //
// Add borders all around the table and between all the columns. // Add borders all around the table and between all the columns.
@ -99,7 +95,6 @@ th {
} }
} }
// Zebra-striping // Zebra-striping
// //
// Default zebra-stripe styles (alternating gray and transparent backgrounds) // Default zebra-stripe styles (alternating gray and transparent backgrounds)
@ -113,7 +108,6 @@ th {
} }
} }
// Hover effect // Hover effect
// //
// Placed here since it has to come after the potential zebra striping // Placed here since it has to come after the potential zebra striping
@ -127,12 +121,11 @@ th {
} }
} }
// Table cell sizing // Table cell sizing
// //
// Reset default table behavior // 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) position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
float: none; float: none;
display: table-column; display: table-column;
@ -140,7 +133,7 @@ table col[class*="col-"] {
table { table {
td, td,
th { th {
&[class*="col-"] { &[class*='col-'] {
position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623) position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
float: none; float: none;
display: table-cell; display: table-cell;
@ -148,7 +141,6 @@ table {
} }
} }
// Table backgrounds // Table backgrounds
// //
// Exact selectors below required to override `.table-striped` and prevent // 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(warning; @state-warning-bg);
.table-row-variant(danger; @state-danger-bg); .table-row-variant(danger; @state-danger-bg);
// Responsive tables // Responsive tables
// //
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly // 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 { .ol-tabs {
// Overrides for nav.less // Overrides for nav.less
.nav-tabs { .nav-tabs {
border: 0!important; border: 0 !important;
margin-bottom: 0; margin-bottom: 0;
margin-top: -@line-height-computed; //- adjusted for portal-name margin-top: -@line-height-computed; //- adjusted for portal-name
padding: @padding-lg 0 @padding-md; padding: @padding-lg 0 @padding-md;
@ -14,8 +14,9 @@
a { a {
border: 0; border: 0;
color: @link-color-alt; color: @link-color-alt;
&:focus, &:hover { &:focus,
background-color: transparent!important; &:hover {
background-color: transparent !important;
border: 0; border: 0;
color: @link-hover-color-alt; color: @link-hover-color-alt;
} }
@ -23,8 +24,8 @@
} }
li.active > a { li.active > a {
background-color: transparent!important; background-color: transparent !important;
border: 0!important; border: 0 !important;
border-bottom: 1px solid @accent-color-secondary!important; border-bottom: 1px solid @accent-color-secondary!important;
color: @accent-color-secondary!important; color: @accent-color-secondary!important;
&:hover { &:hover {
@ -33,7 +34,7 @@
} }
} }
.tab-content:extend(.container) { .tab-content:extend(.container) {
background-color: transparent!important; background-color: transparent !important;
border: none!important; border: none !important;
} }
} }

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

@ -1,7 +1,9 @@
tags-input { tags-input {
display: block; display: block;
} }
tags-input *, tags-input *:before, tags-input *:after { tags-input *,
tags-input *:before,
tags-input *:after {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
@ -86,8 +88,18 @@ tags-input[disabled] .tags {
} }
tags-input[disabled] .tags .tag-item { tags-input[disabled] .tags .tag-item {
opacity: 0.65; 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: -webkit-linear-gradient(
background: linear-gradient(to bottom, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%); 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 { tags-input[disabled] .tags .tag-item .remove-button {
cursor: default; cursor: default;
@ -131,7 +143,7 @@ tags-input .autocomplete .suggestion-item.selected {
color: white; color: white;
background-color: @brand-primary; background-color: @brand-primary;
.subdued { .subdued {
color: white; color: white;
} }
} }
tags-input .autocomplete .suggestion-item em { 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 // Load core variables and mixins
// -------------------------------------------------- // --------------------------------------------------
@import "variables.less"; @import 'variables.less';
@import "mixins.less"; @import 'mixins.less';
// //
// Buttons // Buttons
@ -19,26 +16,30 @@
.btn-info, .btn-info,
.btn-warning, .btn-warning,
.btn-danger { .btn-danger {
text-shadow: 0 -1px 0 rgba(0,0,0,.2); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); @shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 1px 1px rgba(0, 0, 0, 0.075);
.box-shadow(@shadow); .box-shadow(@shadow);
// Reset the shadow // Reset the shadow
&:active, &:active,
&.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 // Mixin for generating new styles
.btn-styles(@btn-color: #555) { .btn-styles(@btn-color: #555) {
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%)); #gradient >
.reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners .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; background-repeat: repeat-x;
border-color: darken(@btn-color, 14%); border-color: darken(@btn-color, 14%);
&:hover, &:hover,
&:focus { &:focus {
background-color: darken(@btn-color, 12%); background-color: darken(@btn-color, 12%);
background-position: 0 -15px; background-position: 0 -15px;
} }
@ -60,14 +61,26 @@
} }
// Apply the mixin to the buttons // Apply the mixin to the buttons
.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; } .btn-default {
.btn-primary { .btn-styles(@btn-primary-bg); } .btn-styles(@btn-default-bg);
.btn-success { .btn-styles(@btn-success-bg); } text-shadow: 0 1px 0 #fff;
.btn-info { .btn-styles(@btn-info-bg); } border-color: #ccc;
.btn-warning { .btn-styles(@btn-warning-bg); } }
.btn-danger { .btn-styles(@btn-danger-bg); } .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 // Images
@ -75,64 +88,89 @@
.thumbnail, .thumbnail,
.img-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 // Dropdowns
// -------------------------------------------------- // --------------------------------------------------
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { .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%); background-color: darken(@dropdown-link-hover-bg, 5%);
} }
.dropdown-menu > .active > a, .dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { .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%); background-color: darken(@dropdown-link-active-bg, 5%);
} }
// //
// Navbar // Navbar
// -------------------------------------------------- // --------------------------------------------------
// Default navbar // Default navbar
.navbar-default { .navbar-default {
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg); #gradient >
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered .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; 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); .box-shadow(@shadow);
.navbar-nav > .active > a { .navbar-nav > .active > a {
#gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%)); #gradient >
.box-shadow(inset 0 3px 9px rgba(0,0,0,.075)); .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-brand,
.navbar-nav > li > a { .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 // Inverted navbar
.navbar-inverse { .navbar-inverse {
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg); #gradient >
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered .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 { .navbar-nav > .active > a {
#gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%)); #gradient >
.box-shadow(inset 0 3px 9px rgba(0,0,0,.25)); .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-brand,
.navbar-nav > li > a { .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; border-radius: 0;
} }
// //
// Alerts // Alerts
// -------------------------------------------------- // --------------------------------------------------
// Common styles // Common styles
.alert { .alert {
text-shadow: 0 1px 0 rgba(255,255,255,.2); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
@shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05); @shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 2px rgba(0, 0, 0, 0.05);
.box-shadow(@shadow); .box-shadow(@shadow);
} }
@ -163,12 +200,18 @@
} }
// Apply the mixin to the alerts // Apply the mixin to the alerts
.alert-success { .alert-styles(@alert-success-bg); } .alert-success {
.alert-info { .alert-styles(@alert-info-bg); } .alert-styles(@alert-success-bg);
.alert-warning { .alert-styles(@alert-warning-bg); } }
.alert-danger { .alert-styles(@alert-danger-bg); } .alert-info {
.alert-styles(@alert-info-bg);
}
.alert-warning {
.alert-styles(@alert-warning-bg);
}
.alert-danger {
.alert-styles(@alert-danger-bg);
}
// //
// Progress bars // Progress bars
@ -176,7 +219,8 @@
// Give the progress background some depth // Give the progress background some depth
.progress { .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 // Mixin for generating new styles
@ -185,13 +229,21 @@
} }
// Apply the mixin to the progress bars // Apply the mixin to the progress bars
.progress-bar { .progress-bar-styles(@progress-bar-bg); } .progress-bar {
.progress-bar-success { .progress-bar-styles(@progress-bar-success-bg); } .progress-bar-styles(@progress-bar-bg);
.progress-bar-info { .progress-bar-styles(@progress-bar-info-bg); } }
.progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); } .progress-bar-success {
.progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); } .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 // List groups
@ -199,25 +251,27 @@
.list-group { .list-group {
border-radius: @border-radius-base; 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,
.list-group-item.active:hover, .list-group-item.active:hover,
.list-group-item.active:focus { .list-group-item.active:focus {
text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%); 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%); border-color: darken(@list-group-active-border, 7.5%);
} }
// //
// Panels // Panels
// -------------------------------------------------- // --------------------------------------------------
// Common styles // Common styles
.panel { .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 // Mixin for generating new styles
@ -226,22 +280,33 @@
} }
// Apply the mixin to the panel headings only // Apply the mixin to the panel headings only
.panel-default > .panel-heading { .panel-heading-styles(@panel-default-heading-bg); } .panel-default > .panel-heading {
.panel-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); } .panel-heading-styles(@panel-default-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-primary > .panel-heading {
.panel-warning > .panel-heading { .panel-heading-styles(@panel-warning-heading-bg); } .panel-heading-styles(@panel-primary-heading-bg);
.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-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 // Wells
// -------------------------------------------------- // --------------------------------------------------
.well { .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%); 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); .box-shadow(@shadow);
} }

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

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

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

@ -2,7 +2,6 @@
// Tooltips // Tooltips
// -------------------------------------------------- // --------------------------------------------------
// Base class // Base class
.tooltip { .tooltip {
position: absolute; position: absolute;
@ -13,11 +12,25 @@
line-height: 1.4; line-height: 1.4;
.opacity(0); .opacity(0);
&.in { .opacity(@tooltip-opacity); } &.in {
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } .opacity(@tooltip-opacity);
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } }
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } &.top {
&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } 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 // Wrapper for the tooltip content
@ -63,14 +76,16 @@
top: 50%; top: 50%;
left: 0; left: 0;
margin-top: -@tooltip-arrow-width; 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; border-right-color: @tooltip-arrow-color;
} }
&.left .tooltip-arrow { &.left .tooltip-arrow {
top: 50%; top: 50%;
right: 0; right: 0;
margin-top: -@tooltip-arrow-width; 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; border-left-color: @tooltip-arrow-color;
} }
&.bottom .tooltip-arrow { &.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-choices,
.ui-select-bootstrap > .ui-select-no-choice { .ui-select-bootstrap > .ui-select-no-choice {
width: auto; width: auto;
max-width: 400px; max-width: 400px;
} }
.dropdown-menu .ui-select-choices-row { .dropdown-menu .ui-select-choices-row {
padding: 4px 0; padding: 4px 0;
> .ui-select-choices-row-inner { > .ui-select-choices-row-inner {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.ui-select-placeholder, .ui-select-placeholder,
.ui-select-match-text { .ui-select-match-text {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-weight: normal; font-weight: normal;
} }
.ui-select-bootstrap { .ui-select-bootstrap {
&:focus { &:focus {
outline: none; outline: none;
} }
> .ui-select-match { > .ui-select-match {
&:focus { &:focus {
outline: none; outline: none;
} }
&.btn-default-focus { &.btn-default-focus {
outline: 0; outline: 0;
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent;
> .btn { > .btn {
border-color: @input-border-focus; 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%); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
padding-top: @input-suggestion-v-offset; 0 0 8px fade(@input-border-focus, 60%);
} padding-top: @input-suggestion-v-offset;
} }
> .btn { }
color: @input-color; > .btn {
background-color: @input-bg; color: @input-color;
border: 1px solid @input-border; background-color: @input-bg;
padding-top: @input-suggestion-v-offset; border: 1px solid @input-border;
&[disabled] { padding-top: @input-suggestion-v-offset;
cursor: not-allowed; &[disabled] {
background-color: @input-bg-disabled; cursor: not-allowed;
opacity: 1; background-color: @input-bg-disabled;
} opacity: 1;
} }
} }
}
} }
.ui-select-container[tagging] { .ui-select-container[tagging] {
.ui-select-toggle { .ui-select-toggle {
cursor: text; cursor: text;
padding-top: @input-suggestion-v-offset; padding-top: @input-suggestion-v-offset;
> i.caret.pull-right { > i.caret.pull-right {
display: none; display: none;
} }
} }
} }

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

@ -2,7 +2,6 @@
// Wells // Wells
// -------------------------------------------------- // --------------------------------------------------
// Base class // Base class
.well { .well {
min-height: 20px; min-height: 20px;
@ -11,10 +10,10 @@
background-color: @well-bg; background-color: @well-bg;
border: 1px solid @well-border; border: 1px solid @well-border;
border-radius: @border-radius-base; 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 { blockquote {
border-color: #ddd; 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: // <del> styling taken from:
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del#Accessibility_concerns // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del#Accessibility_concerns
del::before, del::before,
del::after { del::after {
clip-path: inset(100%); clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
@ -19,9 +19,9 @@ del::after {
width: 1px; width: 1px;
} }
del::before { del::before {
content: " [deletion start] "; content: ' [deletion start] ';
} }
del::after { del::after {
content: " [deletion end] "; content: ' [deletion end] ';
} }

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

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

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