sxlxc/overleaf-server-arm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Yu Cong
2025-04-24 13:11:28 +08:00
commit ff9c54d5e4
5960 changed files with 834111 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
services/web/frontend/stylesheets/app/about-page.less Normal file
View File

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

33
services/web/frontend/stylesheets/app/about.less Normal file
View File

@@ -0,0 +1,33 @@
/*
v2
About Page
*/
.team {
list-style: none;
padding: 0;
.team-member {
display: block;
float: left;
margin-bottom: @margin-lg;
width: 100%;
h3 {
margin: 0;
}
.team-pic {
float: left;
margin-right: @margin-sm;
}
.team-info {
overflow: hidden;
}
.team-connect {
list-style: none;
margin-top: @margin-sm;
padding: 0;
li {
display: inline-block;
margin: 0 @margin-md 0 0;
}
}
}
}

16
services/web/frontend/stylesheets/app/add-secondary-email-prompt.less Normal file
View File

@@ -0,0 +1,16 @@
.add-secondary-email {
display: flex;
flex-direction: column;
gap: 12px;
.add-secondary-email-error {
display: flex;
gap: 6px;
padding: 4px;
}
.add-secondary-email-learn-more {
margin-top: 12px;
margin-bottom: 0;
}
}

156
services/web/frontend/stylesheets/app/admin-hub.less Normal file
View File

@@ -0,0 +1,156 @@
.hub-header {
h2 {
display: inline-block;
}
a {
color: @ol-dark-green;
}
i {
font-size: 30px;
}
.dropdown {
margin-right: 10px;
}
}
.admin-item {
position: relative;
margin-bottom: 60px;
.section-title {
text-transform: capitalize;
}
.alert-danger {
color: @ol-red;
}
}
.hidden-chart-section {
display: none;
}
.hub-circle {
display: inline-block;
background-color: @accent-color-secondary;
border-radius: 50%;
width: 160px;
height: 160px;
text-align: center;
//padding-top: 160px / 6.4;
img {
height: 160px - 160px / 3.2;
}
padding-top: 50px;
color: white;
}
.hub-circle-number {
display: block;
font-size: 36px;
font-weight: 900;
line-height: 1;
}
.hub-big-number {
float: left;
font-size: 32px;
font-weight: 900;
line-height: 40px;
color: @accent-color-secondary;
}
.hub-big-number,
.hub-number-label {
display: block;
}
.hub-metric-link {
position: absolute;
top: 9px;
right: 0;
a {
color: @accent-color-secondary;
}
i {
margin-right: 5px;
}
}
.custom-donut-container {
svg {
max-width: 700px;
margin: auto;
}
.chart-center-text {
font-family: @font-family-sans-serif;
font-size: 40px;
font-weight: bold;
fill: @accent-color-secondary;
text-anchor: middle;
}
.nv-legend-text {
font-family: @font-family-sans-serif;
font-size: 14px;
}
}
.chart-no-center-text {
.chart-center-text {
display: none;
}
}
.superscript {
font-size: @font-size-large;
}
.admin-page {
summary {
// firefox does not show markers for block items
display: list-item;
}
}
.material-switch {
input[type='checkbox'] {
display: none;
&:checked + label::before {
background: inherit;
opacity: 0.5;
}
&:checked + label::after {
background: inherit;
left: 20px;
}
&:disabled + label {
opacity: 0.5;
cursor: not-allowed;
}
}
label {
cursor: pointer;
height: 0;
position: relative;
width: 40px;
&:before {
background: rgb(0, 0, 0);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -2px;
position: absolute;
opacity: 0.3;
transition: all 0.2s ease-in-out;
width: 40px;
}
&:after {
background: rgb(255, 255, 255);
border-radius: 16px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -2px;
position: absolute;
top: -4px;
transition: all 0.2s ease-in-out;
width: 24px;
}
}
}

220
services/web/frontend/stylesheets/app/base.less Normal file
View File

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

5
services/web/frontend/stylesheets/app/beta-program.less Normal file
View File

@@ -0,0 +1,5 @@
.beta-opt-in {
.form-group {
margin-top: 15px;
}
}

60
services/web/frontend/stylesheets/app/blog-posts.less Normal file
View File

@@ -0,0 +1,60 @@
/*
v2
Blog Pages
*/
.blog {
img {
max-width: 100%;
}
.blog-list {
list-style: none;
margin: 0;
padding: 0;
.blog-post {
margin: 0 0 @margin-lg 0;
}
.card-header {
margin-bottom: @margin-sm;
padding: 0;
}
p {
margin-top: 12.5px;
}
}
.tags {
margin-top: @margin-md;
.tags-list {
list-style: none;
padding: 0;
}
li {
display: inline-block;
margin: 0;
padding: 0 @padding-sm @padding-sm 0;
}
a {
font-size: small;
}
}
pre {
border: 1px solid @ol-blue-gray-2;
border-radius: @border-radius-base;
padding: @padding-sm;
}
.figure {
background-color: #ffffff;
border: 1px solid @ol-blue-gray-2;
display: inline-block;
margin: 0 auto @margin-sm 0;
max-width: 100%;
padding: @padding-sm;
.figure-caption {
padding-top: @padding-sm;
font-size: small;
}
}
}

59
services/web/frontend/stylesheets/app/blog.less Normal file
View File

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

125
services/web/frontend/stylesheets/app/bonus.less Normal file
View File

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

59
services/web/frontend/stylesheets/app/change-plan-modal.less Normal file
View File

@@ -0,0 +1,59 @@
#change-plan {
.modal-dialog {
&:extend(.modal-lg);
}
table {
@media only screen and (min-width: @screen-md-min) {
th:last-child,
td:last-child {
width: 1%; // will expand to fit the content
text-align: center;
}
}
@media only screen and (max-width: @screen-sm-max) {
display: block;
thead {
display: none;
}
tbody,
td,
tr {
display: inline-block;
padding-top: 0;
padding-bottom: 0;
text-align: center;
width: 100%;
}
td:first-child {
padding-top: @padding-md;
}
td:last-child {
padding-top: @padding-sm;
padding-bottom: @padding-md;
}
tr:first-child {
td:first-child {
padding-top: @padding-sm;
}
}
tr {
border-bottom: 1px solid @table-border-color;
td,
th {
border: 0 !important;
}
}
tr:last-child {
border-bottom: 0;
}
}
}
}

657
services/web/frontend/stylesheets/app/cms-page.less Normal file
View File

@@ -0,0 +1,657 @@
/*
v2
CMS Generated Pages,
including About and Blog
*/
.cms-page {
&.website-redesign {
h1 {
font-size: 2rem; // 32px
line-height: 1.333;
}
h2 {
font-size: 1.5rem; // 24px
}
.sales-contact-form-left-column {
@media (min-width: @screen-xs) {
.names-container {
display: flex;
gap: 21px;
}
}
.checkbox-label {
font-size: 16px;
font-weight: 400;
}
}
/* Buttons */
// correct color property set on <a> above:
.reset-btns;
.alert {
.alert;
}
.alert-info {
.btn-info {
.btn-alert-info;
}
}
.p-no-text-nodes:has(.btn) {
margin-top: var(--spacing-09);
@media (max-width: @screen-xs-max) {
.btn {
width: 100%;
margin-left: 0;
margin-top: var(--spacing-05);
}
.btn:first-child {
margin-top: 0;
}
}
}
.btn + .btn {
margin-left: var(--spacing-06);
}
blockquote.quote-picture-bottom {
padding: (@line-height-computed / 2) @line-height-computed;
.quote-picture-and-person {
font-size: 18px;
}
.quote-by-position {
font-weight: 400;
}
}
.optional-text {
font-size: 14px;
}
}
.section-row {
margin: 0 auto;
/* match .col-sm-12 */
/* @grid-gutter-width is used for margins */
max-width: (@screen-sm) - @grid-gutter-width!important;
@media (min-width: @screen-md-min) {
max-width: (@screen-md) - @grid-gutter-width!important;
}
@media (min-width: @screen-lg-min) {
max-width: (@screen-lg) - @grid-gutter-width!important;
}
}
padding-bottom: 0;
img {
height: auto;
max-width: 100%;
}
.btn-description {
margin-right: @margin-sm;
}
/*
Tabs
*/
.tab-content {
padding-left: 0;
padding-right: 0;
width: 100%;
}
/*
When on preview mode
*/
.cms-preview {
background-color: @blue;
color: white;
font-weight: bold;
height: @navbar-padding-vertical;
left: 0;
line-height: @navbar-padding-vertical;
opacity: 0.8;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
&:after {
content: 'Preview';
width: 100%;
top: 0;
left: 0;
}
}
.tab-pane {
.row:first-child {
margin-top: 0;
}
}
/*
quotes
*/
blockquote:not(.quote-large-text-centered):not(.quote-left-green-border) {
margin: 0;
position: relative;
/*
type.less sets <p> inline, so that quotation mark is inline
but sometimes we have multiple <p>,
so hide quotation mark from type.less and add one here
*/
&:before {
/* hide quotation from type.less */
display: none;
}
p {
display: block;
}
p:first-child {
/* below copied from type.less */
&:before {
content: open-quote;
font-size: @blockquote-font-size * 3;
color: @blockquote-border-color;
margin-right: 0.25em;
vertical-align: -0.4em;
line-height: 0.1em;
}
}
}
.quote-full-width {
img {
margin-right: @margin-sm;
margin-bottom: @margin-sm;
}
}
.quote-picture-bottom {
border: none;
color: @content-primary;
.h1 {
margin: 0 0 48px 0;
}
p:first-child {
&:before {
color: inherit;
font-size: inherit;
margin-right: 0;
vertical-align: 0;
line-height: inherit;
position: absolute;
top: (@line-height-computed / 2); // match quote padding
left: 3px;
}
&:after {
content: close-quote;
}
}
img {
height: 64px;
width: 64px;
margin-right: 16px;
}
.quote-by-position {
color: @content-secondary;
}
.quote-picture-and-person {
display: flex;
}
}
/*
Tables
*/
.table-styled {
overflow: hidden;
overflow-x: auto;
table {
background: white;
max-width: none;
th,
td {
border: 1px solid @gray-lighter;
padding: @padding-sm;
text-align: center;
word-break: normal;
}
}
}
.table-styled,
.features-table {
.fa-check-square,
.fa-check {
color: @ol-green;
}
}
.features-table {
max-width: none;
th,
td {
border: 1px solid @gray-lighter;
hyphens: auto;
padding: @padding-sm;
text-align: center;
}
th,
td {
width: 20%;
}
.btn {
max-width: 100%;
white-space: pre-wrap;
word-wrap: break-word;
}
&.left-align-first-col {
td,
th {
text-align: left;
}
td + td,
th + th {
text-align: center;
}
}
.hidden-row-above-xs {
display: none;
}
@media screen and (max-width: @screen-xs-max) {
tbody,
thead {
display: block;
}
tr {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
td,
th {
display: block;
width: 25%;
}
tr:first-child {
th {
width: 50%;
}
th:first-child {
width: 100%;
}
}
td:first-child {
text-align: center;
width: 100%;
}
.hidden-row-xs {
display: none;
}
.hidden-row-above-xs {
display: flex;
}
.table-header {
text-align: center;
}
}
}
/*
universities page
*/
#universities-container {
padding: @padding-md;
width: 100%;
.row {
border-bottom: 1px solid @gray-lightest;
div {
padding: @padding-md;
vertical-align: middle;
}
}
.row:first-child {
// parent container contains padding
div {
padding-top: 0;
}
}
.row:last-child {
border: 0;
// parent container contains padding
div {
border: 0;
padding-bottom: 0;
}
}
p {
margin: 0 auto;
width: 100%;
}
// Logos
.uni-logo {
margin: 0 auto;
max-height: 55px;
min-width: 55px;
}
.university-claim-btn {
text-align: center;
}
@media only screen and (min-width: @screen-xs-min) {
display: table;
table-layout: fixed;
.row {
display: table-row;
div {
border-bottom: 1px solid @gray-lightest;
display: table-cell;
float: none;
}
}
}
}
/*
videos
*/
video {
height: auto;
max-width: 100%;
}
}
.icon-with-content {
display: flex;
h2,
h3,
h4 {
margin-top: 15px;
}
.icon-container {
background-color: @green-10;
padding: 7.5px;
height: 56px;
width: 56px;
border-radius: 50%;
margin-right: 24px;
.icon-inner-container {
align-items: center;
border: @green-30 3.5px solid;
border-radius: 50%;
display: flex;
justify-content: center;
height: 42px;
width: 42px;
}
i {
color: @green;
font-size: 21px;
}
}
}
.svg-arrow-icon {
position: relative;
left: 4px;
bottom: 1px;
}
// `Layout | Grid` display options
.row-equal-column-heights {
@media (min-width: @screen-sm-min) {
display: flex;
flex-flow: row wrap;
div[class*='col-'] {
display: flex;
flex-direction: column;
.card,
.no-card {
height: 100%;
}
}
}
}
.vertically-center-col {
// remove margin to better vertically align
// some elements need to be nested within a container, and others are directly within .no-card/.card
.card:first-child,
.no-card:first-child {
.cms-element-container {
> *:first-child {
margin-top: 0;
}
}
> *:first-child:not(.cms-element-container) {
margin-top: 0;
}
}
.card:last-child,
.no-card:last-child {
.cms-element-container {
> *:last-child {
margin-bottom: 0;
}
}
> *:last-child:not(.cms-element-container) {
margin-bottom: 0;
}
}
@media (min-width: @screen-sm-min) {
display: flex;
div[class*='col-'] {
align-self: center;
}
}
}
.reverse-col-order-mobile {
@media (max-width: @screen-sm-min) {
display: flex;
flex-flow: column;
flex-direction: column-reverse;
}
}
.row-within-card {
.no-card {
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}
}
.contact-form-error-container {
padding-bottom: calc(@line-height-computed / 2);
}
.row-top-padding-sm {
padding-top: @padding-sm;
}
.row-top-padding-md {
padding-top: @padding-md;
}
.row-top-padding-lg {
padding-top: @padding-lg;
}
.row-top-padding-xl {
padding-top: @padding-xl;
}
.row-top-padding-xxl {
padding-top: @padding-xxl;
}
.row-bottom-padding-sm {
padding-bottom: @padding-sm;
}
.row-bottom-padding-md {
padding-bottom: @padding-md;
}
.row-bottom-padding-lg {
padding-bottom: @padding-lg;
}
.row-bottom-padding-xl {
padding-bottom: @padding-xl;
}
.row-bottom-padding-xxl {
padding-bottom: @padding-xxl;
}
@media (min-width: @screen-sm-min) {
.desktop-left-margin-sm {
margin-left: @margin-sm;
}
.desktop-left-margin-md {
margin-left: @margin-md;
}
.desktop-left-margin-lg {
margin-left: @margin-lg;
}
.desktop-left-margin-xl {
margin-left: @margin-xl;
}
.desktop-left-margin-xxl {
margin-left: @margin-xxl;
}
.desktop-right-margin-sm {
margin-right: @margin-sm;
}
.desktop-right-margin-md {
margin-right: @margin-md;
}
.desktop-right-margin-lg {
margin-right: @margin-lg;
}
.desktop-right-margin-xl {
margin-right: @margin-xl;
}
.desktop-right-margin-xxl {
margin-right: @margin-xxl;
}
}
.top-margin-sm {
margin-top: @margin-sm;
}
.top-margin-md {
margin-top: @margin-md;
}
.top-margin-lg {
margin-top: @margin-lg;
}
.top-margin-xl {
margin-top: @margin-xl;
}
.top-margin-xxl {
margin-top: @margin-xxl;
}
@media (max-width: @screen-xs-max) {
.mobile-bottom-margin-sm {
margin-bottom: @margin-sm;
}
.mobile-bottom-margin-md {
margin-bottom: @margin-md;
}
.mobile-bottom-margin-lg {
margin-bottom: @margin-lg;
}
.mobile-bottom-margin-xl {
margin-bottom: @margin-xl;
}
.mobile-bottom-margin-xxl {
margin-bottom: @margin-xxl;
}
}
@media (max-width: @screen-sm-min) {
.col-xs-padding-sm {
.col-xs-12:not(:first-child) {
padding-top: @padding-sm;
}
}
.col-xs-padding-md {
.col-xs-12:not(:first-child) {
padding-top: @padding-md;
}
}
.col-xs-padding-lg {
.col-xs-12:not(:first-child) {
padding-top: @padding-lg;
}
}
.col-xs-padding-xl {
.col-xs-12:not(:first-child) {
padding-top: @padding-xl;
}
}
.col-xs-padding-xxl {
.col-xs-12:not(:first-child) {
padding-top: @padding-xxl;
}
}
}
.website-redesign {
// mobile breakpoint is md in website redesign
@media (max-width: @screen-sm-max) {
.col-xs-padding-sm {
.col-xs-12:not(:first-child) {
padding-top: @padding-sm;
}
}
.col-xs-padding-md {
.col-xs-12:not(:first-child) {
padding-top: @padding-md;
}
}
.col-xs-padding-lg {
.col-xs-12:not(:first-child) {
padding-top: @padding-lg;
}
}
.col-xs-padding-xl {
.col-xs-12:not(:first-child) {
padding-top: @padding-xl;
}
}
.col-xs-padding-xxl {
.col-xs-12:not(:first-child) {
padding-top: @padding-xxl;
}
}
}
}
.bottom-align-last-entry {
display: flex;
flex-direction: column;
* {
&:last-child {
flex: 1;
align-content: end;
}
}
}

27
services/web/frontend/stylesheets/app/confirm-email.less Normal file
View File

@@ -0,0 +1,27 @@
.confirm-email {
form {
.text-danger {
display: flex;
gap: 6px;
padding: 4px;
.icon {
padding-top: 2px;
}
}
.form-actions {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 20px;
}
label {
font-weight: normal;
}
}
.confirm-email-alert {
margin-bottom: 12px;
}
}

67
services/web/frontend/stylesheets/app/contact-us.less Normal file
View File

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

150
services/web/frontend/stylesheets/app/content_page.less Normal file
View File

@@ -0,0 +1,150 @@
/*
Styling for content pages
Including: about, home, blog, /for/__, legal, contact, portals, wiki
*/
.content-page {
word-break: break-word;
/*
Links and Buttons
*/
a {
color: @link-color-alt;
&:hover {
color: @link-hover-color-alt;
}
}
// correct color property set on <a> above:
.reset-btns;
.alert {
.alert;
}
.alert-info {
.btn-info {
.btn-alert-info;
}
}
// correct color property set on <a> above:
.reset-btns;
.alert {
.alert;
}
.alert-info {
.btn-info {
.btn-alert-info;
}
}
hr {
border-color: @hr-border-alt;
}
.quote-by {
min-width: 80px;
overflow: hidden;
}
.page-header {
margin-top: 0px;
}
/*
section
*/
section {
padding: @line-height-computed (@grid-gutter-width / 2);
&.color-block {
&.green-dark {
background-color: @ol-dark-green;
}
&.green {
background-color: @ol-green;
.no-card * {
.btn-primary,
.btn-success {
// only correct button colors when green on green
.btn-primary-on-primary-bg;
}
}
}
&.blue-gray-dark {
background-color: @ol-blue-gray-5;
}
&.blue-gray-light {
background-color: @ol-blue-gray-1;
}
&.green,
&.green-dark,
&.blue-gray-dark {
.no-card * {
&:not(.btn) {
color: @white;
}
a {
text-decoration: underline;
}
.btn {
text-decoration: none;
}
.form-control {
color: @input-color;
}
}
}
}
.section-row {
margin: 0 auto;
/* match .col-sm-10 */
/* @grid-gutter-width is used for margins */
max-width: (@screen-sm * (10/12)) - @grid-gutter-width;
@media (min-width: @screen-md-min) {
max-width: (@screen-md * (10/12)) - @grid-gutter-width;
}
@media (min-width: @screen-lg-min) {
max-width: (@screen-lg * (10/12)) - @grid-gutter-width;
}
}
}
.content-container > section:first-child {
/* header */
padding-bottom: 0;
padding-top: 0;
}
.content-container > section:nth-child(2) {
/* first content section */
padding-top: 0;
}
section.no-top-padding {
/* opt out of padding via the CMS */
padding-top: 0;
}
.container-small {
section .section-row {
/* match col-sm-8 */
/* @grid-gutter-width is used for margins */
max-width: (@screen-sm * (8/12)) - @grid-gutter-width;
@media (min-width: @screen-md-min) {
max-width: (@screen-md * (8/12)) - @grid-gutter-width;
}
@media (min-width: @screen-lg-min) {
max-width: (@screen-lg * (8/12)) - @grid-gutter-width;
}
}
}
/*
lists
*/
.list-without-style {
list-style: none;
margin: 0;
padding: 0;
}
}

755
services/web/frontend/stylesheets/app/editor.less Normal file
View File

