From: Dan Scott <dan@coffeecode.net>
Date: Fri, 26 Jul 2013 04:05:49 +0000 (-0400)
Subject: TPAC: Improve style.css to reduce warnings
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=refs%2Fheads%2Fuser%2Fdbs%2Ftpac_css_cleanup;p=working%2FEvergreen.git

TPAC: Improve style.css to reduce warnings

* Improve specificity: use background-image (for gradients) or
  background-color (for color) instead of just background, because we
  are only specifying the image or color, and not the rest of the
  background properties.
* Declare the background-color first, followed by the background-images;
  these will only override if recognized by the browser.
* Declare the standard (unprefixed) CSS linear-gradient last to prevent
  prefixed browser quirk versions from overriding the standardized form.
* Remove the -moz- prefix from -moz-border-radius as that has not been
  supported by Gecko since Firefox 13.0; just plain border-radius now.
* Fix bad selector ##rdetail_extras_expand (only one #, please).

Signed-off-by: Dan Scott <dan@coffeecode.net>
---

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 00d90d975d..5c7628c7e5 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -7,7 +7,7 @@ body {
     margin:0;
     font-family: Arial, Helvetica, sans-serif;
     font-size: [% css_fonts.size_base %];
-    background: [% css_colors.primary %];
+    background-color: [% css_colors.primary %];
 }
 
 img {
@@ -47,7 +47,6 @@ a {
 #search-wrapper select {
     border:0px solid [% css_colors.border_dark %];
     filter:alpha(opacity=0);
-    -moz-opacity:0;
     -khtml-opacity:0;
     opacity:0;
     padding:0;
@@ -93,7 +92,7 @@ div.select-box-wrapper {
 #dash_wrapper div {
     position: relative;
     vertical-align: middle;
-    background: [% css_colors.primary %];
+    background-color: [% css_colors.primary %];
     border-radius: 5px;
     height: 3em;
     padding: 0em 1em 0em 1em;
@@ -110,7 +109,7 @@ span.dash_divider {
     clear:both;
     float:right;
     margin-top: 1em;
-    background: [% css_colors.primary %];
+    background-color: [% css_colors.primary %];
     border-radius: 5px;
     height: 3em;
 }
@@ -136,11 +135,11 @@ span.dash_divider {
 #dash_pickup { color: [% css_colors.text_goodnews %]; }
 #dash_fines { color: [% css_colors.text_badnews %]; }
 #header-wrap {
-    background: linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
-    background: -moz-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
-    background: -o-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
-    background: -webkit-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
     background-color: [% css_colors.primary_fade %];
+    background-image: -moz-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
+    background-image: -o-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
+    background-image: -webkit-linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
+    background-image: linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
 }
 #header {
     color: [% css_colors.background %];
@@ -212,7 +211,7 @@ span.dash_divider {
 
 #gold-links-holder {
     height: 24px;
-    background: [% css_colors.background_invert %];
+    background-color: [% css_colors.background_invert %];
 }
 
 #util-bar {
@@ -224,7 +223,7 @@ span.dash_divider {
 #search-wrapper {
     border-bottom: 1px solid [% css_colors.border_standard %];
     padding-bottom: 5px;
-    background: [% css_colors.background %];
+    background-color: [% css_colors.background %];
 }
 
 .search_box_wrapper {
@@ -271,11 +270,10 @@ span.dash_divider {
     display: block;
     margin: 10px 7px 10px 0px;
     padding: 10px 0px 10px 0px;
-    -moz-border-radius: 10px 10px 0px 0px; 
     border-radius: 10px 10px 0px 0px;
     font-weight: bold;
     color: [% css_colors.text_invert %];
-    background: [% css_colors.control %];
+    background-color: [% css_colors.control %];
     font-weight: bold;
     text-decoration: none;
 }
@@ -285,7 +283,7 @@ span.dash_divider {
 }
 
 #adv_search_tabs a:hover, #acct_tabs a:hover, #acct_fines_tabs a:hover, #acct_checked_tabs a:hover, #acct_holds_tabs a:hover, #acct_prefs_tabs a:hover {
-    background: [% css_colors.primary %]; 
+    background-color: [% css_colors.primary %]; 
     color: [% css_colors.text_invert %];
     text-decoration: none;
 }
@@ -297,18 +295,18 @@ span.dash_divider {
 
 #adv_search.on, #num_search.on, #expert_search.on {
     color: [% css_colors.accent_darker %];
-    background: [% css_colors.background %];
+    background-color: [% css_colors.background %];
     text-decoration: none;
 }
 
 #adv_search_tabs a.acct-tab-on, #acct_tabs a.acct-tab-on, #acct_fines_tabs a.acct-tab-on {
     color: [% css_colors.accent_darker %];
-    background: [% css_colors.background %];
+    background-color: [% css_colors.background %];
     text-decoration: none;
 }
 
 .acct-tab-off {
-    background: [% css_colors.control %];
+    background-color: [% css_colors.control %];
 }
 
 #acct_checked_tabs a, #acct_holds_tabs a, #acct_prefs_tabs a {
@@ -319,7 +317,7 @@ span.dash_divider {
 }
 
 #acct_checked_tabs div.selected a, #acct_holds_tabs div.selected a, #acct_prefs_tabs div.selected a {
-    background: [% css_colors.accent_lightest %];
+    background-color: [% css_colors.accent_lightest %];
     color: [% css_colors.accent_darker %];
 }
 
@@ -381,7 +379,7 @@ div.rdetail_show_copies {
 
 div#rdetail_actions_div {
     float: right;
-    background: [% css_colors.background %];
+    background-color: [% css_colors.background %];
 }
 
 span#rdetail_copy_counts {
@@ -474,7 +472,7 @@ div.format_icon {
 
 .rdetail_extras {
     height: 29px;
-    background: [% css_colors.primary %];
+    background-color: [% css_colors.primary %];
     padding-top:1px;
     margin-bottom: 10px;
     margin-top: 10px;
@@ -483,7 +481,7 @@ div.format_icon {
 
 .rdetail_extras_hr {
     height: 1px;
-    background: [% css_colors.accent_light %];
+    background-color: [% css_colors.accent_light %];
     margin-left: 1px;
     margin-right: 1px;
 }
@@ -503,7 +501,7 @@ div.format_icon {
     color: [% css_colors.text_invert %];
 }
 
-##rdetail_extras_expand, #rdetail_extras_collapse, #rdetail_locs_collapse {
+#rdetail_extras_expand, #rdetail_extras_collapse, #rdetail_locs_collapse {
     margin-left: 13px;
 }
 
@@ -518,11 +516,11 @@ div.format_icon {
 }
 
 .almost-content-wrapper {
-    background: [% css_colors.background %];
+    background-color: [% css_colors.background %];
 }
 
 #content-wrapper {
-    background: [% css_colors.background %];
+    background-color: [% css_colors.background %];
     min-height: 260px;
     border-bottom: 1px solid [% css_colors.border_dark %];
 }
@@ -543,16 +541,16 @@ div.format_icon {
     padding-left: 4px;
 }
 
-#results-side-bar { float: left; width: 174px; margin-right: 5px; background: [% css_colors.background %]; }
+#results-side-bar { float: left; width: 174px; margin-right: 5px; background-color: [% css_colors.background %]; }
 
 #main-content .login_boxes {
     border: 1px solid [% css_colors.accent_lighter %];
-    background: linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
-    background: -moz-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
-    background: -ms-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
-    background: -o-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
-    background: -webkit-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
-
+    background-color: [% css_colors.accent_lightest %]; 
+    background-image: -moz-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
+    background-image: -ms-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
+    background-image: -o-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
+    background-image: -webkit-linear-gradient(bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
+    background-image: linear-gradient(to bottom, [% css_colors.accent_ultralight %] 15%, [% css_colors.accent_lightest %] 55%, [% css_colors.accent_ultralight %] 85%);
     color: [% css_colors.accent_darker %];
 }
 
@@ -572,7 +570,7 @@ div.format_icon {
     height:18px;
     margin:0;
     padding:0;
-    background: [% css_colors.background %];
+    background-color: [% css_colors.background %];
     font-size: [% css_fonts.size_bigger %];
     color: [% css_colors.text %];
 }
@@ -622,7 +620,7 @@ div.format_icon {
 }
 
 #results_header_bar {
-    background: [% css_colors.accent_medium %];
+    background-color: [% css_colors.accent_medium %];
     border-top:1px solid [% css_colors.accent_mediumdark %];
 }
 
@@ -647,7 +645,7 @@ div.format_icon {
     float: left;
     font-size: [% css_fonts.size_small %];
     color: [% css_colors.text %];
-    background: [% css_colors.accent_medium %];
+    background-color: [% css_colors.accent_medium %];
     margin-right: 6px;
 }
 
@@ -771,7 +769,7 @@ div.result_place_hold {
 }
 
 #myopac_prefs_div .data_grid td {
-    background:[% css_colors.accent_ultralight %];
+    background-color:[% css_colors.accent_ultralight %];
     border-bottom:3px solid [% css_colors.background %];
     padding:6px 0px 7px 17px;
 }
