From 798a4ff8f74e063312fa8b7d5078dcad1385849e Mon Sep 17 00:00:00 2001
From: Dan Wells <dbw2@calvin.edu>
Date: Wed, 25 Sep 2013 16:46:31 -0400
Subject: [PATCH] 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.

At least in Firefox, inline blocks display in a closer size rendering
to <input> tags than plain 'display:inline'.  The switch doesn't seem
to hurt in most cases in IE, FF, or Chrome, so let's do it.

Two cases where inline works better are the floating 'My Account' and
'dash' buttons'.  They already have special classes, so let's revert
those back to inline.  In fact, let's make the logged-in 'dash'
buttons share the style of the 'My Account' button which got us there,
and make all three buttons more visible when hovering.

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>
Signed-off-by: Ben Shum <bshum@biblio.org>
---
 Open-ILS/src/templates/opac/css/style.css.tt2 | 68 +++++++++++++++------------
 1 file changed, 38 insertions(+), 30 deletions(-)

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 6abaec865b..b0083d43bf 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,63 @@ 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;
+    display: inline-block;
 }
 
-.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_wrapper a.opac-button: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, #dash_wrapper .opac-button {
+    background: [% css_colors.control %];
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    font-size: [% css_fonts.size_base %];
+    display:inline;
+}
+a.opac-button-header:hover, #dash_wrapper a.opac-button:hover {
+    border-color: [% css_colors.control %];
 }
 
 .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;
-- 
2.11.0