github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-29 17:23:48 -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';

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

@ -3,6 +3,7 @@
.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);
} }
} }

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

@ -5,9 +5,9 @@
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;
} }
} }
@ -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 {

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

@ -6,7 +6,7 @@
} }
.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;
} }
@ -27,73 +27,83 @@
} }
@-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);
} }
} }

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

@ -16,6 +16,6 @@
padding-top: 2px; padding-top: 2px;
margin-left: 12px; margin-left: 12px;
&:before { &:before {
content: "β"; content: 'β';
} }
} }

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

@ -1,13 +1,13 @@
.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;
} }

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

@ -41,7 +41,6 @@
background-color: lighten(@blue, 45%); background-color: lighten(@blue, 45%);
text-decoration: none; text-decoration: none;
} }
} }
} }
a.twitter > i { a.twitter > i {
@ -114,7 +113,6 @@
} }
} }
} }
} }
.link-modal { .link-modal {
@ -124,4 +122,3 @@
margin-bottom: 0; margin-bottom: 0;
} }
} }

24
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,7 +155,8 @@
justify-content: space-around; justify-content: space-around;
} }
td, th { td,
th {
display: block; display: block;
width: 25%; width: 25%;
} }

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

@ -1,5 +1,4 @@
.contact-us-modal { .contact-us-modal {
textarea { textarea {
height: 120px; height: 120px;
} }
@ -15,14 +14,14 @@
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;
@ -30,9 +29,9 @@
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;
@ -56,4 +55,4 @@
text-align: right; text-align: right;
color: @gray-lighter; color: @gray-lighter;
} }
} }

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

@ -1,18 +1,18 @@
@import "./editor/file-tree.less"; @import './editor/file-tree.less';
@import "./editor/history.less"; @import './editor/history.less';
@import "./editor/toolbar.less"; @import './editor/toolbar.less';
@import "./editor/left-menu.less"; @import './editor/left-menu.less';
@import "./editor/pdf.less"; @import './editor/pdf.less';
@import "./editor/share.less"; @import './editor/share.less';
@import "./editor/chat.less"; @import './editor/chat.less';
@import "./editor/binary-file.less"; @import './editor/binary-file.less';
@import "./editor/search.less"; @import './editor/search.less';
@import "./editor/publish-template.less"; @import './editor/publish-template.less';
@import "./editor/online-users.less"; @import './editor/online-users.less';
@import "./editor/hotkeys.less"; @import './editor/hotkeys.less';
@import "./editor/review-panel.less"; @import './editor/review-panel.less';
@import "./editor/rich-text.less"; @import './editor/rich-text.less';
@import "./editor/publish-modal.less"; @import './editor/publish-modal.less';
@ui-layout-toggler-def-height: 50px; @ui-layout-toggler-def-height: 50px;
@ui-resizer-size: 7px; @ui-resizer-size: 7px;
@ -38,7 +38,7 @@
// Disable the font-awesome icon when in Overleaf by replacing it with a // Disable the font-awesome icon when in Overleaf by replacing it with a
// non-breakable space instead (otherwise the browser would render a // non-breakable space instead (otherwise the browser would render a
// zero-width element). // zero-width element).
content: "\00a0"; content: '\00a0';
} }
} }
} }
@ -67,13 +67,13 @@
z-index: 20; z-index: 20;
} }
} }
#try-reconnect-now-button { #try-reconnect-now-button {
margin-left: 20px; margin-left: 20px;
} }
#synctex-more-info-button { #synctex-more-info-button {
margin-left: 20px; margin-left: 20px;
} }
#ide-body { #ide-body {
.full-size; .full-size;
@ -83,8 +83,8 @@
} }
} }
#editor,
#editor, #editor-rich-text { #editor-rich-text {
.full-size; .full-size;
top: 32px; top: 32px;
} }
@ -109,14 +109,14 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #FFF; background-color: #fff;
} }
.loading-screen-brand-container { .loading-screen-brand-container {
width: 15%; width: 15%;
min-width: 200px; min-width: 200px;
text-align: center; text-align: center;
} }
.loading-screen-brand { .loading-screen-brand {
position: relative; position: relative;
width: 100%; width: 100%;
padding-top: @editor-loading-logo-padding-top; padding-top: @editor-loading-logo-padding-top;
@ -131,16 +131,16 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
background: @editor-loading-logo-foreground-url no-repeat bottom / 100%; background: @editor-loading-logo-foreground-url no-repeat bottom / 100%;
transition: height .5s; transition: height 0.5s;
} }
} }
.loading-screen-label { .loading-screen-label {
margin: 0; margin: 0;
padding-top: 1em; padding-top: 1em;
font-size: 2em; font-size: 2em;
color: @gray-dark; color: @gray-dark;
} }
.loading-screen-ellip { .loading-screen-ellip {
animation: blink 1.4s both infinite; animation: blink 1.4s both infinite;
&:nth-child(2) { &:nth-child(2) {
animation-delay: 0.2s; animation-delay: 0.2s;
@ -148,14 +148,13 @@
&:nth-child(3) { &:nth-child(3) {
animation-delay: 0.4s; animation-delay: 0.4s;
} }
} }
.loading-screen-error { .loading-screen-error {
margin: 0; margin: 0;
padding-top: 1em; padding-top: 1em;
color: @state-danger-text; color: @state-danger-text;
} }
.loading-panel { .loading-panel {
.full-size; .full-size;
@ -273,7 +272,8 @@ Ace
position: absolute; position: absolute;
z-index: 2; z-index: 2;
} }
.highlights-before-label, .highlights-after-label { .highlights-before-label,
.highlights-after-label {
position: absolute; position: absolute;
right: @line-height-computed; right: @line-height-computed;
z-index: 1; z-index: 1;
@ -301,7 +301,7 @@ Ace
// element a background, we're telling Safari that it *really* needs to // element a background, we're telling Safari that it *really* needs to
// paint the whole area. See https://github.com/ajaxorg/ace/issues/2872 // paint the whole area. See https://github.com/ajaxorg/ace/issues/2872
.ace_scrollbar-inner { .ace_scrollbar-inner {
background-color: #FFF; background-color: #fff;
opacity: 0.01; opacity: 0.01;
.ace_dark & { .ace_dark & {
@ -377,17 +377,19 @@ CodeMirror
} }
} }
.ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed { .ui-layout-resizer-west.ui-layout-resizer-open,
.ui-layout-resizer-east.ui-layout-resizer-closed {
.ui-layout-toggler when (@is-overleaf = false) { .ui-layout-toggler when (@is-overleaf = false) {
&:before { &:before {
content: "\f104" content: '\f104';
} }
} }
} }
.ui-layout-resizer-east.ui-layout-resizer-open, .ui-layout-resizer-west.ui-layout-resizer-closed { .ui-layout-resizer-east.ui-layout-resizer-open,
.ui-layout-resizer-west.ui-layout-resizer-closed {
.ui-layout-toggler when (@is-overleaf = false) { .ui-layout-toggler when (@is-overleaf = false) {
&:before { &:before {
content: "\f105" content: '\f105';
} }
} }
} }
@ -430,7 +432,7 @@ CodeMirror
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-size: 65%; font-size: 65%;
font-weight: bold; font-weight: bold;
color: #FFF; color: #fff;
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
} }
@ -439,19 +441,19 @@ CodeMirror
background-color: @editor-toggler-hover-bg-color; background-color: @editor-toggler-hover-bg-color;
} }
} }
.custom-toggler-east::after { .custom-toggler-east::after {
content: '\f105'; content: '\f105';
} }
.custom-toggler-west::after { .custom-toggler-west::after {
content: '\f104'; content: '\f104';
} }
.custom-toggler-closed.custom-toggler-east::after { .custom-toggler-closed.custom-toggler-east::after {
content: '\f104'; content: '\f104';
} }
.custom-toggler-closed.custom-toggler-west::after { .custom-toggler-closed.custom-toggler-west::after {
content: '\f105'; content: '\f105';
} }
.ui-layout-resizer-dragging { .ui-layout-resizer-dragging {
background-color: @editor-resizer-bg-color-dragging; background-color: @editor-resizer-bg-color-dragging;
@ -478,14 +480,13 @@ CodeMirror
&:hover { &:hover {
background-color: darken(@gray, 5%); background-color: darken(@gray, 5%);
border-color: darken(@gray-dark, 20%); border-color: darken(@gray-dark, 20%);
} }
} }
} }
.modal-alert { .modal-alert {
margin-top:10px; margin-top: 10px;
margin-bottom:0px; margin-bottom: 0px;
} }
// vertically centre the "connection down" modal so it does not hide // vertically centre the "connection down" modal so it does not hide
@ -510,7 +511,7 @@ CodeMirror
padding: 2px; padding: 2px;
background: rgb(202, 214, 250); background: rgb(202, 214, 250);
border: 1px solid lightgray; border: 1px solid lightgray;
box-shadow: 3px 3px 5px rgba(0,0,0,.2); box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
span { span {
color: black; color: black;
@ -549,7 +550,7 @@ CodeMirror
} }
} }
a.btn { a.btn {
opacity: 1.0; opacity: 1;
} }
} }
} }

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

@ -46,7 +46,6 @@
} }
} }
.linked-file-icon { .linked-file-icon {
color: @blue color: @blue;
} }
} }

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

