Add more attractive buttons in TTPAC

Modernizes the buttons in TTPAC a bit, also adds a new selector for
the topnav button, along with a lighter color to avoid blending with
header gradient.

Signed-off-by: Michael Peters <mrpeters@library.in.gov>

diff --git a/Open-ILS/src/templates/opac/parts/topnav.tt2 b/Open-ILS/src/templates/opac/parts/topnav.tt2
index 8971723..aba5e02 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/topnav.tt2
+++ b/Open-ILS/src/templates/opac/parts/topnav.tt2
@@ -8,7 +8,7 @@
         [% IF !ctx.user %]
         <div id="your-acct-login">
             <a href="[% mkurl(ctx.opac_root _ '/myopac/main') %]" 
-                class="opac-button" id="home_myopac_link">
+                class="opac-button-header" id="home_myopac_link">
                 [% l('Your Account Log in') %]
             </a>
         </div>

diff --git a/Open-ILS/web/css/skin/default/opac/style.css b/Open-ILS/web/css/skin/default/opac/style.css
index 99ad325..351aebf 100644 (file)
--- a/Open-ILS/web/css/skin/default/opac/style.css
+++ b/Open-ILS/web/css/skin/default/opac/style.css
@@ -22,7 +22,6 @@ a {
 }
 
 #search-wrapper input[type=text] {
-       border:none;
        margin:0;
        padding:0;
 }
