From 68db9abc7a02c78a0f170003c32d1fcd796eb212 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Wed, 20 Jul 2022 10:58:42 -0400 Subject: 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 --- styles/client/card.css | 10 ++++++++-- styles/input.css | 8 ++++---- 2 files changed, 12 insertions(+), 6 deletions(-) (limited to 'styles') 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'; -- cgit v1.2.3