@ -57,7 +57,7 @@
} }
} }
.message-wrapper { .message-wrapper {
margin-left: 50px + @line-height-computed/2; margin-left: 50px + @line-height-computed / 2;
.name { .name {
font-size: 12px; font-size: 12px;
@ -83,7 +83,7 @@
right: 100%; right: 100%;
top: @line-height-computed / 4; top: @line-height-computed / 4;
border: solid; border: solid;
content: " "; content: ' ';
height: 0; height: 0;
width: 0; width: 0;
position: absolute; position: absolute;

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

@ -51,10 +51,10 @@
} }
.loading { .loading {
padding-left: 6px; padding-left: 6px;
color: #FFF; color: #fff;
i.fa { i.fa {
color: #FFF; color: #fff;
} }
} }
} }
@ -135,7 +135,8 @@
} }
} }
i.fa-folder-open, i.fa-folder { i.fa-folder-open,
i.fa-folder {
color: @file-tree-item-folder-color; color: @file-tree-item-folder-color;
font-size: 14px; font-size: 14px;
} }
@ -159,12 +160,12 @@
> div > i.fa, > div > i.fa,
> i.fa, > i.fa,
.entity-menu-toggle i.fa { .entity-menu-toggle i.fa {
color: #FFF; color: #fff;
} }
> i.fa i.linked-file-highlight { > i.fa i.linked-file-highlight {
color: @blue; color: @blue;
} }
color: #FFF; color: #fff;
font-weight: bold; font-weight: bold;
background-color: @file-tree-multiselect-bg; background-color: @file-tree-multiselect-bg;
.fake-full-width-bg(@file-tree-multiselect-bg); .fake-full-width-bg(@file-tree-multiselect-bg);
@ -211,7 +212,8 @@
border-right: 4px solid @link-color; border-right: 4px solid @link-color;
font-weight: bold; font-weight: bold;
padding-right: 32px; padding-right: 32px;
i.fa-folder-open, i.fa { i.fa-folder-open,
i.fa {
color: @link-color; color: @link-color;
} }
.entity-menu-toggle { .entity-menu-toggle {
@ -276,7 +278,11 @@
> .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,
i.fa-folder,
i.fa-file,
i.fa-image,
i.fa-file-pdf-o {
color: @editor-dark-highlight-color; color: @editor-dark-highlight-color;
} }
} }
@ -298,7 +304,7 @@
font-size: 80%; font-size: 80%;
} }
} }
.modal-new-file--list { .modal-new-file--list {
background-color: @modal-footer-background-color; background-color: @modal-footer-background-color;
width: 220px; width: 220px;
ul { ul {
@ -320,13 +326,13 @@
background-color: white; 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;
} }

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

@ -30,39 +30,39 @@
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;
@ -78,7 +78,7 @@
.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;
@ -108,7 +108,7 @@
-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;
} }
@ -121,7 +121,7 @@
.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;
@ -132,37 +132,35 @@
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 {
.history-label {
display: inline-block; display: inline-block;
color: @history-entry-label-color; color: @history-entry-label-color;
font-size: @font-size-small; font-size: @font-size-small;
@ -183,15 +181,14 @@
color: @history-entry-selected-pseudo-label-color; color: @history-entry-selected-pseudo-label-color;
} }
} }
} }
.history-label-comment, .history-label-comment,
.history-label-delete-btn { .history-label-delete-btn {
padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal; padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal;
border: 0; border: 0;
background-color: @history-entry-label-bg-color; background-color: @history-entry-label-bg-color;
.history-label-pseudo-current-state & { .history-label-pseudo-current-state & {
background-color: @history-entry-pseudo-label-bg-color; background-color: @history-entry-pseudo-label-bg-color;
} }
.history-entry-selected &, .history-entry-selected &,
.history-entry-hover-selected &, .history-entry-hover-selected &,
@ -199,8 +196,8 @@
.history-version-with-label-hover-selected & { .history-version-with-label-hover-selected & {
background-color: @history-entry-selected-label-bg-color; background-color: @history-entry-selected-label-bg-color;
} }
} }
.history-label-comment { .history-label-comment {
display: block; display: block;
float: left; float: left;
border-radius: 9999px; border-radius: 9999px;
@ -211,8 +208,8 @@
padding-right: (@padding-xs-horizontal / 2); padding-right: (@padding-xs-horizontal / 2);
border-radius: 9999px 0 0 9999px; border-radius: 9999px 0 0 9999px;
} }
} }
.history-label-delete-btn { .history-label-delete-btn {
padding-left: (@padding-xs-horizontal / 2); padding-left: (@padding-xs-horizontal / 2);
padding-right: @padding-xs-horizontal; padding-right: @padding-xs-horizontal;
border-radius: 0 9999px 9999px 0; border-radius: 0 9999px 9999px 0;
@ -225,58 +222,57 @@
background-color: darken(@history-entry-selected-label-bg-color, 8%); background-color: darken(@history-entry-selected-label-bg-color, 8%);
} }
} }
} }
.history-label-tooltip { .history-label-tooltip {
white-space: normal; white-space: normal;
padding: (@line-height-computed / 4); padding: (@line-height-computed / 4);
text-align: left; text-align: left;
} }
.history-label-tooltip-title, .history-label-tooltip-title,
.history-label-tooltip-owner, .history-label-tooltip-owner,
.history-label-tooltip-datetime { .history-label-tooltip-datetime {
margin: 0 0 (@line-height-computed / 4) 0; margin: 0 0 (@line-height-computed / 4) 0;
} }
.history-label-tooltip-title { .history-label-tooltip-title {
font-weight: bold; font-weight: bold;
} }
.history-label-tooltip-datetime { .history-label-tooltip-datetime {
margin-bottom: 0; margin-bottom: 0;
} }
.history-entry-changes { .history-entry-changes {
.list-unstyled; .list-unstyled;
margin-bottom: 3px; margin-bottom: 3px;
} }
.history-entry-change { .history-entry-change {
word-break: break-all; word-break: break-all;
} }
.history-entry-change-action { .history-entry-change-action {
margin-right: 0.5em; margin-right: 0.5em;
} }
.history-entry-change-doc { .history-entry-change-doc {
color: @history-highlight-color; color: @history-highlight-color;
font-weight: bold; font-weight: bold;
.history-entry-selected &, .history-entry-selected &,
.history-entry-hover-selected &, .history-entry-hover-selected &,
.history-version-with-label-selected & { .history-version-with-label-selected & {
color: #FFF; color: #fff;
} }
} }
.history-entry-metadata { .history-entry-metadata {
}
} .history-entry-metadata-time {
.history-entry-metadata-time {
white-space: nowrap; white-space: nowrap;
} }
.history-entry-metadata-users { .history-entry-metadata-users {
display: inline; display: inline;
padding: 0; padding: 0;
} }
.history-entry-metadata-user { .history-entry-metadata-user {
display: inline; display: inline;
&::after { &::after {
content: ', '; content: ', ';
@ -284,10 +280,10 @@
&:last-of-type::after { &:last-of-type::after {
content: none; 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 & {
@ -310,7 +306,7 @@
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;
@ -329,11 +325,11 @@
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;
@ -351,11 +347,11 @@
&: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;
@ -363,56 +359,55 @@
&: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 {
@ -421,4 +416,4 @@
.history-file-entity-icon { .history-file-entity-icon {
color: @brand-primary; color: @brand-primary;
} }
} }

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

@ -18,7 +18,7 @@
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;
@ -54,7 +54,7 @@
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;
@ -199,7 +199,8 @@
} }
} }
} }
li.loading-changes, li.empty-message { li.loading-changes,
li.empty-message {
padding: 6px; padding: 6px;
cursor: default; cursor: default;
&:hover { &:hover {
@ -310,7 +311,9 @@
} }
.hide-ace-cursor { .hide-ace-cursor {
.ace_active-line, .ace_cursor-layer, .ace_bracket { .ace_active-line,
.ace_cursor-layer,
.ace_bracket {
display: none; display: none;
} }

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

@ -112,9 +112,9 @@
} }
} }
&:after { &:after {
content:""; content: '';
display:table; display: table;
clear:both; clear: both;
} }
} }
} }

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