@@ -0,0 +1,755 @@
@import './editor/file-tree.less';
@import './editor/history.less';
@import './editor/history-react.less';
@import './editor/toolbar.less';
@import './editor/left-menu.less';
@import './editor/pdf.less';
@import './editor/error-boundary.less';
@import './editor/share.less';
@import './editor/chat.less';
@import './editor/toast.less';
@import './editor/file-view.less';
@import './editor/search.less';
@import './editor/publish-template.less';
@import './editor/online-users.less';
@import './editor/math-preview.less';
@import './editor/hotkeys.less';
@import './editor/review-panel.less';
@import './editor/review-panel-new.less';
@import './editor/publish-modal.less';
@import './editor/outline.less';
@import './editor/logs.less';
@import './editor/dictionary.less';
@import './editor/compile-button.less';
@import './editor/figure-modal.less';
@import './editor/table-generator-column-width-modal.less';
@import './editor/ide-react.less';
@ui-layout-toggler-def-height: 50px;
@ui-resizer-size: 7px;
@keyframes blink {
0% {
opacity: 0.2;
}
20% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
.editor-menu-icon {
&.fa {
width: 1em;
background: @editor-header-logo-background;
&::before {
// Disable the font-awesome icon when in Overleaf by replacing it with a
// non-breakable space instead (otherwise the browser would render a
// zero-width element).
content: '\00a0';
}
}
}
.full-size {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.global-alerts {
height: 0;
margin-top: 2px;
text-align: center;
.alert {
display: inline-block;
text-align: left;
min-width: 400px;
padding: @global-alerts-padding;
font-size: 14px;
margin-bottom: (@line-height-computed / 4);
position: relative;
z-index: 20;
}
}
#try-reconnect-now-button {
margin-left: 20px;
}
#synctex-more-info-button {
margin-left: 20px;
}
#ide-body {
background-color: @pdf-bg;
.full-size;
top: @ide-body-top-offset;
}
#editor {
.full-size;
}
.pdf-empty,
.no-history-available,
.no-file-selection,
.multi-selection-ongoing {
&::before {
.full-size;
left: 20px;
content: '';
background: url(../../../public/img/ol-brand/overleaf-o-grey.svg) center /
200px no-repeat;
opacity: 0.2;
pointer-events: none;
}
}
.no-history-available,
.no-file-selection-message,
.multi-selection-message {
width: 50%;
margin: 0 auto;
text-align: center;
padding: @line-height-computed 0;
}
.faster-compiles-feedback {
position: absolute;
bottom: 0;
right: 0.5rem; // scrollbar
margin: 1rem;
padding: 10px;
.btn {
margin: 0 0 0 10px;
}
.faster-compiles-feedback-options {
display: inline;
white-space: nowrap;
}
.faster-compiles-feedback-option {
background: #1d4c82;
}
.faster-compiles-feedback-dismiss {
border: 0;
margin: 0 0 0 5px;
color: #1d4c82;
right: 0;
top: 0;
float: right;
}
}
.toolbar-editor {
height: @editor-toolbar-height;
background-color: @editor-toolbar-bg;
padding: 0 5px;
overflow: hidden;
position: relative;
z-index: 10; // Prevent track changes showing over toolbar
}
.loading-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #fff;
}
.loading-screen-brand-container {
width: 15%;
min-width: 200px;
text-align: center;
}
.loading-screen-brand {
position: relative;
width: 100%;
padding-top: @editor-loading-logo-padding-top;
height: 0;
background: @editor-loading-logo-background-url no-repeat bottom / 100%;
&::after {
content: '';
position: absolute;
height: inherit;
right: 0;
bottom: 0;
left: 0;
background: @editor-loading-logo-foreground-url no-repeat bottom / 100%;
transition: height 0.5s;
}
}
.loading-screen-label {
margin: 0;
padding-top: 1em;
font-size: 2em;
color: @gray-dark;
}
.loading-screen-ellip {
animation: blink 1.4s both infinite;
&:nth-child(2) {
animation-delay: 0.2s;
}
&:nth-child(3) {
animation-delay: 0.4s;
}
}
.loading-screen-error {
margin: 0;
padding-top: 1em;
color: @state-danger-text;
}
.loading-panel {
.full-size;
padding-top: 10rem;
font-family: @font-family-serif;
text-align: center;
background-color: #fafafa;
}
.loading-panel-file-view {
background-color: @gray-lightest;
}
.error-panel {
.full-size;
padding: @line-height-computed;
background-color: #fafafa;
.alert {
max-width: 400px;
margin: auto;
}
}
.project-name {
.name {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
padding: 6px;
color: @project-name-color;
font-weight: 700;
white-space: nowrap;
}
input {
height: 30px;
margin-top: 4px;
text-align: center;
padding: 6px;
font-weight: 700;
max-width: 500px;
}
a.rename {
visibility: hidden;
display: inline-block;
color: @project-rename-link-color;
padding: 5px;
border-radius: @border-radius-small;
cursor: pointer;
&:hover {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
color: @project-rename-link-color-hover;
text-decoration: none;
}
}
&:hover {
a.rename {
visibility: visible;
}
}
}
/**************************************
CodeMirror
***************************************/
.cm-editor-wrapper {
position: relative;
height: 100%;
}
.cm-editor-body {
height: 100%;
}
// CM (for some reason) has height set to 300px in it's stylesheet
.CodeMirror {
height: 100%;
}
.ui-layout-resizer {
width: @ui-resizer-size !important;
background-color: @editor-resizer-bg-color;
/* Over-ride z-index set on element by JQuery Layout */
z-index: 0 !important;
&.ui-layout-resizer-closed {
&::before,
&::after {
content: none;
}
}
&::before,
&::after {
content: '\2847';
display: block;
position: absolute;
text-align: center;
left: -2px;
-webkit-font-smoothing: antialiased;
width: 100%;
font-size: 24px;
top: 25%;
color: @ol-blue-gray-2;
}
&::after {
top: 75%;
}
}
.ui-layout-toggler {
display: none !important;
}
.custom-toggler {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: @ui-resizer-size !important;
height: 50px;
margin-top: -25px;
top: 50%;
background-color: @editor-toggler-bg-color;
&:hover,
&:focus {
outline: none;
text-decoration: none;
}
// Increase hit area
&::before {
content: '';
display: block;
position: absolute;
top: 0;
right: -3px;
bottom: 0;
left: -3px;
}
&::after {
font-family: FontAwesome;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 65%;
font-weight: bold;
color: #fff;
user-select: none;
pointer-events: none;
}
&:hover {
background-color: @editor-toggler-hover-bg-color;
}
}
.custom-toggler-east::after {
content: '\f105';
}
.custom-toggler-west::after {
content: '\f104';
}
.custom-toggler-closed.custom-toggler-east::after {
content: '\f104';
}
.custom-toggler-closed.custom-toggler-west::after {
content: '\f105';
}
.ui-layout-resizer-dragging {
background-color: @editor-resizer-bg-color-dragging;
z-index: 1000 !important;
}
.context-menu {
position: fixed;
z-index: 100;
}
.editor-dark {
color: @gray-lighter;
background-color: @editor-dark-background-color;
.ui-layout-resizer {
background-color: darken(@editor-dark-background-color, 10%);
border: none;
}
.btn-default {
color: white;
background-color: @gray;
border-color: darken(@gray-dark, 10%);
&:hover {
background-color: darken(@gray, 5%);
border-color: darken(@gray-dark, 20%);
}
}
}
.modal-alert {
margin-top: 10px;
margin-bottom: 0px;
}
// vertically centre the "connection down" modal so it does not hide
// the reconnecting indicator
.modal.lock-editor-modal {
display: flex !important;
background-color: rgba(0, 0, 0, 0.3);
overflow-y: hidden;
pointer-events: none;
.modal-dialog {
top: @line-height-computed;
}
}
.out-of-sync-modal {
.text-preview {
margin-top: @line-height-computed / 2;
.scroll-container {
max-height: 360px;
width: 100%;
background-color: white;
font-size: 0.8em;
line-height: 1.1em;
overflow: auto;
border: 1px solid @gray-lighter;
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
text-align: left;
white-space: pre;
font-family: monospace;
}
}
}
.sl_references_search_hint {
position: relative;
top: 100%;
}
.sl_references_search_hint {
position: relative;
left: -1px;
text-align: center;
padding: 2px;
background: rgb(202, 214, 250);
border: 1px solid lightgray;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
span {
color: black;
}
}
.bibtex-hint-banner {
position: absolute;
top: 8px;
right: 8px;
left: 8px;
z-index: 1000;
display: flex;
justify-content: space-between;
padding: 5px 10px;
}
.bibtex-hint-banner {
align-items: flex-start;
.bibtex-hint-close {
color: inherit;
margin-left: 10px;
font-size: 24px;
padding: 0;
line-height: 1;
border-radius: 0;
&,
&:hover,
&:focus,
&:active {
background-color: transparent;
}
}
}
// -- References Search Modal --
.references-search-modal-backdrop {
// don't grey out the editor when the
// modal is active
background-color: transparent;
}
.references-search-modal {
// upgrade prompt
.references-search-upgrade-prompt {
padding: 24px;
padding-bottom: 48px;
.upgrade-prompt {
text-align: center;
width: 400px;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 38px;
padding-right: 38px;
margin: auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 8px;
.message {
margin-top: 15px;
&.call-to-action {
font-weight: bold;
}
ul.list-unstyled {
text-align: left;
}
}
}
}
.search-form {
// position the spinner inside the input element
i.fa-spinner {
margin-top: -30px;
}
}
.alert-danger {
margin-top: 12px;
margin-bottom: 0px;
}
// search result items list
.search-results {
font-size: 12px;
.no-results-message,
.too-many-results-message {
font-size: 16px;
}
.search-results-scroll-container {
max-height: calc(100vh - 225px);
overflow-y: auto;
}
.search-result-hit {
&:hover {
cursor: pointer;
}
border-bottom: 1px solid #ddd;
padding: 8px;
&:last-child {
border-bottom: 1px solid transparent;
}
border-left: 4px solid transparent;
&.selected-search-result-hit {
color: @brand-success;
}
.hit-title {
font-size: 1.3em;
font-style: italic;
}
}
}
}
.referencesImportModal {
.referencesImportPreviewScroller {
font-family: monospace;
font-size: 0.8em;
max-height: 360px;
overflow: scroll;
white-space: pre;
padding: 8px 12px;
margin-bottom: 15px;
border: 1px solid @gray-lighter;
background-color: @gray-lightest;
}
}
.teaser-feature-icon {
vertical-align: sub;
}
.teaser-title,
.dropbox-teaser-title {
margin-top: 0;
text-align: center;
}
.teaser-refresh-label {
text-align: center;
}
.teaser-img,
.dropbox-teaser-img {
.img-responsive;
margin-bottom: 5px;
}
.teaser-video-container,
.dropbox-teaser-video-container {
margin-top: -@modal-inner-padding;
margin-left: -@modal-inner-padding;
margin-right: -@modal-inner-padding;
margin-bottom: 5px;
overflow: hidden;
}
.teaser-video,
.dropbox-teaser-video {
width: 100%;
height: auto;
border-bottom: 1px solid @modal-header-border-color;
}
.spell-check-menu {
> .dropdown-menu > li > a {
padding: 2px 15px;
}
}
.spell-check-menu-from-bottom {
> .dropdown-menu {
top: auto;
bottom: 100%;
}
}
// The source editor container is managed by jQuery's UI layout library, which adds an `overflow: hidden`
// rule to it. This is problematic because we need overflowing content to be visible (the review panel
// previews are shown on hover, visually outside the source editor container). As the `overflow: hidden`
// rule is added automatically (inline and not configurable), the only workaround is to use `!important`.
.editor-container {
overflow: visible !important;
container-type: inline-size;
}
.pdf-preview-messages {
position: absolute;
right: @margin-sm;
left: @margin-sm;
top: @margin-xl;
z-index: @zindex-popover;
}
.compile-time-warning {
padding: @padding-sm;
background-color: @ol-green;
max-width: 420px;
box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
.warning-content {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: @alert-padding;
}
.warning-text {
display: inline-block;
font-size: @font-size-small;
}
.upgrade-prompt {
display: inline-flex;
margin-left: auto;
}
button.btn {
background-color: @ol-darker-green;
&.close {
background-color: @ol-green;
}
}
}
.cm6-switch-away-survey {
padding: @padding-sm;
box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
background-color: @ol-blue;
width: 530px;
position: absolute;
right: @margin-sm;
bottom: @margin-xl;
z-index: @zindex-popover;
.btn.close {
background-color: transparent;
color: #fff;
opacity: 1;
}
.warning-content {
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 32px;
}
.warning-text {
padding-right: @alert-padding;
display: inline-block;
font-size: @font-size-small;
}
}
.legacy-editor-warning {
width: 500px;
&.alert.alert-info {
padding: @padding-sm;
}
.btn.close {
background-color: transparent;
color: @white;
opacity: 1;
}
.warning-content {
padding-right: @alert-padding;
font-size: @font-size-small;
margin-right: 32px;
.warning-link {
font-weight: 700;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
grammarly-extension[data-grammarly-shadow-root='true'] {
z-index: 1;
}
.editor-notification {
margin: 48px 64px;
width: 80%;
max-width: 560px;
}

136
services/web/frontend/stylesheets/app/editor/chat.less Normal file
View File

@@ -0,0 +1,136 @@
@new-message-height: 80px;
.chat {
.loading {
font-family: @font-family-serif;
padding: @line-height-computed / 2;
text-align: center;
}
.no-messages {
padding: @line-height-computed / 2;
color: @chat-instructions-color;
}
.first-message {
position: absolute;
bottom: 0;
width: 100%;
padding: @line-height-computed / 2;
color: @chat-instructions-color;
}
.chat-error {
position: absolute;
top: 0;
bottom: 0;
background-color: @chat-bg;
padding: @line-height-computed / 2;
text-align: center;
}
.messages {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: @new-message-height;
overflow-x: hidden;
background-color: @chat-bg;
li.message {
margin: @line-height-computed / 2;
.date {
font-size: 12px;
color: @chat-message-date-color;
margin-bottom: @line-height-computed / 2;
text-align: right;
}
.message-wrapper {
.name {
font-size: 12px;
color: @chat-message-name-color;
margin-bottom: 4px;
min-height: 16px;
}
.message {
border-left: 3px solid transparent;
font-size: 14px;
box-shadow: @chat-message-box-shadow;
border-radius: @chat-message-border-radius;
position: relative;
.message-content {
padding: @chat-message-padding;
overflow-x: auto;
color: @chat-message-color;
font-weight: @chat-message-weight;
}
.arrow {
transform: rotate(90deg);
right: 90%;
top: -15px;
border: solid;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-width: 10px;
}
}
p {
margin-bottom: @line-height-computed / 4;
&:last-child {
margin-bottom: 0;
}
}
}
&:not(.self) {
.message {
.arrow {
border-left-color: transparent !important;
}
}
}
&.self {
margin-top: @line-height-computed;
.message-wrapper .message {
border-left: none;
border-right: 3px solid transparent;
.arrow {
left: 100%;
right: auto;
border-right-color: transparent !important;
}
}
}
}
}
.new-message {
.full-size;
top: auto;
height: @new-message-height;
background-color: @chat-new-message-bg;
padding: @line-height-computed / 4;
border-top: 1px solid @chat-new-message-border-color;
textarea {
overflow: auto;
resize: none;
border-radius: @border-radius-base;
border: 1px solid @chat-new-message-border-color;
height: 100%;
width: 100%;
color: @chat-new-message-textarea-color;
font-size: 14px;
padding: @line-height-computed / 4;
background-color: @chat-new-message-textarea-bg;
}
}
}

92
services/web/frontend/stylesheets/app/editor/compile-button.less Normal file
View File

@@ -0,0 +1,92 @@
@stripe-width: 20px;
@keyframes pdf-toolbar-stripes {
from {
background-position: 0 0;
}
to {
background-position: @stripe-width 0;
}
}
.detach-compile-button-container {
border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
margin-left: 6px;
}
// only apply for legacy editor
.toolbar-pdf-right {
// because 2px border on :active state
.detach-compile-button-container {
margin-right: -3px;
}
}
.btn-striped-animated {
// prettier-ignore
#gradient > .striped(@color: rgba(255, 255, 255, 0.2), @angle: -45deg);
background-size: @stripe-width @stripe-width;
background-origin: content-box;
.animation(pdf-toolbar-stripes 2s linear infinite);
}
.detach-compile-button {
height: 28px;
padding-top: 0;
padding-bottom: 0;
&.detach-compile-button-disabled {
&,
&:hover {
color: @white;
background-color: @ol-green;
}
}
}
.detach-compile-button {
border: none;
}
.detach-compile-button-label {
margin-left: @line-height-computed / 4;
}
@keyframes compile-button-flash {
from,
to {
background: rgba(0, 0, 0, 0);
}
25%,
75% {
background: rgba(0, 0, 0, 0.2);
}
}
@keyframes compile-button-bounce {
from,
50%,
to {
transform: translateY(0);
}
25%,
75% {
transform: translateY(2px);
}
}
.detach-compile-button-animate {
animation-duration: 1.2s;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
animation-name: compile-button-flash;
}
.detach-compile-button-animate .caret {
animation-duration: 0.6s;
animation-delay: 0.4s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
animation-name: compile-button-bounce;
}

33
services/web/frontend/stylesheets/app/editor/dictionary.less Normal file
View File

@@ -0,0 +1,33 @@
#dictionary-modal {
.modal-body {
padding: 0;
}
}
.dictionary-entries-list {
overflow-y: scroll;
max-height: calc(100vh - 225px);
margin: 0;
padding: @padding-sm;
}
.dictionary-entry {
word-break: break-all;
display: flex;
padding: @padding-sm;
border-bottom: solid 1px @modal-header-border-color;
align-items: center;
&:last-child {
border-bottom: none;
}
}
.dictionary-entry-name {
flex-grow: 1;
padding-right: @padding-xs;
}
.dictionary-empty-body {
padding: @padding-md;
}

26
services/web/frontend/stylesheets/app/editor/error-boundary.less Normal file
View File

@@ -0,0 +1,26 @@
.error-boundary-alert {
position: absolute;
width: 100%;
height: 100%;
background-color: @ol-blue-gray-0;
padding: @line-height-computed / 2;
}
.error-boundary-container {
align-items: center;
display: flex;
flex-direction: column;
gap: 16px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
.error-message {
align-items: center;
color: @neutral-90;
display: flex;
flex-direction: column;
gap: 4px;
}
}

120
services/web/frontend/stylesheets/app/editor/figure-modal.less Normal file
View File

@@ -0,0 +1,120 @@
.figure-modal-help-link,
.figure-modal-help-link:hover,
.figure-modal-help-link:focus,
.figure-modal-help-link:active {
color: @neutral-90;
text-decoration: none;
}
.figure-modal-help-link {
padding-left: 0;
}
.figure-modal-checkbox-input {
label {
display: inline-block;
font-weight: normal;
line-height: 100%;
.figure-modal-label-content {
display: block;
overflow: hidden;
}
}
input[type='checkbox'] {
margin-right: 12px;
margin-top: 2px;
vertical-align: top;
accent-color: @ol-green;
}
}
.figure-modal-switcher-input {
position: relative;
z-index: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.file-container {
width: 100%;
height: 120px;
padding: 22px 24px;
border: 1px dashed #eaeaea;
background-color: #fafafa;
justify-content: space-between;
border-radius: 8px;
}
.file-container-file {
display: flex;
align-items: center;
border: 1px solid @neutral-20;
border-radius: 8px;
background-color: white;
height: 100%;
padding: 16px 18px;
}
.file-info {
margin-left: 18px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.file-name {
font-weight: bold;
}
.file-icon {
font-size: 20px;
}
.file-action {
cursor: pointer;
}
.figure-modal-source-button-grid {
display: grid;
justify-content: space-between;
gap: 8px;
grid-template-columns: 1fr 1fr;
margin: 0 auto;
&:not(:first-of-type) {
margin-top: 8px;
}
}
.figure-modal-source-button {
display: flex;
flex: 1 1 0;
align-items: center;
box-shadow: 0px 2px 4px 0px #1e253029;
line-height: 44px;
background-color: white;
border-radius: 4px;
border: none;
padding: 0 8px;
&-title {
flex: 1 1 auto;
text-align: left;
}
}
.figure-modal-source-button-icon {
margin-right: 6px;
}
.figure-modal-upload .uppy-Dashboard-AddFiles-list {
display: none;
}
.select-from-files-btn {
vertical-align: baseline;
}

556
services/web/frontend/stylesheets/app/editor/file-tree.less Normal file
View File

@@ -0,0 +1,556 @@
.fake-full-width-bg(@bg-color) {
&::before {
content: '\00a0';
position: absolute;
width: 9999px;
left: -9999px;
background-color: @bg-color;
}
}
.editor-sidebar {
display: flex;
flex-direction: column;
background-color: @file-tree-bg;
}
.file-tree {
display: flex !important; // To work around jQuery layout's inline styles
flex-direction: column;
height: 100%;
.toolbar.toolbar-filetree {
.toolbar-small-mixin;
.toolbar-alt-mixin;
padding: 0 5px;
flex-shrink: 0;
.btn:hover {
background-color: @file-tree-toolbar-btn-hover-color;
}
}
> file-tree-root,
.file-tree-inner {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: auto;
width: inherit;
height: inherit;
&.no-toolbar {
top: 0;
}
}
// TODO; Consolidate with "Project files" in Overleaf
h3 {
font-size: 1rem;
border-bottom: 1px solid @gray;
padding-bottom: (@line-height-computed / 4);
margin: (@line-height-computed / 2);
}
&-history {
.entity-name {
padding-left: 6px;
&.deleted {
text-decoration: line-through;
}
}
.loading {
padding-left: 6px;
color: #fff;
i.fa {
color: #fff;
}
}
}
ul.file-tree-list {
margin: 0;
overflow-x: hidden;
height: 100%;
flex-grow: 1;
position: relative;
overflow-y: auto;
.entity > ul,
ul[role='tree'] {
margin-left: 22px;
}
&::after {
content: '';
display: block;
min-height: @line-height-computed;
}
li {
line-height: @file-tree-line-height;
position: relative;
&:focus {
outline: none;
}
.entity {
user-select: none;
&:focus {
outline: none;
}
}
.entity > .entity-name > button {
background-color: transparent;
border: 0;
padding: 0;
&:focus {
outline: none;
}
&.item-name-button {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
padding-right: 32px;
white-space: pre;
}
}
.entity-name {
color: @file-tree-item-color;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.entity-name-react {
text-overflow: clip;
}
&:focus {
outline: none;
}
background-color: transparent;
.fake-full-width-bg(transparent);
&:hover {
background-color: @file-tree-item-hover-bg;
// When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
// element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
// and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
// the empty space.
.fake-full-width-bg(@file-tree-item-hover-bg);
}
input {
line-height: 1.6;
}
.entity-menu-toggle > i {
color: white;
font-size: 18px;
}
}
i.fa {
color: @file-tree-item-icon-color;
font-size: 14px;
&.file-tree-icon {
margin-right: 4px;
margin-left: 8px;
&.linked-file-icon {
position: relative;
left: -2px;
+ .linked-file-highlight {
& {
color: inherit;
}
position: relative;
top: 4px;
width: 0;
left: -5px;
font-size: 12px;
}
}
}
&.file-tree-folder-icon {
margin-right: 4px;
}
&.file-tree-expand-icon {
margin-left: 8px;
}
}
i.fa-folder-open,
i.fa-folder {
color: @file-tree-item-folder-color;
font-size: 14px;
}
i.toggle {
width: 24px;
padding: 6px;
font-size: 16px;
color: @file-tree-item-toggle-color;
}
.file-tree-dropdown-toggle {
display: flex;
align-items: center;
color: #fff;
line-height: 1.6;
font-size: 20px;
padding: 0 4px 0 18px;
&:hover,
&:focus {
text-decoration: none;
}
&::before {
content: '\00B7\00B7\00B7';
transform: rotate(90deg);
letter-spacing: 0.5px;
}
}
&.multi-selected {
> .entity {
> .entity-name {
> div > i.fa,
> button > i.fa,
> i.fa,
.entity-menu-toggle i.fa {
color: #fff;
}
> i.linked-file-highlight {
color: @blue;
}
color: #fff;
font-weight: bold;
background-color: @file-tree-multiselect-bg;
.fake-full-width-bg(@file-tree-multiselect-bg);
&:hover {
background-color: @file-tree-multiselect-hover-bg;
.fake-full-width-bg(@file-tree-multiselect-hover-bg);
}
}
}
}
.menu-button {
position: absolute;
right: 0;
top: 3px;
}
.rename-input {
display: block;
position: absolute;
top: 1px;
left: 32px;
right: 32px;
color: @file-tree-item-input-color;
input {
width: 100%;
}
}
> .entity > .entity-name {
.entity-menu-toggle {
display: none;
}
}
.entity-limit-hit {
color: @file-tree-item-color;
line-height: 2.05;
margin-left: (@line-height-computed / 2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.entity-limit-hit-message {
font-style: italic;
}
i.fa.entity-limit-hit-tooltip-trigger {
margin-left: (@line-height-computed / 4);
cursor: pointer;
}
}
}
&:not(.multi-selected) {
ul.file-tree-list li.selected {
> .entity {
> .entity-name {
color: @file-tree-item-selected-color;
> div > i.fa,
> button > i.fa,
> i.fa,
.entity-menu-toggle i.fa {
color: @file-tree-item-selected-color;
}
> i.linked-file-highlight {
color: @blue;
}
background-color: @file-tree-item-selected-bg;
font-weight: bold;
padding-right: 32px;
.fake-full-width-bg(@file-tree-item-selected-bg);
.entity-menu-toggle {
display: inline-block;
background-color: transparent;
box-shadow: none;
border: 0;
}
}
}
}
}
// while dragging, the previously selected item gets no highlight
ul.file-tree-list.file-tree-dragging li.selected .entity .entity-name {
font-weight: normal;
background-color: transparent;
.fake-full-width-bg(transparent);
color: @file-tree-item-color;
i.fa {
color: @file-tree-item-icon-color !important;
}
}
// the items being dragged get the full "hover" colour
ul.file-tree-list.file-tree-dragging
li
.entity.file-tree-entity-dragging
.entity-name {
background-color: fade(@file-tree-item-hover-bg, 90%);
.fake-full-width-bg(fade(@file-tree-item-hover-bg, 90%));
color: @file-tree-item-color;
i.fa {
color: @file-tree-item-icon-color !important;
}
}
// the drop target gets the "selected" colour
ul.file-tree-list.file-tree-dragging
li.dnd-droppable-hover
.entity
.entity-name {
background-color: @file-tree-item-selected-bg;
.fake-full-width-bg(@file-tree-item-selected-bg);
color: @file-tree-item-selected-color;
i.fa {
color: @file-tree-item-selected-color !important;
}
}
.dnd-draggable-preview-layer {
position: absolute;
pointer-events: none;
z-index: 100;
width: 100%;
height: 100%;
overflow: hidden;
&.dnd-droppable-hover {
border: 3px solid @file-tree-item-selected-bg;
}
}
.dnd-draggable-preview-item {
background-color: fade(@file-tree-item-selected-bg, 60%);
color: @file-tree-item-selected-color;
width: 75%;
padding-left: @line-height-computed;
}
.dnd-draggable-preview-item {
line-height: @file-tree-line-height;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.disconnected-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: @file-tree-bg;
opacity: 0.5;
cursor: wait;
}
}
.modal-new-file {
padding: 0;
table {
width: 100%;
table-layout: fixed;
td {
vertical-align: top;
}
}
/* old modal */
.toggle-output-files-button {
font-size: 80%;
}
/* new modal */
.toggle-file-type-button {
font-size: 80%;
margin-top: -12px;
.btn {
display: inline-block;
padding: 0;
vertical-align: baseline;
font-size: inherit;
}
.btn:focus-within {
outline: none;
text-decoration: none;
}
}
}
.modal-new-file-list {
background-color: @modal-footer-background-color;
width: 220px;
ul {
li {
/* old modal (a) */
a {
color: @text-color;
padding: (@line-height-computed / 4);
display: block;
text-decoration: none;
}
/* new modal (button) */
.btn {
color: @text-color;
padding: (@line-height-computed / 4);
}
.btn:hover {
text-decoration: none;
}
.btn:focus {
outline: none;
text-decoration: none;
background-color: white;
}
}
li.active {
background-color: white;
/* old modal (a) */
a {
color: @link-color;
}
/* new modal (button) */
.btn {
color: @link-color;
text-decoration: none;
}
}
li:hover {
background-color: white;
}
}
}
.file-tree-error {
text-align: center;
color: @file-tree-error-color;
padding: 20px;
}
.file-tree-modal-alert {
margin-top: 12.5px;
}
.btn.modal-new-file-mode {
text-align: left;
width: 100%;
}
.modal-new-file-body {
padding: 20px;
padding-top: (@line-height-computed / 4);
}
.modal-new-file-body-upload {
padding-top: 20px;
}
.modal-new-file-body-conflict {
background-color: @red-10;
border: 1px dashed @red-50;
min-height: 400px;
border-radius: 3px;
color: @neutral-90;
display: flex;
flex-direction: column;
justify-content: center;
padding: @padding-sm;
}
.modal-footer {
.approaching-file-limit {
font-weight: bold;
}
.at-file-limit {
text-align: left;
}
}
.modal-new-file-body-upload .uppy-Root {
font-family: inherit;
}
.modal-new-file-body-upload .uppy-Dashboard {
.uppy-Dashboard-inner {
border: none;
}
.uppy-Dashboard-dropFilesHereHint {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.uppy-Dashboard-AddFiles {
margin: 0;
border: 1px dashed @neutral-60;
height: 100%;
.uppy-Dashboard-AddFiles-title {
font-size: inherit;
}
}
.uppy-Dashboard-AddFiles-title {
width: 26em; // sized to create a wrap between the sentences
max-width: 100%;
}
.uppy-Informer p {
background-color: @blue-10;
border: 1px solid @blue-20;
border-radius: @border-radius-base-new;
color: @content-primary;
font-size: @font-size-03;
}
}

82
services/web/frontend/stylesheets/app/editor/file-view.less Normal file
View File

@@ -0,0 +1,82 @@
.file-view,
.binary-file {
padding: @line-height-computed / 2;
background-color: @gray-lightest;
text-align: center;
overflow: auto;
.file-view-buttons {
display: flex;
flex-wrap: wrap;
gap: @spacing-03;
justify-content: center;
}
.file-view-error {
margin: @spacing-08 -15px auto;
> .alert {
max-width: 400px;
margin: 0 auto;
}
}
.tpr-refresh-error {
.btn {
color: @neutral-90;
background-color: @white;
&:hover {
background-color: @neutral-20;
}
}
}
img,
.file-view-pdf {
max-width: 100%;
max-height: 90%;
display: block;
margin: auto;
margin-top: @line-height-computed / 2;
border: 1px solid @gray;
.box-shadow(0 2px 3px @gray;);
background-color: white;
}
.file-view-pdf {
overflow: auto;
width: max-content;
display: flex;
flex-direction: column;
align-items: center;
.pdf-page:not(:last-of-type) {
border-bottom: 1px solid @gray;
}
}
p.no-preview {
margin-top: @line-height-computed / 2;
font-size: 24px;
color: @gray;
}
.text-loading {
margin-top: @line-height-computed / 2;
font-size: 24px;
color: @gray;
}
.text-preview {
margin-top: @line-height-computed / 2;
.scroll-container {
background-color: white;
font-size: 0.8em;
line-height: 1.1em;
overflow: auto;
border: 1px solid @gray-lighter;
padding: 8px 12px;
text-align: left;
white-space: pre;
font-family: monospace;
}
}
.linked-file-icon {
color: @blue;
}
}

584
services/web/frontend/stylesheets/app/editor/history-react.less Normal file
View File

@@ -0,0 +1,584 @@
@versions-list-width: 320px;
@history-toolbar-height: 40px;
@history-change-list-padding: 16px;
history-root {
height: 100%;
display: block;
}
// Adding !important to override the styling of overlays and popovers
.history-popover {
top: 90px !important;
.arrow {
top: 20px !important;
}
}
.history-react {
display: flex;
justify-content: center;
height: 100%;
background-color: @history-main-bg;
.history-header {
height: @history-toolbar-height;
background-color: @history-react-header-bg;
color: @history-react-header-color;
font-size: @font-size-small;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.doc-panel {
flex: 1;
display: flex;
flex-direction: column;
.toolbar-container {
border-bottom: 1px solid @history-react-separator-color;
padding: 0 8px;
}
.doc-container {
flex: 1;
overflow-y: auto;
display: flex;
}
}
.doc-container .loading {
margin: 10rem auto auto;
}
.change-list {
display: flex;
flex-direction: column;
width: @versions-list-width;
font-size: @font-size-small;
border-left: 1px solid @history-react-separator-color;
box-sizing: content-box;
}
.toggle-switch-label {
flex: 1;
span {
display: block;
}
}
.history-version-list-container {
flex: 1;
overflow-y: auto;
}
.history-all-versions-scroller {
overflow-y: auto;
height: 100%;
}
.history-all-versions-container {
position: relative;
}
.history-versions-bottom {
position: absolute;
height: 8em;
bottom: 0;
}
.history-toggle-switch-container,
.history-version-day,
.history-version-details {
padding: 0 @history-change-list-padding;
}
.history-version-day {
background-color: white;
position: sticky;
z-index: 1;
top: 0;
display: block;
padding-top: 12px;
padding-bottom: 4px;
line-height: 20px;
}
.history-version-details {
display: flow-root;
padding-top: 8px;
padding-bottom: 8px;
position: relative;
&.history-version-selectable {
cursor: pointer;
&:hover {
background-color: @neutral-10;
}
}
&.history-version-selected {
background-color: @green-10;
border-left: 3px solid @green-50;
padding-left: @history-change-list-padding - 3px;
}
&.history-version-selected.history-version-selectable:hover {
background-color: fade(@green-70, 16%);
border-left: 3px solid @green-50;
}
&.history-version-within-selected {
background-color: @neutral-10;
border-left: 3px solid @green-50;
}
&.history-version-within-selected:hover {
background-color: fade(@neutral-90, 8%);
}
}
.version-element-within-selected {
background-color: @neutral-10;
border-left: 3px solid @green-50;
}
.version-element-selected {
background-color: @green-10;
border-left: 3px solid @green-50;
}
.history-version-metadata-time {
display: block;
margin-bottom: 4px;
color: @neutral-90;
&:last-child {
margin-bottom: initial;
}
}
.history-version-metadata-users,
.history-version-changes {
margin: 0;
padding: 0;
list-style: none;
}
.history-version-restore-file {
margin-bottom: 8px;
}
.history-version-metadata-users {
display: inline;
> li {
display: inline-flex;
align-items: center;
margin-right: 8px;
}
}
.history-version-changes {
> li {
margin-bottom: 4px;
}
}
.history-version-user-badge-color {
@size: 8px;
display: inline-block;
width: @size;
height: @size;
margin-right: 4px;
border-radius: 2px;
}
.history-version-user-badge-text {
overflow-wrap: anywhere;
flex: 1;
}
.history-version-day,
.history-version-change-action,
.history-version-metadata-users,
.history-version-origin,
.history-version-saved-by {
color: @neutral-70;
}
.history-version-change-action {
overflow-wrap: anywhere;
}
.history-version-change-doc {
color: @neutral-90;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.history-version-divider-container {
padding: 6px 8px;
}
.history-version-divider {
margin: 0px;
border-color: @neutral-20;
}
.history-version-badge {
margin-bottom: 4px;
margin-right: 10px;
height: unset;
white-space: normal;
overflow-wrap: anywhere;
}
.history-version-label {
margin-bottom: 4px;
&:last-child {
margin-bottom: initial;
}
}
.loading {
font-family: @font-family-serif;
}
.history-all-versions-loading {
position: sticky;
bottom: 0;
padding: @line-height-computed / 2 0;
background-color: @gray-lightest;
text-align: center;
}
.history-version-saved-by {
&-label {
margin-right: 8px;
}
}
.dropdown.open {
.history-version-dropdown-menu-btn {
background-color: rgba(@neutral-90, 0.08);
box-shadow: initial;
}
}
.history-compare-btn,
.history-version-dropdown-menu-btn {
.reset-button;
@size: 30px;
padding: 0;
border-radius: @btn-border-radius-large;
width: @size;
height: @size;
line-height: 1;
font-size: @font-size-small;
color: @neutral-90;
background-color: transparent;
&:hover,
&:active {
z-index: initial;
background-color: rgba(@neutral-90, 0.08);
box-shadow: initial;
}
}
.history-loading-panel {
padding-top: 10rem;
font-family: @font-family-serif;
text-align: center;
}
.history-file-entity-operation-badge {
flex: 0 0 auto;
text-transform: lowercase;
margin-left: 0.5em;
font-size: 0.7em;
background: @history-file-badge-bg;
color: @history-file-badge-color;
border-radius: 8px;
line-height: 1;
padding: 2px 4px 3px;
margin-top: 2px;
}
.history-react-toolbar {
display: flex;
align-items: center;
gap: 8px;
.history-react-toolbar-file-info {
flex: 1;
text-align: right;
}
.history-react-toolbar-time {
font-weight: 700;
}
}
.history-paywall-prompt {
padding: @history-change-list-padding;
.history-feature-list {
list-style: none;
padding-left: 8px;
li {
margin-bottom: 16px;
}
}
button {
width: 100%;
}
}
.history-version-faded .history-version-details {
max-height: 6em;
.mask-image(linear-gradient(black 35%, transparent));
overflow: hidden;
}
.history-paywall-heading {
.premium-text;
font-family: inherit;
font-size: 20px;
font-weight: 700;
}
.history-content {
padding: @line-height-computed / 2;
}
}
.history-version-label-tooltip {
padding: 6px;
text-align: initial;
&-row {
margin-bottom: 6.25px;
&-comment {
overflow-wrap: anywhere;
}
&:last-child {
margin-bottom: initial;
}
}
}
.history-version-dropdown-menu {
[role='menuitem'] {
padding: 10px 12px;
color: @neutral-90;
&:hover,
&:focus {
color: @neutral-90;
background-color: @neutral-10;
}
span.material-symbols {
vertical-align: middle;
font-size: inherit;
}
}
}
.document-diff-container {
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
position: relative;
.cm-viewer-container,
.cm-editor {
height: 100%;
}
.previous-highlight-button,
.next-highlight-button {
position: absolute;
right: 16px;
box-shadow: @box-shadow;
}
.previous-highlight-button {
top: 16px;
}
.next-highlight-button {
bottom: 16px;
}
}
.history-dropdown-icon {
color: @neutral-90;
}
.history-dropdown-icon-inverted {
color: @neutral-10;
vertical-align: top;
}
.history-restore-promo-icon {
vertical-align: middle;
}
.history-file-tree {
display: flex !important; // To work around jQuery layout's inline styles
flex-direction: column;
flex-grow: 1;
max-height: 100%;
ul.history-file-tree-list {
margin: 0;
overflow-x: hidden;
height: 100%;
flex-grow: 1;
position: relative;
overflow-y: auto;
.history-file-tree-item > ul,
ul[role='tree'] {
margin-left: 22px;
}
&::after {
content: '';
display: block;
min-height: @line-height-computed;
}
li {
line-height: @file-tree-line-height;
position: relative;
margin-left: 8px;
&:focus {
outline: none;
}
.history-file-tree-item {
color: @file-tree-item-color;
cursor: pointer;
white-space: nowrap;
user-select: none;
display: flex;
align-items: center;
&:focus {
outline: none;
}
.fake-full-width-bg(transparent);
&:hover {
background-color: @file-tree-item-hover-bg;
// When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
// element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
// and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
// the empty space.
.fake-full-width-bg(@file-tree-item-hover-bg);
}
.history-file-tree-folder-button,
.history-file-tree-item-button {
.reset-button;
&:focus {
outline: none;
}
}
.history-file-tree-item-name-wrapper {
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
.history-file-tree-item-name {
margin-right: @margin-xs;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
font-weight: normal;
flex-grow: 1;
white-space: pre;
&.strikethrough {
text-decoration: line-through;
}
}
.history-file-tree-item-badge {
text-transform: capitalize;
font-weight: normal;
margin-right: @margin-sm;
flex-shrink: 0;
&:hover {
background-color: @neutral-20;
}
}
}
}
i.fa {
color: @file-tree-item-icon-color;
font-size: 14px;
display: inline-flex;
flex-shrink: 0;
&.file-tree-icon {
margin-right: 4px;
margin-left: 8px;
}
&.file-tree-folder-icon {
margin-right: 4px;
}
&.file-tree-expand-icon {
margin-left: 8px;
}
}
i.fa-folder-open,
i.fa-folder {
color: @file-tree-item-folder-color;
font-size: 14px;
}
}
li.selected > .history-file-tree-item {
color: @file-tree-item-selected-color;
background-color: @file-tree-item-selected-bg;
font-weight: bold;
> div > i.fa,
> button > i.fa,
> i.fa {
color: @file-tree-item-selected-color;
}
.fake-full-width-bg(@file-tree-item-selected-bg);
}
}
}
.history-error {
padding: 16px;
}

404
services/web/frontend/stylesheets/app/editor/history-v2.less Normal file
View File

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

344
services/web/frontend/stylesheets/app/editor/history.less Normal file
View File

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

31
services/web/frontend/stylesheets/app/editor/hotkeys.less Normal file
View File

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

180
services/web/frontend/stylesheets/app/editor/ide-react.less Normal file
View File

@@ -0,0 +1,180 @@
#ide-root {
height: 100vh; /* for backwards compatibility */
height: 100dvh; /* needed for mobile devices */
.global-alerts {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.chat {
position: relative;
height: 100%;
}
.review-panel-wrapper {
&.rp-state-overview {
position: sticky;
top: 0;
height: 100%;
}
}
}
.ide-react-main {
height: 100%;
display: flex;
flex-direction: column;
.toolbar.toolbar-header {
position: static;
flex-grow: 0;
color: var(--neutral-20);
}
}
.ide-react-body {
flex-grow: 1;
background-color: @pdf-bg;
overflow-y: hidden;
z-index: 0;
}
.horizontal-resize-handle {
width: @ui-resizer-size !important;
height: 100%;
// Enable ::before and ::after pseudo-elements to position themselves correctly
position: relative;
background-color: @editor-resizer-bg-color;
.custom-toggler {
padding: 0;
border-width: 0;
// Override react-resizable-panels which sets a global * { cursor: ew-resize }
cursor: pointer !important;
}
&.horizontal-resize-handle-enabled {
&::before,
&::after {
// This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
// we'd have to change this SVG too
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='18' viewBox='0 0 7 18'%3E%3Cpath d='M2 0h3v3H2zM2 5h3v3H2zM2 10h3v3H2zM2 15h3v3H2z' style='fill:%239da7b7'/%3E%3C/svg%3E");
display: block;
position: absolute;
text-align: center;
left: 0;
width: 7px;
height: 18px;
}
&::before {
top: 25%;
}
&::after {
top: 75%;
}
}
&:not(.horizontal-resize-handle-enabled) {
cursor: default;
}
.synctex-controls {
left: -8px;
margin: 0;
// Ensure that SyncTex controls appear in front of PDF viewer controls and logs pane
z-index: 12;
& .synctex-control .synctex-control-icon {
// Override react-resizable-panels which sets a global * { cursor: ew-resize }
cursor: pointer !important;
}
}
}
.vertical-resize-handle {
height: 6px;
background-color: @vertical-resizable-resizer-bg;
&.vertical-resize-handle-enabled {
&:hover {
background-color: @vertical-resizable-resizer-hover-bg;
}
}
&:not(.vertical-resize-handle-enabled) {
opacity: 0.5;
cursor: default;
}
&::after {
// This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
// we'd have to change this SVG too
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='6' viewBox='0 0 18 6'%3E%3Cpath d='M0 1.5h3v3H0zM5 1.5h3v3H5zM10 1.5h3v3h-3zM15 1.5h3v3h-3z' style='fill:%239da7b7'/%3E%3C/svg%3E");
display: block;
text-align: center;
line-height: 0;
}
}
.ide-react-editor-sidebar {
height: 100%;
background-color: @file-tree-bg;
color: var(--neutral-20);
position: relative;
}
.ide-react-symbol-palette {
height: 100%;
background-color: @symbol-palette-bg;
color: var(--neutral-20);
}
.ide-react-file-tree-panel {
display: flex;
flex-direction: column;
// Prevent the file tree expanding beyond the boundary of the panel
.file-tree {
width: 100%;
}
}
.ide-react-editor-panel {
display: flex;
flex-direction: column;
}
// Ensure an element with class "full-size", such as the binary file view, stays within the bounds of the panel
.ide-react-panel {
position: relative;
container-type: size;
}
// Styles for placeholder elements that will eventually be replaced
// Unused, not migrated to SCSS
.ide-react-placeholder-chat {
background-color: var(--editor-toolbar-bg);
color: var(--neutral-20);
height: 100%;
}
.ide-panel-group-resizing {
background-color: white;
// Hide panel contents while resizing
.ide-react-editor-content,
.pdf {
display: none !important;
}
}

238
services/web/frontend/stylesheets/app/editor/left-menu.less Normal file
View File

@@ -0,0 +1,238 @@
#left-menu {
position: absolute;
width: @left-menu-width;
padding: (@line-height-computed / 2);
top: 0;
bottom: 0;
background-color: #f4f4f4;
z-index: 100;
overflow-y: auto;
overflow-x: hidden;
-webkit-transition: left ease-in-out @left-menu-animation-duration;
transition: left ease-in-out @left-menu-animation-duration;
font-size: 14px;
left: -@left-menu-width;
&.shown {
left: 0;
}
h4 {
font-family: @font-family-sans-serif;
font-weight: 400;
font-size: 1rem;
margin: (@line-height-computed / 2) 0;
padding-bottom: (@line-height-computed / 4);
color: @neutral-70;
border-bottom: 1px solid @gray-lighter;
}
> h4:first-child {
margin-top: 0;
}
ul.nav {
.left-menu-button {
cursor: pointer;
padding: (@line-height-computed / 4);
font-weight: 700;
color: @link-color;
display: flex;
align-items: center;
width: 100%;
background-color: inherit;
border: none;
i {
margin-right: @margin-sm;
color: @gray;
}
&:hover,
&:active {
background-color: @link-color;
color: white;
i {
color: white;
}
}
}
a {
cursor: pointer;
&:hover,
&:active,
&:focus {
background-color: @link-color;
color: white;
i {
color: white;
}
}
i {
color: @gray;
}
padding: (@line-height-computed / 4);
font-weight: 700;
}
.link-disabled {
color: @gray-light;
}
}
> ul.nav:last-child {
margin-bottom: @line-height-computed / 2;
}
ul.nav-downloads {
li {
display: inline-block;
text-align: center;
width: 100px;
a {
color: @gray-dark;
}
i {
margin: (@line-height-computed / 4) 0;
}
}
}
form.settings {
label {
font-weight: normal;
color: @gray-dark;
flex: 1 0 50%;
margin-bottom: 0;
margin-top: 9px;
padding-right: 5px;
white-space: nowrap;
}
button,
select {
width: 50%;
margin: 9px 0;
}
.form-controls {
clear: both;
padding: 0 9px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
border-bottom: solid 1px rgba(0, 0, 0, 0.07);
&:first-child {
margin-top: -9px;
}
&:last-child {
border-bottom: 0;
}
&:hover {
background-color: @link-color;
// select.form-control {
// color: white;
// }
label,
i.fa {
color: white;
}
}
&:after {
content: '';
display: table;
clear: both;
}
}
}
.left-menu-setting-position {
position: relative;
.left-menu-setting {
margin-top: 0 !important;
}
.left-menu-setting-icon {
position: absolute;
right: 65%;
top: 25%;
}
}
.left-menu-setting {
padding: 0 9px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
border-bottom: solid 1px rgba(0, 0, 0, 0.07);
margin-bottom: 0;
&:first-child {
margin-top: -9px;
}
&:last-child {
border-bottom: 0;
}
&:hover,
&:focus-within {
background-color: @link-color;
label {
color: @white;
}
}
select.form-control {
height: 23px;
padding: 1px @padding-xs;
font-size: inherit;
&:hover {
background-color: @ol-blue-gray-1;
}
}
}
}
#left-menu-mask {
.full-size;
opacity: 0.4;
background-color: #999;
z-index: 99;
transition: opacity 0.5s;
}
// Make the Bootstrap Modal behavior as a left sidebar
#left-menu-modal {
opacity: 1;
overflow-y: hidden;
padding-left: 0 !important; // bootstrap modal may randomly give padding-left when zooming in / out in chrome
.modal-dialog {
height: 100%;
margin: 0;
width: @left-menu-width;
}
.modal-content {
position: initial;
}
&.modal.fade .modal-dialog {
left: -@left-menu-width;
transition: left ease-in-out @left-menu-animation-duration;
-webkit-transition: left ease-in-out @left-menu-animation-duration;
transform: translate(0, 0);
}
&.modal.in .modal-dialog {
left: 0;
transform: translate(0, 0);
}
}
// Don't disable backdrop that allows closing the Modal when clicking outside of it,
// But match its background color with the original mask background color.
.left-menu-modal-backdrop {
background-color: transparent;
}

193
services/web/frontend/stylesheets/app/editor/logs.less Normal file
View File

@@ -0,0 +1,193 @@
.logs-pane {
.full-size;
top: @pdf-top-offset;
overflow-y: auto;
background-color: @logs-pane-bg;
z-index: 11; // above the PDF viewer + controls
}
.logs-pane-content {
display: flex;
flex-direction: column;
padding: @padding-sm;
min-height: 100%;
}
.logs-pane-actions {
display: flex;
justify-content: flex-end;
padding: @padding-sm 0;
flex-grow: 1;
align-items: flex-end;
}
.logs-pane-actions-clear-cache {
.no-outline-ring-on-click;
margin-right: @margin-sm;
}
.log-entry {
margin-bottom: @margin-sm;
border-radius: @border-radius-base;
overflow: hidden;
}
.log-entry-header {
padding: 3px @padding-sm;
display: flex;
align-items: flex-start;
border-radius: @border-radius-base @border-radius-base 0 0;
color: #fff;
}
.log-entry-header-error {
background-color: @ol-red;
}
.log-entry-header-link-error {
.btn-alert-variant(@ol-red);
}
.log-entry-header-warning {
background-color: @orange;
}
.log-entry-header-link-warning {
.btn-alert-variant(@orange);
}
.log-entry-header-typesetting {
background-color: @ol-blue;
}
.log-entry-header-link-typesetting {
.btn-alert-variant(@ol-blue);
}
.log-entry-header-raw,
.log-entry-header-info {
background-color: @ol-blue-gray-4;
}
.log-entry-header-link-raw,
.log-entry-header-link-info {
.btn-alert-variant(@ol-blue-gray-4);
}
.log-entry-header-success {
background-color: @green;
}
.log-entry-header-link-success {
.btn-alert-variant(@green);
}
.log-entry-header-title,
.log-entry-header-link {
font-family: @font-family-sans-serif;
font-size: @font-size-base;
line-height: @line-height-base;
font-weight: 700;
flex-grow: 1;
margin: 0;
color: #fff;
}
.log-entry-header-icon-container {
margin-right: @margin-sm;
}
.log-entry-header-link {
display: flex;
align-items: center;
border-radius: 9999px;
border-width: 0;
flex-grow: 0;
text-align: right;
margin-left: @margin-sm;
max-width: 33%;
padding: 0 @padding-xs;
&:hover,
&:focus {
text-decoration: none;
outline: 0;
color: #fff;
}
&:focus {
text-decoration: none;
}
}
.log-entry-header-link-location {
white-space: nowrap;
direction: rtl;
text-overflow: ellipsis;
overflow: hidden;
padding: 0 @padding-xs;
}
.log-entry-content {
&:empty {
display: none;
}
background-color: #fff;
padding: @padding-sm;
}
.log-entry-content-raw-container {
background-color: @ol-blue-gray-1;
border-radius: @border-radius-base;
overflow: hidden;
margin-top: @margin-sm;
}
.log-entry-content-raw {
font-size: @font-size-extra-small;
color: @ol-blue-gray-4;
padding: @padding-sm;
margin: 0;
white-space: pre-wrap;
}
.log-entry-content-button-container {
position: relative;
height: 40px;
margin-top: 0;
transition:
margin 0.15s ease-in-out,
opacity 0.15s ease-in-out;
padding-bottom: @padding-sm;
text-align: center;
background-image: linear-gradient(0, @ol-blue-gray-1, transparent);
border-radius: 0 0 @border-radius-base @border-radius-base;
}
.log-entry-content-button-container-collapsed {
margin-top: -40px;
}
.log-entry-btn-expand-collapse {
position: relative;
z-index: 1;
.no-outline-ring-on-click;
}
.log-entry-formatted-content,
.log-entry-content-link {
font-size: @font-size-small;
margin-top: @margin-xs;
&:first-of-type {
margin-top: 0;
}
}
.log-location-tooltip {
word-break: break-all;
&.tooltip.in {
opacity: 1;
}
& > .tooltip-inner {
max-width: 450px;
text-align: left;
}
}

77
services/web/frontend/stylesheets/app/editor/math-preview.less Normal file
View File

@@ -0,0 +1,77 @@
.ol-cm-math-tooltip-container {
position: relative;
overflow: visible;
border: 0px !important;
background-color: transparent !important;
}
.ol-cm-math-tooltip {
display: flex;
gap: 8px;
overflow: auto;
padding: 8px;
border-radius: 4px;
max-height: 200px;
max-width: 800px;
margin-top: 10px;
.dropdown {
position: static;
}
}
.math-tooltip-options-toggle {
border: none;
padding: 0;
width: 20px;
height: 20px;
background-color: transparent;
color: black !important;
&:focus {
background-color: transparent;
}
&:hover,
&:active {
background-color: @neutral-20;
}
}
.math-preview-tooltip-menu {
top: 28px;
right: 8px;
}
.dropdown-menu {
.math-preview-tooltip-option {
a {
display: flex;
gap: 16px;
align-items: center;
}
div {
padding: 0;
}
}
}
.math-preview-tooltip-option-content {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.math-preview-tooltip-option-label {
color: @content-primary;
}
.math-preview-tooltip-option-description {
color: @content-secondary;
font-size: 12px;
}
.math-preview-tooltip-option-shortcut {
color: @content-secondary;
}

45
services/web/frontend/stylesheets/app/editor/online-users.less Normal file
View File

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

192
services/web/frontend/stylesheets/app/editor/outline.less Normal file
View File

@@ -0,0 +1,192 @@
.outline-container {
width: 100%;
height: 100%;
background-color: @file-tree-bg;
}
.outline-pane {
display: flex;
flex-flow: column;
height: 100%;
font-size: @font-size-small;
color: @file-tree-item-color;
}
.outline-pane-disabled {
opacity: 0.5;
}
.documentation-btn-container {
.toolbar-small-mixin;
.toolbar-alt-mixin;
display: flex;
align-items: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
& *,
& :hover {
color: @white;
text-decoration: none;
}
&:hover {
background-color: @outline-header-hover-bg;
}
}
.documentation-close {
padding: 0;
}
.outline-header {
.toolbar-small-mixin;
.toolbar-alt-mixin;
display: flex;
flex-shrink: 0;
border-bottom: 1px solid @toolbar-border-color;
border-top: 1px solid @toolbar-border-color;
}
.outline-header-expand-collapse-btn {
display: flex;
align-items: center;
background-color: transparent;
border: 0;
padding: 0 (@outline-h-rhythm * 0.25) 0 0;
font-size: inherit;
vertical-align: inherit;
color: @file-tree-item-color;
flex: 1 0 100%;
text-align: left;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
&:hover,
&:focus {
outline: 0;
}
&:hover {
background-color: @outline-header-hover-bg;
}
&:hover[disabled] {
background-color: transparent;
}
}
.outline-header-name {
display: inline-block;
font-family: @font-family-sans-serif;
font-size: @font-size-small;
color: @file-tree-item-color;
font-weight: 700;
margin: 0;
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.outline-body {
overflow-y: auto;
background-color: @file-tree-bg;
padding-right: @outline-h-rhythm * 0.25;
}
.outline-body-no-elements {
color: @outline-no-items-color;
text-align: center;
padding: @outline-v-rhythm @outline-h-rhythm (@outline-v-rhythm * 2);
margin-right: -(@outline-h-rhythm * 0.25);
}
.outline-body-link {
display: block;
color: @file-tree-item-color;
text-decoration: underline;
&:hover,
&:focus {
color: @file-tree-item-color;
text-decoration: underline;
}
}
.outline-item-list {
position: relative;
list-style: none;
padding-left: @outline-h-rhythm;
&::before {
content: '';
background-color: @outline-line-guide-color;
top: @outline-h-rhythm / 4;
bottom: @outline-h-rhythm / 4;
width: 1px;
left: (@outline-h-rhythm * 1.5);
position: absolute;
}
&.outline-item-list-root {
padding-left: 0;
&::before {
left: (@outline-h-rhythm * 0.5);
}
}
}
.outline-item-no-children {
padding-left: @outline-h-rhythm - @outline-item-h-padding;
}
.outline-item-row {
display: flex;
overflow: hidden;
white-space: nowrap;
}
.outline-item-expand-collapse-btn {
display: inline;
border: 0;
padding: 0;
font-size: inherit;
vertical-align: inherit;
position: relative;
z-index: 1;
background-color: @file-tree-bg;
color: @outline-expand-collapse-color;
margin-right: -(@outline-item-h-padding);
border-radius: @border-radius-base;
&:hover,
&:focus {
outline: 0;
}
&:hover {
background-color: @file-tree-item-hover-bg;
}
}
.outline-item-link {
display: inline;
color: @file-tree-item-color;
background-color: transparent;
border: 0;
position: relative;
z-index: 1;
padding: 0 @outline-item-h-padding;
line-height: @outline-v-rhythm;
border-radius: @border-radius-base;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
&:hover,
&:focus {
outline: 0;
background-color: @file-tree-item-hover-bg;
}
}
.outline-item-link-highlight {
background-color: @outline-highlight-bg;
}
.outline-caret-icon {
width: @outline-h-rhythm;
font-size: 17px;
text-align: center;
}

554
services/web/frontend/stylesheets/app/editor/pdf.less Normal file
View File

@@ -0,0 +1,554 @@
.pdf .toolbar.toolbar-pdf {
.toolbar-small-mixin;
.toolbar-alt-mixin;
padding-right: 5px;
margin-left: 0;
.auto-compile-status {
color: white;
margin-right: (@line-height-computed / 2);
i {
color: @brand-danger;
}
}
.auto-compile-status when (@is-overleaf-light = true) {
color: @ol-blue-gray-3;
}
}
.toolbar-pdf-orphan,
.toolbar-pdf-left,
.toolbar-pdf-right,
.toolbar-pdf-controls {
display: flex;
align-items: center;
align-self: stretch;
}
.toolbar-pdf-orphan,
.toolbar-pdf-controls {
flex: 1 1 100%;
}
.toolbar-pdf-controls {
margin-right: 4px;
justify-content: flex-end;
}
.toolbar-pdf-right {
flex: 1;
justify-content: flex-end;
}
.toolbar-pdf-orphan {
justify-content: center;
color: @toolbar-btn-color;
.btn {
margin-left: @margin-xs;
}
}
.btn-toggle-logs {
&:focus,
&:active:focus {
outline: none;
}
}
.pdf-toolbar-btn {
display: inline-block;
color: @toolbar-btn-color;
background-color: transparent;
padding: 4px 2px;
line-height: 1;
height: 24px;
border-radius: @border-radius-base;
&:hover,
&:active,
&:focus {
color: @toolbar-btn-color;
}
&:hover {
&:not(:disabled) {
background-color: @pdf-toolbar-btn-hover-color;
}
}
.label {
position: absolute;
top: 0;
right: 0;
padding: 0.15em 0.6em 0.2em;
font-size: 60%;
pointer-events: none;
}
&.log-btn {
border: none;
margin-right: 3px;
&.active {
color: white;
background-color: @link-color;
box-shadow: @toolbar-icon-btn-hover-boxshadow;
opacity: 0.65;
&:hover {
&:not(:disabled) {
background-color: transparent;
color: @toolbar-btn-color;
}
}
}
&:focus {
outline: none;
}
}
}
.pdf {
background-color: @pdf-bg;
}
.pdf-viewer,
.pdf-errors,
.pdf-uncompiled {
.full-size;
top: @pdf-top-offset;
}
.pdf-errors,
.pdf-uncompiled,
.pdf-validation-problems {
padding: @line-height-computed / 2;
}
.pdf-uncompiled {
.fa {
color: @blue;
}
}
.toolbar-text {
padding-left: @padding-xs;
}
.pdf-viewer {
iframe {
width: 100%;
height: 100%;
border: none;
}
.pdfjs-viewer {
.full-size;
background-color: @pdfjs-bg;
overflow: scroll;
.canvasWrapper > canvas,
div.pdf-canvas {
background: white;
box-shadow: @pdf-page-shadow-color 0px 0px 10px;
}
div.pdf-canvas.pdfng-empty {
background-color: white;
}
div.pdf-canvas.pdfng-loading {
background-color: white;
}
.page-container {
margin: 10px auto;
padding: 0 10px;
box-sizing: content-box;
user-select: none;
}
.page {
box-sizing: content-box;
margin-left: auto;
margin-right: auto;
box-shadow: 0 0 8px #bbb;
border: none;
margin-top: 10px;
margin-bottom: 10px;
}
.pdfjs-viewer-inner {
position: absolute;
overflow-y: scroll;
width: 100%;
height: 100%;
-webkit-font-smoothing: initial;
-moz-osx-font-smoothing: initial;
/* fix review-panel overflow issue, see: https://github.com/overleaf/internal/issues/6781#issuecomment-1112708638 */
.pdfViewer {
min-height: 100%;
}
}
&:focus-within {
outline: none;
}
/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
.textLayer br::selection {
background: transparent;
}
}
.progress-thin {
position: absolute;
top: -2px;
height: 3px;
left: 0;
right: 0;
.progress-bar {
height: 100%;
background-color: @link-color;
}
}
}
.pdfjs-viewer-controls {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
}
.pdfjs-zoom-controls {
border-left: 1px solid rgba(125, 125, 125, 0.3);
}
.pdfjs-toolbar-buttons {
display: flex;
gap: 8px;
margin-left: 8px;
margin-right: 8px;
}
.pdfjs-toolbar-button {
padding: 2px !important;
display: flex;
align-items: center;
&:hover {
color: @toolbar-btn-color;
}
}
.pdfjs-zoom-dropdown-button {
width: 60px;
text-align: right;
font-size: 14px;
font-weight: normal;
.caret {
margin-left: 4px;
}
}
.pdfjs-zoom-dropdown-mac-shortcut-char {
display: inline-block;
width: 1em;
text-align: center;
}
.pdfjs-custom-zoom-menu-item {
a:hover {
background-color: initial !important;
color: initial !important;
cursor: initial !important;
}
&.disabled {
a {
color: initial !important;
}
}
}
.pdfjs-page-number-input {
color: @toolbar-btn-color;
font-size: 14px;
padding: 8px 8px 8px 0;
display: flex;
align-items: center;
gap: 4px;
input {
color: initial;
border: 1px solid @neutral-60;
width: 32px;
height: 24px;
border-radius: @border-radius-base;
text-align: center;
}
}
.pdfjs-viewer-controls-small {
display: flex;
align-items: center;
gap: 8px;
}
.pdfjs-toolbar-popover-button {
padding: 2px !important;
display: flex;
align-items: center;
}
.pdfjs-toolbar-popover {
background-color: @editor-toolbar-bg;
border-radius: 4px;
.arrow {
display: none;
}
button {
background-color: transparent;
color: @toolbar-btn-color;
}
.popover-content {
display: flex;
align-items: center;
padding: 0;
}
}
// The new viewer UI has overflow on the inner element,
// so disable the overflow on the outer element
.pdf-viewer .pdfjs-viewer.pdfjs-viewer-outer {
overflow: hidden;
}
:fullscreen {
.pdfViewer {
min-height: auto !important;
}
.pdfjs-viewer-inner {
overflow-y: hidden !important;
display: flex;
align-items: center;
justify-content: center;
}
}
.synctex-controls {
margin-right: -8px;
position: absolute;
z-index: @synctex-controls-z-index;
padding: @synctex-controls-padding;
top: 68px;
}
.synctex-control:not(.detach-synctex-control) {
@ol-synctex-control-size: 24px;
align-items: center;
display: flex;
justify-content: center;
font-size: 1em;
margin-bottom: @ol-synctex-control-size / 2;
width: @ol-synctex-control-size;
height: @ol-synctex-control-size;
border-radius: @ol-synctex-control-size / 2;
padding: 0 0 2px;
background-color: fade(@btn-default-bg, 80%);
transition: background 0.15s ease;
color: white;
border-color: transparent;
&:focus:not(:focus-visible) {
outline: none;
}
&[disabled] {
opacity: 1;
background-color: fade(@btn-default-bg, 60%);
}
}
.synctex-control {
> .synctex-control-icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
> .synctex-spin-icon {
margin-top: 2px;
}
}
.editor-dark {
.pdfjs-viewer {
background-color: lighten(@editor-dark-background-color, 10%);
}
.pdf .toolbar {
.toolbar-right a {
i {
border-color: @gray;
}
&:hover {
i {
border-color: @gray-light;
}
}
}
}
}
.keyboard-tooltip {
.tooltip-inner {
max-width: none;
}
}
.keyboard-shortcut {
white-space: nowrap;
}
@keyframes expand-feedback-area {
from {
max-height: 0;
}
to {
max-height: 500px;
}
}
.card-hint:extend(.card-thin) {
margin-top: 10px;
padding-bottom: 7px;
cursor: default;
&-icon-container {
background: currentColor;
width: 2.5rem;
height: 2.5rem;
font-size: 1.5rem;
text-align: center;
border-radius: 50%;
float: left;
margin-right: 10px;
.fa {
color: #fff;
}
.alert-danger & {
color: @state-danger-border;
}
.alert-warning & {
color: @state-warning-border;
}
.alert-info & {
color: @state-info-border;
}
}
&-text,
&-feedback-label {
color: @log-hints-color;
font-size: 0.9rem;
margin-bottom: 20px;
}
&-text {
min-height: 35px;
}
&-feedback-label {
font-size: inherit;
margin-right: 0.5em;
margin-bottom: 0;
font-weight: normal;
}
&-ext-link,
&-feedback {
display: inline-block;
font-size: 0.8rem;
}
&-footer a,
&-text a {
.alert-danger & {
color: @state-danger-text;
}
.alert-warning & {
color: @state-warning-text;
}
.alert-info & {
color: @state-info-text;
}
}
&-feedback {
color: @log-hints-color;
float: right;
}
&-extra-feedback {
color: @log-hints-color;
font-size: 0.8rem;
margin-top: 10px;
padding-bottom: 5px;
animation: 0.5s ease-out expand-feedback-area;
overflow: hidden;
&-label {
margin: 5px 0 10px;
padding-top: 5px;
border-top: solid 1px @gray-lighter;
}
.radio {
margin: 5px;
}
textarea {
font-size: 0.8rem;
margin-bottom: 10px;
padding: 5px;
}
input[type='radio'] {
margin-top: 2px;
}
}
& + p {
margin-top: 20px;
}
}
.files-dropdown-container {
.pull-right();
position: relative;
}
.files-dropdown {
display: inline-block;
}
@editor-and-logs-pane-toolbars-height: @toolbar-small-height + @toolbar-height;
@btn-small-height: (@padding-small-vertical * 2)+ (@font-size-small *
@line-height-small); // 5px * 2 + 14px * 1.5 = 31px
#dropdown-files-logs-pane-list {
overflow-y: auto;
.dropdown-header {
white-space: nowrap;
}
max-height: calc(
~'100vh - ' @editor-and-logs-pane-toolbars-height ~' - ' @btn-small-height ~' - '
@margin-md
);
}

96
services/web/frontend/stylesheets/app/editor/publish-modal.less Normal file
View File

@@ -0,0 +1,96 @@
.modal-body-publish {
input[type='checkbox'] {
margin-top: 6px;
}
.gallery-export-license {
display: flex;
align-items: center;
}
.table-content-name {
width: 100%;
margin-bottom: 10px;
font-weight: 300;
}
.table-content-category {
font-weight: 300;
text-align: right;
font-style: italic;
width: 30%;
float: right;
text-transform: capitalize;
}
.table-content-category ~ .table-content-name {
width: 70%;
display: inline-block;
}
.wl-icon:before {
font-size: 14px;
}
.btn-wrapping {
min-width: 8em;
max-width: 25em;
white-space: normal;
}
.button-as-link {
color: green;
text-transform: none;
text-decoration: none;
background: none;
padding: 0;
border: none;
border-radius: 0;
font-size: 14px;
@extend a;
&:hover,
&:active,
&:focus {
color: green;
background: none;
}
text-align: left;
}
.affix-content-title {
color: @gray-light;
font-size: 1.2em;
padding-left: 10px;
}
.affix-subcontent {
margin: 5px 0 50px;
}
.overbox {
padding: @line-height-computed / 2;
background-color: white;
margin-top: @line-height-computed / 2;
border: 1px solid @gray-lighter;
border-radius: 9px;
}
.content-as-table {
.table-content-main {
display: flex;
}
.table-content-icon {
height: 100px;
width: 106px;
display: flex;
align-items: flex-start;
overflow: hidden;
* {
border: 1px solid @gray-lightest;
width: 100%;
}
}
.table-content-text {
width: calc(~'100% - 106px');
vertical-align: top;
padding-left: 15px;
}
.table-content-slogan {
height: 100px;
overflow: hidden;
}
.table-content-link {
padding-top: 10px;
}
}
}

3
services/web/frontend/stylesheets/app/editor/publish-template.less Normal file
View File

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

775
services/web/frontend/stylesheets/app/editor/review-panel-new.less Normal file
View File

@@ -0,0 +1,775 @@
.review-panel-new {
&.review-panel-container {
height: 100%;
flex-shrink: 0;
position: relative;
}
.review-panel-inner {
z-index: 6;
flex-shrink: 0;
background-color: @neutral-10;
border-left: 1px solid @neutral-20;
color: @content-primary;
font-family: @font-family-base;
line-height: @line-height-base;
font-size: @font-size-01;
box-sizing: content-box;
width: var(--review-panel-width);
min-height: var(--review-panel-height);
}
.review-panel-entry {
background-color: white;
border-radius: @border-radius-base-new;
border: 1px solid @neutral-20;
padding: @spacing-04;
width: calc(100% - @spacing-04);
margin-left: @spacing-02;
z-index: 1;
}
.review-panel-entry:hover {
// shadow-sm
box-shadow: 0px 2px 4px rgba(30, 37, 48, 0.16);
}
.review-panel-entry.review-panel-entry-disabled {
opacity: 0.5;
pointer-events: none;
}
.review-panel-entry-indicator {
display: none;
}
.review-panel-entry-content {
display: flex;
flex-direction: column;
font-size: @font-size-01;
gap: @spacing-04;
}
.review-panel-entry.review-panel-entry-selected,
.review-panel-entry.review-panel-entry-highlighted,
.review-panel-entry.review-panel-entry-textarea-focused {
margin-left: @spacing-01;
border: 1px solid @blue-50;
// shadow-md
box-shadow:
0px 4px 12px rgba(30, 37, 48, 0.12),
0px 2px 4px rgba(30, 37, 48, 0.08);
}
.review-panel-entry.review-panel-entry-focused {
z-index: 2;
}
.review-panel-entry-header {
display: flex;
justify-content: space-between;
.review-panel-entry-user {
color: @content-primary;
font-size: 110%;
}
.review-panel-entry-time {
color: @content-secondary;
}
.review-panel-entry-actions {
display: flex;
align-items: center;
gap: @spacing-03;
.btn {
background-color: transparent;
padding: 0;
height: 24px;
width: 24px;
&:hover,
&:focus {
background-color: @neutral-20;
color: @content-primary;
}
}
.review-panel-entry-actions-icon {
padding: @spacing-01;
font-size: @font-size-05;
}
}
}
.review-panel-entry-user-color-badge {
display: inline-block;
width: @spacing-04;
height: @spacing-04;
margin-right: @spacing-02;
border-radius: @border-radius-small;
}
.review-panel-change-body {
display: flex;
align-items: flex-start;
color: @content-secondary;
gap: @spacing-02;
overflow-wrap: anywhere;
}
.review-panel-content-highlight {
color: @content-primary;
text-decoration: none;
}
del.review-panel-content-highlight {
text-decoration: line-through;
}
.review-panel-entry-icon {
border-radius: @border-radius-base-new;
padding: @spacing-02;
font-size: @font-size-03;
}
.review-panel-entry-change-icon {
margin-top: -2px;
}
.review-panel-entry-icon-accept {
background-color: @green-10;
color: @green-50;
}
.review-panel-entry-icon-reject {
background-color: @red-10;
color: @red-50;
}
.review-panel-entry-icon-changed {
background-color: @neutral-20;
color: @content-secondary;
}
.review-panel-header {
position: sticky;
top: 0;
width: var(--review-panel-width);
height: var(--review-panel-header-height);
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 1px solid @rp-border-grey;
background-color: white;
text-align: center;
z-index: 4;
}
// TODO: Update this when we move the track changes menu to the new design
.rp-tc-state {
background-color: white;
max-height: calc(
100vh - var(--review-panel-top) - var(--review-panel-header-height)
);
overflow-y: auto;
}
.review-panel-tools {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 4px;
padding-right: 12px;
flex-shrink: 0;
flex-basis: 32px;
}
.review-panel-resolved-comments-toggle {
background-color: @gray-lightest;
font-size: 14px;
color: lighten(@rp-type-blue, 25%);
border: solid 1px @rp-border-grey;
border-radius: 3px;
padding: 0 4px;
height: 22px;
width: 22px;
line-height: 1.4;
display: flex;
align-items: center;
justify-content: center;
&:hover,
&:focus {
text-decoration: none;
color: @rp-type-blue;
}
}
.review-panel-resolved-comments-toggle-reviewer-role {
display: flex;
align-items: center;
border: none;
background-color: transparent;
color: @content-primary;
padding: 2px;
border-radius: 100%;
&:hover,
&:focus {
background-color: @neutral-20;
}
}
.track-changes-indicator-circle {
width: 8px;
height: 8px;
border-radius: 100%;
background-color: @green-50;
}
.track-changes-menu-button {
border: none;
background: none;
padding: 0;
display: flex;
align-items: center;
gap: 4px;
font-size: @font-size-02;
i {
width: 8px;
}
}
.review-panel-heading {
display: flex;
align-items: center;
padding: 6px 4px;
gap: 2px;
.review-panel-label {
font-family: Lato, sans-serif;
font-size: @font-size-02;
font-weight: bold;
margin: 0;
flex: 1;
text-align: start;
}
.review-panel-split-test-badge {
margin-left: 4px;
}
.review-panel-close-button {
display: flex;
align-items: center;
border: none;
background-color: transparent;
color: @content-primary;
padding: 2px;
&:hover,
&:focus {
background-color: @neutral-20;
}
}
}
&.review-panel-resolved-comments {
width: 280px;
.popover-content {
background-color: @neutral-10;
overflow-y: auto;
max-height: calc(100vh - 180px);
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 6px;
}
}
.review-panel-resolved-disabled {
opacity: 0.5;
pointer-events: none;
}
.review-panel-resolved-comments-empty {
text-align: center;
}
.review-panel-resolved-comments-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
}
.review-panel-resolved-comments-label {
font-weight: bold;
font-size: 14px;
}
.review-panel-resolved-comments-count {
color: @content-secondary;
background-color: @neutral-20;
font-weight: normal;
padding: 4px;
}
.review-panel-resolved-comment {
background-color: white;
border-radius: @border-radius-base-new;
padding: @spacing-04;
display: flex;
flex-direction: column;
gap: @spacing-04;
}
.review-panel-resolved-comment-header {
display: flex;
justify-content: space-between;
align-items: center;
color: @content-secondary;
font-size: 12px;
}
.review-panel-resolved-comment-filename {
color: @content-primary;
}
.review-panel-resolved-comment-buttons {
display: flex;
align-items: center;
gap: @spacing-03;
.btn {
background-color: transparent;
color: @content-primary;
padding: @spacing-01;
height: 24px;
width: 24px;
&:hover,
&:focus {
background-color: @neutral-20;
}
}
.material-symbols {
font-size: 20px;
}
}
.review-panel-resolved-comment-quoted-text {
background-color: @neutral-20;
border-radius: @border-radius-base-new;
padding: 4px 8px;
.btn-inline-link {
font-size: 12px;
}
}
.review-panel-resolved-comment-quoted-text-label {
color: @content-secondary;
font-size: 12px;
}
.review-panel-resolved-comment-quoted-text-quote {
color: @content-primary;
overflow-wrap: anywhere;
font-size: 14px;
}
.review-panel-comment-wrapper {
display: flex;
gap: @spacing-04;
}
.review-panel-comment {
flex-grow: 1;
}
.review-panel-comment-reply-divider {
border-left: 2px solid @yellow-20;
}
.review-panel-comment-body {
font-size: @font-size-02;
color: @content-primary;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.review-panel-expandable-content {
display: inline;
padding-right: var(--spacing-02);
}
.review-panel-expandable-inline {
display: inline;
}
.review-panel-expandable-links {
.btn-inline-link {
text-decoration: none;
line-height: 1;
}
.btn-inline-link:hover {
text-decoration: underline;
}
}
.review-panel-comment-input {
width: 100%;
font-size: @rp-base-font-size;
padding: 2px @spacing-03;
border-radius: @border-radius-base-new;
border: solid 1px @neutral-60;
resize: vertical;
color: @rp-type-darkgrey;
background-color: #fff;
height: 25px;
min-height: 25px;
overflow-x: hidden;
max-height: 400px;
}
.review-panel-comment-edit {
margin-top: var(--spacing-03);
}
.review-panel-empty-state {
position: fixed;
width: var(--review-panel-width);
top: 0;
bottom: 0;
pointer-events: none;
}
.review-panel-empty-state-inner {
position: sticky;
top: 50%;
transform: translateY(-50%);
width: 100%;
padding-left: 16px;
padding-right: 16px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
p {
margin-bottom: 0;
text-align: center;
}
}
.review-panel-empty-state-comment-icon {
width: 80px;
height: 80px;
background-color: white;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
.material-symbols {
font-size: 32px;
}
}
.review-panel-overview {
padding: 4px;
position: absolute;
top: var(--review-panel-header-height);
bottom: 59px;
width: 100%;
overflow: auto;
overscroll-behavior-block: none;
.review-panel-entry {
margin-left: 0;
width: 100%;
}
}
.collapsible-file-header {
all: unset;
padding: 6px 8px;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
width: 100%;
}
.review-panel-overfile-divider {
border-bottom: 1px solid #e7e9ee;
margin: 2px 0;
}
.review-panel-overview-file-entries {
display: flex;
flex-direction: column;
gap: 4px;
overflow: hidden;
padding-top: 4px;
padding-bottom: 6px;
}
.collapsible-file-header-count {
background-color: @neutral-20;
padding: 2px 4px;
margin-left: auto;
border-radius: @border-radius-base;
}
.review-panel-footer {
position: fixed;
height: 60px;
bottom: 0;
width: var(--review-panel-width);
z-index: 2;
background-color: white;
border-top: 1px solid @rp-border-grey;
display: flex;
.review-panel-tab {
flex: 0 0 50%;
padding: 6px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
border: 0;
border-top: solid 3px transparent;
background: none;
color: @content-secondary;
font-size: @font-size-02;
&:hover,
&:focus {
text-decoration: none;
color: @content-primary;
}
&-active {
color: @content-primary;
border-top: solid 3px @green-50;
}
}
}
.review-panel-add-comment-textarea {
padding: 2px 6px;
resize: vertical;
min-height: 44px;
}
.review-panel-add-comment-buttons {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.review-panel-add-comment-cancel-button {
background-color: transparent;
&:hover,
&:focus {
background-color: @neutral-20;
color: @content-primary;
}
}
.review-panel-more-comments-button-container {
position: fixed;
width: var(--review-panel-width);
display: flex;
justify-content: center;
z-index: 3;
&.downwards {
// TODO: fix this to not use a magic number when we have updated the footer ui
top: calc(100% - 102px);
}
&.upwards {
top: calc(
var(--review-panel-top) + var(--review-panel-header-height) + 16px
);
}
}
// Would not be migrated
.review-panel-more-comments-button {
display: flex;
justify-content: center;
align-items: center;
}
&.review-panel-subview-overview {
&.review-panel-container {
overflow-y: hidden;
position: sticky;
top: 0;
}
.review-panel-inner {
min-height: auto;
height: 100%;
overflow: hidden;
}
}
&.review-panel-mini {
overflow: visible !important;
.review-panel-inner {
width: 24px;
}
.review-panel-entry {
margin-left: 0;
background-color: transparent;
border: none;
width: 100%;
}
.review-panel-entry:hover,
.review-panel-entry-focused,
.review-panel-entry-highlighted {
box-shadow: none;
}
.review-panel-entry-indicator {
position: absolute;
left: 0;
top: 0;
display: flex;
color: @content-secondary;
cursor: pointer;
}
.review-panel-entry-content {
display: none;
background: white;
border: 1px solid @rp-border-grey;
border-radius: @border-radius-base-new;
width: 200px;
padding: @spacing-02;
}
.review-panel-entry-hover {
.review-panel-entry-content {
display: flex;
position: absolute;
left: -200px;
top: 0;
padding: @spacing-04;
}
}
.review-panel-more-comments-button-container {
display: none;
}
.review-panel-footer {
display: none;
}
}
}
.review-tooltip-menu {
display: flex;
box-shadow: 0px 2px 4px 0px #1e253029;
border: none;
border-radius: 4px;
padding: 4px;
gap: 4px;
transition: opacity 0.05s ease-in;
opacity: 0;
}
.review-tooltip-menu-visible {
opacity: 1;
}
.review-tooltip-menu-button {
background-color: inherit;
border: none;
display: flex;
align-items: center;
gap: 2px;
padding: 2px;
border-radius: @border-radius-base;
}
.review-tooltip-menu-divider {
width: 1px;
background-color: #e7e9ee;
}
.review-tooltip-add-comment-button {
padding: 2px 8px;
}
.review-panel-tooltip {
pointer-events: none; // this is to prevent mouseLeave event from firing when hovering over the tooltip
}
.review-panel-in-editor-widgets {
position: sticky;
top: 0;
right: 0;
font-size: 11px;
z-index: 2;
font-family: @font-family-sans-serif;
.review-panel-in-editor-widgets-inner {
position: absolute;
top: 0;
right: 0;
display: flex;
flex-direction: column;
}
.review-panel-track-changes-indicator {
border: 0;
}
}
.review-panel-track-changes-indicator {
display: block;
padding: 5px 10px;
background-color: rgba(240, 240, 240, 0.9);
color: @rp-type-blue;
text-align: center;
border-bottom-left-radius: 3px;
white-space: nowrap;
&.review-panel-track-changes-indicator-on-dark {
background-color: rgba(88, 88, 88, 0.8);
color: #fff;
&:hover,
&:focus {
background-color: rgba(88, 88, 88, 1);
color: #fff;
}
}
&:hover,
&:focus {
outline: 0;
text-decoration: none;
background-color: rgba(240, 240, 240, 1);
color: @rp-type-blue;
}
}

1105
services/web/frontend/stylesheets/app/editor/review-panel.less Normal file
View File

File diff suppressed because it is too large Load Diff

70
services/web/frontend/stylesheets/app/editor/search.less Normal file
View File

@@ -0,0 +1,70 @@
.ace_search {
background-color: @gray-lightest;
border: 1px solid @editor-border-color;
border-top: 0 none;
width: 350px;
overflow: hidden;
position: absolute;
top: 0px;
z-index: 99;
white-space: normal;
padding: @line-height-computed / 4;
font-family: @font-family-sans-serif;
a,
button {
i {
pointer-events: none;
}
}
.ace_searchbtn_close {
position: absolute;
top: 6px;
right: 12px;
color: @gray;
&:hover {
color: @gray-dark;
}
}
.ace_search_form,
.ace_replace_form {
margin-bottom: @line-height-computed / 4;
input {
width: 210px;
display: inline-block;
vertical-align: middle;
}
.btn-group {
display: inline-block;
}
}
.ace_nomatch {
input {
border-color: @red;
}
}
.ace_search_options {
display: flex;
justify-content: space-between;
}
.ace_search_counter {
color: @editor-search-count-color;
margin: auto 0;
}
}
.ace_search.left {
border-left: 0 none;
border-radius: 0px 0px @border-radius-base 0px;
left: 0;
}
.ace_search.right {
border-radius: 0px 0px 0px @border-radius-base;
border-right: 0 none;
right: 0;
}

212
services/web/frontend/stylesheets/app/editor/share.less Normal file
View File

@@ -0,0 +1,212 @@
.modal-body-share {
h3 {
border-bottom: 1px solid @gray-lighter;
padding-bottom: @line-height-computed / 4;
margin: 0;
font-size: 1rem;
}
.project-member.form-group {
margin-bottom: 0;
}
.project-member .form-control-static.text-center {
padding-top: 0;
}
.project-member .remove-button {
font-size: inherit;
}
.project-member {
padding: (@line-height-computed / 2) 0;
font-size: 16px;
span {
padding-right: @line-height-computed / 2;
}
}
.project-invite,
.public-access-level {
font-size: 14px;
padding: (@line-height-computed / 2) 0;
border-bottom: 1px solid @gray-lighter;
}
.public-access-level {
margin-top: @line-height-computed / 4;
font-size: 13px;
padding-bottom: @modal-inner-padding;
.access-token-display-area {
margin-top: @line-height-computed / 4;
.access-token-wrapper {
padding-top: @line-height-computed / 4;
.access-token {
margin-top: @line-height-computed / 4;
background-color: @gray-lightest;
border: 1px solid @gray-lighter;
padding: 6px 12px 6px 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
.fa-chevron-down,
.fa-chevron-up {
vertical-align: top;
color: @neutral-70;
}
.btn-chevron {
padding: 0 (@line-height-computed / 2);
}
}
.public-access-level.public-access-level-notice {
background-color: @gray-lightest;
border-bottom: none;
margin-top: @margin-md;
padding-top: @margin-md;
}
.project-member,
.project-invite {
&:hover {
background-color: @gray-lightest;
}
}
.project-member {
.select-trigger {
color: @neutral-70;
border: none;
padding: 0 10px 5px 10px;
}
.select-items {
max-height: 300px;
width: 300px;
li:last-child {
color: @brand-danger;
}
}
.project-member-email-icon {
display: grid;
grid-template-columns: 2em auto;
align-items: center;
padding-bottom: 5px;
.fa-warning {
color: @brand-warning;
}
.subtitle {
font-size: @font-size-small;
}
}
}
.project-member .text-left,
.project-invite .text-left {
padding-left: 25px;
}
.invite-controls {
.small {
padding: 2px;
margin-bottom: 0;
}
padding: @line-height-computed / 2;
background-color: @gray-lightest;
margin-top: @line-height-computed / 2;
form {
.form-group {
margin-bottom: @line-height-computed / 2;
&:last-child {
margin-bottom: 0;
}
}
.privileges {
display: inline-block;
width: auto;
}
.tags-new .privileges {
background: transparent;
width: auto;
height: 30px;
font-size: 14px;
border: none;
border-right: 5px solid transparent;
}
}
.add-collaborators-upgrade {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: var(--spacing-08);
.upgrade-actions {
display: flex;
gap: @margin-md;
}
}
}
.rbt-menu > .dropdown-item {
display: block;
padding: 0.25rem 1rem;
color: #212529;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
text-decoration: none;
background-color: @gray-lightest;
}
}
}
.copy-button:focus-within {
outline: none;
}
.modal-link-share {
.invite-controls {
padding: 0;
background-color: transparent;
margin-top: 0;
}
.public-access-level {
border: none;
}
.invite-warning {
margin-bottom: @line-height-computed / 2;
}
.project-member-select {
padding: 0;
.fa-warning {
color: @brand-warning;
}
}
.project-member.form-group,
.project-member.row {
margin: 0 -30px;
}
.project-member .select-wrapper {
display: inline-block;
position: absolute;
right: 0;
.select-trigger {
gap: @spacing-02;
}
}
.project-member.row {
padding-right: 1.28571429em;
}
}

13
services/web/frontend/stylesheets/app/editor/table-generator-column-width-modal.less Normal file
View File

@@ -0,0 +1,13 @@
.table-generator-width-modal {
.table-generator-width-label {
width: 100%;
}
.table-generator-usepackage-copy {
display: flex;
justify-content: space-between;
padding: 6px 12px;
background: #f4f5f6;
border: 1px solid #d0d5dd;
}
}

22
services/web/frontend/stylesheets/app/editor/toast.less Normal file
View File

@@ -0,0 +1,22 @@
.toast-container {
pointer-events: none;
display: flex;
flex-direction: column;
gap: 12px;
justify-content: space-between;
}
.toast-content {
pointer-events: auto;
}
.global-toasts {
position: fixed;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
[role='alert'] {
z-index: 20;
}
}

460
services/web/frontend/stylesheets/app/editor/toolbar.less Normal file
View File

@@ -0,0 +1,460 @@
@toolbar-height: 40px;
.toolbar {
display: flex;
align-items: center;
height: @toolbar-height;
border-bottom: @toolbar-border-bottom;
> a,
.toolbar-right > a,
button {
position: relative;
.label {
position: absolute;
top: 0;
right: 0;
padding: 0.15em 0.6em 0.2em;
font-size: 60%;
pointer-events: none; // Labels were capturing button/anchor clicks.
}
}
.toolbar-right,
.toolbar-left {
button {
background: transparent;
box-shadow: none;
}
}
.toolbar-right .back-to-editor-btn {
margin-right: 27px;
display: flex;
align-items: center;
.btn-secondary;
.toolbar-label {
margin-bottom: 0;
}
}
> a:focus,
button:focus {
outline: none;
}
> a:not(.btn),
> button,
.toolbar-left > a:not(.btn),
.toolbar-left > button,
.toolbar-right > a:not(.btn),
.toolbar-right > button:not(.back-to-editor-btn) {
display: inline-block;
color: @toolbar-icon-btn-color;
background-color: transparent;
padding: 4px 2px;
line-height: 1;
height: 24px;
border-radius: @border-radius-small;
&.toolbar-header-back-projects {
padding: 5px 10px 4px;
margin-bottom: 1px;
}
&:hover {
text-shadow: @toolbar-icon-btn-hover-shadow;
color: @toolbar-icon-btn-hover-color;
background-color: transparent;
text-decoration: none;
}
&.active,
&:active {
.label {
display: none;
}
color: white;
background-color: @link-color;
box-shadow: @toolbar-icon-btn-hover-boxshadow;
&:hover {
color: white;
}
}
}
&.toolbar-pdf > a:not(.btn) {
margin-right: 3px;
}
.btn-full-height {
border: none;
border-radius: 0;
border-right: 1px solid @toolbar-header-btn-border-color;
color: @toolbar-btn-color;
padding: 3px 10px 5px;
font-size: 20px;
max-height: 39px;
&:hover {
text-shadow: @toolbar-btn-hover-text-shadow;
background-color: @toolbar-btn-hover-bg-color;
color: @toolbar-btn-hover-color;
}
&.active,
&:active {
color: @toolbar-btn-active-color;
background-color: @toolbar-btn-active-bg-color;
box-shadow: @toolbar-btn-active-shadow;
.editor-menu-icon {
background: @editor-header-logo-background-active;
}
}
.label {
top: 4px;
right: 4px;
}
&.header-cobranding-logo-container {
height: @toolbar-height - 1;
padding: 8px 10px;
}
}
.toolbar-left {
display: flex;
float: left;
text-align: center;
align-items: center;
}
.toolbar-right {
display: flex;
align-items: center;
flex-grow: 1;
justify-content: flex-end;
.btn-full-height {
border-right: 0;
border-left: 1px solid @toolbar-header-btn-border-color;
}
}
.toolbar-center {
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
// At small screen sizes, center relative to the left menu and right buttons
width: 100%;
display: flex;
justify-content: center;
}
&.toolbar-header {
background-color: @toolbar-header-bg-color;
box-shadow: @toolbar-header-shadow;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
&.toolbar-alt {
.toolbar-alt-mixin;
}
}
.header-cobranding-logo {
display: block;
width: auto;
max-height: 100%;
}
.toolbar-small-mixin() {
height: @toolbar-small-height;
}
.toolbar-tall-mixin() {
height: @toolbar-tall-height;
padding-top: 10px;
}
.toolbar-alt-mixin() {
background-color: @toolbar-alt-bg-color;
}
.toolbar-label {
display: none;
margin: 0 4px;
font-size: @toolbar-font-size;
font-weight: 600;
margin-bottom: 2px;
vertical-align: middle;
text-align: left;
@media (min-width: @screen-md-min) {
display: inline-block;
}
&.toolbar-label-multiline {
line-height: 1.1;
}
}
.toolbar-header-upgrade-prompt {
margin-left: 10px;
@media (max-width: @screen-md-min) {
display: none;
}
}
.editor-dark {
.toolbar-alt {
background-color: darken(@editor-dark-background-color, 0%);
}
.toolbar {
border-color: @editor-dark-toolbar-border-color;
.btn-full-height {
border-color: @editor-dark-toolbar-border-color;
&:hover {
background-color: black;
color: lighten(@link-color, 10%);
}
}
&.toolbar-header {
box-shadow: none;
}
> a:not(.btn) {
color: @gray;
&:hover {
color: @gray-light;
}
}
}
}
/**************************************
Toggle Switch
***************************************/
.toggle-wrapper {
white-space: nowrap;
}
.toggle-switch {
display: inline-flex;
align-items: center;
height: @toolbar-btn-height;
margin-right: 5px;
border-radius: @btn-border-radius-base;
background-color: @toggle-switch-bg;
padding: 2px;
}
.toggle-switch-label {
display: inline-block;
float: left;
font-weight: normal;
height: 100%;
text-align: center;
margin: 0;
cursor: pointer;
user-select: none;
color: @text-color;
border-radius: @btn-border-radius-base;
transition:
color 0.12s ease-out,
background-color 0.12s ease-out,
box-shadow 0.12s ease-out;
overflow: hidden;
span {
display: flex;
align-items: center;
height: 100%;
width: 100%;
padding: 0 8px;
background-size: 200% 100%;
background-position: 0 0;
transition: background-position 0.12s ease-out;
font-size: 14px;
font-weight: bold;
}
}
.toggle-switch-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.toggle-switch-input:disabled + .toggle-switch-label {
cursor: not-allowed;
}
.toggle-switch-input:checked + .toggle-switch-label {
span {
background-position: -100% 0;
}
color: @white;
background-color: @toggle-switch-highlight-color;
border-radius: @btn-border-radius-base;
box-shadow: 0px 2px 4px rgba(30, 37, 48, 0.16);
}
.toggle-switch-input:checked:nth-child(2) + .toggle-switch-label {
span {
background-position: 100% 0;
}
}
.editor-toggle-switch {
display: flex;
align-items: center;
white-space: nowrap;
.toggle-switch {
margin-left: 5px;
}
.toggle-switch-label span {
background: none;
transition: background 0.12s ease-out;
}
.toggle-switch-label:first-of-type span {
padding-left: 8px;
}
.toggle-switch-label:last-of-type span {
padding-right: 8px;
border-right: none;
}
.badge {
margin-right: 5px;
}
}
/**************************************
Formatting buttons
***************************************/
.formatting-buttons {
width: 100%;
overflow: hidden;
}
.formatting-btn {
color: @formatting-btn-color;
background-color: @formatting-btn-bg;
padding: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
border: none;
border-left: 1px solid @formatting-btn-border;
border-radius: 0;
&:hover {
color: @formatting-btn-color;
}
&.active {
color: @toolbar-btn-active-color;
background-color: @toolbar-btn-active-bg-color;
box-shadow: @toolbar-btn-active-shadow;
&:focus {
color: @toolbar-btn-active-color;
&:not(:focus-visible) {
outline: none;
}
}
}
&:focus {
color: @formatting-btn-color;
}
}
.formatting-btn-icon {
min-width: 32px;
width: 32px;
}
.formatting-btn-icon:last-of-type {
border-right: 1px solid @formatting-btn-border;
}
.formatting-btn--more {
padding-left: 9px;
padding-right: 9px;
.caret {
margin-top: 1px;
}
}
.formatting-icon {
font-style: normal;
line-height: 1.5;
}
.formatting-icon--small {
font-size: small;
line-height: 1.9;
}
.formatting-icon--serif {
font-family: @font-family-serif;
}
.formatting-more {
margin-left: auto;
}
.formatting-menu {
min-width: auto;
max-width: 130px;
background-color: @formatting-menu-bg;
}
.formatting-menu-item {
float: left;
}
.formatting-menu-item > .formatting-btn {
border-right: none;
}
// Disable border on left-most icon in menu
.formatting-menu-item:nth-of-type(4n + 1) > .formatting-btn {
border-left: none;
}
.toolbar.toolbar-pdf > a[disabled] {
cursor: not-allowed;
.opacity(0.65);
.box-shadow(none);
}
.toolbar-btn-secondary {
height: @toolbar-btn-height;
padding-bottom: 0px;
margin-bottom: 0.5px;
}
.switch-to-editor-btn {
margin-right: 7px;
}
.switch-to-editor-btn,
.switch-to-pdf-btn {
text-align: left;
display: flex;
align-items: center;
.toolbar-btn-secondary-icon {
margin-right: 5px;
}
}

53
services/web/frontend/stylesheets/app/error-pages.less Normal file
View File

@@ -0,0 +1,53 @@
.full-height {
height: 100%;
padding: 0;
}
.error-container {
display: flex;
align-items: center;
}
.error-container.full-height {
margin-top: -(@header-height + @content-margin-vertical) / 2;
}
.error-details {
flex: 1 1 50%;
padding: @line-height-computed;
max-width: 90%;
@media (min-width: @screen-sm-min) {
padding: @line-height-computed * 2;
}
}
.error-status {
font-family: @font-family-serif;
margin-bottom: @line-height-computed;
color: @gray-dark;
font-size: @font-size-h1;
}
.error-description {
font-family: @font-family-serif;
font-size: @font-size-h3;
color: @gray;
margin-bottom: @line-height-computed;
}
.error-box {
background-color: @ol-blue-gray-1;
padding: @margin-sm;
font-family: @font-family-monospace;
margin-bottom: @line-height-computed;
}
.error-actions {
margin-top: @line-height-computed * 2;
}
.error-btn {
.btn;
.btn-primary;
display: block;
@media (min-width: @screen-sm-min) {
display: inline-block;
}
}

19
services/web/frontend/stylesheets/app/features.less Normal file
View File

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

3
services/web/frontend/stylesheets/app/front-chat-widget.less Normal file
View File

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

3
services/web/frontend/stylesheets/app/grammarly.less Normal file
View File

@@ -0,0 +1,3 @@
grammarly-extension {
mix-blend-mode: normal !important;
}

45
services/web/frontend/stylesheets/app/group-subscription-modal.less Normal file
View File

@@ -0,0 +1,45 @@
#change-to-group .modal-header h4 {
line-height: 1.33rem;
.h5 {
font-family: @font-family-sans-serif;
}
}
.group-subscription-modal {
.modal-header {
text-align: center;
}
.group-plan-option {
display: block;
span {
padding-left: 5px;
font-weight: normal;
}
}
.educational-discount-badge {
height: 50px;
padding-top: 25px;
p {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
font-size: @font-size-small;
}
.applied {
background-color: rgba(@ol-dark-green, 0.1);
color: @ol-dark-green;
}
.ineligible {
background-color: @ol-blue-gray-0;
color: @ol-blue-gray-4;
}
}
}

5
services/web/frontend/stylesheets/app/import.less vendored Normal file
View File

@@ -0,0 +1,5 @@
.v2-import__img {
.img-responsive;
.center-block;
width: 80%;
}

38
services/web/frontend/stylesheets/app/institution-hub.less Normal file
View File

@@ -0,0 +1,38 @@
#institution-hub {
.section_header {
.dropdown {
margin-right: 10px;
}
}
#usage {
.recent-activity {
.overbox {
font-size: 16px;
}
.hub-big-number,
.hub-number-label,
.worked-on {
display: block;
width: 50%;
}
.hub-big-number {
padding-right: 10px;
text-align: right;
}
.hub-number-label,
.worked-on {
float: right;
}
.hub-number-label {
&:nth-child(odd) {
margin-top: 16px;
}
}
.worked-on {
color: @text-small-color;
font-style: italic;
}
}
}
}

43
services/web/frontend/stylesheets/app/invite.less Normal file
View File

@@ -0,0 +1,43 @@
.project-invite-accept {
form {
padding-top: 15px;
}
margin-bottom: 30px;
}
.project-name-tooltip .tooltip-inner {
max-width: 80vw;
overflow: hidden;
text-overflow: ellipsis;
}
.project-invite-invalid {
.actions {
padding-top: 15px;
}
margin-bottom: 30px;
}
.link-sharing-invite {
font-family: 'Noto Sans', sans-serif;
}
.link-sharing-invite-header {
// heading-lg
font-size: var(--font-size-07);
line-height: var(--line-height-06);
}
.sharing-updates {
font-family: 'Noto Sans', sans-serif;
h1 {
font-family: 'Noto Sans', sans-serif;
// heading-sm
font-size: var(--font-size-05);
line-height: var(--line-height-04);
}
small {
font-size: var(--font-size-02);
line-height: var(--line-height-02);
}
}

51
services/web/frontend/stylesheets/app/list/v1-import-modal.less Normal file
View File

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

307
services/web/frontend/stylesheets/app/login-register.less Normal file
View File

@@ -0,0 +1,307 @@
@brand-ieee-color: #00629b;
@brand-google-color: #276fea; // Not the "official" color but modified for a11y
@brand-twitter-color: #1da1f2;
@brand-orcid-color: #a6ce39;
.login-register-container {
max-width: 400px;
margin: 0 auto;
padding-bottom: @line-height-computed * 5;
}
.login-register-header {
padding-top: @line-height-computed;
padding-bottom: @line-height-computed - 5;
border-bottom: solid 1px @hr-border;
}
.login-register-header-heading {
margin: 0;
color: @text-color;
}
.login-register-card {
padding-top: 0;
padding-bottom: 0;
text-align: center;
}
.login-register-form {
padding: @line-height-computed;
border-bottom: solid 1px @hr-border;
&:last-child {
border-bottom-width: 0;
}
}
.login-register-text,
.login-register-hr-text-container {
margin: 0;
}
.login-register-text {
padding-bottom: 25px;
font-size: 90%;
&:last-child {
padding-bottom: 0;
}
}
.login-register-hr-text-container {
line-height: 1;
position: relative;
padding: @line-height-computed 0;
&::before {
content: '';
position: absolute;
height: 1px;
background-color: @hr-border;
top: 50%;
left: 0;
right: 0;
}
}
.login-register-hr-text {
position: relative;
background-color: #fff;
padding: 0 (@line-height-computed / 2);
}
.login-btn-icon {
position: absolute;
top: 4px;
left: 4px;
background: #fff url(../../../public/img/brand/lion.svg) center/20px no-repeat;
border-radius: 99999px;
width: 26px;
height: 26px;
&::before {
content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
}
}
.website-redesign {
.login-register-container {
max-width: 320px;
}
.login-register-text {
font-size: 0.875rem;
line-height: 1.4;
text-align: left;
&.login-register-text-center {
text-align: center;
}
}
.login-register-hr-text-container {
padding: @line-height-computed 0 calc(@line-height-computed / 2) 0;
&::before {
top: calc(@line-height-computed + @line-height-computed / 4);
}
}
.login-register-error-container {
padding-bottom: calc(@line-height-computed / 2);
}
.login-register-other-links {
padding: @line-height-computed 0;
a {
color: var(--green-50);
text-decoration: underline;
// text-decoration-;skip-ink is for letter with descender (like 'g' and 'y')
// this will force underline to not skip the descender
text-decoration-skip-ink: none;
&:hover {
color: var(--green-60);
}
// for accessibility with keyboard navigation
&:focus {
outline: 2px solid var(--green-50);
outline-offset: 1px;
}
}
}
.flex-center {
display: flex;
justify-content: center;
}
.login-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 4px 0;
}
.login-btn-icon {
position: relative;
top: unset;
left: unset;
background: unset;
border-radius: unset;
width: 20px;
height: 20px;
margin-right: 5px;
&::before {
content: unset;
}
}
.form-group {
text-align: left;
position: relative;
label {
font-size: @font-size-small;
}
}
.form-group-password {
display: flex;
position: relative;
flex-direction: column;
.form-group-password-input {
input.form-control {
padding-right: 35px;
}
}
.visibility-toggle {
position: absolute;
right: 0;
top: 0;
width: @input-height-base;
height: @input-height-base;
display: flex;
align-items: center;
justify-content: center;
border: unset;
background-color: unset;
#visibility-icon-off {
margin-top: 2px; // workaround for the icon not having the same center as the non-slashed one
}
}
}
.top-padding-computed-2 {
padding-top: @line-height-computed * 2;
}
.form-group-password-input {
display: flex;
flex-direction: column;
width: 100%;
}
.register-container {
.register-content-container {
display: flex;
background-color: #f2f4f7;
min-height: 100vh;
}
.register-form {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
padding-top: @line-height-computed * 2;
background-color: @white;
@media (max-width: @screen-sm-max) {
height: 100%;
}
.login-register-card {
max-width: 320px;
padding-bottom: @line-height-computed * 5; // for cookie banner
}
}
.register-illustration-container {
height: 100%;
display: flex;
align-items: center;
.register-illustration {
position: absolute;
left: 80px;
top: 100px;
// for wide screen
@media (min-width: 1700px) {
position: relative;
left: unset;
top: unset;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.register-main-image {
max-width: 850px;
@media (max-width: 1350px) {
max-width: 750px;
}
@media (max-width: 1150px) {
max-width: 670px;
}
}
.sticky-tags {
position: absolute;
height: 210px;
bottom: -135px;
right: 130px;
// for wide screen
@media (min-width: 1700px) {
right: calc(50% - 300px);
}
}
}
}
}
.tos-agreement-notice {
text-align: left;
font-size: 12px;
a {
color: var(--green-50);
text-decoration: underline;
// text-decoration-;skip-ink is for letter with descender (like 'g' and 'y')
// this will force underline to not skip the descender
text-decoration-skip-ink: none;
&:hover {
color: var(--green-60);
}
// for accessibility with keyboard navigation
&:focus {
outline: 2px solid var(--green-50);
outline-offset: 1px;
}
}
}
.register-header-logo {
&:focus {
outline: 2px solid var(--green-50);
}
}
}

185
services/web/frontend/stylesheets/app/metrics.less Normal file
View File

@@ -0,0 +1,185 @@
#metrics {
max-width: none;
padding: 0 30px;
width: auto;
svg.nvd3-svg {
width: 100%;
}
.overbox {
margin: 0;
padding: 40px 20px;
background: #fff;
border: 1px solid #dfdfdf;
.box {
padding-bottom: 30px;
overflow: hidden;
margin-bottom: 40px;
border-bottom: 1px solid rgb(216, 216, 216);
.header {
margin-bottom: 20px;
h4 {
font-size: 19px;
margin: 0;
}
}
}
}
.print-button {
margin-right: 10px;
font-size: 20px;
}
.title-button {
margin-right: 5px;
font-size: 20px;
}
.metric-col {
padding: 15px;
}
.metric-header-container {
h4 {
margin-bottom: 0;
}
}
svg {
display: block;
height: 250px;
text {
font-family: 'Open Sans', sans-serif;
}
&:not(:root) {
overflow: visible;
}
&.hidden-legend-margin-fix {
margin-top: 15px;
height: 235px;
}
&.no-fill-opacity {
.nvd3 {
.nv-area {
fill-opacity: 1;
}
}
}
}
.nvtooltip {
z-index: 10;
}
// BEGIN: Metrics header
.metric-header-container {
> h4 {
margin-top: 0;
margin-bottom: 0;
}
.metric-tooltip {
top: -1em;
font-size: 0.5em;
}
}
// END: Metrics header
// BEGIN: Metrics footer
.metric-footer-container {
text-align: center;
}
// END: Metrics footer
// BEGIN: Metrics overlays
.metric-overlay-loading,
.metric-overlay-error,
.metric-overlay-backdrop {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 16px; /* 15px of .metric-col padding + 1px border */
padding-top: 56px; /* Same as above + 30px for title + 10px overbox padding*/
}
.metric-overlay-loading {
padding: 175px 20%;
}
.metric-overlay-error {
display: none;
text-align: center;
padding-top: 175px;
}
.metric-overlay-backdrop {
opacity: 0.5;
}
.metric-overlay-backdrop-inner {
background-color: #fff;
width: 100%;
height: 100%;
}
// END: Metrics overlays
}
#metrics-header {
@media (min-width: 1200px) {
margin-bottom: 30px;
}
h3 {
display: inline-block;
}
.section_header {
margin-bottom: 0;
}
#filters-container {
text-align: right;
.by {
color: #989898;
font-style: italic;
}
}
#lags-container {
.dropdown-menu {
min-width: 0;
}
}
#dates-container {
display: inline-block;
.daterangepicker {
margin-right: 15px;
}
#metrics-dates {
padding: 0;
}
}
}
#metrics-footer {
margin-top: 30px;
text-align: center;
}
body.print-loading {
#metrics {
.metric-col {
opacity: 0.5;
}
}
}

