summaryrefslogtreecommitdiff
path: root/styles
diff options
context:
space:
mode:
authorKyle Gunger <kgunger12@gmail.com>2022-07-20 10:58:42 -0400
committerKyle Gunger <kgunger12@gmail.com>2022-07-20 10:58:42 -0400
commit68db9abc7a02c78a0f170003c32d1fcd796eb212 (patch)
tree602e9be8f4641991a9666315426a8ca10807c78c /styles
parent5207f04d5b775bf4805d83c81aaad1cfcf3fe68a (diff)
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
Diffstat (limited to 'styles')
-rw-r--r--styles/client/card.css10
-rw-r--r--styles/input.css8
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';