@ -33,7 +33,8 @@
padding: 4px 10px 5px; padding: 4px 10px 5px;
margin: 1px 2px; margin: 1px 2px;
color: @text-color; color: @text-color;
&:hover, &:active { &:hover,
&:active {
color: @text-color!important; color: @text-color!important;
background-color: @gray-lightest; background-color: @gray-lightest;
text-shadow: none; text-shadow: none;

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

@ -1,7 +1,11 @@
@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) {
@ -9,7 +13,7 @@
.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);
} }
@ -25,11 +29,15 @@
} }
} }
.pdf .toolbar.toolbar-pdf when (@is-overleaf = true) and (@is-overleaf-light = false) { .pdf
.toolbar.toolbar-pdf
when
(@is-overleaf = true)
and
(@is-overleaf-light = false) {
border-bottom: 0; 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);
@ -42,12 +50,18 @@
background-color: @pdf-bg; background-color: @pdf-bg;
} }
.pdf-viewer, .pdf-logs, .pdf-errors, .pdf-uncompiled { .pdf-viewer,
.pdf-logs,
.pdf-errors,
.pdf-uncompiled {
.full-size; .full-size;
top: @pdf-top-offset; top: @pdf-top-offset;
} }
.pdf-logs, .pdf-errors, .pdf-uncompiled, .pdf-validation-problems{ .pdf-logs,
.pdf-errors,
.pdf-uncompiled,
.pdf-validation-problems {
padding: @line-height-computed / 2; padding: @line-height-computed / 2;
} }
@ -71,7 +85,7 @@
} }
&[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);
} }
} }
} }
@ -104,7 +118,8 @@
.full-size; .full-size;
background-color: @pdfjs-bg; background-color: @pdfjs-bg;
overflow: scroll; overflow: scroll;
canvas, div.pdf-canvas { canvas,
div.pdf-canvas {
background: white; background: white;
box-shadow: @pdf-page-shadow-color 0px 0px 10px; box-shadow: @pdf-page-shadow-color 0px 0px 10px;
} }
@ -143,7 +158,8 @@
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
} }
&:hover, &.flash { &:hover,
&.flash {
.btn-group { .btn-group {
transition: none; transition: none;
visibility: visible; visibility: visible;
@ -255,7 +271,6 @@
background-color: @alert-info-bg; background-color: @alert-info-bg;
} }
} }
} }
pre { pre {
font-size: 12px; font-size: 12px;
@ -279,7 +294,7 @@
.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;
@ -291,9 +306,9 @@
-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;
@ -306,32 +321,38 @@
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 {
@ -364,7 +385,6 @@
white-space: nowrap; white-space: nowrap;
} }
@keyframes expand-feedback-area { @keyframes expand-feedback-area {
from { from {
max-height: 0; max-height: 0;
@ -391,7 +411,7 @@
margin-right: 10px; margin-right: 10px;
.fa { .fa {
color: #FFF; color: #fff;
} }
.alert-danger & { .alert-danger & {
@ -405,7 +425,6 @@
.alert-info & { .alert-info & {
color: @state-info-border; color: @state-info-border;
} }
} }
&-text, &-text,
@ -476,7 +495,7 @@
padding: 5px; padding: 5px;
} }
input[type="radio"] { input[type='radio'] {
margin-top: 2px; margin-top: 2px;
} }
} }
@ -484,7 +503,6 @@
& + p { & + p {
margin-top: 20px; margin-top: 20px;
} }
} }
.files-dropdown-container { .files-dropdown-container {
@ -492,9 +510,9 @@
position: relative; position: relative;
} }
.files-dropdown { .files-dropdown {
display: inline-block; display: inline-block;
} }
.plv-text-layer { .plv-text-layer {
display: none; display: none;

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

@ -28,12 +28,10 @@
@rp-entry-animation-speed: 0.3s; @rp-entry-animation-speed: 0.3s;
.rp-button() { .rp-button() {
display: block; // IE doesn't do flex with inline items. display: block; // IE doesn't do flex with inline items.
background-color: @rp-highlight-blue; background-color: @rp-highlight-blue;
color: #FFF; color: #fff;
text-align: center; text-align: center;
line-height: 1.3; line-height: 1.3;
user-select: none; user-select: none;
@ -44,7 +42,7 @@
outline: 0; outline: 0;
background-color: darken(@rp-highlight-blue, 5%); background-color: darken(@rp-highlight-blue, 5%);
text-decoration: none; text-decoration: none;
color: #FFF; color: #fff;
} }
&[disabled] { &[disabled] {
@ -73,30 +71,30 @@
width: 0; width: 0;
height: 0; height: 0;
} }
.triangle(top, @width, @height, @color) { .triangle(top, @width, @height, @color) {
border-width: 0 @width/2 @height @width/2; border-width: 0 @width / 2 @height @width / 2;
border-bottom-color: @color; border-bottom-color: @color;
border-left-color: transparent; border-left-color: transparent;
border-right-color: transparent; border-right-color: transparent;
} }
.triangle(bottom, @width, @height, @color) { .triangle(bottom, @width, @height, @color) {
border-width: @height @width/2 0 @width/2; border-width: @height @width / 2 0 @width / 2;
border-top-color: @color; border-top-color: @color;
border-left-color: transparent; border-left-color: transparent;
border-right-color: transparent; border-right-color: transparent;
} }
.triangle(right, @width, @height, @color) { .triangle(right, @width, @height, @color) {
border-width: @height/2 0 @height/2 @width; border-width: @height / 2 0 @height / 2 @width;
border-left-color: @color; border-left-color: @color;
border-top-color: transparent; border-top-color: transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
} }
.triangle(left, @width, @height, @color) { .triangle(left, @width, @height, @color) {
border-width: @height/2 @width @height/2 0; border-width: @height / 2 @width @height / 2 0;
border-right-color: @color; border-right-color: @color;
border-top-color: transparent; border-top-color: transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
} }
#review-panel { #review-panel {
display: block; display: block;
@ -151,23 +149,23 @@
flex-basis: 32px; flex-basis: 32px;
flex-shrink: 0; flex-shrink: 0;
} }
.review-panel-toolbar-label { .review-panel-toolbar-label {
cursor: pointer; cursor: pointer;
text-align: right; text-align: right;
flex-grow: 1; flex-grow: 1;
} }
.review-panel-toolbar-icon-on { .review-panel-toolbar-icon-on {
margin-right: 5px; margin-right: 5px;
color: @red; color: @red;
} }
.review-panel-toolbar-label-disabled { .review-panel-toolbar-label-disabled {
cursor: auto; cursor: auto;
margin-right: 5px; margin-right: 5px;
} }
.review-panel-toolbar-spinner { .review-panel-toolbar-spinner {
margin-left: 5px; margin-left: 5px;
} }
.rp-tc-state { .rp-tc-state {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
@ -179,39 +177,39 @@
border-bottom: 1px solid @rp-border-grey; border-bottom: 1px solid @rp-border-grey;
background-color: @rp-bg-dim-blue; background-color: @rp-bg-dim-blue;
text-align: left; text-align: left;
} }
.rp-tc-state-collapse { .rp-tc-state-collapse {
.rp-collapse-arrow; .rp-collapse-arrow;
margin-left: 5px; margin-left: 5px;
} }
.rp-tc-state-item { .rp-tc-state-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 3px 0; padding: 3px 0;
&:last-of-type { &:last-of-type {
padding-bottom: 5px; padding-bottom: 5px;
} }
} }
.rp-tc-state-separator { .rp-tc-state-separator {
border-bottom: 1px solid @rp-border-grey; border-bottom: 1px solid @rp-border-grey;
} }
.rp-tc-state-item-everyone { .rp-tc-state-item-everyone {
border-bottom: 1px solid @rp-border-grey; border-bottom: 1px solid @rp-border-grey;
color: @red; color: @red;
} }
.rp-tc-state-item-name { .rp-tc-state-item-name {
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-weight: @rp-semibold-weight; font-weight: @rp-semibold-weight;
} }
.rp-tc-state-item-name-disabled { .rp-tc-state-item-name-disabled {
opacity: .35; opacity: 0.35;
} }
.rp-tc-state-item-guests { .rp-tc-state-item-guests {
color: @blue; color: @blue;
} }
.rp-entry-list { .rp-entry-list {
display: none; display: none;
@ -257,7 +255,7 @@
text-align: center; text-align: center;
background-color: @rp-highlight-blue; background-color: @rp-highlight-blue;
border-radius: 3px; border-radius: 3px;
color: #FFF; color: #fff;
cursor: pointer; cursor: pointer;
transition: top @rp-entry-animation-speed, left 0.1s, right 0.1s; transition: top @rp-entry-animation-speed, left 0.1s, right 0.1s;
.no-animate & { .no-animate & {
@ -269,7 +267,6 @@
right: 4px; right: 4px;
z-index: 1; z-index: 1;
} }
} }
.rp-entry-wrapper { .rp-entry-wrapper {
@ -289,7 +286,7 @@
.rp-state-current-file-mini & { .rp-state-current-file-mini & {
display: none; display: none;
left: @review-off-width + @rp-entry-arrow-width; left: @review-off-width + @rp-entry-arrow-width;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, .2); box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
z-index: 1; z-index: 1;
&::before { &::before {
@ -302,7 +299,12 @@
z-index: -1; z-index: -1;
} }
&::after { &::after {
.triangle(left, @rp-entry-arrow-width, @rp-entry-arrow-width * 1.5, inherit); .triangle(
left,
@rp-entry-arrow-width,
@rp-entry-arrow-width * 1.5,
inherit
);
top: (@review-off-width / 2) - @rp-entry-arrow-width; top: (@review-off-width / 2) - @rp-entry-arrow-width;
left: -(@rp-entry-ribbon-width + @rp-entry-arrow-width); left: -(@rp-entry-ribbon-width + @rp-entry-arrow-width);
content: ''; content: '';
@ -320,7 +322,12 @@
right: -(2 * @rp-entry-arrow-width + 2); right: -(2 * @rp-entry-arrow-width + 2);
} }
&::after { &::after {
.triangle(right, @rp-entry-arrow-width, @rp-entry-arrow-width * 1.5, inherit); .triangle(
right,
@rp-entry-arrow-width,
@rp-entry-arrow-width * 1.5,
inherit
);
right: -(@rp-entry-ribbon-width + @rp-entry-arrow-width); right: -(@rp-entry-ribbon-width + @rp-entry-arrow-width);
left: auto; left: auto;
} }
@ -360,7 +367,7 @@
border-left: solid @rp-entry-ribbon-width transparent; border-left: solid @rp-entry-ribbon-width transparent;
border-radius: 3px; border-radius: 3px;
background-color: #FFF; background-color: #fff;
transition: top @rp-entry-animation-speed, left 0.1s, right 0.1s; transition: top @rp-entry-animation-speed, left 0.1s, right 0.1s;
.no-animate & { .no-animate & {
transition: none; transition: none;
@ -384,9 +391,10 @@
left: 6px; left: 6px;
opacity: 0; opacity: 0;
z-index: 3; z-index: 3;
transform: scale(.1); transform: scale(0.1);
transform-origin: 0 0; transform-origin: 0 0;
transition: top .35s ease-out, left .35s ease-out, transform .35s ease-out, opacity .35s ease-out .2s; transition: top 0.35s ease-out, left 0.35s ease-out,
transform 0.35s ease-out, opacity 0.35s ease-out 0.2s;
} }
&-comment-resolved { &-comment-resolved {
@ -400,7 +408,7 @@
border-left-width: 0; border-left-width: 0;
&.rp-entry-adding-comment { &.rp-entry-adding-comment {
background-color: #FFF; background-color: #fff;
right: 5px; right: 5px;
border-left-width: 3px; border-left-width: 3px;
border-left-color: @rp-yellow; border-left-color: @rp-yellow;
@ -413,12 +421,12 @@
border-left-width: 0; border-left-width: 0;
} }
} }
.rp-entry-body { .rp-entry-body {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 4px 5px; padding: 4px 5px;
} }
.rp-entry-action-icon { .rp-entry-action-icon {
font-size: @rp-icon-large-size; font-size: @rp-icon-large-size;
padding: 0 3px; padding: 0 3px;
line-height: 0; line-height: 0;
@ -426,9 +434,9 @@
.rp-state-overview & { .rp-state-overview & {
display: none; display: none;
} }
} }
.rp-entry-details { .rp-entry-details {
line-height: 1.4; line-height: 1.4;
margin-left: 5px; margin-left: 5px;
// We need to set any low-enough flex base size (0px), making it growable (1) and non-shrinkable (0). // We need to set any low-enough flex base size (0px), making it growable (1) and non-shrinkable (0).
@ -439,20 +447,22 @@
.rp-state-overview & { .rp-state-overview & {
margin-left: 0; margin-left: 0;
} }
} }
.rp-entry-metadata { .rp-entry-metadata {
font-size: @rp-small-font-size; font-size: @rp-small-font-size;
} }
.rp-entry-user { .rp-entry-user {
font-weight: @rp-semibold-weight; font-weight: @rp-semibold-weight;
font-style: normal; font-style: normal;
}
.rp-comment-actions {
a {
color: @rp-type-blue;
} }
.rp-comment-actions { }
a { color: @rp-type-blue; }
}
.rp-content-highlight { .rp-content-highlight {
color: @rp-type-darkgrey; color: @rp-type-darkgrey;
font-weight: @rp-semibold-weight; font-weight: @rp-semibold-weight;
text-decoration: none; text-decoration: none;
@ -460,19 +470,19 @@
del& { del& {
text-decoration: line-through; text-decoration: line-through;
} }
} }
.rp-entry-actions { .rp-entry-actions {
display: flex; display: flex;
.rp-state-overview .rp-entry-list & { .rp-state-overview .rp-entry-list & {
display: none; display: none;
} }
} }
.rp-entry-button { .rp-entry-button {
.rp-button(); .rp-button();
flex: 1 1 50%; flex: 1 1 50%;
border-right: solid 1px #FFF; border-right: solid 1px #fff;
padding: 2px 0; padding: 2px 0;
&:last-child { &:last-child {
@ -488,9 +498,9 @@
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
} }
} }
.rp-comment { .rp-comment {
margin: 2px 5px; margin: 2px 5px;
padding-bottom: 3px; padding-bottom: 3px;
line-height: 1.4; line-height: 1.4;
@ -509,27 +519,27 @@
padding-top: 4px; padding-top: 4px;
} }
} }
} }
.rp-comment-content { .rp-comment-content {
margin: 0; margin: 0;
color: @rp-type-darkgrey; color: @rp-type-darkgrey;
overflow-x: auto; // Long words, like links can overflow without this. overflow-x: auto; // Long words, like links can overflow without this.
} }
.rp-comment-resolver { .rp-comment-resolver {
color: @rp-type-blue; color: @rp-type-blue;
} }
.rp-comment-resolver-content { .rp-comment-resolver-content {
font-style: italic; font-style: italic;
margin: 0; margin: 0;
} }
.rp-comment-reply { .rp-comment-reply {
padding: 0 5px; padding: 0 5px;
} }
.rp-add-comment-btn, .rp-add-comment-btn,
.rp-bulk-actions-btn { .rp-bulk-actions-btn {
.rp-button(); .rp-button();
display: inline-block; display: inline-block;
padding: 5px 10px; padding: 5px 10px;
@ -544,9 +554,9 @@
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
} }
} }
} }
.rp-bulk-actions-btn { .rp-bulk-actions-btn {
border-radius: 0; border-radius: 0;
&:first-child { &:first-child {
border-top-left-radius: 3px; border-top-left-radius: 3px;
@ -557,13 +567,13 @@
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
margin-left: 1px; margin-left: 1px;
} }
} }
.rp-new-comment { .rp-new-comment {
padding: 5px; padding: 5px;
} }
.rp-comment-input { .rp-comment-input {
width: 100%; width: 100%;
font-size: @rp-base-font-size; font-size: @rp-base-font-size;
padding: 2px 5px; padding: 2px 5px;
@ -571,12 +581,12 @@
border: solid 1px @rp-border-grey; border: solid 1px @rp-border-grey;
resize: vertical; resize: vertical;
color: @rp-type-darkgrey; color: @rp-type-darkgrey;
background-color: #FFF; background-color: #fff;
margin-top: 3px; margin-top: 3px;
overflow-x: hidden; overflow-x: hidden;
min-height: 3em; min-height: 3em;
max-height: 400px; max-height: 400px;
} }
.rp-icon-delete { .rp-icon-delete {
display: inline-block; display: inline-block;
@ -593,22 +603,22 @@
.rp-resolved-comment { .rp-resolved-comment {
border-left: solid @rp-entry-ribbon-width @rp-yellow; border-left: solid @rp-entry-ribbon-width @rp-yellow;
border-radius: 3px; border-radius: 3px;
background-color: #FFF; background-color: #fff;
margin-bottom: 5px; margin-bottom: 5px;
} }
.rp-resolved-comment-context { .rp-resolved-comment-context {
background-color: lighten(@rp-yellow, 35%); background-color: lighten(@rp-yellow, 35%);
padding: 4px 5px; padding: 4px 5px;
} }
.rp-resolved-comment-context-file { .rp-resolved-comment-context-file {
font-weight: @rp-semibold-weight; font-weight: @rp-semibold-weight;
} }
.rp-resolved-comment-context-quote { .rp-resolved-comment-context-quote {
color: #000; color: #000;
font-family: @font-family-monospace; font-family: @font-family-monospace;
margin: 0; margin: 0;
} }
.rp-entry-callout { .rp-entry-callout {
transition: top @rp-entry-animation-speed, height @rp-entry-animation-speed; transition: top @rp-entry-animation-speed, height @rp-entry-animation-speed;
@ -617,7 +627,7 @@
border-top: 1px solid grey; border-top: 1px solid grey;
border-right: 1px dashed grey; border-right: 1px dashed grey;
&::after { &::after {
content: ""; content: '';
position: absolute; position: absolute;
top: -1px; top: -1px;
left: 3px; left: 3px;
@ -690,20 +700,20 @@
cursor: pointer; cursor: pointer;
} }
.rp-overview-file-num-entries { .rp-overview-file-num-entries {
font-weight: normal; font-weight: normal;
font-size: 0.9em; font-size: 0.9em;
} }
.rp-overview-file-header-collapse { .rp-overview-file-header-collapse {
.rp-collapse-arrow; .rp-collapse-arrow;
float: left; float: left;
} }
.rp-overview-file-entries { .rp-overview-file-entries {
overflow: hidden; overflow: hidden;
} }
.rp-comment-wrapper { .rp-comment-wrapper {
transition: .35s opacity ease-out .2s; transition: 0.35s opacity ease-out 0.2s;
&-resolving { &-resolving {
opacity: 0; opacity: 0;
@ -738,7 +748,7 @@
border-top: solid 1px @rp-border-grey; border-top: solid 1px @rp-border-grey;
z-index: 2; z-index: 2;
} }
.rp-nav-item { .rp-nav-item {
display: block; display: block;
color: lighten(@rp-type-blue, 25%); color: lighten(@rp-type-blue, 25%);
flex: 0 0 50%; flex: 0 0 50%;
@ -755,11 +765,11 @@
color: @rp-type-blue; color: @rp-type-blue;
border-top: solid 3px @rp-highlight-blue; border-top: solid 3px @rp-highlight-blue;
} }
} }
.rp-nav-label { .rp-nav-label {
display: block; display: block;
font-size: @rp-base-font-size; font-size: @rp-base-font-size;
} }
#editor { #editor {
.rp-size-mini & { .rp-size-mini & {
@ -799,7 +809,7 @@
vertical-align: middle; vertical-align: middle;
padding-left: 5px; padding-left: 5px;
} }
.rp-toggle-hidden-input { .rp-toggle-hidden-input {
display: none; display: none;
+ .rp-toggle-btn { + .rp-toggle-btn {
@ -814,9 +824,9 @@
user-select: none; user-select: none;
padding: 1px; padding: 1px;
background-color: @rp-highlight-blue; background-color: @rp-highlight-blue;
border: 1px solid #FFF; border: 1px solid #fff;
border-radius: .875em; border-radius: 0.875em;
transition: background .15s ease, border-color 0.15s ease; transition: background 0.15s ease, border-color 0.15s ease;
&::before { &::before {
content: ''; content: '';
@ -825,27 +835,27 @@
height: 100%; height: 100%;
position: relative; position: relative;
left: 0; left: 0;
background-color: #FFF; background-color: #fff;
border-radius: .875em; border-radius: 0.875em;
transition: background-color 0.15s ease, color 0.15s ease, left 0.15s ease; transition: background-color 0.15s ease, color 0.15s ease, left 0.15s ease;
} }
} }
&:checked + .rp-toggle-btn { &:checked + .rp-toggle-btn {
background-color: @red; background-color: @red;
border-color: #FFF; border-color: #fff;
&::before { &::before {
left: 50%; left: 50%;
background-color: #FFF; background-color: #fff;
} }
} }
&:disabled + .rp-toggle-btn { &:disabled + .rp-toggle-btn {
cursor: default; cursor: default;
opacity: .35; opacity: 0.35;
}
} }
}
.rp-unsupported-msg-wrapper { .rp-unsupported-msg-wrapper {
display: none; display: none;
@ -876,7 +886,8 @@
.track-changes-marker-callout { .track-changes-marker-callout {
border-radius: 0; border-radius: 0;
position: absolute; position: absolute;
.rp-state-overview &, .rp-loading-threads & { .rp-state-overview &,
.rp-loading-threads & {
display: none; display: none;
} }
} }
@ -897,7 +908,7 @@
.rp-loading-threads & { .rp-loading-threads & {
display: none; display: none;
} }
z-index: 6 // Appear above text selection z-index: 6; // Appear above text selection
} }
.track-changes-comment-marker { .track-changes-comment-marker {
@ -915,7 +926,7 @@
.ace_dark { .ace_dark {
.track-changes-comment-marker { .track-changes-comment-marker {
background-color: @rp-yellow-on-dark background-color: @rp-yellow-on-dark;
} }
.track-changes-added-marker { .track-changes-added-marker {
background-color: @rp-green-on-dark; background-color: @rp-green-on-dark;
@ -924,8 +935,14 @@
} }
.cm-editor-wrapper { .cm-editor-wrapper {
@rp-yellow-for-cm: fade(@rp-yellow, 40%); // Get the RGBA colour with transparency @rp-yellow-for-cm: fade(
@rp-green-for-cm: fade(@rp-green, 40%); // Get the RGBA colour with transparency @rp-yellow,
40%
); // Get the RGBA colour with transparency
@rp-green-for-cm: fade(
@rp-green,
40%
); // Get the RGBA colour with transparency
.track-changes-marker { .track-changes-marker {
border-radius: 0; border-radius: 0;
@ -1037,7 +1054,7 @@
position: absolute; position: absolute;
width: 300px; width: 300px;
left: -150px; left: -150px;
max-height: ~"calc(100vh - 100px)"; max-height: ~'calc(100vh - 100px)';
margin-top: @rp-entry-arrow-width * 1.5; margin-top: @rp-entry-arrow-width * 1.5;
margin-left: 1em; margin-left: 1em;
background-color: @rp-bg-blue; background-color: @rp-bg-blue;
@ -1045,28 +1062,33 @@
align-items: stretch; align-items: stretch;
justify-content: center; justify-content: center;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, .3); box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.3);
z-index: 1; z-index: 1;
&::before { &::before {
content: ''; content: '';
.triangle(top, @rp-entry-arrow-width * 3, @rp-entry-arrow-width * 1.5, @rp-bg-blue); .triangle(
top,
@rp-entry-arrow-width * 3,
@rp-entry-arrow-width * 1.5,
@rp-bg-blue
);
top: -@rp-entry-ribbon-width * 2; top: -@rp-entry-ribbon-width * 2;
left: 50%; left: 50%;
margin-left: -@rp-entry-arrow-width * .75; margin-left: -@rp-entry-arrow-width * 0.75;
} }
&-open { &-open {
display: flex; display: flex;
} }
} }
.resolved-comments-scroller { .resolved-comments-scroller {
flex: 0 0 auto; // Can't use 100% in the flex-basis key here, IE won't account for padding. flex: 0 0 auto; // Can't use 100% in the flex-basis key here, IE won't account for padding.
width: 100%; // We need to set the width explicitly, as flex-basis won't work. width: 100%; // We need to set the width explicitly, as flex-basis won't work.
max-height: ~"calc(100vh - 100px)"; // We also need to explicitly set the max-height, IE won't compute the flex-determined height. max-height: ~'calc(100vh - 100px)'; // We also need to explicitly set the max-height, IE won't compute the flex-determined height.
padding: 5px; padding: 5px;
overflow-y: auto; overflow-y: auto;
} }
.rp-collapse-toggle { .rp-collapse-toggle {
color: @rp-type-blue; color: @rp-type-blue;
@ -1094,7 +1116,7 @@
display: none; display: none;
} }
} }
.rp-track-changes-indicator { .rp-track-changes-indicator {
display: block; display: block;
padding: 5px 10px; padding: 5px 10px;
background-color: rgba(240, 240, 240, 0.9); background-color: rgba(240, 240, 240, 0.9);
@ -1104,13 +1126,13 @@
white-space: nowrap; white-space: nowrap;
&.rp-track-changes-indicator-on-dark { &.rp-track-changes-indicator-on-dark {
background-color: rgba(88, 88, 88, .8); background-color: rgba(88, 88, 88, 0.8);
color: #FFF; color: #fff;
&:hover, &:hover,
&:focus { &:focus {
background-color: rgba(88, 88, 88, 1); background-color: rgba(88, 88, 88, 1);
color: #FFF; color: #fff;
} }
} }
@ -1121,7 +1143,7 @@
background-color: rgba(240, 240, 240, 1); background-color: rgba(240, 240, 240, 1);
color: @rp-type-blue; color: @rp-type-blue;
} }
} }
.review-panel-toggler { .review-panel-toggler {
display: none; display: none;
@ -1146,18 +1168,18 @@
.rp-size-expanded & { .rp-size-expanded & {
&::after { &::after {
content: "\f105"; content: '\f105';
} }
} }
&:hover, &:hover,
&:focus { &:focus {
color: @rp-highlight-blue; color: @rp-highlight-blue;
background-color: #FFF; background-color: #fff;
} }
&::after { &::after {
content: "\f104"; content: '\f104';
font-family: FontAwesome; font-family: FontAwesome;
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;

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;
} }
} }

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

@ -6,7 +6,9 @@
font-size: 1rem; font-size: 1rem;
} }
.project-member, .project-invite, .public-access-level { .project-member,
.project-invite,
.public-access-level {
padding: (@line-height-computed / 2) 0; padding: (@line-height-computed / 2) 0;
border-bottom: 1px solid @gray-lighter; border-bottom: 1px solid @gray-lighter;
font-size: 14px; font-size: 14px;
@ -17,14 +19,14 @@
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;
} }
} }
} }
@ -37,7 +39,8 @@
padding-top: @margin-md; padding-top: @margin-md;
} }
.project-member, .project-invite { .project-member,
.project-invite {
&:hover { &:hover {
background-color: @gray-lightest; background-color: @gray-lightest;
} }

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

@ -6,13 +6,14 @@
height: @toolbar-height; height: @toolbar-height;
border-bottom: @toolbar-border-bottom; border-bottom: @toolbar-border-bottom;
> a, .toolbar-right > a { > a,
.toolbar-right > a {
position: relative; position: relative;
.label { .label {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
padding: .15em .6em .2em; padding: 0.15em 0.6em 0.2em;
font-size: 60%; font-size: 60%;
pointer-events: none; // Labels were capturing button/anchor clicks. pointer-events: none; // Labels were capturing button/anchor clicks.
} }
@ -41,7 +42,8 @@
color: @toolbar-icon-btn-hover-color; color: @toolbar-icon-btn-hover-color;
text-decoration: none; text-decoration: none;
} }
&.active, &:active { &.active,
&:active {
.label { .label {
display: none; display: none;
} }
@ -71,7 +73,8 @@
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,
&:active {
color: @toolbar-btn-active-color; color: @toolbar-btn-active-color;
background-color: @toolbar-btn-active-bg-color; background-color: @toolbar-btn-active-bg-color;
box-shadow: @toolbar-btn-active-shadow; box-shadow: @toolbar-btn-active-shadow;
@ -143,11 +146,11 @@
} }
} }
.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;
@ -255,8 +258,8 @@
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;

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

@ -12,20 +12,20 @@
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;
@ -54,36 +54,36 @@
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) { .error-details when (@is-overleaf = true) {
flex-grow: 1; flex-grow: 1;
} }
.error-status { .error-status {
font-family: @font-family-serif; font-family: @font-family-serif;
margin-bottom: (@line-height-computed / 4); margin-bottom: (@line-height-computed / 4);
color: @gray-dark; color: @gray-dark;
font-size: @font-size-h1; font-size: @font-size-h1;
} }
.error-description { .error-description {
font-family: @font-family-serif; font-family: @font-family-serif;
font-size: @font-size-h3; font-size: @font-size-h3;
color: @gray; color: @gray;
margin-bottom: @line-height-computed * 2; margin-bottom: @line-height-computed * 2;
} }
.error-btn when (@is-overleaf = false) { .error-btn when (@is-overleaf = false) {
color: @navbar-default-link-color; color: @navbar-default-link-color;
border: 2px solid @navbar-default-link-color; border: 2px solid @navbar-default-link-color;
border-radius: @border-radius-base; border-radius: @border-radius-base;
@ -98,13 +98,13 @@
background-color: @navbar-default-link-hover-bg; background-color: @navbar-default-link-hover-bg;
border: 2px solid @navbar-default-link-hover-color; border: 2px solid @navbar-default-link-hover-color;
} }
} }
.error-btn when (@is-overleaf = true) { .error-btn when (@is-overleaf = true) {
.btn; .btn;
.btn-primary; .btn-primary;
display: block; display: block;
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
display: inline-block; display: inline-block;
} }
} }

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