6
services/web/frontend/stylesheets/app/ol-chat.less Normal file
View File

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

66
services/web/frontend/stylesheets/app/ol-style-guide.less Normal file
View File

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

5
services/web/frontend/stylesheets/app/open-in-overleaf.less Normal file
View File

@@ -0,0 +1,5 @@
dl.codebox {
dt {
line-height: 1;
}
}

1199
services/web/frontend/stylesheets/app/plans.less Normal file
View File

File diff suppressed because it is too large Load Diff

144
services/web/frontend/stylesheets/app/portals.less Normal file
View File

@@ -0,0 +1,144 @@
.content-portal {
padding-top: @navbar-height!important;
.join-rider {
margin-top: -(@line-height-computed / 2); // negate bottom margin from h4
}
/*
Begin Header
*/
.banner-image {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 375px;
}
.image-fill {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.institution-logo {
left: 50%;
margin-left: -100px;
padding: 0;
position: absolute;
div {
background-color: @white;
box-shadow: 1px 11px 22px -9px @black-alpha-strong;
display: inline-block;
height: 125px;
overflow: hidden;
position: absolute;
text-align: center;
top: -110px;
white-space: nowrap;
width: @btn-portal-width;
}
img {
max-height: 75px;
max-width: 150px;
vertical-align: middle;
}
}
.portal-name {
background-color: @ol-blue-gray-0;
padding-bottom: @line-height-computed; //- center header when no tabs
padding-top: @padding-md;
text-align: center;
width: 100%;
}
// End Header
/*
Begin Layout
*/
.button-pull,
.content-pull {
float: left;
}
.button-pull {
text-align: right;
> a.btn {
white-space: normal;
width: @btn-portal-width;
text-align: center;
}
}
.content-pull {
padding-right: @padding-sm;
width: calc(~'100% - ' @btn-portal-width);
}
// End Layout
/*
Begin Card
*/
.card {
margin-bottom: @margin-md;
}
// End Card
/*
Begin Actions
*/
.portal-actions {
i {
margin-bottom: @margin-sm;
}
}
// End Actions
/*
Begin Print
*/
.print {
.basic-metrics {
margin-bottom: 50px; /* get Departments header on next page */
}
.container {
width: auto;
}
.custom-donut-container svg {
max-width: 570px; /* safe width for printing */
}
.hidden-print {
display: none;
}
.portal-col {
/* for firefox */
margin: 0;
width: 100%;
}
.portal-name {
padding: 0;
}
.visible-print {
display: block !important;
}
}
@media print and (color) {
&:extend(.print);
}
// End Print
.nav-tabs {
background-color: @ol-blue-gray-0;
}
@media (max-width: @screen-xs-max) {
.content-pull {
padding: 0;
width: auto;
}
.button-pull {
> a.btn {
width: auto;
}
}
}
}

39
services/web/frontend/stylesheets/app/primary-email-check.less Normal file
View File

@@ -0,0 +1,39 @@
.primary-email-check-container {
max-width: 400px !important;
}
.primary-email-check-card {
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
.primary-email-confirm-button {
margin-top: 12px;
}
.primary-email-change-button {
margin-bottom: 12px;
}
p {
margin-bottom: 0;
}
}
.primary-email-check-header {
margin-top: 12px;
margin-bottom: 0;
}
.primary-email-check-form {
padding: 0 !important;
display: flex;
flex-direction: column;
gap: 12px;
}
.primary-email-check-logo {
width: 130px;
margin: 0 auto;
}

1035
services/web/frontend/stylesheets/app/project-list-react.less Normal file
View File

File diff suppressed because it is too large Load Diff

548
services/web/frontend/stylesheets/app/project-list.less Normal file
View File

@@ -0,0 +1,548 @@
@import './list/v1-import-modal.less';
.project-list-page {
position: absolute;
top: @header-height;
bottom: @footer-height;
padding-bottom: 0;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
// Specificity needed to override default `body > .content` values
body > .content& {
min-height: calc(~'100vh -' (@header-height - @footer-height));
padding-top: 0;
}
}
.project-list-content {
margin: 0;
height: 100%;
overflow: hidden;
}
.project-list-empty {
height: 100%;
overflow-y: scroll;
}
.project-list-empty-col {
display: flex;
height: 100%;
flex-direction: column;
flex-wrap: nowrap;
.row:first-child {
flex-grow: 1; /* fill vertical space so notifications are pushed to bottom */
}
.card {
// h2 + .card-thin top padding
padding-bottom: @line-height-computed + @line-height-computed / 2;
}
}
.sidebar-new-proj-btn {
.btn-block;
}
.project-list-row {
height: 100%;
min-height: calc(~'100vh -' (@header-height - @footer-height));
}
.project-list-container {
height: 100%;
}
.project-list-sidebar {
background-color: @sidebar-bg;
overflow-x: hidden;
overflow-y: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
padding-top: @content-margin-vertical;
padding-bottom: @content-margin-vertical;
color: @sidebar-color;
.small {
color: @sidebar-color;
}
}
.project-list-main {
padding-top: @content-margin-vertical;
padding-bottom: @content-margin-vertical;
height: 100%;
margin-left: -(@grid-gutter-width / 2);
overflow-y: auto;
}
.project-header {
.btn-group > .btn {
padding-left: @line-height-base / 2;
padding-right: @line-height-base / 2;
}
}
.project-tools {
display: inline;
float: right;
line-height: @line-height-base;
}
.tags-dropdown-menu {
max-width: 50vw;
&.dropdown-menu > li > a {
overflow: hidden;
text-overflow: ellipsis;
}
}
.project-list-table {
width: 100%;
table-layout: fixed;
}
.project-list-table-header-row {
border-bottom: 1px solid @structured-list-border-color;
}
.project-list-table-row {
position: relative;
border-bottom: 1px solid @structured-list-border-color;
&:last-child {
border-bottom: 0 none;
}
&:hover {
background-color: @structured-list-hover-color;
}
&:first-child {
border-bottom-color: @structured-header-border-color;
&:hover {
background-color: transparent;
}
}
}
.project-list-table-name-cell,
.project-list-table-owner-cell,
.project-list-table-lastupdated-cell,
.project-list-table-actions-cell {
padding: (@line-height-computed / 4) 0;
vertical-align: top;
}
.project-list-table-name-cell {
width: 50%;
padding-right: @line-height-computed / 2;
@media (min-width: @screen-md) {
width: 47%;
}
@media (min-width: @screen-lg) {
width: 50%;
}
}
.project-list-table-name-container {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
}
// Extra specificity needed to override Bootstrap's own specificity.
input.project-list-table-select-item[type='checkbox'] {
position: absolute;
left: @line-height-computed - (@grid-gutter-width / 2);
margin-top: 5px;
}
.project-list-table-name {
display: inline-block;
padding-left: @line-height-computed * 1.5;
vertical-align: top;
}
.project-list-table-name-link {
padding: 0;
}
.project-list-table-owner-cell {
width: 23%;
padding-right: @line-height-computed / 2;
overflow: hidden;
text-overflow: ellipsis;
@media (min-width: @screen-sm) {
width: 12%;
}
}
.project-list-table-lastupdated-cell {
width: 27%;
padding-right: @line-height-computed / 2;
overflow: hidden;
text-overflow: ellipsis;
@media (min-width: @screen-sm) {
width: 14%;
}
}
.project-list-table-actions-cell {
display: none;
padding-right: @line-height-computed - (@grid-gutter-width / 2);
text-align: right;
white-space: nowrap;
@media (min-width: @screen-sm) {
display: table-cell;
width: 18%;
}
@media (min-width: @screen-md) {
width: 11%;
}
@media (min-width: @screen-lg) {
width: 10%;
}
}
.action-btn {
padding: 0 0.2em;
}
.first-project {
width: 127px;
text-align: center;
}
.add-affiliation-mobile-wrapper {
padding: @padding-md 0;
}
.add-affiliation {
.progress {
height: @line-height-computed / 2;
margin-bottom: @line-height-computed / 4;
}
p {
margin-bottom: @line-height-computed / 4;
}
&.is-mobile p {
font-size: 12px;
white-space: normal;
}
}
.user-notifications {
ul {
margin-bottom: 0px;
}
.notification-entry {
.alert {
// old alert style
.box-shadow(2px 4px 6px rgba(0, 0, 0, 0.25));
display: flex;
flex-wrap: wrap;
@media (min-width: @screen-sm-min) {
flex-wrap: nowrap;
}
}
.notification {
// new alert style. match the existing margin on .alert since there is a mix of old and new alert styles
margin-bottom: @line-height-computed;
}
&.centered-alert .alert {
align-items: center;
}
}
}
ul.folders-menu {
margin: @folders-menu-margin;
.subdued {
color: @gray-light;
}
> li {
cursor: pointer;
position: relative;
> a {
display: block;
color: @sidebar-link-color;
padding: @folders-menu-item-v-padding @folders-menu-item-h-padding;
border-bottom: solid 1px transparent;
&:hover {
background-color: @sidebar-hover-bg;
text-decoration: @sidebar-hover-text-decoration;
}
&:focus {
text-decoration: none;
}
}
&.separator {
padding: @folders-menu-item-v-padding @folders-menu-item-h-padding;
cursor: auto;
}
}
> li.active {
border-radius: @sidebar-active-border-radius;
> a {
background-color: @sidebar-active-bg;
font-weight: @sidebar-active-font-weight;
color: @sidebar-active-color;
.subdued {
color: @sidebar-active-color;
}
}
}
> li > a.small {
color: @gray;
}
h2 {
margin-top: @folders-title-margin-top;
margin-bottom: @folders-title-margin-bottom;
font-size: @folders-title-font-size;
color: @folders-title-color;
text-transform: @folders-title-text-transform;
padding: @folders-title-padding;
font-weight: @folders-title-font-weight;
font-family: @font-family-sans-serif;
}
> li.tag {
&.active {
.tag-menu > a {
color: white;
border-color: white;
&:hover {
background-color: @folders-tag-menu-active-hover;
}
}
}
&.untagged {
a.tag-name {
span.name {
font-style: italic;
padding-left: 0;
}
}
}
&:hover {
&:not(.active) {
background-color: @folders-tag-hover;
}
.tag-menu {
display: block;
}
}
&:not(.active) {
.tag-menu > a:hover {
background-color: @folders-tag-menu-hover;
}
}
.tag-name {
position: relative;
padding: @folders-tag-padding;
display: @folders-tag-display;
span.name {
padding-left: 0.5em;
line-height: @folders-tag-line-height;
}
}
.tag-menu {
> a {
border: 1px solid @folders-tag-border-color;
border-radius: @border-radius-small;
color: @folders-tag-menu-color;
display: block;
width: 16px;
height: 16px;
position: relative;
.caret {
position: absolute;
top: 6px;
left: 1px;
}
}
display: none;
position: absolute;
top: 50%;
margin-top: -8px; // Half the element height.
right: 4px;
&.open {
display: block;
}
}
.dropdown-toggle {
float: right;
}
}
}
.project-action-alert {
display: flex;
margin-bottom: 0;
align-items: center;
}
.project-action-alert-msg {
flex-grow: 1;
padding-right: 10px;
}
form.project-search {
.form-group {
margin-bottom: 0;
}
}
ul.structured-list {
list-style-type: none;
margin: 0;
overflow: hidden;
overflow-y: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
> li {
border-bottom: 1px solid @structured-list-border-color;
padding: (@line-height-computed / 4) 0;
&:last-child {
border-bottom: 0 none;
}
&:hover {
background-color: @structured-list-hover-color;
}
&:first-child {
border-bottom-color: @structured-header-border-color;
&:hover {
background-color: transparent;
}
}
a {
color: @structured-list-link-color;
}
.header {
font-weight: 600;
}
.select-item,
.select-all {
position: absolute;
left: @line-height-computed;
}
.select-item + span,
.select-all + span {
display: inline-block;
padding-left: @line-height-computed * 1.5;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
}
}
.project-list-card {
padding: 0 (@line-height-computed / 4);
}
ul.project-list {
li {
.projectName {
margin-right: @line-height-computed / 4;
}
}
}
i.tablesort {
padding-left: 8px;
}
.tablesort-text {
padding-right: 8px;
}
.tag-label {
margin-left: @line-height-computed / 4;
position: relative;
display: inline-block;
line-height: 1;
white-space: nowrap;
top: @tag-top-adjustment;
}
// Extra specificity needed to override Bootstrap's own specificity.
.label.tag-label-name,
.label.tag-label-remove {
display: inline-block;
padding: 3px 4px;
border-radius: @tag-border-radius;
background-color: @tag-bg-color;
color: @tag-color;
vertical-align: text-bottom;
border-width: 0;
&:hover,
&:focus {
color: @tag-color;
background-color: @tag-bg-hover-color;
outline-width: 0;
}
}
.label.tag-label-name {
padding-right: 2px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
max-width: @tag-max-width;
overflow: hidden;
text-overflow: ellipsis;
> .fa {
margin-right: 0.3em;
}
}
.label.tag-label-remove {
padding-left: 2px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.user_details_auto_complete {
ul > li {
list-style: none;
}
.autocomplete {
width: 100%;
position: relative;
}
.autocomplete ul {
position: absolute;
top: 100%;
left: 0;
z-index: @zindex-dropdown;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
font-size: @font-size-base;
background-color: @dropdown-bg;
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
.box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));
background-clip: padding-box;
// Links within the dropdown menu
> li {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: @line-height-base;
color: @dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
> li.active {
text-decoration: none;
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
}
}
.autocomplete .highlight {
font-weight: 700;
}
}

49
services/web/frontend/stylesheets/app/publisher-hub.less Normal file
View File

@@ -0,0 +1,49 @@
#publisher-hub {
.recent-activity {
.hub-big-number {
text-align: right;
padding-right: 15px;
}
}
#templates-container {
width: 100%;
tr {
border: 1px solid @ol-blue-gray-0;
}
td {
padding: 15px;
}
td:last-child {
text-align: right;
}
.title-cell {
max-width: 300px;
}
.title-text {
font-weight: bold;
}
.hub-big-number {
width: 60%;
padding-right: 10px;
padding-top: 10px;
text-align: right;
}
.hub-number-label,
.since {
width: 35%;
float: right;
@media screen and (max-width: 940px) {
float: none;
}
}
.hub-long-big-number {
padding-right: 40px;
}
.created-on {
color: @gray-light;
font-style: italic;
font-size: 14px;
}
}
}

