refactor: Replace deprecated /deep/ selector with :deep()

frontend/src/components/AdvancedTable.vue

@@ -2120,7 +2120,7 @@ export default {
 							border-width: 0 0 1px;
 						}
 
-						/deep/ .row-options {
+						:deep(.row-options) {
 							display: flex;
 							justify-content: space-evenly;
 
@@ -2319,7 +2319,7 @@ export default {
 			width: 100%;
 		}
 		& > input,
-		/deep/ & > div > input,
+		:deep(& > div > input),
 		& > select,
 		& > .button,
 		&.label {
@@ -2363,7 +2363,7 @@ export default {
 				&:nth-child(2) > select {
 					border-radius: 0 @border-radius 0 0;
 				}
-				/deep/ &:nth-child(3) {
+				:deep(&:nth-child(3)) {
 					& > input,
 					& > div > input,
 					& > select {
@@ -2397,7 +2397,7 @@ export default {
 	}
 }
 
-/deep/ .bulk-popup {
+:deep(.bulk-popup) {
 	display: flex;
 	position: fixed;
 	flex-direction: row;

frontend/src/components/ReportInfoItem.vue

@@ -78,7 +78,7 @@ export default {
 		height: 45px;
 		margin-right: 10px;
 
-		/deep/ .profile-picture.using-initials span {
+		:deep(.profile-picture.using-initials span) {
 			font-size: calc(
 				45px / 5 * 2
 			); // 2/5th of .profile-picture height/width

frontend/src/components/SongItem.vue

@@ -294,7 +294,7 @@ export default {
 	}
 }
 
-/deep/ #nav-dropdown {
+:deep(#nav-dropdown) {
 	margin-top: 36px;
 	width: 0;
 	height: 0;

frontend/src/components/modals/BulkActions.vue

@@ -168,7 +168,7 @@ export default {
 	}
 }
 
-/deep/ .autosuggest-container {
+:deep(.autosuggest-container) {
 	width: calc(100% - 40px);
 	top: unset;
 }

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

@@ -676,7 +676,7 @@ export default {
 			max-height: unset !important;
 		}
 
-		/deep/ .section {
+		:deep(.section) {
 			max-width: 100% !important;
 		}
 	}

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

@@ -2166,7 +2166,7 @@ export default {
 	width: 200px;
 }
 
-/deep/ .autosuggest-container {
+:deep(.autosuggest-container) {
 	top: unset;
 }
 </style>

frontend/src/components/modals/EditSongs.vue

@@ -518,7 +518,7 @@ export default {
 			align-items: center;
 			column-gap: 8px;
 
-			/deep/ .song-item {
+			:deep(.song-item) {
 				.item-icon {
 					margin-right: 10px;
 					cursor: pointer;

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

@@ -560,7 +560,7 @@ export default {
 		display: flex;
 		flex-direction: column;
 
-		/deep/ * .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/ViewReport.vue

@@ -249,7 +249,7 @@ export default {
 		}
 	}
 
-	/deep/ .report-info-item {
+	:deep(.report-info-item) {
 		justify-content: flex-start;
 
 		.item-title-description {

frontend/src/pages/Admin/index.vue

@@ -356,11 +356,11 @@ export default {
 	}
 }
 
-/deep/ .container {
+:deep(.container) {
 	position: relative;
 }
 
-/deep/ .box {
+:deep(.box) {
 	box-shadow: @box-shadow;
 	display: block;
 
@@ -467,14 +467,14 @@ export default {
 }
 
 @media screen and (min-width: 980px) {
-	/deep/ .container {
+	:deep(.container) {
 		margin: 0 auto;
 		max-width: 960px;
 	}
 }
 
 @media screen and (min-width: 1180px) {
-	/deep/ .container {
+	:deep(.container) {
 		max-width: 1200px;
 	}
 }

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

@@ -785,7 +785,7 @@ export default {
 	margin: 0 auto;
 }
 
-/deep/ .bulk-popup .bulk-actions {
+:deep(.bulk-popup .bulk-actions) {
 	.verify-songs-icon {
 		color: var(--green);
 	}

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

@@ -465,7 +465,7 @@ h2 {
 	max-height: 50px !important;
 }
 
-/deep/ .profile-picture.using-initials span {
+:deep(.profile-picture.using-initials span) {
 	font-size: 20px; // 2/5th of .profile-picture height/width
 }
 </style>

frontend/src/pages/Profile/index.vue

@@ -412,7 +412,7 @@ export default {
 		}
 	}
 
-	/deep/ .content {
+	:deep(.content) {
 		width: 800px;
 		max-width: 100%;
 		background-color: var(--white);
@@ -455,7 +455,7 @@ export default {
 		.activity-type-icon {
 		color: var(--light-grey-2);
 	}
-	/deep/ .content {
+	:deep(.content) {
 		box-shadow: 0;
 	}
 }

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

@@ -306,7 +306,7 @@ export default {
 			height: 50px;
 		}
 
-		/deep/ .profile-picture.using-initials span {
+		:deep(.profile-picture.using-initials span) {
 			font-size: 20px; // 2/5th of .profile-picture height/width
 		}
 	}

frontend/src/pages/Settings/index.vue

@@ -153,7 +153,7 @@ export default {
 	}
 }
 
-/deep/ .character-counter {
+:deep(.character-counter) {
 	display: flex;
 	justify-content: flex-end;
 	height: 0;
@@ -163,7 +163,7 @@ export default {
 	margin-top: 32px;
 	padding: 24px;
 
-	/deep/ .row {
+	:deep(.row) {
 		*:not(:last-child) {
 			margin-right: 5px;
 		}
@@ -227,7 +227,7 @@ export default {
 		}
 	}
 
-	/deep/ .content {
+	:deep(.content) {
 		margin: 24px 0;
 		height: fit-content;
 

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

@@ -168,7 +168,7 @@ export default {
 					height: 35px;
 				}
 
-				/deep/ .profile-picture.using-initials span {
+				:deep(.profile-picture.using-initials span) {
 					font-size: calc(
 						35px / 5 * 2
 					); // 2/5th of .profile-picture height/width

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

@@ -114,17 +114,17 @@ export default {
 	}
 }
 
-/deep/ .nothing-here-text {
+:deep(.nothing-here-text) {
 	height: 100%;
 }
 
-/deep/ .tab {
+:deep(.tab) {
 	.nothing-here-text:not(:only-child) {
 		height: calc(100% - 40px);
 	}
 }
 
-/deep/ .tab-actionable-button {
+:deep(.tab-actionable-button) {
 	width: calc(100% - 20px);
 	height: 40px;
 	border-radius: @border-radius;
@@ -147,7 +147,7 @@ export default {
 	}
 }
 
-/deep/ .scrollable-list {
+:deep(.scrollable-list) {
 	width: 100%;
 	max-height: calc(100% - 40px - 20px);
 	overflow: auto;

frontend/src/pages/Station/index.vue

@@ -3004,7 +3004,7 @@ export default {
 	}
 }
 
-/deep/ .nothing-here-text {
+:deep(.nothing-here-text) {
 	display: flex;
 	align-items: center;
 	justify-content: center;

frontend/src/pages/Team.vue

@@ -345,7 +345,7 @@ h2 {
 				height: 45px;
 			}
 
-			/deep/ .profile-picture.using-initials span {
+			:deep(.profile-picture.using-initials span) {
 				font-size: calc(
 					45px / 5 * 2
 				); // 2/5th of .profile-picture height/width