changes to css to change button color on selected/hover

ScottLogic · Feb 9, 2024 · c7767d1 · c7767d1
1 parent 8f84648
commit c7767d1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
@@ -33,11 +33,11 @@
 	--action-button-disabled-text-colour: #111;
 
 	/* level buttons */
-	--level-button-colour: var(--main-text-colour);
+	--level-button-colour: var(--accent-background-colour);
 	--level-button-colour-disabled: #777;
 	--level-button-border-colour: var(--accent-border-colour);
 	--level-button-border-colour-disabled: #aaaaaa80;
-	--level-button-background-colour-selected: var(--accent-background-colour);
+	--level-button-background-colour-selected: var(--main-text-colour);
 	--level-button-background-colour-hover: #11484b;
 
 	/* level banner */

diff --git a/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css b/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css
@@ -11,8 +11,7 @@
 	padding: 1rem;
 	border: 0.125rem solid var(--level-button-border-colour);
 	border-radius: 0;
-	background-color: transparent;
-	color: var(--level-button-colour);
+	background-color: var(--level-button-colour);
 	font-size: 1.875rem;
 }
 
@@ -22,6 +21,7 @@
 
 .level-button.selected {
 	background-color: var(--level-button-background-colour-selected);
+	color: var(--level-button-colour);
 }
 
 .level-button.disabled {
@@ -33,3 +33,8 @@
 .level-button[aria-disabled='false']:hover {
 	background-color: var(--level-button-background-colour-hover);
 }
+
+.level-button.selected:hover {
+	background-color: var(--level-button-background-colour-selected);
+	color: var(--level-button-colour);
+}