@@ -31,7 +30,7 @@ a {
        border:1px solid #e9ebf3;
        margin:0;
        padding:0;
-       width:168px;
+       width: 12em;
 }
 
 /*
@@ -55,8 +54,6 @@ h1 {
 }
 
 h2 {
-       margin:0;
-       margin-bottom: 5px;
        font-size: 16px;
        font-weight:bold;
 }
@@ -146,8 +143,7 @@ span.dash_divider {
 #header {
        color: #fff;
        padding-top: 26px;
-       width: 974px;
-       margin: auto;
+       margin-left: 1em;
        font-size:11px;
 }
 
@@ -203,20 +199,22 @@ span.dash_divider {
 }
 
 #gold-links {
-       margin:auto;
-       width:974px;
+       margin-left: 1em;
        padding-left:0px;
 }
 
 #gold-links-home {
        margin:auto;
-       width:694px;
        padding-left:0px;
 }
 
+#gold-links-holder {
+    height: 24px;
+    background: #252525;
+}
+
 #util-bar {
-       margin:auto;
-       width:974px;
+       margin-left: 1em;
        padding-left:0px;
        height:0px;
 }
@@ -228,9 +226,7 @@ span.dash_divider {
 }
 
 .search_box_wrapper {
-       border:1px solid #e9ebf3;
-       padding: 1px;
-    padding-left: 3px;
+       padding: 1px 1px 1px 3px;
 }
 
 #search-wrapper #breadcrumb {
@@ -255,8 +251,7 @@ span.dash_divider {
 }
 
 #search-wrapper #search-box {
-       width:974px;
-       margin:auto;
+       margin-left: 1em;
        padding-left: 0px;
 }
 
@@ -278,8 +273,7 @@ span.dash_divider {
 
 #adv_search_tabs, #acct_tabs, #acct_fines_tabs, #acct_checked_tabs, #acct_holds_tabs, #acct_prefs_tabs, #results_header_inner{
        height: 40px;
-       width:974px;
-       margin:auto;
+       margin-left: 1em;
 }
 
 #adv_search_tabs a, #acct_tabs a, #acct_fines_tabs a, #acct_checked_tabs a, #acct_holds_tabs a, #acct_prefs_tabs a {
@@ -299,7 +293,7 @@ span.dash_divider {
 }
 
 #adv_search_tabs a, #acct_tabs a, #acct_fines_tabs a {
-    width:156px;
+    padding: 1em 1em 0.5em;
 }
 
 #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 {
@@ -342,24 +336,28 @@ span.dash_divider {
 }
 
 #rdetail_header {
-       font-size:14px;
-       font-weight:bold;
-       color:#007a54;
-       padding: 5px 7px 6px 0px;
-       border-bottom: 1px dotted #ccc;
+    padding: 5px 7px 6px 0px;
+    margin-left: 1em;
+    border-bottom: 1px dotted #ccc;
+}
+
+#rdetail_results a {
+    color:#007a54;
+    font-weight:bold;
+    font-size: 1.2em;
 }
 
 #rdetail_result_count {
-       color: black;
-       font-size: 11px;
-       font-weight: normal;
-    padding-left: 10px;
+    color: black;
+    font-weight: normal;
+    padding-left: 1em;
+    display: inline-block;
 }
 
 #rdetail_result_nav {
-       float:right;
-       font-size: 11px;
-       font-weight:normal;
+    font-weight:normal;
+    padding-left: 1em;
+    display: inline-block;
 }
 
 #rdetail_details_table {
@@ -372,9 +370,42 @@ span.dash_divider {
        padding-right: 10px;
 }
 
-.rdetail_uri {
-    border: thin black solid;
-    padding: 3px;
+h2.rdetail_uris {
+    margin-top: 1em;
+}
+div.rdetail_uris {
+    padding: 0.5em 1em 0.5em 1em;
+    background-color: lightGray;
+}
+div.rdetail_uris ul li {
+    position: relative;
+    left: 1em;
+}
+
+div.rdetail_show_copies {
+    margin-top: 1em;
+}
+
+div#rdetail_actions_div {
+    float: right;
+}
+
+span#rdetail_copy_counts {
+    display: inline-block;
+    border-right: thin;
+    vertical-align: top;
+    margin-right: 1em;
+    padding-right: 1em;
+}
+
+span#rdetail_hold_counts {
+    display: inline-block;
+    vertical-align: top;
+}
+
+#rdetail_image_div {
+    float: left;
+    margin-right: 1em;
 }
 
 .rdetail_aux_utils {
@@ -384,6 +415,24 @@ span.dash_divider {
        padding-right: 70px;
 }
 
+div.place_hold {
+    border-bottom: 1px dotted #ccc;
+    padding-top: 10px;
+}
+
+span.place_hold {
+    position:relative;
+    top:-3px;
+    left:3px;
+}
+
+div.toggle_list { padding-top: 6px; }
+
+div.format_icon {
+    float: right;
+    margin-right: 17px;
+}
+
 .results_aux_utils {
        border-left:1px dotted #ccc;
        padding-left: 17px;
@@ -391,8 +440,17 @@ span.dash_divider {
        padding-right: 50px;
 }
 
+.result_util {
+    border-bottom: 1px dotted #ccc;
+    padding-top: 6px;
+}
+
+.results_reviews {
+    position: relative;
+    top: -5px;
+}
+
 #rdetail_copies {
-    clear: both;
     padding-top: 1.5em;
 }
 
@@ -443,7 +501,6 @@ span.dash_divider {
        position: relative;
        top: -4px;
        left: 7px;
-       color: white;
 }
 
 #paginate-homebanner a.toc {
@@ -481,7 +538,7 @@ span.dash_divider {
 #hp-buttons {
        margin: auto;
        margin-top: 6px;
-       width: 694px; /* 974px; */
+    margin-left: 1em;
 }
 
 #hp-welcome {
@@ -506,8 +563,7 @@ span.dash_divider {
 }
 
 #hp-banner {
-       margin: auto;
-       width: 694px; /* formerly 974px */
+       margin-left: 1em;
        height: 213px;
 }
 
@@ -531,7 +587,6 @@ span.dash_divider {
 }
 
 #hp-ql-bottom {
-       width: 640px;
        height: 31px;
        padding-left: 24px;
        padding-top: 13px;
