Browse Source

Bug 20168: Update of the OPAC bootstrap template to bootstrap v4

This patch updates the version of Bootstrap in the OPAC from 2.3.1 to
4.5.0. The Bootstrap JavaScript files have been replaced with custom
builds of the 4.5.0 JavaScript source files. The Bootstrap CSS is now
built into the OPAC CSS by loading the required Bootstrap 4.5.0 SCSS
files in node_modules.

OPAC SCSS now starts with Bootstrap customizations:

/* Bootstrap variable customizations */
$headings-color: #727272;
...

Followed by loading the necessary Bootstrap SCSS files:

/* Bootstrap imports */
@import "../../../../../node_modules/bootstrap/scss/functions";
@import "../../../../../node_modules/bootstrap/scss/variables";
...

Followed by our CSS. The build process for generating compiled CSS now
creates a file which bundles Bootstrap CSS and ours. Removed from the
Koha source: Bootstrap CSS files, Bootstrap "glyphicons" images.

The upgrade to Bootstrap 4 involved a lot of markup changes to conform
with new Bootstrap classes, especially in classes related to the grid.
Besides duplicating the grid we used before, this upgrade adds some new
features made possible by Bootstrap 4.5's use of flexbox as a layout
tool. This includes custom ordering of columns based on class names:
https://getbootstrap.com/docs/4.5/layout/grid/#order-classes.

Other areas where the most changes have been made: Navigation menus,
breadcrumb menus, buttons, dropdowns.

Bootstrap's JavaScript file is now "bootstrap.bundle.min.js" to reflect
the fact that a required JavaScript asset is now distributed separately
in Bootstrap 4. The "bundle" version includes Popper.js.

Unrelated changes: Indentation corrections, removal of invalid
"//<![CDATA[" markers, removal of invalid script type attributes.

To test, apply the patch and run 'yarn install' to install Bootstrap as
an npm module. Run 'yarn build --view opac' to regenerate the OPAC CSS.

Test as many aspect of the OPAC as possible, viewing pages at various
browser widths to confirm that everything adjusts well. Test with
various OPAC interface system preferences enabled and disabled.

Test self checkout and self checkin.