24
services/web/frontend/stylesheets/app/recurly.less Normal file
View File

@@ -0,0 +1,24 @@
.recurly-hosted-field {
&:extend(.form-control);
}
.recurly-element-card {
&:extend(.form-control);
padding: 4px 4px;
border: @input-border-size @input-border solid;
border-radius: @input-border-radius;
height: 50px;
&.recurly-element-focus {
&:extend(.input-focus-style);
}
}
.recurly-element-card-invalid {
&:extend(.has-error);
border-color: @red;
}
.recurly-element-number {
&:extend(.form-control);
}

31
services/web/frontend/stylesheets/app/register.less Normal file
View File

@@ -0,0 +1,31 @@
.registration_message {
text-align: center;
padding-bottom: 20px;
}
// for focus-registration and focus-login split test variant
.registration_logo {
width: 130px;
padding: 8px 0;
}
.website-redesign {
.login-register-header-focus {
padding-top: unset;
}
}
.login-register-header-heading-focus {
color: @neutral-90;
margin-bottom: 0;
}
.website-redesign {
.login-register-form-focus {
padding: @line-height-computed 0 0 0;
border-bottom: unset;
border-bottom: solid 1px @hr-border;
&:last-child {
border-bottom-width: 0;
}
}
}

481
services/web/frontend/stylesheets/app/review-features-page.less Normal file
View File

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

