From 0ae3d18c6e668d0e27cc548a0adfebcf817b6f7e Mon Sep 17 00:00:00 2001
From: Caleb Allen <caleb@caleballen.com>
Date: Tue, 20 Feb 2018 08:37:44 -0800
Subject: [PATCH] Hover Box Indicator

Adds box-shadow on hover to indicate the exact option the user is selecting. Helpful in desktop mode.
---
 css/quickref.css | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/css/quickref.css b/css/quickref.css
index be2032e4..226db074 100644
--- a/css/quickref.css
+++ b/css/quickref.css
@@ -78,6 +78,7 @@
     vertical-align: top;
     box-sizing: border-box;
     cursor: pointer;
+    border-radius: 3px;
 }
 
 .item-icon {
@@ -166,6 +167,39 @@
     color: ForestGreen;
 }
 
+/* ------------------------------------------------------------------------- */
+/* Hover Indicators of Clickable Areas */
+/* ------------------------------------------------------------------------- */
+
+#section-movement .item:hover {
+   transition: box-shadow,text-decoration 0.25s ease-in-out;
+   box-shadow: rgba(128,0,0,0.4) -2px 2px 3px 0px;
+}
+
+#section-action .item:hover {
+   transition: box-shadow,text-decoration 0.25s ease-in-out;
+   box-shadow: rgba(0,0,0,0.4) -2px 2px 3px 0px;
+}
+
+#section-bonus-action .item:hover {
+   transition: box-shadow,text-decoration 0.25s ease-in-out;
+   box-shadow: rgba(29,0,51,0.4) -2px 2px 3px 0px;
+}
+
+#section-reaction .item:hover {
+   transition: box-shadow,text-decoration 0.25s ease-in-out;
+   box-shadow: rgba(85,107,47,0.4) -2px 2px 3px 0px;
+}
+
+#section-condition .item:hover {
+   transition: box-shadow,text-decoration 0.25s ease-in-out;
+   box-shadow: rgba(70,13,13,0.4) -2px 2px 3px 0px;
+}
+
+#section-environment .item:hover {
+   transition: box-shadow,text-decoration 0.25s ease-in-out;
+   box-shadow: rgba(13,55,13,0.4) -2px 2px 3px 0px;
+}
 
 /* ------------------------------------------------------------------------- */
 /* Page container */