@ -5,8 +5,8 @@
} }
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;
} }

2
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;
} }

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

@ -40,13 +40,23 @@
} }
.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,
rgba(79, 156, 69, 1),
rgba(28, 91, 38, 1)
);
background-image: linear-gradient(
to left,
rgba(79, 156, 69, 1),
rgba(28, 91, 38, 1)
);
position: relative; position: relative;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
padding-top: @header-height; padding-top: @header-height;
h1, p, label { h1,
p,
label {
color: white; color: white;
text-align: center; text-align: center;
} }
@ -55,7 +65,7 @@
line-height: 6.25rem; line-height: 6.25rem;
margin-bottom: 0; margin-bottom: 0;
margin-top: @line-height-computed; margin-top: @line-height-computed;
text-shadow: 0 1px 3px rgba(0,0,0,0.42); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
span { span {
font-family: @font-family-sans-serif; font-family: @font-family-sans-serif;
font-weight: 100; font-weight: 100;
@ -73,8 +83,16 @@
display: block; display: block;
} }
.register-banner { .register-banner {
background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.7),rgba(0,0,0,0.9)); background-image: -webkit-linear-gradient(
background-image: linear-gradient(to bottom,rgba(0,0,0,0.7),rgba(0,0,0,0.9)); top,
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.9)
);
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.9)
);
padding: @register-v-spacing 0; padding: @register-v-spacing 0;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -107,7 +125,7 @@
margin: auto; margin: auto;
margin-bottom: -50px; margin-bottom: -50px;
overflow-y: hidden; overflow-y: hidden;
box-shadow: 0 0 50px rgba(0,0,0,.67); box-shadow: 0 0 50px rgba(0, 0, 0, 0.67);
max-width: 960px; max-width: 960px;
.img { .img {
max-width: 960px; max-width: 960px;
@ -117,13 +135,12 @@
margin: auto; margin: auto;
height: 672px; height: 672px;
} }
@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) {
.img { .img {
background-image: url('/img/homepage@2x.png'); background-image: url('/img/homepage@2x.png');
} }
@ -133,19 +150,19 @@
.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;
@ -153,7 +170,7 @@
&::after { &::after {
margin-left: 1.25em; margin-left: 1.25em;
} }
} }
.hp-register-newsletter-checkbox { .hp-register-newsletter-checkbox {
font-size: 90%; font-size: 90%;
@ -171,7 +188,9 @@
background-color: @ol-blue-gray-3; background-color: @ol-blue-gray-3;
&:hover, &:focus, &:active { &:hover,
&:focus,
&:active {
background-color: darken(@ol-blue-gray-3, 8%); background-color: darken(@ol-blue-gray-3, 8%);
} }
} }
@ -180,7 +199,7 @@
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) {
@ -192,7 +211,7 @@
height: 100%; height: 100%;
} }
} }
} }
.universities-container { .universities-container {
border-bottom: 1px solid @gray-lighter; border-bottom: 1px solid @gray-lighter;
@ -227,7 +246,7 @@
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;
@ -244,7 +263,8 @@
} }
.track-changes-example { .track-changes-example {
.removed, .added { .removed,
.added {
color: #333; color: #333;
margin: 0 -1px; margin: 0 -1px;
padding: 0 3px; padding: 0 3px;
@ -257,7 +277,7 @@
background-color: hsl(200, 70%, 95%); background-color: hsl(200, 70%, 95%);
position: relative; position: relative;
&:after { &:after {
content: " "; content: ' ';
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
@ -276,7 +296,7 @@
.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) {

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 {

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

@ -13,9 +13,9 @@
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;
@ -35,7 +35,7 @@
} }
.v1-import-warning { .v1-import-warning {
color: #4B7FD1; color: #4b7fd1;
font-size: 10em; font-size: 10em;
line-height: 1em; line-height: 1em;
} }
@ -46,6 +46,6 @@
text-align: left; text-align: left;
} }
.v1-import-btn { .v1-import-btn {
width: 20rem; width: 20rem;
} }

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

@ -14,47 +14,47 @@
max-width: 400px; max-width: 400px;
margin: 0 auto; margin: 0 auto;
} }
.login-register-header { .login-register-header {
padding-top: @line-height-computed; padding-top: @line-height-computed;
padding-bottom: @line-height-computed - 5; padding-bottom: @line-height-computed - 5;
border-bottom: solid 1px @hr-border; border-bottom: solid 1px @hr-border;
} }
.login-register-header-heading { .login-register-header-heading {
margin: 0; margin: 0;
color: @text-color; 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;
@ -68,13 +68,13 @@
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;
@ -82,9 +82,9 @@
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;
@ -92,17 +92,17 @@
& > .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 {
@ -111,13 +111,13 @@
&: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;
@ -125,28 +125,28 @@
&::before { &::before {
content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome. content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
} }
} }
.login-btn-icon-ieee { .login-btn-icon-ieee {
background-image: url(/img/other-brands/logo_ieee.svg); background-image: url(/img/other-brands/logo_ieee.svg);
} }
.login-btn-icon-google { .login-btn-icon-google {
background-image: url(/img/other-brands/logo_google.svg); background-image: url(/img/other-brands/logo_google.svg);
} }
.login-btn-icon-twitter { .login-btn-icon-twitter {
background-image: url(/img/other-brands/logo_twitter.svg); background-image: url(/img/other-brands/logo_twitter.svg);
} }
.login-btn-icon-orcid { .login-btn-icon-orcid {
background-image: url(/img/other-brands/logo_orcid.svg); background-image: url(/img/other-brands/logo_orcid.svg);
} }
.login-btn-icon-sharelatex { .login-btn-icon-sharelatex {
background-size: 22px; background-size: 22px;
} }
.login-register-header-heading { .login-register-header-heading {
margin: 0; margin: 0;
color: @text-color; color: @text-color;
} }
.registration-message-heading { .registration-message-heading {
color: @text-color; color: @text-color;
@ -155,4 +155,3 @@
.registration-message-details { .registration-message-details {
font-size: 90%; font-size: 90%;
} }

8
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

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

@ -1,13 +1,13 @@
.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,
h2 {
color: @gray-dark; color: @gray-dark;
} }
} }

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

@ -9,7 +9,7 @@
text-transform: capitalize; text-transform: capitalize;
} }
blockquote { blockquote {
footer{ footer {
/* accessibility fix */ /* accessibility fix */
color: @gray-med; color: @gray-med;
} }
@ -20,7 +20,9 @@
margin-top: -10px; margin-top: -10px;
text-shadow: 0 0 0; text-shadow: 0 0 0;
} }
.card .btn { white-space:normal; } .card .btn {
white-space: normal;
}
.card.features { .card.features {
margin-top: @line-height-computed; margin-top: @line-height-computed;
i { i {
@ -36,19 +38,22 @@
margin-top: -10px; margin-top: -10px;
text-shadow: 0 0 0; text-shadow: 0 0 0;
} }
.card .btn { white-space:normal; } .card .btn {
white-space: normal;
}
.card-group { .card-group {
.card-highlighted { .card-highlighted {
padding-top: @line-height-computed * 2; padding-top: @line-height-computed * 2;
padding-bottom: @line-height-computed * 2; padding-bottom: @line-height-computed * 2;
} }
} }
.card-first, .card-last { .card-first,
.card-last {
background: @plans-non-highlighted; background: @plans-non-highlighted;
} }
.card-highlighted { .card-highlighted {
border: @border-width-base solid @border-color-base; border: @border-width-base solid @border-color-base;
padding-top: 10px!important; padding-top: 10px !important;
.best-value { .best-value {
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -74,7 +79,7 @@
line-height: 1; line-height: 1;
span.small { span.small {
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
font-size: @font-size-base * .8; font-size: @font-size-base * 0.8;
} }
} }
.circle-lg { .circle-lg {
@ -90,17 +95,20 @@
} }
.faq { .faq {
p { p {
margin: 0 margin: 0;
} }
} }
.header-with-btn { .header-with-btn {
line-height: 1.6; line-height: 1.6;
} }
.plans-header{ .plans-header {
h1, h2, p { h1,
h2,
p {
text-shadow: 0 -1px 1px white; text-shadow: 0 -1px 1px white;
} }
h1, h2 { h1,
h2 {
color: @red; color: @red;
} }
p { p {
@ -134,7 +142,9 @@
} }
.paymentPageFeatures { .paymentPageFeatures {
h1, h2, h3 { h1,
h2,
h3 {
color: @gray-dark; color: @gray-dark;
} }
h3 { h3 {
@ -150,7 +160,6 @@
.small { .small {
font-size: 12px; font-size: 12px;
} }
} }
.plansPageStudentLink { .plansPageStudentLink {
@ -226,7 +235,8 @@
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
th, td { th,
td {
-moz-background-clip: padding; -moz-background-clip: padding;
-webkit-background-clip: padding; -webkit-background-clip: padding;
background-clip: padding-box; /* needed for firefox when there is bg color */ background-clip: padding-box; /* needed for firefox when there is bg color */
@ -250,11 +260,13 @@
padding: 18px; padding: 18px;
} }
th:first-child, td:first-child { th:first-child,
td:first-child {
border-left: 0; border-left: 0;
} }
th:last-child, td:last-child { th:last-child,
td:last-child {
border-right: 0; border-right: 0;
} }
@ -305,7 +317,8 @@
} }
/* highlighted column */ /* highlighted column */
td:nth-child(3), th:nth-child(3) { td:nth-child(3),
th:nth-child(3) {
background-color: white; background-color: white;
border-left: @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; border-right: @border-width-base solid @border-color-base;
@ -335,12 +348,12 @@
} }
} }
.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;
} }
} }
@ -367,7 +380,7 @@
margin-left: 5px; margin-left: 5px;
} }
.tooltip.in { .tooltip.in {
min-width: 200px min-width: 200px;
} }
/* Media Queries */ /* Media Queries */

