Use deep selector

Signed-off-by: Marco <marcoambrosini@icloud.com>

31 files changed, 88 insertions, 95 deletions

diff --git a/src/App.vue b/src/App.vue
index 68dbbeeea..c139f1255 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -665,11 +665,11 @@ export default {
 
 .content {
 	&.in-call {
-		::v-deep .app-content {
+		:deep(.app-content) {
 			background-color: transparent;
 		}
 
-		&:hover ::v-deep .app-navigation-toggle {
+		&:hover :deep(.app-navigation-toggle) {
 			background-color: rgba(0, 0, 0, .1) !important;
 
 			&:hover {
@@ -677,7 +677,7 @@ export default {
 			}
 		}
 
-		::v-deep .app-navigation-toggle {
+		:deep(.app-navigation-toggle) {
 			/* Force white handle when inside a call */
 			color: #D8D8D8;
 
@@ -691,7 +691,7 @@ export default {
 	&:fullscreen {
 		padding-top: 0;
 
-		::v-deep .app-sidebar {
+		:deep(.app-sidebar) {
 			height: 100vh !important;
 		}
 	}
diff --git a/src/PublicShareAuthSidebar.vue b/src/PublicShareAuthSidebar.vue
index d33cbcd25..7615149c1 100644
--- a/src/PublicShareAuthSidebar.vue
+++ b/src/PublicShareAuthSidebar.vue
@@ -256,14 +256,14 @@ export default {
 	background-color: $color-call-background;
 }
 
-#talk-sidebar #call-container ::v-deep .videoContainer {
+#talk-sidebar #call-container :deep(.videoContainer) {
 	/* The video container has some small padding to prevent the video from
 	 * reaching the edges, but it also uses "width: 100%", so the padding should
 	 * be included in the full width of the element. */
 	box-sizing: border-box;
 }
 
-#talk-sidebar #call-container ::v-deep .videoContainer.promoted video {
+#talk-sidebar #call-container :deep(.videoContainer.promoted video) {
 	/* Base the size of the video on its width instead of on its height;
 	 * otherwise the video could appear in full height but cropped on the sides
 	 * due to the space available in the sidebar being typically larger in
@@ -272,7 +272,7 @@ export default {
 	height: auto;
 }
 
-#talk-sidebar #call-container ::v-deep .nameIndicator {
+#talk-sidebar #call-container :deep(.nameIndicator) {
 	/* The name indicator has some small padding to prevent the name from
 	 * reaching the edges, but it also uses "width: 100%", so the padding should
 	 * be included in the full width of the element. */
@@ -291,12 +291,12 @@ export default {
 	height: 50%;
 }
 
-#talk-sidebar ::v-deep .wrapper {
+#talk-sidebar :deep(.wrapper) {
 	margin-top: 0;
 }
 
 /* Restore rules from style.scss overriden by guest.css for the sidebar. */
-#talk-sidebar ::v-deep a {
+#talk-sidebar :deep(a) {
 	color: var(--color-main-text);
 	font-weight: inherit;
 }
diff --git a/src/PublicShareSidebar.vue b/src/PublicShareSidebar.vue
index ffaedab5e..16877be23 100644
--- a/src/PublicShareSidebar.vue
+++ b/src/PublicShareSidebar.vue
@@ -352,14 +352,14 @@ export default {
 	height: unset;
 }
 
-#talk-sidebar #call-container ::v-deep .videoContainer {
+#talk-sidebar #call-container :deep(.videoContainer) {
 	/* The video container has some small padding to prevent the video from
 	 * reaching the edges, but it also uses "width: 100%", so the padding should
 	 * be included in the full width of the element. */
 	box-sizing: border-box;
 }
 
-#talk-sidebar #call-container ::v-deep .videoContainer.promoted video {
+#talk-sidebar #call-container :deep(.videoContainer.promoted video) {
 	/* Base the size of the video on its width instead of on its height;
 	 * otherwise the video could appear in full height but cropped on the sides
 	 * due to the space available in the sidebar being typically larger in
@@ -368,7 +368,7 @@ export default {
 	height: auto;
 }
 
-#talk-sidebar #call-container ::v-deep .nameIndicator {
+#talk-sidebar #call-container :deep(.nameIndicator) {
 	/* The name indicator has some small padding to prevent the name from
 	 * reaching the edges, but it also uses "width: 100%", so the padding should
 	 * be included in the full width of the element. */
diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
index 137ce255c..ee33fbc49 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
@@ -178,7 +178,7 @@ export default {
 }
 
 .modal-mask__participants-step {
-	::v-deep .modal-container {
+	:deep(.modal-container) {
 		overflow: hidden !important;
 		height: 100% !important;
 	}
diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
index 690f98912..61e9cba73 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
@@ -360,7 +360,7 @@ export default {
 }
 
 // TODO: upstream collapse icon position fix
-::v-deep .icon-collapse {
+:deep(.icon-collapse) {
 	position: absolute !important;
 	left: 0;
 }
diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index 01afdf043..994004214 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -761,7 +761,7 @@ export default {
 	display: none;
 }
 
-::v-deep video {
+:deep(video) {
 	z-index: 0;
 	/* default filter for slightly better look */
 	/* Disabled for now as it causes a huuuuge performance drop.
@@ -772,30 +772,30 @@ export default {
 	vertical-align: top; /* fix white line below video */
 }
 
-#videos .videoContainer ::v-deep .avatardiv {
+#videos .videoContainer :deep(.avatardiv) {
 	box-shadow: 0 0 15px var(--color-box-shadow);
 }
 
-.participants-1 #videos .videoContainer ::v-deep video,
-.participants-2 #videos .videoContainer ::v-deep video {
+.participants-1 #videos .videoContainer :deep(video),
+.participants-2 #videos .videoContainer :deep(video) {
 	padding: 0;
 }
 
-.videoContainer ::v-deep .avatar-container .avatardiv {
+.videoContainer :deep(.avatar-container .avatardiv) {
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
 }
 
-.videoContainer.promoted ::v-deep .avatar-container {
+.videoContainer.promoted :deep(.avatar-container) {
 	top: 30%;
 }
 
-.videoContainer.promoted ::v-deep .avatar-container + .nameIndicator {
+.videoContainer.promoted :deep(.avatar-container + .nameIndicator) {
 	display: none;
 }
 
-.videoContainer.promoted ::v-deep .mediaIndicator {
+.videoContainer.promoted :deep(.mediaIndicator) {
 	display: none !important;
 }
 
@@ -806,8 +806,8 @@ export default {
 	}
 }
 
-.participants-1 .videoView ::v-deep video,
-.participants-2 .videoView ::v-deep video {
+.participants-1 .videoView :deep(video),
+.participants-2 .videoView :deep(video) {
 	position: absolute;
 	max-height: 100% !important;
 	bottom: 0;
@@ -822,7 +822,7 @@ export default {
 	overflow: hidden;
 }
 
-::v-deep .nameIndicator {
+:deep(.nameIndicator) {
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -837,30 +837,30 @@ export default {
 	text-overflow: ellipsis;
 }
 
-::v-deep .videoView .nameIndicator {
+:deep(.videoView .nameIndicator) {
 	padding: 0;
 	overflow: visible;
 }
 
-.participants-1 .videoView ::v-deep .nameIndicator,
-.participants-2 .videoView ::v-deep .nameIndicator {
+.participants-1 .videoView :deep(.nameIndicator),
+.participants-2 .videoView :deep(.nameIndicator) {
 	left: initial;
 	right: 0;
 }
 
-.participants-1 .videoView ::v-deep .avatar-container,
-.participants-2 .videoView ::v-deep .avatar-container {
+.participants-1 .videoView :deep(.avatar-container),
+.participants-2 .videoView :deep(.avatar-container) {
 	left: initial;
 	right: 0;
 }
 
 /* ellipsize name in 1on1 calls */
-.participants-2 ::v-deep .videoContainer.promoted + .videoContainer-dummy .nameIndicator {
+.participants-2 :deep(.videoContainer.promoted + .videoContainer-dummy .nameIndicator) {
 	padding: 12px 35%;
 }
 
-#videos .videoContainer.speaking:not(.videoView) ::v-deep .nameIndicator,
-#videos .videoContainer.videoView.speaking ::v-deep .nameIndicator .microphone-icon {
+#videos .videoContainer.speaking:not(.videoView) :deep(.nameIndicator),
+#videos .videoContainer.videoView.speaking :deep(.nameIndicator .microphone-icon) {
 	animation: pulse 1s;
 	animation-iteration-count: infinite;
 }
diff --git a/src/components/ConversationSettings/ConversationPermissionsSettings.vue b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
index 2c7ade67e..0838665b0 100644
--- a/src/components/ConversationSettings/ConversationPermissionsSettings.vue
+++ b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
@@ -253,7 +253,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .mx-input {
+:deep(.mx-input) {
 	margin: 0;
 }
 
diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
index adccf9d9d..2e80672b8 100644
--- a/src/components/ConversationSettings/ConversationSettingsDialog.vue
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -252,7 +252,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep button.icon {
+:deep(button.icon) {
 	height: 32px;
 	width: 32px;
 	display: inline-block;
@@ -260,23 +260,23 @@ export default {
 	vertical-align: middle;
 }
 
-::v-deep .modal-container {
+:deep(.modal-container) {
 	display: flex !important;
 }
 
-::v-deep .app-settings-section__hint {
+:deep(.app-settings-section__hint) {
 	color: var(--color-text-lighter);
 	padding: 8px 0;
 }
 
-::v-deep .app-settings-section__subtitle,
+:deep(.app-settings-section__subtitle),
 .app-settings-section__subtitle {
 	font-weight: bold;
 	font-size: var(--default-font-size);
 	margin: calc(var(--default-grid-baseline) * 4) 0 var(--default-grid-baseline) 0;
 }
 
-::v-deep .app-settings-subsection {
+:deep(.app-settings-subsection) {
 	margin-top: 25px;
 
 	&:first-child {
diff --git a/src/components/ConversationSettings/EditableTextField.vue b/src/components/ConversationSettings/EditableTextField.vue
index 1b9aa3884..ac49582b9 100644
--- a/src/components/ConversationSettings/EditableTextField.vue
+++ b/src/components/ConversationSettings/EditableTextField.vue
@@ -279,7 +279,7 @@ export default {
 }
 
 // Restyle NcRichContenteditable component from our library.
-::v-deep .rich-contenteditable__input {
+:deep(.rich-contenteditable__input) {
 	align-self: flex-start;
 	min-height: var(--default-line-height);
 	max-height: unset;
diff --git a/src/components/ConversationSettings/ExpirationSettings.vue b/src/components/ConversationSettings/ExpirationSettings.vue
index 532cc6907..0802ff359 100644
--- a/src/components/ConversationSettings/ExpirationSettings.vue
+++ b/src/components/ConversationSettings/ExpirationSettings.vue
@@ -133,7 +133,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .mx-input {
+:deep(.mx-input) {
 	margin: 0;
 }
 </style>
diff --git a/src/components/ConversationSettings/LobbySettings.vue b/src/components/ConversationSettings/LobbySettings.vue
index 8d6a681cd..f4c8542cb 100644
--- a/src/components/ConversationSettings/LobbySettings.vue
+++ b/src/components/ConversationSettings/LobbySettings.vue
@@ -189,7 +189,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .mx-input {
+:deep(.mx-input) {
 	margin: 0;
 }
 </style>
diff --git a/src/components/ConversationSettings/Matterbridge/BridgePart.vue b/src/components/ConversationSettings/Matterbridge/BridgePart.vue
index a86184b18..e3cd9fa5b 100644
--- a/src/components/ConversationSettings/Matterbridge/BridgePart.vue
+++ b/src/components/ConversationSettings/Matterbridge/BridgePart.vue
@@ -244,7 +244,7 @@ input {
 }
 
 // Force action buttons to be 44px tall;
-::v-deep .action-item__menutoggle {
+:deep(.action-item__menutoggle) {
 	height: $clickable-area !important;
 }
 
diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
index 9083bf199..f0c2ce6cb 100644
--- a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
+++ b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
@@ -642,14 +642,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .icon-multiselect-service {
+:deep(.icon-multiselect-service) {
 	width: 16px !important;
 	height: 16px !important;
 	margin-right: 10px;
 	filter: var(--background-invert-if-dark);
 }
 
-::v-deep .modal-container {
+:deep(.modal-container) {
 	height: 700px;
 }
 
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index 1376e4997..7e211061a 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -440,12 +440,12 @@ export default {
 
 <style lang="scss" scoped>
 
-::v-deep .action-text__title {
+:deep(.action-text__title) {
 	margin-left: 12px;
 }
 
 .critical {
-	::v-deep .action-button {
+	:deep(.action-button) {
 		color: var(--color-error) !important;
 	}
 }
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 3213881c4..59179512a 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -672,7 +67