From 917764fd71b6f7e30d90316cc47ea387c5fcd594 Mon Sep 17 00:00:00 2001
From: cryptogopher <cryptogopher@noreply.me>
Date: Mon, 22 Jan 2024 02:02:15 +0100
Subject: [PATCH] Unify table button styling

---
 app/assets/stylesheets/application.css | 29 +++++++++++++++++---------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index b7ece40..9fe9f70 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -71,23 +71,25 @@ textarea {
 /* gray - target for interaction with keyboard */
 /* TODO: remove non-font-size rems from buttons/inputs below */
 a,
-button {
-  white-space: nowrap;
-}
-a,
 button,
 input[type=submit] {
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.button,
+button,
+input[type=submit],
+.tab {
   align-items: center;
   color: var(--color-gray);
-  cursor: pointer;
+  display: flex;
   fill: var(--color-gray);
   font-weight: bold;
-  text-decoration: none;
 }
 .button,
 button,
 input[type=submit] {
-  display: flex;
   font-size: 0.8rem;
   padding: 0.4em;
   width: fit-content;
@@ -183,7 +185,6 @@ input[type=text]:read-only {
 }
 .navigation > .tab {
   border-bottom: solid 2px var(--color-nav-gray);
-  display: flex;
   flex: 1;
   font-size: 1rem;
   justify-content: center;
@@ -406,10 +407,18 @@ table.items input[type=submit] {
   font-weight: normal;
   padding: 0.3em;
 }
-table.items select:not(:hover),
+/* TODO: find a way (layers?) to style inputs differently while making sure
+ * hover works properly without using :not(:hover) selectors here. */
 table.items .button:not(:hover),
-table.items button:not(:hover) {
+table.items button:not(:hover),
+table.items input:not(:hover),
+table.items select:not(:hover) {
   border-color: var(--color-border-gray);
+}
+table.items .button:not(:hover),
+table.items button:not(:hover),
+table.items input[type=submit]:not(:hover),
+table.items select:not(:hover) {
   color: var(--color-table-gray);
 }
 table.items select:focus-within,