From 36bd334693ee1fbaaaa05c1da5e06017e946f607 Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Sun, 26 Jan 2025 09:00:08 +0000
Subject: [PATCH 01/14] Remove .less files

---
 .../frontend/shared/styles/main.less          | 101 ------------------
 .../plugins/formulas/style.less               |  66 ------------
 .../plugins/image-upload/style.less           |  82 --------------
 3 files changed, 249 deletions(-)
 delete mode 100644 contentcuration/contentcuration/frontend/shared/styles/main.less
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.less
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.less

diff --git a/contentcuration/contentcuration/frontend/shared/styles/main.less b/contentcuration/contentcuration/frontend/shared/styles/main.less
deleted file mode 100644
index 50000d3755..0000000000
--- a/contentcuration/contentcuration/frontend/shared/styles/main.less
+++ /dev/null
@@ -1,101 +0,0 @@
-@import '~material-icons/iconfont/material-icons.css';
-
-@font-face {
-  font-family: 'Noto Sans';
-  src: url('../fonts/NotoSans-Regular.ttf') format('truetype');
-}
-
-html {
-  overflow-y: auto !important;
-
-  .title,
-  .headline,
-  .display,
-  .display-1,
-  .subheading,
-  .v-toolbar__title,
-  .v-chip__content {
-    font-family: 'Noto Sans' !important;
-  }
-
-  .v-btn--flat,
-  .v-tabs__item {
-    font-weight: bold;
-    cursor: pointer;
-  }
-
-  .text-truncate {
-    line-height: unset !important;
-  }
-}
-
-body {
-  font-family: 'Noto Sans', Verdana, sans-serif;
-  letter-spacing: 0.03em;
-  /* stylelint-disable-next-line custom-property-pattern */
-  background-color: var(--v-backgroundColor-base);
-
-  * {
-    font-family: 'Noto Sans';
-  }
-
-  .v-card {
-    outline-color: #8dc5b6;
-  }
-
-  .v-tooltip__content {
-    max-width: 200px;
-    text-align: center;
-  }
-
-  .button:focus-visible,
-  .v-btn:focus-visible {
-    outline: 2px solid var(--v-secondary-base) !important;
-  }
-}
-
-/* RTL-related rules */
-
-/*! rtl:begin:ignore */
-[dir='rtl'] {
-  .v-label {
-    transform-origin: top right;
-  }
-
-  .grid-item div {
-    text-align: right;
-  }
-
-  .rtl-flip {
-    transform: scaleX(-1);
-  }
-
-  .v-speed-dial--left {
-    right: auto;
-    left: 16px;
-  }
-
-  .v-input {
-    text-align: right;
-  }
-}
-
-/*! rtl:end:ignore */
-
-// Overriding default Vuetify theme
-.theme--light {
-  .v-sheet,
-  .v-card,
-  .v-list__tile,
-  &.application {
-    color: var(--v-text-base);
-  }
-
-  // Removes a weird default Vuetify style
-  // applying background color to links
-  // Due to name collisions with tokens
-  .text,
-  .link {
-    background-color: transparent !important;
-  }
-}
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.less b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.less
deleted file mode 100644
index fe30f853dd..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.less
+++ /dev/null
@@ -1,66 +0,0 @@
-@import '../../mathquill/mathquill.css';
-
-.uploading {
-  cursor: progress;
-}
-
-.formulas-menu,
-.images-menu {
-  z-index: 2;
-}
-
-.wrapper {
-  border: 4px solid transparent;
-
-  &.highlight {
-    border-color: var(--v-primary-base);
-  }
-}
-
-.mq-math-mode {
-  padding: 4px 4px 2px 0;
-  margin: 4px;
-  font-family: Symbola;
-  color: #333333;
-  cursor: pointer;
-}
-
-.editing .mq-math-mode {
-  background-color: #f9f2f4;
-  border-radius: 4px;
-  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
-    0 1px 3px 0 rgba(0, 0, 0, 0.12);
-}
-
-// TODO (when updating to new frontend files structure)
-// find better location for following styles that
-// are supposed to be common to all editable fields
-.mq-editable-field {
-  border: 0;
-
-  .mq-to,
-  .mq-from,
-  .mq-sup,
-  .mq-sup-inner,
-  .mq-sub,
-  .mq-numerator,
-  .mq-denominator {
-    padding-right: 1px;
-    padding-left: 1px;
-    border: 1px solid gray;
-  }
-
-  .mq-int .mq-sup {
-    border: 0;
-  }
-}
-
-.math-field * {
-  line-height: 1 !important;
-  white-space: nowrap !important;
-}
-
-:host {
-  margin-right: -0.2em !important;
-  margin-left: -0.2em !important;
-}
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.less b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.less
deleted file mode 100644
index 11392b3ec7..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.less
+++ /dev/null
@@ -1,82 +0,0 @@
-@import '~vuetify/dist/vuetify.min.css';
-// stylelint-disable scss/at-import-partial-extension
-@import '~shared/styles/main.less';
-// stylelint-enable
-
-@resizer-size: 16px;
-
-img {
-  max-width: 100%;
-  height: auto;
-  /* stylelint-disable-next-line custom-property-pattern */
-  border: 1px solid var(--v-greyBorder-base);
-  object-fit: cover;
-}
-
-.dragging {
-  img {
-    pointer-events: none;
-    user-select: none;
-  }
-}
-
-.resizing {
-  user-select: none;
-
-  * {
-    user-select: none;
-  }
-
-  img {
-    border: 2px solid var(--v-grey-darken4);
-  }
-}
-
-.resizer {
-  position: absolute;
-  right: -@resizer-size / 2;
-  bottom: 2px;
-  width: @resizer-size;
-  height: @resizer-size;
-  cursor: se-resize;
-  user-select: none;
-  background-color: white;
-  border: 2px solid var(--v-grey-darken4);
-  border-radius: @resizer-size;
-}
-
-.edit-options {
-  top: 4px;
-  right: 4px;
-  user-select: none;
-  /* stylelint-disable-next-line custom-property-pattern */
-  background-color: var(--v-backgroundColor--base);
-  opacity: 0;
-
-  // TUI will automatically move cursor inside button,
-  // so don't allow clicking on elements inside the button
-  /deep/ * {
-    pointer-events: none;
-  }
-
-  /deep/ .v-btn__content {
-    height: min-content;
-  }
-
-  i {
-    font-style: normal;
-  }
-}
-
-.image-field {
-  position: relative;
-  display: inline-block;
-  width: max-content;
-  max-width: 95%;
-  vertical-align: middle;
-
-  &:hover:not(.resizing) .edit-options,
-  .edit-options:focus {
-    opacity: 1;
-  }
-}

From a1eb10dc1b51a37c442a533be77bb6e6b343736e Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Sun, 26 Jan 2025 09:01:25 +0000
Subject: [PATCH 02/14] Convert to scss files and refactor imports

---
 .../contentcuration/frontend/shared/app.js    |   2 +-
 .../frontend/shared/styles/main.scss          | 100 ++++++++++++++++++
 .../plugins/formulas/MarkdownFormulaField.vue |   2 +-
 .../plugins/formulas/style.scss               |  68 ++++++++++++
 .../image-upload/MarkdownImageField.vue       |   2 +-
 .../plugins/image-upload/style.scss           |  80 ++++++++++++++
 6 files changed, 251 insertions(+), 3 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/shared/styles/main.scss
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.scss
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss

diff --git a/contentcuration/contentcuration/frontend/shared/app.js b/contentcuration/contentcuration/frontend/shared/app.js
index d650a1d061..89c6467872 100644
--- a/contentcuration/contentcuration/frontend/shared/app.js
+++ b/contentcuration/contentcuration/frontend/shared/app.js
@@ -118,7 +118,7 @@ import { theme, icons } from 'shared/vuetify';
 import { i18nSetup } from 'shared/i18n';
 
 import './styles/vuetify.scss';
-import 'shared/styles/main.less';
+import 'shared/styles/main.scss';
 import Base from 'shared/Base.vue';
 import urls from 'shared/urls';
 import ActionLink from 'shared/views/ActionLink';
