From 9359797a00f220545adf5aca8063af9ac5efbdc4 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Thu, 19 Sep 2019 02:12:03 -0500
Subject: [PATCH] css: refactor <button> and <input> element styling.

* Style <button> and <input> elements explicitly instead of relying on browser defaults.
* Style jquery ui buttons the same way as regular buttons.
* Add color variables so we can restyle form inputs in dark mode.
---
 app/javascript/src/styles/base/020_base.scss  | 25 +++++++++++++++++++
 app/javascript/src/styles/base/040_colors.css | 19 ++++++++------
 .../src/styles/common/jquery_ui_custom.scss   | 19 +++++++++-----
 3 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/app/javascript/src/styles/base/020_base.scss b/app/javascript/src/styles/base/020_base.scss
index 23de8c808..c0e31b18b 100644
--- a/app/javascript/src/styles/base/020_base.scss
+++ b/app/javascript/src/styles/base/020_base.scss
@@ -56,6 +56,31 @@ img {
   vertical-align: middle;
 }
 
+input, select, textarea {
+  background: var(--form-input-background);
+  border: var(--form-input-border);
+  color: var(--form-input-text-color);
+}
+
+input[type="button"], input[type="submit"], button {
+  border-radius: 3px;
+  padding: 0.25em 1em;
+
+  background: var(--form-button-background);
+  border: var(--form-button-border);
+  color: var(--form-button-text-color);
+
+  &:hover {
+    box-shadow: var(--form-button-hover-box-shadow);
+    background: var(--form-button-hover-background);
+  }
+
+  &:active {
+    box-shadow: var(--form-button-hover-box-shadow);
+    background: var(--form-button-active-background);
+  }
+}
+
 menu {
   margin: 0;
   padding: 0;
diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css
index c0b119ac3..48634ddf3 100644
--- a/app/javascript/src/styles/base/040_colors.css
+++ b/app/javascript/src/styles/base/040_colors.css
@@ -26,6 +26,18 @@
   --responsive-sidebar-submit-button-border: 1px solid rgb(197, 197, 197);
   --responsive-form-input-border: 1px solid #c5c5c5;
 
+  --form-input-text-color: var(--text-color);
+  --form-input-background: var(--body-background-color);
+  --form-input-border: 1px solid #CCC;
+  --form-button-text-color: var(--form-input-text-color);
+  --form-button-background: #EEE;
+  --form-button-border: var(--form-input-border);
+  --form-button-hover-background: #F5F5F5;
+  --form-button-hover-box-shadow: 0px 0px 2px grey;
+  --form-button-active-background: #DDD;
+  --form-button-active-border: var(--form-button-border);
+  --form-button-active-color: var(--form-button-text-color);
+
   --user-upgrade-gold-background-color: #FFF380;
   --user-upgrade-platinum-background-color: #EEE;
   --user-upgrade-table-row-hover-background-color: #FEF;
@@ -168,18 +180,11 @@
   --sidebar-submit-button-color: #EEE;
   --footer-border: 1px solid #EEE;
 
-  --jquery-ui-button-border: 1px solid darkgrey;
-  --jquery-ui-button-background: #f6f6f6;
-  --jquery-ui-button-hover-background: #fefefe;
-  --jquery-ui-button-hover-box-shadow: grey;
-
   --jquery-ui-state-error-background: #FDDFDE;
   --jquery-ui-state-error-border: 1px solid #FBC7C6;
-
   --jquery-ui-state-highlight-background: #FDF5D9;
   --jquery-ui-state-highlight-border: 1px solid #FCEEC1;
   --jquery-ui-state-highlight-color: #363636;
-
   --jquery-ui-dialog-box-shadow: 2px 2px 1px grey;
 
   --dtext-blockquote-border: 1px solid #666;
diff --git a/app/javascript/src/styles/common/jquery_ui_custom.scss b/app/javascript/src/styles/common/jquery_ui_custom.scss
index 2cf603b0b..bb5e0f5ba 100644
--- a/app/javascript/src/styles/common/jquery_ui_custom.scss
+++ b/app/javascript/src/styles/common/jquery_ui_custom.scss
@@ -57,8 +57,9 @@ div.ui-dialog {
 .ui-button {
   margin: 0;
   padding: 0.25em 1em;
-  border: var(--jquery-ui-button-border);
-  background: var(--jquery-ui-button-background);
+  border: var(--form-button-border);
+  background: var(--form-button-background);
+  color: var(--form-button-text-color);
 
   &.sub {
     font-size: 90%;
@@ -68,11 +69,17 @@ div.ui-dialog {
     font-size: 90%;
     padding: 0.25em 0.5em;
   }
-}
 
-.ui-button:hover {
-  box-shadow: var(--jquery-ui-button-hover-box-shadow);
-  background: var(--jquery-ui-button-hover-background);
+  &:hover {
+    box-shadow: var(--form-button-hover-box-shadow);
+    background: var(--form-button-hover-background);
+  }
+
+  &:active {
+    box-shadow: var(--form-button-hover-box-shadow);
+    background: var(--form-button-active-background);
+    color: var(--form-button-text-color);
+  }
 }
 
 .ui-front {