@@ -564,12 +619,22 @@ span.dash_divider {
 
 .content-wrapper-record-page { top: -15px; position: relative; }
 
-#main-content-home { width: 694px; margin: auto; padding-left: 17px; }
-#main-content { width: 974px; margin:auto; padding-left: 0px; }
+#main-content-home {
+       padding-left: 17px;
+    margin-left: 1em;
+}
+#main-content {
+       padding-left: 0px;
+    margin-left: 1em;
+}
 
-#main-content-after-bar { float: left; width: 700px; margin: auto; padding-left: 4px; }
+#main-content-after-bar {
+       float: left;
+       margin-left: 1em;
+       padding-left: 4px;
+}
 
-#results-side-bar { float: left; width: 274px; background-color: #ddd; color: black; height: 500px; /* XXX to height of container*/  }
+#results-side-bar { float: left; width: 174px;  height: 500px; /* XXX to height of container*/  }
 
 #main-content .login_boxes {
        border: 1px solid #dedede;
@@ -607,7 +672,6 @@ span.dash_divider {
 }
 
 #home-buttons-inner {
-       width:664px;
        height:117px;
        background:#bda964;
 }
@@ -646,6 +710,7 @@ span.dash_divider {
        float: left;
        font-size: 11px;
        color: #191919;
+       background: #929292;
        margin-right: 6px;
 }
 
@@ -670,33 +735,54 @@ span.dash_divider {
        font-size: 11px;
 }
 
-.nav_arrow_fix {
-       font-size:8px;
-       position:relative;
-       top:-1px;
+#result_table_div {
+       margin-top: 1em;
 }
 
-#result_table_div {
-       margin-top: 20px;
+tr.result_table_row > td.results_row_count,
+tr.result_table_row > td.result_table_pic_header,
+tr.result_table_row > td.result_table_title_cell {
+    vertical-align: top;
+}
+
+tr.result_table_row:nth-child(n+2) > td {
+    border-top: 1px solid #d4d4d4;
+}
+
+tr.result_table_row > td.result_table_pic_header {
+    white-space: nowrap;
+    width: 78px;
+    padding-left: 1em;
 }
 
 .result_numbers {
        font-size: 11px; padding-left:15px; white-space: nowrap; width: 320px;
 }
 
-.result_table_subtable { width: 100%; border-collapse: collapse; border: 0; }
+.result_table_subtable {
+    width: 100%;
+    padding-top: 1em;
+}
 
+div.result_table_utils_cont {
+    width: 250px;
+    text-align:left;
+}
 
+div.result_table_utils {
+    float: right;
+}
 
+div.result_place_hold {
+    position: relative;
+    top: -3px;
+    left:3px;
+}
 
 .icon_text {
        text-transform:capitalize;
 }
 
-.result_table_title_cell {
-       padding-left: 7px;
-}
-
 #myopac_summary_div p {
        margin:0;
        margin-bottom: 10px;
@@ -706,7 +792,8 @@ span.dash_divider {
        padding-bottom:5px;
 }
 
-#zero_search_hits div { float:left;width:300px;margin-top:20px; }
+.zero_search_hits_main { float:left; width:300px; margin-top: 2ex; }
+.zero_search_hits_saved { float:left; width:200px; margin-top: 2ex; margin-right: 2em; }
 
 #zero_search_hits p {
        margin-top:0;
