Removes nested styles for OBS browser source compatibility.

mntone · Jun 21, 2024 · 66181f9 · 66181f9
1 parent 1f506db
commit 66181f9
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 40 deletions.
diff --git a/src/modules/core/components/CheckBox/styles.css b/src/modules/core/components/CheckBox/styles.css
@@ -22,22 +22,21 @@
 
 	background-color: var(--ctl-bg);
 	transition: var(--ctl-transition);
-
-	&:hover {
-		background-color: var(--ctl-bg--hover);
-	}
-	&[data-state=checked] {
-		background-color: var(--ctl-bg-active);
-	}
-	&[data-state=checked]:hover {
-		background-color: var(--ctl-bg-active--hover);
-	}
-	&:focus-visible {
-		outline: 2px solid #FFFC;
-	}
-	&[disabled] {
-		background-color: var(--ctl-bg--disable);
-	}
+}
+.CheckBox-mark:hover {
+	background-color: var(--ctl-bg--hover);
+}
+.CheckBox-mark[data-state=checked] {
+	background-color: var(--ctl-bg-active);
+}
+.CheckBox-mark[data-state=checked]:hover {
+	background-color: var(--ctl-bg-active--hover);
+}
+.CheckBox-mark:focus-visible {
+	outline: 2px solid #FFFC;
+}
+.CheckBox-mark[disabled] {
+	background-color: var(--ctl-bg--disable);
 }
 
 .CheckBox-icon {

diff --git a/src/modules/core/components/Select/styles.css b/src/modules/core/components/Select/styles.css
@@ -16,17 +16,16 @@
 	transition: var(--ctl-transition);
 
 	user-select: none;
-
-	&:hover {
-		background-color: var(--ctl-bg--hover);
-	}
-	&:focus-visible {
-		outline: 2px solid #FFFC;
-	}
-	&[disabled] {
-		color: #FFF9;
-		background-color: var(--ctl-bg--disable);
-	}
+}
+.Select:hover {
+	background-color: var(--ctl-bg--hover);
+}
+.Select:focus-visible {
+	outline: 2px solid #FFFC;
+}
+.Select[disabled] {
+	color: #FFF9;
+	background-color: var(--ctl-bg--disable);
 }
 
 .Select-icon {
@@ -69,15 +68,13 @@ body:not(.env-nonblur) .Select-content {
 	border-radius: 6px;
 
 	user-select: none;
-
-	&:last-child {
-		margin-bottom: 0;
-	}
-
-	&[data-highlighted] {
-		color: #000;
-		background-color: #F8E1DD;
-	}
+}
+.SelectItem:last-child {
+	margin-bottom: 0;
+}
+.SelectItem[data-highlighted] {
+	color: #000;
+	background-color: #F8E1DD;
 }
 
 @media (any-pointer: coarse) {

diff --git a/src/modules/settings/styles.css b/src/modules/settings/styles.css
@@ -76,13 +76,12 @@ body:not(.env-nonblur) .Dialog-content {
 	color: inherit;
 	background-color: transparent;
 	transition: var(--ctl-transition);
-
-	&[data-state=active] {
+}
+.Dialog-tabitem[data-state=active] {
 		background-color: var(--ctl-bg);
 	}
-	&:hover {
+.Dialog-tabitem:hover {
 		background-color: var(--ctl-bg--hover);
-	}
 }
 
 @keyframes tabContentShow {