From: Chris Burton Date: Mon, 29 Jun 2020 14:51:51 +0000 (-0400) Subject: LP#1778972: OPAC Redesign X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=b5fa5dda8c181aeb8e501f52186f55f2f0e21ef8;p=Evergreen.git LP#1778972: OPAC Redesign To test ------- Rename opac to opac-old and opac-new to opac, replacing the framework while keeping the old one as backup. Signed-off-by: Chris Burton Signed-off-by: Ruth Frasur Signed-off-by: Galen Charlton Signed-off-by: Jane Sandberg --- diff --git a/Open-ILS/src/templates/opac-new/advanced.tt2 b/Open-ILS/src/templates/opac-new/advanced.tt2 new file mode 100644 index 0000000000..1d6b412f3c --- /dev/null +++ b/Open-ILS/src/templates/opac-new/advanced.tt2 @@ -0,0 +1,57 @@ +[%- PROCESS "opac/parts/header.tt2"; + WRAPPER "opac/parts/base.tt2"; + INCLUDE "opac/parts/topnav.tt2"; + ctx.page_title = l("Advanced Search"); + pane = CGI.param("pane") || "advanced"; + loc = ctx.search_ou; + + ctx.metalinks.push(''); +-%] + [% l('Advanced Search') %] +
+
+ [% IF pane == 'advanced' %] +

Advanced Search

+

Refine your search by filling out one or more fields to search by below.

+ [% ELSIF pane == 'numeric' %] +

Numeric Search

+

Search by a field and numeric identifier.

+ [% ELSIF pane == 'expert' %] +

Expert Search

+

Search the MARC record.