104
services/web/frontend/stylesheets/app/sprites.less Normal file
View File

@@ -0,0 +1,104 @@
.sprite-icon {
background-image: url('../../../public/img/sprite.png');
}
.sprite-icon-ko {
background-position: -0px -0px;
width: 24px;
height: 24px;
}
.sprite-icon-cn {
background-position: -0px -24px;
width: 24px;
height: 24px;
}
.sprite-icon-da {
background-position: -0px -48px;
width: 24px;
height: 24px;
}
.sprite-icon-de {
background-position: -0px -72px;
width: 24px;
height: 24px;
}
.sprite-icon-en {
background-position: -0px -96px;
width: 24px;
height: 24px;
}
.sprite-icon-es {
background-position: -0px -120px;
width: 24px;
height: 24px;
}
.sprite-icon-fi {
background-position: -0px -144px;
width: 24px;
height: 24px;
}
.sprite-icon-fr {
background-position: -0px -168px;
width: 24px;
height: 24px;
}
.sprite-icon-it {
background-position: -0px -192px;
width: 24px;
height: 24px;
}
.sprite-icon-ja {
background-position: -0px -216px;
width: 24px;
height: 24px;
}
.sprite-icon-cs {
background-position: -0px -240px;
width: 24px;
height: 24px;
}
.sprite-icon-nl {
background-position: -0px -264px;
width: 24px;
height: 24px;
}
.sprite-icon-no {
background-position: -0px -288px;
width: 24px;
height: 24px;
}
.sprite-icon-pl {
background-position: -0px -312px;
width: 24px;
height: 24px;
}
.sprite-icon-pt {
background-position: -0px -336px;
width: 24px;
height: 24px;
}
.sprite-icon-ru {
background-position: -0px -360px;
width: 24px;
height: 24px;
}
.sprite-icon-sv {
background-position: -0px -384px;
width: 24px;
height: 24px;
}
.sprite-icon-tr {
background-position: -0px -408px;
width: 24px;
height: 24px;
}
.sprite-icon-uk {
background-position: -0px -432px;
width: 24px;
height: 24px;
}
.sprite-icon-zh-CN {
background-position: -0px -456px;
width: 24px;
height: 24px;
}