15
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) {

2
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;
} }

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

@ -6,12 +6,12 @@
@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;
@ -23,34 +23,34 @@
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;
@ -58,18 +58,18 @@
@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;
@ -81,18 +81,18 @@
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;
@ -109,20 +109,20 @@
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;
@ -132,9 +132,9 @@
@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;
@ -148,15 +148,15 @@
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) {
@ -165,12 +165,12 @@
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 & {
@ -178,8 +178,8 @@
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 & {
@ -188,29 +188,29 @@
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;
@ -232,13 +232,13 @@
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;
@ -269,35 +269,35 @@
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;
@ -325,15 +325,15 @@
&::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;
@ -345,8 +345,8 @@
&::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;
@ -369,37 +369,37 @@
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;
@ -407,8 +407,8 @@
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;
@ -416,8 +416,8 @@
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) {
@ -427,29 +427,29 @@
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%;
@ -458,4 +458,4 @@
transform: translate(-50%, 100%); transform: translate(-50%, 100%);
opacity: 0; opacity: 0;
font-size: 0.5em; font-size: 0.5em;
} }

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

@ -21,20 +21,22 @@
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,
&:active,
&:focus {
color: @v2-dash-pane-toggle-color; 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');
} }

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

@ -5,13 +5,13 @@
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;
} }
} }
@ -78,14 +78,14 @@
} }
.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%;
} }
} }

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

