Styling changes to themes

mclemente · mclemente · commit e48b5836ece5 · 2025-05-03T02:55:06.000-03:00
diff --git a/src/styles/_language-selector.scss b/src/styles/_language-selector.scss
@@ -4,13 +4,10 @@
 			text-decoration: line-through;
 		}
 		.ts-control {
-			background: rgba(0, 0, 0, 0.1);
+			background: var(--color-cool-5-75);
 			border: none;
 			border-radius: 4px;
 			padding: 1px 8px;
-			&:hover {
-				background: rgba(0, 0, 0, 0.35);
-			}
 		}
 		.ts-dropdown {
 			bottom: 100%;
@@ -19,6 +16,9 @@
 				padding: 1px 8px;
 			}
 		}
+		&.focus .ts-control, .ts-control:hover {
+			background: var(--color-cool-5);
+		}
 		&.input-active .ts-control {
 			cursor: pointer;
 		}
diff --git a/src/styles/polyglot.scss b/src/styles/polyglot.scss
@@ -52,15 +52,15 @@
 			.ts-wrapper {
 				.ts-control {
 					background: rgba(255, 255, 255, 0.6);
-					&:hover {
-						background: rgba(255, 255, 255, 0.85);
-					}
 				}
 				.ts-dropdown {
 					.optgroup-header {
 						border-bottom: solid 1px;
 					}
 				}
+				&.focus .ts-control, .ts-control:hover {
+					background: rgba(255, 255, 255, 0.85);
+				}
 			}
 		}
 	}

Original file line number	Diff line number	Diff line change
`@@ -4,13 +4,10 @@`
`4`	`4`	`text-decoration: line-through;`
`5`	`5`	`}`
`6`	`6`	`.ts-control {`
`7`		`- background: rgba(0, 0, 0, 0.1);`
	`7`	`+ background: var(--color-cool-5-75);`
`8`	`8`	`border: none;`
`9`	`9`	`border-radius: 4px;`
`10`	`10`	`padding: 1px 8px;`
`11`		`- &:hover {`
`12`		`- background: rgba(0, 0, 0, 0.35);`
`13`		`- }`
`14`	`11`	`}`
`15`	`12`	`.ts-dropdown {`
`16`	`13`	`bottom: 100%;`
`@@ -19,6 +16,9 @@`
`19`	`16`	`padding: 1px 8px;`
`20`	`17`	`}`
`21`	`18`	`}`
	`19`	`+ &.focus .ts-control, .ts-control:hover {`
	`20`	`+ background: var(--color-cool-5);`
	`21`	`+ }`
`22`	`22`	`&.input-active .ts-control {`
`23`	`23`	`cursor: pointer;`
`24`	`24`	`}`
Original file line number	Diff line number	Diff line change
`@@ -52,15 +52,15 @@`
`52`	`52`	`.ts-wrapper {`
`53`	`53`	`.ts-control {`
`54`	`54`	`background: rgba(255, 255, 255, 0.6);`
`55`		`- &:hover {`
`56`		`- background: rgba(255, 255, 255, 0.85);`
`57`		`- }`
`58`	`55`	`}`
`59`	`56`	`.ts-dropdown {`
`60`	`57`	`.optgroup-header {`
`61`	`58`	`border-bottom: solid 1px;`
`62`	`59`	`}`
`63`	`60`	`}`
	`61`	`+ &.focus .ts-control, .ts-control:hover {`
	`62`	`+ background: rgba(255, 255, 255, 0.85);`
	`63`	`+ }`
`64`	`64`	`}`
`65`	`65`	`}`
`66`	`66`	`}`