195
services/web/frontend/stylesheets/app/subscription.less Normal file
View File

@@ -0,0 +1,195 @@
.form-helper {
display: inline-block;
width: 1.3em;
height: 1.3em;
line-height: 1.3;
vertical-align: initial;
background-color: @gray;
color: #fff;
font-weight: bolder;
border-radius: 50%;
&:hover,
&:focus {
color: #fff;
text-decoration: none;
}
}
.team-invite .message {
margin: 3em 0;
}
.team-invite-name {
word-break: break-word;
}
.capitalised {
text-transform: capitalize;
}
.back-btn {
padding: 0 10px 2px 12px;
border-radius: 50%;
border: none;
color: @gray-dark;
&:hover {
background-color: @neutral-20;
color: @gray-dark;
}
&:active {
background-color: @gray-lighter;
}
}
.row-link {
line-height: 24px;
color: @neutral-70 !important;
display: flex;
flex-direction: row;
text-decoration: none;
padding: 6px 0;
&.text-muted {
color: @neutral-40 !important;
}
a&:active,
a&:focus,
a&:hover {
text-decoration: none;
outline: none;
background-color: @gray-lightest;
}
.icon {
display: flex;
flex: 1 1 5%;
padding: 0 16px;
margin-top: 16px;
> span {
font-size: 16px;
}
&.arrow {
margin-top: 12px;
> span {
font-size: 24px;
}
}
}
.text {
flex: 1 1 90%;
display: flex;
flex-direction: column;
.text-truncate;
.heading {
font-weight: @btn-font-weight;
.text-truncate;
}
.subtext {
font-weight: 400;
.text-truncate;
}
}
}
.check-icon {
background-color: #ebf6ea;
border-radius: 50%;
color: #5bb553;
height: 20px;
width: 20px;
}
.payment-summary-card {
&:extend(.card-gray);
border-radius: @border-radius-large-new;
h3 {
margin-top: 0;
margin-bottom: @spacing-08;
font-family: @font-family-sans-serif;
font-weight: 600;
color: @content-secondary;
}
}
.pricing-warning-heading {
font-size: @font-size-03;
font-weight: 600;
font-family: @font-family-sans-serif;
margin-top: 0;
color: @content-primary-on-dark-bg;
}
.add-on-card {
display: flex;
align-items: center;
padding: var(--spacing-05);
gap: var(--spacing-05);
border: 1px solid var(--neutral-20);
border-radius: var(--border-radius-base-new);
.add-on-card-icon {
width: 40px;
height: 40px;
}
.add-on-card-content {
display: flex;
flex-direction: column;
.small {
.body-sm;
}
}
.heading {
.body-base;
font-weight: 600;
}
.description {
color: @content-secondary;
}
.highlight {
color: @content-primary;
}
.add-on-options-toggle {
padding: var(--spacing-04);
font-size: 0;
line-height: 1;
border: none;
border-radius: 50%;
&::after {
content: none;
}
}
}
.group-heading {
display: flex;
align-items: center;
gap: var(--spacing-04);
margin-bottom: var(--spacing-06);
.heading {
margin: 0;
}
.back-btn {
display: flex;
align-items: center;
width: 42px;
height: 42px;
text-decoration: none;
}
}

189
services/web/frontend/stylesheets/app/templates-v2.less Normal file
View File

@@ -0,0 +1,189 @@
// some still used by portals
.gallery-item-title {
* {
vertical-align: middle;
}
margin-top: @line-height-computed; // match h1 header margin-top
margin-bottom: @margin-xl;
h1 {
display: inline;
margin: 0;
}
}
.gallery-official {
margin-left: @margin-sm;
&:extend(.label);
&:extend(.label-info);
cursor: default;
font-size: 14px;
padding: 3px 8px;
}
.field-title {
font-weight: bold;
}
.filters {
float: right;
margin-bottom: @margin-lg;
@media (max-width: @screen-md-min) {
float: none;
}
}
.cta-links {
.cta-link.btn {
margin: 0 @margin-sm @margin-sm 0;
}
}
.popular-tags {
.gallery-thumbnail {
margin: 0 0 1em 0 !important;
}
}
.tag-link {
margin: 0 @margin-xs @margin-sm 0;
max-width: 100%;
white-space: inherit;
}
.gallery-abstract {
word-break: break-word;
hyphens: auto;
a {
hyphens: none;
}
}
.gallery-thumbnail {
display: inline-block;
margin: 0 0 2em;
width: 100%;
.thumbnail {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 0 0 @margin-sm 0;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
h3 {
color: @link-color-alt;
margin: 10px 0px 10px 20px;
}
&.thumbnail-tag {
height: 100px;
}
}
.caption {
// Override Server Pro template styles
background: none;
border: none;
text-align: center;
}
.caption__description {
font-style: italic;
padding: 0 0 5px 0;
.text-overflow();
}
.gallery-list-item-title {
display: flex;
align-items: center;
justify-content: center;
* {
flex-basis: content;
cursor: inherit;
}
}
.caption__title {
text-align: center;
.text-overflow();
}
a {
&:hover {
text-decoration: none; // disable underlining label
.caption__title {
text-decoration: underline;
}
}
}
}
.gallery-large-pdf-preview {
border: solid 1px @gray-lightest;
margin-top: @margin-lg;
img {
max-width: 100%;
}
}
@top-picks-banner-extra-width: 50px;
.top-picks-banner {
padding: 0px;
width: 100%;
margin-left: auto;
margin-right: auto;
@media (min-width: (@screen-lg-min + @top-picks-banner-extra-width)) {
width: @container-lg + @top-picks-banner-extra-width;
}
@media (max-width: (@screen-lg-min + @top-picks-banner-extra-width - 1)) {
border-radius: 0;
}
}
.gallery-top-pick-badge {
margin-left: @margin-sm;
&:extend(.label);
&:extend(.label-primary);
cursor: default;
font-size: 14px;
padding: 3px 8px;
}
/* Media Queries */
@media (max-width: @screen-xs-max) {
.gallery-container {
column-count: 2;
column-gap: 2em;
}
}
@media (min-width: @screen-sm-min) {
.gallery-container {
&.use-column {
column-count: 3;
column-gap: 3em;
}
&.use-percent {
margin: 0 -1.5em;
.gallery-thumbnail {
width: 33.3333333%;
padding: 0 1.5em;
}
}
}
}
@media (min-width: @screen-md-min) {
.gallery-large-pdf-preview {
margin-top: 0;
}
}
.section-tags {
margin-bottom: @margin-xl;
margin-top: @margin-md;
}

69
services/web/frontend/stylesheets/app/templates.less Normal file
View File

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

21
services/web/frontend/stylesheets/app/translations.less Normal file
View File

@@ -0,0 +1,21 @@
.translations-message {
.system-message;
text-align: center;
img {
vertical-align: text-bottom;
margin-bottom: -1px;
}
.close {
color: #fff;
opacity: 1;
text-shadow: none;
}
a {
color: #fff;
&:hover,
&:focus {
color: #fff;
}
}
}

1186
services/web/frontend/stylesheets/app/website-redesign.less Normal file
View File

File diff suppressed because it is too large Load Diff

274
services/web/frontend/stylesheets/app/wiki.less Normal file
View File

