From: Dan Wells <dbw2@calvin.edu>
Date: Wed, 25 Sep 2013 20:46:31 +0000 (-0400)
Subject: TPAC: Consolidate and simplify button styles
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=164e4cf33fe91cf5d8e0ff3348fb7063a460562b;p=working%2FEvergreen.git

TPAC: Consolidate and simplify button styles

TPAC has at least two distinct types of buttons, those created by
input tags, and those created by anchor (that is, <a>) tags.  This
commit simplifies and consolidates the styles used for both types
of buttons.

Also, inputs do not inherit the body font by default, so let's apply
it for better display consistency.

Finally, Firefox inputs have some extra space around them; let's make
a modest attempt to remove that.

Signed-off-by: Dan Wells <dbw2@calvin.edu>
---

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 6abaec865b..cf605da9c6 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -10,6 +10,11 @@ body {
     background: [% css_colors.primary %];
 }
 
+button, input {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: [% css_fonts.size_base %];
+}
+
 img {
     border: none;
 }
@@ -974,13 +979,6 @@ table.acct_notes th {
     height: 16px;
     width: 16px;
 }
-#search-submit-go {
-    background:  [% css_colors.primary_fade %];
-    border-radius: 5px;
-    color: [% css_colors.button_text %];
-    font-weight: bold;
-    padding: 0px;
-}
 div.adv_search_available {
     margin-top: 1em;
 }
@@ -1223,53 +1221,58 @@ a.dash-link:hover { text-decoration: underline !important; }
     margin: 0.5em 0.5em 0.5em 0em;
 }
 
-.opac-button:disabled {
-    color: [% css_colors.accent_medium %];
-    cursor: pointer !important;
-    border: 1px solid [% css_colors.accent_light %];
-    background-color: [% css_colors.accent_lighter %];
-}
+/*
+ * .various_containers a = shortcut to putting .opac-button on every 'a' with
+ *     the tradeoff of increased stylesheet complexity (TODO: rethink?)
+ */
 
-div.opac-multiline-button > a,
 .opac-multiline-button > a,
-.opac-button, .results_header_btns, #simple-detail-view-links { 
+.opac-button, .results_header_btns a, #simple-detail-view-links a, .dash_account_buttons a { 
     color: [% css_colors.button_text %];
     font-weight: bold; 
     text-decoration: none;
     cursor: pointer !important;
     -moz-border-radius: 5px;
     border-radius: 5px;
-    border: 5px solid [% css_colors.primary_fade %];
+    border: 1px solid [% css_colors.primary %];
     background:  [% css_colors.primary_fade %];
+    margin: 10px;
+    padding: 0.3em;
 }
 
-.opac-button-header {
-    background: [% css_colors.control %];
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+.opac-multiline-button > a:hover,
+.opac-button:hover, .results_header_btns a:hover, #simple-detail-view-links a:hover, .dash_account_buttons a:hover {
+    background: [% css_colors.primary %];
+}
+
+.opac-button:disabled {
+    color: [% css_colors.accent_medium %];
+    cursor: pointer !important;
+    border: 1px solid [% css_colors.accent_light %];
+    background-color: [% css_colors.accent_lighter %];
+}
+
+/* Firefox adds its own special space to inputs; this gets us closer */
+button.opac-button::-moz-focus-inner, input.opac-button::-moz-focus-inner {
+    padding: 0;
+    border: 0;
 }
 
 .results_header_btns a, #simple-detail-view-links a {
-    margin: 10px;
-    color: [% css_colors.text_invert %];
     vertical-align: middle;
     display: table-cell;
-    text-decoration: none;
 }
 
-.opac-multiline-button > a:hover,
-.opac-button:hover, .results_header_btns a:hover, #simple-detail-view-links a:hover {
-    background: [% css_colors.primary %];
-    text-decoration: none;
+.opac-button-header {
+    background: [% css_colors.control %];
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    font-size: [% css_fonts.size_base %];
 }
 
 .opac-multiline-button > a {
     display: inline-block;
 }
 
-.opac-multiline-button > a, a.opac-button, input.opac-button {
-    margin: 10px;
-}
-
 #dash_wrapper .opac-button {
     position: relative;
     top: 10px;