@ -23,7 +23,7 @@
.popular-tags { .popular-tags {
.template-thumbnail { .template-thumbnail {
margin: 0 0 1em 0!important; margin: 0 0 1em 0 !important;
} }
} }
@ -49,7 +49,7 @@
.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;
@ -57,7 +57,7 @@
width: 100%; width: 100%;
h3 { h3 {
color:@link-color; color: @link-color;
margin: 10px 0px 10px 20px; margin: 10px 0px 10px 20px;
} }

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

@ -1,6 +1,7 @@
.template-page-header { .template-page-header {
padding-top: unit(@line-height-base,rem); padding-top: unit(@line-height-base, rem);
h1, h2 { h1,
h2 {
margin-top: 6px; margin-top: 6px;
margin-right: @line-height-base * 5; margin-right: @line-height-base * 5;
line-height: 1; line-height: 1;
@ -8,19 +9,18 @@
} }
.template-thumbnail { .template-thumbnail {
.thumbnail { .thumbnail {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
img { img {
width: 100%; width: 100%;
} }
} }
a { a {
padding:0px; padding: 0px;
h3 { h3 {
color:@link-color; color: @link-color;
margin: 10px 0px 10px 20px; margin: 10px 0px 10px 20px;
} }
} }
@ -29,20 +29,20 @@
background: lighten(@gray-lightest, 3%); background: lighten(@gray-lightest, 3%);
border-top: 1px solid #ddd; 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,
.social_buttons {
padding-top: 20px; 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 {
@ -54,7 +54,7 @@
.searchResult { .searchResult {
h1 { h1 {
color:@link-color; color: @link-color;
} }
img { img {
max-width: 100%; max-width: 100%;

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

@ -1,6 +1,6 @@
.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;
@ -9,15 +9,15 @@
.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;
} }
} }
} }

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

@ -5,6 +5,6 @@
padding: 1px 3px; padding: 1px 3px;
margin: 0 6px; margin: 0 6px;
&:before { &:before {
content: "V1"; content: 'V1';
} }
} }

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

@ -31,7 +31,8 @@
} }
table { table {
th, td { th,
td {
padding: (@line-height-computed / 4) (@line-height-computed / 2); padding: (@line-height-computed / 4) (@line-height-computed / 2);
border-bottom: 1px solid @gray-lighter; border-bottom: 1px solid @gray-lighter;
} }
@ -43,7 +44,8 @@
margin-bottom: @line-height-computed / 2; margin-bottom: @line-height-computed / 2;
} }
.table-no-borders { .table-no-borders {
th, td { th,
td {
border: 0px; border: 0px;
} }
} }
@ -85,9 +87,13 @@
} }
/*<![CDATA[*/ /*<![CDATA[*/
.source-latex {line-height: normal;} .source-latex {
.source-latex li, .source-latex pre { line-height: normal;
line-height: normal; border: 0px none white; }
.source-latex li,
.source-latex pre {
line-height: normal;
border: 0px none white;
} }
/** /**
* GeSHi Dynamically Generated Stylesheet * GeSHi Dynamically Generated Stylesheet
@ -98,29 +104,99 @@
* (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;
}
/*]]>*/ /*]]>*/
@ -137,14 +213,14 @@
} }
} }
&:hover, &:active, &:focus { &:hover,
&:active,
&:focus {
text-decoration: none; text-decoration: none;
.search-result-content { .search-result-content {
color: @gray-darker; color: @gray-darker;
} }
box-shadow: 0 2px 4px rgba(0,0,0,0.35); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
} }
} }
} }

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

@ -2,7 +2,6 @@
// Alerts // Alerts
// -------------------------------------------------- // --------------------------------------------------
// Base styles // Base styles
// ------------------------- // -------------------------

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%;
} }

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

@ -5,7 +5,9 @@
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,
h2,
h3 {
margin-top: 0; margin-top: 0;
} }
} }
@ -31,7 +33,7 @@
} }
.card-thin { .card-thin {
padding: @line-height-computed / 2 padding: @line-height-computed / 2;
} }
.card-group { .card-group {

28
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
@ -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)
} }
} }
} }
@ -171,7 +177,7 @@
// 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;
@ -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);
} }

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

@ -34,7 +34,7 @@
@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;
@ -51,7 +51,6 @@
@daterangepicker-border-color: #ccc; @daterangepicker-border-color: #ccc;
@daterangepicker-border-radius: 4px; @daterangepicker-border-radius: 4px;
// //
// Calendar // Calendar
@daterangepicker-calendar-margin: @daterangepicker-padding; @daterangepicker-calendar-margin: @daterangepicker-padding;
@ -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 {

20
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;
@ -13,7 +12,7 @@
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 @@
} }
} }
} }

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

@ -13,14 +13,13 @@ footer.site-footer {
margin: 0px; margin: 0px;
li { li {
display: inline-block; display: inline-block;
margin: 0 .5em; margin: 0 0.5em;
} }
i { i {
font-size: 1.2rem; font-size: 1.2rem;
} }
} }
li.lngOption { li.lngOption {
text-align: left; text-align: left;
display: list-item; display: list-item;

87
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();
@ -156,7 +153,6 @@ output {
} }
} }
// 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,

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;
} }
} }

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

@ -2,20 +2,20 @@
position: relative; position: relative;
height: @input-height-base; height: @input-height-base;
} }
.input-suggestions-main { .input-suggestions-main {
position: absolute; position: absolute;
top: 0; top: 0;
background-color: transparent; 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%);
} }

1
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;

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.

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;
}
} }

34
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
@ -85,7 +83,6 @@
} }
} }
.navbar-main { .navbar-main {
z-index: 1; z-index: 1;
.container-fluid > .navbar-collapse { .container-fluid > .navbar-collapse {
@ -134,7 +131,6 @@
} }
} }
// //
// 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 {
@ -202,13 +197,14 @@
display: inline-block; display: inline-block;
margin-top: 2px; margin-top: 2px;
color: @navbar-title-color; color: @navbar-title-color;
&:hover, &:active, &:focus { &:hover,
&:active,
&:focus {
color: @navbar-title-color-hover; color: @navbar-title-color-hover;
text-decoration: none; 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
@ -275,7 +270,6 @@
} }
> li > div.subdued { > li > div.subdued {
line-height: @line-height-computed; line-height: @line-height-computed;
} }
} }
} }
@ -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.
@ -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) {

10
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
// -------------------------------------------------- // --------------------------------------------------
@ -226,7 +222,6 @@
} }
} }
// Tabbable tabs // Tabbable tabs
// ------------------------- // -------------------------
@ -244,7 +239,6 @@
} }
} }
// Dropdowns // Dropdowns
// ------------------------- // -------------------------

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