Known issues: RTL support has not been updated.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
20.11.x
Owen Leonard 2 years ago
committed by Jonathan Druart
parent
commit
9cb89b4639
  1. 7
      installer/data/mysql/atomicupdate/bug-20168-update-opacsearchfortitlein-preference.perl
  2. 2
      koha-tmpl/intranet-tmpl/prog/en/includes/langmenu-staff-top.inc
  3. 28
      koha-tmpl/opac-tmpl/bootstrap/css/datatables.css
  4. 753
      koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
  5. 15
      koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss
  6. 238
      koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
  7. 1122
      koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
  8. 261
      koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss
  9. 329
      koha-tmpl/opac-tmpl/bootstrap/en/includes/account-table.inc
  10. 2
      koha-tmpl/opac-tmpl/bootstrap/en/includes/calendar.inc
  11. 10
      koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
  12. 4
      koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
  13. 66
      koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-langmenu.inc
  14. 53
      koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sci.inc
  15. 62
      koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sco.inc
  16. 704
      koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
  17. 189
      koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
  18. 118
      koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-detail-sidebar.inc
  19. 2
      koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-topissues.inc
  20. 2
      koha-tmpl/opac-tmpl/bootstrap/en/includes/overdrive-checkout.inc
  21. 2
      koha-tmpl/opac-tmpl/bootstrap/en/includes/overdrive-login.inc
  22. 28
      koha-tmpl/opac-tmpl/bootstrap/en/includes/page-numbers.inc
  23. 2
      koha-tmpl/opac-tmpl/bootstrap/en/includes/recordedbooks-checkout.inc
  24. 28
      koha-tmpl/opac-tmpl/bootstrap/en/includes/title-actions-menu.inc
  25. 3
      koha-tmpl/opac-tmpl/bootstrap/en/includes/usermenu.inc
  26. 32
      koha-tmpl/opac-tmpl/bootstrap/en/modules/errors/errorpage.tt
  27. 151
      koha-tmpl/opac-tmpl/bootstrap/en/modules/ilsdi.tt
  28. 8
      koha-tmpl/opac-tmpl/bootstrap/en/modules/maintenance.tt
  29. 25
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-ISBDdetail.tt
  30. 24
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-MARCdetail.tt
  31. 32
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account-pay-error.tt
  32. 32
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account.tt
  33. 12
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-addbybiblionumber.tt
  34. 647
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
  35. 14
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-alert-subscribe.tt
  36. 38
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-MARCdetail.tt
  37. 62
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-detail.tt
  38. 130
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth.tt
  39. 28
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authorities-home.tt
  40. 56
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authoritiessearchresultlist.tt
  41. 30
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-basket.tt
  42. 18
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-blocked.tt
  43. 68
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browse.tt
  44. 107
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browser.tt
  45. 43
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt
  46. 51
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt
  47. 1668
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
  48. 28
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-discharge.tt
  49. 8
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadcart.tt
  50. 90
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadshelf.tt
  51. 43
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-full-serial-issues.tt
  52. 510
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-illrequests.tt
  53. 121
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-imageviewer.tt
  54. 32
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-issue-note.tt
  55. 130
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-library.tt
  56. 74
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-main.tt
  57. 32
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry-update-submitted.tt
  58. 1612
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry.tt
  59. 416
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt
  60. 284
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-overdrive-search.tt
  61. 58
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-passwd.tt
  62. 252
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-password-recovery.tt
  63. 78
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-patron-consent.tt
  64. 125
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-privacy.tt
  65. 29
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
  66. 236
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-recordedbooks-search.tt
  67. 147
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-confirmation.tt
  68. 38
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-email-sent.tt
  69. 36
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-invalid.tt
  70. 38
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reportproblem.tt
  71. 361
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-request-article.tt
  72. 26
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reserve.tt
  73. 28
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-restrictedpage.tt
  74. 200
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results-grouped.tt
  75. 850
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
  76. 14
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-review.tt
  77. 34
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-routing-lists.tt
  78. 57
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt
  79. 12
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-sendbasketform.tt
  80. 14
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-sendshelfform.tt
  81. 44
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-serial-issues.tt
  82. 180
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shareshelf.tt
  83. 911
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
  84. 40
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-showreviews.tt
  85. 70
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-suggestions.tt
  86. 58
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-tags.tt
  87. 35
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-tags_subject.tt
  88. 157
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-topissues.tt
  89. 46
      koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
  90. 274
      koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt
  91. 63
      koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/help.tt
  92. 352
      koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt
  93. 12
      koha-tmpl/opac-tmpl/bootstrap/en/modules/svc/suggestion.tt
  94. 6
      koha-tmpl/opac-tmpl/bootstrap/js/global.js
  95. 1
      koha-tmpl/opac-tmpl/bootstrap/js/script.js
  96. 6301
      koha-tmpl/opac-tmpl/bootstrap/lib/bootstrap/css/bootstrap-rtl.css
  97. 857
      koha-tmpl/opac-tmpl/bootstrap/lib/bootstrap/css/bootstrap-rtl.min.css
  98. 6307
      koha-tmpl/opac-tmpl/bootstrap/lib/bootstrap/css/bootstrap.css
  99. 873
      koha-tmpl/opac-tmpl/bootstrap/lib/bootstrap/css/bootstrap.min.css
  100. BIN
      koha-tmpl/opac-tmpl/bootstrap/lib/bootstrap/img/glyphicons-halflings-white.png

7
installer/data/mysql/atomicupdate/bug-20168-update-opacsearchfortitlein-preference.perl

@ -0,0 +1,7 @@
$DBversion = 'XXX'; # will be replaced by the RM
if( CheckVersion( $DBversion ) ) {
# Fix the markup in the OPACSearchForTitleIn system preference
$dbh->do("UPDATE systempreferences SET VALUE = replace( value, '</li>', ''), value = REPLACE( value, '<li>', '') WHERE VARIABLE = 'OPACSearchForTitleIn';");
NewVersion( $DBversion, 20168, "Update OPACSearchForTitleIn to work with Bootstrap 4");
}

2
koha-tmpl/intranet-tmpl/prog/en/includes/langmenu-staff-top.inc

@ -1,7 +1,7 @@
[% IF ( ( ! one_language_enabled ) && ( languages_loop ) && ( Koha.Preference('StaffLangSelectorMode') == 'both' || Koha.Preference('StaffLangSelectorMode') == 'top') ) %]
<li class="dropdown">
<a href="#" title="Switch languages" class="dropdown-toggle" id="langmenu" data-toggle="dropdown" role="button"><i class="icon-flag icon-white"></i> <span class="langlabel">Languages</span> <b class="caret"></b></a>
<a href="#" title="Switch languages" class="dropdown-toggle" id="langmenu" data-toggle="dropdown" role="button"><i class="fa fa-flag"></i> <span class="langlabel">Languages</span> <b class="caret"></b></a>
<ul aria-labelledby="langmenu" role="menu" class="dropdown-menu dropdown-menu-left">
[% FOREACH languages_loo IN languages_loop.sort('rfc4646_subtag') %]
[% IF ( languages_loo.group_enabled ) %]