@@ -791,7 +789,7 @@ div.result_place_hold {
 
 .acct_sum_table {
     border-collapse: collapse;
-    background: [% css_colors.accent_ultralight %];
+    background-color: [% css_colors.accent_ultralight %];
     font-size: [% css_fonts.size_smaller %];
     font-weight: bold;
     text-transform: uppercase;
@@ -832,7 +830,7 @@ table.acct_notes th {
 #myopac_sum_fines {
     float:right;
     padding: 15px 0px 0px 23px;
-    background: [% css_colors.accent_ultralight %];
+    background-color: [% css_colors.accent_ultralight %];
     width: 177px;
     height: 166px;
 }
@@ -856,7 +854,7 @@ table.acct_notes th {
 }
 
 #acct_checked_main_header td, #acct_holds_main_header td, #acct_checked_hist_header td, #acct_list_header td, #acct_list_header_anon td, #temp_list_holds td {
-    background: [% css_colors.accent_lighter2 %];
+    background-color: [% css_colors.accent_lighter2 %];
     padding: 10px;
 }
 
@@ -898,7 +896,7 @@ table.acct_notes th {
 }
 
 #myopac_tabs, #adv_search_parent, #fines_payments_wrapper {
-    background: [% css_colors.primary_fade %];
+    background-color: [% css_colors.primary_fade %];
     padding-top:5px;
     margin-bottom:20px;
 }