@@ -0,0 +1,274 @@
.wiki {
.contents {
ul {
padding: 0;
li {
font-size: 14px;
list-style: none;
margin-bottom: 6px;
}
}
h2 {
font-size: 18px;
}
}
.page-header {
a {
font-size: 0.8em;
line-height: 1;
}
}
.editsection {
display: none;
}
.toctogglespan {
display: none;
}
.toc {
ul {
list-style: none;
.tocnumber::after {
content: '.';
}
}
}
table {
th,
td {
padding: (@line-height-computed / 4) (@line-height-computed / 2);
border-bottom: 1px solid @gray-lighter;
}
th {
font-weight: 700;
text-align: left;
font-family: @font-family-serif;
}
margin-bottom: @line-height-computed / 2;
}
.table-no-borders {
th,
td {
border: 0px;
}
}
.example {
max-width: 100%;
.code {
pre {
background-color: @gray-lightest;
border-radius: 6px;
padding: (@line-height-computed / 2);
white-space: pre-wrap;
margin: 0;
}
}
.output {
text-align: center;
padding-top: 10px;
img {
width: auto;
height: auto;
max-width: 100%;
box-shadow: 0 1px 3px @gray-light;
border-radius: 6px;
}
}
}
@media (min-width: 1360px) {
.example {
margin-right: -200px;
}
}
@media (max-width: @screen-sm) {
.contents {
margin-top: @margin-lg;
}
}
/*<![CDATA[*/
.source-latex {
line-height: normal;
}
.source-latex li,
.source-latex pre {
line-height: normal;
border: 0px none white;
}
/**
* GeSHi Dynamically Generated Stylesheet
* --------------------------------------
* Dynamically generated stylesheet for latex
* CSS class: source-latex, CSS id:
* GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
* --------------------------------------
*/
.latex.source-latex .imp {
font-weight: bold;
color: red;
}
.latex.source-latex li,
.latex.source-latex .li1 {
font-weight: normal;
vertical-align: top;
}
.latex.source-latex .ln {
width: 1px;
text-align: right;
margin: 0;
padding: 0 2px;
vertical-align: top;
}
.latex.source-latex .li2 {
font-weight: bold;
vertical-align: top;
}
.latex.source-latex .kw1 {
color: #800000;
}
.latex.source-latex .co1 {
color: #2c922c;
font-style: italic;
}
.latex.source-latex .es0 {
color: #000000;
font-weight: bold;
}
.latex.source-latex .sy0 {
color: #e02020;
}
.latex.source-latex .st0 {
color: #000000;
}
.latex.source-latex .re1 {
color: #8020e0;
font-weight: normal;
}
.latex.source-latex .re2 {
color: #c08020;
font-weight: normal;
}
.latex.source-latex .re3 {
color: #8020e0;
font-weight: normal;
}
.latex.source-latex .re4 {
color: #800000;
font-weight: normal;
}
.latex.source-latex .re5 {
color: #00008b;
font-weight: bold;
}
.latex.source-latex .re6 {
color: #800000;
font-weight: normal;
}
.latex.source-latex .re7 {
color: #0000d0;
font-weight: normal;
}
.latex.source-latex .re8 {
color: #c00000;
font-weight: normal;
}
.latex.source-latex .re9 {
color: #2020c0;
font-weight: normal;
}
.latex.source-latex .re10 {
color: #800000;
font-weight: normal;
}
.latex.source-latex .re11 {
color: #e00000;
font-weight: normal;
}
.latex.source-latex .re12 {
color: #800000;
font-weight: normal;
}
.latex.source-latex .ln-xtra,
.latex.source-latex li.ln-xtra,
.latex.source-latex div.ln-xtra {
background-color: #ffc;
}
.latex.source-latex span.xtra {
display: block;
}
/*]]>*/
a.search-result {
display: block;
margin-top: @line-height-computed / 2;
.search-result-content {
margin-top: @line-height-computed / 4;
white-space: pre-wrap;
font-size: 0.8em;
color: @gray-dark;
em {
font-weight: bold;
}
}
&:hover,
&:active,
&:focus {
text-decoration: none;
.search-result-content {
color: @gray-darker;
}
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
}
/* Keep the below rules in sync with the wiki pages */
img {
height: auto;
max-width: 100%;
}
img.add-vertical-space {
padding-bottom: 20px;
padding-top: 20px;
}
th.no-wrap {
white-space: nowrap;
text-align: left;
}
/* LATEX and TEX artwork */
span.TEX {
letter-spacing: -0.125em;
padding-right: 0.5ex;
}
span.TEX span.E {
position: relative;
top: 0.5ex;
padding-right: 0.1ex;
}
a span.TEX span.E {
text-decoration: none;
}
span.LATEX span.A {
position: relative;
top: -0.5ex;
left: -0.4em;
font-size: 75%;
}
span.LATEX span.TEX {
position: relative;
left: -0.4em;
margin-right: -0.5ex;
}
}

5
services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss Normal file
View File

@@ -0,0 +1,5 @@
@import 'mixins';
@import 'variables';
@import 'variable-overrides';
@import 'themes-common-variables';
@import 'templates-search';

211
services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss Normal file
View File

@@ -0,0 +1,211 @@
// Button
@mixin ol-button-size(
$font-size,
$line-height,
$padding-y,
$padding-x: var(--spacing-06)
) {
--bs-btn-font-size: #{$font-size};
--bs-btn-line-height: #{$line-height};
--bs-btn-padding-y: #{$padding-y};
--bs-btn-padding-x: #{$padding-x};
}
@mixin ol-button-variant(
$color,
$background,
$border: $background,
$hover-background: $background,
$hover-border: $hover-background,
$borderless: true
) {
--bs-btn-color: #{$color};
--bs-btn-bg: #{$background};
--bs-btn-border-color: #{$border};
--bs-btn-hover-color: #{$color};
--bs-btn-hover-bg: #{$hover-background};
--bs-btn-hover-border-color: #{$hover-border};
--bs-btn-active-color: #{$color};
--bs-btn-active-bg: #{$hover-background};
--bs-btn-active-border-color: #{$hover-border};
--bs-btn-disabled-color: var(--content-disabled);
--bs-btn-disabled-bg: var(--bg-light-disabled);
--bs-btn-disabled-border-color: var(--bg-light-disabled);
@if $borderless {
--bs-btn-border-width: 0;
}
// Use the default state colors when in a loading state
&[data-ol-loading='true'] {
color: var(--bs-btn-color);
background-color: var(--bs-btn-bg);
border-color: var(--bs-btn-border-color);
opacity: 1;
}
}
@mixin action-button {
font-size: 0;
line-height: 1;
border-radius: 50%;
color: var(--content-primary);
background-color: transparent;
&:hover,
&:active,
&[aria-expanded='true'] {
background-color: rgb($neutral-90, 0.08);
}
}
@mixin reset-button() {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
appearance: none;
}
@mixin modal-lg {
max-width: 960px;
}
@mixin modal-md {
max-width: 640px;
}
@mixin modal-sm {
max-width: 480px;
}
// Toolbar
@mixin toolbar-sm-height {
height: var(--toolbar-small-height);
}
@mixin toolbar-alt-bg() {
background-color: var(--toolbar-alt-bg-color);
}
@mixin theme($name) {
@if index($themes, $name) {
[data-theme='#{$name}'] {
@content;
}
} @else {
@error 'Theme "#{$name}" is not supported. Supported themes are: #{$themes}.';
}
}
@mixin box-shadow-button-input {
box-shadow: 0 0 0 2px var(--blue-30);
}
@mixin animation($animation) {
animation: $animation;
}
@mixin striped($color: rgba(255, 255, 255, 0.15), $angle: 45deg) {
background-image: linear-gradient(
$angle,
$color 25%,
transparent 25%,
transparent 50%,
$color 50%,
$color 75%,
transparent 75%,
transparent
);
}
@mixin mask-image($gradient) {
// mask-image isn't supported without the -webkit prefix on all browsers we support yet
-webkit-mask-image: $gradient;
mask-image: $gradient;
}
@mixin premium-background {
background-image: var(--premium-gradient);
}
@mixin premium-text {
@include premium-background;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--white); // Fallback
background-color: var(--blue-70); // Fallback
}
@mixin dark-bg {
--link-color: var(--link-color-dark);
--link-hover-color: var(--link-hover-color-dark);
--link-visited-color: var(--link-visited-color-dark);
}
@mixin triangle($direction, $width, $height, $color) {
position: absolute;
border-color: transparent;
border-style: solid;
width: 0;
height: 0;
@if $direction == top {
border-width: 0 calc(#{$width} / 2) #{$height} calc(#{$width} / 2);
border-bottom-color: $color;
border-left-color: transparent;
border-right-color: transparent;
} @else if $direction == bottom {
border-width: #{$height} calc(#{$width} / 2) 0 calc(#{$width} / 2);
border-top-color: $color;
border-left-color: transparent;
border-right-color: transparent;
} @else if $direction == right {
border-width: calc(#{$height} / 2) 0 calc(#{$height} / 2) #{$width};
border-left-color: $color;
border-top-color: transparent;
border-bottom-color: transparent;
} @else if $direction == left {
border-width: calc(#{$height} / 2) #{$width} calc(#{$height} / 2) 0;
border-right-color: $color;
border-top-color: transparent;
border-bottom-color: transparent;
}
}
// Form validation states
@mixin form-control-validation($color) {
color: $color;
// Color the label and help text
.help-block,
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
.form-label {
color: $color;
}
.form-control {
border-color: $color;
&:focus {
border-color: $border-active;
}
}
// Optional feedback icon
.form-control-feedback {
color: $color;
}
}
@mixin input-disabled-styles {
background-color: $input-disabled-bg;
border-color: $input-disabled-border-color;
}

1
services/web/frontend/stylesheets/bootstrap-5/abstracts/templates-search.scss Normal file
View File

@@ -0,0 +1 @@
$templates-search-max-width: 885px;

7
services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss Normal file
View File

@@ -0,0 +1,7 @@
:root {
--editor-border-color: var(--neutral-80);
}
@include theme('light') {
--editor-border-color: var(--neutral-20);
}

284
services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss Normal file
View File

@@ -0,0 +1,284 @@
// Overrides for Bootstrap 5's default Sass variables
$prefix: bs-;
// Options
// Quickly modify global styling by enabling or disabling optional features.
$enable-validation-icons: false;
$component-active-color: $white;
// Fonts
$font-family-sans-serif: 'Noto Sans', sans-serif;
$font-family-serif: 'Merriweather', serif;
$font-family-monospace: 'DM Mono', monospace;
$font-size-base: 1rem;
$font-size-sm: var(--font-size-02);
$line-height-base: 1.5;
// Components
// Define common padding and border radius sizes and more.
$focus-ring-width: 2px;
$focus-ring-opacity: 1;
$focus-ring-color: $blue-30;
$focus-ring-blur: 0;
// Buttons
$btn-font-family: $font-family-sans-serif;
$btn-font-weight: 600;
$btn-padding-x: $spacing-06;
$btn-padding-y: $spacing-02;
$btn-border-radius: $border-radius-full;
$btn-border-radius-lg: $border-radius-full;
$btn-border-radius-sm: $border-radius-full;
$btn-white-space: nowrap;
// Tables
$table-cell-padding-y: $spacing-04;
$table-cell-padding-x: $spacing-04;
$table-cell-padding-y-sm: $spacing-02;
$table-cell-padding-x-sm: $spacing-02;
$table-color: var(--content-secondary);
$table-bg: var(--bg-light-primary);
$table-th-font-weight: 600;
$table-striped-color: $table-color;
$table-striped-bg: var(--bg-light-secondary);
$table-active-color: $table-color;
$table-active-bg: $bg-accent-03;
$table-hover-color: $table-color;
$table-hover-bg: var(--bg-light-secondary);
$table-border-color: $border-divider;
$table-striped-order: even;
$table-caption-color: var(--content-secondary);
// Forms
// form-text-variables
$form-text-margin-top: $spacing-04;
$form-text-font-size: var(--font-size-02);
$form-text-color: var(--content-secondary);
// form-label-variables
$form-label-margin-bottom: $spacing-02;
$form-label-font-size: var(--font-size-02);
$form-label-font-weight: 600;
$form-label-color: var(--content-secondary);
// form-input-variables
$input-padding-y: $spacing-03;
$input-padding-x: $spacing-04;
$input-font-size: var(--font-size-03);
$input-line-height: 1.5; // equivalent of var(--line-height-03) - BS expects a unitless value for further calculations
$input-padding-y-sm: $spacing-01;
$input-padding-x-sm: $spacing-03;
$input-font-size-sm: var(--font-size-02);
$input-line-height-sm: 1.25; // equivalent of var(--line-height-02) - BS expects a unitless value for further calculations
$input-padding-y-lg: $spacing-05;
$input-padding-x-lg: $spacing-05;
$input-font-size-lg: var(--font-size-03);
$input-bg: $bg-light-primary;
$input-disabled-color: var(--content-disabled);
$input-disabled-bg: $bg-light-disabled;
$input-disabled-border-color: var(--border-disabled);
$input-color: $content-primary;
$input-border-color: $neutral-60;
$input-border-width: var(--bs-border-width);
$input-border-radius: $border-radius-base;
$input-border-radius-sm: $border-radius-base;
$input-border-radius-lg: $border-radius-base;
$input-focus-border-color: var(--border-active);
$input-placeholder-color: var(--content-placeholder);
$input-plaintext-color: $content-primary;
$input-height-border: calc(
#{$input-border-width} * 2
); // stylelint-disable-line function-disallowed-list
$input-height: add(
$input-line-height * 1em,
add($input-padding-y * 2, $input-height-border, false)
);
$input-height-sm: add(
$input-line-height-sm * 1em,
add($input-padding-y-sm * 2, $input-height-border, false)
);
$input-height-lg: add(
$input-line-height * 1em,
add($input-padding-y-lg * 2, $input-height-border, false)
);
// form-check-variables
$form-check-label-color: var(--content-primary);
$form-check-input-border: var(--bs-border-width) solid var(--border-primary);
$form-check-input-border-radius: $border-radius-base;
$form-check-input-focus-border: var(--border-primary);
$form-check-input-disabled-opacity: 1;
// form-switch-variables
$form-switch-width: 34px;
$form-switch-padding-start: $spacing-03;
$form-switch-color: $component-active-color;
$form-switch-width: 34px;
$form-switch-padding-start: $spacing-03;
$form-switch-focus-color: $component-active-color;
$form-switch-checked-color: $component-active-color;
// form-group
$form-group-margin-bottom: $spacing-06;
// Form validation
// form-feedback-variables
$form-feedback-invalid-color: $bg-danger-01;
$form-feedback-icon-invalid: null;
$form-feedback-margin-top: 0; // Our feedback component wraps Form.Text, which takes care of top margin
// form-validation-colors
$form-invalid-color: $form-feedback-invalid-color;
$form-invalid-border-color: $bg-danger-01;
// form-validation-states
$form-validation-states: (
'invalid': (
'color': $bg-danger-01,
'icon': $form-feedback-icon-invalid,
'tooltip-color': #fff,
'tooltip-bg-color': var(--bs-danger),
'focus-box-shadow': 0 0 $focus-ring-blur $focus-ring-width
rgba($red-30, $focus-ring-opacity),
'border-color': var(--#{$prefix}form-invalid-border-color),
),
);
// Close buttons
$btn-close-color: $content-primary;
$btn-close-opacity: 1;
$btn-close-width: 10px;
// Colors
$primary: $bg-accent-01;
$secondary: $bg-light-primary;
$success: $bg-accent-01;
$info: $bg-info-01;
$warning: $content-warning;
$danger: $bg-danger-01;
$light: $bg-light-tertiary;
$dark: $neutral-90;
$warning-light-gb: $bg-warning-03;
// Theme colors
$theme-colors: (
'primary': $primary,
'secondary': $secondary,
'success': $success,
'info': $info,
'warning': $warning,
'warning-light-bg': $warning-light-gb,
'danger': $danger,
'light': $light,
'dark': $dark,
);
// Body colors
$body-color: $content-primary;
$body-bg: $bg-light-primary;
$body-secondary-color: $content-secondary;
$body-secondary-bg: $bg-light-secondary;
$body-tertiary-color: $content-disabled;
$body-tertiary-bg: $bg-light-tertiary;
// Badges
$badge-font-size: var(--font-size-01);
$badge-font-weight: var(--bs-body-font-weight);
$badge-padding-y: $spacing-01;
$badge-padding-x: $spacing-02;
$badge-border-radius: $border-radius-base;
// Tooltips
$tooltip-max-width: 320px;
$tooltip-border-radius: $border-radius-base;
$tooltip-padding-y: $spacing-04;
$tooltip-padding-x: $spacing-06;
// Popovers
$popover-font-size: var(--font-size-02);
$popover-bg: var(--bg-dark-primary);
$popover-max-width: 320px;
$popover-border-width: 0px; /* stylelint-disable-line length-zero-no-unit */
$popover-border-radius: var(--border-radius-base);
$popover-header-font-size: var(--font-size-02);
$popover-header-bg: var(--bg-dark-primary);
$popover-header-color: var(--content-primary-dark);
$popover-header-padding-y: var(--spacing-04);
$popover-header-padding-x: var(--spacing-06);
$popover-body-color: var(--content-primary-dark);
$popover-body-padding-y: var(--spacing-04);
$popover-body-padding-x: var(--spacing-06);
$popover-arrow-width: var(--spacing-04);
$popover-arrow-height: var(--spacing-02);
$popover-arrow-color: var(--bg-dark-primary);
// Links. Ideally we'd point these to CSS variables but Bootstrap performs
// calculations on link color during compilation.
$link-color: $link-ui;
$link-hover-color: $link-ui-hover;
$link-hover-decoration: none;
// Headings
$headings-font-family: $font-family-sans-serif;
$headings-margin-bottom: $spacing-05;
// Horizontal rules
$hr-margin-y: $spacing-08;
$hr-border-color: $border-divider;
// Modals
$modal-backdrop-bg: $bg-dark-primary;
$modal-backdrop-opacity: 0.72;
$modal-content-color: $content-secondary;
$modal-content-border-color: $border-divider;
$modal-header-padding: $spacing-05 $spacing-06;
$modal-header-padding-x: $spacing-08;
$modal-header-padding-y: $spacing-08;
// Nav toggler
$navbar-toggler-font-size: 30px;
$navbar-toggler-padding-x: var(--spacing-05);
$navbar-toggler-padding-y: var(--spacing-02);
$navbar-toggler-border-radius: var(--border-radius-base);
// Nav links
$navbar-nav-link-padding-x: var(--navbar-btn-padding-h);
// Spacing scale used by Bootstrap utilities
$spacer: $spacing-06;
$spacers: (
0: 0,
1: $spacing-02,
2: $spacing-04,
3: $spacing-06,
4: $spacing-08,
5: $spacing-11,
);
// Dropdowns
$dropdown-link-disabled-color: var(--content-disabled);
$dropdown-spacer: var(--spacing-01);
$dropdown-border-width: 0;
$dropdown-border-radius: var(--border-radius-base);
$dropdown-padding-x: var(--spacing-02);
$dropdown-padding-y: var(--spacing-02);
$dropdown-item-padding-x: var(--spacing-04);
$dropdown-item-padding-y: var(--spacing-04);
$dropdown-header-color: var(--content-secondary);
// Offcanvas
$offcanvas-horizontal-width: 320px;
$offcanvas-padding-x: 12.5px;
$offcanvas-padding-y: 12.5px;
$offcanvas-border-width: 0;
// Code
$code-color: $content-secondary;

14
services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss Normal file
View File

@@ -0,0 +1,14 @@
// Header
$header-height: 68px;
$toolbar-height: 40px;
$toolbar-small-height: 32px;
// Footer
$thin-footer-height: 50px;
$fat-footer-content-height: calc(100vh - $header-height);
$thin-footer-content-height: calc(
100vh - ($header-height + $thin-footer-height)
);
// List of allowed themes
$themes: ('default', 'light');

47
services/web/frontend/stylesheets/bootstrap-5/base/base.scss Normal file
View File

@@ -0,0 +1,47 @@
.grecaptcha-badge {
visibility: hidden;
height: 0 !important; // Prevent layout shift
}
@keyframes bounce {
0%,
10%,
26%,
40% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
20%,
21% {
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -10px, 0);
}
35% {
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -5px, 0);
}
45% {
transform: translate3d(0, -2px, 0);
}
50% {
transform: translate3d(0, 0, 0);
}
}
.bounce {
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: bounce;
transform-origin: center bottom;
}
.recaptcha-branding {
padding: var(--spacing-05) var(--spacing-05) 0 var(--spacing-05);
text-align: center;
font-size: var(--font-size-01);
}

54
services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss vendored Normal file
View File

@@ -0,0 +1,54 @@
// Only include the parts of Bootstrap we need to minimize bundle size
// Include functions first (enabling manipulation of colors, SVGs, calc, etc. in the variable overrides)
@import 'bootstrap-5/scss/functions';
// Overrides for Bootstrap 5 Sass variables. These have to be included before
// Bootstrap itself because Bootstrap uses them to create the CSS variables it
// uses, and in calculations to determine, for example, what color text to use
// on a button based on contrast.
@import '../foundations/all';
@import '../abstracts/all';
// Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import 'bootstrap-5/scss/variables';
@import 'bootstrap-5/scss/variables-dark';
// Include remainder of required parts
@import 'bootstrap-5/scss/maps';
@import 'bootstrap-5/scss/mixins';
@import 'bootstrap-5/scss/utilities';
// Layout & components
@import 'bootstrap-5/scss/root';
@import 'bootstrap-5/scss/reboot';
@import 'bootstrap-5/scss/transitions';
@import 'bootstrap-5/scss/type';
@import 'bootstrap-5/scss/images';
@import 'bootstrap-5/scss/containers';
@import 'bootstrap-5/scss/grid';
@import 'bootstrap-5/scss/tables';
@import 'bootstrap-5/scss/forms';
@import 'bootstrap-5/scss/buttons';
@import 'bootstrap-5/scss/dropdown';
@import 'bootstrap-5/scss/button-group';
@import 'bootstrap-5/scss/badge';
@import 'bootstrap-5/scss/list-group';
@import 'bootstrap-5/scss/modal';
@import 'bootstrap-5/scss/tooltip';
@import 'bootstrap-5/scss/popover';
@import 'bootstrap-5/scss/spinners';
@import 'bootstrap-5/scss/card';
@import 'bootstrap-5/scss/close';
@import 'bootstrap-5/scss/nav';
@import 'bootstrap-5/scss/navbar';
@import 'bootstrap-5/scss/offcanvas';
// Helpers
@import 'bootstrap-5/scss/helpers';
// Utilities
@import 'bootstrap-5/scss/utilities/api';
// Mixins
@import 'bootstrap-5/scss/mixins/breakpoints';

20
services/web/frontend/stylesheets/bootstrap-5/base/colors.scss Normal file
View File

@@ -0,0 +1,20 @@
/* Website redesign */
$vivid-tangerine: #f1a695;
$ceil: #9597c9;
$caramel: #f9d38f;
$dark-jungle-green: #0f271a;
$sapphire-blue: #4354a3;
$sapphire-blue-dark: #3c4c93;
$purple-bright: #939aff;
$green-bright: #13c965;
:root {
--vivid-tangerine: #{$vivid-tangerine};
--ceil: #{$ceil};
--caramel: #{$caramel};
--dark-jungle-green: #{$dark-jungle-green};
--sapphire-blue: #{$sapphire-blue};
--sapphire-blue-dark: #{$sapphire-blue-dark};
--green-bright: #{$green-bright};
--purple-bright: #{$purple-bright};
}

80
services/web/frontend/stylesheets/bootstrap-5/base/layout.scss Normal file
View File

@@ -0,0 +1,80 @@
html {
height: 100%;
}
// Prevent potential for layout shifts on a page with fixed 100% height. This
// can happen, for example, with the Grammarly extension in Firefox.
html.fixed-size-document {
position: fixed;
width: 100%;
}
body {
position: relative;
min-height: 100%;
}
.content {
min-height: 100vh;
padding-top: $header-height + $spacing-08;
padding-bottom: $spacing-08;
.thin-footer & {
min-height: calc(100vh - #{$thin-footer-height});
}
.container-top-padded {
padding-top: var(--spacing-16);
}
}
.content-alt {
background-color: $bg-light-secondary;
}
// Page header/separator
.page-separator,
.page-header {
padding-bottom: $spacing-05;
border-bottom: 1px solid $border-divider;
margin: 0;
// Apply margin above or below this header/separator only when it has a sibling
* > * + &,
* > & + * {
margin-top: $spacing-08;
}
}
// Horizontal rule. Override Bootstrap's 25% opacity, which we don't want
hr {
opacity: unset;
}
.horizontal-divider {
border-top: 1px solid var(--border-divider);
}
.hidden {
@extend .d-none;
}
.hidden-print {
@extend .d-print-none;
}
.row-spaced {
margin-top: var(--line-height-03);
}
.row-spaced-small {
margin-top: calc(var(--line-height-03) / 2);
}
.row-spaced-large {
margin-top: calc(var(--line-height-03) * 2);
}
.row-spaced-extra-large {
margin-top: calc(var(--line-height-03) * 4);
}

61
services/web/frontend/stylesheets/bootstrap-5/base/links.scss Normal file
View File

@@ -0,0 +1,61 @@
// Links
// Use CSS variables for link colors to make it easy to override in marketing page
:root {
--link-color: var(--link-ui);
--link-hover-color: var(--link-ui-hover);
--link-visited-color: var(--link-ui-visited);
--link-color-dark: var(--link-ui-dark);
--link-hover-color-dark: var(--link-ui-hover-dark);
--link-visited-color-dark: var(--link-ui-visited-dark);
--link-text-decoration: underline;
--link-hover-text-decoration: none;
}
a {
color: var(--link-color);
text-decoration: var(--link-text-decoration);
&:visited {
color: var(--link-visited-color);
}
&:hover {
color: var(--link-hover-color);
text-decoration: var(--link-hover-text-decoration);
}
}
.link-monospace {
@include font-mono;
font-weight: 500;
color: var(--green-50);
&:hover {
color: var(--green-60);
}
}
.link-black-text {
color: var(--neutral-90);
text-decoration: none;
font-weight: 600;
&:visited {
color: var(--neutral-90);
}
&:hover {
color: var(--neutral-90);
text-decoration: underline;
}
}
.link-black-full-width {
@extend .link-black-text;
display: flex;
width: 100%;
justify-content: space-between;
}

98
services/web/frontend/stylesheets/bootstrap-5/base/typography.scss Normal file
View File

@@ -0,0 +1,98 @@
// Typography
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; /* stylelint-disable-line value-keyword-case */
-moz-osx-font-smoothing: grayscale;
}
// Headings
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
// Apply margin above the heading only when it has a preceding sibling or is inside a row with a preceding sibling
* > * + &,
* + .row & {
margin-top: $spacing-08;
}
}
h1,
.h1 {
@include heading-xl;
}
h2,
.h2 {
@include heading-md;
}
h3,
.h3 {
@include heading-sm;
}
h4,
.h4 {
@include heading-xs;
}
h5,
.h5 {
@include body-base;
}
h6,
.h6 {
@include body-sm;
}
// Miscellaneous
.small {
@include body-sm;
}
// Peformatted text, sample output, code, keyboard input elements
// E.g.: Git authentication token
pre {
@include body-base;
}
code,
kbd,
samp {
font-size: 1em;
}
.list-style-check-green {
list-style-image: url('../../../../public/img/fa-check-green.svg');
}
.text-muted {
color: var(--content-disabled) !important;
}
.dm-mono {
@include font-mono;
}
@include media-breakpoint-up(lg) {
.text-center-only-desktop {
text-align: center;
}
}
@include media-breakpoint-down(lg) {
.text-center-only-mobile {
text-align: center;
}
}

50
services/web/frontend/stylesheets/bootstrap-5/components/accordion.scss Normal file
View File

@@ -0,0 +1,50 @@
.ol-accordions-container :last-child {
border: 0 !important;
}
.ol-accordions-container {
.custom-accordion-item {
width: 100%;
padding-top: var(--spacing-08);
padding-bottom: var(--spacing-09);
border-bottom: 1px solid var(--border-divider);
.custom-accordion-header {
text-align: left;
width: 100%;
font-size: var(--font-size-04);
font-weight: 600;
line-height: var(--line-height-03);
color: var(--content-primary);
background-color: unset;
border: unset;
display: flex;
justify-content: space-between;
padding: unset;
.custom-accordion-icon {
display: flex;
align-items: center;
transition: transform 0.35s ease;
margin-left: var(--spacing-08);
}
&:not(.collapsed) {
.custom-accordion-icon {
transform: rotate(180deg);
transition: transform 0.35s ease;
}
}
}
.custom-accordion-body {
@include body-base;
background-color: unset;
text-align: left;
padding: unset;
padding-right: 2rem;
margin-top: var(--spacing-04);
}
}
}

47
services/web/frontend/stylesheets/bootstrap-5/components/all.scss Normal file
View File

@@ -0,0 +1,47 @@
@import 'accordion';
@import 'button';
@import 'button-group';
@import 'dropdown-menu';
@import 'image';
@import 'notifications';
@import 'system-messages';
@import 'tooltip';
@import 'popover';
@import 'card';
@import 'badge';
@import 'form';
@import 'icon';
@import 'input-suggestions';
@import 'list';
@import 'modal';
@import 'quote';
@import 'footer';
@import 'nav';
@import 'navbar';
@import 'styled-text';
@import 'table';
@import 'blog-posts';
@import 'tabs';
@import 'beta-badges';
@import 'list-group';
@import 'select';
@import 'dictionary';
@import 'link';
@import 'pagination';
@import 'interstitial';
@import 'loading-spinner';
@import 'gallery-search';
@import 'error-boundary';
@import 'close-button';
@import 'recurly';
@import 'dev-toolbar';
@import 'tos';
@import 'collapsible-file-header';
@import 'stepper';
@import 'radio-chip';
@import 'panel-heading';
@import 'menu-bar';
@import 'invite';
@import 'upgrade-prompt';
@import 'integrations-panel';
@import 'group-members';

152
services/web/frontend/stylesheets/bootstrap-5/components/badge.scss Normal file
View File

@@ -0,0 +1,152 @@
$max-width: 160px;
.badge {
display: inline-flex;
align-items: stretch;
max-width: 100%;
line-height: var(--line-height-01);
padding: 0 var(--bs-badge-padding-x);
&:not(.badge-tag) {
max-width: $max-width;
}
}
.badge-prepend {
margin-right: var(--spacing-02);
display: flex;
align-items: center;
.material-symbols {
font-size: inherit;
}
}
.badge-close {
@include reset-button;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0 var(--spacing-02);
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
color: inherit;
user-select: none;
.badge-close-icon {
font-size: $font-size-base;
}
}
.badge-close,
.badge-tag-content-btn {
&:hover {
background-color: var(--neutral-40);
}
}
.badge-content {
@include text-truncate;
padding: var(--bs-badge-padding-y) 0;
min-width: 1em;
}
.badge-tag {
@include body-sm;
padding: 0;
color: $dark;
&:hover {
background-color: var(--neutral-30) !important;
}
}
.badge-tag-content {
display: flex;
align-items: center;
overflow: hidden;
max-width: $max-width;
padding-left: var(--bs-badge-padding-x);
padding-right: var(--bs-badge-padding-x);
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
&:last-child {
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
}
}
.badge-tag-content-btn {
@include reset-button;
padding-left: var(--bs-badge-padding-x);
padding-right: var(--bs-badge-padding-x);
}
.badge-tag-circle {
display: block;
margin: var(--spacing-02);
width: var(--spacing-04);
height: var(--spacing-04);
border-radius: 50%;
}
.badge-premium {
background-color: var(--neutral-20);
color: var(--neutral-90);
vertical-align: middle;
margin-left: 5px;
font-weight: var(--badge-font-weight);
}
.badge-premium-gradient {
background: var(--premium-gradient);
color: var(--content-primary-dark);
vertical-align: middle;
margin-left: 5px;
font-weight: var(--badge-font-weight);
}
.badge-link {
display: inline-block;
&.badge-link-light:hover .badge {
background-color: var(--neutral-30) !important;
}
&.badge-link-no-max-width {
.badge {
max-width: none;
}
}
.badge {
@include body-sm;
padding: 0 var(--bs-badge-padding-x);
transition: background-color 0.15s ease-in-out;
&:hover {
transition: background-color 0.15s ease-in-out;
}
}
}
.badge-link-list {
display: flex;
gap: var(--spacing-05);
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
align-content: flex-start;
.badge {
max-width: 200px;
}
}

11
services/web/frontend/stylesheets/bootstrap-5/components/beta-badges.scss Normal file
View File

@@ -0,0 +1,11 @@
.info-badge {
color: var(--blue-50);
}
.alpha-badge {
font-family: $font-family-monospace;
}
.split-test-badge-tooltip .tooltip-inner {
white-space: pre-wrap;
}

179
services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss Normal file
View File

@@ -0,0 +1,179 @@
/*
v2
Blog Pages
*/
.blog-container,
.blog-tagged-list-container,
.blog-post-main-container {
h1 {
margin-bottom: 0;
}
}
.blog-container {
margin-top: var(--spacing-16);
.blog-list-container-title {
margin-top: 0; // needed to override bootstrap * + h1
small {
@include body-lg;
display: block;
margin-top: var(--spacing-06);
font-weight: 400;
}
}
}
.blog-tagged-list-container {
margin-top: var(--spacing-10);
.blog-list-container-title {
margin-top: var(--spacing-11);
small {
color: var(--neutral-70);
}
}
}
.blog-post-main-container {
margin-top: var(--spacing-10);
}
.blog {
margin-top: var(--spacing-16);
img {
max-width: 100%;
}
.blog-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
.card-header {
margin-bottom: var(--margin-sm);
padding: 0;
}
> li {
.blog-date {
margin-top: var(--spacing-07);
}
&:not(:last-child) {
padding-bottom: var(--spacing-09);
border-bottom: 1px solid var(--neutral-20);
}
&:not(:first-child) {
padding-top: var(--spacing-09);
}
}
}
.blog-post-container {
@include media-breakpoint-up(lg) {
padding-right: 0;
}
}
.blog-post {
@include media-breakpoint-up(lg) {
margin-right: var(--spacing-09);
}
.blog-title {
margin-bottom: var(--spacing-04);
}
.blog-post-title-link {
@include heading-lg;
margin-top: var(--spacing-04);
margin-bottom: var(--spacing-06);
a {
@extend .link-black-text;
}
}
.blog-date {
display: block;
}
.blog-content {
margin-top: var(--spacing-08);
> *:last-child {
margin-bottom: 0;
}
}
.blog-content-preview {
p:last-child {
margin-bottom: 0;
}
& + .blog-tags > div > .tags {
margin-top: var(--spacing-06);
}
}
.blog-content,
.blog-content-preview {
img {
border-radius: var(--border-radius-medium);
}
}
.blog-footer-tags {
margin-top: var(--spacing-12);
}
.blog-read-more {
margin-bottom: var(--spacing-07);
a {
@include font-mono;
text-decoration: none;
font-weight: 500;
&:hover {
text-decoration: underline;
}
}
}
}
pre {
border: 1px solid var(--neutral-40);
border-radius: var(--border-radius-base);
padding: var(--spacing-04);
}
.figure {
background-color: #fff;
border: 1px solid var(--neutral-40);
display: inline-block;
margin: 0 auto var(--margin-sm) 0;
max-width: 100%;
padding: var(--spacing-04);
.figure-caption {
padding-top: var(--spacing-04);
font-size: small;
}
}
.pagination {
margin: var(--spacing-09) 0 0 0;
}
}

16
services/web/frontend/stylesheets/bootstrap-5/components/button-group.scss Normal file
View File

@@ -0,0 +1,16 @@
.btn-group {
> .btn {
&:first-of-type {
padding-left: var(--spacing-05);
}
&:last-of-type {
padding-right: var(--spacing-05);
}
}
}
.btn-toolbar {
gap: var(--spacing-03);
flex-wrap: nowrap;
}

279
services/web/frontend/stylesheets/bootstrap-5/components/button.scss Normal file
View File

@@ -0,0 +1,279 @@
.btn {
// Focus style for all buttons
--bs-btn-focus-box-shadow: 0 0 0 2px var(--border-active-dark);
&:focus-visible {
background-color: var(--bs-btn-bg);
}
// Sizes
// Default size
@include ol-button-size(
$font-size: var(--font-size-03),
$line-height: var(--line-height-03),
$padding-y: var(--spacing-03)
);
&.btn-lg {
@include ol-button-size(
$font-size: var(--font-size-03),
$line-height: var(--line-height-03),
$padding-y: var(--spacing-05)
);
}
&.btn-sm {
@include ol-button-size(
$font-size: var(--font-size-02),
$line-height: var(--line-height-02),
$padding-y: var(--spacing-01),
$padding-x: var(--spacing-05)
);
}
// Variants
&.btn-primary {
@include ol-button-variant(
$color: var(--content-primary-dark),
$background: var(--bg-accent-01),
$hover-background: var(--bg-accent-02),
$hover-border: var(--bg-accent-02)
);
}
&.btn-secondary {
@include ol-button-variant(
$color: var(--content-primary),
$background: var(--bg-light-primary),
$border: var(--border-primary),
$hover-background: var(--bg-light-tertiary),
$hover-border: var(--border-primary),
$borderless: false
);
}
&.btn-ghost {
@include ol-button-variant(
$color: var(--content-primary),
$background: var(--bg-light-primary),
$hover-background: var(--bg-light-tertiary)
);
}
&.btn-danger {
@include ol-button-variant(
$color: var(--content-primary-dark),
$background: var(--bg-danger-01),
$border: var(--bg-danger-01),
$hover-background: var(--bg-danger-02)
);
}
&.btn-danger-ghost {
@include ol-button-variant(
$color: var(--content-danger),
$background: var(--bg-light-primary),
$hover-background: var(--bg-danger-03)
);
}
&.btn-premium {
@include ol-button-variant(
$color: var(--content-primary-dark),
$background: var(--blue-70)
);
background: var(--premium-gradient);
transition: none;
&:hover {
background: var(--blue-70);
}
}
&.btn-premium-secondary {
@include ol-button-variant(
$color: var(--blue-60),
$background: var(--bg-light-primary),
$border: var(--blue-60),
$hover-background: var(--bg-info-03),
$hover-border: var(--blue-60),
$borderless: false
);
}
&.btn-blue {
@include ol-button-variant(
$color: var(--content-primary-dark),
$background: var(--sapphire-blue),
$border: var(--sapphire-blue),
$hover-background: (
var(--sapphire-blue-dark),
),
$hover-border: (
var(--sapphire-blue-dark),
),
$borderless: false
);
}
&.btn-social {
@extend .btn-secondary;
padding-left: var(--spacing-03);
.btn-social-icon {
height: 24px;
width: 24px;
padding: var(--spacing-01);
margin-right: var(--spacing-02);
}
}
}
// Link buttons
// -------------------------
// Make a button look and behave like a link
.btn-link {
color: var(--link-color);
font-weight: normal;
cursor: pointer;
text-decoration: underline;
font-size: inherit;
vertical-align: inherit;
border-radius: 0;
&,
&:active,
&[disabled],
fieldset[disabled] & {
background-color: transparent;
@include box-shadow(none);
}
&:hover,
&:focus {
color: var(--link-hover-color);
text-decoration: none;
background-color: transparent;
}
&.btn-danger {
color: var(--content-danger);
// since it's a link, override the button states
&:active {
color: var(--content-danger);
background-color: transparent;
}
&:focus-visible {
background-color: transparent;
outline: -webkit-focus-ring-color auto 1px;
}
}
}
.btn-inline-link {
@extend .btn-link;
font-size: inherit;
padding: 0;
vertical-align: inherit;
}
.button-loading {
align-items: center;
display: inline-grid;
grid-template-areas: 'container'; // Define a single grid area
pointer-events: none;
}
.button-loading > * {
grid-area: container; // Position all the direct children within the single grid area
}
.button-loading .spinner-container {
display: flex;
justify-content: center;
align-items: center;
.loading-spinner-small {
border-width: 0.2em;
height: 1.25rem;
width: 1.25rem;
}
.loading-spinner-large {
border-width: 0.2em;
height: 1.5rem;
width: 1.5rem;
}
}
// Hide the text when the spinner is visible
.button-loading > [aria-hidden='true'] {
visibility: hidden;
}
.button-content {
display: inline-flex;
align-items: center;
gap: var(--spacing-04); // Add gap between text and icons
justify-content: center;
.icon-small {
font-size: 1.25rem;
}
.icon-large {
font-size: 1.5rem;
}
.spinner {
margin: var(--spacing-01);
}
}
.icon-button-small {
padding: var(--spacing-01);
}
.icon-button {
padding: var(--spacing-04);
}
.icon-button-large {
padding: var(--spacing-05);
}
// Set the visited colour for a link that is styled as a button. This is necessary because we have a generic rule that
// sets the colour of visited links
a[role='button']:visited,
a.btn:visited {
color: var(--bs-btn-color);
}
// Copy icon button
.copy-button {
text-decoration: none;
}
.btn-reset {
@include reset-button;
}
.btn-transparent {
background: none !important;
border-radius: 0 !important;
color: inherit !important;
font-weight: 400;
&:hover {
background: none !important;
color: inherit !important;
}
}

