diff --git a/package-lock.json b/package-lock.json index 0d75094164..5aa6f1df0d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18261,6 +18261,8 @@ "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz", "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "is-what": "^3.14.1" }, @@ -20711,6 +20713,7 @@ "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", "dev": true, "optional": true, + "peer": true, "dependencies": { "prr": "~1.0.1" }, @@ -25778,6 +25781,7 @@ "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=", "dev": true, "optional": true, + "peer": true, "bin": { "image-size": "bin/image-size.js" }, @@ -26767,7 +26771,9 @@ "version": "3.14.1", "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/is-windows": { "version": "1.0.2", @@ -28128,6 +28134,8 @@ "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz", "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "copy-anything": "^2.0.1", "tslib": "^1.10.0" @@ -28148,29 +28156,13 @@ "source-map": "~0.6.0" } }, - "node_modules/less-loader": { - "version": "11.1.3", - "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.3.tgz", - "integrity": "sha512-A5b7O8dH9xpxvkosNrP0dFp2i/dISOJa9WwGF3WJflfqIERE2ybxh1BFDj5CovC2+jCE4M354mk90hN6ziXlVw==", - "dev": true, - "engines": { - "node": ">= 14.15.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - }, - "peerDependencies": { - "less": "^3.5.0 || ^4.0.0", - "webpack": "^5.0.0" - } - }, "node_modules/less/node_modules/mime": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", "dev": true, "optional": true, + "peer": true, "bin": { "mime": "cli.js" }, @@ -28182,7 +28174,9 @@ "version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/leven": { "version": "3.1.0", @@ -30627,7 +30621,8 @@ "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.1.0.tgz", "integrity": "sha512-uZ5rQaeRn15XmpgE0xoPL8YWqcX90VtCFglYwAgkvKM5e8fog+vePLAhHxuuv/gRkrQxIeh5U3q9sMNUrENqWw==", "dev": true, - "optional": true + "optional": true, + "peer": true }, "node_modules/natural-compare": { "version": "1.4.0", @@ -34307,7 +34302,8 @@ "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=", "dev": true, - "optional": true + "optional": true, + "peer": true }, "node_modules/pseudomap": { "version": "1.0.2", @@ -45257,8 +45253,6 @@ "jscodeshift": "^17.0.0", "jsdom": "^19.0.0", "jsdom-global": "^3.0.2", - "less": "^3.13.1", - "less-loader": "^11.1.3", "match-sorter": "^6.2.0", "mathjax": "^3.2.2", "mensch": "^0.3.4", diff --git a/services/web/.prettierignore b/services/web/.prettierignore index 2e8db8b35b..f5ad5aafb8 100644 --- a/services/web/.prettierignore +++ b/services/web/.prettierignore @@ -6,8 +6,7 @@ frontend/js/vendor modules/**/frontend/js/vendor public/js public/minjs -frontend/stylesheets/bootstrap-5/modules/metrics/nvd3.scss -frontend/stylesheets/components/nvd3.less +frontend/stylesheets/modules/metrics/nvd3.scss frontend/js/features/source-editor/lezer-latex/latex.mjs frontend/js/features/source-editor/lezer-latex/latex.terms.mjs frontend/js/features/source-editor/lezer-bibtex/bibtex.mjs diff --git a/services/web/.storybook/main.ts b/services/web/.storybook/main.ts index ac1a922072..6c7c4e892a 100644 --- a/services/web/.storybook/main.ts +++ b/services/web/.storybook/main.ts @@ -37,14 +37,6 @@ const config: StorybookConfig = { { loader: 'css-loader' }, ], }, - { - test: /\.less$/, - use: [ - { loader: MiniCssExtractPlugin.loader }, - { loader: 'css-loader' }, - { loader: 'less-loader' }, - ], - }, { // Pass Sass files through sass-loader/css-loader/mini-css-extract- // plugin (note: run in reverse order) diff --git a/services/web/.storybook/preview.tsx b/services/web/.storybook/preview.tsx index c5d50da27a..6e1032afab 100644 --- a/services/web/.storybook/preview.tsx +++ b/services/web/.storybook/preview.tsx @@ -154,7 +154,7 @@ const preview: Preview = { return { mainStyle: await import( // @ts-ignore - `!!to-string-loader!css-loader!resolve-url-loader!sass-loader!../../../services/web/frontend/stylesheets/bootstrap-5/main-style.scss` + `!!to-string-loader!css-loader!resolve-url-loader!sass-loader!../../../services/web/frontend/stylesheets/main-style.scss` ), } }, diff --git a/services/web/app/src/infrastructure/ExpressLocals.js b/services/web/app/src/infrastructure/ExpressLocals.js index 5cf9501c29..76564ff5d4 100644 --- a/services/web/app/src/infrastructure/ExpressLocals.js +++ b/services/web/app/src/infrastructure/ExpressLocals.js @@ -214,16 +214,8 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) { return staticFilesBase + webpackManifest[cssFileName] } - res.locals.buildCssPath = function ( - themeModifier = '', - bootstrapVersion = 3 - ) { - // Pick which main stylesheet to use based on Bootstrap version - return res.locals.buildStylesheetPath( - bootstrapVersion === 5 - ? 'main-style-bootstrap-5.css' - : `main-${themeModifier}style.css` - ) + res.locals.buildCssPath = function () { + return res.locals.buildStylesheetPath('main-style.css') } res.locals.buildImgPath = function (imgFile) { @@ -346,17 +338,14 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) { { name: 'Dark', val: '', - path: res.locals.buildCssPath(), }, { name: 'Light', val: 'light-', - path: res.locals.buildCssPath('light-'), }, { name: 'System', val: 'system', - path: res.locals.buildCssPath(), }, ] } @@ -373,12 +362,6 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) { next() }) - webRouter.use(function (req, res, next) { - res.locals.bootstrap5Override = - req.query['bootstrap-5-override'] === 'enabled' - next() - }) - webRouter.use(function (req, res, next) { res.locals.websiteRedesignOverride = req.query.redesign === 'enabled' next() diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-change-action.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-change-action.tsx index 532dc9a466..df0b4c8e38 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-change-action.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-change-action.tsx @@ -1,4 +1,4 @@ -import Tooltip from '@/features/ui/components/bootstrap-5/tooltip' +import Tooltip from '@/features/ui/components/bootstrap-5/tooltip-bs5' import { ComponentProps, memo, MouseEventHandler } from 'react' import { PreventSelectingEntry } from '@/features/review-panel-new/components/review-panel-prevent-selecting' import OLTooltip from '@/features/ui/components/ol/ol-tooltip' diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/tooltip.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/tooltip-bs5.tsx similarity index 100% rename from services/web/frontend/js/features/ui/components/bootstrap-5/tooltip.tsx rename to services/web/frontend/js/features/ui/components/bootstrap-5/tooltip-bs5.tsx diff --git a/services/web/frontend/js/features/ui/components/ol/ol-tooltip.tsx b/services/web/frontend/js/features/ui/components/ol/ol-tooltip.tsx index eca0a7d5b9..2e4a275ff4 100644 --- a/services/web/frontend/js/features/ui/components/ol/ol-tooltip.tsx +++ b/services/web/frontend/js/features/ui/components/ol/ol-tooltip.tsx @@ -1,4 +1,4 @@ -import Tooltip from '@/features/ui/components/bootstrap-5/tooltip' +import Tooltip from '@/features/ui/components/bootstrap-5/tooltip-bs5' function OLTooltip(props: React.ComponentProps) { return diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss b/services/web/frontend/stylesheets/abstracts/all.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss rename to services/web/frontend/stylesheets/abstracts/all.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss b/services/web/frontend/stylesheets/abstracts/mixins.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss rename to services/web/frontend/stylesheets/abstracts/mixins.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/templates-search.scss b/services/web/frontend/stylesheets/abstracts/templates-search.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/abstracts/templates-search.scss rename to services/web/frontend/stylesheets/abstracts/templates-search.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss b/services/web/frontend/stylesheets/abstracts/themes-common-variables.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss rename to services/web/frontend/stylesheets/abstracts/themes-common-variables.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss b/services/web/frontend/stylesheets/abstracts/variable-overrides.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss rename to services/web/frontend/stylesheets/abstracts/variable-overrides.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss b/services/web/frontend/stylesheets/abstracts/variables.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss rename to services/web/frontend/stylesheets/abstracts/variables.scss diff --git a/services/web/frontend/stylesheets/app/about-page.less b/services/web/frontend/stylesheets/app/about-page.less deleted file mode 100644 index d9869a6b77..0000000000 --- a/services/web/frontend/stylesheets/app/about-page.less +++ /dev/null @@ -1,9 +0,0 @@ -.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); - } -} diff --git a/services/web/frontend/stylesheets/app/about.less b/services/web/frontend/stylesheets/app/about.less deleted file mode 100644 index f516114841..0000000000 --- a/services/web/frontend/stylesheets/app/about.less +++ /dev/null @@ -1,33 +0,0 @@ -/* - 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; - } - } - } -} diff --git a/services/web/frontend/stylesheets/app/add-secondary-email-prompt.less b/services/web/frontend/stylesheets/app/add-secondary-email-prompt.less deleted file mode 100644 index 7a4eff71a7..0000000000 --- a/services/web/frontend/stylesheets/app/add-secondary-email-prompt.less +++ /dev/null @@ -1,16 +0,0 @@ -.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; - } -} diff --git a/services/web/frontend/stylesheets/app/base.less b/services/web/frontend/stylesheets/app/base.less deleted file mode 100644 index 2ae217e58f..0000000000 --- a/services/web/frontend/stylesheets/app/base.less +++ /dev/null @@ -1,220 +0,0 @@ -.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; - } - } - } -} diff --git a/services/web/frontend/stylesheets/app/beta-program.less b/services/web/frontend/stylesheets/app/beta-program.less deleted file mode 100644 index f37d4ecafc..0000000000 --- a/services/web/frontend/stylesheets/app/beta-program.less +++ /dev/null @@ -1,5 +0,0 @@ -.beta-opt-in { - .form-group { - margin-top: 15px; - } -} diff --git a/services/web/frontend/stylesheets/app/blog-posts.less b/services/web/frontend/stylesheets/app/blog-posts.less deleted file mode 100644 index 9ac80efcc9..0000000000 --- a/services/web/frontend/stylesheets/app/blog-posts.less +++ /dev/null @@ -1,60 +0,0 @@ -/* - 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; - } - } -} diff --git a/services/web/frontend/stylesheets/app/blog.less b/services/web/frontend/stylesheets/app/blog.less deleted file mode 100644 index 0cfe4acb3c..0000000000 --- a/services/web/frontend/stylesheets/app/blog.less +++ /dev/null @@ -1,59 +0,0 @@ -.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; - } - } - } -} diff --git a/services/web/frontend/stylesheets/app/bonus.less b/services/web/frontend/stylesheets/app/bonus.less deleted file mode 100644 index 306db939f1..0000000000 --- a/services/web/frontend/stylesheets/app/bonus.less +++ /dev/null @@ -1,125 +0,0 @@ -@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; - } -} diff --git a/services/web/frontend/stylesheets/app/change-plan-modal.less b/services/web/frontend/stylesheets/app/change-plan-modal.less deleted file mode 100644 index 1095d417ef..0000000000 --- a/services/web/frontend/stylesheets/app/change-plan-modal.less +++ /dev/null @@ -1,59 +0,0 @@ -#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; - } - } - } -} diff --git a/services/web/frontend/stylesheets/app/cms-page.less b/services/web/frontend/stylesheets/app/cms-page.less deleted file mode 100644 index e654ec9491..0000000000 --- a/services/web/frontend/stylesheets/app/cms-page.less +++ /dev/null @@ -1,657 +0,0 @@ -/* - 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 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

inline, so that quotation mark is inline - but sometimes we have multiple

, - 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; - } - } -} diff --git a/services/web/frontend/stylesheets/app/confirm-email.less b/services/web/frontend/stylesheets/app/confirm-email.less deleted file mode 100644 index 741cd2331e..0000000000 --- a/services/web/frontend/stylesheets/app/confirm-email.less +++ /dev/null @@ -1,27 +0,0 @@ -.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; - } -} diff --git a/services/web/frontend/stylesheets/app/contact-us.less b/services/web/frontend/stylesheets/app/contact-us.less deleted file mode 100644 index e72c620676..0000000000 --- a/services/web/frontend/stylesheets/app/contact-us.less +++ /dev/null @@ -1,68 +0,0 @@ -// 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, - .material-symbols { - display: table-cell; - text-align: right; - color: @gray-lighter; - } -} diff --git a/services/web/frontend/stylesheets/app/content_page.less b/services/web/frontend/stylesheets/app/content_page.less deleted file mode 100644 index ebe6f23748..0000000000 --- a/services/web/frontend/stylesheets/app/content_page.less +++ /dev/null @@ -1,150 +0,0 @@ -/* - 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 above: - .reset-btns; - .alert { - .alert; - } - .alert-info { - .btn-info { - .btn-alert-info; - } - } - - // correct color property set on 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; - } -} diff --git a/services/web/frontend/stylesheets/app/editor.less b/services/web/frontend/stylesheets/app/editor.less deleted file mode 100644 index 3139c98678..0000000000 --- a/services/web/frontend/stylesheets/app/editor.less +++ /dev/null @@ -1,751 +0,0 @@ -@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; -} - -#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; -} diff --git a/services/web/frontend/stylesheets/app/editor/chat.less b/services/web/frontend/stylesheets/app/editor/chat.less deleted file mode 100644 index 178317d99a..0000000000 --- a/services/web/frontend/stylesheets/app/editor/chat.less +++ /dev/null @@ -1,136 +0,0 @@ -@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; - } - } -} diff --git a/services/web/frontend/stylesheets/app/editor/compile-button.less b/services/web/frontend/stylesheets/app/editor/compile-button.less deleted file mode 100644 index f3a75392be..0000000000 --- a/services/web/frontend/stylesheets/app/editor/compile-button.less +++ /dev/null @@ -1,92 +0,0 @@ -@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; -} diff --git a/services/web/frontend/stylesheets/app/editor/dictionary.less b/services/web/frontend/stylesheets/app/editor/dictionary.less deleted file mode 100644 index 559fd02583..0000000000 --- a/services/web/frontend/stylesheets/app/editor/dictionary.less +++ /dev/null @@ -1,33 +0,0 @@ -#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; -} diff --git a/services/web/frontend/stylesheets/app/editor/error-boundary.less b/services/web/frontend/stylesheets/app/editor/error-boundary.less deleted file mode 100644 index 24de74b92b..0000000000 --- a/services/web/frontend/stylesheets/app/editor/error-boundary.less +++ /dev/null @@ -1,26 +0,0 @@ -.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; - } -} diff --git a/services/web/frontend/stylesheets/app/editor/figure-modal.less b/services/web/frontend/stylesheets/app/editor/figure-modal.less deleted file mode 100644 index 52157ec15e..0000000000 --- a/services/web/frontend/stylesheets/app/editor/figure-modal.less +++ /dev/null @@ -1,120 +0,0 @@ -.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; -} diff --git a/services/web/frontend/stylesheets/app/editor/file-tree.less b/services/web/frontend/stylesheets/app/editor/file-tree.less deleted file mode 100644 index c8f327afb7..0000000000 --- a/services/web/frontend/stylesheets/app/editor/file-tree.less +++ /dev/null @@ -1,556 +0,0 @@ -.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; - } -} diff --git a/services/web/frontend/stylesheets/app/editor/file-view.less b/services/web/frontend/stylesheets/app/editor/file-view.less deleted file mode 100644 index 552305870e..0000000000 --- a/services/web/frontend/stylesheets/app/editor/file-view.less +++ /dev/null @@ -1,82 +0,0 @@ -.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; - } -} diff --git a/services/web/frontend/stylesheets/app/editor/history-react.less b/services/web/frontend/stylesheets/app/editor/history-react.less deleted file mode 100644 index 9ceb5ae3fc..0000000000 --- a/services/web/frontend/stylesheets/app/editor/history-react.less +++ /dev/null @@ -1,584 +0,0 @@ -@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; - } - - .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; -} diff --git a/services/web/frontend/stylesheets/app/editor/history-v2.less b/services/web/frontend/stylesheets/app/editor/history-v2.less deleted file mode 100644 index d59310d9f7..0000000000 --- a/services/web/frontend/stylesheets/app/editor/history-v2.less +++ /dev/null @@ -1,404 +0,0 @@ -.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; -} diff --git a/services/web/frontend/stylesheets/app/editor/history.less b/services/web/frontend/stylesheets/app/editor/history.less deleted file mode 100644 index d3ee2a51d3..0000000000 --- a/services/web/frontend/stylesheets/app/editor/history.less +++ /dev/null @@ -1,344 +0,0 @@ -@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; - } - } - } - } - } -} diff --git a/services/web/frontend/stylesheets/app/editor/hotkeys.less b/services/web/frontend/stylesheets/app/editor/hotkeys.less deleted file mode 100644 index d2e2886678..0000000000 --- a/services/web/frontend/stylesheets/app/editor/hotkeys.less +++ /dev/null @@ -1,31 +0,0 @@ -.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; - } -} diff --git a/services/web/frontend/stylesheets/app/editor/ide-react.less b/services/web/frontend/stylesheets/app/editor/ide-react.less deleted file mode 100644 index 412796ba0b..0000000000 --- a/services/web/frontend/stylesheets/app/editor/ide-react.less +++ /dev/null @@ -1,180 +0,0 @@ -#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; - } -} diff --git a/services/web/frontend/stylesheets/app/editor/left-menu.less b/services/web/frontend/stylesheets/app/editor/left-menu.less deleted file mode 100644 index 6708783ac4..0000000000 --- a/services/web/frontend/stylesheets/app/editor/left-menu.less +++ /dev/null @@ -1,238 +0,0 @@ -#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; -} diff --git a/services/web/frontend/stylesheets/app/editor/logs.less b/services/web/frontend/stylesheets/app/editor/logs.less deleted file mode 100644 index 64bd4ff278..0000000000 --- a/services/web/frontend/stylesheets/app/editor/logs.less +++ /dev/null @@ -1,193 +0,0 @@ -.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; - } -} diff --git a/services/web/frontend/stylesheets/app/editor/math-preview.less b/services/web/frontend/stylesheets/app/editor/math-preview.less deleted file mode 100644 index b42eb74aab..0000000000 --- a/services/web/frontend/stylesheets/app/editor/math-preview.less +++ /dev/null @@ -1,77 +0,0 @@ -.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; -} diff --git a/services/web/frontend/stylesheets/app/editor/online-users.less b/services/web/frontend/stylesheets/app/editor/online-users.less deleted file mode 100644 index c699913693..0000000000 --- a/services/web/frontend/stylesheets/app/editor/online-users.less +++ /dev/null @@ -1,45 +0,0 @@ -.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); - } - } - } -} diff --git a/services/web/frontend/stylesheets/app/editor/outline.less b/services/web/frontend/stylesheets/app/editor/outline.less deleted file mode 100644 index 8a6fb63f9d..0000000000 --- a/services/web/frontend/stylesheets/app/editor/outline.less +++ /dev/null @@ -1,192 +0,0 @@ -.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; -} diff --git a/services/web/frontend/stylesheets/app/editor/pdf.less b/services/web/frontend/stylesheets/app/editor/pdf.less deleted file mode 100644 index 3531a8289e..0000000000 --- a/services/web/frontend/stylesheets/app/editor/pdf.less +++ /dev/null @@ -1,554 +0,0 @@ -.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 - ); -} diff --git a/services/web/frontend/stylesheets/app/editor/publish-modal.less b/services/web/frontend/stylesheets/app/editor/publish-modal.less deleted file mode 100644 index 40c3248720..0000000000 --- a/services/web/frontend/stylesheets/app/editor/publish-modal.less +++ /dev/null @@ -1,96 +0,0 @@ -.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; - } - } -} diff --git a/services/web/frontend/stylesheets/app/editor/publish-template.less b/services/web/frontend/stylesheets/app/editor/publish-template.less deleted file mode 100644 index e1b67d7bf9..0000000000 --- a/services/web/frontend/stylesheets/app/editor/publish-template.less +++ /dev/null @@ -1,3 +0,0 @@ -.publishedDetails { - color: @gray; -} diff --git a/services/web/frontend/stylesheets/app/editor/review-panel-new.less b/services/web/frontend/stylesheets/app/editor/review-panel-new.less deleted file mode 100644 index 8b5e49018c..0000000000 --- a/services/web/frontend/stylesheets/app/editor/review-panel-new.less +++ /dev/null @@ -1,775 +0,0 @@ -.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; - } -} diff --git a/services/web/frontend/stylesheets/app/editor/review-panel.less b/services/web/frontend/stylesheets/app/editor/review-panel.less deleted file mode 100644 index 1ae9e3e2c5..0000000000 --- a/services/web/frontend/stylesheets/app/editor/review-panel.less +++ /dev/null @@ -1,1105 +0,0 @@ -@rp-base-font-size: 12px; -@rp-small-font-size: 10px; -@rp-icon-large-size: 18px; - -@rp-bg-blue: #dadfed; -@rp-bg-dim-blue: #fafafa; -@rp-highlight-blue: #8a96b5; - -@rp-border-grey: #d9d9d9; - -@rp-green: #2c8e30; -@rp-red: #c5060b; -@rp-yellow: #f3b111; -@rp-grey: #aaaaaa; - -@rp-type-blue: #6b7797; -@rp-type-darkgrey: #3f3f3f; - -@rp-entry-ribbon-width: 4px; -@rp-entry-arrow-width: 6px; -@rp-semibold-weight: 600; -@review-panel-width: 230px; -@review-off-width: 22px; - -@rp-entry-animation-speed: 0.3s; - -.rp-button() { - display: block; // IE doesn't do flex with inline items. - background-color: @rp-highlight-blue; - color: #fff; - text-align: center; - line-height: 1.3; - user-select: none; - border: 0; - - &:hover, - &:focus { - outline: 0; - background-color: darken(@rp-highlight-blue, 5%); - text-decoration: none; - color: #fff; - } - - &[disabled] { - background-color: tint(@rp-highlight-blue, 50%); - - &:hover, - &:focus { - background-color: tint(@rp-highlight-blue, 50%); - } - } -} - -.rp-collapse-arrow() { - display: inline-flex; - transform: rotateZ(0deg); - transition: transform 0.15s ease; - &-on { - transform: rotateZ(-90deg); - } -} - -.review-panel-toolbar { - display: none; - - .rp-size-expanded & { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 5px; - } - - position: relative; - border-bottom: 1px solid @rp-border-grey; - background-color: @rp-bg-dim-blue; - text-align: center; - z-index: 3; - flex-basis: 32px; - flex-shrink: 0; -} - -.review-panel-toolbar-label { - cursor: pointer; - text-align: right; - flex-grow: 1; -} - -.review-panel-toolbar-icon-on { - margin-right: 5px; - color: @ol-green; -} - -.review-panel-toolbar-label-disabled { - cursor: auto; - margin-right: 5px; -} - -.rp-tc-state { - position: absolute; - top: 100%; - left: 0; - right: 0; - overflow: hidden; - list-style: none; - padding: 0 5px; - margin: 0; - border-bottom: 1px solid @rp-border-grey; - background-color: @rp-bg-dim-blue; - text-align: left; -} - -.rp-tc-state-collapse { - .rp-collapse-arrow; - margin-left: 5px; -} - -.rp-tc-state-item { - display: flex; - align-items: center; - padding: 3px 0; - - &:last-of-type { - padding-bottom: 5px; - } -} - -.rp-tc-state-separator { - border-bottom: 1px solid @rp-border-grey; -} - -.rp-tc-state-item-everyone { - border-bottom: 1px solid @rp-border-grey; -} - -.rp-tc-state-item-name { - flex-grow: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-weight: @rp-semibold-weight; -} - -.rp-tc-state-item-name-disabled { - opacity: 0.35; -} - -.rp-entry-list { - display: none; - width: 100%; - - .rp-size-expanded &, - .rp-size-mini & { - display: block; - } - - .rp-state-overview & { - flex-grow: 2; - overflow-y: auto; - } -} - -.rp-entry-indicator { - display: none; - z-index: 2; // above .review-panel-toggler - - .rp-size-mini & { - display: block; - } - - .rp-floating-entry & { - display: block; - position: static; - width: @review-off-width - 4px; - } - - .rp-size-mini &-add-comment { - display: none; - } - - position: absolute; - left: 2px; - right: 2px; - text-align: center; - background-color: @rp-highlight-blue; - border-radius: 3px; - color: #fff; - cursor: pointer; - transition: - top @rp-entry-animation-speed, - left 0.1s, - right 0.1s; - - .no-animate & { - transition: - left 0.1s, - right 0.1s; - } - - &-focused { - left: 0px; - right: 4px; - z-index: 1; - } -} - -.rp-entry-wrapper { - &:hover .rp-entry-insert, - &:hover .rp-entry-delete, - &:hover .rp-entry-aggregate, - &:hover .rp-entry-comment { - display: block; - } - - &.rp-entry-hidden { - display: none; - } -} - -.rp-entry { - .rp-state-current-file & { - position: absolute; - width: @review-panel-width; - } - - .rp-state-current-file-mini &, - .rp-floating-entry & { - left: @review-off-width + @rp-entry-arrow-width; - box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2); - z-index: 1; - - &::before { - content: ''; - position: absolute; - top: -(@review-off-width + @rp-entry-arrow-width); - right: -(@review-off-width + @rp-entry-arrow-width); - bottom: -(@review-off-width + @rp-entry-arrow-width); - left: -(2 * @rp-entry-arrow-width + 2); - z-index: -1; - } - - &::after { - .triangle( - left, - @rp-entry-arrow-width, - @rp-entry-arrow-width * 1.5, - inherit - ); - top: (@review-off-width / 2) - @rp-entry-arrow-width; - left: -(@rp-entry-ribbon-width + @rp-entry-arrow-width); - content: ''; - } - } - - .rp-state-current-file-mini & { - display: none; - } - - .rp-floating-entry & { - position: absolute; - width: @review-panel-width; - left: @review-off-width + @rp-entry-arrow-width; - top: 0; - } - - .rp-state-current-file-mini.rp-layout-left &, - .rp-floating-entry-layout-left & { - border-left-width: 0; - border-right-width: @rp-entry-ribbon-width; - border-right-style: solid; - - &::before { - left: -(@review-off-width + @rp-entry-arrow-width); - } - - &::after { - .triangle( - right, - @rp-entry-arrow-width, - @rp-entry-arrow-width * 1.5, - inherit - ); - right: -(@rp-entry-ribbon-width + @rp-entry-arrow-width); - left: auto; - } - } - - .rp-state-current-file-mini.rp-layout-left & { - left: auto; - right: @review-off-width + @rp-entry-arrow-width; - - &::before { - right: -(2 * @rp-entry-arrow-width + 2); - } - } - - .rp-floating-entry-layout-left & { - left: -(@review-panel-width + @rp-entry-arrow-width + 2); - - &::before { - right: -(2 * @rp-entry-arrow-width); - } - } - - .rp-state-current-file-expanded & { - visibility: hidden; - left: 5px; - right: 5px; - width: auto; - - &-focused { - left: -2px; - right: 12px; - z-index: 1; - } - - &-add-comment { - right: auto; - - &.rp-entry-adding-comment { - right: 5px; - } - } - - &-bulk-actions { - right: auto; - } - } - - .rp-state-overview & { - border-radius: 0; - border-bottom: solid 1px @rp-border-grey; - cursor: pointer; - } - - .resolved-comments-dropdown & { - position: static; - margin-bottom: 5px; - } - - border-left: solid @rp-entry-ribbon-width transparent; - border-radius: 3px; - background-color: #fff; - transition: - top @rp-entry-animation-speed, - left 0.1s, - right 0.1s; - - .no-animate & { - transition: - left 0.1s, - right 0.1s; - } - - &-insert, - &-aggregate { - border-color: @rp-green; - } - - &-delete { - border-color: @rp-red; - } - - &-comment { - border-color: @rp-yellow; - } - - &-comment-resolving { - top: 4px; - left: 6px; - opacity: 0; - z-index: 3; - transform: scale(0.1); - transform-origin: 0 0; - transition: - top 0.35s ease-out, - left 0.35s ease-out, - transform 0.35s ease-out, - opacity 0.35s ease-out 0.2s; - } - - &-comment-resolved { - border-color: @rp-grey; - background-color: #efefef; - } - - &-add-comment { - background-color: transparent; - right: auto; - border-left-width: 0; - - &.rp-entry-adding-comment { - background-color: #fff; - right: 5px; - border-left-width: 3px; - border-left-color: @rp-yellow; - } - } - - &-bulk-actions { - background-color: transparent; - right: auto; - border-left-width: 0; - } -} - -.rp-entry-body { - display: flex; - align-items: center; - padding: 4px 5px; -} - -.rp-entry-action-icon { - font-size: @rp-icon-large-size; - padding: 0 3px; - line-height: 0; - - .rp-state-overview & { - display: none; - } -} - -.rp-entry-details { - line-height: 1.4; - margin-left: 5px; - // We need to set any low-enough flex base size (0px), making it growable (1) and non-shrinkable (0). - // This is needed to ensure that IE makes the element fill the available space. - flex: 1 0 1px; - overflow-x: auto; - - .rp-state-overview & { - margin-left: 0; - } -} - -.rp-entry-metadata { - font-size: @rp-small-font-size; -} - -.rp-entry-metadata-element { - display: inline-block; -} - -.rp-entry-user { - font-weight: @rp-semibold-weight; - font-style: normal; -} - -.rp-comment-actions { - a { - color: @rp-type-blue; - } -} - -.rp-content-highlight { - color: @rp-type-darkgrey; - font-weight: @rp-semibold-weight; - text-decoration: none; - - del& { - text-decoration: line-through; - } -} - -.rp-entry-actions { - display: flex; - - .rp-state-overview .rp-entry-list & { - display: none; - } -} - -.rp-entry-button { - .rp-button(); - flex: 1 1 50%; - border-right: solid 1px #fff; - padding: 2px 0; - - &:last-child { - border-bottom-right-radius: 3px; - border-right-width: 0; - } - - .rp-state-current-file-mini.rp-layout-left &, - .rp-floating-entry-layout-left & { - &:first-child { - border-bottom-left-radius: 3px; - } - - &:last-child { - border-bottom-right-radius: 0; - } - } -} - -.rp-comment { - margin: 2px 5px; - padding-bottom: 3px; - line-height: 1.4; - border-bottom: solid 1px @rp-border-grey; - - &:last-child { - margin-bottom: 2px; - border-bottom-width: 0; - } - - .rp-state-overview .rp-entry-list & { - margin: 4px 5px; - - &:first-child { - margin-top: 0; - padding-top: 4px; - } - } -} - -.rp-comment-content { - margin: 0; - color: @rp-type-darkgrey; - overflow-x: auto; // Long words, like links can overflow without this. - white-space: pre-wrap; -} - -.rp-comment-resolver { - color: @rp-type-blue; -} - -.rp-comment-resolver-content { - font-style: italic; - margin: 0; -} - -.rp-comment-reply { - padding: 0 5px; -} - -.rp-add-comment-btn, -.rp-bulk-actions-btn { - .rp-button(); - display: inline-block; - padding: 5px 10px; - border-radius: 3px; - - .rp-in-editor-widgets & { - display: block; - white-space: nowrap; - border-radius: 0; - - &:last-child { - border-bottom-left-radius: 3px; - } - } -} - -.rp-bulk-actions-btn { - border-radius: 0; - - &:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - - &:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - margin-left: 1px; - } -} - -.rp-new-comment { - padding: 5px; -} - -.rp-comment-input { - width: 100%; - font-size: @rp-base-font-size; - padding: 2px 5px; - border-radius: 3px; - border: solid 1px @rp-border-grey; - resize: vertical; - color: @rp-type-darkgrey; - background-color: #fff; - margin-top: 3px; - overflow-x: hidden; - min-height: 3em; - max-height: 400px; -} - -.rp-icon-delete { - display: inline-block; - line-height: 1; - font-style: normal; - font-size: 0.8em; - text-decoration: line-through; - font-weight: @rp-semibold-weight; - - &::before { - content: 'Ab'; - } -} - -.rp-resolved-comment { - border-left: solid @rp-entry-ribbon-width @rp-yellow; - border-radius: 3px; - background-color: #fff; - margin-bottom: 5px; -} - -.rp-resolved-comment-context { - background-color: lighten(@rp-yellow, 35%); - padding: 4px 5px; -} - -.rp-resolved-comment-context-file { - font-weight: @rp-semibold-weight; -} - -.rp-resolved-comment-context-quote { - color: #000; - font-family: @font-family-monospace; - margin: 0; -} - -.rp-entry-callout { - transition: - top @rp-entry-animation-speed, - height @rp-entry-animation-speed; - - .rp-state-current-file & { - position: absolute; - border-top: 1px solid grey; - border-right: 1px dashed grey; - - &::after { - content: ''; - position: absolute; - top: -1px; - left: 3px; - bottom: 0; - border-bottom: 1px solid grey; - } - } - - .rp-state-current-file-expanded & { - width: 3px; - - &::after { - width: 3px; - } - } - - .rp-state-current-file-mini & { - width: 1px; - - &::after { - width: 1px; - } - } - - .rp-state-overview & { - display: none; - } - - .rp-state-current-file &-inverted { - border-top: none; - border-bottom: 1px solid grey; - - &::after { - top: 0px; - bottom: -1px; - border-top: 1px solid grey; - border-bottom: none; - } - } - - .rp-state-current-file &-insert { - border-color: @rp-green; - - &::after { - border-color: @rp-green; - } - } - - .rp-state-current-file &-delete { - border-color: @rp-red; - - &::after { - border-color: @rp-red; - } - } - - .rp-state-current-file &-comment { - border-color: @rp-yellow; - - &::after { - border-color: @rp-yellow; - } - } - - .rp-size-mini &-add-comment { - display: none; - } -} - -.rp-overview-file-header { - padding: 2px 5px; - border-top: solid 1px @rp-border-grey; - border-bottom: solid 1px @rp-border-grey; - background-color: @rp-bg-dim-blue; - margin-top: 10px; - font-weight: @rp-semibold-weight; - text-align: center; - cursor: pointer; -} - -.rp-overview-file-num-entries { - font-weight: normal; - font-size: 0.9em; -} - -.rp-overview-file-header-collapse { - .rp-collapse-arrow; - float: left; -} - -.rp-overview-file-entries { - overflow: hidden; -} - -.rp-comment-wrapper { - transition: 0.35s opacity ease-out 0.2s; - - &-resolving { - opacity: 0; - } -} - -.rp-nav { - display: none; - flex-shrink: 0; - - .rp-size-expanded & { - display: flex; - } - - .rp-state-current-file & { - position: absolute; - bottom: 0; - } - - width: 100%; - font-size: @rp-icon-large-size; - text-align: center; - background-color: @rp-bg-dim-blue; - border-top: solid 1px @rp-border-grey; - z-index: 2; -} - -.rp-nav-item { - display: block; - color: lighten(@rp-type-blue, 25%); - flex: 0 0 50%; - border-top: solid 3px transparent; - border-right: 0; - border-bottom: 0; - border-left: 0; - background: none; - padding-bottom: 2px; - - &:hover, - &:focus { - text-decoration: none; - color: @rp-type-blue; - } - - &-active { - color: @rp-type-blue; - border-top: solid 3px @rp-highlight-blue; - } -} - -.rp-nav-label { - display: block; - font-size: @rp-base-font-size; -} - -.review-icon { - display: inline-block; - background: url('../../../../public/img/ol-icons/review-icon-dark-theme.svg') - top/30px no-repeat; - width: 30px; - - &::before { - content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome. - } -} - -button when (@is-overleaf-light = true) { - .review-icon { - background: url('../../../../public/img/ol-icons/review-icon-light-theme.svg') - top/30px no-repeat; - } - - &.active, - &:active { - .review-icon { - background: url('../../../../public/img/ol-icons/review-icon-dark-theme.svg') - top/30px no-repeat; - } - } -} - -.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; - display: block; - height: 22px; - width: 22px; - line-height: 1.4; - - &:hover, - &:focus { - text-decoration: none; - color: @rp-type-blue; - } -} - -.resolved-comments-backdrop { - display: none; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - - &-visible { - display: block; - } -} - -.resolved-comments-dropdown { - display: none; - position: absolute; - width: 300px; - left: -150px; - max-height: ~'calc(100vh - 100px)'; - margin-top: @rp-entry-arrow-width * 1.5; - margin-left: 1em; - background-color: @rp-bg-blue; - text-align: left; - align-items: stretch; - justify-content: center; - border-radius: 3px; - box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.3); - z-index: 1; - - &::before { - content: ''; - .triangle( - top, - @rp-entry-arrow-width * 3, - @rp-entry-arrow-width * 1.5, - @rp-bg-blue - ); - top: -@rp-entry-ribbon-width * 2; - left: 50%; - margin-left: -@rp-entry-arrow-width * 0.75; - } - - &-open { - display: flex; - } -} - -.resolved-comments-scroller { - flex: 0 0 auto; // Can't use 100% in the flex-basis key here, IE won't account for padding. - width: 100%; // We need to set the width explicitly, as flex-basis won't work. - max-height: ~'calc(100vh - 100px)'; // We also need to explicitly set the max-height, IE won't compute the flex-determined height. - padding: 5px; - overflow-y: auto; -} - -.rp-collapse-toggle { - .btn-inline-link; - color: @rp-type-blue; - font-weight: @rp-semibold-weight; - - &:hover, - &:focus { - color: darken(@rp-type-blue, 5%); - text-decoration: none; - } -} - -.rp-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; - - &.rp-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; - } -} - -.review-panel-toggler { - display: none; - position: absolute; - top: 0; - bottom: 0; - width: 10px; - opacity: 0.5; - color: @rp-highlight-blue; - z-index: 1; - background-color: transparent; - transition: background 0.1s; - flex-direction: column; - padding: 0; - border: 0; - - .rp-size-mini &, - .rp-size-expanded & { - display: flex; - } - - .rp-size-expanded & { - .review-panel-toggler-icon .fa { - transform: scale(0.7) rotate(180deg); - } - } - - &:hover, - &:focus { - color: @rp-highlight-blue; - background-color: #fff; - } - - .review-panel-toggler-icon { - position: sticky; - top: 50%; - bottom: 50%; - width: 100%; - - .fa { - font-size: 14px; - transform: scale(0.7); - } - } -} - -.review-panel { - position: relative; - z-index: 6; - flex-shrink: 0; - - background-color: @rp-bg-blue; - border-left: solid 0 @rp-border-grey; - font-family: @font-family-base; - line-height: @line-height-base; - font-size: @rp-base-font-size; - color: @rp-type-blue; - box-sizing: content-box; - - .rp-size-expanded & { - display: flex; - flex-direction: column; - width: @review-panel-width; - overflow: visible; - border-left-width: 1px; - } - - .rp-size-mini & { - width: @review-off-width; - z-index: 6; - border-left-width: 1px; - } - - .review-panel-toolbar-collapse-button { - border: none; - background: none; - padding: 0; - } - - &.rp-current-file-container { - display: none; - - .rp-size-mini &, - .rp-size-expanded & { - display: block; - } - - .review-panel-toolbar { - position: sticky; - top: 0; - } - - .rp-nav { - position: sticky; - bottom: 0; - } - } - - .rp-entry-list-react { - position: relative; - overflow: hidden; - - .rp-size-mini & { - overflow: visible; - } - } - - .rp-state-current-file & { - .review-panel-tools { - display: flex; - flex-direction: column; - justify-content: space-between; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - } - } - - .rp-state-overview & { - position: sticky; - top: 0; - display: flex; - flex-direction: column; - height: 100%; - } -} - -.rp-floating-entry { - position: absolute; - font-size: @rp-base-font-size; - color: @rp-type-blue; -} - -.rp-floating-entry, -.review-panel { - .rp-entry-metadata { - button { - padding: 0; - border: 0; - background-color: transparent; - color: @ol-blue; - - &:hover, - &:focus { - text-decoration: underline; - } - } - } -} - -.rp-in-editor-widgets { - position: sticky; - top: 0; - right: 0; - font-size: 11px; - z-index: 2; - font-family: @font-family-sans-serif; - - .rp-in-editor-widgets-inner { - position: absolute; - top: 0; - right: 0; - display: flex; - flex-direction: column; - } - - .rp-track-changes-indicator { - border: 0; - } -} - -.track-changes-indicator-circle { - display: inline-block; - width: 10px; - height: 10px; - border-radius: 100%; - background-color: @ol-green; -} diff --git a/services/web/frontend/stylesheets/app/editor/search.less b/services/web/frontend/stylesheets/app/editor/search.less deleted file mode 100644 index 9683326980..0000000000 --- a/services/web/frontend/stylesheets/app/editor/search.less +++ /dev/null @@ -1,70 +0,0 @@ -.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; -} diff --git a/services/web/frontend/stylesheets/app/editor/share.less b/services/web/frontend/stylesheets/app/editor/share.less deleted file mode 100644 index 0252352b50..0000000000 --- a/services/web/frontend/stylesheets/app/editor/share.less +++ /dev/null @@ -1,212 +0,0 @@ -.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; - } -} diff --git a/services/web/frontend/stylesheets/app/editor/table-generator-column-width-modal.less b/services/web/frontend/stylesheets/app/editor/table-generator-column-width-modal.less deleted file mode 100644 index 745920ec54..0000000000 --- a/services/web/frontend/stylesheets/app/editor/table-generator-column-width-modal.less +++ /dev/null @@ -1,13 +0,0 @@ -.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; - } -} diff --git a/services/web/frontend/stylesheets/app/editor/toast.less b/services/web/frontend/stylesheets/app/editor/toast.less deleted file mode 100644 index ef876b7c82..0000000000 --- a/services/web/frontend/stylesheets/app/editor/toast.less +++ /dev/null @@ -1,22 +0,0 @@ -.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; - } -} diff --git a/services/web/frontend/stylesheets/app/editor/toolbar.less b/services/web/frontend/stylesheets/app/editor/toolbar.less deleted file mode 100644 index dd38ef99a0..0000000000 --- a/services/web/frontend/stylesheets/app/editor/toolbar.less +++ /dev/null @@ -1,460 +0,0 @@ -@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; - } -} diff --git a/services/web/frontend/stylesheets/app/error-pages.less b/services/web/frontend/stylesheets/app/error-pages.less deleted file mode 100644 index 3868a3a62a..0000000000 --- a/services/web/frontend/stylesheets/app/error-pages.less +++ /dev/null @@ -1,53 +0,0 @@ -.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; - } -} diff --git a/services/web/frontend/stylesheets/app/features.less b/services/web/frontend/stylesheets/app/features.less deleted file mode 100644 index d0e58c836a..0000000000 --- a/services/web/frontend/stylesheets/app/features.less +++ /dev/null @@ -1,19 +0,0 @@ -.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%); - } -} diff --git a/services/web/frontend/stylesheets/app/front-chat-widget.less b/services/web/frontend/stylesheets/app/front-chat-widget.less deleted file mode 100644 index cb7bee4280..0000000000 --- a/services/web/frontend/stylesheets/app/front-chat-widget.less +++ /dev/null @@ -1,3 +0,0 @@ -#front-chat-holder > div[role='button'] { - margin-bottom: @footer-height; -} diff --git a/services/web/frontend/stylesheets/app/grammarly.less b/services/web/frontend/stylesheets/app/grammarly.less deleted file mode 100644 index 19c85137ae..0000000000 --- a/services/web/frontend/stylesheets/app/grammarly.less +++ /dev/null @@ -1,3 +0,0 @@ -grammarly-extension { - mix-blend-mode: normal !important; -} diff --git a/services/web/frontend/stylesheets/app/group-subscription-modal.less b/services/web/frontend/stylesheets/app/group-subscription-modal.less deleted file mode 100644 index 20ddc90617..0000000000 --- a/services/web/frontend/stylesheets/app/group-subscription-modal.less +++ /dev/null @@ -1,45 +0,0 @@ -#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; - } - } -} diff --git a/services/web/frontend/stylesheets/app/import.less b/services/web/frontend/stylesheets/app/import.less deleted file mode 100644 index 0ca8bb8691..0000000000 --- a/services/web/frontend/stylesheets/app/import.less +++ /dev/null @@ -1,5 +0,0 @@ -.v2-import__img { - .img-responsive; - .center-block; - width: 80%; -} diff --git a/services/web/frontend/stylesheets/app/invite.less b/services/web/frontend/stylesheets/app/invite.less deleted file mode 100644 index b0b7752853..0000000000 --- a/services/web/frontend/stylesheets/app/invite.less +++ /dev/null @@ -1,43 +0,0 @@ -.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); - } -} diff --git a/services/web/frontend/stylesheets/app/list/v1-import-modal.less b/services/web/frontend/stylesheets/app/list/v1-import-modal.less deleted file mode 100644 index 5f01bd48d0..0000000000 --- a/services/web/frontend/stylesheets/app/list/v1-import-modal.less +++ /dev/null @@ -1,51 +0,0 @@ -.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; -} diff --git a/services/web/frontend/stylesheets/app/login-register.less b/services/web/frontend/stylesheets/app/login-register.less deleted file mode 100644 index 97790b9a5d..0000000000 --- a/services/web/frontend/stylesheets/app/login-register.less +++ /dev/null @@ -1,307 +0,0 @@ -@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); - } - } -} diff --git a/services/web/frontend/stylesheets/app/ol-chat.less b/services/web/frontend/stylesheets/app/ol-chat.less deleted file mode 100644 index 04e5ad8526..0000000000 --- a/services/web/frontend/stylesheets/app/ol-chat.less +++ /dev/null @@ -1,6 +0,0 @@ -// Styles for Chat panel in Overleaf v2 - -.chat .message-wrapper .message .message-content a { - color: inherit; - text-decoration: underline; -} diff --git a/services/web/frontend/stylesheets/app/ol-style-guide.less b/services/web/frontend/stylesheets/app/ol-style-guide.less deleted file mode 100644 index 64f99cf22e..0000000000 --- a/services/web/frontend/stylesheets/app/ol-style-guide.less +++ /dev/null @@ -1,66 +0,0 @@ -.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; -} diff --git a/services/web/frontend/stylesheets/app/open-in-overleaf.less b/services/web/frontend/stylesheets/app/open-in-overleaf.less deleted file mode 100644 index 0249223458..0000000000 --- a/services/web/frontend/stylesheets/app/open-in-overleaf.less +++ /dev/null @@ -1,5 +0,0 @@ -dl.codebox { - dt { - line-height: 1; - } -} diff --git a/services/web/frontend/stylesheets/app/portals.less b/services/web/frontend/stylesheets/app/portals.less deleted file mode 100644 index b69176b05f..0000000000 --- a/services/web/frontend/stylesheets/app/portals.less +++ /dev/null @@ -1,178 +0,0 @@ -.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; - } - } - } - .hub-circle { - display: inline-block; - background-color: @green-70; - border-radius: 50%; - width: 160px; - height: 160px; - text-align: center; - padding-top: 50px; - color: white; - } - .hub-circle-number { - display: block; - font-size: 36px; - font-weight: 900; - line-height: 1; - } - .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: @green-70; - text-anchor: middle; - } - - .nv-legend-text { - font-family: @font-family-sans-serif; - font-size: 14px; - } - } -} diff --git a/services/web/frontend/stylesheets/app/project-list-react.less b/services/web/frontend/stylesheets/app/project-list-react.less deleted file mode 100644 index 1716aa433c..0000000000 --- a/services/web/frontend/stylesheets/app/project-list-react.less +++ /dev/null @@ -1,1035 +0,0 @@ -@project-list-sidebar-wrapper-flex: 0 0 15%; - -.project-list-react { - body > .content& { - padding-top: @header-height; - padding-bottom: 0; - min-height: calc(~'100vh -' @header-height); - display: flex; - flex-direction: column; - } - - .container:before { - content: ''; - display: block; - float: left; - height: 100%; - } - - .fill { - position: relative; - - &:after { - content: ''; - display: block; - clear: left; - } - } - - .project-list-wrapper { - display: flex; - align-items: stretch; - width: 100%; - min-height: calc(~'100vh -' @header-height); - } - - .project-list-sidebar-wrapper-react { - position: relative; - background-color: @sidebar-bg; - flex: @project-list-sidebar-wrapper-flex; - min-height: calc(~'100vh -' @header-height); - max-width: 320px; - min-width: 200px; - - .project-list-sidebar-subwrapper { - display: flex; - flex-direction: column; - height: 100%; - - .project-list-sidebar-react { - flex-grow: 1; - padding-left: 15px; - padding-right: 15px; - -ms-overflow-style: -ms-autohiding-scrollbar; - padding-top: @content-margin-vertical; - padding-bottom: @content-margin-vertical; - color: @sidebar-color; - - .small { - color: @sidebar-color; - } - - button { - white-space: normal; - word-wrap: anywhere; - // prevents buttons from expanding sidebar width - } - - > .dropdown { - width: 100%; - - .new-project-button { - width: 100%; - } - } - } - } - } - - .project-list-welcome-wrapper { - width: 100%; - padding-bottom: 25px; - - .welcome-new-wrapper { - .welcome-title { - font-size: 32px; - } - - .welcome-message-cards-wrapper { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - margin-top: 50px; - - @media (min-width: @screen-md-min) { - flex-direction: row; - justify-content: center; - } - } - - .welcome-message-card-item { - display: flex; - flex: 1; - flex-direction: column; - - @media (min-width: @screen-md-min) { - flex: 0 1 310px; - } - } - - .welcome-message-card { - border: 1px solid @neutral-20; - border-radius: 16px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - padding: 24px 16px; - margin: @margin-sm 0; - width: 280px; - height: 200px; - position: relative; - cursor: pointer; - - @media (min-width: @screen-md-min) { - margin: 0 15px; - height: 240px; - width: auto; - } - - &:hover { - background-color: @ol-blue-gray-0; - } - - .welcome-message-card-img { - max-width: 100%; - - @media (min-width: @screen-md-min) { - margin-bottom: 20px; - } - } - - .create-new-project-dropdown { - border: 1px solid @neutral-20; - position: absolute; - top: 100%; - left: 5%; - width: 90%; - margin-top: 8px; - padding: 0; - border-radius: 3px; - z-index: 1; - text-align: left; - - button, - a, - .dropdown-header { - padding: 5px 10px; - } - - > button { - background-color: white; - border: none; - box-shadow: none; - display: flex; - align-items: center; - width: 100%; - - &:hover { - background-color: @ol-blue-gray-0; - } - } - - > a { - color: @gray-dark; - display: block; - - &:hover { - text-decoration: none; - background-color: @ol-blue-gray-0; - } - } - - hr { - margin-top: 6px; - margin-bottom: 6px; - } - } - } - - .welcome-message-card-link { - &, - &:hover { - text-decoration: none; - color: @gray-dark; - } - } - } - } - - .project-list-main-react { - flex: 1; - overflow-x: hidden; - padding: @content-margin-vertical @grid-gutter-width / 2; - } - - .project-list-header-row { - display: flex; - align-items: center; - margin-bottom: @margin-sm; - min-height: 36px; - } - - .project-list-title { - min-width: 0; - color: @content-secondary; - font-family: Lato, sans-serif; - font-size: @font-size-large; - line-height: 28px; - font-weight: bold; - } - - ul.project-list-filters { - margin: @margin-sm @folders-menu-margin; - - .dropdown-header { - 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: 12.5px 16px; - font-weight: @folders-title-font-weight; - font-family: @font-family-sans-serif; - text-transform: uppercase; - } - - .subdued { - color: @gray-light; - } - - > li { - cursor: pointer; - position: relative; - - > button { - display: block; - width: 100%; - font-weight: normal; - text-align: left; - color: @sidebar-link-color; - background-color: transparent; - border-radius: unset; - border: none; - border-bottom: solid 1px transparent; - padding: @folders-menu-item-v-padding @folders-menu-item-h-padding; - - &:hover { - background-color: @sidebar-hover-bg; - text-decoration: @sidebar-hover-text-decoration; - } - - &:focus { - text-decoration: none; - outline: none; - } - } - - &.separator { - padding: @folders-menu-item-v-padding @folders-menu-item-h-padding; - cursor: auto; - } - } - - > li.active { - border-radius: @sidebar-active-border-radius; - - > button { - background-color: @sidebar-active-bg; - font-weight: @sidebar-active-font-weight; - color: @sidebar-active-color; - - .subdued { - color: @sidebar-active-color; - } - } - } - - > li.tag { - &.active { - .tag-menu > button { - color: white; - border-color: white; - - &:hover { - background-color: @folders-tag-menu-active-hover; - } - } - } - - &.untagged { - button.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; - } - } - - button.tag-name { - position: relative; - padding: @folders-tag-padding; - display: @folders-tag-display; - align-items: center; - word-wrap: anywhere; - - .tag-list-icon { - vertical-align: sub; - font-weight: bold; - } - - span.name { - padding-left: 0.5em; - line-height: @folders-tag-line-height; - } - } - } - - .tag-menu { - button.dropdown-toggle { - border: 1px solid @folders-tag-border-color; - border-radius: @border-radius-small; - background-color: transparent; - color: @folders-tag-menu-color; - display: block; - width: 16px; - height: 16px; - position: relative; - - .caret { - position: absolute; - top: 6px; - left: 1px; - } - } - - display: none; - width: auto; - position: absolute; - top: 50%; - margin-top: -8px; // Half the element height. - right: 4px; - - &.open { - display: block; - } - - button.tag-action { - border-radius: unset; - width: 100%; - background-color: transparent; - border-color: transparent; - color: @gray-dark; - text-align: left; - font-weight: normal; - - &:hover { - color: @white; - background-color: @ol-green; - } - - &:active { - outline: none; - } - } - } - } - - .project-tools { - flex-shrink: 0; - margin-left: auto; - } - - .project-dash-table { - width: 100%; - table-layout: fixed; - - tr { - border-bottom: 1px solid @structured-list-border-color; - } - - th, - td { - padding: (@line-height-computed / 4) @line-height-computed / 2; - vertical-align: top; - } - - tr { - th:first-child, - td:first-child, - th:last-child, - td:last-child { - padding-right: @line-height-computed - (@grid-gutter-width / 2); - } - } - - tbody { - tr:not(.no-projects):hover { - background-color: @structured-list-hover-color; - } - - tr:last-child { - border-bottom: 0 none; - } - } - - .table-header-sort-btn { - border: 0; - text-align: left; - color: @ol-type-color; - background-color: transparent; - padding: 0; - font-weight: bold; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - text-decoration: none; - - &:hover, - &:focus { - color: @ol-type-color; - text-decoration: none; - } - } - - .dash-cell-checkbox { - width: 5%; - line-height: 1.55; - - input[type='checkbox'] { - margin-top: 5px; - } - - .dash-cell-checkbox-wrapper { - label { - display: block; - margin: 0; - line-height: 1; - } - } - } - - .dash-cell-name { - hyphens: auto; - width: 50%; - word-break: break-word; - } - - .dash-cell-owner { - width: 20%; - } - - .dash-cell-date { - width: 25%; - } - - .dash-cell-actions { - display: none; - text-align: right; - } - - .dash-cell-date-owner { - font-size: 14px; - .text-overflow(); - } - - .dash-cell-tag, - .clone-project-tag { - .tag-label { - padding: 14px 0; - cursor: pointer; - - &:not(.tag-label-close-hover) { - &:hover, - &:focus { - .label.tag-label-name { - color: @tag-color; - background-color: @tag-bg-hover-color; - outline-width: 0; - } - } - } - - &:first-child { - margin-left: initial; - } - } - } - - @media (min-width: @screen-xs) { - .dash-cell-checkbox { - width: 4%; - } - - .dash-cell-name { - width: 50%; - } - - .dash-cell-owner { - width: 21%; - } - - .dash-cell-date { - width: 25%; - } - - .dash-cell-actions { - width: 0%; - } - } - - @media (min-width: @screen-sm) { - .dash-cell-checkbox { - width: 3%; - } - - .dash-cell-name { - width: 45%; - } - - .dash-cell-owner { - width: 16%; - } - - .dash-cell-date { - width: 21%; - } - - .dash-cell-actions { - display: table-cell; - width: 15%; - } - - .project-tools { - float: none; - } - } - - @media (min-width: @screen-md) { - .dash-cell-checkbox { - width: 3%; - } - - .dash-cell-name { - width: 46%; - } - - .dash-cell-owner { - width: 13%; - } - - .dash-cell-date { - width: 16%; - } - - .dash-cell-actions { - width: 22%; - } - - tbody { - .dash-cell-actions { - white-space: nowrap; - } - } - } - - @media (min-width: @screen-lg) { - .dash-cell-checkbox { - width: 3%; - } - - .dash-cell-name { - width: 46%; - } - - .dash-cell-owner { - width: 15%; - } - - .dash-cell-date { - width: 19%; - } - - .dash-cell-actions { - width: 17%; - } - } - - @media (min-width: 1440px) { - .dash-cell-checkbox { - width: 2%; - } - - .dash-cell-name { - width: 49%; - } - - .dash-cell-owner { - width: 16%; - } - - .dash-cell-date { - width: 19%; - } - - .dash-cell-actions { - width: 14%; - } - } - - @media (max-width: @screen-xs-max) { - @actions-btn-size: 48px; - - tr { - position: relative; - display: flex; - flex-direction: column; - - td { - padding-top: @line-height-computed / 6; - padding-bottom: @line-height-computed / 6; - } - - td:not(.dash-cell-actions) { - padding-right: @actions-btn-size + 12.5px; - } - } - - .dash-cell-name, - .dash-cell-owner, - .dash-cell-date, - .dash-cell-tag, - .dash-cell-actions { - display: block; - width: auto; - } - - .dash-cell-actions { - position: absolute; - top: 0; - right: 0; - padding: 0 !important; - - .dropdown-toggle { - padding: 13px 15px; - border-radius: 0; - font-size: 14px; - } - } - } - } - - .loading-container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - min-height: calc(~'100vh -' @header-height); - - .loading-screen-brand-container { - margin: 0 auto; - } - } - - @media (max-width: @screen-xs-max) { - .project-tools { - float: left; - margin-left: initial; - } - } - - .projects-toolbar, - .tag-item { - display: flex; - align-items: center; - } - - .projects-toolbar { - .dropdown, - .dropdown-toggle { - max-width: 100%; - } - - .dropdown { - min-width: 0; - } - - .dropdown-toggle { - display: inline-flex; - align-items: baseline; - } - } - - .projects-sort-dropdown { - flex-shrink: 0; - margin-left: auto; - } - - #projects-types-dropdown { - font-family: @font-family-serif; - - & + .projects-dropdown-menu { - min-width: 226px; - max-width: 92vw; - } - } - - #projects-sort-dropdown { - & + .projects-dropdown-menu { - min-width: 156px; - } - } - - .projects-dropdown-menu { - &.dropdown-menu { - // Avoid line breaks for labels in menu items. - // There is enough space for these on mobile devices (checked DE and EN translations). - white-space: nowrap; - } - } - - .projects-types-menu-item { - .menu-item-button-icon { - left: 10px; - } - - &.projects-types-menu-tag-item { - display: flex; - - .edit-btn { - padding: 12px 14px; - } - } - } - - .projects-sort-menu-item { - .menu-item-button-icon { - left: 14px; - } - } - - .projects-action-menu-item { - .menu-item-button-icon { - left: 11px; - } - } -} - -.current-plan { - vertical-align: middle; - line-height: @line-height-base; - - a.current-plan-label { - text-decoration: none; - color: @text-color; - } -} - -.project-list-upload-project-modal-uppy-dashboard .uppy-Root { - .uppy-Dashboard-AddFiles-title { - display: flex; - flex-direction: column; - color: @ol-blue-gray-3; - white-space: pre-line; - - button.uppy-Dashboard-browse { - background-color: @ol-green; - color: @white; - margin-bottom: @margin-md; - padding: 4px 16px 5px; - height: 46px; - border-radius: 23px; - font-weight: 700; - display: flex; - justify-content: center; - align-items: center; - font-size: @font-size-large; - font-family: @font-family-sans-serif; - } - } -} - -.btn-transparent { - box-shadow: none !important; - background: none !important; - border-radius: 0 !important; - color: inherit !important; - font-weight: 400; - - &:hover { - box-shadow: none !important; - background: none !important; - color: inherit !important; - } -} - -.menu-item-button, -#new-project-button-projects-table + .dropdown-menu [role='menuitem'] { - padding: 12px 20px; -} - -.menu-item-button { - position: relative; - width: 100%; - overflow: hidden; - border: none; - box-shadow: none; - background: inherit; - color: @ol-blue-gray-5; - text-align: left; - - .menu-item-button-text { - padding-left: 14px; - overflow: hidden; - - .tag-name-and-size { - overflow: hidden; - display: flex; - gap: 1ex; - } - - .tag-name { - overflow: hidden; - text-overflow: ellipsis; - } - } - - .menu-item-button-icon { - position: absolute; - top: 50%; - transform: translateY(-50%); - - &.fa-spinner { - top: 30%; - } - } -} - -.project-list-load-more-button { - margin-bottom: @margin-sm; -} - -.tag-dropdown-button { - display: block; - width: 100%; - font-weight: normal; - font-size: @font-size-base; - text-align: left; - color: @gray-dark; - background-color: transparent; - border-radius: unset; - border: none; - border-bottom: solid 1px transparent; - padding: 3px 20px; - - &:active, - &:focus { - color: @gray-dark; - background-color: transparent; - text-decoration: none; - outline: none; - } - - &:hover { - color: @white; - background-color: @ol-green; - } - - .tag-checkbox { - width: 16px; - } - - .tag-dot { - display: inline-block; - position: relative; - border: 1px solid #ffffff; - width: 14px; - height: 14px; - border-radius: 7px; - text-align: center; - top: 1px; - } -} - -.project-list-sidebar-survey-wrapper { - position: sticky; - bottom: 0; - - .alert-info-alt { - font-size: @font-size-small; - margin-bottom: 0; - - a { - text-decoration: none; - } - } - - @media (max-width: @screen-xs-max) { - position: static; - margin-top: @margin-sm; - - .alert-info-alt { - font-size: unset; - - &:before { - display: none; - } - - .project-list-sidebar-survey-link { - display: block; - align-items: center; - min-width: @mobile-action-element-width; - min-height: @mobile-action-element-height; - padding-top: @padding-md; - } - } - } -} - -.color-picker-item { - height: 28px; - width: 28px; - cursor: pointer; - position: relative; - outline: none; - border-radius: 4px; - margin: 0 14px 0 0; - display: inline-block; - vertical-align: middle; - - &:focus-visible { - box-shadow: - 0 0 0 2px @white, - 0 0 0 3px @blue-50, - 0 0 0 5px @blue-30; - } - - &.more-button { - border: 1px solid @gray-dark; - - .color-picker-more { - color: @gray-dark; - margin: 3px; - font-weight: bold; - - @media (max-width: @screen-xs-max) { - margin: 5px; - } - } - - .color-picker-more-open { - color: @gray-dark; - margin: 3px; - font-weight: bold; - - @media (max-width: @screen-xs-max) { - margin: 5px; - } - } - } - - .color-picker-item-icon { - margin: 4px; - color: @white; - font-weight: bold; - } - - @media (max-width: @screen-xs-max) { - height: 32px; - width: 32px; - margin: 24px 24px; - - .color-picker-item-icon { - margin: 6px; - color: @white; - } - } -} - -.color-picker-more-wrapper { - position: relative; - display: inline-block; - - .custom-picker { - position: absolute; - user-select: none; - - @media (max-width: @screen-xs-max) { - top: 56px; - left: 24px; - } - } - - .popover-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - } -} - -.clone-project-tag { - display: flex; - - &:hover .label.tag-label-name { - background-color: @tag-bg-color; - } -} diff --git a/services/web/frontend/stylesheets/app/project-list.less b/services/web/frontend/stylesheets/app/project-list.less deleted file mode 100644 index ec7370e5c8..0000000000 --- a/services/web/frontend/stylesheets/app/project-list.less +++ /dev/null @@ -1,548 +0,0 @@ -@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; - } -} diff --git a/services/web/frontend/stylesheets/app/recurly.less b/services/web/frontend/stylesheets/app/recurly.less deleted file mode 100644 index 55487dc5d0..0000000000 --- a/services/web/frontend/stylesheets/app/recurly.less +++ /dev/null @@ -1,24 +0,0 @@ -.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); -} diff --git a/services/web/frontend/stylesheets/app/sprites.less b/services/web/frontend/stylesheets/app/sprites.less deleted file mode 100644 index 038f42b549..0000000000 --- a/services/web/frontend/stylesheets/app/sprites.less +++ /dev/null @@ -1,104 +0,0 @@ -.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; -} diff --git a/services/web/frontend/stylesheets/app/subscription.less b/services/web/frontend/stylesheets/app/subscription.less deleted file mode 100644 index 7ec9f8db8e..0000000000 --- a/services/web/frontend/stylesheets/app/subscription.less +++ /dev/null @@ -1,195 +0,0 @@ -.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; - } -} diff --git a/services/web/frontend/stylesheets/app/templates-v2.less b/services/web/frontend/stylesheets/app/templates-v2.less deleted file mode 100644 index 67edecb323..0000000000 --- a/services/web/frontend/stylesheets/app/templates-v2.less +++ /dev/null @@ -1,189 +0,0 @@ -// 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; -} diff --git a/services/web/frontend/stylesheets/app/templates.less b/services/web/frontend/stylesheets/app/templates.less deleted file mode 100644 index 6c1036cfe7..0000000000 --- a/services/web/frontend/stylesheets/app/templates.less +++ /dev/null @@ -1,69 +0,0 @@ -.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%; - } -} diff --git a/services/web/frontend/stylesheets/app/translations.less b/services/web/frontend/stylesheets/app/translations.less deleted file mode 100644 index 01cb6abf01..0000000000 --- a/services/web/frontend/stylesheets/app/translations.less +++ /dev/null @@ -1,21 +0,0 @@ -.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; - } - } -} diff --git a/services/web/frontend/stylesheets/app/wiki.less b/services/web/frontend/stylesheets/app/wiki.less deleted file mode 100644 index 039bb1728e..0000000000 --- a/services/web/frontend/stylesheets/app/wiki.less +++ /dev/null @@ -1,274 +0,0 @@ -.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; - } - } - - /**/ - - 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; - } -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/base.scss b/services/web/frontend/stylesheets/base/base.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/base/base.scss rename to services/web/frontend/stylesheets/base/base.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss b/services/web/frontend/stylesheets/base/bootstrap.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss rename to services/web/frontend/stylesheets/base/bootstrap.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/colors.scss b/services/web/frontend/stylesheets/base/colors.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/base/colors.scss rename to services/web/frontend/stylesheets/base/colors.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/layout.scss b/services/web/frontend/stylesheets/base/layout.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/base/layout.scss rename to services/web/frontend/stylesheets/base/layout.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/links.scss b/services/web/frontend/stylesheets/base/links.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/base/links.scss rename to services/web/frontend/stylesheets/base/links.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss b/services/web/frontend/stylesheets/base/typography.scss similarity index 94% rename from services/web/frontend/stylesheets/bootstrap-5/base/typography.scss rename to services/web/frontend/stylesheets/base/typography.scss index 5515821cb9..49c220de03 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss +++ b/services/web/frontend/stylesheets/base/typography.scss @@ -74,7 +74,7 @@ samp { } .list-style-check-green { - list-style-image: url('../../../../public/img/fa-check-green.svg'); + list-style-image: url('../../../public/img/fa-check-green.svg'); } .text-muted { diff --git a/services/web/frontend/stylesheets/components/accordion.less b/services/web/frontend/stylesheets/components/accordion.less deleted file mode 100644 index df22305493..0000000000 --- a/services/web/frontend/stylesheets/components/accordion.less +++ /dev/null @@ -1,50 +0,0 @@ -.ol-accordions-container :last-child { - border: 0px !important; -} - -.ol-accordions-container { - .custom-accordion-item { - width: 100%; - padding-top: var(--spacing-08); - padding-bottom: var(--spacing-09); - border-bottom: 1px solid var(--neutral-20); - - .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(--neutral-90); - 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 { - background-color: unset; - text-align: left; - padding: unset; - padding-right: 2rem; - margin-top: var(--spacing-04); - font-size: var(--font-size-body-base); - line-height: var(--line-height-03); - } - } -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/accordion.scss b/services/web/frontend/stylesheets/components/accordion.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/accordion.scss rename to services/web/frontend/stylesheets/components/accordion.scss diff --git a/services/web/frontend/stylesheets/components/alerts.less b/services/web/frontend/stylesheets/components/alerts.less deleted file mode 100755 index e84a12d6e4..0000000000 --- a/services/web/frontend/stylesheets/components/alerts.less +++ /dev/null @@ -1,118 +0,0 @@ -// -// Alerts -// -------------------------------------------------- - -// Base styles -// ------------------------- - -.alert { - padding: @alert-padding; - margin-bottom: @line-height-computed; - border-left: 3px solid transparent; - border-radius: @alert-border-radius; - - // Headings for larger alerts - h4 { - margin-top: 0; - // Specified for the h4 to prevent conflicts of changing @headings-color - color: inherit; - } - // Provide class for links that match alerts - .alert-link { - font-weight: @alert-link-font-weight; - } - - // Improve alignment and spacing of inner content - > p, - > ul { - margin-bottom: 0; - } - > p + p { - margin-top: 5px; - } - p:last-child { - margin-bottom: 0; - } -} - -// Dismissable alerts -// -// Expand the right padding and account for the close button's positioning. - -.alert-dismissable { - padding-right: (@alert-padding + 20); - - // Adjust close link position - .close { - position: relative; - top: -2px; - right: -21px; - color: inherit; - } -} - -// Alternate styles -// -// Generate contextual modifier classes for colorizing the alert. - -.alert-success { - .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); -} - -.btn-alert-success { - .btn-alert-variant(@alert-success-bg); -} - -.alert-info { - .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); -} - -.alert-info-alt { - .alert-variant(@alert-info-alt-bg; @alert-info-alt-border; @alert-info-alt-text); -} - -.btn-alert-info { - .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); - .alert-btn(@btn-info-bg); -} - -.alert-warning { - .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); -} - -.btn-alert-warning { - .btn-alert-variant(@alert-warning-bg); -} - -.alert-danger { - .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); -} - -.btn-alert-danger { - .btn-alert-variant(@alert-danger-bg); -} - -.alert-alt { - .alert-variant(@alert-alt-bg; @alert-alt-border; @alert-alt-text); -} - -.btn-alert-alt { - .btn-alert-variant(@alert-alt-bg); -} - -.alert { - a, - .btn-inline-link { - color: white; - text-decoration: underline; - background: none; - &:hover, - &:focus, - &:active { - background: none; - } - } - .btn:not(.btn-inline-link) { - text-decoration: none; - } -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/components/all.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/all.scss rename to services/web/frontend/stylesheets/components/all.scss diff --git a/services/web/frontend/stylesheets/components/badge.less b/services/web/frontend/stylesheets/components/badge.less deleted file mode 100644 index abf18097aa..0000000000 --- a/services/web/frontend/stylesheets/components/badge.less +++ /dev/null @@ -1,56 +0,0 @@ -.badge-tag-bs3 { - @size: 24px; - @padding: 4px; - display: inline-flex; - align-items: center; - height: @size; - max-width: 100%; - min-height: @size; - white-space: nowrap; - color: @ol-blue-gray-6; - background-color: @neutral-20; - border-radius: 4px; - - &:hover { - background-color: @neutral-30; - } - - &-content-wrapper { - display: flex; - align-items: center; - overflow: hidden; - padding-left: @padding; - padding-right: @padding; - border-top-left-radius: inherit; - border-bottom-left-radius: inherit; - } - - &-prepend { - margin-right: 2px; - display: flex; - } - - &-close { - .reset-button; - width: @size; - font-size: 20px; - height: @size; - line-height: 1; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - padding: 0 @padding; - border-top-right-radius: inherit; - border-bottom-right-radius: inherit; - color: inherit; - - &:hover { - background-color: @neutral-40; - } - } - - &-content { - .text-overflow(); - } -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss b/services/web/frontend/stylesheets/components/badge.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/badge.scss rename to services/web/frontend/stylesheets/components/badge.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/begin-now-card.scss b/services/web/frontend/stylesheets/components/begin-now-card.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/begin-now-card.scss rename to services/web/frontend/stylesheets/components/begin-now-card.scss diff --git a/services/web/frontend/stylesheets/components/beta-badges.less b/services/web/frontend/stylesheets/components/beta-badges.less deleted file mode 100644 index e5553a4eec..0000000000 --- a/services/web/frontend/stylesheets/components/beta-badges.less +++ /dev/null @@ -1,67 +0,0 @@ -.info-badge, -.beta-badge, -.alpha-badge { - display: inline-block; - width: @line-height-computed * 0.75; - height: @line-height-computed * 0.75; - line-height: @font-size-small; - font-size: @line-height-computed * 0.75; - font-weight: normal; - text-align: center; - color: #fff; - - &::before { - line-height: @font-size-small; - font-size: @font-size-small; - } - - &:hover, - &:focus { - color: #fff; - text-decoration: none; - } -} - -.info-badge { - background-color: @info-badge-bg; - border-radius: @line-height-computed * 0.75; - font-family: @font-family-serif; - font-style: italic; - - &::before { - content: 'i'; - } -} - -.info-badge-fade-bg { - .info-badge; - background-color: rgba(0, 0, 0, 0.25); -} - -.beta-badge { - background-color: @orange; - border-radius: @border-radius-base; - - &::before { - content: 'β'; - } -} -.alpha-badge { - background-color: @ol-green; - border-radius: @border-radius-base; - - &::before { - content: 'α'; - } -} - -.labs-badge { - background-color: @orange; - border-radius: @border-radius-base; - padding: 2px; - color: white; -} - -.split-test-badge-tooltip .tooltip-inner { - white-space: pre-wrap; -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/beta-badges.scss b/services/web/frontend/stylesheets/components/beta-badges.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/beta-badges.scss rename to services/web/frontend/stylesheets/components/beta-badges.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss b/services/web/frontend/stylesheets/components/blog-posts.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss rename to services/web/frontend/stylesheets/components/blog-posts.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/button-group.scss b/services/web/frontend/stylesheets/components/button-group.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/button-group.scss rename to services/web/frontend/stylesheets/components/button-group.scss diff --git a/services/web/frontend/stylesheets/components/button-groups.less b/services/web/frontend/stylesheets/components/button-groups.less deleted file mode 100755 index ed4f1343f4..0000000000 --- a/services/web/frontend/stylesheets/components/button-groups.less +++ /dev/null @@ -1,251 +0,0 @@ -// -// Button groups -// -------------------------------------------------- - -// Make the div behave like a button -.btn-group, -.btn-group-vertical { - position: relative; - display: inline-block; - vertical-align: middle; // match .btn alignment given font-size hack above - > .btn { - position: relative; - float: left; - // Bring the "active" button to the front - &:hover, - &:focus, - &:active, - &.active { - z-index: 2; - } - &:focus { - // Remove focus outline when dropdown JS adds it after closing the menu - outline: none; - } - } -} - -.btn-group { - label { - &.btn.active { - background-color: @neutral-20; - } - - &.btn[disabled] { - cursor: not-allowed; - background-color: @neutral-20; - border-color: @neutral-20; - opacity: 1; - color: @neutral-90; - } - } -} - -// Prevent double borders when buttons are next to each other -.btn-group { - .btn + .btn, - .btn + .btn-group, - .btn-group + .btn, - .btn-group + .btn-group { - margin-left: -1px; - } -} - -// Optional: Group multiple button groups together for a toolbar -.btn-toolbar { - &:extend(.clearfix all); - - .btn-group, - .input-group { - float: left; - } - > .btn, - > .btn-group, - > .input-group { - margin-left: 5px; - } -} - -.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { - border-radius: 0; -} - -// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match -.btn-group > .btn:first-child { - margin-left: 0; - &:not(:last-child):not(.dropdown-toggle) { - .border-right-radius(0); - } -} -// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it -.btn-group > .btn:last-child:not(:first-child), -.btn-group > .dropdown-toggle:not(:first-child) { - .border-left-radius(0); -} - -// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) -.btn-group > .btn-group { - float: left; -} -.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { - border-radius: 0; -} -.btn-group > .btn-group:first-child { - > .btn:last-child, - > .dropdown-toggle { - .border-right-radius(0); - } -} -.btn-group > .btn-group:last-child > .btn:first-child { - .border-left-radius(0); -} - -// On active and open, don't show outline -.btn-group .dropdown-toggle:active, -.btn-group.open .dropdown-toggle { - outline: 0; -} - -// Sizing -// -// Remix the default button sizing classes into new ones for easier manipulation. - -.btn-group-xs > .btn { - &:extend(.btn-xs); -} -.btn-group-sm > .btn { - &:extend(.btn-sm); -} -.btn-group-lg > .btn { - &:extend(.btn-lg); -} - -// Split button dropdowns -// ---------------------- - -// Give the line between buttons some depth -.btn-group > .btn + .dropdown-toggle { - padding-left: 8px; - padding-right: 8px; -} -.btn-group > .btn-lg + .dropdown-toggle { - padding-left: 12px; - padding-right: 12px; -} - -// The clickable button for toggling the menu -// Remove the gradient and set the same inset shadow as the :active state -.btn-group.open .dropdown-toggle { - &.btn-secondary { - background-color: @btn-secondary-hover-bg-color; - } - &.btn-primary { - border-color: @btn-primary-hover-bg-color; - background-color: @btn-primary-hover-bg-color; - } -} -.btn-form-cross { - display: block; -} -// Reposition the caret -.btn .caret { - margin-left: 0; -} -// Carets in other button sizes -.btn-lg .caret { - border-width: @caret-width-large @caret-width-large 0; - border-bottom-width: 0; -} -// Upside down carets for .dropup -.dropup .btn-lg .caret { - border-width: 0 @caret-width-large @caret-width-large; -} - -// Vertical button groups -// ---------------------- - -.btn-group-vertical { - > .btn, - > .btn-group, - > .btn-group > .btn { - display: block; - float: none; - width: 100%; - max-width: 100%; - } - - // Clear floats so dropdown menus can be properly placed - > .btn-group { - &:extend(.clearfix all); - > .btn { - float: none; - } - } - - > .btn + .btn, - > .btn + .btn-group, - > .btn-group + .btn, - > .btn-group + .btn-group { - margin-top: -1px; - margin-left: 0; - } -} - -.btn-group-vertical > .btn { - &:not(:first-child):not(:last-child) { - border-radius: 0; - } - &:first-child:not(:last-child) { - border-top-right-radius: @border-radius-base; - .border-bottom-radius(0); - } - &:last-child:not(:first-child) { - border-bottom-left-radius: @border-radius-base; - .border-top-radius(0); - } -} -.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { - border-radius: 0; -} -.btn-group-vertical > .btn-group:first-child:not(:last-child) { - > .btn:last-child, - > .dropdown-toggle { - .border-bottom-radius(0); - } -} -.btn-group-vertical - > .btn-group:last-child:not(:first-child) - > .btn:first-child { - .border-top-radius(0); -} - -// Justified button groups -// ---------------------- - -.btn-group-justified { - display: table; - width: 100%; - table-layout: fixed; - border-collapse: separate; - > .btn, - > .btn-group { - float: none; - display: table-cell; - width: 1%; - } - > .btn-group .btn { - width: 100%; - } -} - -// Checkbox and radio options -[data-toggle='buttons'] > .btn > input[type='radio'], -[data-toggle='buttons'] > .btn > input[type='checkbox'] { - display: none; -} - -// button group as toolbar item -.btn-group.toolbar-item { - display: flex; - flex-wrap: nowrap; -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss b/services/web/frontend/stylesheets/components/button.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/button.scss rename to services/web/frontend/stylesheets/components/button.scss diff --git a/services/web/frontend/stylesheets/components/buttons.less b/services/web/frontend/stylesheets/components/buttons.less deleted file mode 100755 index 0ff2933597..0000000000 --- a/services/web/frontend/stylesheets/components/buttons.less +++ /dev/null @@ -1,293 +0,0 @@ -// -// Buttons -// -------------------------------------------------- - -// Base styles -// -------------------------------------------------- - -.btn { - display: inline-block; - margin-bottom: 0; // For input.btn - font-weight: @btn-font-weight; - text-align: center; - vertical-align: middle; - cursor: pointer; - border: 0 solid transparent; - white-space: nowrap; - .button-size( - @padding-base-vertical; @padding-base-horizontal; @font-size-base; - @line-height-base; @btn-border-radius-base - ); - .user-select(none); - - &, - &:active, - &.active { - &:focus { - .tab-focus(); - } - } - - &:hover, - &:focus { - color: @btn-default-color; - text-decoration: none; - } - - // &:active, - // &.active { - // } - - &.disabled, - &[disabled], - fieldset[disabled] & { - &, - &:hover, - &:focus, - &:active, - &.active { - cursor: not-allowed; - opacity: 1; //needed to override deprecated styling in individual classes - .box-shadow(none); - } - } - - &.disabled.btn-info, - &.disabled.btn-default, - &[disabled].btn-info, - &[disabled].btn-default, - fieldset[disabled].btn-info, - fieldset[disabled].btn-default & { - // style only for deprecated classes - .opacity(0.65); - } -} - -// Alternate buttons -// -------------------------------------------------- - -.btn-default { - .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); -} -.btn-default-outline { - .button-outline-variant(@btn-default-bg); -} -.btn-primary { - .btn-borderless(); -} -.btn-primary-on-primary-bg { - .button-variant(@white; @ol-dark-green; @ol-dark-green); -} -// Success appears as green -.btn-success { - .btn-primary; -} - -// Info appears as blue-green -.btn-info { - .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); -} -// Warning appears as orange -.btn-warning { - .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); -} -// Danger and error appear as red -.btn-danger { - .btn-borderless(@white, @red, @red-60); -} -// Danger Ghost and error appear as light red with no border -.btn-danger-ghost { - .btn-borderless(@red-50, @btn-danger-ghost-bg, @red-10); -} -// Info Ghost appear as info blue with no border -.btn-info-ghost { - .btn-borderless(@blue-50, @btn-info-ghost-bg, @blue-10); -} -// Background Ghost appear as neutral-90 (matching our text colour) with no border -// .btn-ghost is backported from bs5 -.btn-bg-ghost, -.btn-ghost { - .btn-borderless(@neutral-90, @btn-info-ghost-bg, @neutral-10); -} -// Inline button to fit text, without link styling. -// TODO: generic class for other styles -.btn-info-ghost-inline { - .btn-borderless(@blue-50, @btn-info-ghost-bg, @blue-10); - padding: 0 !important; - font-size: inherit !important; - vertical-align: inherit; -} -// btn-secondary -.btn-secondary { - .btn-bordered(); -} -.btn-secondary-info { - .btn-secondary; -} - -// Buttons relating to premium features have a special background -.btn-premium { - .premium-background; - color: @white; - &:hover { - background: @blue-70; - } -} - -.btn-premium-secondary { - .btn-bordered(); - .button-variant(@blue-60, @white, @blue-60); -} - -.reset-btns { - // reset all buttons back to their original colors - .btn-danger { - .btn-danger; - } - .btn-default { - .btn-default; - } - .btn-default-outline { - .btn-default-outline; - } - .btn-info { - .btn-info; - } - .btn-primary { - .btn-primary; - } - .btn-success { - .btn-success; - } - .btn-warning { - .btn-warning; - } - .btn-secondary { - .btn-secondary; - } - .btn-premium { - .btn-premium; - } -} - -// Link buttons -// ------------------------- - -// Make a button look and behave like a link -.btn-link { - color: @link-color; - font-weight: normal; - cursor: pointer; - border-radius: 0; - - &, - &:active, - &[disabled], - fieldset[disabled] & { - background-color: transparent; - .box-shadow(none); - } - &, - &:hover, - &:focus, - &:active { - border-color: transparent; - } - &:hover, - &:focus { - color: @link-hover-color; - text-decoration: underline; - background-color: transparent; - } - &[disabled], - fieldset[disabled] & { - &:hover, - &:focus { - color: @btn-link-disabled-color; - text-decoration: none; - } - } - - &.btn-danger { - color: @ol-red; - - &:hover, - &:focus { - color: @ol-dark-red; - } - } -} - -.btn-inline-link { - .btn-link(); - padding: 0; - font-size: inherit; - vertical-align: inherit; -} - -// Button Sizes -// -------------------------------------------------- - -.btn-xl { - .button-size( - @padding-large-vertical; @padding-large-horizontal; @font-size-h2; - @line-height-large; @btn-border-radius-large - ); -} - -.btn-lg { - // line-height: ensure even-numbered height of button next to large input - .button-size( - @padding-large-vertical; @padding-large-horizontal; @font-size-large; - @line-height-large; @btn-border-radius-large - ); -} -.btn-sm { - // line-height: ensure proper height of button next to small input - .button-size( - @padding-small-vertical; @padding-small-horizontal; @font-size-small; - @line-height-small; @btn-border-radius-small - ); -} -.btn-xs { - .button-size( - @padding-xs-vertical; @padding-xs-horizontal; @font-size-small; - @line-height-small; @btn-border-radius-small - ); -} - -// Block button -// -------------------------------------------------- - -.btn-block { - display: block; - width: 100%; - padding-left: 0; - padding-right: 0; -} - -// Vertically space out multiple block buttons -.btn-block + .btn-block { - margin-top: 5px; -} - -// Specificity overrides -input[type='submit'], -input[type='reset'], -input[type='button'] { - &.btn-block { - width: 100%; - } -} - -.login-btn { - .btn; - .btn-secondary; - position: relative; - padding-left: 20px; - padding-right: 0; -} - -.login-btn-dynamic-text { - white-space: normal; -} diff --git a/services/web/frontend/stylesheets/components/card.less b/services/web/frontend/stylesheets/components/card.less deleted file mode 100644 index 78031e2c30..0000000000 --- a/services/web/frontend/stylesheets/components/card.less +++ /dev/null @@ -1,203 +0,0 @@ -.card { - background-color: white; - border-radius: @border-radius-base; - box-shadow: none; - padding: @line-height-computed; - .page-header { - margin: 0 0 1.5625rem; - h1, - h2, - h3 { - margin-top: 0; - } - } - > .container-fluid { - padding: 0; - } - - .card-header { - border-bottom: 1px solid @gray-lighter; - padding-bottom: @line-height-computed; - margin-bottom: @line-height-computed; - h2 { - margin: 0; - } - } - - > :first-child { - margin-top: 0; - } - > :last-child { - margin-bottom: 0; - } - - &.card-drop-shadow { - box-shadow: @card-box-shadow; - background-color: white; - - > hr { - margin-left: -@line-height-computed; - margin-right: -@line-height-computed; - } - } -} - -.card-thin { - padding: @line-height-computed / 2; -} - -.card-group { - .card { - margin: @line-height-computed -15px 0 -15px; - border-radius: 0; - - &.card-highlighted { - // Make it taller and card like - margin-top: 0; - border-radius: @border-radius-base; - } - - &.card-first { - border-top-left-radius: @border-radius-base; - border-bottom-left-radius: @border-radius-base; - } - &.card-last { - border-top-right-radius: @border-radius-base; - border-bottom-right-radius: @border-radius-base; - } - } -} - -.card-border { - border: @border-width-base solid @border-color-base; -} - -.card-content { - padding: @padding-md; -} - -.card-gray { - &:extend(.card); - background-color: @card-gray-bg-color; - border-radius: @card-border-radius; -} - -.card-gray-dark { - &:extend(.card); - background-color: @ol-blue-gray-1; - border-radius: @card-border-radius; -} - -.website-redesign { - .card { - background-color: @card-gray-bg-color; - border-radius: 24px; - } -} - -.card { - &.card-dark-green-bg { - background: var(--dark-jungle-green); - border-radius: 16px; - color: var(--green-10); - padding: var(--spacing-09); - - a:not(.btn) { - color: var(--green-30); - - &:hover { - color: var(--green-30); - } - } - } - - &.card-purple-top-border { - background-color: white; - border-radius: 8px; - box-shadow: - 0px 2px 4px 0px #1e253014, - 0px 4px 12px 0px #1e25301f; - border-top: 8px solid var(--sapphire-blue); - padding: 32px 40px 32px 40px; - } - - &.card-premium-border { - h2, - h3, - h4 { - color: var(--blue-60); - } - border-radius: 8px; - padding: var(--spacing-10); - border: 2px solid transparent; - background: - linear-gradient(white, white) padding-box, - linear-gradient(to right, var(--blue-40), #254c84, var(--blue-70)) - border-box; - - .btn { - width: 100%; - } - } - - &.card-pattern { - border-radius: var(--border-radius-medium-new); - color: var(--white); - padding: var(--spacing-13); - text-align: center; - background-size: cover; - background-image: - linear-gradient( - to right, - rgba(0, 0, 0, 0.4) 0%, - var(--dark-jungle-green) 25%, - var(--dark-jungle-green) 75%, - rgba(0, 0, 0, 0.4) 100% - ), - url('../../../public/img/website-redesign/overleaf-pattern-purple.png'); - - h2 { - .heading-lg(); - } - p { - .body-lg(); - } - h1, - h2, - h3, - h4, - h5, - p { - color: var(--white); - } - } - - &.card-pattern-left-only { - border-radius: var(--border-radius-medium-new); - color: var(--white); - padding: var(--spacing-13); - background-size: cover; - background-image: - linear-gradient( - to right, - rgba(0, 0, 0, 0.4) 0%, - var(--dark-jungle-green) 20%, - var(--dark-jungle-green) 100% - ), - url('../../../public/img/website-redesign/overleaf-pattern-purple.png'); - h2 { - .heading-lg(); - } - p { - .body-lg(); - } - h1, - h2, - h3, - h4, - h5, - p { - color: var(--white); - } - } -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/card.scss b/services/web/frontend/stylesheets/components/card.scss similarity index 96% rename from services/web/frontend/stylesheets/bootstrap-5/components/card.scss rename to services/web/frontend/stylesheets/components/card.scss index 777ec46c79..85a49ef990 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/card.scss +++ b/services/web/frontend/stylesheets/components/card.scss @@ -115,7 +115,7 @@ var(--dark-jungle-green) 75%, rgba(0 0 0 / 40%) 100% ), - url('../../../../public/img/website-redesign/overleaf-pattern-purple.png'); + url('../../../public/img/website-redesign/overleaf-pattern-purple.png'); h2 { @include heading-lg; @@ -150,7 +150,7 @@ var(--dark-jungle-green) 20%, var(--dark-jungle-green) 100% ), - url('../../../../public/img/website-redesign/overleaf-pattern-purple.png'); + url('../../../public/img/website-redesign/overleaf-pattern-purple.png'); h2 { @include heading-lg; diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/caret.scss b/services/web/frontend/stylesheets/components/caret.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/caret.scss rename to services/web/frontend/stylesheets/components/caret.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/close-button.scss b/services/web/frontend/stylesheets/components/close-button.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/close-button.scss rename to services/web/frontend/stylesheets/components/close-button.scss diff --git a/services/web/frontend/stylesheets/components/close.less b/services/web/frontend/stylesheets/components/close.less deleted file mode 100755 index dd0fcc4551..0000000000 --- a/services/web/frontend/stylesheets/components/close.less +++ /dev/null @@ -1,32 +0,0 @@ -// -// Close icons -// -------------------------------------------------- - -.close { - float: right; - font-size: (@font-size-base * 1.5); - font-weight: @close-font-weight; - line-height: 1; - color: @close-color; - text-shadow: @close-text-shadow; - .opacity(0.4); - - &:hover, - &:focus { - color: @close-color; - text-decoration: none; - cursor: pointer; - .opacity(0.5); - } - - // Additional properties for button version - // iOS requires the button element instead of an anchor tag. - // If you want the anchor version, it requires `href="#"`. - button& { - padding: 0; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; - } -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/collapsible-file-header.scss b/services/web/frontend/stylesheets/components/collapsible-file-header.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/collapsible-file-header.scss rename to services/web/frontend/stylesheets/components/collapsible-file-header.scss diff --git a/services/web/frontend/stylesheets/components/component-animations.less b/services/web/frontend/stylesheets/components/component-animations.less deleted file mode 100755 index 6cf9fd9106..0000000000 --- a/services/web/frontend/stylesheets/components/component-animations.less +++ /dev/null @@ -1,29 +0,0 @@ -// -// Component animations -// -------------------------------------------------- - -// Heads up! -// -// We don't use the `.opacity()` mixin here since it causes a bug with text -// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552. - -.fade { - opacity: 0; - .transition(opacity 0.15s linear); - &.in { - opacity: 1; - } -} - -.collapse { - display: none; - &.in { - display: block; - } -} -.collapsing { - position: relative; - height: 0; - overflow: hidden; - .transition(height 0.35s ease); -} diff --git a/services/web/frontend/stylesheets/components/container.less b/services/web/frontend/stylesheets/components/container.less deleted file mode 100644 index db14d07dd5..0000000000 --- a/services/web/frontend/stylesheets/components/container.less +++ /dev/null @@ -1,3 +0,0 @@ -.container-custom-sm { - max-width: 400px; -} diff --git a/services/web/frontend/stylesheets/components/dev-toolbar.less b/services/web/frontend/stylesheets/components/dev-toolbar.less deleted file mode 100644 index 26aa2e4549..0000000000 --- a/services/web/frontend/stylesheets/components/dev-toolbar.less +++ /dev/null @@ -1,121 +0,0 @@ -.dev-toolbar { - position: fixed; - bottom: 0; - left: 0; - right: 0; - z-index: 100; - height: 40px; - background-color: @neutral-90; - padding: 5px 12px; - - button.widget { - color: @neutral-10; - margin: 0 4px; - padding: 0 4px; - border: none; - text-decoration: none; - } - - .collapse-button { - position: absolute; - padding: 0; - margin-top: -2px; - color: @neutral-50; - - span { - font-size: 28px; - } - - &:hover { - color: @neutral-30; - } - } -} - -.dev-tool-bar-open-button { - position: fixed; - bottom: -2px; - left: 6px; - color: @neutral-50; - - span { - font-size: 28px; - } - - &:hover { - color: @neutral-30; - } -} - -.dev-toolbar-tooltip { - a { - color: @blue-20; - &.btn { - color: @neutral-10; - } - } - - &.tooltip.top { - margin-top: -10px; - opacity: 1; - } - .tooltip-inner { - padding: 2px 8px 8px 8px; - text-align: left; - min-width: 300px; - max-height: 800px; - overflow-y: auto; - } - - .title { - margin-top: 4px; - } - - .test-card { - text-align: left; - color: @neutral-10; - padding: 6px; - border: 2px solid @neutral-70; - background-color: @neutral-80; - border-radius: 4px; - margin-top: 8px; - - &.override { - border-color: @blue-40; - } - - .test-name { - font-family: monospace; - font-size: @font-size-extra-small; - font-weight: bold; - } - - ul { - li.variant-row { - line-height: 24px; - display: flex; - justify-content: space-between; - align-items: center; - padding: 2px 0; - - .btn { - color: @white; - } - - .material-symbols { - vertical-align: text-top; - font-weight: 400; - } - } - } - } - - .actions { - margin-top: 8px; - text-align: right; - } - - ul { - margin-bottom: 0; - } -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/dev-toolbar.scss b/services/web/frontend/stylesheets/components/dev-toolbar.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/dev-toolbar.scss rename to services/web/frontend/stylesheets/components/dev-toolbar.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/dictionary.scss b/services/web/frontend/stylesheets/components/dictionary.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/dictionary.scss rename to services/web/frontend/stylesheets/components/dictionary.scss diff --git a/services/web/frontend/stylesheets/components/divider.less b/services/web/frontend/stylesheets/components/divider.less deleted file mode 100644 index e32e166ab8..0000000000 --- a/services/web/frontend/stylesheets/components/divider.less +++ /dev/null @@ -1,4 +0,0 @@ -// migrated to layout.scss -.horizontal-divider { - border-top: 1px solid @hr-border; -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss b/services/web/frontend/stylesheets/components/dropdown-menu.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss rename to services/web/frontend/stylesheets/components/dropdown-menu.scss diff --git a/services/web/frontend/stylesheets/components/dropdowns.less b/services/web/frontend/stylesheets/components/dropdowns.less deleted file mode 100755 index d330087f60..0000000000 --- a/services/web/frontend/stylesheets/components/dropdowns.less +++ /dev/null @@ -1,359 +0,0 @@ -// -// Dropdown menus -// -------------------------------------------------- - -// Dropdown arrow/caret -.caret { - display: inline-block; - width: 0; - height: 0; - margin-left: 2px; - vertical-align: middle; - border-top: @caret-width-base solid; - border-right: @caret-width-base solid transparent; - border-left: @caret-width-base solid transparent; - margin-top: -@caret-width-base / 2; -} - -// The dropdown wrapper (div) -.dropdown { - position: relative; -} - -.open button.dropdown-toggle.dropdown-toggle-no-background, -button.dropdown-toggle.dropdown-toggle-no-background { - background-color: transparent; - box-shadow: none; - border: 0; - &:hover, - &:active, - &:focus { - background-color: transparent; - box-shadow: none; - } -} - -// Prevent the focus on the dropdown toggle when closing dropdowns -.dropdown-toggle:focus { - outline: 0; -} - -// The dropdown menu (ul) -.dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: @zindex-dropdown; - display: none; // none by default, but block on "open" of the menu - 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; - - // Aligns the dropdown menu to right - // - // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` - &.pull-right { - right: 0; - left: auto; - } - - // Dividers (basically an hr) within the dropdown - .divider { - .nav-divider(@dropdown-divider-bg); - } - - // Links and other items within the dropdown menu - > li > a, - div, - .dropdown-menu-button { - display: block; - padding: @dropdown-item-padding; - 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 - &.subdued { - color: #7a7a7a; - } - .subdued { - color: #7a7a7a; - } - } - - // button specific styles - .dropdown-menu-button { - border: none; - outline: none; - width: 100%; - } - - .dropdown-header { - color: @dropdown-header-color; - } -} - -// This removes positioning, display and z-index, which is used just to style the menu in situations where something -// else is managing that stuff (e.g. the spelling context menu in CodeMirror 6). -.dropdown-menu.dropdown-menu-unpositioned { - position: unset; - top: unset; - left: unset; - z-index: unset; - display: block; - float: unset; -} - -// Hover/Focus state -.dropdown-menu > li > a, -.dropdown-menu .dropdown-menu-button { - &:hover, - &:focus { - text-decoration: none; - color: @dropdown-link-hover-color; - background-color: @dropdown-link-hover-bg; - .subdued { - color: @dropdown-link-hover-color; - } - div { - color: @dropdown-link-hover-color; - } - } -} - -// Active state -.dropdown-menu > .active > a { - &, - &:hover, - &:focus { - color: @dropdown-link-active-color; - text-decoration: none; - outline: 0; - background-color: @dropdown-link-active-bg; - } -} - -// Disabled state -// -// Gray out text and ensure the hover/focus state remains gray - -.dropdown-menu > .disabled > a { - &, - &:hover, - &:focus { - color: @dropdown-link-disabled-color; - div { - color: @dropdown-link-disabled-color; - } - } -} -// Nuke hover/focus effects -.dropdown-menu > .disabled > a { - &:hover, - &:focus { - text-decoration: none; - background-color: transparent; - background-image: none; // Remove CSS gradient - .reset-filter(); - cursor: not-allowed; - } -} - -// Open state for the dropdown -.open { - // Show the menu - > .dropdown-menu { - display: block; - } - - // Remove the outline when :focus is triggered - > a { - outline: 0; - } -} - -// Menu positioning -// -// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown -// menu with the parent. -.dropdown-menu-right { - left: auto; // Reset the default from `.dropdown-menu` - right: 0; -} -// With v3, we enabled auto-flipping if you have a dropdown within a right -// aligned nav component. To enable the undoing of that, we provide an override -// to restore the default dropdown menu alignment. -// -// This is only for left-aligning a dropdown menu within a `.navbar-right` or -// `.pull-right` nav component. -.dropdown-menu-left { - left: 0; - right: auto; -} - -// Dropdown section headers -.dropdown-header { - display: block; - padding: 12.5px 15px; - font-size: @font-size-small; - line-height: @line-height-base; - color: @dropdown-header-color; -} - -// Backdrop to catch body clicks on mobile, etc. -.dropdown-backdrop { - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: 0; - z-index: (@zindex-dropdown - 10); -} - -// Right aligned dropdowns -.pull-right > .dropdown-menu { - right: 0; - left: auto; -} - -// Allow for dropdowns to go bottom up (aka, dropup-menu) -// -// Just add .dropup after the standard .dropdown class and you're set, bro. -// TODO: abstract this so that the navbar fixed styles are not placed here? - -.dropup, -.navbar-fixed-bottom .dropdown { - // Reverse the caret - .caret { - border-top: 0; - border-bottom: @caret-width-base solid; - content: ''; - } - // Different positioning for bottom up menu - .dropdown-menu { - top: auto; - bottom: 100%; - margin-bottom: 1px; - } -} - -// Component alignment -// -// Reiterate per navbar.less and the modified component alignment there. - -@media (min-width: @grid-float-breakpoint) { - .navbar-right { - .dropdown-menu { - .dropdown-menu-right(); - } - // Necessary for overrides of the default right aligned menu. - // Will remove come v4 in all likelihood. - .dropdown-menu-left { - .dropdown-menu-left(); - } - } -} - -.layout-dropdown { - .dropdown-toggle { - // override style added by required bsStyle react-bootstrap prop - text-decoration: none !important; - } - - .dropdown-menu > li { - svg { - line, - rect { - stroke: @dropdown-link-color; - } - path { - fill: @dropdown-link-color; - } - } - - > a { - padding: 4px 10px; - } - - > a:hover, - > a:focus { - svg { - line, - rect { - stroke: @dropdown-link-hover-color; - } - path { - fill: @dropdown-link-hover-color; - } - } - } - - &.disabled { - .subdued { - color: @dropdown-link-disabled-color; - } - - svg { - line, - rect { - stroke: @dropdown-link-disabled-color; - } - path { - fill: @dropdown-link-disabled-color; - } - } - - > a:hover, - > a:focus { - .subdued { - color: @dropdown-link-disabled-color; - } - - svg { - line, - rect { - stroke: @dropdown-link-disabled-color; - } - path { - fill: @dropdown-link-disabled-color; - } - } - } - } - } - - .layout-menu-item { - display: flex; - align-items: center; - white-space: nowrap; - justify-content: space-between; - padding: 0; - - .layout-menu-item-start { - display: flex; - align-items: center; - padding: 0; - - > div { - padding: 0; - } - } - } - - .layout-dropdown-list { - a { - i { - margin-right: @margin-xs; - } - } - } -} diff --git a/services/web/frontend/stylesheets/components/embed-responsive.less b/services/web/frontend/stylesheets/components/embed-responsive.less deleted file mode 100644 index 652abc81c1..0000000000 --- a/services/web/frontend/stylesheets/components/embed-responsive.less +++ /dev/null @@ -1,26 +0,0 @@ -.embed-responsive { - display: block; - height: 0; - overflow: hidden; - padding: 0; - position: relative; -} -.embed-responsive .embed-responsive-item, -.embed-responsive iframe, -.embed-responsive embed, -.embed-responsive object, -.embed-responsive video { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; -} -.embed-responsive-16by9 { - padding-bottom: 56.25% !important; -} -.embed-responsive-4by3 { - padding-bottom: 75% !important; -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/error-boundary.scss b/services/web/frontend/stylesheets/components/error-boundary.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/error-boundary.scss rename to services/web/frontend/stylesheets/components/error-boundary.scss diff --git a/services/web/frontend/stylesheets/components/expand-collapse.less b/services/web/frontend/stylesheets/components/expand-collapse.less deleted file mode 100644 index c2f8fa60b5..0000000000 --- a/services/web/frontend/stylesheets/components/expand-collapse.less +++ /dev/null @@ -1,6 +0,0 @@ -.expand-collapse-container { - overflow: hidden; - transition: - height 0.15s ease-in-out, - width 0.15s ease-in-out; -} diff --git a/services/web/frontend/stylesheets/components/footer.less b/services/web/frontend/stylesheets/components/footer.less deleted file mode 100644 index e966d3a9dc..0000000000 --- a/services/web/frontend/stylesheets/components/footer.less +++ /dev/null @@ -1,391 +0,0 @@ -footer.site-footer { - background-color: @footer-bg-color; - border-top: 1px solid @gray-lighter; - font-size: 0.9rem; - position: absolute; - bottom: 0; - width: 100%; - height: @footer-height; - line-height: @footer-height - 1; // Hack — in Chrome, using the full @footer-height would generate vertical scrolling - - ul { - list-style: none; - margin: 0px; - li { - display: inline-block; - margin: 0 0.5em; - } - i { - font-size: 1.2rem; - } - } - li.lng-option { - text-align: left; - display: list-item; - - img { - vertical-align: text-bottom; - } - - a:hover, - a:focus { - color: @white; - } - } - - a { - color: @footer-link-color; - &:hover, - &:focus { - color: @footer-link-hover-color; - } - } -} - -.site-footer-content { - .container-fluid; -} - -.sprite-icon-lang { - display: inline-block; - vertical-align: middle; -} - -.fat-footer { - background: @ol-blue-gray-6; - color: @ol-blue-gray-1; - display: flex; - flex-direction: column; - - .fat-footer-container { - margin: @margin-xxl auto; - } - - a { - color: @ol-blue-gray-1; - } - - .footer-brand-container { - flex: 1; - } - - .fat-footer-sections { - display: grid; - column-gap: @margin-md; - padding: 0 @padding-md @padding-md; - } - - .footer-brand { - display: block; - height: 37px; /* TODO: configurable? */ - width: @navbar-brand-width; - background-image: @navbar-brand-image-url; - background-size: contain; - background-repeat: no-repeat; - background-position: left center; - } - - .footer-section-heading { - color: @neutral-20; - font-family: @font-family-serif; - font-size: @font-size-h3; - line-height: @headings-line-height; - margin-bottom: @margin-md; - margin-top: @margin-md; - } - - .footer-section ul { - font-family: @font-family-sans-serif; - font-size: @font-size-base; - line-height: @line-height-small; - } - - .footer-section li { - padding-bottom: @padding-sm; - } - - #footer-brand { - grid-column: ~'1/-1'; - margin-top: @margin-md; - } - - .fat-footer-base { - color: @ol-blue-gray-2; - font-size: @font-size-small; - line-height: @line-height-base; - - .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 */ - } - - a { - color: @gray-dark; - - &:hover { - color: white; - } - } - } - - .fat-footer-social { - &.x-logo svg path { - fill: @ol-blue-gray-1; - } - - &.facebook-logo svg, - &.linkedin-logo svg { - path.background { - fill: @ol-blue-gray-1; - } - } - - &.facebook-logo svg { - path.text { - fill: transparent; - } - } - - &.linkedin-logo svg { - path.text { - fill: @ol-blue-gray-6; - } - } - } - } - - .fat-footer-base-item { - display: flex; - white-space: nowrap; - } - - @media (max-width: @screen-xs-max) { - .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; - margin: @margin-md auto 0; - - .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 { - padding: @padding-xs; - margin: @margin-lg / 2; - } - - .fat-footer-base-meta .fat-footer-base-item { - gap: @margin-lg; - } - - .fat-footer-base-social .fat-footer-base-item { - gap: @margin-md; - } - - .fat-footer-social { - font-size: @fat-footer-social-font-size; - } - - .fat-footer-base-copyright { - order: 2; - } - } - } - - @media (min-width: @screen-sm-min) { - .fat-footer-container { - width: (@screen-sm - (@padding-sm * 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; - } - - .footer-section ul { - line-height: 20px; - } - - .fat-footer-base { - display: flex; - justify-content: space-between; - margin: @margin-md auto; - - .fat-footer-base-section { - display: flex; - align-items: center; - } - - .fat-footer-base-item { - padding: @padding-xs; - margin: @margin-xs; - } - - .fat-footer-base-meta .fat-footer-base-item { - gap: @margin-md; - } - - .fat-footer-social { - margin: 0 @margin-xs; - font-size: @fat-footer-social-font-size; - } - } - } - - @media (min-width: @screen-md-min) { - .fat-footer-container { - width: (@screen-md - @padding-md); - } - - .fat-footer-sections { - grid-template-columns: repeat(4, 1fr); - } - } - - @media (min-width: @screen-lg-min) { - .fat-footer-container { - width: (@screen-lg - @padding-lg); - } - - .fat-footer-sections { - grid-template-columns: repeat(7, 1fr); - grid-template-rows: auto; - } - - .footer-section:last-of-type { - grid-column: 7; - } - } -} - -.cookie-banner { - padding: 10px 20px; - font-size: 0.9rem; - line-height: 1; - position: fixed; - bottom: 0px; - left: 0; - right: 0; - z-index: 100; - color: @text-color; - background: @ol-blue-gray-0; - box-shadow: 0px -5px 8px 0px #0000001a; - - .cookie-banner-actions { - padding-top: 10px; - } - - @media (min-width: @screen-sm-min) { - align-items: center; - display: flex; - flex-wrap: wrap; - - .cookie-banner-content { - flex: 1; - } - - .cookie-banner-actions { - flex-shrink: 0; - white-space: nowrap; - padding-top: 0; - } - } -} - -.website-redesign-fat-footer { - .fat-footer-container { - @media (max-width: @screen-xs-max) { - margin: @margin-xxl 0px; - } - } - - &.fat-footer { - background: @white; - color: @neutral-90; - - a { - color: @neutral-90; - } - - .footer-section-heading { - color: @neutral-90; - } - - h2 { - font-weight: 400; - } - - .fat-footer-base { - color: @neutral-90; - } - - // This is duplication of fill colours in the SVGs themselves. This could be avoided 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: @navbar-brand-image-url-website-redesign; - } - - @media (max-width: @screen-xs-max) { - .fat-footer-sections { - grid-template-columns: repeat(1, 1fr); - grid-template-rows: repeat(6, auto); - } - } -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss b/services/web/frontend/stylesheets/components/footer.scss similarity index 98% rename from services/web/frontend/stylesheets/bootstrap-5/components/footer.scss rename to services/web/frontend/stylesheets/components/footer.scss index 48e4a25261..0dc943dc91 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss +++ b/services/web/frontend/stylesheets/components/footer.scss @@ -163,7 +163,7 @@ footer.site-footer { display: block; height: 37px; width: 130px; - background-image: url('../../../../public/img/ol-brand/overleaf-white.svg'); + background-image: url('../../../public/img/ol-brand/overleaf-white.svg'); background-size: contain; background-repeat: no-repeat; background-position: left center; @@ -457,7 +457,7 @@ footer.site-footer { } .footer-brand { - background-image: url('../../../../public/img/ol-brand/overleaf-black.svg'); + background-image: url('../../../public/img/ol-brand/overleaf-black.svg'); } @include footer-container-down(sm) { diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss b/services/web/frontend/stylesheets/components/form.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/form.scss rename to services/web/frontend/stylesheets/components/form.scss diff --git a/services/web/frontend/stylesheets/components/forms.less b/services/web/frontend/stylesheets/components/forms.less deleted file mode 100755 index e4d1acd20d..0000000000 --- a/services/web/frontend/stylesheets/components/forms.less +++ /dev/null @@ -1,501 +0,0 @@ -// -// Forms -// -------------------------------------------------- - -// Normalize non-controls -// -// Restyle and baseline non-control form elements. - -fieldset { - padding: 0; - margin: 0; - border: 0; - // Chrome and Firefox set a `min-width: -webkit-min-content;` on fieldsets, - // so we reset that to ensure it behaves more like a standard block element. - // See https://github.com/twbs/bootstrap/issues/12359. - min-width: 0; -} - -legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: @line-height-computed; - font-size: (@font-size-base * 1.5); - line-height: inherit; - color: @legend-color; - border: 0; - border-bottom: 1px solid @legend-border-color; -} - -label { - display: inline-block; - margin-bottom: 5px; - font-weight: bold; - - // also update .legend-as-label if changes are made to label -} - -.legend-as-label { - // display a legend like a label - &:extend(label); - font-size: @font-size-base; - color: @text-color; - border: 0; - margin-bottom: 0; - line-height: @line-height-01; -} - -// Normalize form controls -// -// While most of our form styles require extra classes, some basic normalization -// is required to ensure optimum display with or without those classes to better -// address browser inconsistencies. - -// Override content-box in Normalize (* isn't specific enough) -input[type='search'] { - .box-sizing(border-box); -} - -// Position radios and checkboxes better -input[type='radio'], -input[type='checkbox'] { - margin: 4px 0 0; - margin-top: 1px \9; /* IE8-9 */ - line-height: normal; -} - -// Set the height of file controls to match text inputs -input[type='file'] { - display: block; -} - -// Make range inputs behave like textual form controls -input[type='range'] { - display: block; - width: 100%; -} - -// Make multiple select elements height not fixed -select[multiple], -select[size] { - height: auto; -} - -// Focus for file, radio, and checkbox -input[type='file']:focus, -input[type='radio']:focus, -input[type='checkbox']:focus { - .tab-focus(); -} - -// Adjust output element -output { - display: block; - padding-top: (@padding-base-vertical + 1); - font-size: @font-size-base; - line-height: @line-height-base; - color: @input-color; -} - -// Common form controls -// -// Shared size and type resets for form controls. Apply `.form-control` to any -// of the following form controls: -// -// select -// textarea -// input[type="text"] -// input[type="password"] -// input[type="datetime"] -// input[type="datetime-local"] -// input[type="date"] -// input[type="month"] -// input[type="time"] -// input[type="week"] -// input[type="number"] -// input[type="email"] -// input[type="url"] -// input[type="search"] -// input[type="tel"] -// input[type="color"] - -.form-control { - display: block; - width: 100%; - height: @input-height-base; - padding: @padding-base-vertical @input-padding; - font-size: @font-size-base; - line-height: @line-height-base; - color: @input-color; - background-color: @input-bg; - border: @input-border-size solid @input-border; - border-radius: @input-border-radius; - .transition(~'border-color ease-in-out .15s, box-shadow ease-in-out .15s'); - - // Customize the `:focus` state to imitate native WebKit styles. - .form-control-focus(); - - // Placeholder - .placeholder(); - - // Disabled and read-only inputs - // - // HTML5 says that controls under a fieldset > legend:first-child won't be - // disabled if the fieldset is disabled. Due to implementation difficulty, we - // don't honor that edge case; we style them as disabled anyway. - &[disabled], - &[readonly], - fieldset[disabled] & { - cursor: not-allowed; - background-color: @input-bg-disabled; - border-color: @input-bg-disabled; - opacity: 1; // iOS fix for unreadable disabled content - .placeholder(@neutral-40); - } - - // Reset height for `textarea`s, and smaller border-radius - textarea& { - height: auto; - border-radius: @border-radius-base; - } - - // Smaller border-radius for `select` inputs - select& { - border-radius: @border-radius-base; - } -} - -// Search inputs in iOS -// -// This overrides the extra rounded corners on search inputs in iOS so that our -// `.form-control` class can properly style them. Note that this cannot simply -// be added to `.form-control` as it's not specific enough. For details, see -// https://github.com/twbs/bootstrap/issues/11586. - -input[type='search'] { - -webkit-appearance: none; -} - -// Special styles for iOS date input -// -// In Mobile Safari, date inputs require a pixel line-height that matches the -// given height of the input. - -input[type='date'] { - line-height: @input-height-base; -} - -// Form groups -// -// Designed to help with the organization and spacing of vertical forms. For -// horizontal forms, use the predefined grid classes. -@form-group-margin-bottom: 15px; -.form-group { - margin-bottom: @form-group-margin-bottom; -} - -// Checkboxes and radios -// -// Indent the labels to position radios/checkboxes as hanging controls. - -.radio, -.checkbox { - display: block; - min-height: @line-height-computed; // clear the floating input if there is no label text - margin-top: 10px; - margin-bottom: 10px; - padding-left: 20px; - label { - display: inline; - font-weight: normal; - cursor: pointer; - } -} -.fake-disabled-checkbox { - opacity: 0.5; -} -.radio input[type='radio'], -.radio-inline input[type='radio'], -.checkbox input[type='checkbox'], -.checkbox-inline input[type='checkbox'] { - float: left; - margin-left: -20px; -} -.radio + .radio, -.checkbox + .checkbox { - margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing -} - -// Radios and checkboxes on same line -.radio-inline, -.checkbox-inline { - display: inline-block; - padding-left: 20px; - margin-bottom: 0; - vertical-align: middle; - font-weight: normal; - cursor: pointer; -} -.radio-inline + .radio-inline, -.checkbox-inline + .checkbox-inline { - margin-top: 0; - margin-left: 10px; // space out consecutive inline controls -} - -// Apply same disabled cursor tweak as for inputs -// -// Note: Neither radios nor checkboxes can be readonly. -input[type='radio'], -input[type='checkbox'], -.radio, -.radio-inline, -.checkbox, -.checkbox-inline { - &[disabled], - fieldset[disabled] & { - cursor: not-allowed; - } -} - -// Form control sizing -// -// Build on `.form-control` with modifier classes to decrease or increase the -// height and font-size of form controls. - -.input-sm { - .input-size( - @input-height-small; @padding-small-vertical; @padding-small-horizontal; - @font-size-small; @line-height-small; @border-radius-small - ); -} - -.input-lg { - .input-size( - @input-height-large; @padding-large-vertical; @padding-large-horizontal; - @font-size-large; @line-height-large; @border-radius-large - ); -} - -// Form control feedback states -// -// Apply contextual and semantic states to individual form controls. - -.has-feedback { - // Enable absolute positioning - position: relative; - - // Feedback icon (requires .glyphicon classes) - .form-control-feedback { - position: absolute; - top: (@line-height-computed + 5); // Height of the `label` and its margin - right: 0; - display: block; - width: @input-height-base; - height: @input-height-base; - line-height: @input-height-base; - text-align: center; - } - - // Position the feedback inside the input element when there's no label - &.hidden-label .form-control-feedback { - margin-top: -(@line-height-computed + 5); - } -} - -.has-feedback-left { - position: relative; - .form-control { - padding-left: @input-height-base; - } - .form-control-feedback-left { - position: absolute; - top: (@line-height-computed + 5); // Height of the `label` and its margin - left: 0; - display: block; - width: @input-height-base; - height: @input-height-base; - line-height: @input-height-base; - text-align: center; - } -} - -// Feedback states -.has-success { - .form-control-validation(@brand-success); -} -.has-warning { - .form-control-validation(@brand-warning); -} -.has-error { - .form-control-validation(@brand-danger); -} - -.form-control.ng-dirty.ng-invalid:not(:focus), -.form-control[data-ol-dirty]:invalid:not(:focus) { - border-color: @state-danger-text; - .box-shadow( - inset 0 1px 1px rgba(0, 0, 0, 0.075) - ); // Redeclare so transitions work - &:focus { - border-color: darken(@state-danger-text, 10%); - @shadow: - inset 0 1px 1px rgba(0, 0, 0, 0.075), - 0 0 6px lighten(@state-danger-text, 20%); - .box-shadow(@shadow); - } -} - -// Static form control text -// -// Apply class to a `p` element to make any string of text align with labels in -// a horizontal form layout. - -.form-control-static { - margin-bottom: 0; // Remove default margin from `p` -} - -// Help text -// -// Apply to any element you wish to create light text for placement immediately -// below a form control. Use for general help, formatting, or instructional text. - -.help-block { - display: block; // account for any element using help-block - margin-top: 5px; - margin-bottom: 10px; - color: lighten(@text-color, 25%); // lighten the text some for contrast - - // Hide help blocks used as validation messages by default - &.invalid-only { - display: none; - - .has-error & { - display: block; - } - } -} - -// Inline forms -// -// Make forms appear inline(-block) by adding the `.form-inline` class. Inline -// forms begin stacked on extra small (mobile) devices and then go inline when -// viewports reach <768px. -// -// Requires wrapping inputs and labels with `.form-group` for proper display of -// default HTML form controls and our custom form controls (e.g., input groups). -// -// Heads up! This is mixin-ed into `.navbar-form` in navbars.less. - -.form-inline { - // Kick in the inline - @media (min-width: @screen-sm-min) { - // Inline-block all the things for "inline" - .form-group { - display: inline-block; - margin-bottom: 0; - vertical-align: middle; - } - - // In navbar-form, allow folks to *not* use `.form-group` - .form-control { - display: inline-block; - width: auto; // Prevent labels from stacking above inputs in `.form-group` - vertical-align: middle; - } - // Input groups need that 100% width though - .input-group > .form-control { - width: 100%; - } - - .control-label { - margin-bottom: 0; - vertical-align: middle; - } - - // Remove default margin on radios/checkboxes that were used for stacking, and - // then undo the floating of radios and checkboxes to match (which also avoids - // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). - .radio, - .checkbox { - display: inline-block; - margin-top: 0; - margin-bottom: 0; - padding-left: 0; - vertical-align: middle; - } - .radio input[type='radio'], - .checkbox input[type='checkbox'] { - float: none; - margin-left: 0; - } - - // Validation states - // - // Reposition the icon because it's now within a grid column and columns have - // `position: relative;` on them. Also accounts for the grid gutter padding. - .has-feedback .form-control-feedback { - top: 0; - } - } -} - -// Horizontal forms -// -// Horizontal forms are built on grid classes and allow you to create forms with -// labels on the left and inputs on the right. - -.form-horizontal { - // Consistent vertical alignment of labels, radios, and checkboxes - .control-label, - .radio, - .checkbox, - .radio-inline, - .checkbox-inline { - margin-top: 0; - margin-bottom: 0; - padding-top: (@padding-base-vertical + 1); // Default padding plus a border - } - // Account for padding we're adding to ensure the alignment and of help text - // and other content below items - .radio, - .checkbox { - min-height: (@line-height-computed + (@padding-base-vertical + 1)); - } - - // Make form groups behave like rows - .form-group { - .make-row(); - } - - .form-control-static { - padding-top: (@padding-base-vertical + 1); - } - - // Only right align form labels here when the columns stop stacking - @media (min-width: @screen-sm-min) { - .control-label { - text-align: right; - } - } - - // Validation states - // - // Reposition the icon because it's now within a grid column and columns have - // `position: relative;` on them. Also accounts for the grid gutter padding. - .has-feedback .form-control-feedback { - top: 0; - right: (@grid-gutter-width / 2); - } - .has-feedback-left .form-control-feedback-left { - top: 0; - left: (@grid-gutter-width / 2); - } -} - -.invalid-feedback { - display: flex; - align-items: baseline; - font-size: @font-size-small; - .text-emphasis-variant(@state-danger-text); -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss b/services/web/frontend/stylesheets/components/gallery-search.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss rename to services/web/frontend/stylesheets/components/gallery-search.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/group-members.scss b/services/web/frontend/stylesheets/components/group-members.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/group-members.scss rename to services/web/frontend/stylesheets/components/group-members.scss diff --git a/services/web/frontend/stylesheets/components/hover.less b/services/web/frontend/stylesheets/components/hover.less deleted file mode 100644 index ac1e5934c6..0000000000 --- a/services/web/frontend/stylesheets/components/hover.less +++ /dev/null @@ -1,11 +0,0 @@ -.hover-container { - .show-on-hover { - display: none; - } - - &:hover { - .show-on-hover { - display: initial; - } - } -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/icon.scss b/services/web/frontend/stylesheets/components/icon.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/icon.scss rename to services/web/frontend/stylesheets/components/icon.scss diff --git a/services/web/frontend/stylesheets/components/icons.less b/services/web/frontend/stylesheets/components/icons.less deleted file mode 100644 index 46102ca402..0000000000 --- a/services/web/frontend/stylesheets/components/icons.less +++ /dev/null @@ -1,38 +0,0 @@ -// Colors -.icon-accent { - color: @accent-color-secondary!important; -} - -.icon-lg { - font-size: 32px !important; - width: 32px !important; - height: 32px !important; -} - -.icon-md { - font-size: 24px !important; - width: 24px !important; - height: 24px !important; -} - -.icon-sm { - font-size: 20px !important; - width: 20px !important; - height: 20px !important; -} - -.icon-xs { - font-size: 16px !important; - width: 16px !important; - height: 16px !important; -} - -.icon-round-background { - border-radius: 50%; -} - -.icon-green-round-background { - .icon-round-background; - background: var(--green-30); - color: var(--dark-jungle-green); -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/image.scss b/services/web/frontend/stylesheets/components/image.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/image.scss rename to services/web/frontend/stylesheets/components/image.scss diff --git a/services/web/frontend/stylesheets/components/images.less b/services/web/frontend/stylesheets/components/images.less deleted file mode 100644 index b462aacbfe..0000000000 --- a/services/web/frontend/stylesheets/components/images.less +++ /dev/null @@ -1,17 +0,0 @@ -.circle-img { - border-radius: 50%; - float: left; - // float: right; - height: 100px; - overflow: hidden; - position: relative; - max-width: 100px; - img { - display: inline; - margin: 0 auto; - width: 100%; - } -} -.blockquote-with-img { - margin-left: 115px; -} diff --git a/services/web/frontend/stylesheets/components/infinite-scroll.less b/services/web/frontend/stylesheets/components/infinite-scroll.less deleted file mode 100644 index 688f8a466d..0000000000 --- a/services/web/frontend/stylesheets/components/infinite-scroll.less +++ /dev/null @@ -1,3 +0,0 @@ -.infinite-scroll { - overflow-y: auto; -} diff --git a/services/web/frontend/stylesheets/components/input-groups.less b/services/web/frontend/stylesheets/components/input-groups.less deleted file mode 100755 index fdbe2ec602..0000000000 --- a/services/web/frontend/stylesheets/components/input-groups.less +++ /dev/null @@ -1,165 +0,0 @@ -// -// Input groups -// -------------------------------------------------- - -// Base styles -// ------------------------- -.input-group { - position: relative; // For dropdowns - display: table; - border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table - - // Undo padding and float of grid classes - &[class*='col-'] { - float: none; - padding-left: 0; - padding-right: 0; - } - - .form-control { - // Ensure that the input is always above the *appended* addon button for - // proper border colors. - position: relative; - z-index: 2; - - // IE9 fubars the placeholder attribute in text inputs and the arrows on - // select elements in input groups. To fix it, we float the input. Details: - // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 - float: left; - - width: 100%; - margin-bottom: 0; - } -} - -// Sizing options -// -// Remix the default form control sizing classes into new ones for easier -// manipulation. - -.input-group-lg > .form-control, -.input-group-lg > .input-group-addon, -.input-group-lg > .input-group-btn > .btn { - .input-lg(); -} -.input-group-sm > .form-control, -.input-group-sm > .input-group-addon, -.input-group-sm > .input-group-btn > .btn { - .input-sm(); -} - -// Display as table-cell -// ------------------------- -.input-group-addon, -.input-group-btn, -.input-group .form-control { - display: table-cell; - - &:not(:first-child):not(:last-child) { - border-radius: 0; - } -} -// Addon and addon wrapper for buttons -.input-group-addon, -.input-group-btn { - width: 1%; - white-space: nowrap; - vertical-align: middle; // Match the inputs -} - -// Text input groups -// ------------------------- -.input-group-addon { - padding: @padding-base-vertical @padding-base-horizontal; - font-size: @font-size-base; - font-weight: normal; - line-height: 1; - color: @input-color; - text-align: center; - background-color: @input-group-addon-bg; - border: 1px solid @input-group-addon-border-color; - border-radius: @border-radius-base; - - // Sizing - &.input-sm { - padding: @padding-small-vertical @padding-small-horizontal; - font-size: @font-size-small; - border-radius: @border-radius-small; - } - &.input-lg { - padding: @padding-large-vertical @padding-large-horizontal; - font-size: @font-size-large; - border-radius: @border-radius-large; - } - - // Nuke default margins from checkboxes and radios to vertically center within. - input[type='radio'], - input[type='checkbox'] { - margin-top: 0; - } -} - -// Reset rounded corners -.input-group .form-control:first-child, -.input-group-addon:first-child, -.input-group-btn:first-child > .btn, -.input-group-btn:first-child > .btn-group > .btn, -.input-group-btn:first-child > .dropdown-toggle, -.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), -.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { - .border-right-radius(0); -} -.input-group-addon:first-child { - border-right: 0; -} -.input-group .form-control:last-child, -.input-group-addon:last-child, -.input-group-btn:last-child > .btn, -.input-group-btn:last-child > .btn-group > .btn, -.input-group-btn:last-child > .dropdown-toggle, -.input-group-btn:first-child > .btn:not(:first-child), -.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { - .border-left-radius(0); -} -.input-group-addon:last-child { - border-left: 0; -} - -// Button input groups -// ------------------------- -.input-group-btn { - position: relative; - // Jankily prevent input button groups from wrapping with `white-space` and - // `font-size` in combination with `inline-block` on buttons. - font-size: 0; - white-space: nowrap; - - // Negative margin for spacing, position for bringing hovered/focused/actived - // element above the siblings. - > .btn { - position: relative; - + .btn { - margin-left: -1px; - } - // Bring the "active" button to the front - &:hover, - &:focus, - &:active { - z-index: 2; - } - } - - // Negative margin to only have a 1px border between the two - &:first-child { - > .btn, - > .btn-group { - margin-right: -1px; - } - } - &:last-child { - > .btn, - > .btn-group { - margin-left: -1px; - } - } -} diff --git a/services/web/frontend/stylesheets/components/input-suggestions.less b/services/web/frontend/stylesheets/components/input-suggestions.less deleted file mode 100644 index 7043e36e78..0000000000 --- a/services/web/frontend/stylesheets/components/input-suggestions.less +++ /dev/null @@ -1,14 +0,0 @@ -.input-suggestions { - position: relative; -} - -.input-suggestions-main { - position: absolute; - top: 0; - background-color: transparent; -} - -.input-suggestions-shadow { - background-color: @input-bg !important; - color: lighten(@input-color, 25%); -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/input-suggestions.scss b/services/web/frontend/stylesheets/components/input-suggestions.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/input-suggestions.scss rename to services/web/frontend/stylesheets/components/input-suggestions.scss diff --git a/services/web/frontend/stylesheets/components/input-switch.less b/services/web/frontend/stylesheets/components/input-switch.less deleted file mode 100644 index b7c29e70fe..0000000000 --- a/services/web/frontend/stylesheets/components/input-switch.less +++ /dev/null @@ -1,56 +0,0 @@ -.input-switch { - display: inline-block; - padding-left: 5px; -} -.input-switch-hidden-input { - display: none; - - + .input-switch-btn { - display: block; - width: 34px; - height: 20px; - position: relative; - outline: 0; - margin: 0; - font-weight: normal; - cursor: pointer; - user-select: none; - padding: 1px; - background-color: @rp-highlight-blue; - border-radius: 0.875em; - transition: - background 0.15s ease, - border-color 0.15s ease; - - &::before { - content: ''; - display: block; - width: 16px; - height: 16px; - position: relative; - left: 1px; - top: 1px; - background-color: #fff; - border-radius: 0.875em; - transition: - background-color 0.15s ease, - color 0.15s ease, - left 0.15s ease; - } - } - - &:checked + .input-switch-btn { - background-color: @ol-green; - border-color: #fff; - - &::before { - left: 15px; - top: 1px; - } - } - - &:disabled + .input-switch-btn { - cursor: default; - opacity: 0.35; - } -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/integrations-panel.scss b/services/web/frontend/stylesheets/components/integrations-panel.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/integrations-panel.scss rename to services/web/frontend/stylesheets/components/integrations-panel.scss diff --git a/services/web/frontend/stylesheets/components/interstitial.less b/services/web/frontend/stylesheets/components/interstitial.less deleted file mode 100644 index 1d83751e1c..0000000000 --- a/services/web/frontend/stylesheets/components/interstitial.less +++ /dev/null @@ -1,23 +0,0 @@ -.interstitial { - max-width: 400px; - padding: 24px; - margin: 0 auto; - background: @white; - display: flex; - flex-direction: column; - - .logo { - width: 130px; - margin: 0 auto; - margin-bottom: 24px; - } - - .btn { - width: 100%; - } - - .interstitial-header { - margin-top: 0; - margin-bottom: 4px; - } -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/interstitial.scss b/services/web/frontend/stylesheets/components/interstitial.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/interstitial.scss rename to services/web/frontend/stylesheets/components/interstitial.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/invite.scss b/services/web/frontend/stylesheets/components/invite.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/invite.scss rename to services/web/frontend/stylesheets/components/invite.scss diff --git a/services/web/frontend/stylesheets/components/labels.less b/services/web/frontend/stylesheets/components/labels.less deleted file mode 100755 index 299a8df1b1..0000000000 --- a/services/web/frontend/stylesheets/components/labels.less +++ /dev/null @@ -1,91 +0,0 @@ -// -// Labels -// -------------------------------------------------- - -.label { - display: inline; - padding: 0.2em 0.6em 0.3em; - font-size: @labels-font-size; - font-weight: bold; - line-height: 1; - color: @label-color; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: 0.25em; - - // Add hover effects, but only for links - &[href] { - &:hover, - &:focus { - color: @label-link-hover-color; - text-decoration: none; - cursor: pointer; - } - } - - // Empty labels collapse automatically (not available in IE8) - &:empty { - display: none; - } - - // Quick fix for labels in buttons - .btn & { - position: relative; - top: -1px; - } -} - -.label { - padding: 0.3em 0.6em; - display: inline-flex; - align-items: center; - max-width: 100%; -} - -// Colors -// Contextual variations (linked labels get darker on :hover) - -.label-default { - .label-variant(@label-default-bg); -} - -.label-primary { - .label-variant(@label-primary-bg); -} - -.label-success { - .label-variant(@label-success-bg); -} - -.label-info { - .label-variant(@label-info-bg); -} - -.label-warning { - .label-variant(@label-warning-bg); -} - -.label-danger { - .label-variant(@label-danger-bg); -} - -.label-text { - color: @ol-type-color; - font-size: 100%; -} - -.label-premium { - background-color: @neutral-20; - background-image: url('../../../public/img/material-icons/star-gradient.svg'); - background-repeat: no-repeat; - background-position: 2px 2px; - border-radius: 4px; - color: @neutral-90; - display: inline-block; - font-size: 12px; - font-family: @font-family-sans-serif; - margin-left: 10px; - padding: 4px 4px 4px 20px; - vertical-align: middle; -} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/link.scss b/services/web/frontend/stylesheets/components/link.scss similarity index 100% rename from services/web/frontend/stylesheets/bootstrap-5/components/link.scss rename to services/web/frontend/stylesheets/components/link.scss diff --git a/services/web/frontend/stylesheets/components/list-group.less b/services/web/frontend/stylesheets/components/list-group.less deleted file mode 100755 index 9420d22965..0000000000 --- a/services/web/frontend/stylesheets/components/list-group.less +++ /dev/null @@ -1,97 +0,0 @@ -// -// List groups -// -------------------------------------------------- - -// Base class -// -// Easily usable on