@@ -985,10 +983,8 @@ div.facet_sidebar {
 .facet_box_temp .header {
     height:31px;
     overflow:hidden;
-    background:[% css_colors.primary %];
-    -moz-border-top-left-radius: 5px;
+    background-color:[% css_colors.primary %];
     border-top-left-radius: 5px;
-    -moz-border-top-right-radius: 5px;
     border-top-right-radius: 5px;
     font-weight:bold;
     color:[% css_colors.text_invert %];
@@ -1021,7 +1017,7 @@ div.facet_sidebar {
     border-top:1px solid [% css_colors.border_standard %];
     border-left:1px solid [% css_colors.border_standard %];
     border-right:1px solid [% css_colors.border_standard %];
-    background:[% css_colors.background %];
+    background-color:[% css_colors.background %];
     padding-left:12px;
     padding-top:6px;
 }
@@ -1051,11 +1047,11 @@ div.facet_sidebar {
 }
 
 #footer-wrap {
-    background: linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
-    background: -moz-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
-    background: -o-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
-    background: -webkit-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
     background-color: [% css_colors.primary %];
+    background-image: -moz-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
+    background-image: -o-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
+    background-image: -webkit-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
+    background-image: linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
 }
 
 #footer {
@@ -1150,7 +1146,7 @@ a.dash-link:hover { text-decoration: underline !important; }
 .cn_browse_item { padding: 2ex; }
 
 .results-paginator-selected { color: [% css_colors.text_alert %]; }
-.inactive-hold { background: [% css_colors.accent_lightest %]; }
+.inactive-hold { background-color: [% css_colors.accent_lightest %]; }
 
 #hold-items-list td { padding: 5px; margin-bottom: 20px; }
 .hold-items-list-title { font-size: [% css_fonts.size_bigger %]; }
@@ -1179,18 +1175,17 @@ div.opac-multiline-button > a,
     text-decoration: none;
     text-shadow: 1px 1px 1px [% css_colors.button_text_shadow %];
     cursor: pointer !important;
-    -moz-border-radius: 5px;
     border-radius: 5px;
     border: 1px solid [% css_colors.primary_fade %];
-    background: linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
-    background: -moz-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
-    background: -o-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
-    background: -webkit-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
     background-color: [% css_colors.primary %];
+    background-image: -moz-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
+    background-image: -o-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
+    background-image: -webkit-linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
+    background-image: linear-gradient([% css_colors.primary_fade %], [% css_colors.primary %]);
 }
 
 .opac-button-header {
-    background: [% css_colors.control %];
+    background-color: [% css_colors.control %];
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 
@@ -1204,7 +1199,7 @@ div.opac-multiline-button > a,
 
 .opac-multiline-button > a:hover,
 .opac-button:hover, .results_header_btns a:hover, #simple-detail-view-links a:hover {
-    background: [% css_colors.primary %];
+    background-color: [% css_colors.primary %];
     text-decoration: none;
 }
 
@@ -1398,7 +1393,7 @@ table.result_holdings_table {
     margin-bottom: 1em;
 }
 table.result_holdings_table thead tr {
-    background: [% css_colors.table_heading %];
+    background-color: [% css_colors.table_heading %];
 }
 table.result_holdings_table thead tr th {
     font-weight: bold;