Replace var with let + visual tweaks

- Replace var with let in most of my code
- No longer bring cards to forfront of deck when hovering
- Tweaks for dropdown selector input

2 files changed, 12 insertions, 6 deletions

diff --git a/styles/client/card.css b/styles/client/card.css
index 9e7c558..f8c6438 100644
--- a/styles/client/card.css
+++ b/styles/client/card.css
@@ -21,8 +21,6 @@ card
 card:hover
 {
 	box-shadow: 0 0 10px var(--card-hover);
-
-	z-index: 4;
 }
 
 card > * {
@@ -152,6 +150,14 @@ deck:hover {
 	border: 3px solid var(--deck-hover);
 }
 
+deck:hover > card {
+	opacity: 0.5;
+}
+
+deck:hover > card:hover {
+	opacity: 1;
+}
+
 /* Deck modes */
 
 deck[mode="stack"] > card {
diff --git a/styles/input.css b/styles/input.css
index 0b56982..f39a7f1 100644
--- a/styles/input.css
+++ b/styles/input.css
@@ -238,7 +238,7 @@ div.input-select > div[selected=true]
 	display: block;
 }
 
-div.input-container:focus > div.input-select
+div.input-container:focus-within > div.input-select
 {
 	transform: translate(0, 2em);
 
@@ -249,7 +249,7 @@ div.input-container:focus > div.input-select
 	background-color: var(--input-bg-select-active);
 }
 
-div.input-container:focus > div.input-select > div
+div.input-container:focus-within > div.input-select > div
 {
 	pointer-events: all;
 	display: block;
@@ -257,13 +257,13 @@ div.input-container:focus > div.input-select > div
 	width: 6em;
 }
 
-div.input-container:focus > div.input-select > div:hover
+div.input-container:focus-within > div.input-select > div:hover
 {
 	background-color: var(--input-bg-select-hover);
 	color: var(--input-color-select-hover);
 }
 
-div.input-container:focus > div.input-select > div[selected=true]:after
+div.input-container:focus-within > div.input-select > div[selected=true]:after
 {
 	font-family: "IcoFont";
 	content: '\eed8';