28
koha-tmpl/opac-tmpl/bootstrap/css/datatables.css

@ -2,27 +2,35 @@
font-size: 12px;
}
.dataTables_filter input {
font-size : 12px;
height : auto;
margin : 0;
padding: 0 4px;
}
input.search_init {
color: #999999;
}
div.top {clear : both; }
div.dataTables_length,
div.dataTables_filter {
border-left : 1px solid #FFF;
}
div.dataTables_filter {
float: left;
padding : .3em 0 0 0;
margin : 0;
}
.dataTables_filter input {
background-color: #fff;
border-radius: 0.2rem;
border: 1px solid #ced4da;
color: #495057;
height: calc(1.5em + 0.5rem + 2px);
line-height: 1.5;
padding: 0.25rem 0.5rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
div.dataTables_length,
div.dataTables_filter {
border-left : 1px solid #FFF;
.dataTables_filter input[type="search"]:focus {
border-color: #85ca11;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(194, 228, 136, 0.6);
}

753
koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss

@ -1,3 +1,82 @@
/* Bootstrap variable customizations */
$headings-color: #727272;
$headings-font-weight: 600;
$enable-gradients: false;
$info:#2679cc;
$danger: rgb(185, 32, 32);
$font-size-base: 1rem;
$h1-font-size: $font-size-base * 1.5;
$h2-font-size: $font-size-base * 1.4;
$h3-font-size: $font-size-base * 1.3;
$h4-font-size: $font-size-base * 1.2;
$h5-font-size: $font-size-base * 1.1;
$h6-font-size: $font-size-base;
$input-btn-focus-width: 1px;
$input-btn-focus-color: #85CA11;
$input-btn-focus-box-shadow: 0 1px 1px $input-btn-focus-width $input-btn-focus-color;
$color: #999999;
$links: #0076B2;
$links-hover: #005580;
$footer-height: 45px;
$sci-link-color: #0076B6;
$sci-heading-color: #727272;
@mixin shadowed {
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
}
@mixin border-radius-all($radius: 3px) {
border-radius: $radius;
}
/* Bootstrap imports */
@import "../../../../../node_modules/bootstrap/scss/functions";
@import "../../../../../node_modules/bootstrap/scss/variables";
@import "../../../../../node_modules/bootstrap/scss/mixins";
@import "../../../../../node_modules/bootstrap/scss/alert";
// @import "../../../../../node_modules/bootstrap/scss/badge";
@import "../../../../../node_modules/bootstrap/scss/breadcrumb";
@import "../../../../../node_modules/bootstrap/scss/button-group";
@import "../../../../../node_modules/bootstrap/scss/buttons";
// @import "../../../../../node_modules/bootstrap/scss/card";
// @import "../../../../../node_modules/bootstrap/scss/carousel";
@import "../../../../../node_modules/bootstrap/scss/close";
// @import "../../../../../node_modules/bootstrap/scss/code";
@import "../../../../../node_modules/bootstrap/scss/custom-forms";
@import "../../../../../node_modules/bootstrap/scss/dropdown";
@import "../../../../../node_modules/bootstrap/scss/forms";
@import "../../../../../node_modules/bootstrap/scss/grid";
// @import "../../../../../node_modules/bootstrap/scss/images";
@import "../../../../../node_modules/bootstrap/scss/input-group";
// @import "../../../../../node_modules/bootstrap/scss/jumbotron";
// @import "../../../../../node_modules/bootstrap/scss/list-group";
// @import "../../../../../node_modules/bootstrap/scss/media";
@import "../../../../../node_modules/bootstrap/scss/modal";
@import "../../../../../node_modules/bootstrap/scss/navbar";
@import "../../../../../node_modules/bootstrap/scss/nav";
@import "../../../../../node_modules/bootstrap/scss/pagination";
// @import "../../../../../node_modules/bootstrap/scss/popover";
@import "../../../../../node_modules/bootstrap/scss/print";
// @import "../../../../../node_modules/bootstrap/scss/progress";
@import "../../../../../node_modules/bootstrap/scss/reboot";
@import "../../../../../node_modules/bootstrap/scss/root";
// @import "../../../../../node_modules/bootstrap/scss/spinners";
@import "../../../../../node_modules/bootstrap/scss/tables";
// @import "../../../../../node_modules/bootstrap/scss/toasts";
// @import "../../../../../node_modules/bootstrap/scss/tooltip";
@import "../../../../../node_modules/bootstrap/scss/transitions";
@import "../../../../../node_modules/bootstrap/scss/type";
@import "../../../../../node_modules/bootstrap/scss/utilities";
/* Koha imports */
@import "fonts";
// Sticky footer styles
html,
body {
@ -7,12 +86,657 @@ body {
body {
background: #FCF9FC none;
font-family: sans-serif;
font-size: 16px;
display: flex;
height: 100%;
flex-direction: column;
}
a {
&:link,
&:visited {
color: $links;
&.btn {
color: #FFF;
&.btn-link {
color: $links;
&.disabled {
color: #333;
}
}
}
}
}
a,
button {
&:hover,
&:active {
color: $links-hover;
&.btn {
color: #FFF;
&.btn-link {}
}
}
&.btn-link {
&:focus,
&:hover {
// border: 1px solid $input-btn-focus-color;
box-shadow: none;
text-decoration: none;
}
}
}
caption {
caption-side: top;
color: #727272;
font-size: 110%;
font-weight: bold;
margin: 0;
text-align: left;
}
h1 {
&#libraryname {
background: transparent url( "../images/logo-koha.png" ) no-repeat scroll 0%;
border: 0;
float: left !important;
margin: 0;
padding: 0;
width: 120px;
a {
border: 0;
cursor: pointer;
display: block;
height: 0 !important;
margin: 0;
overflow: hidden;
padding: 40px 0 0;
text-decoration: none;
width: 120px;
}
}
}
.dropdown-menu-right {
left: auto;
right: 0;
}
.fa {
&.fa-icon-black,
&.fa-icon-white {
color: #000;
}
&.danger {
color: #C00;
}
}
.navbar-nav {
margin-right: 0;
& > li {
& > a {
color: #777777;
font-weight: bold;
}
& > .dropdown-menu {
&.dropdown-menu-right {
&::after {
left: unset;
right: 10px;
}
&::before {
left: unset;
right: 9px;
}
}
}
}
}
.main {
background-color: #FFF;
border: 1px solid #F0F3F3;
margin: 15px;
padding: 1rem 0;
}
.alert {
&.alert-info,
&.alert-warning {
color: #000;
}
}
.btn-primary,
.btn-primary:link,
.btn-primary:visited {
$base-bg: #77b50f;
background-color: $base-bg;
background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
background-position: 0;
border: 1px solid darken( $base-bg, 5% );
font-family: 'NotoSans';
&:hover,
&:active,
&:focus {
$base-bg: darken( $base-bg, 2);
background-color: $base-bg;
background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
border-color: darken($base-bg, 5%);
box-shadow: 0 0 0 1px lighten(saturate($base-bg, 0.5), 4);
}
}
.btn-danger,
.btn-danger:link,
.btn-danger:visited {
$base-bg: #B92020;
background-color: $base-bg;
background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
background-position: 0;
border: 1px solid darken( $base-bg, 5% );
font-family: 'NotoSans';
&:hover,
&:active,
&:focus {
$base-bg: darken( $base-bg, 2);
background-color: $base-bg;
background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
}
}
input[type="text"],
input[type="password"],
select,
textarea,
.form-control {
&:focus {
border-color: #85ca11;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194,228,136,.6)
}
}
[class^="icon-"] {
vertical-align: 0;
}
[class*=" icon-"] {
vertical-align: 0;
}
/* jQuery UI standard tabs */
.ui-tabs-nav .ui-tabs-active a,
.ui-tabs-nav a:hover,
.ui-tabs-nav a:focus,
.ui-tabs-nav a:active,
.ui-tabs-nav span.a {
background: none repeat scroll 0 0 transparent;
outline: 0 none;
}
.ui-widget,
.ui-widget a,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
font-family: 'NotoSans';
font-size: inherit;
}
ul {
&.ui-tabs-nav {
li {
list-style: none;
}
}
}
.ui-tabs {
.ui-tabs-nav {
li {
background: #F0F3F3 none;
border-color: #D8D8D8;
margin-right: .4em;
&.ui-tabs-active {
background-color: #FFF;
border: 1px solid #D8D8D8;
border-bottom: 0;
a {
color: #727272;
font-weight: bold;
}
&.ui-state-hover {
background: #FFF none;
&.ui-state-active {
background: #FFF none;
}
}
}
&.ui-state-default.ui-state-hover {
background: #F3F3F3 none;
}
}
}
.ui-tabs-panel {
border: 1px solid #D8D8D8;
margin-bottom: 1em;
}
&.ui-widget-content {
background: transparent none;
border: 0;
}
.ui-state-default {
a {
&:link {
color: #006699;
}
&:visited {
color: #006699;
}
}
}
.ui-state-hover a {
&:link {
color: #990033;
}
&:visited {
color: #990033;
}
}
}
.ui-tabs-nav {
&.ui-widget-header {
background: none;
border: 0;
}
}
.ui-corner-top {
border-radius: 0px;
}
.statictabs {
ul {
background: none repeat scroll 0 0 transparent;
border: 0 none;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #222222;
font-size: 100%;
font-weight: bold;
line-height: 1.3;
list-style: none outside none;
margin: 0;
outline: 0 none;
padding: .2em .2em 0;
text-decoration: none;
&::before {
content: "";
display: table;
}
&::after {
clear: both;
content: "";
display: table;
}
}
li {
background: none repeat scroll 0 0 #E6F0F2;
border: 1px solid #B9D8D9;
border-bottom: 0 none !important;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #555555;
float: left;
font-weight: normal;
list-style: none outside none;
margin-bottom: 0;
margin-right: .4em;
padding: 0;
position: relative;
top: 1px;
white-space: nowrap;
&.active {
background-color: #FFFFFF;
color: #212121;
font-weight: normal;
padding-bottom: 1px;
a {
background: none repeat scroll 0 0 transparent;
color: #000000;
cursor: text;
font-weight: bold;
outline: 0 none;
}
}
a {
color: #004D99;
cursor: pointer;
float: left;
padding: .5em 1em;
text-decoration: none;
&:hover {
background-color: #EDF4F5;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #538200;
}
}
}
.tabs-container {
background: none repeat scroll 0 0 transparent;
border: 1px solid #B9D8D9;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
color: #222222;
display: block;
padding: 1em 1.4em;
}
}
/* End jQueryUI tab styles */
/* jQuery UI Datepicker */
.ui-datepicker {
@include shadowed;
table {
border: 0;
border-collapse: collapse;
font-size: .9em;
margin: 0 0 .4em;
width: 100%;
}
th {
background: transparent none;
border: 0;
font-weight: bold;
padding: .7em .3em;
text-align: center;
}
}
.ui-datepicker-trigger {
margin: 0 3px;
vertical-align: middle;
}
/* End jQueryUI datepicker styles */
/* jQueryUI Core */
.ui-widget-content {
background: #FFFFFF none;
border: 1px solid #AAA;
color: #222222;
a:link,
a:visited {
color: $links;
}
a:hover,
a:active {
color: $links-hover;
}
}
.ui-widget-header {
background: #E6F0F2 none;
border: 1px solid #AAA;
color: #222222;
font-weight: bold;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
background: #F4F8F9 none;
border: 1px solid #AAA;
color: #555555;
font-weight: normal;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
background: #E6F0F2 none;
border: 1px solid #AAA;
color: #212121;
font-weight: normal;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
background: #FFFFFF none;
border: 1px solid #AAAAAA;
color: #212121;
font-weight: normal;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
background: #FBF9EE;
border: 1px solid #FCEFA1;
color: #363636;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
background: #FEF1EC;
border: 1px solid #CD0A0A;
color: #CD0A0A;
}
/* end jQueryUI core */
.close {
color: #0088CC;
filter: none;
float: none;
font-size: inherit;
font-weight: normal;
opacity: inherit;
position: inherit;
right: auto;
text-shadow: none;
top: auto;
}
.close:hover {
color: #005580;
filter: inherit;
font-size: inherit;
opacity: inherit;
}
/* Redefine a new style for Bootstrap's class "close" since we use that already */
/* Use <a class="closebtn" href="#">&times;</a> */
.modal-header .closebtn {
margin-top: 2px;
}
.closebtn {
color: #000000;
float: right;
font-size: 20px;
font-weight: bold;
line-height: 20px;
opacity: .2;
text-shadow: 0 1px 0 #FFFFFF;
&:hover {
color: #000000;
cursor: pointer;
opacity: .4;
text-decoration: none;
}
}
button {
&.btn-link {
color: $links;
&:focus,
&:hover {
color: $links-hover;
text-decoration: none;
}
}
&.closebtn {
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
}
&.remove {
&:hover {
color: #900;
i {
&.fa {
color: #c60000;
}
}
}
}
}
.btn-default {
color: #212529;
background-color: #666666;
border-color: #666666;
}
.btn-link {
&.btn-lg {
font-size: 100%;
}
}
.btn.disabled,
.btn[disabled] {
&:hover {
color: #333;
filter: alpha(opacity=65);
opacity: 0.65;
}
i {
&.fa,
&.fa:hover {
color: #333;
filter: alpha(opacity=65);
opacity: 0.65;
}
}
}
.modal {
form {
margin: 0;
}
}
.nav-link {
&.active {
font-weight: bold;
}
}
.tab-content {
padding: 15px 0;
}
#logo {
background: transparent url( "../images/koha-green-logo.png" ) no-repeat scroll 0%;
border: 0;
float: left !important;
margin: 0;
padding: 0;
width: 100px;
a {
border: 0;
cursor: pointer;
display: block;
height: 0 !important;
margin: 0;
overflow: hidden;
padding: 40px 0 0;
text-decoration: none;
width: 100px;
&:focus {
background-color: transparent;
}
}
}
#changelanguage {
background-color: #FFF;
border-top: 1px solid #EEE;
padding: 0 1rem;
flex-shrink: 0;
.navbar-text {
font-weight: bold;
}
}
.fonts-loaded {
body {
body,
button,
input,
optgroup,
option,
select,
textarea {
font-family: "NotoSans";
}
}
@ -204,10 +928,31 @@ body {
}
}
.dropdown-menu {
border-radius: 0px;
> li {
> a {
font-size: 90%;
&:hover {
background: #85ca11 none;
}
&:focus {
background: #85ca11 none;
}
}
}
}
#koha_url {
p {
color: #666666;
float: right;
margin: 0;
}
}
}
#wrapper {
flex: 1 0 auto;
padding-left: 40px;
padding-right: 40px;
}

