LP#1205190: 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>
Signed-off-by: Pasi Kallinen <pasi.kallinen@pttk.fi>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

Conflicts:
	Open-ILS/src/templates/opac/css/style.css.tt2

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

Conflicts:
	Open-ILS/src/templates/opac/css/style.css.tt2

Signed-off-by: Mike Rylander <mrylander@gmail.com>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 00aebf1..299a98b 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -8,7 +8,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 %];
     [% IF rtl == 't' -%]
     direction: rtl;
     [%- END %]
@@ -68,7 +68,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;
@@ -120,7 +119,7 @@ div.select-box-wrapper {
 }
 
 #dash_wrapper div {
-    background: [% css_colors.primary %];
+    background-color: [% css_colors.primary %];
     border-radius: 5px;
     padding: 0em 1em;
 }
@@ -187,11 +186,11 @@ for now until a better color is picked - if needed.
 }
 
 #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 %];
@@ -277,7 +276,7 @@ for now until a better color is picked - if needed.
 
 #gold-links-holder {
     height: 24px;
-    background: [% css_colors.background_invert %];
+    background-color: [% css_colors.background_invert %];
 }
 
 #util-bar {
@@ -294,7 +293,7 @@ for now until a better color is picked - if needed.
 #search-wrapper {
     border-bottom: 1px solid [% css_colors.border_standard %];
     padding-bottom: 5px;
-    background: [% css_colors.background %];
+    background-color: [% css_colors.background %];
 }
 
 #search-wrapper #breadcrumb {
@@ -352,12 +351,10 @@ for now until a better color is picked - if needed.
     [% IF rtl == 't' -%]
     float: right;
     margin: 10px 0px 0px 7px;
-    -moz-border-radius: 10px 10px 0px 0px;
     border-radius: 10px 10px 0px 0px;
     [%- ELSE %]
     float: left;
     margin: 10px 7px 0px 0px;
-    -moz-border-radius: 10px 10px 0px 0px; 
     border-radius: 10px 10px 0px 0px;
     [%- END %]
     text-align: center;
@@ -366,7 +363,7 @@ for now until a better color is picked - if needed.
     padding: 10px 0px 10px 0px;
     font-weight: bold;
     color: [% css_colors.text_invert %];
-    background: [% css_colors.control %];
+    background-color: [% css_colors.control %];
     font-weight: bold;
     text-decoration: none;
 }
@@ -376,7 +373,7 @@ for now until a better color is picked - if needed.
 }
 
 #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;
 }
@@ -435,18 +432,18 @@ for now until a better color is picked - if needed.
 
 #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 {
@@ -457,7 +454,7 @@ for now until a better color is picked - if needed.
 }
 
 #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 %];
 }
 
@@ -547,7 +544,7 @@ div.rdetail_show_copies {
 }
 
 div#rdetail_actions_div {
-    background: [% css_colors.background %];
+    background-color: [% css_colors.background %];
     [% IF rtl == 't' -%]
     float: left;
     [%- ELSE %]
@@ -719,7 +716,7 @@ div.format_icon {
 }
 
 .rdetail_extras {
-    background: [% css_colors.primary_fade %];
+    background-color: [% css_colors.primary_fade %];
     border: 1px solid [% css_colors.primary %];
     padding-top:1px;
     clear:both;
@@ -738,7 +735,7 @@ div.format_icon {
     margin-right: 1px;
     [%- END %]
     height: 1px;
-    background: [% css_colors.accent_light %];
+    background-color: [% css_colors.accent_light %];
 }
 
 .rdetail_extras_link {
@@ -752,7 +749,7 @@ div.format_icon {
     text-decoration: none;
 }
 
-##rdetail_extras_expand, #rdetail_extras_collapse, #rdetail_locs_collapse {
+#rdetail_extras_expand, #rdetail_extras_collapse, #rdetail_locs_collapse {
     [% IF rtl == 't' -%]
     margin-right: 13px;
     [%- ELSE %]
@@ -779,11 +776,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 %];
 }
@@ -828,17 +825,17 @@ div.format_icon {
     margin-right: 5px; 
     [%- END %]
     width: 174px;
-    background: [% css_colors.background %];
+    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 %];
 }
 
@@ -861,7 +858,7 @@ div.format_icon {
     width:167px;
     margin:0;
     padding:0;
-    background: [% css_colors.background %];
+    background-color: [% css_colors.background %];
     font-size: [% css_fonts.size_bigger %];
     color: [% css_colors.text %];
 }
@@ -920,7 +917,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 %];
     border-bottom:1px solid [% css_colors.accent_mediumdark %];
 }
@@ -936,7 +933,7 @@ div.format_icon {
     /* this border is not visible, but it keeps these labels the same size
     as the buttons */
     border: 1px solid [% css_colors.accent_medium %];
-    background: [% css_colors.accent_medium %];
+    background-color: [% css_colors.accent_medium %];
     margin: 0.5em 0.3em;
     padding: 0.3em;
 }
