From 6b01ed206f50903c8fb30d58aec8e8d548cf7382 Mon Sep 17 00:00:00 2001 From: Dan Scott Date: Fri, 26 Jul 2013 00:05:49 -0400 Subject: [PATCH] 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 Signed-off-by: Pasi Kallinen Signed-off-by: Galen Charlton Conflicts: Open-ILS/src/templates/opac/css/style.css.tt2 Signed-off-by: Galen Charlton Conflicts: Open-ILS/src/templates/opac/css/style.css.tt2 Signed-off-by: Mike Rylander --- Open-ILS/src/templates/opac/css/style.css.tt2 | 97 +++++++++---------- 1 file changed, 45 insertions(+), 52 deletions(-) diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2 index 00aebf1c92..299a98b41f 100644 --- 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 -%] -- 2.43.2