refactor: Now using LESS instead of SASS/SCSS

frontend/package.json

@@ -33,9 +33,9 @@
     "eslint-plugin-vue": "^7.19.1",
     "eslint-webpack-plugin": "^3.0.1",
     "fetch": "^1.1.0",
-    "node-sass": "^6.0.1",
+    "less": "^4.1.2",
+    "less-loader": "^10.2.0",
     "prettier": "^2.4.1",
-    "sass-loader": "^12.1.0",
     "vue-style-loader": "^4.1.3",
     "webpack-cli": "^4.9.0",
     "webpack-dev-server": "^4.3.1"

frontend/src/App.vue

@@ -287,7 +287,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 @import "normalize.css/normalize.css";
 @import "tippy.js/dist/tippy.css";
 @import "tippy.js/animations/scale.css";

frontend/src/components/ActivityItem.vue

@@ -191,7 +191,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 .activity-item-link {
 	color: var(--primary-color) !important;
 
@@ -201,7 +201,7 @@ export default {
 }
 </style>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .activity-item {
 	height: 72px;
 	border: 0.5px var(--light-grey-3) solid;

frontend/src/components/AddToPlaylistDropdown.vue

@@ -171,7 +171,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .no-playlists {
 	text-align: center;
 	margin-top: 10px;

frontend/src/components/AdvancedTable.vue

@@ -1944,7 +1944,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.table-outer-container {
 		.table-container .table {

frontend/src/components/AutoSuggest.vue

@@ -122,7 +122,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode .autosuggest-container {
 	background-color: var(--dark-grey) !important;
 

frontend/src/components/ChristmasLights.vue

@@ -34,7 +34,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .christmas-mode {
 	.christmas-lights {
 		position: absolute;

frontend/src/components/FallingSnow.vue

@@ -9,7 +9,7 @@
 	</div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode .winter-is-coming {
 	background: var(--black);
 }

frontend/src/components/FloatingBox.vue

@@ -135,7 +135,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 .night-mode .floating-box {
 	background-color: var(--dark-grey-2) !important;
 	border: 0 !important;

frontend/src/components/InputHelpBox.vue

@@ -33,7 +33,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .help {
 	margin-top: 0 !important;
 	margin-bottom: 10px !important;

frontend/src/components/Modal.vue

@@ -85,7 +85,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 .night-mode .modal .modal-card {
 	.modal-card-head,
 	.modal-card-foot {

frontend/src/components/PlaylistItem.vue

@@ -72,7 +72,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.playlist-item {
 		background-color: var(--dark-grey-2) !important;

frontend/src/components/ProfilePicture.vue

@@ -48,7 +48,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .profile-picture {
 	width: 100px;
 	height: 100px;

frontend/src/components/PunishmentItem.vue

@@ -103,7 +103,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.punishment-item {
 		background-color: var(--dark-grey-2) !important;

frontend/src/components/Queue.vue

@@ -294,7 +294,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	#queue {
 		background-color: var(--dark-grey-3) !important;

frontend/src/components/ReportInfoItem.vue

@@ -63,7 +63,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.report-info-item {
 		background-color: var(--dark-grey) !important;

frontend/src/components/RunJobDropdown.vue

@@ -94,7 +94,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .nav-dropdown-items {
 	& > span:not(:last-child) .nav-item.button {
 		margin-bottom: 10px !important;

frontend/src/components/SearchQueryItem.vue

@@ -45,7 +45,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 .search-query-actions-enter-active,
 .musare-search-query-actions-enter-active,
 .youtube-search-query-actions-enter-active {
@@ -73,7 +73,7 @@ export default {
 }
 </style>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.search-query-item {
 		background-color: var(--dark-grey-2) !important;

frontend/src/components/Sidebar.vue

@@ -15,7 +15,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .inner-wrapper {
 	overflow: auto;
 	height: 100%;

frontend/src/components/SongItem.vue

@@ -282,7 +282,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.song-item {
 		background-color: var(--dark-grey-2) !important;

frontend/src/components/SongThumbnail.vue

@@ -61,7 +61,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 .thumbnail {
 	min-width: 130px;
 	height: 130px;

frontend/src/components/UserIdToUsername.vue

@@ -35,7 +35,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 a {
 	color: var(--primary-color);
 	&:hover,

frontend/src/components/layout/MainFooter.vue

@@ -38,7 +38,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	footer.footer,
 	footer.footer .container,

frontend/src/components/layout/MainHeader.vue

@@ -161,7 +161,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.nav {
 		background-color: var(--dark-grey-3) !important;

frontend/src/components/modals/BulkActions.vue

@@ -145,7 +145,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .label {
 	text-transform: capitalize;
 }

frontend/src/components/modals/CreatePlaylist.vue

@@ -98,7 +98,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .menu {
 	padding: 0 20px;
 }

frontend/src/components/modals/CreateStation.vue

@@ -125,7 +125,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .station-id {
 	text-transform: lowercase;
 

frontend/src/components/modals/EditNews.vue

@@ -210,13 +210,13 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 .edit-news-modal .modal-card .modal-card-foot .right {
 	column-gap: 5px;
 }
 </style>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.edit-news-modal .modal-card .modal-card-body textarea,
 	.edit-news-modal .modal-card .modal-card-body #preview {

frontend/src/components/modals/EditPlaylist/Tabs/AddSongs.vue

@@ -211,7 +211,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .youtube-tab {
 	.song-query-results {
 		margin-top: 10px;

frontend/src/components/modals/EditPlaylist/Tabs/ImportPlaylists.vue

@@ -123,7 +123,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 #playlist-import-type select {
 	border-radius: 0;
 }

frontend/src/components/modals/EditPlaylist/Tabs/Settings.vue

@@ -128,7 +128,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 @media screen and (max-width: 1300px) {
 	.section {
 		max-width: 100% !important;

frontend/src/components/modals/EditPlaylist/index.vue

@@ -583,7 +583,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.label,
 	p,

frontend/src/components/modals/EditSong/Tabs/Discogs.vue

@@ -293,7 +293,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.api-section,
 	.api-result {

frontend/src/components/modals/EditSong/Tabs/Reports.vue

@@ -307,7 +307,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.report-items .report-item {
 		background-color: var(--dark-grey-3) !important;

frontend/src/components/modals/EditSong/Tabs/Songs.vue

@@ -66,7 +66,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .musare-songs-tab #song-query-results {
 	height: calc(100% - 74px);
 	overflow: auto;

frontend/src/components/modals/EditSong/Tabs/Youtube.vue

@@ -85,7 +85,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .youtube-tab #song-query-results {
 	height: calc(100% - 74px);
 	overflow: auto;

frontend/src/components/modals/EditSong/index.vue

@@ -1734,7 +1734,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.edit-section,
 	.player-footer,

frontend/src/components/modals/EditSongs.vue

@@ -446,7 +446,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode .sidebar {
 	.sidebar-head,
 	.sidebar-foot {

frontend/src/components/modals/EditUser.vue

@@ -272,7 +272,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode .section {
 	background-color: transparent !important;
 }

frontend/src/components/modals/ImportAlbum.vue

@@ -676,7 +676,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 .night-mode {
 	.search-discogs-album,
 	.discogs-album,
@@ -757,7 +757,7 @@ export default {
 }
 </style>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .break {
 	flex-basis: 100%;
 	height: 0;

frontend/src/components/modals/Login.vue

@@ -171,7 +171,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.modal-card,
 	.modal-card-head,

frontend/src/components/modals/ManageStation/Tabs/Playlists.vue

@@ -1142,7 +1142,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.tabs-container .tab-selection .button {
 		background: var(--dark-grey) !important;

frontend/src/components/modals/ManageStation/Tabs/Settings.vue

@@ -544,7 +544,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .station-settings {
 	.settings-buttons {
 		display: flex;
@@ -560,7 +560,7 @@ export default {
 		display: flex;
 		flex-direction: column;
 
-		* >>> .tippy-box[data-theme~="dropdown"] .tippy-content > span {
+		/deep/ * .tippy-box[data-theme~="dropdown"] .tippy-content > span {
 			max-width: 150px !important;
 		}
 

frontend/src/components/modals/ManageStation/Tabs/Songs.vue

@@ -378,7 +378,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.tabs-container .tab-selection .button {
 		background: var(--dark-grey) !important;

frontend/src/components/modals/ManageStation/index.vue

@@ -654,7 +654,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 .manage-station-modal.modal .modal-card {
 	.tab > button {
 		width: 100%;
@@ -670,7 +670,7 @@ export default {
 }
 </style>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.manage-station-modal.modal .modal-card-body {
 		.left-section {

frontend/src/components/modals/Register.vue

@@ -305,7 +305,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.modal-card,
 	.modal-card-head,
@@ -356,7 +356,7 @@ a {
 }
 </style>
 
-<style lang="scss">
+<style lang="less">
 .grecaptcha-badge {
 	z-index: 2000;
 }

frontend/src/components/modals/RemoveAccount.vue

@@ -281,7 +281,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 .confirm-account-removal-modal {
 	.modal-card {
 		width: 650px;
@@ -289,7 +289,7 @@ export default {
 }
 </style>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 h2 {
 	margin: 0;
 }

frontend/src/components/modals/Report.vue

@@ -434,7 +434,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 .report-modal .song-item .thumbnail {
 	min-width: 130px;
 	width: 130px;
@@ -442,7 +442,7 @@ export default {
 }
 </style>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	@media screen and (max-width: 900px) {
 		#right-part {

frontend/src/components/modals/RequestSong.vue

@@ -228,7 +228,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	div {
 		color: var(--dark-grey);

frontend/src/components/modals/ViewReport.vue

@@ -227,7 +227,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.report-sub-items {
 		background-color: var(--dark-grey-2) !important;

frontend/src/components/modals/WhatIsNew.vue

@@ -101,13 +101,13 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 .what-is-news-modal .modal-card .modal-card-foot {
 	column-gap: 0;
 }
 </style>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.modal-card,
 	.modal-card-head,

frontend/src/pages/404.vue

@@ -23,7 +23,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .wrapper {
 	min-height: calc(100vh - 100px);
 	display: flex;

frontend/src/pages/About.vue

@@ -68,7 +68,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.card {
 		background-color: var(--dark-grey-3);

frontend/src/pages/Admin/index.vue

@@ -313,7 +313,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 .christmas-mode .admin-area .christmas-lights {
 	top: 102px !important;
 }
@@ -344,7 +344,7 @@ export default {
 }
 </style>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.tabs {
 		background-color: var(--dark-grey-2);

frontend/src/pages/Admin/tabs/Punishments.vue

@@ -319,7 +319,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.card {
 		background: var(--dark-grey-3);

frontend/src/pages/Admin/tabs/Songs.vue

@@ -800,7 +800,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .song-thumbnail {
 	display: block;
 	max-width: 50px;

frontend/src/pages/Admin/tabs/Statistics.vue

@@ -211,7 +211,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.table {
 		color: var(--light-grey-2);

frontend/src/pages/Admin/tabs/Users.vue

@@ -456,7 +456,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 #page-title {
 	margin: 30px 0;
 }

frontend/src/pages/Banned.vue

@@ -26,7 +26,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .container {
 	display: flex;
 	justify-content: center;

frontend/src/pages/Home.vue

@@ -872,7 +872,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 .christmas-mode .home-page {
 	.header .overlay {
 		background: linear-gradient(
@@ -904,7 +904,7 @@ export default {
 }
 </style>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 * {
 	box-sizing: border-box;
 }

frontend/src/pages/News.vue

@@ -112,7 +112,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	p {
 		color: var(--light-grey-2);

frontend/src/pages/Profile/Tabs/RecentActivity.vue

@@ -163,7 +163,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode #activity-items .activity-item {
 	background-color: var(--dark-grey-2) !important;
 	border: 0 !important;

frontend/src/pages/Profile/index.vue

@@ -195,7 +195,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 @media only screen and (max-width: 1250px) {
 	.bottom-section .content {
 		width: 650px !important;

frontend/src/pages/ResetPassword.vue

@@ -483,7 +483,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.label {
 		color: var(--light-grey-2);

frontend/src/pages/Settings/Tabs/Account.vue

@@ -290,7 +290,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .control {
 	margin-bottom: 2px !important;
 }

frontend/src/pages/Settings/Tabs/Profile.vue

@@ -269,7 +269,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .content .control {
 	margin-bottom: 15px;
 }

frontend/src/pages/Settings/Tabs/Security.vue

@@ -281,7 +281,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 #change-password-button {
 	margin-top: 10px;
 }

frontend/src/pages/Settings/index.vue

@@ -146,7 +146,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 /deep/ .character-counter {
 	display: flex;
 	justify-content: flex-end;

frontend/src/pages/Station/Sidebar/Playlists.vue

@@ -316,7 +316,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 #my-playlists {
 	background-color: var(--white);
 	margin-bottom: 20px;

frontend/src/pages/Station/Sidebar/Users.vue

@@ -99,7 +99,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	#users {
 		background-color: var(--dark-grey-3) !important;

frontend/src/pages/Station/Sidebar/index.vue

@@ -73,7 +73,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	#tab-selection .button {
 		background: var(--dark-grey);

frontend/src/pages/Station/index.vue

@@ -2387,7 +2387,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 #stationPlayer {
 	position: absolute;
 	top: 0;
@@ -2415,7 +2415,7 @@ export default {
 }
 </style>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 #page-loader-container {
 	height: inherit;
 

frontend/src/pages/Team.vue

@@ -258,7 +258,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .night-mode {
 	.group .card {
 		background-color: var(--dark-grey-3);

frontend/webpack.common.js

@@ -130,7 +130,7 @@ module.exports = {
 				exclude: /node_modules/
 			},
 			{
-				test: /\.scss$/,
+				test: /\.less$/i,
 				exclude: /node_modules/,
 				use: [
 					"vue-style-loader",
@@ -140,7 +140,7 @@ module.exports = {
 							url: false
 						}
 					},
-					"sass-loader"
+					"less-loader"
 				]
 			}
 		]