Remove LESS stylesheets and dependencies (#27409)

* Remove components, core and modules LESS stylesheets

* Remove variables LESS stylesheets

* Remove app LESS stylesheets

* Remove github-sync, onboarding LESS stylesheets

* Remove main-light and IEEE LESS stylesheets

* Remove Less loader configuration

* Remove bootstrap-3 entrypoint

* Rename bootstrap-5 entrypoint to bootstrap

* Remove bootstrap-5 CSS folder and move stylesheets

* Update CSS variables

* Restore and update github-sync.scss path

* Fix try-premium.scss path and fix undefined mixin error

* Restore entrypoints

* Simplify buildCssPath to always use main-style.css

* Remove less from prettier formatting scripts

* Remove less from addHook extension

* Source format

* Remove nvd3 file reference from prettierignore (equivalent of nvd3.scss)

* Remove less and less-loader

* Add SCSS files to pirates require hook

GitOrigin-RevId: bd83c79f4d6ef7305d75993959a4dc5e7714ef9c

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",

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

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)

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`
         ),
       }
     },

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()

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'

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<typeof Tooltip>) {
   return <Tooltip {...props} />

services/web/frontend/stylesheets/app/about-page.less

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

services/web/frontend/stylesheets/app/about.less

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

services/web/frontend/stylesheets/app/add-secondary-email-prompt.less

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

services/web/frontend/stylesheets/app/base.less

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

services/web/frontend/stylesheets/app/beta-program.less

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

services/web/frontend/stylesheets/app/blog-posts.less

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

services/web/frontend/stylesheets/app/blog.less

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

services/web/frontend/stylesheets/app/bonus.less

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

services/web/frontend/stylesheets/app/change-plan-modal.less

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

services/web/frontend/stylesheets/app/cms-page.less

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

services/web/frontend/stylesheets/app/confirm-email.less

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

services/web/frontend/stylesheets/app/contact-us.less

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

services/web/frontend/stylesheets/app/content_page.less

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

services/web/frontend/stylesheets/app/editor.less

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

services/web/frontend/stylesheets/app/editor/chat.less

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

services/web/frontend/stylesheets/app/editor/compile-button.less

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

services/web/frontend/stylesheets/app/editor/dictionary.less

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

services/web/frontend/stylesheets/app/editor/error-boundary.less

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

services/web/frontend/stylesheets/app/editor/figure-modal.less

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

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

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

services/web/frontend/stylesheets/app/editor/file-view.less

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

services/web/frontend/stylesheets/app/editor/history-react.less

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

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

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

services/web/frontend/stylesheets/app/editor/history.less

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

services/web/frontend/stylesheets/app/editor/hotkeys.less

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

services/web/frontend/stylesheets/app/editor/ide-react.less

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

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

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

services/web/frontend/stylesheets/app/editor/logs.less

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

services/web/frontend/stylesheets/app/editor/math-preview.less

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

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

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

services/web/frontend/stylesheets/app/editor/outline.less

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

services/web/frontend/stylesheets/app/editor/pdf.less

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

services/web/frontend/stylesheets/app/editor/publish-modal.less

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

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

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

services/web/frontend/stylesheets/app/editor/review-panel-new.less

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

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

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

services/web/frontend/stylesheets/app/editor/search.less

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

services/web/frontend/stylesheets/app/editor/share.less

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

services/web/frontend/stylesheets/app/editor/table-generator-column-width-modal.less

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

services/web/frontend/stylesheets/app/editor/toast.less

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

services/web/frontend/stylesheets/app/editor/toolbar.less

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

services/web/frontend/stylesheets/app/error-pages.less

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

services/web/frontend/stylesheets/app/features.less

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

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

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

services/web/frontend/stylesheets/app/grammarly.less

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

services/web/frontend/stylesheets/app/group-subscription-modal.less

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

services/web/frontend/stylesheets/app/import.less

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

services/web/frontend/stylesheets/app/invite.less

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

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

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

services/web/frontend/stylesheets/app/login-register.less

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

services/web/frontend/stylesheets/app/ol-chat.less

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

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

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

services/web/frontend/stylesheets/app/open-in-overleaf.less

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

services/web/frontend/stylesheets/app/portals.less

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

services/web/frontend/stylesheets/app/project-list-react.less

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

services/web/frontend/stylesheets/app/project-list.less

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

services/web/frontend/stylesheets/app/recurly.less

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

services/web/frontend/stylesheets/app/sprites.less

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

services/web/frontend/stylesheets/app/subscription.less

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

services/web/frontend/stylesheets/app/templates-v2.less

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

services/web/frontend/stylesheets/app/templates.less

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

services/web/frontend/stylesheets/app/translations.less

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

services/web/frontend/stylesheets/app/wiki.less

@@ -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;
-    }
-  }
-
-  /*<![CDATA[*/
-  .source-latex {
-    line-height: normal;
-  }
-  .source-latex li,
-  .source-latex pre {
-    line-height: normal;
-    border: 0px none white;
-  }
-  /**
-	 * GeSHi Dynamically Generated Stylesheet
-	 * --------------------------------------
-	 * Dynamically generated stylesheet for latex
-	 * CSS class: source-latex, CSS id:
-	 * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann
-	 * (http://qbnz.com/highlighter/ and http://geshi.org/)
-	 * --------------------------------------
-	 */
-  .latex.source-latex .imp {
-    font-weight: bold;
-    color: red;
-  }
-  .latex.source-latex li,
-  .latex.source-latex .li1 {
-    font-weight: normal;
-    vertical-align: top;
-  }
-  .latex.source-latex .ln {
-    width: 1px;
-    text-align: right;
-    margin: 0;
-    padding: 0 2px;
-    vertical-align: top;
-  }
-  .latex.source-latex .li2 {
-    font-weight: bold;
-    vertical-align: top;
-  }
-  .latex.source-latex .kw1 {
-    color: #800000;
-  }
-  .latex.source-latex .co1 {
-    color: #2c922c;
-    font-style: italic;
-  }
-  .latex.source-latex .es0 {
-    color: #000000;
-    font-weight: bold;
-  }
-  .latex.source-latex .sy0 {
-    color: #e02020;
-  }
-  .latex.source-latex .st0 {
-    color: #000000;
-  }
-  .latex.source-latex .re1 {
-    color: #8020e0;
-    font-weight: normal;
-  }
-  .latex.source-latex .re2 {
-    color: #c08020;
-    font-weight: normal;
-  }
-  .latex.source-latex .re3 {
-    color: #8020e0;
-    font-weight: normal;
-  }
-  .latex.source-latex .re4 {
-    color: #800000;
-    font-weight: normal;
-  }
-  .latex.source-latex .re5 {
-    color: #00008b;
-    font-weight: bold;
-  }
-  .latex.source-latex .re6 {
-    color: #800000;
-    font-weight: normal;
-  }
-  .latex.source-latex .re7 {
-    color: #0000d0;
-    font-weight: normal;
-  }
-  .latex.source-latex .re8 {
-    color: #c00000;
-    font-weight: normal;
-  }
-  .latex.source-latex .re9 {
-    color: #2020c0;
-    font-weight: normal;
-  }
-  .latex.source-latex .re10 {
-    color: #800000;
-    font-weight: normal;
-  }
-  .latex.source-latex .re11 {
-    color: #e00000;
-    font-weight: normal;
-  }
-  .latex.source-latex .re12 {
-    color: #800000;
-    font-weight: normal;
-  }
-  .latex.source-latex .ln-xtra,
-  .latex.source-latex li.ln-xtra,
-  .latex.source-latex div.ln-xtra {
-    background-color: #ffc;
-  }
-  .latex.source-latex span.xtra {
-    display: block;
-  }
-
-  /*]]>*/
-
-  a.search-result {
-    display: block;
-    margin-top: @line-height-computed / 2;
-    .search-result-content {
-      margin-top: @line-height-computed / 4;
-      white-space: pre-wrap;
-      font-size: 0.8em;
-      color: @gray-dark;
-      em {
-        font-weight: bold;
-      }
-    }
-
-    &:hover,
-    &:active,
-    &:focus {
-      text-decoration: none;
-      .search-result-content {
-        color: @gray-darker;
-      }
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
-    }
-  }
-
-  /* Keep the below rules in sync with the wiki pages */
-  img {
-    height: auto;
-    max-width: 100%;
-  }
-
-  img.add-vertical-space {
-    padding-bottom: 20px;
-    padding-top: 20px;
-  }
-
-  th.no-wrap {
-    white-space: nowrap;
-    text-align: left;
-  }
-
-  /* LATEX and TEX artwork */
-  span.TEX {
-    letter-spacing: -0.125em;
-    padding-right: 0.5ex;
-  }
-  span.TEX span.E {
-    position: relative;
-    top: 0.5ex;
-    padding-right: 0.1ex;
-  }
-  a span.TEX span.E {
-    text-decoration: none;
-  }
-  span.LATEX span.A {
-    position: relative;
-    top: -0.5ex;
-    left: -0.4em;
-    font-size: 75%;
-  }
-  span.LATEX span.TEX {
-    position: relative;
-    left: -0.4em;
-    margin-right: -0.5ex;
-  }
-}

services/web/frontend/stylesheets/bootstrap-5/base/typography.scss → 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 {

services/web/frontend/stylesheets/components/accordion.less

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

services/web/frontend/stylesheets/components/alerts.less

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

services/web/frontend/stylesheets/components/badge.less

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

services/web/frontend/stylesheets/components/beta-badges.less

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

services/web/frontend/stylesheets/components/button-groups.less

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

services/web/frontend/stylesheets/components/buttons.less

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

services/web/frontend/stylesheets/components/card.less

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

services/web/frontend/stylesheets/bootstrap-5/components/card.scss → 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;