diff --git a/contentcuration/contentcuration/frontend/shared/styles/main.scss b/contentcuration/contentcuration/frontend/shared/styles/main.scss
new file mode 100644
index 0000000000..e13fd99350
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/styles/main.scss
@@ -0,0 +1,100 @@
+@import '~material-icons/iconfont/material-icons.css';
+
+@font-face {
+  font-family: 'Noto Sans';
+  src: url('../fonts/NotoSans-Regular.ttf') format('truetype');
+}
+
+html {
+  overflow-y: auto !important;
+
+  .title,
+  .headline,
+  .display,
+  .display-1,
+  .subheading,
+  .v-toolbar__title,
+  .v-chip__content {
+    font-family: 'Noto Sans' !important;
+  }
+
+  .v-btn--flat,
+  .v-tabs__item {
+    font-weight: bold;
+    cursor: pointer;
+  }
+
+  .text-truncate {
+    line-height: unset !important;
+  }
+}
+
+body {
+  font-family: 'Noto Sans', Verdana, sans-serif;
+  letter-spacing: 0.03em;
+  // stylelint-disable-next-line custom-property-pattern
+  background-color: var(--v-backgroundColor-base);
+
+  * {
+    font-family: 'Noto Sans';
+  }
+
+  .v-card {
+    outline-color: #8dc5b6;
+  }
+
+  .v-tooltip__content {
+    max-width: 200px;
+    text-align: center;
+  }
+
+  .button:focus-visible,
+  .v-btn:focus-visible {
+    outline: 2px solid var(--v-secondary-base) !important;
+  }
+}
+
+// RTL-related rules
+
+/*! rtl:begin:ignore */
+[dir='rtl'] {
+  .v-label {
+    transform-origin: top right;
+  }
+
+  .grid-item div {
+    text-align: right;
+  }
+
+  .rtl-flip {
+    transform: scaleX(-1);
+  }
+
+  .v-speed-dial--left {
+    right: auto;
+    left: 16px;
+  }
+
+  .v-input {
+    text-align: right;
+  }
+}
+/*! rtl:end:ignore */
+
+// Overriding default Vuetify theme
+.theme--light {
+  .v-sheet,
+  .v-card,
+  .v-list__tile,
+  &.application {
+    color: var(--v-text-base);
+  }
+
+  // Removes a weird default Vuetify style
+  // applying background color to links
+  // Due to name collisions with tokens
+  .text,
+  .link {
+    background-color: transparent !important;
+  }
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue
index bb0624fcec..100ac05945 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue
@@ -13,7 +13,7 @@
 
   // vue-custom-element can't use SFC styles, so we load our styles directly,
   // to be passed in when we register this component as a custom element
-  import css from '!css-loader!less-loader!./style.less';
+  import css from '!css-loader!sass-loader!./style.scss';
 
   const MarkdownFormulaField = {
     name: 'MarkdownFormulaField',
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.scss b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.scss
new file mode 100644
index 0000000000..d0048fa84a
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.scss
@@ -0,0 +1,68 @@
+@import '../../mathquill/mathquill.css';
+
+.uploading {
+  cursor: progress;
+}
+
+.formulas-menu,
+.images-menu {
+  z-index: 2;
+}
+
+.wrapper {
+  border: 4px solid transparent;
+
+  &.highlight {
+    border-color: var(--v-primary-base);
+  }
+}
+
+.mq-math-mode {
+  padding: 4px 4px 2px 0;
+  margin: 4px;
+  font-family: Symbola;
+  color: #333333;
+  cursor: pointer;
+}
+
+.editing .mq-math-mode {
+  background-color: #f9f2f4;
+  border-radius: 4px;
+  box-shadow: 
+    0 2px 1px -1px rgba(0, 0, 0, 0.2), 
+    0 1px 1px 0 rgba(0, 0, 0, 0.14),
+    0 1px 3px 0 rgba(0, 0, 0, 0.12);
+}
+
+// TODO (when updating to new frontend files structure)
+// find better location for following styles that
+// are supposed to be common to all editable fields
+.mq-editable-field {
+  border: 0;
+
+  .mq-to,
+  .mq-from,
+  .mq-sup,
+  .mq-sup-inner,
+  .mq-sub,
+  .mq-numerator,
+  .mq-denominator {
+    padding-right: 1px;
+    padding-left: 1px;
+    border: 1px solid gray;
+  }
+
+  .mq-int .mq-sup {
+    border: 0;
+  }
+}
+
+.math-field * {
+  line-height: 1 !important;
+  white-space: nowrap !important;
+}
+
+:host {
+  margin-right: -0.2em !important;
+  margin-left: -0.2em !important;
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
index 096531cbe8..4045653126 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
@@ -64,7 +64,7 @@
 
   // vue-custom-element can't use SFC styles, so we load our styles directly,
   // to be passed in when we register this component as a custom element
-  import css from '!css-loader!less-loader!./style.less';
+  import css from '!css-loader!sass-loader!./style.scss';
 
   const MarkdownImageField = {
     name: 'MarkdownImageField',
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss
new file mode 100644
index 0000000000..9cea4ca8c3
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss
@@ -0,0 +1,80 @@
+@import '~vuetify/dist/vuetify.min.css';
+// stylelint-disable scss/at-import-partial-extension
+
+$resizer-size: 16px;
+
+img {
+  max-width: 100%;
+  height: auto;
+  /* stylelint-disable-next-line custom-property-pattern */
+  border: 1px solid var(--v-greyBorder-base);
+  object-fit: cover;
+}
+
+.dragging {
+  img {
+    pointer-events: none;
+    user-select: none;
+  }
+}
+
+.resizing {
+  user-select: none;
+
+  * {
+    user-select: none;
+  }
+
+  img {
+    border: 2px solid var(--v-grey-darken4);
+  }
+}
+
+.resizer {
+  position: absolute;
+  right: calc(-#{$resizer-size} / 2);
+  bottom: 2px;
+  width: $resizer-size;
+  height: $resizer-size;
+  cursor: se-resize;
+  user-select: none;
+  background-color: white;
+  border: 2px solid var(--v-grey-darken4);
+  border-radius: $resizer-size;
+}
+
+.edit-options {
+  top: 4px;
+  right: 4px;
+  user-select: none;
+  /* stylelint-disable-next-line custom-property-pattern */
+  background-color: var(--v-backgroundColor--base);
+  opacity: 0;
+
+  // TUI will automatically move cursor inside button,
+  // so don't allow clicking on elements inside the button
+  ::v-deep * {
+    pointer-events: none;
+  }
+
+  ::v-deep .v-btn__content {
+    height: min-content;
+  }
+
+  i {
+    font-style: normal;
+  }
+}
+
+.image-field {
+  position: relative;
+  display: inline-block;
+  width: max-content;
+  max-width: 95%;
+  vertical-align: middle;
+
+  &:hover:not(.resizing) .edit-options,
+  .edit-options:focus {
+    opacity: 1;
+  }
+}

From 42a071084748c042ba37a2b60961e373002d13f8 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Mon, 27 Jan 2025 21:01:47 +0000
Subject: [PATCH 03/14] [pre-commit.ci lite] apply automatic fixes

---
 .../contentcuration/frontend/shared/styles/main.scss          | 1 +
 .../shared/views/MarkdownEditor/plugins/formulas/style.scss   | 4 +---
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/styles/main.scss b/contentcuration/contentcuration/frontend/shared/styles/main.scss
index e13fd99350..777a8b3668 100644
--- a/contentcuration/contentcuration/frontend/shared/styles/main.scss
+++ b/contentcuration/contentcuration/frontend/shared/styles/main.scss
@@ -79,6 +79,7 @@ body {
     text-align: right;
   }
 }
+
 /*! rtl:end:ignore */
 
 // Overriding default Vuetify theme
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.scss b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.scss
index d0048fa84a..fe30f853dd 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.scss
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.scss
@@ -28,9 +28,7 @@
 .editing .mq-math-mode {
   background-color: #f9f2f4;
   border-radius: 4px;
-  box-shadow: 
-    0 2px 1px -1px rgba(0, 0, 0, 0.2), 
-    0 1px 1px 0 rgba(0, 0, 0, 0.14),
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
     0 1px 3px 0 rgba(0, 0, 0, 0.12);
 }
 

From d2574e000ab2cf00fd40dd1140d5e6549960749e Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Tue, 28 Jan 2025 21:55:49 +0000
Subject: [PATCH 04/14] Remove usage of `::v-deep`

---
 .../views/MarkdownEditor/plugins/image-upload/style.scss      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss
index 9cea4ca8c3..1c7a80af79 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss
@@ -53,11 +53,11 @@ img {
 
   // TUI will automatically move cursor inside button,
   // so don't allow clicking on elements inside the button
-  ::v-deep * {
+  * {
     pointer-events: none;
   }
 
-  ::v-deep .v-btn__content {
+  .v-btn__content {
     height: min-content;
   }
 

From 6891b6f9a72e0e85f38e703893d88adc835ca395 Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Sat, 1 Feb 2025 17:59:30 +0000
Subject: [PATCH 05/14] Migrate from less to scss

---
 .../frontend/accounts/pages/Create.vue        | 14 ++++++-------
 .../frontend/accounts/pages/Main.vue          | 20 +++++++++++--------
 .../RequestNewActivationLink.vue              |  2 +-
 .../pages/resetPassword/ForgotPassword.vue    |  2 +-
 .../pages/resetPassword/ResetPassword.vue     |  2 +-
 5 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Create.vue b/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
index e4e28d6d08..68929ef55c 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
@@ -562,15 +562,13 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-text-field {
     margin-top: 8px !important;
   }
 
-  .policy-checkbox /deep/ .v-input__slot {
-    margin-bottom: 4px !important;
-
+  .policy-checkbox {
     label {
       color: var(--v-grey-darken1) !important;
     }
@@ -593,11 +591,11 @@
   .span-spacing {
     display: flex;
     margin-left: 40px;
-  }
 
-  .span-spacing span {
-    margin-left: 2px;
-    font-size: 16px;
+    .span{
+      margin-left: 2px;
+      font-size: 16px;
+    }
   }
 
   .span-spacing-email {
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
index 6f305885e3..0867315f8b 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
@@ -206,20 +206,24 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .main {
     overflow: auto;
-    /* stylelint-disable-next-line custom-property-pattern */
+    // stylelint-disable-next-line custom-property-pattern
     background-color: var(--v-backgroundColor-base);
   }
 
-  .links span:not(:last-child)::after {
-    margin: 0 8px 0 12px;
-    font-size: 14pt;
-    color: var(--v-grey-base);
-    vertical-align: middle;
-    content: '•';
+  .links {
+    span {
+      &:not(:last-child)::after {
+        margin: 0 8px 0 12px;
+        font-size: 14pt;
+        color: var(--v-grey-base);
+        vertical-align: middle;
+        content: '•';
+      }
+    }
   }
 
   .w-100 {
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
index afb06cdaca..a03aa51146 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
@@ -68,7 +68,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .w-100 {
     width: 100%;
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
index 7349cf97ff..de49330d84 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
@@ -69,7 +69,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .w-100 {
     width: 100%;
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
index 65e69270c9..ebd60495b8 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
@@ -93,7 +93,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .w-100 {
     width: 100%;

From 8cc8e57eb7a83a8d467b3e253f5177f7208e57ef Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Wed, 5 Feb 2025 15:42:22 +0000
Subject: [PATCH 06/14] [pre-commit.ci lite] apply automatic fixes

---
 .../contentcuration/frontend/accounts/pages/Create.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Create.vue b/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
index 68929ef55c..8c4aa90ad2 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
@@ -592,7 +592,7 @@
     display: flex;
     margin-left: 40px;
 
-    .span{
+    .span {
       margin-left: 2px;
       font-size: 16px;
     }

From 7afffb47a193946480df48915091fc798a88ffec Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Mon, 10 Feb 2025 04:07:39 +0000
Subject: [PATCH 07/14] Migrate from less to scss

---
 .../components/ClipboardChip.vue              | 11 +--
 .../components/ConfirmationDialog.vue         |  2 +-
 .../pages/Channels/ChannelActionsDropdown.vue |  2 +-
 .../pages/Users/UserActionsDropdown.vue       |  2 +-
 .../pages/Users/UserDetails.vue               |  2 +-
 .../administration/pages/Users/UserTable.vue  |  2 +-
 .../components/HintsEditor/HintsEditor.vue    |  2 +-
 .../components/NodeTreeNavigation.vue         |  2 +-
 .../RelatedResourcesTab.vue                   |  2 +-
 .../channelEdit/components/ResourceDrawer.vue |  2 +-
 .../channelEdit/components/edit/EditList.vue  |  2 +-
 .../channelEdit/components/edit/EditView.vue  |  2 +-
 .../edit/InheritAncestorMetadataModal.vue     |  2 +-
 .../components/edit/SavingIndicator.vue       |  2 +-
 .../components/move/NewTopicModal.vue         |  2 +-
 .../pages/StagingTreePage/index.vue           |  2 +-
 .../channelEdit/views/ChannelEditAppError.vue |  2 +-
 .../views/ImportFromChannels/BrowsingCard.vue |  2 +-
 .../ImportFromChannels/ChannelInfoCard.vue    |  2 +-
 .../ImportFromChannels/ContentNodeChip.vue    |  2 +-
 .../ImportFromChannelsModal.vue               |  2 +-
 .../ImportFromChannels/SavedSearchesModal.vue |  2 +-
 .../ImportFromChannels/SearchResultsList.vue  |  2 +-
 .../frontend/channelEdit/views/NodePanel.vue  |  2 +-
 .../views/TreeView/TreeViewBase.vue           |  2 +-
 .../channelEdit/views/files/FilePreview.vue   |  2 +-
 .../supplementaryLists/SupplementaryItem.vue  |  2 +-
 .../channelEdit/views/template/Template.vue   |  2 +-
 .../views/Channel/CatalogFilterBar.vue        |  2 +-
 .../channelList/views/Channel/CatalogList.vue |  2 +-
 .../channelList/views/Channel/ChannelList.vue |  2 +-
 .../channelList/views/Channel/ChannelStar.vue |  2 +-
 .../channelList/views/ChannelListIndex.vue    |  2 +-
 .../views/ChannelSet/ChannelItem.vue          |  2 +-
 .../views/ChannelSet/ChannelSelectionList.vue |  2 +-
 .../views/ChannelSet/ChannelSetItem.vue       |  2 +-
 .../views/ChannelSet/ChannelSetModal.vue      |  2 +-
 .../frontend/shared/views/Formula.vue         |  2 +-
 .../frontend/shared/views/LoadingText.vue     |  2 +-
 .../shared/views/MainNavigationDrawer.vue     |  2 +-
 .../FormulasMenu/FormulasMenu.vue             |  2 +-
 .../MarkdownEditor/ImagesMenu/ImagesMenu.vue  | 89 ++++++++++---------
 .../MarkdownViewer/MarkdownViewer.vue         |  2 +-
 .../plugins/formulas/MarkdownFormulaField.vue |  4 +-
 .../frontend/shared/views/Menu.vue            |  2 +-
 .../frontend/shared/views/PageContainer.vue   |  2 +-
 .../frontend/shared/views/Tabs.vue            |  6 +-
 .../frontend/shared/views/VIconWrapper.vue    |  2 +-
 .../shared/views/VisibilityDropdown.vue       |  2 +-
 .../views/channel/ChannelCatalogFrontPage.vue |  2 +-
 .../views/channel/ChannelCatalogPrint.vue     |  2 +-
 .../views/channel/ChannelDetailsModal.vue     |  2 +-
 .../views/channel/ChannelTokenModal.vue       |  2 +-
 .../contentNodeFields/CategoryOptions.vue     |  2 +-
 .../views/contentNodeFields/LevelsOptions.vue |  2 +-
 .../shared/views/draggable/DraggableItem.vue  |  2 +-
 .../views/draggable/DraggablePlaceholder.vue  |  2 +-
 .../views/errors/ChannelDeletedError.vue      |  2 +-
 .../views/errors/ChannelNotFoundError.vue     |  2 +-
 .../shared/views/errors/GenericError.vue      |  2 +-
 .../shared/views/errors/PermissionsError.vue  |  2 +-
 .../shared/views/errors/ReportErrorModal.vue  |  2 +-
 .../shared/views/files/FileDropzone.vue       |  2 +-
 .../shared/views/files/FileStorage.vue        |  2 +-
 .../frontend/shared/views/files/Uploader.vue  |  2 +-
 .../shared/views/form/ContentDefaults.vue     |  2 +-
 .../frontend/shared/views/form/EmailField.vue |  2 +-
 .../frontend/shared/views/form/TextField.vue  |  2 +-
 68 files changed, 120 insertions(+), 118 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue b/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
index c3cba7907a..02bbd301f7 100644
--- a/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
+++ b/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
@@ -55,8 +55,7 @@
 
 </script>
 
-
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   div {
     white-space: nowrap;
@@ -68,9 +67,11 @@
     text-overflow: ellipsis;
   }
 
-  .VBtn:hover::before,
-  .VBtn:focus::before {
-    background-color: transparent;
+  .VBtn {
+    &:hover::before,
+    &:focus::before {
+      background-color: transparent;
+    }
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue b/contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue
index ca87915d68..ee5023d180 100644
--- a/contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue
+++ b/contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue
@@ -62,5 +62,5 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
index 7a871a42a5..ea030b9d5d 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
@@ -225,5 +225,5 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
index 3331542803..2f6967c644 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
@@ -168,5 +168,5 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
index fbe0c4bf46..0cfe28208f 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
@@ -400,7 +400,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .user-table {
     max-width: 1024px;
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
index ade5ba7dc4..cfb9865eb4 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
@@ -219,6 +219,6 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
index 6decf999b1..1e3dba9add 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
@@ -295,7 +295,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .card-border-light {
     /* stylelint-disable-next-line custom-property-pattern */
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/NodeTreeNavigation.vue b/contentcuration/contentcuration/frontend/channelEdit/components/NodeTreeNavigation.vue
index 0d006b4382..70b9f56e59 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/NodeTreeNavigation.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/NodeTreeNavigation.vue
@@ -144,7 +144,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .breadcrumbs-item.primary--text {
     text-decoration: underline;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue b/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue
index ec8217996d..a0d06b17a0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue
@@ -231,7 +231,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .title {
     display: inline-flex;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourceDrawer.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourceDrawer.vue
index 3b9acbfdbf..b2d6b7daee 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourceDrawer.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourceDrawer.vue
@@ -81,6 +81,6 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditList.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditList.vue
index a18b45000d..8b41200a3f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditList.vue
@@ -98,7 +98,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-divider {
     margin-top: 0;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
index a4dce1e337..4a1866f769 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
@@ -335,7 +335,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .tabs {
     position: sticky;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/InheritAncestorMetadataModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/InheritAncestorMetadataModal.vue
index 333d3f0eab..8545d9a9ea 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/InheritAncestorMetadataModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/InheritAncestorMetadataModal.vue
@@ -321,7 +321,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .divider {
     margin: 16px 0;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue
index 0638969eda..f091276838 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue
@@ -103,6 +103,6 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/move/NewTopicModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/move/NewTopicModal.vue
index cf701fd03d..3879541975 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/move/NewTopicModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/move/NewTopicModal.vue
@@ -83,5 +83,5 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
index 5b58af9e62..e81e5e70d6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
@@ -571,7 +571,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .main-content {
     height: calc(100vh - 176px);
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ChannelEditAppError.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ChannelEditAppError.vue
index bfe5e490ca..b8515d7901 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ChannelEditAppError.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ChannelEditAppError.vue
@@ -85,4 +85,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue
index d5c1105995..4e55199191 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue
@@ -193,7 +193,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .thumbnail-column {
     flex-basis: 33%;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelInfoCard.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelInfoCard.vue
index 4eceb4c85f..c87b4e32d3 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelInfoCard.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelInfoCard.vue
@@ -85,7 +85,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .show-more-btn {
     margin-left: -7px;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ContentNodeChip.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ContentNodeChip.vue
index e0fefabf13..871b73bbfd 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ContentNodeChip.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ContentNodeChip.vue
@@ -48,4 +48,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
index e085b6fe7d..cf44d06f05 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
@@ -274,7 +274,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .modal-container.fluid {
     max-width: 1200px;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
index fd4ef86a77..f0704ff9ef 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
@@ -168,7 +168,7 @@
 
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 
   .metadata {
     color: var(--v-grey-darken2);
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
index 1135991555..6a303cc17f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
@@ -239,4 +239,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/NodePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/views/NodePanel.vue
index 814ae683d9..0c25fe1315 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/NodePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/NodePanel.vue
@@ -202,7 +202,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .node-list {
     width: 100%;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 0f8ba07b3c..26d869ecc1 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -535,7 +535,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-speed-dial {
     position: absolute;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FilePreview.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FilePreview.vue
index e1e07a0ef0..aebbcbe668 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FilePreview.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FilePreview.vue
@@ -174,7 +174,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .preview-area {
     outline: none;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryItem.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryItem.vue
index 1cf53fcc5b..38a354b68b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryItem.vue
@@ -134,7 +134,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-icon {
     font-size: 14pt;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/template/Template.vue b/contentcuration/contentcuration/frontend/channelEdit/views/template/Template.vue
index d46512bfa1..df42913b2b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/template/Template.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/template/Template.vue
@@ -23,6 +23,6 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterBar.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterBar.vue
index 6fb71d6b64..dc6bdbd80c 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterBar.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterBar.vue
@@ -115,7 +115,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   h3,
   p {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index 57a52467a8..d7e5120170 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -271,7 +271,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .list-wrapper {
     max-width: 1080px;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue
index b77bb06e79..0d7bf6dfa2 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue
@@ -142,7 +142,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .add-channel-button {
     margin: 0;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue
index affb0ba054..81afddd5c8 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue
@@ -67,6 +67,6 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 4dee071859..af387cc79a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -267,7 +267,7 @@
 </script>
 
 
-<style lang="less">
+<style lang="scss">
 
   html {
     overflow-y: auto !important;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelItem.vue
index 22a3eaeb57..f7ab82e8a0 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelItem.vue
@@ -60,7 +60,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .card-header {
     font-size: 18px;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
index d6b5b39198..b360540c36 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
@@ -132,7 +132,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .add-channel-button {
     margin: 0;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
index 8ff3679eee..bc1e6d44ea 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
@@ -123,7 +123,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   td {
     font-size: 12pt !important;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
index c5607ff011..c95a942855 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
@@ -421,6 +421,6 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/Formula.vue b/contentcuration/contentcuration/frontend/shared/views/Formula.vue
index fb8780ee42..769eb0a60f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Formula.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Formula.vue
@@ -66,7 +66,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .formula {
     font-family: Symbola;
diff --git a/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue b/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue
index 070c1a22a0..eed885c30d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue
@@ -35,7 +35,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .loading-text {
     top: 0;
diff --git a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
index 5b6c6b2c53..14afcc519f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
@@ -210,6 +210,6 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/FormulasMenu.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/FormulasMenu.vue
index 9499dcd4e0..b7d86147ec 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/FormulasMenu.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/FormulasMenu.vue
@@ -179,7 +179,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .formulas-menu {
     position: relative;
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
index 48e1324d46..c1a8acd328 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
@@ -235,56 +235,57 @@
 
 <style lang="less" scoped>
 
-  .images-menu {
-    position: relative;
-    z-index: 1;
-    max-width: 500px;
-    // to make positioning from a parent element easier - this
-    // makes sure that the tip of the anchor will be considered
-    // as top right/left corner
-    margin-top: 16px;
-    margin-right: -30px;
-    margin-left: -30px;
-  }
-
-  .anchor-arrow {
-    position: absolute;
-    top: -40px;
-    left: 10px;
-    z-index: 3;
-    width: 40px;
-    height: 40px;
-    overflow: hidden;
+.images-menu {
+  position: relative;
+  z-index: 1;
+  max-width: 500px;
+  // to make positioning from a parent element easier - this
+  // makes sure that the tip of the anchor will be considered
+  // as top right/left corner
+  margin-top: 16px;
+  margin-right: -30px;
+  margin-left: -30px;
+}
 
-    &::after {
-      position: absolute;
-      top: 28px;
-      right: 0;
-      left: 6px;
-      width: 25px;
-      height: 25px;
-      content: '';
-      background: #ffffff;
-      box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.3);
-      transform: rotate(45deg);
-    }
+.anchor-arrow {
+  position: absolute;
+  top: -40px;
+  left: 10px;
+  z-index: 3;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
 
-    &.anchor-arrow-right {
-      right: 10px;
-      left: initial;
-    }
+  &::after {
+    position: absolute;
+    top: 28px;
+    right: 0;
+    left: 6px;
+    width: 25px;
+    height: 25px;
+    content: '';
+    background: #ffffff;
+    box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.3);
+    transform: rotate(45deg);
   }
 
-  .v-card__text {
-    position: relative;
+  &.anchor-arrow-right {
+    right: 10px;
+    left: initial;
   }
+}
 
-  .upload-area {
-    border: 1px solid var(--v-grey-lighten4) !important;
-  }
+.v-card__text {
+  position: relative;
+}
+
+.upload-area {
+  border: 1px solid var(--v-grey-lighten4) !important;
+}
+
+.image-preview {
+  max-width: 100%;
+}
 
-  .image-preview {
-    max-width: 100%;
-  }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue
index 2769e88cd5..63b0b6470e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue
@@ -77,7 +77,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .markdown-viewer {
     max-width: calc(100% - 2em);
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue
index 100ac05945..a6f9e7021a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue
@@ -58,8 +58,8 @@
 <style>
 /*
   Warning: custom elements don't currently have a way of using SFC styles.
-  Instead, add your style changes to `./style.less`
+  Instead, add your style changes to `./style.scss`
 
-  Additionally, all child component styles must be included in `./style.less`
+  Additionally, all child component styles must be included in `./style.scss`
 */
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/Menu.vue b/contentcuration/contentcuration/frontend/shared/views/Menu.vue
index 6b433ed8c8..c86b06d164 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Menu.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Menu.vue
@@ -33,6 +33,6 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/PageContainer.vue b/contentcuration/contentcuration/frontend/shared/views/PageContainer.vue
index 72604063e8..94e8dfdba3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/PageContainer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/PageContainer.vue
@@ -17,7 +17,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .page-container {
     padding: 32px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/Tabs.vue b/contentcuration/contentcuration/frontend/shared/views/Tabs.vue
index 74de43f029..1678384eca 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Tabs.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Tabs.vue
@@ -109,9 +109,9 @@
 
 </script>
 
-<style lang="less">
+<style lang="scss">
 
-  /*! rtl:begin:ignore */
+  /* rtl:begin:ignore */
   [dir='rtl'] {
     .v-tabs__icon--prev {
       right: auto;
@@ -119,6 +119,6 @@
     }
   }
 
-  /*! rtl:end:ignore */
+  /* rtl:end:ignore */
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/VIconWrapper.vue b/contentcuration/contentcuration/frontend/shared/views/VIconWrapper.vue
index adcffb8ef3..366c8a4932 100644
--- a/contentcuration/contentcuration/frontend/shared/views/VIconWrapper.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/VIconWrapper.vue
@@ -34,7 +34,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   // A workaround for this issue:
   // https://github.com/vuetifyjs/vuetify/issues/3462
diff --git a/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue
index 5486c444f9..521d830a35 100644
--- a/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue
@@ -124,7 +124,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-icon {
     margin-left: 5px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogFrontPage.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogFrontPage.vue
index 74a145f260..3c4569f606 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogFrontPage.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogFrontPage.vue
@@ -118,7 +118,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .container {
     min-width: 50%;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogPrint.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogPrint.vue
index 119c916f19..065e719654 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogPrint.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogPrint.vue
@@ -115,7 +115,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .underlay {
     position: fixed;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
index 017fe11f12..33488a443a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
@@ -170,7 +170,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-toolbar__title {
     font-weight: bold;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelTokenModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelTokenModal.vue
index 8cfb53b294..1d45290cb9 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelTokenModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelTokenModal.vue
@@ -56,6 +56,6 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
index f6170a8b9a..30bd844a67 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
@@ -272,7 +272,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .parentOption:not(:first-child) {
     border-top: 1px solid rgba(0, 0, 0, 0.12);
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
index e300b281a0..6d4d1fb90c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
@@ -84,6 +84,6 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableItem.vue b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableItem.vue
index 17f0abe8d7..4050723e39 100644
--- a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableItem.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableItem.vue
@@ -9,5 +9,5 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggablePlaceholder.vue b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggablePlaceholder.vue
index da091e485c..8dbfbf3085 100644
--- a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggablePlaceholder.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggablePlaceholder.vue
@@ -43,7 +43,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .drag-placeholder {
     position: absolute;
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/ChannelDeletedError.vue b/contentcuration/contentcuration/frontend/shared/views/errors/ChannelDeletedError.vue
index a853ddea3f..e317726c3c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/ChannelDeletedError.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/ChannelDeletedError.vue
@@ -43,4 +43,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/ChannelNotFoundError.vue b/contentcuration/contentcuration/frontend/shared/views/errors/ChannelNotFoundError.vue
index 3852510005..b6115d20ac 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/ChannelNotFoundError.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/ChannelNotFoundError.vue
@@ -43,4 +43,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/GenericError.vue b/contentcuration/contentcuration/frontend/shared/views/errors/GenericError.vue
index d76af80b6e..57e6c8e0dc 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/GenericError.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/GenericError.vue
@@ -80,4 +80,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/PermissionsError.vue b/contentcuration/contentcuration/frontend/shared/views/errors/PermissionsError.vue
index 1dbde60a97..52df9da589 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/PermissionsError.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/PermissionsError.vue
@@ -44,4 +44,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/ReportErrorModal.vue b/contentcuration/contentcuration/frontend/shared/views/errors/ReportErrorModal.vue
index b82e1024a2..b117bfb910 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/ReportErrorModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/ReportErrorModal.vue
@@ -96,7 +96,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .error-detail-modal {
     text-align: left;
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/FileDropzone.vue b/contentcuration/contentcuration/frontend/shared/views/files/FileDropzone.vue
index 112330e69f..869a823965 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/FileDropzone.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/FileDropzone.vue
@@ -70,7 +70,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/FileStorage.vue b/contentcuration/contentcuration/frontend/shared/views/files/FileStorage.vue
index 61e1e8c37e..17c968a335 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/FileStorage.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/FileStorage.vue
@@ -102,7 +102,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-icon {
     margin-right: 5px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
index e70f6305e2..a3d312a0ab 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
@@ -256,7 +256,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .storage-alert {
     font-size: 12pt;
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/ContentDefaults.vue b/contentcuration/contentcuration/frontend/shared/views/form/ContentDefaults.vue
index f5fcd9a8cf..3eb309e5ee 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/ContentDefaults.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/ContentDefaults.vue
@@ -244,7 +244,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .content-defaults {
     border: 0;
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/EmailField.vue b/contentcuration/contentcuration/frontend/shared/views/form/EmailField.vue
index ad28d0b91e..762b6ae094 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/EmailField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/EmailField.vue
@@ -63,7 +63,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .form-section {
     font-size: 14px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/TextField.vue b/contentcuration/contentcuration/frontend/shared/views/form/TextField.vue
index 0c00c75649..e37bb543d3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/TextField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/TextField.vue
@@ -67,6 +67,6 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>

From b543a789d64df18b2de6975e198b6d2f6024cc22 Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Tue, 11 Feb 2025 18:25:18 +0000
Subject: [PATCH 08/14] Migrate from less to scss

---
 .stylelintrc.js                               | 10 +++++++-
 .../pages/Users/EmailUsersDialog.vue          |  4 ++--
 .../components/AddRelatedResourcesModal.vue   |  4 ++--
 .../AnswersEditor/AnswersEditor.vue           | 18 +++++++-------
 .../AssessmentEditor/AssessmentEditor.vue     |  2 +-
 .../AssessmentItemEditor.vue                  |  2 +-
 .../AssessmentItemPreview.vue                 |  8 +++----
 .../components/AssessmentItemToolbar.vue      |  2 +-
 .../components/Clipboard/Channel.vue          | 11 +++++----
 .../components/Clipboard/ContentNode.vue      | 14 +++++------
 .../components/Clipboard/index.vue            | 14 +++++------
 .../components/ContentNodeEditListItem.vue    |  4 ++--
 .../components/ContentNodeListItem/index.vue  | 18 +++++++-------
 .../components/edit/EditListItem.vue          |  4 ++--
 .../ImportFromChannels/SearchFilters.vue      |  2 +-
 .../channelEdit/views/files/FileUpload.vue    |  6 ++---
 .../views/files/FileUploadDefault.vue         |  4 ++--
 .../channelEdit/views/trash/TrashModal.vue    |  2 +-
 .../frontend/settings/pages/Storage/index.vue | 10 ++++----
 .../frontend/shared/views/ActionLink.vue      |  2 +-
 .../frontend/shared/views/Banner.vue          |  2 +-
 .../frontend/shared/views/BottomBar.vue       |  2 +-
 .../views/ContentNodeLearningActivityIcon.vue |  2 +-
 .../frontend/shared/views/InfoModal.vue       |  4 ++--
 .../frontend/shared/views/LazyListGroup.vue   | 18 +++++++-------
 .../views/draggable/DraggableCollection.vue   |  2 +-
 .../views/draggable/DraggableHandle.vue       |  2 +-
 .../views/draggable/DraggableRegion.vue       |  2 +-
 .../frontend/shared/views/errors/AppError.vue |  2 +-
 .../shared/views/errors/PageNotFoundError.vue |  2 +-
 .../shared/views/files/FileStatus.vue         |  2 +-
 .../frontend/shared/views/files/Thumbnail.vue | 24 +++++++++----------
 .../shared/views/form/CountryField.vue        |  4 ++--
 .../shared/views/form/MultiSelect.vue         |  6 ++---
 .../shared/views/form/PasswordField.vue       |  2 +-
 .../frontend/shared/views/form/TextArea.vue   |  2 +-
 36 files changed, 112 insertions(+), 107 deletions(-)

diff --git a/.stylelintrc.js b/.stylelintrc.js
index 6ac1911a5a..b7b5451a5e 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -10,6 +10,14 @@ module.exports = {
     'selector-max-id': null, // This would require a major refactor
     'at-rule-no-unknown': null, // we're using LESS
     'scss/at-rule-no-unknown': null, // we're using LESS
-    'csstree/validator': null // this triggers issues with unknown at rules too.
+    'csstree/validator': null, // this triggers issues with unknown at rules too.
+    'selector-pseudo-class-no-unknown': [ 
+     true,
+     {
+         // In Vue 2.6 and later, `::v-deep` is used for deep selectors.  
+         // This rule allows `::v-deep` to prevent linting errors.
+         ignorePseudoClasses: ['v-deep'],
+     }
+    ]
   },
 };
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
index 433ede42c3..3510b8ce30 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
@@ -248,9 +248,9 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-chip__close {
+  ::v-deep(.v-chip__close) {
     padding-top: 4px;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue
index ed87cb859a..cf1a82e6ce 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue
@@ -236,12 +236,12 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .list-item-disabled {
     opacity: 0.5;
 
-    /deep/ .v-list__tile--link:hover {
+    ::v-deep .v-list__tile--link:hover {
       color: inherit;
       background-color: transparent;
     }
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
index aa66b9d5fd..ccc4625f06 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
@@ -425,10 +425,10 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @exercise-answer-correct: #4caf50;
-  @exercise-answer-wrong: #ef5350;
+  $exercise-answer-correct: #4caf50;
+  $exercise-answer-wrong: #ef5350;
 
   .card-border-light {
     /* stylelint-disable-next-line custom-property-pattern */
@@ -448,11 +448,11 @@
     }
 
     &.closed.answer-correct:hover {
-      background-color: fade(@exercise-answer-correct, 15%);
+      background-color: rgba($exercise-answer-correct, 0.15);
     }
 
     &.closed.answer-wrong:hover {
-      background-color: fade(@exercise-answer-wrong, 15%);
+      background-color: rgba($exercise-answer-wrong, 0.15);
     }
 
     .indicator {
@@ -461,11 +461,11 @@
       height: 100%;
 
       &.correct {
-        background-color: @exercise-answer-correct;
+        background-color: $exercise-answer-correct;
       }
 
       &.wrong {
-        background-color: @exercise-answer-wrong;
+        background-color: $exercise-answer-wrong;
       }
     }
   }
@@ -475,8 +475,8 @@
   }
 
   /* Remove the underline on text fields that are not focused */
-  /deep/.no-border.v-text-field > .v-input__control > .v-input__slot::before,
-  /deep/.no-border.v-text-field > .v-input__control > .v-input__slot::after {
+  ::v-deep(.no-border.v-text-field > .v-input__control > .v-input__slot::before),
+  ::v-deep(.no-border.v-text-field > .v-input__control > .v-input__slot::after) {
     border-style: none;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
index 340cca0152..c1cbf4dbea 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
@@ -453,7 +453,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .item {
     position: relative;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
index e9a791369f..aa318fa11c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -420,7 +420,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .question-text {
     transition: 0.7s;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
index e6ed9d2fa9..d9c26524d5 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
@@ -223,7 +223,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .hints-toggle {
     cursor: pointer;
@@ -247,7 +247,7 @@
     /*! rtl:end:ignore */
   }
 
-  /deep/ .v-input--selection-controls {
+  ::v-deep .v-input--selection-controls {
     margin-top: 0;
 
     .accent--text {
@@ -259,7 +259,7 @@
     }
   }
 
-  /deep/ img {
+  ::v-deep img {
     max-width: 100%;
     height: auto;
   }
@@ -268,7 +268,7 @@
     padding: 11px;
   }
 
-  .item-answers-preview /deep/ .checkbox-icon {
+  .item-answers-preview ::v-deep .checkbox-icon {
     top: 8px;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
index 357ac2737f..3996b6cb66 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
@@ -316,7 +316,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .toolbar-item {
     max-width: 50px;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue
index 44e77ed44b..189ad3c4ab 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue
@@ -108,7 +108,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .channel-item {
     background: #ffffff;
@@ -119,12 +119,12 @@
   .channel-tile,
   .v-list__tile__title,
   .v-list__tile__title > h4,
-  /deep/ .channel-tile > .v-list__tile {
+  ::v-deep .channel-tile > .v-list__tile {
     width: 100%;
     max-width: 100%;
   }
 
-  /deep/ .channel-tile > .v-list__tile {
+  ::v-deep .channel-tile > .v-list__tile {
     padding-right: 0;
   }
 
@@ -137,12 +137,13 @@
   }
 
   .text-truncate {
-    /* fix clipping of dangling characters */
+    // Fix clipping of dangling characters
     line-height: 1.3 !important;
   }
 
-  /deep/ .selectedIndeterminate svg {
+  ::v-deep .selectedIndeterminate svg {
     fill: gray !important;
   }
 
 </style>
+
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue
index f0795c04dc..77ba98f670 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue
@@ -244,7 +244,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .content-item,
   .v-list__tile {
@@ -271,11 +271,11 @@
   }
 
   .content-item:hover,
-  /deep/ .content-item > .v-list__tile:hover {
+  ::v-deep .content-item > .v-list__tile:hover {
     background: #eeeeee;
   }
 
-  /deep/ .action-col,
+  ::v-deep .action-col,
   .thumbnail-col {
     flex-shrink: 0;
     min-width: 24px;
@@ -290,21 +290,21 @@
     }
   }
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     padding-left: 11px;
     cursor: pointer;
   }
 
-  /deep/ .v-list__tile__title {
+  ::v-deep .v-list__tile__title {
     height: auto;
   }
 
-  /deep/ .text-truncate {
+  ::v-deep .text-truncate {
     /* fix clipping of dangling characters */
     line-height: 1.3 !important;
   }
 
-  /deep/ .selectedIndeterminate svg {
+  ::v-deep .selectedIndeterminate svg {
     fill: gray !important;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
index 8ddcdc0a53..2b3150e283 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
@@ -419,14 +419,14 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .clipboard {
     position: absolute;
   }
 
   .container,
-  /deep/ .drawer-contents {
+  ::v-deep .drawer-contents {
     max-height: 100vh;
   }
 
@@ -454,7 +454,7 @@
     vertical-align: text-bottom;
   }
 
-  /deep/ .header .v-list__tile {
+  ::v-deep .header .v-list__tile {
     border-left: 5px solid transparent;
   }
 
@@ -474,15 +474,15 @@
     background-color: #f9f9f9;
   }
 
-  /deep/ .v-toolbar__content {
+  ::v-deep .v-toolbar__content {
     padding: 0;
   }
 
-  /deep/ .v-list__group--active::before {
+  ::v-deep .v-list__group--active::before {
     background: none !important;
   }
 
-  /deep/ .channel-item:last-child::after {
+  ::v-deep .channel-item:last-child::after {
     background: rgba(0, 0, 0, 0.12) !important;
   }
 
@@ -494,7 +494,7 @@
     left: 0;
     background-color: rgba(153, 97, 137, 0.2);
     /* stylelint-disable-next-line custom-property-pattern */
-    border: 5px solidvar(--v-draggabledropoverlay-base);
+    border: 5px solid var(--v-draggabledropoverlay-base);
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
index 1e4d0f3c7d..d47852d957 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
@@ -307,7 +307,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .content-node-edit-item {
     position: relative;
@@ -370,7 +370,7 @@
     cursor: grab;
   }
 
-  /deep/ .v-input--selection-controls__input {
+  ::v-deep .v-input--selection-controls__input {
     margin-right: 0;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
index 55e0941d27..23812af296 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -375,10 +375,10 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @thumbnail-width: 16%;
-  @compact-thumbnail-width: ~'20px + 0.5%';
+  $thumbnail-width: 16%;
+  $compact-thumbnail-width: calc(20px + 0.5%);
 
   .content-list-item {
     background: #ffffff;
@@ -427,7 +427,7 @@
     }
   }
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     display: flex;
     flex: 1 1 auto;
     flex-wrap: nowrap;
@@ -463,25 +463,23 @@
 
   .thumbnail-col {
     flex-shrink: 0;
-    width: @thumbnail-width;
+    width: $thumbnail-width;
     min-width: 70px;
     max-width: 160px;
 
     .compact & {
-      // stylelint-disable
-      width: calc(@compact-thumbnail-width);
-      // stylelint-enable
+      width: $compact-thumbnail-width;
       min-width: 20px;
     }
   }
 
   .description-col {
     flex-shrink: 1 !important;
-    width: calc(100% - @thumbnail-width - 206px);
+    width: calc(100% - #{$thumbnail-width} - 206px);
     word-break: break-word;
 
     .compact & {
-      width: calc(100% - @compact-thumbnail-width - 206px);
+      width: calc(100% - #{$compact-thumbnail-width} - 206px);
     }
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue
index 54de65d7ef..63670025ae 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue
@@ -179,7 +179,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-list__tile__action {
     min-width: 30px;
@@ -194,7 +194,7 @@
     display: none;
   }
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     height: max-content !important;
     min-height: 64px;
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue
index 128e990ecb..4190a07ca5 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue
@@ -229,7 +229,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .import-search-filters {
     z-index: 0;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
index 2902d99f56..b624eca24a 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
@@ -179,7 +179,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .preview-wrapper {
     padding-right: 15px;
@@ -200,11 +200,11 @@
   .v-input--radio-group {
     width: 100%;
 
-    /deep/ .v-input__control {
+    ::v-deep .v-input__control {
       width: 100%;
     }
 
-    /deep/ label {
+    ::v-deep label {
       color: var(--v-text-base);
     }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadDefault.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadDefault.vue
index 211e2ea2c9..c53923a909 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadDefault.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadDefault.vue
@@ -87,9 +87,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-card {
+  ::v-deep .v-card {
     position: relative;
     min-height: 50vh;
     margin-top: 20px;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
index e1ba3e3625..ae03346c9d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
@@ -311,7 +311,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .show-more-button-container {
     display: flex;
diff --git a/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue b/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
index d4a0552ddc..ec50bb75aa 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
@@ -139,7 +139,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   h2 {
     margin-top: 32px;
@@ -149,15 +149,15 @@
     padding: 16px 0;
   }
 
-  /deep/.ui-progress-linear {
+  ::v-deep .ui-progress-linear {
     max-width: 75%;
     height: 8px !important;
     margin: 8px 0;
     background: #e9e9e9;
+  }
 
-    /deep/.is-determinate {
-      height: 8px !important;
-    }
+  ::v-deep .ui-progress-linear .is-determinate {
+    height: 8px !important;
   }
 
 </style>
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue b/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue
index 16afe626db..0077f2dc97 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue
@@ -60,7 +60,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-btn {
     min-width: min-content;
diff --git a/contentcuration/contentcuration/frontend/shared/views/Banner.vue b/contentcuration/contentcuration/frontend/shared/views/Banner.vue
index 62dcd05a84..f9a07af658 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Banner.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Banner.vue
@@ -63,7 +63,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-alert {
     border: 0;
diff --git a/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue b/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue
index 03202e099e..339677df53 100644
--- a/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue
@@ -18,7 +18,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .bottom-bar {
     position: fixed;
diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
index 0248338ce4..59823f6efa 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
@@ -102,7 +102,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .chip {
     display: inline-block;
diff --git a/contentcuration/contentcuration/frontend/shared/views/InfoModal.vue b/contentcuration/contentcuration/frontend/shared/views/InfoModal.vue
index e283a104af..cc6afb8c68 100644
--- a/contentcuration/contentcuration/frontend/shared/views/InfoModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/InfoModal.vue
@@ -56,9 +56,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ p {
+  ::v-deep p {
     font-size: 12pt;
     line-height: normal;
     color: var(--v-grey-darken3);
diff --git a/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue b/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
index 35cbead717..fed6b82d09 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
@@ -78,11 +78,11 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @icon-padding: 16px;
-  @icon-width: 25px;
-  @header-width: calc(2 * @icon-padding + @icon-width);
+  $icon-padding: 16px;
+  $icon-width: 25px;
+  $header-width: calc(2 * #{$icon-padding} + #{$icon-width});
 
   .list-group {
     box-sizing: border-box;
@@ -108,9 +108,7 @@
   }
 
   .header-content.has-icon {
-    // stylelint-disable
-    width: calc(100% ~'-' @header-width);
-    // stylelint-enable
+    width: calc(100% - #{$header-width});
   }
 
   .list-group.open > .list-group-header .v-icon {
@@ -119,8 +117,8 @@
 
   .icon-container {
     box-sizing: border-box;
-    width: @icon-width;
-    padding: 0 @icon-padding;
+    width: $icon-width;
+    padding: 0 $icon-padding;
   }
-
+  
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableCollection.vue b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableCollection.vue
index c3ccf70628..1e93732d76 100644
--- a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableCollection.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableCollection.vue
@@ -9,5 +9,5 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableHandle.vue b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableHandle.vue
index 5370009efb..5d10e26289 100644
--- a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableHandle.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableHandle.vue
@@ -9,5 +9,5 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableRegion.vue b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableRegion.vue
index 0041b90892..c66f5831ef 100644
--- a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableRegion.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableRegion.vue
@@ -9,5 +9,5 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/AppError.vue b/contentcuration/contentcuration/frontend/shared/views/errors/AppError.vue
index 409359f11e..c49e1f6356 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/AppError.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/AppError.vue
@@ -30,7 +30,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .details {
     max-width: 675px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/PageNotFoundError.vue b/contentcuration/contentcuration/frontend/shared/views/errors/PageNotFoundError.vue
index 25b8405e0a..0012a4beaa 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/PageNotFoundError.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/PageNotFoundError.vue
@@ -47,4 +47,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue b/contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue
index f277c54d2e..2962e27edd 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue
@@ -62,7 +62,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-icon {
     cursor: default;
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
index 007ebb73d1..fb09161cc0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
@@ -163,14 +163,14 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @caption-height: 25px;
+  $caption-height: 25px;
 
   .thumbnail {
     position: relative;
     /* stylelint-disable-next-line  */
-    padding-bottom: 100% * 9 / 16;
+    padding-bottom: calc(100% * 9 / 16);
 
     &.icon-only {
       padding-top: 0;
@@ -193,7 +193,7 @@
 
   .caption {
     width: 100%;
-    height: @caption-height;
+    height: $caption-height;
     padding: 0 5px;
     line-height: 11px;
   }
@@ -212,18 +212,18 @@
     overflow: hidden; // Don't show alt text outside of img boundaries
 
     .caption + & {
-      height: calc(100% - @caption-height);
+      height: calc(100% - #{$caption-height});
     }
   }
 
-  @svg-scale: 1.25;
-  @svg-width: 100% * 9 / 16 / @svg-scale;
-  @svg-top: (100% * 9 / 16 / 2) - (@svg-width / 2);
+  $svg-scale: 1.25;
+  $svg-width: calc(100% * 9 / 16 / #{$svg-scale});
+  $svg-top: calc((100% * 9 / 16 / 2) - (#{$svg-width} / 2));
 
   svg.thumbnail-image {
     top: 0;
-    left: 50% - (@svg-width / 4);
-    width: @svg-width / 4;
+    left: calc(50% - (#{$svg-width} / 4));
+    width: calc(#{$svg-width} / 4);
     margin: 0 auto;
     overflow: visible;
 
@@ -246,7 +246,7 @@
 
   svg.nothumbnail-image {
     top: 0;
-    width: @svg-width;
+    width: $svg-width;
     margin: 0 auto;
     overflow: visible;
 
@@ -259,7 +259,7 @@
     }
 
     .caption + & {
-      top: calc((@caption-height / 2) + @svg-top);
+      top: calc((#{$caption-height} / 2) + #{$svg-top});
     }
 
     .icon-only & {
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/CountryField.vue b/contentcuration/contentcuration/frontend/shared/views/form/CountryField.vue
index d97a8cacdf..9ec183502e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/CountryField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/CountryField.vue
@@ -110,9 +110,9 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-select__selections {
+  ::v-deep .v-select__selections {
     width: calc(100% - 48px); // Account for clear icon
     min-height: 0 !important;
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/MultiSelect.vue b/contentcuration/contentcuration/frontend/shared/views/form/MultiSelect.vue
index 7407935873..b10389a0a7 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/MultiSelect.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/MultiSelect.vue
@@ -132,19 +132,19 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-select {
     max-width: 500px;
   }
 
-  /deep/ .v-select__selections {
+  ::v-deep .v-select__selections {
     width: calc(100% - 48px);
     min-height: 0 !important;
   }
 
   .v-chip,
-  /deep/ .v-chip__content,
+  ::v-deep .v-chip__content,
   .text-truncate {
     max-width: 100%;
     overflow: hidden;
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/PasswordField.vue b/contentcuration/contentcuration/frontend/shared/views/form/PasswordField.vue
index e82df91b74..3972728ab1 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/PasswordField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/PasswordField.vue
@@ -79,6 +79,6 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/TextArea.vue b/contentcuration/contentcuration/frontend/shared/views/form/TextArea.vue
index 1db05d1b9d..cf6c27b040 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/TextArea.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/TextArea.vue
@@ -68,6 +68,6 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>

From f1d03bf947f3ff474e74f21648e657f762503d39 Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Tue, 11 Feb 2025 19:43:19 +0000
Subject: [PATCH 09/14] Migrate less to scss

---
 .../components/StudioTree/StudioTree.vue      |  6 ++--
 .../components/edit/DetailsTabView.vue        | 30 +++++++++----------
 .../channelEdit/components/edit/EditModal.vue |  6 ++--
 .../channelEdit/components/move/MoveModal.vue |  6 ++--
 .../pages/StagingTreePage/DiffTable.vue       |  6 ++--
 .../ReviewSelectionsPage.vue                  |  4 +--
 .../SearchOrBrowseWindow.vue                  |  4 +--
 .../channelEdit/views/TreeView/index.vue      | 10 +++----
 .../views/files/ContentRenderer.vue           | 12 ++++----
 .../views/files/FileUploadItem.vue            |  4 +--
 .../supplementaryLists/SubtitlesList.vue      |  4 +--
 .../supplementaryLists/SupplementaryList.vue  |  4 +--
 .../files/thumbnails/ContentNodeThumbnail.vue |  4 +--
 .../views/sync/SyncResourcesModal.vue         |  6 ++--
 .../views/Channel/CatalogFilters.vue          |  8 ++---
 .../channelList/views/Channel/ChannelItem.vue |  4 +--
 .../Channel/components/LanguageFilter.vue     |  7 ++---
 .../channelList/views/ChannelListAppError.vue |  2 +-
 .../views/ChannelSet/ChannelSetList.vue       |  4 +--
 .../shared/layouts/ImmersiveModalLayout.vue   |  2 +-
 .../frontend/shared/views/Alert.vue           |  4 +--
 .../frontend/shared/views/AppBar.vue          |  4 +--
 .../frontend/shared/views/Breadcrumbs.vue     |  4 +--
 .../frontend/shared/views/ContentNodeIcon.vue |  4 +--
 .../frontend/shared/views/CopyToken.vue       |  6 ++--
 .../shared/views/ErrorList/ErrorList.vue      |  4 +--
 .../frontend/shared/views/ExpandableList.vue  |  4 +--
 .../frontend/shared/views/FullscreenModal.vue |  6 ++--
 .../frontend/shared/views/HelpTooltip.vue     |  4 +--
 .../shared/views/LanguageDropdown.vue         |  6 ++--
 .../MarkdownEditor/MarkdownEditor.vue         |  4 +--
 .../image-upload/MarkdownImageField.vue       |  4 +--
 .../frontend/shared/views/MessageDialog.vue   |  4 +--
 .../views/ResizableNavigationDrawer.vue       |  8 ++---
 .../frontend/shared/views/Sandbox.vue         |  2 +-
 .../frontend/shared/views/ToggleText.vue      |  2 +-
 .../frontend/shared/views/ToolBar.vue         |  4 +--
 .../shared/views/channel/ChannelModal.vue     |  2 +-
 .../shared/views/channel/ChannelSharing.vue   |  2 +-
 .../shared/views/channel/ChannelThumbnail.vue |  4 +--
 .../CompletionOptions/ActivityDuration.vue    |  2 +-
 .../CompletionOptions/MasteryCriteriaGoal.vue |  6 ++--
 .../MasteryCriteriaMofNFields.vue             |  6 ++--
 .../LearningActivityOptions.vue               |  2 +-
 .../ResourcesNeededOptions.vue                |  2 +-
 .../frontend/shared/views/details/Details.vue |  6 ++--
 .../shared/views/details/DetailsRow.vue       |  2 +-
 .../shared/views/files/FileStatusText.vue     |  4 +--
 .../shared/views/files/ImageOnlyThumbnail.vue | 26 ++++++++--------
 .../frontend/shared/views/form/Checkbox.vue   |  4 +--
 50 files changed, 136 insertions(+), 139 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
index a90a5f878c..f045a48a74 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
@@ -412,9 +412,9 @@
 
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 
-  .v-badge /deep/ .v-badge__badge {
+  .v-badge ::v-deep .v-badge__badge {
     top: -5px;
     left: 10px;
   }
@@ -453,7 +453,7 @@
   }
 
   // size causes rows to shift
-  /deep/ .v-btn {
+  ::v-deep .v-btn {
     width: 24px;
     height: 24px;
     margin: 0;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index 053a5fd70c..3e72b3b9b7 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -922,12 +922,12 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @space-between-sections: 64px;
+  $space-between-sections: 64px;
 
-  /deep/ a,
-  /deep/ a:hover {
+  ::v-deep a,
+  ::v-deep a:hover {
     color: inherit;
     text-decoration: none;
   }
@@ -935,7 +935,7 @@
   .details-edit-view {
     padding: 10px;
 
-    /deep/ .subheading {
+    ::v-deep .subheading {
       margin-bottom: 8px;
       font-weight: bold;
     }
@@ -945,7 +945,7 @@
     }
 
     .auth-section {
-      /deep/ .v-autocomplete .v-input__append-inner {
+      ::v-deep .v-autocomplete .v-input__append-inner {
         visibility: hidden;
       }
     }
@@ -954,29 +954,29 @@
       max-width: 960px;
 
       .tagbox {
-        /deep/ .v-select__selections {
+        ::v-deep .v-select__selections {
           min-height: 0 !important;
         }
 
-        /deep/ .v-chip__content {
+        ::v-deep .v-chip__content {
           color: black; // Read-only tag box grays out tags
         }
 
-        /deep/ .v-input__append-inner {
+        ::v-deep .v-input__append-inner {
           display: none;
         }
       }
 
-      /deep/ .v-input--is-readonly {
-        /deep/ label {
+      ::v-deep .v-input--is-readonly {
+        ::v-deep label {
           color: var(--v-grey-darken2) !important;
         }
 
-        /deep/ .v-input__append-inner {
+        ::v-deep .v-input__append-inner {
           display: none;
         }
 
-        /deep/ .v-input__slot {
+        ::v-deep .v-input__slot {
           &::before {
             border-style: dotted;
           }
@@ -990,12 +990,12 @@
       .basicInfoColumn {
         display: flex;
 
-        /deep/ .v-input {
+        ::v-deep .v-input {
           // Stretches the "Description" text area to fill the column vertically
           align-items: stretch;
         }
 
-        /deep/ .v-input__control {
+        ::v-deep .v-input__control {
           // Makes sure that the character count does not get pushed to second column
           flex-wrap: nowrap;
         }
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
index 671647b90f..fca0812d32 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
@@ -643,9 +643,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-toolbar__extension {
+  ::v-deep .v-toolbar__extension {
     padding: 0;
 
     .v-toolbar__content {
@@ -661,7 +661,7 @@
     margin-left: 0;
   }
 
-  /deep/ .v-content__wrap {
+  ::v-deep .v-content__wrap {
     max-height: calc(100vh - 128px);
     overflow-y: auto;
   }
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
index 5865f28d30..31c188b442 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
@@ -347,14 +347,14 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-toolbar__extension {
+  ::v-deep .v-toolbar__extension {
     padding: 0;
   }
 
   .content-card {
-    /deep/ .v-list__tile {
+    ::v-deep .v-list__tile {
       height: unset;
     }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/DiffTable.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/DiffTable.vue
index b8c7565dcc..cc7272e375 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/DiffTable.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/DiffTable.vue
@@ -147,10 +147,10 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ th,
-  td {
+  ::v-deep th,
+  ::v-deep td {
     padding: 0 12px !important;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ReviewSelectionsPage.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ReviewSelectionsPage.vue
index 17f6ab7242..69b1ca0423 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ReviewSelectionsPage.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ReviewSelectionsPage.vue
@@ -96,14 +96,14 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .over-app-bar {
     z-index: 3;
   }
 
   // Because the tiles don't re-adjust in responsive mode
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     height: auto;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
index c4637da638..784356a2f6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
@@ -231,13 +231,13 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-form {
     max-width: 900px;
   }
 
-  .searchtext /deep/ .v-input__append-outer {
+  .searchtext ::v-deep .v-input__append-outer {
     height: 57px;
     margin: 0;
     margin-top: 0 !important;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
index 9d36a109aa..f0f54d8c8b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
@@ -402,18 +402,18 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-toolbar__extension {
+  ::v-deep .v-toolbar__extension {
     padding: 0;
   }
 
-  .tree-drawer /deep/ .drawer-contents {
+  .tree-drawer ::v-deep .drawer-contents {
     display: flex;
     flex-direction: column;
   }
 
-  .hierarchy-toggle /deep/ .v-icon {
+  .hierarchy-toggle ::v-deep .v-icon {
     transform: scaleX(-1);
 
     [dir='rtl'] & {
@@ -425,7 +425,7 @@
     transition: padding-left 0s !important;
   }
 
-  .hierarchy-toolbar /deep/ .v-toolbar__content {
+  .hierarchy-toolbar ::v-deep .v-toolbar__content {
     padding: 0 20px;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue
index 4df87388d5..b2378faee7 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue
@@ -154,9 +154,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @max-height: calc(100vh - 96px);
+  $max-height: calc(100vh - 96px);
 
   .v-card,
   video,
@@ -174,11 +174,11 @@
   iframe,
   .epub {
     min-height: 200px;
-    max-height: @max-height;
+    max-height: $max-height;
   }
 
   video {
-    max-height: @max-height;
+    max-height: $max-height;
   }
 
   .message-card,
@@ -193,14 +193,14 @@
   }
 
   .fullscreen {
-    min-height: @max-height;
+    min-height: $max-height;
 
     .v-card,
     audio,
     embed,
     iframe,
     .epub {
-      min-height: @max-height;
+      min-height: $max-height;
     }
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
index c83f68cd4f..7a77710e54 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
@@ -181,7 +181,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .layout .section-header {
     padding: 0 15px;
@@ -193,7 +193,7 @@
     margin: 0;
   }
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     height: max-content !important;
     min-height: 64px;
     padding: 5px 16px;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue
index c83c8c7f75..dd889cde2a 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue
@@ -67,9 +67,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  .subheading /deep/ .v-icon {
+  .subheading ::v-deep .v-icon {
     margin-left: 4px;
     vertical-align: text-top;
   }
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue
index d980e11f4b..aea0c424a2 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue
@@ -151,9 +151,9 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .languageTile > .v-list__tile {
+  ::v-deep .languageTile > .v-list__tile {
     height: 56px;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
index 2d073b294b..015b31c546 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
@@ -452,9 +452,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ canvas {
+  ::v-deep canvas {
     border: 2px solid var(--v-grey-darken2);
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/sync/SyncResourcesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/sync/SyncResourcesModal.vue
index b0f54ce329..c0902aad2f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/sync/SyncResourcesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/sync/SyncResourcesModal.vue
@@ -249,14 +249,14 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   // counteract the effect of the VCardText that is wrapping the VList component
-  .v-card /deep/ .v-card__text {
+  .v-card ::v-deep .v-card__text {
     padding: 0;
   }
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     align-items: flex-start;
     height: unset;
     padding: 8px 0;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 7661f9a8cf..d72072836a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -215,13 +215,13 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-input--checkbox {
     margin: 0;
   }
 
-  /deep/ .v-messages {
+  ::v-deep .v-messages {
     display: none;
   }
 
@@ -238,7 +238,7 @@
     overflow: auto;
   }
 
-  /deep/ .v-label * {
+  ::v-deep .v-label * {
     vertical-align: bottom;
   }
 
@@ -247,4 +247,4 @@
     align-items: center;
   }
 
-</style>
+</style>
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index ba98f77283..ae440d54ab 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -383,7 +383,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-card {
     width: 100%;
@@ -413,7 +413,7 @@
     }
   }
 
-  /deep/ .thumbnail {
+  ::v-deep .thumbnail {
     width: 100%;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue
index 47374365b9..3bb72c61c2 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue
@@ -123,16 +123,15 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   // Need to set otherwise chips will exceed width of selection box
-
-  /deep/ .v-select__selections {
+  ::v-deep .v-select__selections {
     width: calc(100% - 48px);
   }
 
   .v-chip,
-  /deep/ .v-chip__content,
+  ::v-deep .v-chip__content,
   .text-truncate {
     max-width: 100%;
   }
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListAppError.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListAppError.vue
index 82cdb78d56..ecb93ef3be 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListAppError.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListAppError.vue
@@ -75,4 +75,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetList.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetList.vue
index ea771b5241..66d6bf5c62 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetList.vue
@@ -140,13 +140,13 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .list-items {
     margin: 0 auto;
   }
 
-  /deep/ .v-datatable {
+  ::v-deep .v-datatable {
     background-color: transparent !important;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue b/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
index 3146181606..602fafd661 100644
--- a/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
+++ b/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
@@ -60,7 +60,7 @@
 
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .back-text {
     display: inline-block;
diff --git a/contentcuration/contentcuration/frontend/shared/views/Alert.vue b/contentcuration/contentcuration/frontend/shared/views/Alert.vue
index 2e3537a3e6..cc34bf43a3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Alert.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Alert.vue
@@ -86,9 +86,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ label {
+  ::v-deep label {
     margin: 0;
     font-weight: normal;
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
index aa1f61432f..346d76ccb8 100644
--- a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
@@ -212,7 +212,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-toolbar {
     z-index: 5;
@@ -222,7 +222,7 @@
     border-radius: 8px;
   }
 
-  /deep/ .v-tabs__div {
+  ::v-deep .v-tabs__div {
     min-width: 160px;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/Breadcrumbs.vue b/contentcuration/contentcuration/frontend/shared/views/Breadcrumbs.vue
index 0257d6561a..178ca0a5ac 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Breadcrumbs.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Breadcrumbs.vue
@@ -115,14 +115,14 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   /* Truncate text if the last item is too long */
   .breadcrumb:last-child {
     max-width: calc(100% - 86px);
   }
 
-  /deep/ .v-breadcrumbs__item {
+  ::v-deep .v-breadcrumbs__item {
     overflow: hidden;
     text-overflow: ellipsis;
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
index e21eb251c1..50eda18d2e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
@@ -107,10 +107,10 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .iconOnly {
-    /deep/ .v-chip__content {
+    ::v-deep .v-chip__content {
       height: 22px;
       padding: 0 5px;
     }
diff --git a/contentcuration/contentcuration/frontend/shared/views/CopyToken.vue b/contentcuration/contentcuration/frontend/shared/views/CopyToken.vue
index d4535ef5af..3fc7a93d73 100644
--- a/contentcuration/contentcuration/frontend/shared/views/CopyToken.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/CopyToken.vue
@@ -76,13 +76,13 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  .v-text-field /deep/ input[type='text'] {
+  .v-text-field ::v-deep input[type='text'] {
     color: var(--v-grey-darken1) !important;
   }
 
-  .v-text-field /deep/ .v-input__slot::before {
+  .v-text-field ::v-deep .v-input__slot::before {
     border-style: dotted !important;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/ErrorList/ErrorList.vue b/contentcuration/contentcuration/frontend/shared/views/ErrorList/ErrorList.vue
index d0ac183f7c..4daa20612c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ErrorList/ErrorList.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ErrorList/ErrorList.vue
@@ -25,9 +25,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     padding-left: 0;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/ExpandableList.vue b/contentcuration/contentcuration/frontend/shared/views/ExpandableList.vue
index d35f824cce..39ba3f3c5b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ExpandableList.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ExpandableList.vue
@@ -138,12 +138,12 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-expansion-panel {
     box-shadow: none;
 
-    /deep/ .v-expansion-panel__header {
+    ::v-deep .v-expansion-panel__header {
       padding: 0;
     }
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
index dd1fc81be9..e1f1785ce2 100644
--- a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
@@ -120,13 +120,13 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-tabs__div {
+  ::v-deep .v-tabs__div {
     min-width: 160px;
   }
 
-  /deep/ .v-tabs__container {
+  ::v-deep .v-tabs__container {
     padding: 0;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue b/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
index f0710b7714..b883299226 100644
--- a/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
@@ -39,9 +39,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/.k-tooltip {
+  ::v-deep .k-tooltip {
     width: 100%;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
index 57d69e0bea..a48811012a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
@@ -122,15 +122,15 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-select__selections {
+  ::v-deep .v-select__selections {
     width: calc(100% - 48px);
     min-height: 0 !important;
   }
 
   .v-chip,
-  /deep/ .v-chip__content,
+  ::v-deep .v-chip__content,
   .text-truncate {
     max-width: 100%;
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue
index c8f671838f..171e2d94be 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue
@@ -853,7 +853,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   @import '../mathquill/mathquill.css';
 
@@ -882,7 +882,7 @@
   // TODO (when updating to new frontend files structure)
   // find better location for following styles that
   // are supposed to be common to all editable fields
-  /deep/ .mq-editable-field {
+  ::v-deep .mq-editable-field {
     border: 0;
 
     .mq-to,
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
index 4045653126..72e4c42296 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
@@ -197,8 +197,8 @@
 <style>
 /*
   Warning: custom elements don't currently have a way of using SFC styles.
-  Instead, add your style changes to `./style.less`
+  Instead, add your style changes to `./style.scss`
 
-  Additionally, all child component styles must be included in `./style.less`
+  Additionally, all child component styles must be included in `./style.scss`
 */
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MessageDialog.vue b/contentcuration/contentcuration/frontend/shared/views/MessageDialog.vue
index 9e758cf541..f7fc3d6ddb 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MessageDialog.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MessageDialog.vue
@@ -59,13 +59,13 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   p {
     font-size: 12pt;
   }
 
-  /deep/ .v-btn {
+  ::v-deep .v-btn {
     font-weight: bold;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/ResizableNavigationDrawer.vue b/contentcuration/contentcuration/frontend/shared/views/ResizableNavigationDrawer.vue
index a70781871b..39628b1c50 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ResizableNavigationDrawer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ResizableNavigationDrawer.vue
@@ -172,13 +172,13 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   /*! rtl:begin:ignore */
   .drawer-left {
     right: auto;
 
-    /deep/ .v-navigation-drawer__border {
+    ::v-deep .v-navigation-drawer__border {
       margin-left: 3px;
       border-right: 1px solid var(--v-grey-lighten4);
     }
@@ -187,7 +187,7 @@
   .drawer-right {
     left: auto;
 
-    /deep/ .v-navigation-drawer__border {
+    ::v-deep .v-navigation-drawer__border {
       margin-right: 3px;
       border-left: 1px solid var(--v-grey-lighten4);
     }
@@ -195,7 +195,7 @@
 
   /*! rtl:end:ignore */
 
-  .draggable /deep/ .v-navigation-drawer__border {
+  .draggable ::v-deep .v-navigation-drawer__border {
     z-index: 16;
     width: 3px;
     height: 100%;
diff --git a/contentcuration/contentcuration/frontend/shared/views/Sandbox.vue b/contentcuration/contentcuration/frontend/shared/views/Sandbox.vue
index e28becc6fd..0810e329e3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Sandbox.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Sandbox.vue
@@ -19,5 +19,5 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue b/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
index aef5a6cbb3..380da0f66d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
@@ -93,7 +93,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .text {
     margin: 0;
diff --git a/contentcuration/contentcuration/frontend/shared/views/ToolBar.vue b/contentcuration/contentcuration/frontend/shared/views/ToolBar.vue
index e1f20efce7..f7848edfce 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ToolBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ToolBar.vue
@@ -28,9 +28,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-toolbar__content {
+  ::v-deep .v-toolbar__content {
     border-bottom: 1px solid transparent;
 
     .elevation-0 & {
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
index 97646e7aca..dfff132d5b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
@@ -419,7 +419,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .channel-info {
     border: 0;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue
index 0488f0f5cf..17a608603b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue
@@ -166,7 +166,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-select .v-input__slot {
     height: 56px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
index 4a9a59f395..d42f95d7e4 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
@@ -323,9 +323,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ canvas {
+  ::v-deep canvas {
     border: 2px solid var(--v-grey-darken2);
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/ActivityDuration.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/ActivityDuration.vue
index a3606057b5..19b42544d5 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/ActivityDuration.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/ActivityDuration.vue
@@ -223,7 +223,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .defaultUpload {
     margin: 0.8em;
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaGoal.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaGoal.vue
index ab9d0b06e9..703071ca7d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaGoal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaGoal.vue
@@ -113,7 +113,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-autocomplete {
     display: inline-block;
@@ -149,7 +149,7 @@
     }
   }
 
-  /deep/ a {
+  ::v-deep a {
     text-decoration: none !important;
 
     &:hover {
@@ -157,7 +157,7 @@
     }
   }
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     width: 100%;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaMofNFields.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaMofNFields.vue
index 6b9755902e..ac21f74633 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaMofNFields.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaMofNFields.vue
@@ -192,7 +192,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-autocomplete {
     display: inline-block;
@@ -228,7 +228,7 @@
     }
   }
 
-  /deep/ a {
+  ::v-deep a {
     text-decoration: none !important;
 
     &:hover {
@@ -236,7 +236,7 @@
     }
   }
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     width: 100%;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
index ce1f49b8b8..17cea8b862 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
@@ -82,6 +82,6 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
index 8585ed7911..2752c8e9b0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
@@ -81,6 +81,6 @@
   };
 
 </script>
-<style lang="less">
+<style lang="scss">
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/details/Details.vue b/contentcuration/contentcuration/frontend/shared/views/details/Details.vue
index 03ace0c8fd..efab758c0f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/details/Details.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/details/Details.vue
@@ -549,9 +549,9 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  .printing /deep/ * {
+  .printing ::v-deep * {
     font-family: 'Noto Sans', helvetica !important;
 
     &.material-icons {
@@ -591,7 +591,7 @@
     max-width: 350px;
     font-size: 12pt;
 
-    /deep/ tr {
+    ::v-deep tr {
       border-top: 0 !important;
 
       &:hover {
diff --git a/contentcuration/contentcuration/frontend/shared/views/details/DetailsRow.vue b/contentcuration/contentcuration/frontend/shared/views/details/DetailsRow.vue
index 2288a8c6c6..c781c01f16 100644
--- a/contentcuration/contentcuration/frontend/shared/views/details/DetailsRow.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/details/DetailsRow.vue
@@ -59,7 +59,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .flex {
     word-break: break-word;
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/FileStatusText.vue b/contentcuration/contentcuration/frontend/shared/views/files/FileStatusText.vue
index a5923fc2d6..65d754c645 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/FileStatusText.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/FileStatusText.vue
@@ -73,9 +73,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ canvas {
+  ::v-deep canvas {
     border: 2px solid var(--v-grey-darken2);
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue
index 6101b531cb..da9b1e9f95 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue
@@ -125,14 +125,14 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @caption-height: 25px;
+  $caption-height: 25px;
 
   .thumbnail {
     position: relative;
     /* stylelint-disable-next-line  */
-    padding-bottom: 100% * 9 / 16;
+    padding-bottom: calc(100% * 9 / 16);
     border-radius: 3px;
 
     &.nothumbnail {
@@ -150,7 +150,7 @@
 
   .caption {
     width: 100%;
-    height: @caption-height;
+    height: $caption-height;
     padding: 0 5px;
     line-height: 11px;
   }
@@ -169,20 +169,18 @@
     overflow: hidden; // Don't show alt text outside of img boundaries
 
     .caption + & {
-      height: calc(100% - @caption-height);
+      height: calc(100% - #{$caption-height});
     }
   }
 
-  @svg-scale: 1.25;
-
-  @svg-width: 100% * 9 / 16 / @svg-scale;
-
-  @svg-top: (100% * 9 / 16 / 2) - (@svg-width / 2);
+  $svg-scale: 1.25;
+  $svg-width: calc(100% * 9 / 16 / #{$svg-scale});
+  $svg-top: calc((100% * 9 / 16 / 2) - (#{$svg-width} / 2));
 
   svg.thumbnail-image {
     top: 0;
-    left: 50% - (@svg-width / 4);
-    width: @svg-width / 4;
+    left: calc(50% - (#{$svg-width} / 4));
+    width: calc(#{$svg-width} / 4);
     margin: 0 auto;
     overflow: visible;
 
@@ -205,7 +203,7 @@
 
   svg.nothumbnail-image {
     top: 0;
-    width: @svg-width;
+    width: $svg-width;
     margin: 0 auto;
     overflow: visible;
 
@@ -218,7 +216,7 @@
     }
 
     .caption + & {
-      top: calc((@caption-height / 2) + @svg-top);
+      top: calc((#{$caption-height} / 2) + #{$svg-top});
     }
 
     .icon-only & {
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/Checkbox.vue b/contentcuration/contentcuration/frontend/shared/views/form/Checkbox.vue
index af75cf5a71..cc85b3e6b7 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/Checkbox.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/Checkbox.vue
@@ -149,9 +149,9 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ label.theme--light {
+  ::v-deep label.theme--light {
     padding: 0 8px;
     color: var(--v-text);
   }

From 11149a084bad12f76f6946ecaad3051ffc5cb73a Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Tue, 11 Feb 2025 19:43:37 +0000
Subject: [PATCH 10/14] Migrate less to scss

---
 .../MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
index c1a8acd328..0f66355bc6 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
@@ -233,7 +233,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 .images-menu {
   position: relative;
@@ -287,5 +287,4 @@
   max-width: 100%;
 }
 
-
 </style>

From d0f244eea3d2ccc4f4f7573f20a98fd3813e6e8e Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Tue, 11 Feb 2025 19:57:13 +0000
Subject: [PATCH 11/14] Fix lint issues

---
 .stylelintrc.js                               |  4 +-
 .../frontend/shared/views/LazyListGroup.vue   |  2 +-
 .../MarkdownEditor/ImagesMenu/ImagesMenu.vue  | 88 +++++++++----------
 3 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/.stylelintrc.js b/.stylelintrc.js
index b7b5451a5e..0b9f00d378 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -11,12 +11,12 @@ module.exports = {
     'at-rule-no-unknown': null, // we're using LESS
     'scss/at-rule-no-unknown': null, // we're using LESS
     'csstree/validator': null, // this triggers issues with unknown at rules too.
-    'selector-pseudo-class-no-unknown': [ 
+    'selector-pseudo-element-no-unknown': [ 
      true,
      {
          // In Vue 2.6 and later, `::v-deep` is used for deep selectors.  
          // This rule allows `::v-deep` to prevent linting errors.
-         ignorePseudoClasses: ['v-deep'],
+         ignorePseudoElements: ['v-deep'],
      }
     ]
   },
diff --git a/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue b/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
index fed6b82d09..761d0f611c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
@@ -120,5 +120,5 @@
     width: $icon-width;
     padding: 0 $icon-padding;
   }
-  
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
index 0f66355bc6..6129831cb5 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
@@ -235,56 +235,56 @@
 
 <style lang="scss" scoped>
 
-.images-menu {
-  position: relative;
-  z-index: 1;
-  max-width: 500px;
-  // to make positioning from a parent element easier - this
-  // makes sure that the tip of the anchor will be considered
-  // as top right/left corner
-  margin-top: 16px;
-  margin-right: -30px;
-  margin-left: -30px;
-}
-
-.anchor-arrow {
-  position: absolute;
-  top: -40px;
-  left: 10px;
-  z-index: 3;
-  width: 40px;
-  height: 40px;
-  overflow: hidden;
+  .images-menu {
+    position: relative;
+    z-index: 1;
+    max-width: 500px;
+    // to make positioning from a parent element easier - this
+    // makes sure that the tip of the anchor will be considered
+    // as top right/left corner
+    margin-top: 16px;
+    margin-right: -30px;
+    margin-left: -30px;
+  }
 
-  &::after {
+  .anchor-arrow {
     position: absolute;
-    top: 28px;
-    right: 0;
-    left: 6px;
-    width: 25px;
-    height: 25px;
-    content: '';
-    background: #ffffff;
-    box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.3);
-    transform: rotate(45deg);
-  }
+    top: -40px;
+    left: 10px;
+    z-index: 3;
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+
+    &::after {
+      position: absolute;
+      top: 28px;
+      right: 0;
+      left: 6px;
+      width: 25px;
+      height: 25px;
+      content: '';
+      background: #ffffff;
+      box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.3);
+      transform: rotate(45deg);
+    }
 
-  &.anchor-arrow-right {
-    right: 10px;
-    left: initial;
+    &.anchor-arrow-right {
+      right: 10px;
+      left: initial;
+    }
   }
-}
 
-.v-card__text {
-  position: relative;
-}
+  .v-card__text {
+    position: relative;
+  }
 
-.upload-area {
-  border: 1px solid var(--v-grey-lighten4) !important;
-}
+  .upload-area {
+    border: 1px solid var(--v-grey-lighten4) !important;
+  }
 
-.image-preview {
-  max-width: 100%;
-}
+  .image-preview {
+    max-width: 100%;
+  }
 
 </style>

From a33d1059b2d039f9cdbd7baf6c54162134958a5d Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Tue, 11 Feb 2025 19:57:47 +0000
Subject: [PATCH 12/14] Remove build tooling

---
 .pre-commit-config.yaml | 2 +-
 package.json            | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 03ae517775..cf207da455 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -22,4 +22,4 @@ repos:
           description: This hook handles all frontend linting for Kolibri Studio
           entry: yarn run lint-frontend:format
           language: system
-          files: \.(js|vue|scss|less|css)$
+          files: \.(js|vue|scss|css)$
diff --git a/package.json b/package.json
index 85f82526a4..68c73b2aef 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "description": "Frontend build tools and development utilities for Kolibri Studio",
   "scripts": {
     "lint:py": "flake8 --exit-zero",
-    "lint-frontend": "kolibri-tools lint --pattern 'contentcuration/contentcuration/frontend/**/*.{js,vue,scss,less,css}' --ignore '**/dist/**,**/node_modules/**,**/static/**'",
+    "lint-frontend": "kolibri-tools lint --pattern 'contentcuration/contentcuration/frontend/**/*.{js,vue,scss,css}' --ignore '**/dist/**,**/node_modules/**,**/static/**'",
     "lint-frontend:format": "yarn run lint-frontend --write",
     "lint-frontend:watch": "yarn run lint-frontend --monitor",
     "lint-frontend:watch:format": "yarn run lint-frontend --monitor --write",
@@ -115,8 +115,6 @@
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "jest-serializer-vue": "^3.1.0",
     "kolibri-tools": "0.16.0-dev.3",
-    "less": "^3.0.1",
-    "less-loader": "^11.1.3",
     "npm-run-all": "^4.1.3",
     "stylus": "^0.63.0",
     "stylus-loader": "^7.1.3",

From f5803dd15f1c90da20bfb7382d12756cac9852c9 Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Thu, 20 Feb 2025 03:06:21 +0000
Subject: [PATCH 13/14] Fix review suggestions

---
 .stylelintrc.js                                      |  2 --
 .../frontend/accounts/pages/Create.vue               |  6 ++++--
 .../contentcuration/frontend/accounts/pages/Main.vue |  2 +-
 .../administration/components/ClipboardChip.vue      |  7 -------
 .../administration/pages/Users/EmailUsersDialog.vue  |  2 +-
 .../components/AnswersEditor/AnswersEditor.vue       |  4 ++--
 .../components/ContentNodeListItem/index.vue         |  4 ++--
 .../channelEdit/components/edit/DetailsTabView.vue   |  2 --
 .../frontend/settings/pages/Storage/index.vue        |  6 +++---
 .../contentcuration/frontend/shared/styles/main.scss |  4 ++--
 .../frontend/shared/views/LazyListGroup.vue          |  4 ++--
 .../MarkdownEditor/plugins/image-upload/style.scss   |  4 ++--
 .../shared/views/ResizableNavigationDrawer.vue       |  2 +-
 .../contentcuration/frontend/shared/views/Tabs.vue   |  4 ++--
 .../shared/views/files/ImageOnlyThumbnail.vue        | 12 ++++++------
 .../frontend/shared/views/files/Thumbnail.vue        | 12 ++++++------
 16 files changed, 34 insertions(+), 43 deletions(-)

diff --git a/.stylelintrc.js b/.stylelintrc.js
index 0b9f00d378..88bbd1b144 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -8,8 +8,6 @@ module.exports = {
      * Inline comments explain why rule is ignored
      */
     'selector-max-id': null, // This would require a major refactor
-    'at-rule-no-unknown': null, // we're using LESS
-    'scss/at-rule-no-unknown': null, // we're using LESS
     'csstree/validator': null, // this triggers issues with unknown at rules too.
     'selector-pseudo-element-no-unknown': [ 
      true,
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Create.vue b/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
index 8c4aa90ad2..1f6e4b53d5 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
@@ -568,7 +568,9 @@
     margin-top: 8px !important;
   }
 
-  .policy-checkbox {
+  .policy-checkbox ::v-deep .v-input__slot {
+    margin-bottom: 4px !important;
+
     label {
       color: var(--v-grey-darken1) !important;
     }
@@ -592,7 +594,7 @@
     display: flex;
     margin-left: 40px;
 
-    .span {
+    span {
       margin-left: 2px;
       font-size: 16px;
     }
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
index 0867315f8b..bfcafae57e 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
@@ -210,7 +210,7 @@
 
   .main {
     overflow: auto;
-    // stylelint-disable-next-line custom-property-pattern
+    /* stylelint-disable-next-line custom-property-pattern */
     background-color: var(--v-backgroundColor-base);
   }
 
diff --git a/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue b/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
index 02bbd301f7..59785dd642 100644
--- a/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
+++ b/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
@@ -67,11 +67,4 @@
     text-overflow: ellipsis;
   }
 
-  .VBtn {
-    &:hover::before,
-    &:focus::before {
-      background-color: transparent;
-    }
-  }
-
 </style>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
index 3510b8ce30..242baecb8d 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
@@ -250,7 +250,7 @@
 
 <style lang="scss" scoped>
 
-  ::v-deep(.v-chip__close) {
+  ::v-deep .v-chip__close {
     padding-top: 4px;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
index ccc4625f06..1cba5ad790 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
@@ -475,8 +475,8 @@
   }
 
   /* Remove the underline on text fields that are not focused */
-  ::v-deep(.no-border.v-text-field > .v-input__control > .v-input__slot::before),
-  ::v-deep(.no-border.v-text-field > .v-input__control > .v-input__slot::after) {
+  ::v-deep .no-border.v-text-field > .v-input__control > .v-input__slot::before,
+  ::v-deep .no-border.v-text-field > .v-input__control > .v-input__slot::after {
     border-style: none;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
index 23812af296..e7ca53c7ec 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -475,11 +475,11 @@
 
   .description-col {
     flex-shrink: 1 !important;
-    width: calc(100% - #{$thumbnail-width} - 206px);
+    width: calc(100% - $thumbnail-width - 206px);
     word-break: break-word;
 
     .compact & {
-      width: calc(100% - #{$compact-thumbnail-width} - 206px);
+      width: calc(100% - $compact-thumbnail-width - 206px);
     }
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index 3e72b3b9b7..2bb801094f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -924,8 +924,6 @@
 
 <style lang="scss" scoped>
 
-  $space-between-sections: 64px;
-
   ::v-deep a,
   ::v-deep a:hover {
     color: inherit;
diff --git a/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue b/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
index ec50bb75aa..c6f9689857 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
@@ -154,10 +154,10 @@
     height: 8px !important;
     margin: 8px 0;
     background: #e9e9e9;
-  }
 
-  ::v-deep .ui-progress-linear .is-determinate {
-    height: 8px !important;
+    ::v-deep .is-determinate {
+      height: 8px !important;
+    }
   }
 
 </style>
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/shared/styles/main.scss b/contentcuration/contentcuration/frontend/shared/styles/main.scss
index 777a8b3668..50000d3755 100644
--- a/contentcuration/contentcuration/frontend/shared/styles/main.scss
+++ b/contentcuration/contentcuration/frontend/shared/styles/main.scss
@@ -32,7 +32,7 @@ html {
 body {
   font-family: 'Noto Sans', Verdana, sans-serif;
   letter-spacing: 0.03em;
-  // stylelint-disable-next-line custom-property-pattern
+  /* stylelint-disable-next-line custom-property-pattern */
   background-color: var(--v-backgroundColor-base);
 
   * {
@@ -54,7 +54,7 @@ body {
   }
 }
 
-// RTL-related rules
+/* RTL-related rules */
 
 /*! rtl:begin:ignore */
 [dir='rtl'] {
diff --git a/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue b/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
index 761d0f611c..61b977d820 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
@@ -82,7 +82,7 @@
 
   $icon-padding: 16px;
   $icon-width: 25px;
-  $header-width: calc(2 * #{$icon-padding} + #{$icon-width});
+  $header-width: calc(2 * $icon-padding + $icon-width);
 
   .list-group {
     box-sizing: border-box;
@@ -108,7 +108,7 @@
   }
 
   .header-content.has-icon {
-    width: calc(100% - #{$header-width});
+    width: calc(100% - $header-width);
   }
 
   .list-group.open > .list-group-header .v-icon {
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss
index 1c7a80af79..9cea4ca8c3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss
@@ -53,11 +53,11 @@ img {
 
   // TUI will automatically move cursor inside button,
   // so don't allow clicking on elements inside the button
-  * {
+  ::v-deep * {
     pointer-events: none;
   }
 
-  .v-btn__content {
+  ::v-deep .v-btn__content {
     height: min-content;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/ResizableNavigationDrawer.vue b/contentcuration/contentcuration/frontend/shared/views/ResizableNavigationDrawer.vue
index 39628b1c50..44cd24802d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ResizableNavigationDrawer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ResizableNavigationDrawer.vue
@@ -204,7 +204,7 @@
     transition: background 0.2s ease;
 
     &:hover,
-    .dragging& {
+    &.dragging {
       background: var(--v-secondary-base) !important;
     }
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/Tabs.vue b/contentcuration/contentcuration/frontend/shared/views/Tabs.vue
index 1678384eca..07ca152b6d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Tabs.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Tabs.vue
@@ -111,7 +111,7 @@
 
 <style lang="scss">
 
-  /* rtl:begin:ignore */
+  /*! rtl:begin:ignore */
   [dir='rtl'] {
     .v-tabs__icon--prev {
       right: auto;
@@ -119,6 +119,6 @@
     }
   }
 
-  /* rtl:end:ignore */
+  /*! rtl:end:ignore */
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue
index da9b1e9f95..d9d0a09391 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue
@@ -169,18 +169,18 @@
     overflow: hidden; // Don't show alt text outside of img boundaries
 
     .caption + & {
-      height: calc(100% - #{$caption-height});
+      height: calc(100% - $caption-height);
     }
   }
 
   $svg-scale: 1.25;
-  $svg-width: calc(100% * 9 / 16 / #{$svg-scale});
-  $svg-top: calc((100% * 9 / 16 / 2) - (#{$svg-width} / 2));
+  $svg-width: calc(100% * 9 / 16 / $svg-scale);
+  $svg-top: calc((100% * 9 / 16 / 2) - ($svg-width / 2));
 
   svg.thumbnail-image {
     top: 0;
-    left: calc(50% - (#{$svg-width} / 4));
-    width: calc(#{$svg-width} / 4);
+    left: calc(50% - ($svg-width / 4));
+    width: calc($svg-width / 4);
     margin: 0 auto;
     overflow: visible;
 
@@ -216,7 +216,7 @@
     }
 
     .caption + & {
-      top: calc((#{$caption-height} / 2) + #{$svg-top});
+      top: calc(($caption-height / 2) + $svg-top);
     }
 
     .icon-only & {
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
index fb09161cc0..bf90e481b2 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
@@ -212,18 +212,18 @@
     overflow: hidden; // Don't show alt text outside of img boundaries
 
     .caption + & {
-      height: calc(100% - #{$caption-height});
+      height: calc(100% - $caption-height);
     }
   }
 
   $svg-scale: 1.25;
-  $svg-width: calc(100% * 9 / 16 / #{$svg-scale});
-  $svg-top: calc((100% * 9 / 16 / 2) - (#{$svg-width} / 2));
+  $svg-width: calc(100% * 9 / 16 / $svg-scale);
+  $svg-top: calc((100% * 9 / 16 / 2) - ($svg-width / 2));
 
   svg.thumbnail-image {
     top: 0;
-    left: calc(50% - (#{$svg-width} / 4));
-    width: calc(#{$svg-width} / 4);
+    left: calc(50% - ($svg-width / 4));
+    width: calc($svg-width / 4);
     margin: 0 auto;
     overflow: visible;
 
@@ -259,7 +259,7 @@
     }
 
     .caption + & {
-      top: calc((#{$caption-height} / 2) + #{$svg-top});
+      top: calc(($caption-height / 2) + $svg-top);
     }
 
     .icon-only & {

From 6a09524f7cf76c4fd14595de4684e2393d2c3e7a Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Thu, 20 Feb 2025 22:16:05 +0000
Subject: [PATCH 14/14] Removed less from webpack config

---
 webpack.config.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/webpack.config.js b/webpack.config.js
index 3e1432d31a..fb0ef0dec9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -101,10 +101,6 @@ module.exports = (env = {}) => {
           test: /\.styl(us)?$/,
           use: baseCssLoaders.concat('stylus-loader'),
         },
-        {
-          test: /\.less?$/,
-          use: baseCssLoaders.concat('less-loader'),
-        },
       ],
     },
     resolve: {
@@ -116,7 +112,7 @@ module.exports = (env = {}) => {
         vuetify: path.resolve('node_modules', 'vuetify'),
         static: staticFilesDir,
       },
-      extensions: ['.js', '.vue', '.css', '.less'],
+      extensions: ['.js', '.vue', '.css'],
       modules: [rootNodeModules],
     },
     resolveLoader: {