@@ -1146,7 +1143,7 @@ div.result_table_utils_cont {
     [% ELSE -%]
     padding:6px 0px 7px 17px;
     [% END -%]
-    background:[% css_colors.accent_ultralight %];
+    background-color:[% css_colors.accent_ultralight %];
     border-bottom:3px solid [% css_colors.background %];
 }
 
@@ -1180,7 +1177,7 @@ div.result_table_utils_cont {
 
 .acct_sum_table {
     border-collapse: collapse;
-    background: [% css_colors.accent_ultralight %];
+    background-color: [% css_colors.accent_ultralight %];
 }
 
 .acct_sum_table tr {
@@ -1209,7 +1206,7 @@ div.result_table_utils_cont {
     float:right;
     padding: 15px 0px 0px 23px;
     [% END -%]
-    background: [% css_colors.accent_ultralight %];
+    background-color: [% css_colors.accent_ultralight %];
     width: 177px;
     height: 166px;
 }
@@ -1252,7 +1249,7 @@ div.result_table_utils_cont {
 .hold_note_title { font-weight: bold; }
 
 #acct_checked_main_header td, #acct_holds_main_header td, #acct_checked_hist_header td, #acct_holds_hist_header td, #acct_list_header td, #acct_list_header_anon td, #temp_list_holds td, #acct_messages_main_header, #ebook_circs_main_table td, #ebook_holds_main_table td {
-    background: [% css_colors.accent_lighter2 %];
+    background-color: [% css_colors.accent_lighter2 %];
     padding: 10px;
 }
 
@@ -1295,7 +1292,7 @@ div.result_table_utils_cont {
 }
 
 #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;
 }
@@ -1469,7 +1466,7 @@ div#facet_sidebar {
 
 .facet_box_temp .header {
     height: 2.3em;
-    background:[% css_colors.primary %];
+    background-color:[% css_colors.primary %];
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     font-weight:bold;
@@ -1532,7 +1529,6 @@ div#facet_sidebar {
     margin-bottom: 3px;
     padding: 2px;
     border: 1px solid [% css_colors.background_invert %];
-    -moz-border-radius: 3px;
     border-radius: 3px;
     font-weight:bold;
     padding-top:4px;
@@ -1566,11 +1562,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 {
@@ -1763,7 +1759,7 @@ a.dash-link:hover { text-decoration: underline !important; }
     [% END -%]
 }
 .results-paginator-selected { color: [% css_colors.text_alert %]; }
-.inactive-hold { background: [% css_colors.accent_lightest %]; }
+.inactive-hold { background-color: [% css_colors.accent_lightest %]; }
 .unread-patron-message { font-weight: bold; }
 
 #hold-items-list td { padding: 5px; margin-bottom: 20px; }
@@ -1825,7 +1821,7 @@ a.dash-link:hover { text-decoration: underline !important; }
     cursor: pointer !important;
     border-radius: 5px;
     border: 1px solid [% css_colors.primary %];
-    background:  [% css_colors.primary_fade %];
+    background-color:  [% css_colors.primary_fade %];
     margin: 0.5em;
     padding: 0.3em;
     display: inline-block;
@@ -1833,7 +1829,7 @@ a.dash-link:hover { text-decoration: underline !important; }
 
 .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 %];
+    background-color: [% css_colors.primary %];
 }
 
 .opac-button:disabled {
@@ -1850,7 +1846,7 @@ button.opac-button::-moz-focus-inner, input.opac-button::-moz-focus-inner {
 }
 
 .opac-button-header, #dash_wrapper .opac-button {
-    background: [% css_colors.control %];
+    background-color: [% css_colors.control %];
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
     font-size: [% css_fonts.size_base %];
 }
@@ -2229,7 +2225,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;
@@ -2611,11 +2607,9 @@ a.preflib_change {
     }
     #acct_tabs a, #acct_fines_tabs a {
        [% IF rtl == 't' -%]
-       -moz-border-radius: 6px 0px 0px 6px;
        border-radius: 6px 0px 0px 6px;
        margin: 0px 0px 0px 5px;
        [% ELSE -%]
-       -moz-border-radius: 6px 6px 0px 0px;
        border-radius: 6px 6px 0px 0px;
        margin: 0px 5px 0px 0px;
        [% END -%]
@@ -2975,7 +2969,6 @@ a.preflib_change {
         font-size: [% css_fonts.size_small %];
         margin: 2px 2px 0px 2px;
         padding: 2px 2px 5px 2px; 
-        -moz-border-radius: 10px 0px 0px 0px;
         [% IF rtl == 't' -%]
         border-radius: 7px 0px 0px 7px;
         [% ELSE -%]