@ -1,18 +1,18 @@
/* nvd3 version 1.8.4 (https://github.com/novus/nvd3) 2016-07-03 */ /* nvd3 version 1.8.4 (https://github.com/novus/nvd3) 2016-07-03 */
.nvd3 .nv-axis { .nvd3 .nv-axis {
pointer-events:none; pointer-events: none;
opacity: 1; opacity: 1;
} }
.nvd3 .nv-axis path { .nvd3 .nv-axis path {
fill: none; fill: none;
stroke: #000; stroke: #000;
stroke-opacity: .75; stroke-opacity: 0.75;
shape-rendering: crispEdges; shape-rendering: crispEdges;
} }
.nvd3 .nv-axis path.domain { .nvd3 .nv-axis path.domain {
stroke-opacity: .75; stroke-opacity: 0.75;
} }
.nvd3 .nv-axis.nv-x path.domain { .nvd3 .nv-axis.nv-x path.domain {
@ -27,7 +27,7 @@
.nvd3 .nv-axis .zero line, .nvd3 .nv-axis .zero line,
/*this selector may not be necessary*/ .nvd3 .nv-axis line.zero { /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
stroke-opacity: .75; stroke-opacity: 0.75;
} }
.nvd3 .nv-axis .nv-axisMaxMin text { .nvd3 .nv-axis .nv-axisMaxMin text {
@ -37,7 +37,7 @@
.nvd3 .x .nv-axis .nv-axisMaxMin text, .nvd3 .x .nv-axis .nv-axisMaxMin text,
.nvd3 .x2 .nv-axis .nv-axisMaxMin text, .nvd3 .x2 .nv-axis .nv-axisMaxMin text,
.nvd3 .x3 .nv-axis .nv-axisMaxMin text { .nvd3 .x3 .nv-axis .nv-axisMaxMin text {
text-anchor: middle text-anchor: middle;
} }
.nvd3 .nv-axis.nv-disabled { .nvd3 .nv-axis.nv-disabled {
@ -45,7 +45,7 @@
} }
.nvd3 .nv-bars rect { .nvd3 .nv-bars rect {
fill-opacity: .75; fill-opacity: 0.75;
transition: fill-opacity 250ms linear; transition: fill-opacity 250ms linear;
-moz-transition: fill-opacity 250ms linear; -moz-transition: fill-opacity 250ms linear;
@ -61,11 +61,11 @@
} }
.nvd3 .nv-bars text { .nvd3 .nv-bars text {
fill: rgba(0,0,0,0); fill: rgba(0, 0, 0, 0);
} }
.nvd3 .nv-bars .hover text { .nvd3 .nv-bars .hover text {
fill: rgba(0,0,0,1); fill: rgba(0, 0, 0, 1);
} }
.nvd3 .nv-multibar .nv-groups rect, .nvd3 .nv-multibar .nv-groups rect,
@ -88,8 +88,8 @@
.nvd3 .nv-discretebar .nv-groups text, .nvd3 .nv-discretebar .nv-groups text,
.nvd3 .nv-multibarHorizontal .nv-groups text { .nvd3 .nv-multibarHorizontal .nv-groups text {
font-weight: bold; font-weight: bold;
fill: rgba(0,0,0,1); fill: rgba(0, 0, 0, 1);
stroke: rgba(0,0,0,0); stroke: rgba(0, 0, 0, 0);
} }
/* boxplot CSS */ /* boxplot CSS */
@ -113,26 +113,55 @@
stroke-width: 2.5px; stroke-width: 2.5px;
} }
/* bullet */ /* bullet */
.nvd3.nv-bullet { font: 10px sans-serif; } .nvd3.nv-bullet {
.nvd3.nv-bullet .nv-measure { fill-opacity: .8; } font: 10px sans-serif;
.nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; } }
.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; } .nvd3.nv-bullet .nv-measure {
.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; } fill-opacity: 0.8;
.nvd3.nv-bullet .nv-markerLine { stroke: #000; stroke-width: 1.5px; } }
.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; } .nvd3.nv-bullet .nv-measure:hover {
.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; } fill-opacity: 1;
.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; } }
.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; } .nvd3.nv-bullet .nv-marker {
.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; } stroke: #000;
.nvd3.nv-bullet .nv-subtitle { fill: #999; } stroke-width: 2px;
}
.nvd3.nv-bullet .nv-markerTriangle {
stroke: #000;
fill: #fff;
stroke-width: 1.5px;
}
.nvd3.nv-bullet .nv-markerLine {
stroke: #000;
stroke-width: 1.5px;
}
.nvd3.nv-bullet .nv-tick line {
stroke: #666;
stroke-width: 0.5px;
}
.nvd3.nv-bullet .nv-range.nv-s0 {
fill: #eee;
}
.nvd3.nv-bullet .nv-range.nv-s1 {
fill: #ddd;
}
.nvd3.nv-bullet .nv-range.nv-s2 {
fill: #ccc;
}
.nvd3.nv-bullet .nv-title {
font-size: 14px;
font-weight: bold;
}
.nvd3.nv-bullet .nv-subtitle {
fill: #999;
}
.nvd3.nv-bullet .nv-range { .nvd3.nv-bullet .nv-range {
fill: #bababa; fill: #bababa;
fill-opacity: .4; fill-opacity: 0.4;
} }
.nvd3.nv-bullet .nv-range:hover { .nvd3.nv-bullet .nv-range:hover {
fill-opacity: .7; fill-opacity: 0.7;
} }
.nvd3.nv-candlestickBar .nv-ticks .nv-tick { .nvd3.nv-candlestickBar .nv-ticks .nv-tick {
@ -157,24 +186,22 @@
transition: stroke-width 250ms linear, stroke-opacity 250ms linear; transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear; -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear; -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
} }
.nvd3.nv-candlestickBar .nv-ticks line { .nvd3.nv-candlestickBar .nv-ticks line {
stroke: #333; stroke: #333;
} }
.nv-force-node { .nv-force-node {
stroke: #fff; stroke: #fff;
stroke-width: 1.5px; stroke-width: 1.5px;
} }
.nv-force-link { .nv-force-link {
stroke: #999; stroke: #999;
stroke-opacity: .6; stroke-opacity: 0.6;
} }
.nv-force-node text { .nv-force-node text {
stroke-width: 0px stroke-width: 0px;
} }
.nvd3 .nv-legend .nv-disabled rect { .nvd3 .nv-legend .nv-disabled rect {
@ -182,18 +209,18 @@
} }
.nvd3 .nv-check-box .nv-box { .nvd3 .nv-check-box .nv-box {
fill-opacity:0; fill-opacity: 0;
stroke-width:2; stroke-width: 2;
} }
.nvd3 .nv-check-box .nv-check { .nvd3 .nv-check-box .nv-check {
fill-opacity:0; fill-opacity: 0;
stroke-width:4; stroke-width: 4;
} }
.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check { .nvd3 .nv-series.nv-disabled .nv-check-box .nv-check {
fill-opacity:0; fill-opacity: 0;
stroke-opacity:0; stroke-opacity: 0;
} }
.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check { .nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check {
@ -202,7 +229,7 @@
/* line plus bar */ /* line plus bar */
.nvd3.nv-linePlusBar .nv-bar rect { .nvd3.nv-linePlusBar .nv-bar rect {
fill-opacity: .75; fill-opacity: 0.75;
} }
.nvd3.nv-linePlusBar .nv-bar rect:hover { .nvd3.nv-linePlusBar .nv-bar rect:hover {
@ -222,26 +249,23 @@
} }
.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point { .nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
fill-opacity: .5 !important; fill-opacity: 0.5 !important;
stroke-opacity: .5 !important; stroke-opacity: 0.5 !important;
} }
.with-transitions .nvd3 .nv-groups .nv-point { .with-transitions .nvd3 .nv-groups .nv-point {
transition: stroke-width 250ms linear, stroke-opacity 250ms linear; transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear; -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear; -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
} }
.nvd3.nv-scatter .nv-groups .nv-point.hover, .nvd3.nv-scatter .nv-groups .nv-point.hover,
.nvd3 .nv-groups .nv-point.hover { .nvd3 .nv-groups .nv-point.hover {
stroke-width: 7px; stroke-width: 7px;
fill-opacity: .95 !important; fill-opacity: 0.95 !important;
stroke-opacity: .95 !important; stroke-opacity: 0.95 !important;
} }
.nvd3 .nv-point-paths path { .nvd3 .nv-point-paths path {
stroke: #aaa; stroke: #aaa;
stroke-opacity: 0; stroke-opacity: 0;
@ -249,8 +273,6 @@
fill-opacity: 0; fill-opacity: 0;
} }
.nvd3 .nv-indexLine { .nvd3 .nv-indexLine {
cursor: ew-resize; cursor: ew-resize;
} }
@ -270,24 +292,24 @@ svg.nvd3-svg {
-moz-user-select: none; -moz-user-select: none;
user-select: none; user-select: none;
display: block; display: block;
width:100%; width: 100%;
height:100%; height: 100%;
} }
/******************** /********************
Box shadow and border radius styling Box shadow and border radius styling
*/ */
.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip { .nvtooltip.with-3d-shadow,
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); .with-3d-shadow .nvtooltip {
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
} }
.nvd3 text { .nvd3 text {
font: normal 12px Arial; font: normal 12px Arial;
} }
@ -306,13 +328,12 @@ svg.nvd3-svg {
font-weight: bold; font-weight: bold;
} }
/********** /**********
* Brush * Brush
*/ */
.nv-brush .extent { .nv-brush .extent {
fill-opacity: .125; fill-opacity: 0.125;
shape-rendering: crispEdges; shape-rendering: crispEdges;
} }
@ -321,7 +342,6 @@ svg.nvd3-svg {
stroke: #666; stroke: #666;
} }
/********** /**********
* Legend * Legend
*/ */
@ -341,9 +361,9 @@ svg.nvd3-svg {
.nvd3 .nv-brushBackground rect { .nvd3 .nv-brushBackground rect {
stroke: #000; stroke: #000;
stroke-width: .4; stroke-width: 0.4;
fill: #fff; fill: #fff;
fill-opacity: .7; fill-opacity: 0.7;
} }
/********** /**********
@ -373,23 +393,21 @@ svg.nvd3-svg {
stroke: #d62728; stroke: #d62728;
} }
.nvd3 .background path { .nvd3 .background path {
fill: none; fill: none;
stroke: #EEE; stroke: #eee;
stroke-opacity: .4; stroke-opacity: 0.4;
shape-rendering: crispEdges; shape-rendering: crispEdges;
} }
.nvd3 .foreground path { .nvd3 .foreground path {
fill: none; fill: none;
stroke-opacity: .7; stroke-opacity: 0.7;
} }
.nvd3 .nv-parallelCoordinates-brush .extent .nvd3 .nv-parallelCoordinates-brush .extent {
{
fill: #fff; fill: #fff;
fill-opacity: .6; fill-opacity: 0.6;
stroke: gray; stroke: gray;
shape-rendering: crispEdges; shape-rendering: crispEdges;
} }
@ -399,7 +417,6 @@ svg.nvd3-svg {
stroke-width: 3px; stroke-width: 3px;
} }
.nvd3 .missingValuesline line { .nvd3 .missingValuesline line {
fill: none; fill: none;
stroke: black; stroke: black;
@ -409,10 +426,12 @@ svg.nvd3-svg {
} }
.nvd3.nv-pie path { .nvd3.nv-pie path {
stroke-opacity: 0; stroke-opacity: 0;
transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear; transition: fill-opacity 250ms linear, stroke-width 250ms linear,
-moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear; stroke-opacity 250ms linear;
-webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear; -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear,
stroke-opacity 250ms linear;
-webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear,
stroke-opacity 250ms linear;
} }
.nvd3.nv-pie .nv-pie-title { .nvd3.nv-pie .nv-pie-title {
@ -432,7 +451,7 @@ svg.nvd3-svg {
} }
.nvd3.nv-pie path { .nvd3.nv-pie path {
fill-opacity: .7; fill-opacity: 0.7;
} }
.nvd3.nv-pie .hover path { .nvd3.nv-pie .hover path {
fill-opacity: 1; fill-opacity: 1;
@ -448,7 +467,7 @@ svg.nvd3-svg {
/* scatter */ /* scatter */
.nvd3 .nv-groups .nv-point.hover { .nvd3 .nv-groups .nv-point.hover {
stroke-width: 20px; stroke-width: 20px;
stroke-opacity: .5; stroke-opacity: 0.5;
} }
.nvd3 .nv-scatter .nv-point.hover { .nvd3 .nv-scatter .nv-point.hover {
@ -458,7 +477,8 @@ svg.nvd3-svg {
pointer-events: none; pointer-events: none;
} }
.nv-distx, .nv-disty { .nv-distx,
.nv-disty {
pointer-events: none; pointer-events: none;
} }
@ -489,7 +509,7 @@ svg.nvd3-svg {
.nvd3.nv-sparklineplus .nv-xValue, .nvd3.nv-sparklineplus .nv-xValue,
.nvd3.nv-sparklineplus .nv-yValue { .nvd3.nv-sparklineplus .nv-yValue {
stroke-width: 0; stroke-width: 0;
font-size: .9em; font-size: 0.9em;
font-weight: normal; font-weight: normal;
} }
@ -513,7 +533,7 @@ svg.nvd3-svg {
} }
/* stacked area */ /* stacked area */
.nvd3.nv-stackedarea path.nv-area { .nvd3.nv-stackedarea path.nv-area {
fill-opacity: .7; fill-opacity: 0.7;
stroke-opacity: 0; stroke-opacity: 0;
transition: fill-opacity 250ms linear, stroke-opacity 250ms linear; transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear; -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
@ -521,22 +541,20 @@ svg.nvd3-svg {
} }
.nvd3.nv-stackedarea path.nv-area.hover { .nvd3.nv-stackedarea path.nv-area.hover {
fill-opacity: .9; fill-opacity: 0.9;
} }
.nvd3.nv-stackedarea .nv-groups .nv-point { .nvd3.nv-stackedarea .nv-groups .nv-point {
stroke-opacity: 0; stroke-opacity: 0;
fill-opacity: 0; fill-opacity: 0;
} }
.nvtooltip { .nvtooltip {
position: absolute; position: absolute;
background-color: rgba(255,255,255,1.0); background-color: rgba(255, 255, 255, 1);
color: rgba(0,0,0,1.0); color: rgba(0, 0, 0, 1);
padding: 1px; padding: 1px;
border: 1px solid rgba(0,0,0,.2); border: 1px solid rgba(0, 0, 0, 0.2);
z-index: 10000; z-index: 10000;
display: block; display: block;
@ -556,15 +574,16 @@ svg.nvd3-svg {
} }
.nvtooltip { .nvtooltip {
background: rgba(255,255,255, 0.8); background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0,0,0,0.5); border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 4px; border-radius: 4px;
} }
/*Give tooltips that old fade in transition by /*Give tooltips that old fade in transition by
putting a "with-transitions" class on the container div. putting a "with-transitions" class on the container div.
*/ */
.nvtooltip.with-transitions, .with-transitions .nvtooltip { .nvtooltip.with-transitions,
.with-transitions .nvtooltip {
transition: opacity 50ms linear; transition: opacity 50ms linear;
-moz-transition: opacity 50ms linear; -moz-transition: opacity 50ms linear;
-webkit-transition: opacity 50ms linear; -webkit-transition: opacity 50ms linear;
@ -584,8 +603,8 @@ svg.nvd3-svg {
padding: 4px 14px; padding: 4px 14px;
line-height: 18px; line-height: 18px;
font-weight: normal; font-weight: normal;
background-color: rgba(247,247,247,0.75); background-color: rgba(247, 247, 247, 0.75);
color: rgba(0,0,0,1.0); color: rgba(0, 0, 0, 1);
text-align: center; text-align: center;
border-bottom: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;
@ -608,10 +627,9 @@ svg.nvd3-svg {
.nvtooltip table { .nvtooltip table {
margin: 6px; margin: 6px;
border-spacing:0; border-spacing: 0;
} }
.nvtooltip table td { .nvtooltip table td {
padding: 2px 9px 2px 0; padding: 2px 9px 2px 0;
vertical-align: middle; vertical-align: middle;
@ -662,12 +680,11 @@ svg.nvd3-svg {
display: none; display: none;
} }
/**** /****
Interactive Layer Interactive Layer
*/ */
.nvd3 .nv-interactiveGuideLine { .nvd3 .nv-interactiveGuideLine {
pointer-events:none; pointer-events: none;
} }
.nvd3 line.nv-guideline { .nvd3 line.nv-guideline {
stroke: #ccc; stroke: #ccc;

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;
} }
} }

18
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;

203
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,21 +16,25 @@
.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%);
@ -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 {

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

@ -34,7 +34,8 @@
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),
0 0 8px fade(@input-border-focus, 60%);
padding-top: @input-suggestion-v-offset; padding-top: @input-suggestion-v-offset;
} }
} }

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);
} }
} }

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