@@ -764,7 +851,6 @@ span.dash_divider {
 
 .acct_sum_row {
        padding: 7px 15px;
-       width: 712px;
        background: #f0f0f0;
        margin-bottom: 2px;
        font-size: 10px;
@@ -909,23 +995,24 @@ span.dash_divider {
 .facetFieldLineValue { overflow: hidden; text-overflow: ellipsis; }
 */
 
+div.facet_sidebar {
+    float: left;
+    border-right: 1px solid #F3F3F3;
+    margin-right: 1em;
+}
+
 .facet_box_temp {
        padding-bottom:3px;
-       width:180px;
+       width: 15em;
        overflow:hidden;
 }
 
 .facet_box_temp .header {
-       width:180px;
        height:31px;
        overflow:hidden;
-       background-color: #007a54;
-       -moz-border-top-left-radius: 5px;
-       border-top-left-radius: 5px;
-        -moz-border-top-right-radius: 5px;
-        border-top-right-radius: 5px;
+       background:url('/images/facet_box_bg.png') no-repeat;
        font-weight:bold;
-       color:white;
+       color:#007a54;
        padding-top:4px;
 }
 
@@ -933,7 +1020,6 @@ span.dash_divider {
        float:left;
        padding-top:6px;
        padding-left:12px;
-       width:134px;
        overflow:hidden;
 }
 
@@ -950,7 +1036,7 @@ span.dash_divider {
 }
 
 .facet_box_wrapper .box_wrapper .box {
-       width:166px;
+       width: 14em;
        border-top:1px solid #7ebee5;
        border-left:1px solid #f3f3f3;
        border-right:1px solid #f3f3f3;
@@ -982,6 +1068,11 @@ span.dash_divider {
     background-color: #d7d7d7;
 }
 
+.facet_border {
+    border-left: 1px solid #e9ebf3;
+    padding-right: 0.5em;
+}
+
 #footer-wrap {
     background: linear-gradient(#007a54, #00593d);
     background: -moz-linear-gradient(#007a54, #00593d);
@@ -993,8 +1084,7 @@ span.dash_divider {
 #footer {
        padding-top:5px;
        padding-bottom: 10px;
-       margin: auto;
-       width: 974px;
+       margin-left: 1em;
        font-size: 11px;
 }
 
@@ -1004,6 +1094,10 @@ span.dash_divider {
        text-shadow: 0 0 0.2em #00593d, 0 0 0.2em #00593d;
 }
 
+#copyright_text, #footer_logo {
+    color: white;
+}
+
 .color_4 {
        text-transform: uppercase;
        font-weight: bold;
@@ -1050,6 +1144,7 @@ a.dash-link:hover { text-decoration: underline !important; }
 }
 .list-create-table-buttons input[type=image] { margin-top: 2px; }
 .result_table_format_cell { padding: 0px 10px; text-align: center; }
+.results_row_count { font-weight: bold; }
 #hold_editor h1 { font-size: 120%; font-weight: bold; }
 #hold_editor h2 { font-size: 111%; font-weight: normal; text-indent: 2em; font-style: italic; }
 #hold_editor h1, #hold_editor h2 { margin: 2px 0; }
@@ -1091,14 +1186,36 @@ a.dash-link:hover { text-decoration: underline !important; }
 
 /* TODO: gradients */
 .opac-button, .results_header_btns, #simple-detail-view-links { 
-    color: white; 
-    font-weight: bold; 
-    text-decoration: none;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    background: #69A088; 
+    background: -moz-linear-gradient(center top , #00593d 0%, #007a54 100%) repeat scroll 0 0 transparent;
+    border: 1px solid #007a54;
+    text-shadow: 1px 1px 1px #555555;
+    border-radius: 12px 12px 12px 12px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    cursor: pointer !important;
+    color: #FBF9F9;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 5px 10px 6px;
+    margin: 2px 8px 2px 8px;
 }
 
+.opac-button-header {
+    background: #69A088;
+    border: 1px solid #007a54;
+    text-shadow: 1px 1px 1px #555555;
+    border-radius: 12px 12px 12px 12px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    cursor: pointer !important;
+    color: #FBF9F9;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 5px 10px 6px;
+    margin: 2px 8px 2px 8px;
+}
+
+
 .results_header_btns a, #simple-detail-view-links a {
     margin: 10px;
     padding: 5px 10px 5px 10px;
@@ -1141,10 +1258,6 @@ a.opac-button {
     width: 100%;
 }
 
-.rdetail_copy_counts {
-    margin-top: 1em;
-}
-
 #rdetail_record_details {
     clear: both;
     margin-top: 1em;
@@ -1176,7 +1289,110 @@ a.opac-button {
     margin-left: 1em;
     padding-left: 1em;
 }
+.bookbag-controls-holder { width: 100%; }
+.bookbag-controls-holder:nth-child(odd) { background-color: #d7d7d7; }
+.bookbag-controls-holder:nth-child(even) { background-color: #e3e3e3; }
+.bookbag-controls-holder .most {
+    padding-left: 0;
+    margin-right: 5em;
+}
+h2.bookbag-name { margin-bottom: 0em; padding-bottom: 0em; }
+.bookbag-share .fixed { min-width: 4em; }
+.bookbag-specific { margin-left: 1em; }
+.bookbag-specific div.sort { float: left; width: 45%; text-align: left; }
+.bookbag-specific div.meta { float: right; width: 54%; text-align: right; }
+#bbag-name-desc-form tr th { vertical-align: middle; }
+#bbag-name-desc-form .saver { vertical-align: middle; text-align: center; }
+.bookbag-description {
+    padding-top: 0em;
+    font-style: italic;
+    max-width: 40em;
+}
+#bbag-edit-description { width: 20em; }
+#bbag-edit-name { width: 20em; }
+textarea { font-family: sans-serif; }
+table.bookbag-specific {
+    border-right: 1px solid #999;
+    border-bottom: 1px solid #666;
+    margin-bottom: 2ex;
+}
+.bookbag-share {
+    float: left;
+    padding: 5px 0;
+}
+.bookbag-controls {
+    float: left;
+    padding: 5px 0px 0px 10px;
+}
 
-#copyright_text, #footer_logo {
-    color: white;
+.bookbag-specific td.list_checkbox {
+    padding-left: 10px !important;
+}
+.bookbag-specific td.list_entry {
+    min-width: 10em;
+    padding-left: 5px !important;
+}
+.bookbag-specific td.list_actions {
+    white-space: nowrap !important;
+}
+
+.list_is_empty {
+    padding: 8px 0px 6px 0px;
+    width: 100%;
+    border: 0;
+    font-size: 120%;
+    text-align: center;
+    font-style: italic;
 }
+.save-notes { padding-bottom: 1.5ex; }
+
+/* Moved from semiauto.css */
+.adv_global_input_container { border-bottom: none; }
+.opac-auto-013 {
+    border-bottom: none;
+    *height: 0px;
+}
+.adv_global_filter_sort {
+    border: none;
+    width: 100%;
+}
+.clear-both { clear: both; }
+.common-no-pad {
+    clear: both;
+    height: 0px;
+    margin: 0px;
+    padding: 0px;
+}
+.common-full-pad {
+    clear: both;
+    height: 15px;
+}
+.alert { color: red; }
+.float-left { float: left; }
+.float-right { float: right; }
+
+.saved-searches-header { width: 100%; font-weight: bold; font-size: 120%; }
+.saved-searches-header .button { float: right; width: 28px; }
+.saved-searches-header .text { float: left; padding-right: 1em; margin: 0.5ex 0;}
+.saved-searches-header {font-weight: bold; font-size: 120%; }
+.saved-searches { border-bottom: 1px solid #666; }
+#staff-saved-search { /* wraps .saved-searches-header and .saved-searches on the record page */
+    border-right: 1px solid #333;
+}
+.result_item_circulated {
+    padding-top: 4px;
+}
+
+.result_item_circulated span {
+    position: relative;
+    top:-3px;
+    left:3px;
+}
+
+#search-only-bookbag-container { margin: 2ex 0; font-weight: bold; }
+#result-bookbag-heading { text-align: center; margin: 2ex; }
+
+.result-bookbag-name { font-size: 140%; font-weight: bold; }
+.result-bookbag-description { font-size: 120%; font-style: italic; }
+.result-bookbag-item-note { font-style: italic; }
+.lowhits-bookbag-name { font-weight: bold; }