+ [% END %] +
+
+
+
+
+
+ [% IF pane == 'advanced' %] + [% INCLUDE "opac/parts/advanced/search.tt2" %] + [% ELSIF pane == 'numeric' %] + [% INCLUDE "opac/parts/advanced/numeric.tt2" %] + [% ELSIF pane == 'expert' %] + [% INCLUDE "opac/parts/advanced/expert.tt2" %] + [% END %] +
+
+
+
+
+[% END %] diff --git a/Open-ILS/src/templates/opac-new/browse.tt2 b/Open-ILS/src/templates/opac-new/browse.tt2 new file mode 100644 index 0000000000..bf34c23b6d --- /dev/null +++ b/Open-ILS/src/templates/opac-new/browse.tt2 @@ -0,0 +1,228 @@ +[%- # This is the bib and authority combined record browser. + ctx.page = "browse"; + + PROCESS "opac/parts/header.tt2"; + PROCESS "opac/parts/misc_util.tt2"; + PROCESS "opac/parts/org_selector.tt2"; + WRAPPER "opac/parts/base.tt2"; + INCLUDE "opac/parts/topnav.tt2"; + + ctx.page_title = l("Browse the Catalog"); + + blimit = CGI.param('blimit') || ctx.opac_hits_per_page || 10; + + depart_list = ['blimit', 'bterm', 'bpivot']; + ctx.metalinks.push(''); + MACRO heading_use_label BLOCK; + SWITCH use; + CASE 'variant'; + l('See'); + CASE 'broader'; + l('Broader term'); + CASE 'narrower'; + l('Narrower term'); + CASE 'other'; + l('Related term'); + CASE; + l('See'); + END; + END; +%] + +

[% l('Catalog Browse') %]

+ +
+
+
+
+
+ + + [% control_qtype = INCLUDE "opac/parts/qtype_selector.tt2" + id="browse-search-class" browse_only=1 plural=1 %] + + [% control_bterm = BLOCK %][% END %] + [% control_locg = INCLUDE build_org_selector id='browse-context' + show_loc_groups=1 + arialabel=l('Select holding library') %] + [% l('Browse for [_1] starting with [_2] in [_3]', control_qtype, control_bterm, control_locg) %] + + + +
+
+
+ [% BLOCK browse_pager %] +
+
+ [% IF ctx.back_pivot %] + ← [%l ('Back') %] + [% END %] + [% IF ctx.pager_shortcuts; + current_qtype = CGI.param('qtype') || 'title' %] + + [% FOR shortcut IN ctx.pager_shortcuts %] + [% shortcut.1 %] + [% END %] + + [% END %] + + [% IF ctx.forward_pivot %] + [%l ('Next') %] → + [% END %] + + +
+
+ [% END %] + + [% PROCESS browse_pager id=0 %] + +
+ [% IF ctx.browse_error %] + + [% l("An error occurred browsing records. " _ + "Please try again in a moment or report the issue " _ + "to library staff.") %] + + [% ELSE %] + [% IF ctx.browse_leading_article_warning %] +
+ [% l("Your browse term seems to begin with an article (a, an, the). You might get better results by omitting the article.") %] + [% IF ctx.browse_leading_article_alternative %] +

+ [% alternative_link = BLOCK %] + [% ctx.browse_leading_article_alternative | html %] + [%- END; # alternative_link BLOCK + l("Did you mean [_1]?", alternative_link); + END # IF %] +

+
+ [% END %] +
    + [% FOR result IN ctx.browse_results %] +
  • + + [% IF result.sources > 0 %] + [% result.value | html %] + ([% + IF result.accurate == 'f'; + l("At least"); " "; + END; + result.sources %]) + [% ELSE %] + [% result.value | html %] + [% END %] + + + [% FOR a IN result.authorities; + PROCESS authority_notes authority=a IF !sees.grep(a.id); + END %] + [% auth_headings_ul_added = 0; %] + [% seenit = {}; # for headings we've rendered + FOR a IN result.sees; + # We can go no further sans control_set. + NEXT UNLESS a.control_set; + + # get_authority_fields is fast and cache-y. + acs = ctx.get_authority_fields(a.control_set); + FOR field_group IN a.headings; + field_id = field_group.keys.0; + field = acs.$field_id; + headings = field_group.values.0; + FOR h IN headings; + # We could display headings without + # links here when h.target is + # undef, if we wanted to, but note + # that h.target_count is only + # defined when h.target is. + + IF h.target AND h.target_count AND result.list_authorities.grep('^' _ h.target _ '$').size == 0 AND h.main_entry; + id = h.target; NEXT IF seenit.$id; seenit.$id = 1; + IF !auth_headings_ul_added; + # only add a
      if we have at least one
    • (WCAG 2.0) + auth_headings_ul_added = 1; %] +
        + [% END %] + +
      • [% heading_use_label(use=h.type) %] + [% h.heading | html %] + ([% h.target_count %]) +
        • + [% END %] + [% END %] + [% END %] + [% END %] + [% FOR a IN result.authorities; + # We can go no further sans control_set. + NEXT UNLESS a.control_set; + + # get_authority_fields is fast and cache-y. + acs = ctx.get_authority_fields(a.control_set); + FOR field_group IN a.headings; + field_id = field_group.keys.0; + field = acs.$field_id; + headings = field_group.values.0; + FOR h IN headings; + # We could display headings without + # links here when h.target is + # undef, if we wanted to, but note + # that h.target_count is only + # defined when h.target is. + + IF h.target AND h.target_count AND result.list_sees.grep('^' _ h.target _ '$').size == 0 AND !h.main_entry AND ctx.get_cgf('opac.show_related_headings_in_browse').enabled == 't'; + id = h.target; NEXT IF seenit.$id; seenit.$id = 1; + IF !auth_headings_ul_added; + # only add a
          if we have at least one
        • (WCAG 2.0) + auth_headings_ul_added = 1; %] +
            + [% END %] +
          • [% heading_use_label(use=h.type) %] + [% h.heading | html %] + ([% h.target_count %]) +
            • + [% END %] + [% END %] + [% END %] + [% END %] + [% IF auth_headings_ul_added %]
          [% END %] +
          • + [% END %] +
        + [% END %] +
+ + [% PROCESS browse_pager id=1 %] +
+
+
+
+
+ + [% BLOCK authority_notes; + # Displays public general notes (sometimes called "scope notes" ?) + FOR note IN authority.notes %] +
+ + [% l("Note:") %] + + + [% FOR piece IN note; piece | html; END %] + +
+ [% END; + END; # end of BLOCK authority_notes %] + +[% END %] diff --git a/Open-ILS/src/templates/opac-new/cnbrowse.tt2 b/Open-ILS/src/templates/opac-new/cnbrowse.tt2 new file mode 100644 index 0000000000..86454e9e34 --- /dev/null +++ b/Open-ILS/src/templates/opac-new/cnbrowse.tt2 @@ -0,0 +1,20 @@ +[%- # This is the stand-alone call-number browser. This mainly wraps around + # the same guts as the "shelf browser" part of a record results page. + + PROCESS "opac/parts/header.tt2"; + PROCESS "opac/parts/misc_util.tt2"; + ctx.metalinks.push(''); + WRAPPER "opac/parts/base.tt2"; + INCLUDE "opac/parts/topnav.tt2"; + ctx.page_title = l("Call Number Browse"); %] + [% l('Call Number Browse') %] + [% INCLUDE "opac/parts/searchbar.tt2" %] +
+
+
+ [% INCLUDE "opac/parts/record/cnbrowse.tt2" %] +
+
+
+
+[% END %] diff --git a/Open-ILS/src/templates/opac-new/css/style.css.tt2 b/Open-ILS/src/templates/opac-new/css/style.css.tt2 new file mode 100644 index 0000000000..46e2ecca12 --- /dev/null +++ b/Open-ILS/src/templates/opac-new/css/style.css.tt2 @@ -0,0 +1,3792 @@ +[%- + PROCESS "opac/parts/css/colors.tt2"; + PROCESS "opac/parts/css/fonts.tt2"; + rtl = ctx.get_i18n_l(ctx.eg_locale).rtl; +%] + +/* +Mini Table Styling +*/ +@media +only screen and (max-width: 650px) { + .miniTable{ + width: 100% !important; + } + + /* Force table to not be like tables anymore */ + .miniTable table, .miniTable thead, .miniTable tbody, .miniTable th, .miniTable td, .miniTable tr + { + display: block; + } + + .miniTable th{ + display:none; + } + + /* Hide table headers (but not display: none;, for accessibility) */ + .miniTable thead tr{ + position: absolute; + top: -9999px; + left: -9999px; + } + + .miniTable tr + { + border: 1px solid #ccc; + margin: 10px 0px; + } + + + .miniTable td + { + border: none; + border-bottom: 1px solid #eee; + position: relative; + padding-left: 50%; + min-height:45px; + text-align: right; + } + + .miniTable td:before + { + left: 6px; + width: 45%; + padding-right: 10px; + white-space: nowrap; + position: absolute; + } + .copyTable tr:nth-of-type(1):before { content: "Copy #1"; display: block; text-align:center; } + .copyTable tr:nth-of-type(2):before { content: "Copy #2"; display: block; text-align:center;} + .copyTable tr:nth-of-type(3):before { content: "Copy #3"; display: block; text-align:center;} + .copyTable tr:nth-of-type(4):before { content: "Copy #4"; display: block; text-align:center;} + .copyTable tr:nth-of-type(5):before { content: "Copy #5"; display: block; text-align:center;} + .copyTable tr:nth-of-type(6):before { content: "Copy #6"; display: block; text-align:center;} + .copyTable tr:nth-of-type(7):before { content: "Copy #7"; display: block; text-align:center;} + .copyTable tr:nth-of-type(8):before { content: "Copy #8"; display: block; text-align:center;} + .copyTable tr:nth-of-type(9):before { content: "Copy #9"; display: block; text-align:center;} + .copyTable tr:nth-of-type(10):before { content: "Copy #10"; display: block; text-align:center;} + + .copyTable td:nth-of-type(1):before { content: "Library"; display: flex; } + .copyTable td:nth-of-type(2):before { content: "Call Number"; display: flex; } + .copyTable td:nth-of-type(3):before { content: "Barcode"; display: flex;} + .copyTable td:nth-of-type(4):before { content: "Shelving Location"; display: flex;} + .copyTable td:nth-of-type(5):before { content: "Status"; display: flex;} + .copyTable td:nth-of-type(6):before { content: "Due Date"; display: flex;} + + .holdingsTable tr:nth-of-type(1):before { content: "Copy #1"; display: block; text-align:center; } + .holdingsTable tr:nth-of-type(2):before { content: "Copy #2"; display: block; text-align:center;} + .holdingsTable tr:nth-of-type(3):before { content: "Copy #3"; display: block; text-align:center;} + .holdingsTable tr:nth-of-type(4):before { content: "Copy #4"; display: block; text-align:center;} + .holdingsTable tr:nth-of-type(5):before { content: "Copy #5"; display: block; text-align:center;} + .holdingsTable tr:nth-of-type(6):before { content: "Copy #6"; display: block; text-align:center;} + .holdingsTable tr:nth-of-type(7):before { content: "Copy #7"; display: block; text-align:center;} + .holdingsTable tr:nth-of-type(8):before { content: "Copy #8"; display: block; text-align:center;} + .holdingsTable tr:nth-of-type(9):before { content: "Copy #9"; display: block; text-align:center;} + .holdingsTable tr:nth-of-type(10):before { content: "Copy #10"; display: block; text-align:center;} + + + .holdingsTable td:nth-of-type(1):before { content: "Library"; display: flex; } + .holdingsTable td:nth-of-type(2):before { content: "Shelving location"; display: flex; } + .holdingsTable td:nth-of-type(3):before { content: "Call number"; display: flex;} + .holdingsTable td:nth-of-type(4):before { content: "Status"; display: flex;} + + .chargesTable td:nth-of-type(1):before { content: "Select"; display: flex; } + .chargesTable td:nth-of-type(2):before { content: "Owed"; display: flex; } + .chargesTable td:nth-of-type(3):before { content: "Billing Type"; display: flex;} + .chargesTable td:nth-of-type(4):before { content: "Note"; display: flex;} + .chargesTable td:nth-of-type(5):before { content: "Date"; display: flex;} + + .chargesMainTable td:nth-of-type(1):before { content: "Select"; display: flex; } + .chargesMainTable td:nth-of-type(2):before { content: "Owed"; display: flex; } + .chargesMainTable td:nth-of-type(3):before { content: "Billing Type"; display: flex;} + .chargesMainTable td:nth-of-type(4):before { content: "Title"; display: flex;} + .chargesMainTable td:nth-of-type(5):before { content: "Checkout"; display: flex;} + .chargesMainTable td:nth-of-type(6):before { content: "Due"; display: flex;} + .chargesMainTable td:nth-of-type(7):before { content: "Returned/Renewed"; display: flex;} + + .activeHoldstable td:nth-of-type(1):before { content: "Select"; display: flex; } + .activeHoldstable td:nth-of-type(2):before { content: "Title"; display: flex; } + .activeHoldstable td:nth-of-type(3):before { content: "Author"; display: flex;} + .activeHoldstable td:nth-of-type(4):before { content: "Format"; display: flex;} + .activeHoldstable td:nth-of-type(5):before { content: "Pickup Location"; display: flex;} + .activeHoldstable td:nth-of-type(6):before { content: "Cancel If Not Filled By"; display: flex;} + .activeHoldstable td:nth-of-type(7):before { content: "Status"; display: flex;} + .activeHoldstable td:nth-of-type(8):before { content: "Notes"; display: flex;} + + .holdHistoryTable td:nth-of-type(1):before { content: "Title"; display: flex; } + .holdHistoryTable td:nth-of-type(2):before { content: "Author"; display: flex; } + .holdHistoryTable td:nth-of-type(3):before { content: "Format"; display: flex; } + .holdHistoryTable td:nth-of-type(4):before { content: "Pickup Location"; display: flex; } + .holdHistoryTable td:nth-of-type(5):before { content: "Status"; display: flex; } + + .paymentTable td:nth-of-type(1):before { content: "Payment Date"; display: flex; } + .paymentTable td:nth-of-type(2):before { content: "Payment For"; display: flex; } + .paymentTable td:nth-of-type(3):before { content: "Amount"; display: flex; } + .paymentTable td:nth-of-type(4):before { content: "Receipt"; display: flex; } + + .messagesTable td:nth-of-type(1):before { content: "Select"; display: flex; } + .messagesTable td:nth-of-type(2):before { content: "Date"; display: flex; } + .messagesTable td:nth-of-type(3):before { content: "Library"; display: flex; } + .messagesTable td:nth-of-type(4):before { content: "Subject"; display: flex; } + .messagesTable td:nth-of-type(5):before { content: ""; display: flex; } + + .circTable td:nth-of-type(1):before { content: "Select"; display: flex; } + .circTable td:nth-of-type(2):before { content: "Title"; display: flex; } + .circTable td:nth-of-type(3):before { content: "Author"; display: flex; } + .circTable td:nth-of-type(4):before { content: "Renewals Left"; display: flex; } + .circTable td:nth-of-type(5):before { content: "Due Date"; display: flex; } + .circTable td:nth-of-type(6):before { content: "Barcode"; display: flex; } + .circTable td:nth-of-type(7):before { content: "Call Number"; display: flex; } + + .circHistTable td:nth-of-type(1):before { content: "Select"; display: flex; } + .circHistTable td:nth-of-type(2):before { content: "Title"; display: flex; } + .circHistTable td:nth-of-type(3):before { content: "Author"; display: flex; } + .circHistTable td:nth-of-type(4):before { content: "Checkout Date"; display: flex; } + .circHistTable td:nth-of-type(5):before { content: "Due Date"; display: flex; } + .circHistTable td:nth-of-type(6):before { content: "Date Returned"; display: flex; } + .circHistTable td:nth-of-type(7):before { content: "Barcode"; display: flex; } + .circHistTable td:nth-of-type(8):before { content: "Call Number"; display: flex; } + + .bookbagTable td:nth-of-type(1):before { content: ""; display: flex; } + .bookbagTable td:nth-of-type(2):before { content: "Title"; display: flex; } + .bookbagTable td:nth-of-type(3):before { content: "Author(s)"; display: flex; } + .bookbagTable td:nth-of-type(4):before { content: "Local Call number"; display: flex; } + .bookbagTable td:nth-of-type(5):before { content: "Publication Date"; display: flex; } + .bookbagTable td:nth-of-type(6):before { content: "Format"; display: flex; } + .bookbagTable td:nth-of-type(7):before { content: "Notes"; display: flex; } + + .eholdsTable td:nth-of-type(1):before { content: "Title"; display: flex; } + .eholdsTable td:nth-of-type(2):before { content: "Author"; display: flex; } + .eholdsTable td:nth-of-type(3):before { content: "Expire Date"; display: flex; } + .eholdsTable td:nth-of-type(4):before { content: "Status"; display: flex; } + .eholdsTable td:nth-of-type(5):before { content: "Actions"; display: flex; } + + .eholdsreadyTable td:nth-of-type(1):before { content: "Title"; display: flex; } + .eholdsreadyTable td:nth-of-type(2):before { content: "Author"; display: flex; } + .eholdsreadyTable td:nth-of-type(3):before { content: "Expire Date"; display: flex; } + .eholdsreadyTable td:nth-of-type(4):before { content: "Actions"; display: flex; } + + .echeckoutTable td:nth-of-type(1):before { content: "Title"; display: flex; } + .echeckoutTable td:nth-of-type(2):before { content: "Author"; display: flex; } + .echeckoutTable td:nth-of-type(3):before { content: "Due Date"; display: flex; } + .echeckoutTable td:nth-of-type(4):before { content: "Actions"; display: flex; } + + .ecircsTable td:nth-of-type(1):before { content: "Title"; display: flex; } + .ecircsTable td:nth-of-type(2):before { content: "Author"; display: flex; } + .ecircsTable td:nth-of-type(3):before { content: "Due Date"; display: flex; } + .ecircsTable td:nth-of-type(4):before { content: "Actions"; display: flex; } + + .bucketTable td:nth-of-type(2):before { content: "Title"; display: flex; text-align:left; } + .bucketTable td:nth-of-type(3):before { content: "Author"; display: flex; text-align:left; } + .bucketTable td:nth-of-type(4):before { content: "Call Number"; display: flex; text-align:left; } + + /*Media Style Additions*/ + .fullRow{ + padding: 5px !important; + text-align: center !important; + width: 100%; + } + + .paginateText{ + display:none; + } +}/*Micro Tables End*/ + +/* +Novelist Styling +*/ + +.NovGroupHeader{ + font-size: 16pt !important; + text-align: center; + font-weight: 600 !important; +} + +.NovSectionHeader{ + font-size: 16pt !important; + font-weight: 600 !important; +} + +.NovSelectImageHeadingToggle{ + font-size: 20px; + +} + +/*Novelist Styling End*/ + +/* Buttons */ + +.btn-confirm { + color: [% css_colors.button_confirm_text %]; + background-color: [% css_colors.button_confirm %]; + border-color: [% css_colors.button_confirm_border %]; +} + +.btn-confirm:hover { + color: [% css_colors.button_confirm_text %]; + background-color: [% css_colors.button_confirm_hover %]; + border-color: [% css_colors.button_confirm_border_hover %]; +} + +.btn-deny { + color: [% css_colors.button_deny_text %]; + background-color: [% css_colors.button_deny %]; + border-color: [% css_colors.button_deny_border_hover %]; +} + +.btn-deny:hover { + color: [% css_colors.button_deny_text %]; + background-color: [% css_colors.button_deny_hover %]; + border-color: [% css_colors.button_deny_border_hover %]; +} + +.btn-remove { + color: [% css_colors.button_remove_text %]; + background-color: [% css_colors.button_remove %]; + border-color: [% css_colors.button_remove_border %]; +} + +.btn-remove:hover { + color: [% css_colors.button_remove_text %]; + background-color: [% css_colors.button_remove_hover %]; + border-color: [% css_colors.button_remove_border_hover %]; +} + +.btn-opac{ + color: [% css_colors.opac_button_text %] !important; + background-color: [% css_colors.opac_button %]; + border-color: [% css_colors.opac_button_border %]; +} + +.btn-opac:hover{ + color: [% css_colors.opac_button_text %]; + background-color: [% css_colors.opac_button_hover %] !important; + border-color: [% css_colors.opac_button_border_hover %]; +} + +.btn-action{ + color: [% css_colors.action_button_text %] !important; + background-color: [% css_colors.action_button %]; + border-color: [% css_colors.action_button_border %]; +} + +.btn-action:hover{ + color: [% css_colors.action_button_text %]; + background-color: [% css_colors.action_button_hover %] !important; + border-color: [% css_colors.action_button_border_hover %]; +} +.btn-action > a{ + color: [% css_colors.action_button_text_anchors %]; +} + + +.dash-link{ + color: #fff; +} + +.dash-clear{ + color: [% css_colors.zero_count %] !important; +} + +.dash-unclear{ + color: [% css_colors.non_zero_count %] !important; +} + +.remove_filter{ + padding: .25rem .25rem !important; + font-size: .875rem; + line-height: 0.5; + border-radius: 1rem !important; +} + +#cnbrowse{ + width: 95%; + text-align: center; + padding: 15px; +} +.cn_browse_item .card{ + padding: 15px; +} +#facets .card-header,#facets .card-header a { + background-color: [% css_colors.facets_back %]; + color: [% css_colors.text_invert %] +} + +.facet_template:hover{ + background-color:#e8e8e8; +} + +.red{ + color:red; +} + +.login:focus{ + outline:none; +} +.browse-result-list{ + list-style:none; +} +.not_active_pill{ + border: 2px solid #007bff; + padding: 6px; + margin: 0 10px; +} + +.mini-control{ + max-width: 100px !important; +} + +.card-body:empty{ + display:none; +} +.min{ + min-height:500px; +} +.container{ + +} +html{ + height:100%; + min-height: 100vh; +} +body { +height:100%; +min-height: 100vh; + margin:0; + font-family: [% css_fonts.font_main %] !important; + font-size: [% css_fonts.size_base %]; + /* background-color: [% css_colors.primary %]; */ + [% IF rtl == 't' -%] + direction: rtl; + [%- END %] +} + +button, input { + font-family: [% css_fonts.font_main %] !important; + font-size: [% css_fonts.size_base %]; +} + +img { + border: none; +} + +#topnav_logo { + margin: 2em 0; +} + +#homesearch_main_logo { + padding-top: 60px; + margin: auto; + width: 50%; +} + +a { + color: [% css_colors.link %]; +} + +#search-wrapper input[type=text] { + margin:0; + padding:0; +} + +#search-wrapper select, .results_header_lbl select { + border:1px solid [% css_colors.border_standard %]; + margin:0; + padding:0; + width: 12em; +} + +.searchbar { + font-weight: bold; + padding-top: 10px; + [% IF rtl == 't' -%] + margin-right: 1em; + [%- ELSE %] + margin-left: 1em; + [%- END %] +} + +.refine_search { + padding-bottom: 7px; + margin-left: 1em; +} + +/* +#search-wrapper select { + border:0px solid [% css_colors.border_dark %]; + filter:alpha(opacity=0); + -khtml-opacity:0; + opacity:0; + padding:0; + margin:0; + height:18px; +} +*/ +h1 { + margin:0; + margin-bottom: 5px; + font-size: [% css_fonts.size_biggest %]; + font-weight:normal; +} + +h2 { + font-size: [% css_fonts.size_bigger %]; + font-weight:bold; +} + +h2.graphic880 { + font-size: [% css_fonts.size_bigger %]; + font-weight:normal; +} + +.hide_me, .hidden { + display: none; + visibility: hidden; +} + +div.select-box-wrapper { + position:absolute; + padding-top:2px; + overflow:hidden; + [% IF rtl == 't' -%] + padding-right: 3px; + text-align:right; + [%- ELSE %] + padding-left:3px; + text-align:left; + [%- END %] +} + +#dash_wrapper { + [% IF rtl == 't' -%] + margin-right: 0.5em; + [%- ELSE %] + margin-left: 0.5em; + [%- END %] +} + +#dash_wrapper div { + background-color: [% css_colors.primary %]; + border-radius: 5px; + padding: 0em 1em; +} + +.dash_divider { + margin: 0 20px; + color: #fff; + display:inline-block; +} + +#dashboard, #dashboard_e { + margin-top: 1em; + height: 2em; +} + +#dashboard span.dash-align a, #dashboard_e span.dash-align a { + font-weight: bold; + text-decoration: none; +} + +#dash_user { + font-weight: bold; +} + +#logout_link { + [% IF rtl == 't' -%] + right: 1px; + [%- ELSE %] + left: 1px; + [%- END %] +} + + +/* +#dash_fines { color: [% css_colors.text_badnews %]; } +the color contrast between "text_badnews" and "primary" +is too low for WCAG compliance. Use "text_attention" +for now until a better color is picked - if needed. +*/ + +#dash_wrapper #dash_user_message_button_container { + display: inline; + padding: 0; +} +#dash_wrapper #unread_message_count_floater { + position: absolute; + background-color: [% css_colors.text_alert %]; + padding-left: 0.2em; + padding-right: 0.2em; + display: inline-block; + font-size: 95%; + border-radius: 0; + z-index: 2; + margin-top: 0.2em; + [% IF rtl == 't' -%] + margin-right: -1.5em; + [%- ELSE %] + margin-left: -1.5em; + [%- END %] +} + +#header-wrap { + /* border-bottom: 5px solid [% css_colors.nav_separation %]; */ + background-color: [% css_colors.header_primary_fade %]; + background-image: -moz-linear-gradient([% css_colors.header_primary %], [% css_colors.header_primary_fade %]); + background-image: -o-linear-gradient([% css_colors.header_primary %], [% css_colors.header_primary_fade %]); + background-image: -webkit-linear-gradient([% css_colors.header_primary %], [% css_colors.header_primary_fade %]); + background-image: linear-gradient([% css_colors.header_primary %], [% css_colors.header_primary_fade %]); +} +#header { + color: [% css_colors.background %]; + margin-left: 1em; + margin-right: 1em; + font-size: [% css_fonts.size_small %]; +} + +#header a { + color: [% css_colors.background %]; +} + +#header a:hover { + color: [% css_colors.text_invert %]; + text-decoration: none; +} + +#header-links { + color: [% css_colors.text_invert %]; + font-size: [% css_fonts.size_small %]; + font-weight: bold; + position: relative; + top:4px; + +} + +#header-links a { + color: [% css_colors.text_invert %]; + display: block; + text-decoration: none; + [% IF rtl == 't' -%] + float: right; + margin-left: 22px; + [%- ELSE %] + float:left; + margin-right:22px; + [%- END %] +} + +#header-links a:hover { + color: [% css_colors.text_invert %]; + text-shadow: 0 0 0.2em [% css_colors.primary %], 0 0 0.2em [% css_colors.primary %]; + text-decoration: none; +} + +#header #header-links2 { + position:relative; + top:-8px; + color: [% css_colors.text_invert %]; + padding-bottom: 15px; +} + +#header #header-links2 a { + color: [% css_colors.text_invert %]; +} + +#header #header-links2 a:hover { + text-decoration: underline; +} + +#your-acct-login { + padding-top:2em; +} + +#gold-links { + [% IF rtl == 't' -%] + margin-right: 1em; + padding-right: 0px; + [%- ELSE %] + margin-left: 1em; + padding-left:0px; + [%- END %] +} + +#gold-links-home { + margin:auto; + [% IF rtl == 't' -%] + padding-right: 0px; + [%- ELSE %] + padding-left:0px; + [%- END %] +} + +#gold-links-holder { + height: 24px; + background-color: [% css_colors.background_invert %]; +} + +#util-bar { + [% IF rtl == 't' -%] + margin-right: 1em; + padding-right: 0px; + [%- ELSE %] + margin-left: 1em; + padding-left:0px; + [%- END %] + height:0px; +} + +#search-wrapper { + /*border-bottom: 1px solid [% css_colors.border_standard %];*/ + padding-bottom: 5px; + background-color: [% css_colors.background %]; +} + +#search-wrapper #breadcrumb { + margin-top:0px; + font-size: [% css_fonts.size_smaller %]; + [% IF rtl == 't' -%] + float: right; + [%- ELSE %] + float:left; + [%- END %] +} + +#search-wrapper #search-within { + margin-top:10px; + position:relative; + [% IF rtl == 't' -%] + float: left; + right: -173px; + [%- ELSE %] + float:right; + left:-173px; + [%- END %] +} + +#search-wrapper #breadcrumb a { + color: [% css_colors.text %]; +} + +#search-wrapper #search_frm label { + font-size: [% css_fonts.size_smaller %]; +} + +#search-wrapper #search-box { + [% IF rtl == 't' -%] + margin-right: 1em; + padding-right: 0px; + [%- ELSE %] + margin-left: 1em; + padding-left: 0px; + [%- END %] + padding-top: 10px; + padding-bottom: 10px; +} + +#adv_search_tabs, #acct_tabs, #acct_fines_tabs, #acct_checked_tabs, #acct_holds_tabs, #acct_prefs_tabs, #results_header_inner{ + [% IF rtl == 't' -%] + margin-right:2px; + [%- ELSE %] + margin-left: 2px; + [%- END %] + overflow: auto; +} + +#adv_search_tabs a, #acct_tabs a, #acct_fines_tabs a, #acct_checked_tabs a, #acct_holds_tabs a, #acct_prefs_tabs a { + [% IF rtl == 't' -%] + float: right; + margin: 10px 0px 0px 7px; + border-radius: 10px 10px 0px 0px; + [%- ELSE %] + float: left; + margin: 10px 7px 0px 0px; + border-radius: 10px 10px 0px 0px; + [%- END %] + text-align: center; + vertical-align: middle; + display: block; + padding: 10px 0px 10px 0px; + font-weight: bold; + color: [% css_colors.text_invert %]; + background-color: [% css_colors.control %]; + font-weight: bold; + text-decoration: none; +} + +#adv_search_tabs a, #acct_tabs a, #acct_fines_tabs a { + 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 { + background-color: [% css_colors.primary %]; + color: [% css_colors.text_invert %]; + text-decoration: none; +} + +#adv_search_filters { + position: relative; +} +#adv_search_rows { + border-bottom: none; +} +.adv_filter_block { + [% IF rtl == 't' -%] + float: right; + [%- ELSE %] + float: left; + [%- END %] + padding: 15px; + clear: both; +} +.adv_filter_block_item { + [% IF rtl == 't' -%] + float: right; + [%- ELSE %] + float: left; + [%- END %] + padding: 5px; +} + +#adv_special_block { + [% IF rtl == 't' -%] + float: right; + [%- ELSE %] + float: left; + [%- END %] + padding: 5px; + margin-top: 5px; +} + +#adv_search_submit { + [% IF rtl == 't' -%] + margin-right: 10px; + [%- ELSE %] + margin-left: 10px; + [%- END %] + position: relative; +} + +.checkbox_col { + width: 1%; + [% IF rtl == 't' -%] + padding-right: 10px !important; + [%- ELSE %] + padding-left: 10px !important; + [%- END %] +} + +#adv_search.on, #num_search.on, #expert_search.on { + color: [% css_colors.accent_darker %]; + 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-color: [% css_colors.background %]; + text-decoration: none; +} + +.acct-tab-off { + background-color: [% css_colors.control %]; +} + +#acct_checked_tabs a, #acct_holds_tabs a, #acct_prefs_tabs a { + margin-top: 0px; + font-size: [% css_fonts.size_smaller %]; + color: [% css_colors.accent_darker %]; + padding: 10px 10px 10px 10px; +} + +#acct_checked_tabs div.selected a, #acct_holds_tabs div.selected a, #acct_prefs_tabs div.selected a { + background-color: [% css_colors.accent_lightest %]; + color: [% css_colors.accent_darker %]; +} + +#acct_checked_tabs, #acct_holds_tabs, #acct_prefs_tabs { + padding-bottom: 12px; + color: [% css_colors.accent_medium %]; +} + +#acct_select, #acct_prefs_select { + display: none; +} + +#mobile_acct_search_links { + background-color: [% css_colors.primary_fade %]; +} + +.rdetail_header { + [% IF rtl == 't' -%] + padding: 5px 0px 6px 7px; + margin-right: 1em; + [%- ELSE %] + padding: 5px 7px 6px 0px; + margin-left: 1em; + [%- END %] + border-bottom: 1px dotted [% css_colors.accent_light %]; +} + +.rdetail_results a { + color:[% css_colors.primary_fade %]; + font-weight:bold; + font-size: [% css_fonts.size_bigger %]; +} + +.rdetail_result_count { + color: [% css_colors.text %]; + font-weight: normal; + display: inline-block; + [% IF rtl == 't' -%] + padding-right: 1em; + [%- ELSE %] + padding-left: 1em; + [%- END %] +} + +.rdetail_result_nav { + font-weight:normal; + display: inline-block; + [% IF rtl == 't' -%] + padding-right: 1em; + [%- ELSE %] + padding-left: 1em; + [%- END %] +} + +#rdetail_details_table { + margin-top: 15px; +} + +#rdetail_image { border: none; } +#rdetail_image_cell { + padding-top: 3px; + [% IF rtl == 't' -%] + padding-left: 10px; + [%- ELSE %] + padding-right: 10px; + [%- END %] +} + +h2.rdetail_uris { + margin-top: 1em; +} +div.rdetail_uris { + padding: 0.5em 1em 0.5em 1em; + background-color: [% css_colors.accent_lighter2 %]; +} +div.rdetail_uris ul li { + position: relative; + [% IF rtl == 't' -%] + right: 1em; + [%- ELSE %] + left: 1em; + [%- END %] +} + +div.rdetail_show_copies { + margin-top: 1em; +} + +div#rdetail_actions_div { + background-color: [% css_colors.background %]; + [% IF rtl == 't' -%] + float: left; + [%- ELSE %] + float: right; + [%- END %] +} + +span#rdetail_copy_counts { + display: inline-block; + vertical-align: top; + [% IF rtl == 't' -%] + border-left: thin; + margin-left: 1em; + padding-left: 1em; + [%- ELSE %] + border-right: thin; + margin-right: 1em; + padding-right: 1em; + [%- END %] +} + +span#rdetail_hold_counts { + display: inline-block; + vertical-align: top; +} +span#rdetail_hold_counts p { + [% IF rtl == 't' -%] + padding-right: 2em; + [%- ELSE %] + padding-left: 2em; + [%- END %] +} + +#rdetail_image_div { + [% IF rtl == 't' -%] + float: right; + margin-left: 1em; + [%- ELSE %] + float: left; + margin-right: 1em; + [%- END %] +} + +.rdetail_aux_utils { + padding-bottom: 6px; + [% IF rtl == 't' -%] + border-right: 1px dotted [% css_colors.accent_light %]; + padding-right:17px; + padding-left:70px; + [%- ELSE %] + border-left:1px dotted [% css_colors.accent_light %]; + padding-left: 17px; + padding-right: 70px; + [%- END %] +} + +div.place_hold { + border-bottom: 1px dotted [% css_colors.accent_light %]; + padding-top: 10px; +} + +div.toggle_list { padding-top: 6px; } + +div.share_record { + padding-top: 6px; + border-top: 1px dotted [% css_colors.accent_light %]; +} + +div.format_icon { + [% IF rtl == 't' -%] + float: left; + margin-left: 17px; + [%- ELSE %] + float: right; + margin-right: 17px; + [%- END %] +} + +#metarecord_population { + overflow: hidden; + width: 40%; + padding-bottom: 10px; +} + +.metarecord_population_span_link { + line-height: 20px; +} + +.metarecord_population_format { + border-right: thin; + display: inline-block; + margin-right: 1em; + padding-right: 1em; + vertical-align: top; +} + +.metarecord_population_item_lang { + display: inline-block; + vertical-align: top; +} + +.metarecord_population_all { + padding-top:10px; +} + +.results_aux_utils { + display: table-cell; +} + +.result_util { + border-bottom: 1px dotted [% css_colors.accent_light %]; + padding-top: 6px; + [% IF rtl == 't' -%] + padding-right: 1em; + [%- ELSE %] + padding-left: 1em; + [%- END %] +} + +.results_reviews { + top: -5px; +} + +#rdetail_copies { + padding-top: 1.5em; +} + +#rdetails_status td { + [% IF rtl == 't' -%] + padding: 7px 13px 3px 0px; + [%- ELSE %] + padding: 7px 0px 3px 13px; + [%- END %] +} + +#rdetails_status td[headers=copy_header_library], +#rdetails_status td[headers=copy_header_shelfloc] { + white-space: normal; +} + +#rdetails_status thead th { + [% IF rtl == 't' -%] + padding: 13px 13px 13px 0px; + text-align: right; + [%- ELSE %] + padding: 13px 0px 13px 13px; + text-align: left; + [%- END %] + background-color: [% css_colors.accent_lighter2 %]; + font-size: [% css_fonts.size_smaller %]; + font-weight: bold; +} + +#rdetails_status tbody td { + [% IF rtl == 't' -%] + padding-right: 13px; + text-align: right; + [%- ELSE %] + padding-left: 13px; + text-align: left; + [%- END %] +} +#rdetails_status tbody td.copy_note { + color: [% css_colors.primary %]; + text-wrap:normal; + white-space:pre-wrap !important; + word-wrap:normal; +} + +#rdetails_status tbody td.copy_tag { + border-color: [% css_colors.primary %]; + border-style: dashed; + border-width: 2px; +} +#rdetails_status tbody .copy_tag_value { + font-weight: bolder; +} + +.rdetail_extras { + background-color: [% css_colors.primary_fade %]; + border: 1px solid [% css_colors.primary %]; + padding-top:1px; + clear:both; +} + +#rdetail_extras_div { + margin: 1em 0; +} + +.rdetail_extras_hr { + [% IF rtl == 't' -%] + margin-right: 1px; + margin-left: 1px; + [%- ELSE %] + margin-left: 1px; + margin-right: 1px; + [%- END %] + height: 1px; + background-color: [% css_colors.accent_light %]; +} + +.rdetail_extras_link { + padding: 6px 12px; + font-size: [% css_fonts.size_smaller %]; + font-weight: bold; +} + +.rdetail_extras_lbl { + color: [% css_colors.text_invert %]; + text-decoration: none; +} + +#rdetail_extras_expand, #rdetail_extras_collapse, #rdetail_locs_collapse { + [% IF rtl == 't' -%] + margin-right: 13px; + [%- ELSE %] + margin-left: 13px; + [%- END %] +} + +#rdetail_locs_expand, #rdetail_locs_collapse { + [% IF rtl == 't' -%] + margin-right: 13px; + [%- ELSE %] + margin-left:13px; + [%- END %] + padding-bottom:3px; + margin-top:15px; +} + +#rdetail_anotes_div .biography { + margin:0; +} + +#gbp_extra, #gbp_arrow_down_link { + display: none; +} + +.almost-content-wrapper { + background-color: [% css_colors.background %]; +} + +#content-wrapper { + background-color: [% css_colors.background %]; + min-height: 600px; + height: auto; + display: grid; +} + +.content-wrapper-record-page { top: -15px; position: relative; } + +#main-content-home { + [% IF rtl == 't' -%] + padding-right: 17px; + margin-right: 1em; + [%- ELSE %] + padding-left: 17px; + margin-left: 1em; + [%- END %] +} +#main-content { + [% IF rtl == 't' -%] + padding-right: 0px; + [%- ELSE %] + padding-left: 0px; + [%- END %] + margin: 0 1em; + clear: both; +} + +#main-content-after-bar { + [% IF rtl == 't' -%] + margin-right: 1em; + padding-right: 4px; + [%- ELSE %] + margin-left: 1em; + padding-left: 4px; + [%- END %] +} + +#results-side-bar { + [% IF rtl == 't' -%] + float: right; + margin-left: 5px; + [%- ELSE %] + float: left; + margin-right: 5px; + [%- END %] + width: 174px; + background-color: [% css_colors.background %]; +} + +#main-content .login_boxes { + border: 1px solid [% css_colors.accent_lighter %]; + 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 %]; +} + +#main-content .login_boxes h1 { + font-weight: normal; + font-size: [% css_fonts.size_biggest %]; + margin:0; +} + +#main-content .left_brain { + [% IF rtl == 't' -%] + padding-right: 28px; + [% ELSE -%] + padding-left:28px; + [% END -%] + padding-top:25px; +} + +#main-content .left_brain input[type=text], #main-content .left_brain input[type=password] { + width:167px; + margin:0; + padding:0; + background-color: [% css_colors.background %]; + font-size: [% css_fonts.size_bigger %]; + color: [% css_colors.text %]; +} + +#main-content .left_brain .input_bg { + [% IF rtl == 't' -%] + padding: 10px 13px 0px 10px; + [% ELSE -%] + padding:10px 10px 0px 13px; + [% END -%] + width:167px; + height:29px; +} + +.login-help-box { + [% IF rtl == 't' -%] + float: right; + margin-right: 2em; + [% ELSE -%] + float: left; + margin-left: 2em; + [% END -%] + width: 200px; + text-align: center; +} + +.login-help-button { + font-size: [% css_fonts.size_biggest %]; + padding: 1.5em; +} + +#login-failed-message { + font-size: [% css_fonts.size_bigger %]; + font-weight: bold; + color: [% css_colors.text_alert %]; + padding-top: 1em; +} + +#holds_temp_parent td { + border-bottom:1px solid [% css_colors.border_standard %]; +} + +#holds_temp_parent input, #holds_temp_parent select { + margin:0; +} + +#holds_temp_parent tr td div { + margin-top: 10px; + margin-bottom: 10px; +} + +#holds_temp_parent tr td div.format_icon { + margin-top: 6px; + margin-bottom: 6px; + float: none; +} + +#results_header_bar { + background-color: [% css_colors.accent_medium %]; + border-top:1px solid [% css_colors.accent_mediumdark %]; + border-bottom:1px solid [% css_colors.accent_mediumdark %]; +} + +.results_header_lbl { + [% IF rtl == 't' -%] + float: right; + [% ELSE -%] + float: left; + [% END -%] + font-weight: bold; + color: [% css_colors.text %]; + /* this border is not visible, but it keeps these labels the same size + as the buttons */ + border: 1px solid [% css_colors.accent_medium %]; + background-color: [% css_colors.accent_medium %]; + margin: 0.5em 0.3em; + padding: 0.3em; +} +/* we need a negative margin on the select to allow the containing