@ -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.

244
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,8 +95,6 @@
.hide-text(); .hide-text();
} }
// CSS3 PROPERTIES // CSS3 PROPERTIES
// -------------------------------------------------- // --------------------------------------------------
@ -233,7 +236,7 @@
// 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;
@ -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,8 +522,11 @@
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;
} }
@ -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 {
@ -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
// ----------- // -----------
@ -745,7 +838,6 @@
} }
} }
// 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;
@ -774,7 +866,6 @@
} }
} }
// 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;
@ -803,7 +894,6 @@
} }
} }
// 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;
@ -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,15 +929,18 @@
.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
@ -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;
} }
@ -933,10 +1028,13 @@
// 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}');
} }
} }

14
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;
} }

1
services/web/frontend/stylesheets/core/ol-light-variables.less
View file

@ -116,7 +116,6 @@
@formatting-btn-border : @ol-blue-gray-1; @formatting-btn-border : @ol-blue-gray-1;
@formatting-menu-bg : transparent; @formatting-menu-bg : transparent;
// Chat // Chat
@chat-bg : #FFF; @chat-bg : #FFF;
@chat-message-color : #FFF; @chat-message-color : #FFF;

12
services/web/frontend/stylesheets/core/print.less
View file

@ -4,7 +4,6 @@
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css // Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
@media print { @media print {
* { * {
text-shadow: none !important; text-shadow: none !important;
color: #000 !important; // Black prints faster: h5bp.com/s color: #000 !important; // Black prints faster: h5bp.com/s
@ -18,17 +17,17 @@
} }
a[href]:after { a[href]:after {
content: " (" attr(href) ")"; content: ' (' attr(href) ')';
} }
abbr[title]:after { abbr[title]:after {
content: " (" attr(title) ")"; content: ' (' attr(title) ')';
} }
// Don't show links for images, or javascript/internal links // Don't show links for images, or javascript/internal links
a[href^="javascript:"]:after, a[href^='javascript:']:after,
a[href^="#"]:after { a[href^='#']:after {
content: ""; content: '';
} }
pre, pre,
@ -97,5 +96,4 @@
border: 1px solid #ddd !important; border: 1px solid #ddd !important;
} }
} }
} }

3
services/web/frontend/stylesheets/core/responsive-utilities.less
View file

@ -2,7 +2,6 @@
// Responsive: Utility classes // Responsive: Utility classes
// -------------------------------------------------- // --------------------------------------------------
// IE10 in Windows (Phone) 8 // IE10 in Windows (Phone) 8
// //
// Support for responsive views via media queries is kind of borked in IE10, for // Support for responsive views via media queries is kind of borked in IE10, for
@ -21,7 +20,6 @@
width: device-width; width: device-width;
} }
// Visibility utilities // Visibility utilities
.visible-xs, .visible-xs,
.visible-sm, .visible-sm,
@ -72,7 +70,6 @@
} }
} }
// Print utilities // Print utilities
// //
// Media queries are placed on the inside to be mixin-friendly. // Media queries are placed on the inside to be mixin-friendly.

19
services/web/frontend/stylesheets/core/scaffolding.less
View file

@ -2,25 +2,24 @@
// Scaffolding // Scaffolding
// -------------------------------------------------- // --------------------------------------------------
// Reset the box-sizing // Reset the box-sizing
// //
// Heads up! This reset may cause conflicts with some third-party widgets. // Heads up! This reset may cause conflicts with some third-party widgets.
// For recommendations on resolving such conflicts, see // For recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing // http://getbootstrap.com/getting-started/#third-box-sizing
* { * {
.box-sizing(border-box);} .box-sizing(border-box);
}
*:before, *:before,
*:after { *:after {
.box-sizing(border-box); .box-sizing(border-box);
} }
// Body reset // Body reset
html { html {
//font-size: 62.5%; //font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
height: 100%; height: 100%;
} }
@ -34,7 +33,7 @@ body {
position: relative; position: relative;
padding-bottom: @footer-height; padding-bottom: @footer-height;
& > .content { & > .content {
min-height: calc(~"100vh -" @footer-height); min-height: calc(~'100vh -' @footer-height);
padding-top: @header-height + @content-margin-vertical; padding-top: @header-height + @content-margin-vertical;
} }
} }
@ -49,7 +48,6 @@ textarea {
line-height: inherit; line-height: inherit;
} }
// Links // Links
a { a {
@ -67,7 +65,6 @@ a {
} }
} }
// Figures // Figures
// //
// We reset this here because previously Normalize had no `figure` margins. This // We reset this here because previously Normalize had no `figure` margins. This
@ -77,7 +74,6 @@ figure {
margin: 0; margin: 0;
} }
// Images // Images
img { img {
@ -103,7 +99,7 @@ img {
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);
// Keep them at most 100% wide // Keep them at most 100% wide
.img-responsive(inline-block); .img-responsive(inline-block);
@ -114,7 +110,6 @@ img {
border-radius: 50%; // set radius in percents border-radius: 50%; // set radius in percents
} }
// Horizontal rules // Horizontal rules
hr { hr {
@ -128,7 +123,6 @@ hr {
} }
} }
// Only display content to screen readers // Only display content to screen readers
// //
// See: http://a11yproject.com/posts/how-to-hide-content/ // See: http://a11yproject.com/posts/how-to-hide-content/
@ -140,7 +134,7 @@ hr {
margin: -1px; margin: -1px;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
clip: rect(0,0,0,0); clip: rect(0, 0, 0, 0);
border: 0; border: 0;
} }
@ -164,4 +158,3 @@ hr {
.row-spaced-large { .row-spaced-large {
margin-top: @line-height-computed * 2; margin-top: @line-height-computed * 2;
} }

4
services/web/frontend/stylesheets/core/utilities.less
View file

@ -2,7 +2,6 @@
// Utility classes // Utility classes
// -------------------------------------------------- // --------------------------------------------------
// Floats // Floats
// ------------------------- // -------------------------
@ -19,7 +18,6 @@
float: left !important; float: left !important;
} }
// Toggling content // Toggling content
// ------------------------- // -------------------------
@ -37,7 +35,6 @@
.text-hide(); .text-hide();
} }
// Hide from screenreaders and browsers // Hide from screenreaders and browsers
// //
// Credit: HTML5 Boilerplate // Credit: HTML5 Boilerplate
@ -47,7 +44,6 @@
visibility: hidden !important; visibility: hidden !important;
} }
// For Affix plugin // For Affix plugin
// ------------------------- // -------------------------

9
services/web/frontend/stylesheets/core/variables.less
View file

@ -2,7 +2,6 @@
// //
//## Gray and brand colors for use across Bootstrap. //## Gray and brand colors for use across Bootstrap.
@gray-darker: #252525; @gray-darker: #252525;
@gray-dark: #505050; @gray-dark: #505050;
@gray: #7a7a7a; @gray: #7a7a7a;
@ -11,10 +10,10 @@
@gray-lightest: #f0f0f0; @gray-lightest: #f0f0f0;
@blue: #405ebf; @blue: #405ebf;
@blueDark: #040D2D; @blueDark: #040d2d;
@green: #46a546; @green: #46a546;
@red: #a93529; @red: #a93529;
@yellow: #A1A729; @yellow: #a1a729;
@orange: #f89406; @orange: #f89406;
@pink: #c3325f; @pink: #c3325f;
@purple: #7a43b6; @purple: #7a43b6;
@ -24,7 +23,7 @@
@brand-success: @green; @brand-success: @green;
@brand-info: @blue; @brand-info: @blue;
@brand-warning: @orange; @brand-warning: @orange;
@brand-danger: #E03A06; @brand-danger: #e03a06;
@navbar-brand-image-url: url(/img/brand/logo-horizontal.svg); @navbar-brand-image-url: url(/img/brand/logo-horizontal.svg);
@ -32,4 +31,4 @@
@editor-loading-logo-background-url: url(/img/brand/lion-grey.svg); @editor-loading-logo-background-url: url(/img/brand/lion-grey.svg);
@editor-loading-logo-foreground-url: url(/img/brand/lion.svg); @editor-loading-logo-foreground-url: url(/img/brand/lion.svg);
@import "_common-variables.less"; @import '_common-variables.less';

2
services/web/frontend/stylesheets/ieee-style.less
View file

@ -31,7 +31,7 @@ body > .portal-ieee {
padding: @padding-md @ieee-wedge; padding: @padding-md @ieee-wedge;
position: relative; position: relative;
&:after { &:after {
content: ""; content: '';
display: block; display: block;
position: absolute; position: absolute;
border-style: solid; border-style: solid;

4
services/web/frontend/stylesheets/light-style.less
View file

@ -1,5 +1,5 @@
@import "style.less"; @import 'style.less';
@import "core/ol-light-variables.less"; @import 'core/ol-light-variables.less';
@is-overleaf : true; @is-overleaf : true;
@is-overleaf-light : true; @is-overleaf-light : true;

7
services/web/frontend/stylesheets/sl-style.less
View file

@ -1,11 +1,12 @@
// prettier-ignore
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700); @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
// prettier-ignore
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i); @import url(https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i);
@is-overleaf : false; @is-overleaf : false;
@is-overleaf-light : false; @is-overleaf-light : false;
@show-rich-text : false; @show-rich-text : false;
// Core variables and mixins // Core variables and mixins
@import "core/variables.less"; @import 'core/variables.less';
@import "_style_includes.less"; @import '_style_includes.less';

34
services/web/frontend/stylesheets/style.less
View file

@ -1,4 +1,6 @@
// prettier-ignore
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin-ext); @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin-ext);
// prettier-ignore
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i); @import url(https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i);
@is-overleaf : true; @is-overleaf : true;
@ -6,21 +8,21 @@
@show-rich-text : true; @show-rich-text : true;
// Core variables and mixins // Core variables and mixins
@import "core/ol-variables.less"; @import 'core/ol-variables.less';
@import "app/ol-style-guide.less"; @import 'app/ol-style-guide.less';
@import "_style_includes.less"; @import '_style_includes.less';
@import "_ol_style_includes.less"; @import '_ol_style_includes.less';
@import "components/embed-responsive.less"; @import 'components/embed-responsive.less';
@import "components/icons.less"; @import 'components/icons.less';
@import "components/images.less"; @import 'components/images.less';
@import "components/navs-ol.less"; @import 'components/navs-ol.less';
@import "components/pagination.less"; @import 'components/pagination.less';
@import "components/tabs.less"; @import 'components/tabs.less';
// Pages // Pages
@import "app/about.less"; @import 'app/about.less';
@import "app/blog-posts.less"; @import 'app/blog-posts.less';
@import "app/cms-page.less"; @import 'app/cms-page.less';
@import "app/content_page.less"; @import 'app/content_page.less';
@import "app/plans-ol.less"; @import 'app/plans-ol.less';
@import "app/portals.less"; @import 'app/portals.less';

4
services/web/package.json
View file

@ -23,8 +23,8 @@
"webpack": "webpack-dev-server --config webpack.config.dev.js", "webpack": "webpack-dev-server --config webpack.config.dev.js",
"webpack:production": "webpack --config webpack.config.prod.js && cp -R public/js public/minjs", "webpack:production": "webpack --config webpack.config.prod.js && cp -R public/js public/minjs",
"lint": "eslint -f unix .", "lint": "eslint -f unix .",
"format": "prettier-eslint '**/*.js' --list-different", "format": "prettier-eslint '**/*.{js,less}' --list-different",
"format:fix": "prettier-eslint '**/*.js' --write", "format:fix": "prettier-eslint '**/*.{js,less}' --write",
"migrations": "east" "migrations": "east"
}, },
"dependencies": { "dependencies": {