233
services/web/frontend/stylesheets/bootstrap-5/components/card.scss Normal file
View File

@@ -0,0 +1,233 @@
.card {
--bs-card-bg: var(--white);
--bs-card-border-width: 0;
--bs-card-border-radius: var(--border-radius-base);
--bs-card-spacer-x: var(--spacing-08);
--bs-card-spacer-y: var(--spacing-08);
.card-body {
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}
&.card-dark-green-bg {
background: var(--dark-jungle-green);
border-radius: var(--border-radius-large);
color: var(--green-10);
.card-body {
padding: var(--spacing-09);
}
a:not(.btn) {
color: var(--green-30);
&:hover {
color: var(--green-30);
}
}
h1,
h2,
h3,
h4,
h5,
p {
color: var(--green-10);
}
}
&.card-purple-top-border {
background-color: white;
border-radius: var(--border-radius-medium);
box-shadow:
0 2px 4px 0 #1e253014,
0 4px 12px 0 #1e25301f;
border-top: 8px solid var(--sapphire-blue);
.card-body {
padding: var(--spacing-09) var(--spacing-10);
}
}
&.card-premium-border {
h1,
h2,
h3,
h4,
h5 {
color: var(--blue-60);
}
border-radius: var(--spacing-04);
border: 2px solid transparent;
background:
linear-gradient(white, white) padding-box,
linear-gradient(to right, var(--blue-40), #254c84, var(--blue-70))
border-box;
.card-body {
padding: var(--spacing-10);
}
.btn {
width: 100%;
}
}
&.card-blue-border {
h1,
h2,
h3,
h4,
h5 {
color: var(--sapphire-blue);
}
background-color: white;
border-radius: var(--spacing-04);
border: 2px solid var(--sapphire-blue);
.card-body {
padding: var(--spacing-10);
}
.btn {
width: 100%;
}
}
&.card-pattern {
border-radius: var(--border-radius-medium);
color: var(--white);
text-align: center;
background-size: cover;
background-image: linear-gradient(
to right,
rgba(0 0 0 / 40%) 0%,
var(--dark-jungle-green) 25%,
var(--dark-jungle-green) 75%,
rgba(0 0 0 / 40%) 100%
),
url('../../../../public/img/website-redesign/overleaf-pattern-purple.png');
h2 {
@include heading-lg;
}
p {
@include body-lg;
}
h1,
h2,
h3,
h4,
h5,
p {
color: var(--white);
}
.card-body {
padding: var(--spacing-13);
}
}
&.card-pattern-left-only {
border-radius: var(--border-radius-medium);
color: var(--white);
background-size: cover;
background-image: linear-gradient(
to right,
rgba(0 0 0 / 40%) 0%,
var(--dark-jungle-green) 20%,
var(--dark-jungle-green) 100%
),
url('../../../../public/img/website-redesign/overleaf-pattern-purple.png');
h2 {
@include heading-lg;
}
p {
@include body-lg;
}
h1,
h2,
h3,
h4,
h5,
p {
color: var(--white);
}
.card-body {
padding: var(--spacing-13);
}
}
&.card-grey-border {
background-color: white;
border-radius: var(--border-radius-medium);
border: 2px solid var(--neutral-20);
.card-body {
padding: var(--spacing-10);
}
}
&.card-green-border {
background-color: white;
border-radius: var(--border-radius-medium);
border: 2px solid var(--green-50);
.card-body {
padding: var(--spacing-09);
}
}
}
.card-gray {
background-color: var(--neutral-10);
}
.card-gray-dark {
background-color: var(--neutral-10);
border-radius: var(--border-radius-base);
.card-body {
padding: var(--spacing-10) var(--spacing-09);
}
}
.card-icon {
display: flex;
width: max-content;
margin: 0 auto;
padding: var(--spacing-08);
border-radius: 50%;
background-color: var(--bg-light-secondary);
color: var(--content-secondary);
.material-symbols {
font-size: 2rem;
}
&.text-primary {
background-color: var(--bg-accent-03);
}
&.text-danger {
background-color: var(--bg-danger-03);
}
}
.card-description-secondary {
color: var(--content-secondary);
}

10
services/web/frontend/stylesheets/bootstrap-5/components/close-button.scss Normal file
View File

@@ -0,0 +1,10 @@
// This is our own implementation because the Bootstrap close button requires more customization than is worthwhile
.close {
@include reset-button;
color: var(--content-primary);
&.dark {
color: var(--content-primary-dark);
}
}

28
services/web/frontend/stylesheets/bootstrap-5/components/collapsible-file-header.scss Normal file
View File

@@ -0,0 +1,28 @@
:root {
--collapsible-file-header-bg-color: var(--bg-light-tertiary);
@include theme('default') {
.ide-redesign-main {
--collapsible-file-header-bg-color: var(--bg-dark-tertiary);
}
}
}
.collapsible-file-header {
all: unset;
padding: var(--spacing-03) var(--spacing-04);
font-size: var(--font-size-02);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--spacing-04);
box-sizing: border-box;
width: 100%;
}
.collapsible-file-header-count {
background-color: var(--collapsible-file-header-bg-color);
padding: var(--spacing-01) var(--spacing-02);
margin-left: auto;
border-radius: var(--border-radius-base);
}

136
services/web/frontend/stylesheets/bootstrap-5/components/dev-toolbar.scss Normal file
View File

@@ -0,0 +1,136 @@
.dev-toolbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
height: 40px;
background-color: var(--bg-dark-primary);
padding: var(--spacing-02) var(--spacing-05);
button.widget {
color: var(--neutral-10);
margin: 0 var(--spacing-02);
padding: 0 var(--spacing-02);
border: none;
text-decoration: none;
.badge {
font-size: var(--font-size-03);
}
}
.collapse-button {
position: absolute;
padding: 0;
margin-top: calc(var(--spacing-01) * -1);
color: var(--neutral-50);
border-color: transparent;
span {
font-size: var(--font-size-07);
}
&:hover {
color: var(--border-primary-dark);
}
}
}
.dev-tool-bar-open-button {
position: fixed;
bottom: -2px;
left: 6px;
color: var(--neutral-70);
span {
font-size: var(--font-size-07);
}
&:hover {
color: var(--border-primary-dark);
}
}
.dev-toolbar-tooltip {
opacity: 1 !important;
a {
color: var(--blue-20) !important;
text-decoration: none;
&.btn {
color: var(--neutral-10);
}
}
&.tooltip.top {
margin-top: calc(var(--spacing-04) * -1);
opacity: 1;
}
.tooltip-inner {
padding: var(--spacing-01) var(--spacing-04) var(--spacing-04)
var(--spacing-04);
text-align: left;
min-width: 300px;
max-height: 800px;
overflow-y: auto;
}
.title {
margin-top: var(--spacing-02);
}
.test-card {
text-align: left;
color: var(--neutral-10);
padding: var(--spacing-03);
border: var(--spacing-01) solid var(--neutral-70);
background-color: var(--bg-dark-secondary);
border-radius: var(--border-radius-base);
margin-top: var(--spacing-04);
&.override {
border-color: var(--blue-40);
}
.test-name {
font-family: monospace;
font-size: var(--font-size-01);
font-weight: bold;
}
ul {
li.variant-row {
line-height: var(--line-height-03);
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-01) 0;
.btn-inline-link {
color: var(--content-primary-dark) !important;
opacity: 1;
font-weight: 400;
text-decoration: none;
.material-symbols {
vertical-align: sub;
font-weight: 400;
font-size: var(--font-size-03);
}
}
}
}
}
.actions {
margin-top: var(--spacing-04);
text-align: right;
}
ul {
margin-bottom: 0;
}
}

33
services/web/frontend/stylesheets/bootstrap-5/components/dictionary.scss Normal file
View File

@@ -0,0 +1,33 @@
#dictionary-modal {
.modal-body {
padding: 0;
}
}
.dictionary-entries-list {
overflow-y: scroll;
max-height: calc(100vh - 225px);
margin: 0;
padding: var(--spacing-04);
}
.dictionary-entry {
word-break: break-all;
display: flex;
padding: var(--spacing-04);
border-bottom: solid 1px var(--border-divider);
align-items: center;
&:last-child {
border-bottom: none;
}
}
.dictionary-entry-name {
flex-grow: 1;
padding-right: var(--spacing-02);
}
.dictionary-empty-body {
padding: var(--spacing-07);
}

223
services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss Normal file
View File

@@ -0,0 +1,223 @@
$dropdown-item-min-height: 36px;
.dropdown {
display: inline-flex;
.no-left-border {
border-left: none;
}
.custom-toggle {
&::after {
content: none !important;
}
padding-left: var(--spacing-04);
padding-right: var(--spacing-05);
display: flex;
align-items: center;
}
}
.dropdown-header {
@include body-xs;
min-height: $dropdown-item-min-height; // a minimum height of 36px to be accessible for touch screens
padding: var(--spacing-05) var(--spacing-06) var(--spacing-02)
var(--spacing-04);
}
.dropdown-menu.dropdown-menu-unpositioned {
position: unset;
top: unset;
left: unset;
z-index: unset;
display: block;
float: unset;
}
.dropdown-menu {
@include shadow-md;
min-width: 240px;
&.dropdown-menu-sm-width {
min-width: 160px;
}
.subdued {
color: var(--content-disabled);
}
}
.dropdown-item {
@include body-sm;
--bs-dropdown-item-border-radius: var(--border-radius-base);
display: grid;
grid-auto-flow: column;
place-content: center start;
min-height: $dropdown-item-min-height; // a minimum height of 36px to be accessible for touch screens
position: relative;
&:active {
background-color: var(--bg-accent-03);
}
&,
&:active,
&:visited {
color: var(--neutral-90);
}
&:hover:not(.active),
&:focus:not(.active),
&.nested-dropdown-toggle-shown {
background-color: var(--bg-light-secondary);
cursor: pointer;
text-decoration: none;
}
&[variant='danger'] {
color: var(--content-danger);
&:hover:not(.active),
&:focus:not(.active) {
background-color: var(--bg-danger-03);
}
}
&.active {
background-color: var(--bg-accent-03);
color: var(--green-70);
}
&.btn-link {
text-decoration: none;
&:hover,
&:focus {
color: inherit;
}
}
}
.dropdown-divider {
border-top-color: var(--border-divider);
margin: var(--spacing-01) var(--spacing-03);
}
.dropdown-item-description {
@include body-xs;
color: var(--content-secondary);
margin-top: var(--spacing-01);
text-wrap: wrap;
}
.dropdown-item-description-container {
grid-auto-flow: row;
min-height: 44px;
display: grid;
place-content: center start;
}
.dropdown-item-trailing-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.dropdown-item-leading-icon {
display: flex;
align-items: center;
padding-right: var(--spacing-04);
&.spinner {
margin-left: var(--spacing-01);
margin-right: var(--spacing-01);
}
}
.dropdown-item-leading-icon,
.dropdown-item-trailing-icon {
.material-symbols {
vertical-align: top;
}
}
.dropdown-item-leading-icon-empty {
display: inline-block;
width: 20px;
}
// description text should look disabled when the dropdown item is disabled
.dropdown-item.disabled .dropdown-item-description,
.dropdown-item[aria-disabled='true'] .dropdown-item-description {
background-color: transparent;
color: var(--content-disabled);
}
// override disabled styles when the state is active
.dropdown-item.active .dropdown-item-description {
background-color: initial;
color: var(--green-70);
}
.dropdown-button-toggle {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding-right: var(--spacing-05);
padding-left: var(--spacing-05);
margin-left: 0;
&.btn-primary,
&.btn-danger {
border-left: 1px solid rgb($neutral-90, 0.16);
}
&.btn-secondary {
border-left: 1px solid var(--neutral-60);
}
&[disabled],
&[aria-disabled='true'] {
border-left: 1px solid var(--neutral-10);
}
}
.select-dropdown-menu {
top: 100%;
margin-top: var(--spacing-04);
width: 100%;
max-height: 200px;
overflow: auto;
overflow-x: hidden;
}
.dropdown-item-highlighted {
background-color: var(--bg-light-secondary);
}
.dropdown-item-material-icon-small {
.material-symbols,
&.material-symbols {
font-size: var(--bs-body-font-size);
// Centre the symbol in a 20px-by-20px box
width: 20px;
line-height: 20px;
text-align: center;
}
}
.nested-dropdown-toggle {
&::after {
content: none !important;
}
display: flex;
justify-content: space-between;
}

22
services/web/frontend/stylesheets/bootstrap-5/components/error-boundary.scss Normal file
View File

@@ -0,0 +1,22 @@
.error-boundary-alert {
padding: var(--spacing-05);
}
.error-boundary-container {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--spacing-06);
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
.error-message {
align-items: center;
color: var(--content-primary);
display: flex;
flex-direction: column;
gap: var(--spacing-02);
}
}

464
services/web/frontend/stylesheets/bootstrap-5/components/footer.scss Normal file
View File

@@ -0,0 +1,464 @@
@use 'sass:map';
// Max width of the sidebar
$footer-width-delta: 320px;
@mixin footer-container-up($bp) {
$size: map.get($grid-breakpoints, $bp);
@supports (container-type: inline-size) {
@container fatfooter (width >= #{$size}) {
@content;
}
}
@supports not (container-type: inline-size) {
@at-root {
.project-ds-nav-page & {
@media (min-width: #{$size + $footer-width-delta}) {
@content;
}
}
:not(.project-ds-nav-page *) & {
@media (min-width: #{$size}) {
@content;
}
}
}
}
}
@mixin footer-container-down($bp) {
$size: map.get($grid-breakpoints, $bp);
@supports (container-type: inline-size) {
@container fatfooter (width < #{$size}) {
@content;
}
}
@supports not (container-type: inline-size) {
@at-root {
.project-ds-nav-page & {
@media (max-width: #{$size + $footer-width-delta}) {
@content;
}
}
:not(.project-ds-nav-page *) & {
@media (max-width: #{$size}) {
@content;
}
}
}
}
}
footer.site-footer {
--link-color: var(--link-web);
--link-hover-color: var(--link-web-hover);
--link-visited-color: var(--link-web-visited);
--link-text-decoration: none;
--link-hover-text-decoration: underline;
background-color: var(--bg-light-primary);
border-top: 1px solid var(--border-primary-dark);
@include body-sm;
min-height: $thin-footer-height;
line-height: $thin-footer-height - 1; // Hack — in Chrome, using the full $footer-height would generate vertical scrolling
ul.site-footer-items {
list-style: none;
margin: 0;
> li {
display: inline-block;
margin: 0 var(--spacing-04);
}
i {
font-size: var(--font-size-05);
}
}
}
.site-footer-content {
@extend .container-fluid;
}
.sprite-icon-lang {
display: inline-block;
vertical-align: middle;
}
#language-picker-toggle {
text-decoration: none;
cursor: pointer;
&::after {
display: none;
}
&:hover {
.language-picker-text {
text-decoration: var(--link-hover-text-decoration);
}
}
.material-symbols {
vertical-align: -0.1875rem;
}
}
.language-picker .dropdown-menu {
.dropdown-item {
&.active {
color: var(--green-70);
}
&:hover {
text-decoration: none;
}
}
}
.fat-footer {
--footer-text-color: var(--content-secondary-dark);
--footer-background-color: var(--bg-dark-primary);
--link-color: var(--footer-text-color);
--link-hover-color: var(--footer-text-color);
--link-visited-color: var(--footer-text-color);
--link-text-decoration: none;
--link-hover-text-decoration: underline;
container-name: fatfooter;
container-type: inline-size;
background: var(--footer-background-color);
color: var(--footer-text-color);
display: flex;
flex-direction: column;
.fat-footer-container {
margin: var(--spacing-11) auto;
@include footer-container-down(sm) {
margin: var(--spacing-11) 0;
}
}
.footer-brand-container {
flex: 1;
}
.fat-footer-sections {
display: grid;
column-gap: var(--spacing-07);
padding: 0 var(--spacing-07) var(--spacing-07);
}
.footer-brand {
display: block;
height: 37px;
width: 130px;
background-image: url('../../../../public/img/ol-brand/overleaf-white.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
}
.footer-section-heading {
color: var(--footer-text-color);
@include heading-sm;
margin-bottom: var(--spacing-07);
margin-top: var(--spacing-07);
}
.footer-section ul {
@include body-sm;
}
.footer-section li {
padding-bottom: var(--spacing-04);
}
#footer-brand {
grid-column: 1/-1;
margin-top: var(--spacing-07);
}
.fat-footer-base {
color: var(--content-disabled);
@include body-sm;
#language-picker-toggle {
color: var(--footer-text-color);
}
.fat-footer-base-meta a:not(.dropdown-toggle) {
color: inherit;
}
.language-picker .dropdown-menu {
.dropdown-header {
display: none; /* hiding rather than removing as still needed in the thin footer */
}
}
}
.fat-footer-base-item {
display: flex;
white-space: nowrap;
}
.fat-footer-social {
&.x-logo svg path {
fill: var(--footer-text-color);
}
&.facebook-logo svg,
&.linkedin-logo svg {
path.background {
fill: var(--footer-text-color);
}
}
&.facebook-logo svg {
path.text {
fill: transparent;
}
}
&.linkedin-logo svg {
path.text {
fill: var(--footer-background-color);
}
}
}
@include footer-container-down(md) {
.fat-footer-sections {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, auto);
}
.fat-footer-base {
display: flex;
flex-direction: column;
align-items: center;
.fat-footer-base-section {
display: flex;
align-items: center;
}
.fat-footer-base-social {
order: 1;
}
.fat-footer-base-meta {
display: flex;
flex-direction: column-reverse;
align-items: center;
order: 2;
}
.fat-footer-base-item {
flex-wrap: wrap;
padding: var(--spacing-02);
margin: var(--spacing-06);
}
.fat-footer-base-meta .fat-footer-base-item {
gap: var(--spacing-09);
justify-content: center;
@include footer-container-down(sm) {
gap: var(--spacing-06);
}
}
.fat-footer-base-social .fat-footer-base-item {
gap: var(--spacing-07);
margin-top: var(--spacing-00);
}
.fat-footer-base-copyright {
order: 2;
}
}
}
@include footer-container-up(md) {
.fat-footer-container {
width: (map.get($grid-breakpoints, 'md') - ($spacing-04 * 2));
}
#footer-brand {
grid-column: auto;
grid-row: 1/-1;
}
.fat-footer-sections {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, auto);
}
.footer-section:last-of-type {
grid-column: 4;
}
.fat-footer-base {
display: flex;
justify-content: space-between;
margin: var(--spacing-07) auto;
.fat-footer-base-section {
display: flex;
align-items: center;
}
.fat-footer-base-item {
padding: var(--spacing-02);
margin: var(--spacing-02);
}
.fat-footer-base-meta .fat-footer-base-item {
gap: var(--spacing-07);
}
.fat-footer-social {
margin: var(--spacing-07) var(--spacing-03);
}
}
}
@include footer-container-up(lg) {
.fat-footer-container {
width: (map.get($grid-breakpoints, 'lg') - $spacing-07);
}
.fat-footer-sections {
grid-template-columns: repeat(4, 1fr);
}
}
@include footer-container-up(xl) {
.fat-footer-container {
width: (map.get($grid-breakpoints, 'xl') - $spacing-09);
}
.fat-footer-sections {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
}
.footer-section:last-of-type {
grid-column: 6;
}
}
}
.cookie-banner {
@include body-sm;
padding: var(--spacing-05) var(--spacing-07);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
color: var(--content-secondary);
background: var(--bg-light-secondary);
box-shadow: 0 -5px 8px 0 #0000001a;
.cookie-banner-actions {
padding-top: var(--spacing-04);
}
@include media-breakpoint-up(md) {
align-items: center;
display: flex;
flex-wrap: wrap;
.cookie-banner-content {
flex: 1;
}
.cookie-banner-actions {
flex-shrink: 0;
white-space: nowrap;
padding-top: var(--spacing-00);
}
}
}
.website-redesign-fat-footer,
.website-redesign .fat-footer {
--footer-text-color: var(--content-primary);
.fat-footer-container {
@include footer-container-down(sm) {
margin: var(--spacing-11) 0;
}
}
&.fat-footer {
background: var(--content-primary-dark);
h2 {
font-weight: 400;
}
.fat-footer-base {
color: var(--content-primary);
#language-picker-toggle {
color: inherit;
}
}
// This is duplication of fill colours in the SVGs themselves. This could be fixed by using :has() but that's not
// supported in older versions of browsers and these logos need to be correct.
.fat-footer-social {
&.x-logo svg path {
fill: #0f1419;
}
&.facebook-logo svg,
&.linkedin-logo svg {
path.text {
fill: #fff;
}
}
&.facebook-logo svg {
path.background {
fill: #0866ff;
}
}
&.linkedin-logo svg {
path.background {
fill: #0b66c3;
}
}
}
}
.footer-brand {
background-image: url('../../../../public/img/ol-brand/overleaf-black.svg');
}
@include footer-container-down(sm) {
.fat-footer-sections {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(6, auto);
}
}
}

254
services/web/frontend/stylesheets/bootstrap-5/components/form.scss Normal file
View File

@@ -0,0 +1,254 @@
.form-check-input {
@function form-check-box-svg($color) {
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
}
@function form-check-radio-svg($color) {
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$color}'/></svg>");
}
@function form-check-indeterminate-svg($color) {
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
}
&:hover {
&:not(:disabled) {
border-color: var(--border-hover);
&:checked,
&[type='checkbox']:indeterminate {
background-color: var(--bg-accent-02);
border-color: var(--bg-accent-02);
}
}
}
&:disabled {
@include input-disabled-styles;
&[type='checkbox']:indeterminate {
@include input-disabled-styles;
background-image: escape-svg(form-check-indeterminate-svg($neutral-40));
}
}
// Use disabled attribute in addition of :disabled pseudo-class
// See: https://github.com/twbs/bootstrap/issues/28247
&[disabled],
&:disabled {
~ .form-check-label {
color: $input-disabled-color;
}
&:checked {
&[type='checkbox'] {
background-image: escape-svg(form-check-box-svg($neutral-40));
}
&[type='radio'] {
background-image: escape-svg(form-check-radio-svg($neutral-40));
}
}
}
&:focus-visible {
outline: 0;
border-color: $input-focus-border-color;
box-shadow: $input-focus-box-shadow;
}
}
.form-control {
&[disabled],
&:disabled {
&::placeholder {
color: var(--content-disabled);
}
}
}
// Fake disabled checkbox style
.readonly-disabled-checkbox input.form-check-input {
@include input-disabled-styles;
&:hover:not(:disabled):checked {
@include input-disabled-styles;
}
}
.form-switch {
.form-check-input {
--bs-form-check-bg: var(--bg-dark-tertiary);
height: 20px;
margin: 0;
border: 0;
&:hover {
cursor: pointer;
}
&:disabled {
opacity: 0.32;
background-color: var(--bg-dark-tertiary);
&:checked {
background-color: var(--bg-accent-01);
background-image: #{escape-svg(
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$component-active-color}'/></svg>")
)};
}
}
}
}
.form-check-label-description {
.form-text-inner {
margin-top: var(--spacing-01) !important;
}
}
.form-text {
.form-control[disabled] ~ & {
color: var(--content-disabled);
}
.form-text-inner {
display: flex;
gap: var(--spacing-02);
line-height: var(--line-height-02);
margin-top: var(--spacing-04);
}
}
.form-label {
&:has(+ .form-control[disabled], + .form-control-wrapper-disabled) {
color: var(--content-disabled);
}
}
.form-group {
margin-bottom: $form-group-margin-bottom;
}
.form-control-wrapper {
position: relative;
&.form-control-wrapper-disabled {
.form-control-start-icon,
.form-control-end-icon {
& > * {
color: var(--content-disabled);
}
}
}
.form-control-start-icon,
.form-control-end-icon {
position: absolute;
top: 0;
height: 100%;
display: flex;
align-items: center;
}
.form-control-start-icon {
left: 0;
padding-left: calc(var(--form-control-padding-x) + var(--bs-border-width));
}
.form-control-end-icon {
right: 0;
padding-right: calc(var(--form-control-padding-x) + var(--bs-border-width));
.form-control-search-clear-btn {
@include reset-button;
display: flex;
justify-content: center;
}
}
--icon-width: 20px;
--form-control-padding-x: var(--spacing-04);
--form-control-icon-offset-y: var(--spacing-04);
&.form-control-wrapper-sm {
--form-control-padding-x: var(--spacing-03);
--form-control-icon-offset-y: var(--spacing-02);
}
&.form-control-wrapper-lg {
--form-control-padding-x: var(--spacing-05);
--form-control-icon-offset-y: var(--spacing-05);
}
.form-control-offset-start {
padding-left: calc(
var(--form-control-padding-x) + var(--form-control-icon-offset-y) +
var(--icon-width)
);
}
.form-control-offset-end {
padding-right: calc(
var(--form-control-padding-x) + var(--form-control-icon-offset-y) +
var(--icon-width)
);
}
}
.form-control,
.form-select {
&:focus,
&:invalid:focus,
&.is-invalid:focus,
&:focus-visible,
&:invalid:focus-visible,
&.is-invalid:focus-visible {
color: $input-focus-color;
background-color: $input-focus-bg;
outline: 0;
border-color: $input-focus-border-color;
box-shadow: $input-focus-box-shadow;
}
}
.website-redesign {
label {
color: $form-text-color;
display: inline-block;
margin-bottom: var(--spacing-02);
font-weight: bold;
@include body-sm;
}
.checkbox-label {
margin-left: var(--spacing-04);
}
}
%input-focus-style {
border-color: $input-focus-border-color;
box-shadow: $form-check-input-focus-box-shadow;
}
input[type='range'] {
display: block;
width: 100%;
}
// Feedback states
.has-success {
@include form-control-validation($bg-accent-01);
}
.has-warning {
@include form-control-validation($bg-warning-03);
}
.has-error {
@include form-control-validation($bg-danger-01);
}

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