15
koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss

@ -1,15 +0,0 @@
$color: #999999;
$links: #0076B2;
$links-hover: #005580;
$footer-height: 45px;
$sci-link-color: #0076B6;
$sci-heading-color: #727272;
@mixin shadowed {
box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .2 );
}
@mixin border-radius-all( $radius: 3px ) {
border-radius: $radius;
}

238
koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss

@ -1,5 +1,3 @@
@import "mixins";
@media only screen and ( min-width: 0 ) and ( max-width: 304px ) {
/* Screens bewteen 0 and 304 pixels wide */
input,
@ -20,10 +18,6 @@
.input-fluid {
width: 90%;
}
#wrap {
padding: 0;
}
}
@media only screen and ( min-width: 342px ) and ( max-width: 479px ) {
@ -46,6 +40,36 @@
}
}
@media only screen and ( max-width: 576px ) {
#advsearch_limits,
#subtypes,
#booleansearch {
select {
width: 100%;
}
}
#booleansearch,
#opac-main-search {
input,
select {
margin-bottom: 5px;
}
}
#searchsubmit {
width: 100%;
}
#toolbar {
border-bottom: 1px solid #E8E8E8;
}
.search_operator {
text-align: center;
}
}
@media only screen and ( max-width: 608px ) {
/* Screens below 608 pixels wide */
fieldset {
@ -74,26 +98,13 @@
padding: 0;
}
.tdlabel {
display: inline;
}
.navbar-fixed-top,
.navbar-static-top {
margin: 0;
}
.navbar-inner {
padding: 0;
.coverimages {
float: none;
margin-bottom: .5em;
}
.checkall,
.clearall,
.highlight_controls,
.selectcol,
.list-actions,
#remove-selected {
display: none;
.tdlabel {
display: inline;
}
.table td.bibliocol {
@ -103,6 +114,12 @@
.actions {
display: block;
&:first-child {
.btn-link {
padding: 0.375rem 0.75rem;
}
}
a,
#login4tags {
@include border-radius-all( 4px );
@ -112,6 +129,7 @@
font-size: 120%;
font-weight: bold;
margin: 2px 0;
text-align: left;
}
.label {
@ -125,20 +143,6 @@
}
#opac-main-search {
button,
input,
select,
.librarypulldown .transl1,
.input-append {
@include border-radius-all( 5px );
box-sizing: border-box;
display: block;
height: 120%;
margin: .5em 0;
max-width: 100%;
width: 97%;
}
.input-append {
margin: 0;
width: 100%;
@ -175,7 +179,7 @@
.main {
@include border-radius-all( 0 );
margin: .5em 0;
margin: 0;
padding: 15px;
}
@ -184,6 +188,7 @@
}
#moresearches {
margin: .5em 0;
text-align: center;
}
@ -211,11 +216,9 @@
}
td {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-top: 0;
border: 0;
display: block;
padding: .2em;
padding: .4em .3em;
}
p {
@ -225,20 +228,26 @@
tr {
display: block;
margin-bottom: .6em;
td:first-child {
border-radius: 5px 5px 0 0;
border-top: 1px solid #DDDDDD;
border-top: 0;
}
td:last-child {
border-bottom: 2px solid #CACACA;
border-radius: 0 0 5px 5px;
border-bottom: 0;
}
}
}
.cart-actions {
display: flex;
.btn {
flex-grow: 1;
padding: 0.375rem 0.75rem
}
}
.no-image {
display: none;
}
@ -253,9 +262,8 @@
}
#logo {
background: transparent url( "../lib/bootstrap/img/glyphicons-halflings.png" ) no-repeat;
background-position: 0 -24px;
margin: 14px 14px 0 14px;
background: transparent url( "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 13 13'><g><g><path d='M2.2 6.6V13h2.83V8.9H8.2V13h2.83V6.6z'/><path d='M13.23 6.64H0L6.6 0z'/></g></g></svg>" ) no-repeat;
margin: 14px;
width: 14px;
a {
@ -282,9 +290,28 @@
}
@media only screen and ( min-width: 608px ) {
.advanced-search-terms {
.search-term-row {
display: grid;
grid-template-columns: 10% 30% 60%;
gap: 5px 5px;
margin: 5px 0;
}
}
.advanced-search-terms {
&.extended {
.search-term-row {
grid-template-columns: 10% 30% 50% 10%;
margin: 5px 0;
}
}
}
#views {
border-bottom: 1px solid #D6D6D6;
margin: 0;
padding: 0;
white-space: nowrap;
}
@ -304,22 +331,18 @@
@media only screen and ( min-width: 608px ) and ( max-width: 767px ) {
/* Screens between 608 and 767 pixels wide */
.main {
padding: .8em 20px;
}
.breadcrumb {
margin: 10px 0;
}
.navbar-static-bottom {
margin-left: -20px;
margin-right: -20px;
}
.row-fluid input.span6 {
width: 48.9362%;
}
#wrapper {
padding: 0 15px;
}
}
@media only screen and ( max-width: 767px ) {
@ -339,8 +362,7 @@
display: none;
}
#search-facets,
#menu {
#search-facets {
margin-bottom: .5em;
h4 {
@ -355,39 +377,6 @@
}
}
ul {
padding: 0;
}
}
#menu {
li {
a {
@include border-radius-all( 0 );
border: 0;
border-bottom: 1px solid #D8D8D8;
display: block;
font-size: 120%;
margin: 0;
text-decoration: none;
}
&.active {
a {
border-right-width: 1px;
border-top: 1px solid #D8D8D8;
}
}
&:last-child {
a {
border-radius: 0 0 7px 7px;
}
}
}
}
#search-facets {
li {
padding: .4em;
}
@ -395,6 +384,10 @@
h5 {
margin: .2em;
}
ul {
padding: 0;
}
}
#menu h4 a.menu-open,
@ -402,9 +395,8 @@
border-bottom: 1px solid #D8D8D8;
}
#loginModal {
margin: 0;
width: auto;
#wrapper {
padding: 0;
}
}
@ -422,32 +414,29 @@
margin: 0 2px;
}
}
.toolbar {
select {
width: 220px;
}
}
}
@media only screen and ( min-width: 768px ) {
@media only screen and ( min-width: 992px ) {
/* Screens above 768 pixels wide */
.main {
margin-left: 20px;
margin-right: 20px;
}
#menu {
@include border-radius-all( 0 );
border: 0;
border-right: 1px solid #D8D8D8;
border-right: 1px solid #d8d8d8;
h4 {
display: none;
ul {
padding: 1em 0;
}
ul {
padding: 1em 0 1em 0;
li {
&.active {
a {
border-right: 0;
border-top: 1px solid #d8d8d8;
}
}
a {
border-bottom: 1px solid #999;
margin: .4em 0;
margin-right: -1px;
}
}
}
@ -455,6 +444,10 @@
margin: .5em 0;
}
.main {
margin: .5em 15px;
}
.searchsuggestion {
white-space: nowrap;
}
@ -484,19 +477,8 @@
}
}
@media only screen and ( min-width: 768px ) and ( max-width: 984px ) {
/* Screens between 768 and 984 pixels wide */
.librarypulldown .transl1 {
width: 38%;
}
}
@media only screen and ( min-width: 984px ) {
/* Screens above 969 pixels wide */
.librarypulldown .transl1 {
width: 53%;
}
.pagination {
li {
&.page-first,

1122
koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss

File diff suppressed because it is too large

261
koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss

@ -1,5 +1,3 @@
@import "mixins";
@import "fonts";
@import "common";
body {
@ -18,246 +16,6 @@ a {
}
}
.ui-widget-content {
a,
a:visited {
color: $sci-link-color;
}
}
h1 {
color: $sci-heading-color;
font-size: 140%;
line-height: 150%;
}
h2 {
color: $sci-heading-color;
font-size: 130%;
line-height: 150%;
}
h3 {
color: $sci-heading-color;
font-size: 120%;
line-height: 150%;
}
h4 {
color: $sci-heading-color;
font-size: 110%;
}
h5 {
color: $sci-heading-color;
font-size: 100%;
}
caption {
color: $sci-heading-color;
font-size: 120%;
font-weight: bold;
margin: .5em 0;
text-align: left;
}
input,
textarea {
width: auto;
}
// Search bar border glow
input {
&[type="text"],
&[type="password"] {
&:focus {
border-color: #85CA11;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(194, 228, 136, .6);
}
}
}
legend {
color: $sci-heading-color;
font-size: 110%;
font-weight: bold;
}
th {
background-color: #E2E8E8;
}
.main {
background-color: #FFF;
border-color: #F0F3F3;
margin: .5em 20px;
padding: .8em 0;
}
.navbar-inverse {
.navbar-inner {
background: #FCF9FC none;
border-color: #FCF9FC;
box-shadow: none;
}
.brand {
color: $sci-heading-color;
font-weight: bold;
}
.nav {
li {
a,
a:hover,
a:focus {
color: $sci-heading-color;
font-weight: bold;
}
&.dropdown {
a {
&:hover,
&:focus {
.caret {
border-bottom-color: #85CA11;
border-top-color: #85CA11;
}
}
}
&.open {
&> .dropdown-toggle {
background-color: transparent;
color: #85CA11;
.caret {
border-bottom-color: #85CA11;
border-top-color: #85CA11;
&:hover {
border-bottom-color: #85CA11;
border-top-color: #85CA11;
}
}
}
}
}
}
}
}
.navbar {
.nav {
li {
&.dropdown {
&> a {
&:focus,
&:hover {
.caret {
border-bottom-color: #85CA11;
border-top-color: #85CA11;
}
}
}
}
}
}
}
// Dropdown menus in Header
.dropdown-menu {
border-radius: 0;
&> li {
&> a {
&:hover,
&:focus {
background: #85CA11 none;
color: #FFFFFF;
}
}
}
}
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
background-color: #F0F3F3;
}
.modal-header {
.closebtn {
margin-top: 2px;
}
}
.closebtn {
color: #000000;
filter: alpha(opacity=20);
float: right;
font-size: 20px;
font-weight: bold;
line-height: 20px;
opacity: .2;
text-shadow: 0 1px 0 #FFFFFF;
&:hover {
color: #000000;
cursor: pointer;
filter: alpha(opacity=40);
opacity: .4;
text-decoration: none;
}
}
button {
&.closebtn {
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
}
}
.btn-group {
label,
select {
font-size: 13px;
}
}
// Override Bootstrap alert
.alert {
background: linear-gradient(to bottom, #FFFBE5 0%, #FFF0B2 9%, #FFF1A8 89%, #F7E665 100%);
border-color: #D6C43B;
color: #333;
// Redefine a new style for Bootstrap's class "close" since we use that already
// Use <a class="closebtn" href="#">&times;</a>
.closebtn {
line-height: 20px;
position: relative;
right: -21px;
top: -2px;
}
}
// Override Bootstrap alert.alert-info
.alert-info {
background: linear-gradient(to bottom, #F4F6FA 0%, #EAEEF5 4%, #E8EDF6 96%, #CDDBF2 100%);
border-color: #C5D1E5;
color: #333;
}
// Override Bootstrap alert.alert-success
.alert-success {
background: linear-gradient(to bottom, #F8FFE8 0%, #E3F5AB 4%, #DCF48D 98%, #9EBF28 100%);
border-color: #9FBA35;
color: #333;
}
#members {
a {
@ -273,6 +31,8 @@ button {
}
.table {
font-size: .95rem;
.sorting_asc {
background: url("../images/asc.gif") no-repeat scroll right center #EEEEEE;
padding-right: 19px;
@ -325,16 +85,29 @@ button {
}
}
.sco_entry {
margin: 2rem 0;