Bugzilla – Attachment 140504 Details for
Bug 31529
Fix errors in SCSS files raised by stylelint
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 31529: [OPAC] Fix errors in SCSS files raised by stylelint
Bug-31529-OPAC-Fix-errors-in-SCSS-files-raised-by-.patch (text/plain), 86.35 KB, created by
David Nind
on 2022-09-12 19:29:50 UTC
(
hide
)
Description:
Bug 31529: [OPAC] Fix errors in SCSS files raised by stylelint
Filename:
MIME Type:
Creator:
David Nind
Created:
2022-09-12 19:29:50 UTC
Size:
86.35 KB
patch
obsolete
>From e5e9d9610ff6ca2189a6cc24dfb72635ec5e97d1 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Thu, 8 Sep 2022 12:15:35 +0000 >Subject: [PATCH] Bug 31529: [OPAC] Fix errors in SCSS files raised by > stylelint > >This patch corrects errors raised by the new stylelint configuration in >OPAC SCSS files. Many of the fixes were made automatically by using the >"--fix" option: > >npx stylelint koha-tmpl/opac-tmpl/bootstrap/css/src/*.scss --fix > >Some examples of errors found: > > - Unexpected empty line before $-variable > - Expected single space after ":" > - Expected "#fff" to be "#FFF" > - Expected modern color-function notation > - Expected single space after "(" > - Expected single space before ")" > - Expected empty line before comment > - Expected no more than 1 empty line > - Expected a trailing semicolon > - Expected color.adjust($color, $lightness: -$amount) instead of darken($color, $amount) > - Unexpected leading zero > - Expected single space after "," in a single-line function > - Expected double colon pseudo-element notation > >Manual fixes include replacing named colors with hex codes, combining >duplicate selectors, removing empty blocks, etc. > >Some warnings remain: "Unexpected !important" and "Expected a >placeholder selector (e.g. %placeholder) to be used in @extend" which >both require more than a quick fix, if we should choose to address them. > >To test, apply the patch and rebuild the OPAC SCSS: >https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client > >Browse around the OPAC to confirm that there are no visible changes to >style. > >Signed-off-by: David Nind <david@davidnind.com> >--- > .../opac-tmpl/bootstrap/css/src/_common.scss | 318 ++++++------ > .../bootstrap/css/src/_flatpickr.scss | 466 +++++++----------- > .../bootstrap/css/src/_flatpickr_vars.scss | 29 +- > .../opac-tmpl/bootstrap/css/src/_fonts.scss | 32 +- > .../bootstrap/css/src/_responsive.scss | 25 +- > .../opac-tmpl/bootstrap/css/src/opac.scss | 455 ++++++++--------- > .../opac-tmpl/bootstrap/css/src/print.scss | 37 +- > .../opac-tmpl/bootstrap/css/src/sco.scss | 13 +- > 8 files changed, 613 insertions(+), 762 deletions(-) > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss >index b0f2b856fc..65a9d0b9a1 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss >@@ -2,10 +2,8 @@ > $headings-color: #727272; > $headings-font-weight: 600; > $enable-gradients: false; >- >-$info:#2679cc; >-$danger: rgb(185, 32, 32); >- >+$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; >@@ -13,21 +11,17 @@ $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; >- > $base-theme-color: #548300; >- > $color: #999999; > $links: #0074AD; > $links-hover: #005580; > $footer-height: 45px; >- > $sci-link-color: #0076B6; > $sci-heading-color: #727272; >- > $high-contrast-grey: #666666; > > @mixin shadowed { >- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2); >+ box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .2 ); > } > > @mixin border-radius-all($radius: 3px) { >@@ -36,7 +30,7 @@ $high-contrast-grey: #666666; > > @mixin input-focus { > border-color: $base-theme-color; >- box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(194, 228, 136, .6); >+ box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 ), 0 0 8px rgba( 194, 228, 136, .6 ); > } > > /* Bootstrap imports */ >@@ -44,20 +38,25 @@ $high-contrast-grey: #666666; > @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"; >@@ -65,19 +64,22 @@ $high-contrast-grey: #666666; > @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"; >- > @import "flatpickr"; > > /* Koha imports */ >@@ -87,14 +89,15 @@ $high-contrast-grey: #666666; > html, > body { > height: 100%; >+ > // The html and body elements cannot have any padding or margin. > } > > body { > background: #FCF9FC none; > display: flex; >- height: 100%; > flex-direction: column; >+ height: 100%; > } > > a { >@@ -160,7 +163,6 @@ caption { > } > } > } >- > } > > .main { >@@ -170,7 +172,6 @@ caption { > padding: 1rem 0; > } > >- > .alert { > &.alert-info, > &.alert-warning { >@@ -178,13 +179,13 @@ caption { > } > > &.alert-error { >- @extend .alert-warning >+ @extend .alert-warning; > } > } > > .btn-primary { > background-color: $base-theme-color; >- border: 1px solid darken($base-theme-color, 10%); >+ border: 1px solid darken( $base-theme-color, 10% ); > color: #FFF; > > &:link, >@@ -195,58 +196,61 @@ caption { > &:hover, > &:active { > background-color: $base-theme-color; >- border-color: lighten($base-theme-color, 5%); >- box-shadow: 0 0 0 1px lighten(saturate($base-theme-color, 0.5), 4); >+ border-color: lighten( $base-theme-color, 5% ); >+ box-shadow: 0 0 0 1px lighten( saturate( $base-theme-color, .5 ), 4 ); > color: #FFF; > } > > &:focus { >- box-shadow: 0 0 0 2px lighten($base-theme-color, 10%); >+ box-shadow: 0 0 0 2px lighten( $base-theme-color, 10% ); > } > > &.disabled, > &:disabled { >- background-color: lighten($base-theme-color, 5%); >- border-color: lighten($base-theme-color, 5%); >+ background-color: lighten( $base-theme-color, 5% ); >+ border-color: lighten( $base-theme-color, 5% ); > box-shadow: none; >- color: #fff; >+ color: #FFF; > cursor: not-allowed; >+ > &:hover, > &.hover { >- background-color: lighten($base-theme-color, 5%); >- border-color: lighten($base-theme-color, 5%); >+ background-color: lighten( $base-theme-color, 5% ); >+ border-color: lighten( $base-theme-color, 5% ); > box-shadow: none; >- color: #fff; >+ color: #FFF; > cursor: not-allowed; > } > } > >- &:not(:disabled):not(.disabled):active:focus,& >- &:not(:disabled):not(.disabled).active:focus { >- box-shadow: 0 0 0 0.2rem lighten($base-theme-color, 10%); >+ &:not( :disabled, .disabled ):active:focus, >+ & &:not( :disabled, .disabled ).active:focus { >+ box-shadow: 0 0 0 .2rem lighten( $base-theme-color, 10% ); > } > >- &:not(:disabled):not(.disabled).active, >- &:not(:disabled):not(.disabled):active, >- &:not(:disabled):not(.disabled):focus, >- &:not(:disabled):not(.disabled).focus { >- background-color: lighten($base-theme-color, 5%); >- border-color: lighten($base-theme-color, 10%); >+ &:not( :disabled, .disabled ).active, >+ &:not( :disabled, .disabled ):active, >+ &:not( :disabled, .disabled ):focus, >+ &:not( :disabled, .disabled ).focus { >+ background-color: lighten( $base-theme-color, 5% ); >+ border-color: lighten( $base-theme-color, 10% ); > } > } > > .show > .btn-primary.dropdown-toggle { >- background-color: lighten($base-theme-color, 5%); >- border-color: lighten($base-theme-color, 10%); >+ background-color: lighten( $base-theme-color, 5% ); >+ border-color: lighten( $base-theme-color, 10% ); >+ > &:focus { >- box-shadow: 0 0 0 0.2rem lighten($base-theme-color, 10%); >+ box-shadow: 0 0 0 .2rem lighten( $base-theme-color, 10% ); > } > } > > .btn-danger { > $base-bg: #B92020; >+ > background-color: $base-bg; >- background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg ); >+ background-image: linear-gradient( to bottom, lighten( saturate( $base-bg, .5 ), 4 ), $base-bg ); > background-position: 0; > border: 1px solid darken( $base-bg, 5% ); > color: #FFF; >@@ -258,24 +262,26 @@ caption { > > &:hover, > &:active { >- $base-bg: darken( $base-bg, 2); >+ $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 ); >+ background-image: linear-gradient( to bottom, lighten( saturate( $base-bg, .5 ), 4 ), $base-bg ); > color: #FFF; > } > > &:focus { >- box-shadow: 0 0 0 2px lighten($base-bg, 10%); >+ box-shadow: 0 0 0 2px lighten( $base-bg, 10% ); > } > } > > .btn-default, > .btn-secondary { >- $base-bg: #e6e6e6; >+ $base-bg: #E6E6E6; >+ > background-color: $base-bg; >- background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg); >+ background-image: linear-gradient( to bottom, lighten( saturate( $base-bg, .5 ), 4 ), $base-bg ); > background-position: 0; >- border: 1px solid darken($base-bg, 20%); >+ border: 1px solid darken( $base-bg, 20% ); > color: #000; > > &:link, >@@ -285,18 +291,19 @@ caption { > > &:hover, > &:active { >- $base-bg: darken($base-bg, 2); >+ $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); >+ background-image: linear-gradient( to bottom, lighten( saturate( $base-bg, .5 ), 4 ), $base-bg ); > color: #000; > } > > &:focus { >- box-shadow: 0 0 0 2px darken($base-bg, 10%); >+ box-shadow: 0 0 0 2px darken( $base-bg, 10% ); > } > >- &:not(:disabled):not(.disabled):active, >- &:not(:disabled):not(.disabled).active { >+ &:not( :disabled, .disabled ):active, >+ &:not( :disabled, .disabled ).active { > color: #000; > } > } >@@ -308,7 +315,7 @@ textarea, > .form-control { > &:focus { > border-color: $base-theme-color; >- box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194,228,136,.6) >+ box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 ), 0 0 8px rgba( 194, 228, 136, .6 ); > } > } > >@@ -324,7 +331,7 @@ textarea, > line-height: 20px; > padding: 4px 12px; > text-align: center; >- text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); >+ text-shadow: 0 1px 1px rgba( 255, 255, 255, .75 ); > vertical-align: middle; > > &:hover { >@@ -337,8 +344,8 @@ textarea, > > &::before { > color: #4466AE; >- font-family: FontAwesome; > display: inline-block; >+ font-family: FontAwesome; > padding-right: .5em; > } > >@@ -349,17 +356,16 @@ textarea, > > &:hover { > color: #333; >- filter: alpha(opacity=65); >- opacity: 0.65; >+ filter: alpha( opacity=65 ); >+ opacity: .65; > } > > i { >- > &.fa, > &.fa:hover { > color: #333; >- filter: alpha(opacity=65); >- opacity: 0.65; >+ filter: alpha( opacity=65 ); >+ opacity: .65; > } > } > } >@@ -368,93 +374,93 @@ textarea, > div.dt-button-collection button.dt-button, > div.dt-button-collection div.dt-button, > div.dt-button-collection a.dt-button { >- position: relative; >- left: 0; >- right: 0; >- width: 100%; > display: block; > float: none; >+ left: 0; > margin-bottom: 4px; > margin-right: 0; >+ position: relative; >+ right: 0; >+ width: 100%; > } > > div.dt-button-collection { >- width: auto >+ width: auto; > } > > div.dt-button-collection button.dt-button { > border-radius: 2px; >- text-align: left >+ text-align: left; > } > > div.dt-button-collection button.dt-button.buttons-collection { >- border: 0 >+ border: 0; > } > > div.dt-button-collection button.dt-button.buttons-columnVisibility { >- background: #fff none; >- border: 1px solid #eee; >+ background: #FFF none; >+ border: 1px solid #EEE; > box-shadow: none; > font-size: 1em; > margin: 0 0 4px; > padding: .3em .7em; >- text-shadow: none >+ text-shadow: none; > } > >-div.dt-button-collection button.dt-button.buttons-columnVisibility:before { >- color: #c00; >+div.dt-button-collection button.dt-button.buttons-columnVisibility::before { >+ color: #C00; > content: "\f00d"; > display: inline-block; > font-family: FontAwesome; > margin-right: .5em; >- width: 1em >+ width: 1em; > } > > div.dt-button-collection button.dt-button.buttons-columnVisibility:hover { >- background: #ffc none; >+ background: #FFC none; > border: 1px solid #999; >- box-shadow: none >+ box-shadow: none; > } > >-div.dt-button-collection button.dt-button.buttons-columnVisibility:hover:before { >+div.dt-button-collection button.dt-button.buttons-columnVisibility:hover::before { > color: #538200; > content: "\f00c"; > display: inline-block; > font-family: FontAwesome; > margin-right: .5em; >- width: 1em >+ width: 1em; > } > >-div.dt-button-collection button.dt-button.buttons-columnVisibility:active:not(.disabled):hover:not(.disabled) { >+div.dt-button-collection button.dt-button.buttons-columnVisibility:active:not( .disabled ):hover:not( .disabled ) { > background: transparent none; >- box-shadow: none >+ box-shadow: none; > } > > div.dt-button-collection button.dt-button.buttons-columnVisibility.active { >- background: #e6f0f2 none; >+ background: #E6F0F2 none; > border-color: #999; >- box-shadow: none >+ box-shadow: none; > } > > div.dt-button-collection button.dt-button.buttons-columnVisibility.active:hover { >- background: #ffc none >+ background: #FFC none; > } > >-div.dt-button-collection button.dt-button.buttons-columnVisibility.active:hover:before { >- color: #c00; >+div.dt-button-collection button.dt-button.buttons-columnVisibility.active:hover::before { >+ color: #C00; > content: "\f00d"; > display: inline-block; > font-family: FontAwesome; > margin-right: .5em; >- width: 1em >+ width: 1em; > } > >-div.dt-button-collection button.dt-button.buttons-columnVisibility.active:not(.disabled):hover:not(.disabled) { >+div.dt-button-collection button.dt-button.buttons-columnVisibility.active:not( .disabled ):hover:not( .disabled ) { > background: transparent none; >- box-shadow: none >+ box-shadow: none; > } > >-div.dt-button-collection button.dt-button.buttons-columnVisibility.active:before { >+div.dt-button-collection button.dt-button.buttons-columnVisibility.active::before { > color: $base-theme-color; > content: "\f00c"; > display: inline-block; >@@ -465,72 +471,72 @@ div.dt-button-collection button.dt-button.buttons-columnVisibility.active:before > > div.dt-button-collection button.dt-button.buttons-html5, > div.dt-button-collection button.dt-button.buttons-print { >- background: #fff none; >- border: 1px solid #eee; >+ background: #FFF none; >+ border: 1px solid #EEE; > box-shadow: none; > font-size: 1.2em; > margin: 0 0 4px; > padding: .3em .7em; >- text-shadow: none >+ text-shadow: none; > } > > div.dt-button-collection button.dt-button.buttons-html5:hover, > div.dt-button-collection button.dt-button.buttons-print:hover { >- background: #ffc none >+ background: #FFC none; > } > >-div.dt-button-collection button.dt-button.buttons-html5:not(.disabled):before { >- color: #222bac; >+div.dt-button-collection button.dt-button.buttons-html5:not( .disabled )::before { >+ color: #222BAC; > display: inline-block; > font-family: FontAwesome; > margin-right: .5em; >- width: 1em >+ width: 1em; > } > >-div.dt-button-collection button.dt-button.buttons-excel:not(.disabled):before { >- content: "\f1c3" >+div.dt-button-collection button.dt-button.buttons-excel:not( .disabled )::before { >+ content: "\f1c3"; > } > >-div.dt-button-collection button.dt-button.buttons-csv:not(.disabled):before { >- content: "\f0ce" >+div.dt-button-collection button.dt-button.buttons-csv:not( .disabled )::before { >+ content: "\f0ce"; > } > >-div.dt-button-collection button.dt-button.buttons-copy:not(.disabled):before { >- content: "\f0c5" >+div.dt-button-collection button.dt-button.buttons-copy:not( .disabled )::before { >+ content: "\f0c5"; > } > >-div.dt-button-collection button.dt-button.buttons-print:not(.disabled):before { >- color: #222bac; >+div.dt-button-collection button.dt-button.buttons-print:not( .disabled )::before { >+ color: #222BAC; > content: "\f02f"; > display: inline-block; > font-family: FontAwesome; > margin-right: .5em; >- width: 1em >+ width: 1em; > } > > .dt-button-info { >- position: fixed; >- top: 50%; >- left: 50%; >- width: 400px; >- margin-top: -100px; >- margin-left: -200px; > background-color: #FFF; > border: 2px solid $links-hover; >- box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); > border-radius: 3px; >+ box-shadow: 3px 3px 8px rgba( 0, 0, 0, .3 ); >+ left: 50%; >+ margin-left: -200px; >+ margin-top: -100px; >+ position: fixed; > text-align: center; >+ top: 50%; >+ width: 400px; > z-index: 21; > > h2 { >- padding: 0.5em; >- margin: 0; >+ background-color: #F3F3F3; >+ border-bottom: 1px solid #DDD; > font-weight: normal; >- border-bottom: 1px solid #ddd; >- background-color: #f3f3f3; >+ margin: 0; >+ padding: .5em; > } > >- &>div { >+ & > div { > padding: 1em; > } > } >@@ -591,6 +597,7 @@ div.dt-button-collection button.dt-button.buttons-print:not(.disabled):before { > input { > @extend .form-control; > @extend .form-control-sm; >+ > display: inline-block; > width: auto; > >@@ -602,32 +609,33 @@ div.dt-button-collection button.dt-button.buttons-print:not(.disabled):before { > } > > .table_entries { >+ color: #797979; >+ font-size: 90%; > margin-left: 5px; > padding: 5px 0; >- font-size: 90%; >- color: #797979; > } > > [class^="icon-"] { > vertical-align: 0; > } >+ > [class*=" icon-"] { > vertical-align: 0; > } > > .table { > .sorting_asc { >- background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L2c+PC9zdmc+") no-repeat scroll 100% 80% #E2E8E8; >+ background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L2c+PC9zdmc+" ) no-repeat scroll 100% 80% #E2E8E8; > padding-right: 19px; > } > > .sorting_desc { >- background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvZz48L3N2Zz4=") no-repeat scroll 100% 80% #E2E8E8; >+ background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvZz48L3N2Zz4=" ) no-repeat scroll 100% 80% #E2E8E8; > padding-right: 19px; > } > > .sorting { >- background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi41NTFtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMyAyLjU1MDY2MTQiPjxwYXRoIGZpbGw9IiNhY2FjYWMiIGQ9Ik00LjA1IDEuNDVoLTIuMUwzIDIuNTV6Ii8+PHBhdGggZmlsbD0iI2FjYWNhYyIgZD0iTTQuMDUgMS4xaC0yLjFMMyAweiIvPjwvc3ZnPg==") no-repeat scroll 100% 75% #E2E8E8; >+ background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi41NTFtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMyAyLjU1MDY2MTQiPjxwYXRoIGZpbGw9IiNhY2FjYWMiIGQ9Ik00LjA1IDEuNDVoLTIuMUwzIDIuNTV6Ii8+PHBhdGggZmlsbD0iI2FjYWNhYyIgZD0iTTQuMDUgMS4xaC0yLjFMMyAweiIvPjwvc3ZnPg==" ) no-repeat scroll 100% 75% #E2E8E8; > padding-right: 19px; > } > >@@ -691,6 +699,7 @@ ul { > > &.ui-state-hover { > background: #FFF none; >+ > &.ui-state-active { > background: #FFF none; > } >@@ -744,17 +753,14 @@ ul { > } > > .ui-corner-top { >- border-radius: 0px; >+ border-radius: 0; > } > > .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; >+ border-radius: 4px; > color: #222222; > font-size: 100%; > font-weight: bold; >@@ -905,7 +911,7 @@ ul { > > .tab-content { > background-color: #FFF; >- border: 1px solid #d8d8d8; >+ border: 1px solid #D8D8D8; > border-top-width: 0; > margin-bottom: 1em; > padding: 1em; >@@ -913,19 +919,19 @@ ul { > > .nav-tabs { > .nav-link { >- background-color: #f0f3f3; >- border: 1px solid #d8d8d8; >+ background-color: #F0F3F3; >+ border: 1px solid #D8D8D8; > border-radius: 0; > margin-right: .4em; > > &:hover, > &:focus { >- border-color: #d8d8d8; >+ border-color: #D8D8D8; > } > > &.active { >- background-color: #fff; >- border: 1px solid #d8d8d8; >+ background-color: #FFF; >+ border: 1px solid #D8D8D8; > border-bottom-color: transparent; > color: #000; > cursor: default; >@@ -956,6 +962,7 @@ ul { > } > > /* Redefine a new style for Bootstrap's class "close" since we use that already */ >+ > /* Use <a class="closebtn" href="#">×</a> */ > > .modal-header .closebtn { >@@ -993,7 +1000,7 @@ button { > > i { > &.fa { >- color: #c60000; >+ color: #C60000; > } > } > } >@@ -1009,7 +1016,7 @@ button { > } > > &:focus { >- box-shadow: 0 0 0 1px lighten($links, 20%); >+ box-shadow: 0 0 0 1px lighten( $links, 20% ); > } > > &.btn-lg { >@@ -1020,12 +1027,13 @@ button { > .btn.disabled, > .btn[disabled] { > &:hover { >- opacity: 0.65; >+ opacity: .65; > } >+ > i { > &.fa, > &.fa:hover { >- opacity: 0.65; >+ opacity: .65; > } > } > } >@@ -1054,6 +1062,7 @@ button { > padding: 40px 0 0; > text-decoration: none; > width: 100px; >+ > &:focus { > background-color: transparent; > } >@@ -1063,9 +1072,21 @@ button { > #changelanguage { > background-color: #FFF; > border-top: 1px solid #EEE; >- padding: 0 1rem; >+ clear: both; > flex-shrink: 0; > >+ // Set the fixed height of the footer here >+ min-height: $footer-height; >+ padding: 0 1rem; >+ >+ .nav { >+ > .active { >+ > p { >+ padding: 0 15px; >+ } >+ } >+ } >+ > .navbar-text { > font-weight: bold; > } >@@ -1079,7 +1100,7 @@ button { > option, > select, > textarea { >- font-family: "NotoSans", sans-serif; >+ font-family: NotoSans, sans-serif; > } > } > >@@ -1206,26 +1227,13 @@ button { > height: auto !important; > height: 100%; > margin: 0 auto -#{$footer-height + 1}; >+ > // Negative indent footer by its height > min-height: 100%; > padding-left: 40px; > padding-right: 40px; > } > >-#changelanguage { >- clear: both; >- // Set the fixed height of the footer here >- min-height: $footer-height; >- >- .nav { >- > .active { >- > p { >- padding: 0 15px; >- } >- } >- } >-} >- > #i18nMenu { > margin-left: 1em; > >@@ -1233,6 +1241,8 @@ button { > font-size: 85%; > > a { >+ color: $links; >+ > &:hover { > color: $base-theme-color; > } >@@ -1248,11 +1258,6 @@ button { > color: #FFF; > } > } >- >- } >- >- a { >- color: $links; > } > } > >@@ -1271,13 +1276,16 @@ button { > } > > .dropdown-menu { >- border-radius: 0px; >+ border-radius: 0; >+ > > li { > > a { > font-size: 90%; >+ > &:hover { > background: $base-theme-color none; > } >+ > &:focus { > background: $base-theme-color none; > } >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr.scss >index 59886c9e83..199dc01933 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr.scss >@@ -1,70 +1,22 @@ > @import "flatpickr_vars"; > >-@-webkit-keyframes fpFadeInDown { >- from { >- opacity: 0; >- transform: translate3d(0, -20px, 0); >- } >- >- to { >- opacity: 1; >- transform: translate3d(0, 0, 0); >- } >-} >- >-@-moz-keyframes fpFadeInDown { >- from { >- opacity: 0; >- transform: translate3d(0, -20px, 0); >- } >- >- to { >- opacity: 1; >- transform: translate3d(0, 0, 0); >- } >-} >- >-@-ms-keyframes fpFadeInDown { >- from { >- opacity: 0; >- transform: translate3d(0, -20px, 0); >- } >- >- to { >- opacity: 1; >- transform: translate3d(0, 0, 0); >- } >-} >- >-@-o-keyframes fpFadeInDown { >- from { >- opacity: 0; >- transform: translate3d(0, -20px, 0); >- } >- >- to { >- opacity: 1; >- transform: translate3d(0, 0, 0); >- } >-} >- > @keyframes fpFadeInDown { > from { > opacity: 0; >- transform: translate3d(0, -20px, 0); >+ transform: translate3d( 0, -20px, 0 ); > } > > to { > opacity: 1; >- transform: translate3d(0, 0, 0); >+ transform: translate3d( 0, 0, 0 ); > } > } > > .flatpickr-calendar { > animation: none; > background: transparent; >- border-radius: 5px; > border: 0; >+ border-radius: 5px; > box-sizing: border-box; > direction: ltr; > display: none; >@@ -80,19 +32,16 @@ > width: $calendarWidth; > > @if variable-exists( "noCalendarBorder" ) { >- box-shadow: 0 3px 13px rgba(black, 0.08); >- } >- >- @else { >- >+ box-shadow: 0 3px 13px rgb( #000 .08 ); >+ } @else { > background: $calendarBackground; > box-shadow: 1px 1px 3px 0 #666; > } > > &.open, > &.inline { >- opacity: 1; > max-height: 640px; >+ opacity: 1; > visibility: visible; > } > >@@ -113,24 +62,24 @@ > > &.static { > position: absolute; >- top: calc(100% + 2px); >+ top: calc( 100% + 2px ); > > &.open { >- z-index: 999; > display: block; >+ z-index: 999; > } > } > > &.multiMonth { >- .flatpickr-days .dayContainer:nth-child(n+1) { >- & .flatpickr-day.inRange:nth-child(7n+7) { >+ .flatpickr-days .dayContainer:nth-child( n+1 ) { >+ & .flatpickr-day.inRange:nth-child( 7n+7 ) { > box-shadow: none !important; > } > } > >- .flatpickr-days .dayContainer:nth-child(n+2) { >- & .flatpickr-day.inRange:nth-child(7n+1) { >- box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; >+ .flatpickr-days .dayContainer:nth-child( n+2 ) { >+ & .flatpickr-day.inRange:nth-child( 7n+1 ) { >+ box-shadow: -2px 0 0 #E6E6E6, 5px 0 0 #E6E6E6; > } > } > } >@@ -139,8 +88,8 @@ > .hasTime { > .dayContainer { > border-bottom: 0; >- border-bottom-right-radius: 0; > border-bottom-left-radius: 0; >+ border-bottom-right-radius: 0; > } > } > >@@ -152,8 +101,8 @@ > > &.hasTime { > .flatpickr-time { >- height: $timeHeight; > border-top: 1px solid $calendarBorderColor; >+ height: $timeHeight; > } > > @if variable-exists( "noCalendarBorder" ) { >@@ -173,86 +122,78 @@ > } > } > >- &:before, >- &:after { >- position: absolute; >- display: block; >- pointer-events: none; >+ &::before, >+ &::after { > border: solid transparent; >- content: ''; >+ content: ""; >+ display: block; > height: 0; >- width: 0; > left: 22px; >+ pointer-events: none; >+ position: absolute; >+ width: 0; > } > > &.rightMost, > &.arrowRight { >- >- &:before, >- &:after { >+ &::before, >+ &::after { > left: auto; > right: 22px; > } > } > > &.arrowCenter { >- >- &:before, >- &:after { >+ &::before, >+ &::after { > left: 50%; > right: 50%; > } > } > >- &:before { >+ &::before { > border-width: 5px; > margin: 0 -5px; > } > >- &:after { >+ &::after { > border-width: 4px; > margin: 0 -4px; > } > > &.arrowTop { >- >- &:before, >- &:after { >+ &::before, >+ &::after { > bottom: 100%; > } > >- &:before { >+ &::before { > border-bottom-color: $calendarBorderColor; > } > >- &:after { >+ &::after { > @if variable-exists( "noCalendarBorder" ) { > border-bottom-color: $monthBackground; >- } >- >- @else { >+ } @else { > border-bottom-color: $calendarBackground; > } > } > } > > &.arrowBottom { >- >- &:before, >- &:after { >+ &::before, >+ &::after { > top: 100%; > } > >- &:before { >+ &::before { > border-top-color: $calendarBorderColor; > } > >- &:after { >+ &::after { > @if variable-exists( "noCalendarBorder" ) { > border-top-color: $monthBackground; >- } >- >- @else { >+ } @else { > border-top-color: $calendarBackground; > } > } >@@ -264,8 +205,8 @@ > } > > .flatpickr-wrapper { >- position: relative; > display: inline-block; >+ position: relative; > } > > .flatpickr-months { >@@ -279,26 +220,26 @@ > background: $monthBackground; > color: $monthForeground; > fill: $monthForeground; >+ flex: 1; > height: $monthNavHeight; > line-height: 1; >- text-align: center; >+ overflow: hidden; > position: relative; >+ text-align: center; > user-select: none; >- overflow: hidden; >- flex: 1; > } > > .flatpickr-prev-month, > .flatpickr-next-month { >- text-decoration: none; >+ color: $monthForeground; > cursor: pointer; >- position: absolute; >- top: 0; >+ fill: $monthForeground; > height: $monthNavHeight; > padding: 10px; >+ position: absolute; >+ text-decoration: none; >+ top: 0; > z-index: 3; >- color: $monthForeground; >- fill: $monthForeground; > > &.flatpickr-disabled { > display: none; >@@ -309,59 +250,40 @@ > } > > &.flatpickr-prev-month { >- /*! >- /*rtl:begin:ignore*/ >- /* >- */ > left: 0; >- /*! >- /*rtl:end:ignore*/ >- /* >- */ > } > > &.flatpickr-next-month { >- /*! >- /*rtl:begin:ignore*/ >- /* >- */ > right: 0; >- /*! >- /*rtl:end:ignore*/ >- /* >- */ > } > > &:hover { > color: $todayColor; > > svg { >- @if variable-exists( "arrow_hover_color" ){ >+ @if variable-exists( "arrow_hover_color" ) { > fill: $arrow_hover_color; >- } >- >- @else { >- >+ } @else { > fill: $todayColor; > } > } > } > > svg { >- width: 14px; > height: 14px; >+ width: 14px; > > path { >- transition: fill 0.1s; > fill: inherit; >+ transition: fill .1s; > } > } > } > } > > .numInputWrapper { >- position: relative; > height: auto; >+ position: relative; > > input, > span { >@@ -377,45 +299,45 @@ > > &::-webkit-outer-spin-button, > &::-webkit-inner-spin-button { >+ appearance: none; > margin: 0; >- -webkit-appearance: none; > } > } > > span { >- position: absolute; >- right: 0; >- width: $timecontrols; >- padding: 0 4px 0 2px; >+ border: 1px solid rgba( $dayForeground, .15 ); >+ box-sizing: border-box; >+ cursor: pointer; > height: 50%; > line-height: 50%; > opacity: 0; >- cursor: pointer; >- border: 1px solid rgba($dayForeground, 0.15); >- box-sizing: border-box; >+ padding: 0 4px 0 2px; >+ position: absolute; >+ right: 0; >+ width: $timecontrols; > > &:hover { >- background: rgba($invertedBg, 0.1); >+ background: rgba( $invertedBg, .1 ); > } > > &:active { >- background: rgba($invertedBg, 0.2); >+ background: rgba( $invertedBg, .2 ); > } > >- &:after { >- display: block; >+ &::after { > content: ""; >+ display: block; > position: absolute; > } > > &.arrowUp { >- top: 0; > border-bottom: 0; >+ top: 0; > >- &:after { >+ &::after { >+ border-bottom: 4px solid rgba( $dayForeground, .6 ); > border-left: 4px solid transparent; > border-right: 4px solid transparent; >- border-bottom: 4px solid rgba($dayForeground, 0.6); > top: 26%; > } > } >@@ -423,26 +345,26 @@ > &.arrowDown { > top: 50%; > >- &:after { >+ &::after { > border-left: 4px solid transparent; > border-right: 4px solid transparent; >- border-top: 4px solid rgba($dayForeground, 0.6); >+ border-top: 4px solid rgba( $dayForeground, .6 ); > top: 40%; > } > } > > svg { >- width: inherit; > height: auto; >+ width: inherit; > > path { >- fill: rgba($monthForeground, 0.5); >+ fill: rgba( $monthForeground, .5 ); > } > } > } > > &:hover { >- background: rgba($invertedBg, 0.05); >+ background: rgba( $invertedBg, .05 ); > > span { > opacity: 1; >@@ -451,65 +373,63 @@ > } > > .flatpickr-current-month { >+ color: inherit; >+ display: inline-block; > font-size: 135%; >- line-height: inherit; > font-weight: 300; >- color: inherit; >- position: absolute; >- width: 75%; >+ height: $monthNavHeight; > left: 12.5%; >- padding: 0.22 * $monthNavHeight 0 0 0; >+ line-height: inherit; > line-height: 1; >- height: $monthNavHeight; >- display: inline-block; >+ padding: .22 * $monthNavHeight 0 0 0; >+ position: absolute; > text-align: center; >- transform: translate3d(0px, 0px, 0px); >+ transform: translate3d( 0, 0, 0 ); >+ width: 75%; > > span.cur-month { >- font-family: inherit; >- font-weight: 700; > color: inherit; > display: inline-block; >- margin-left: 0.5ch; >+ font-family: inherit; >+ font-weight: 700; >+ margin-left: .5ch; > padding: 0; > > &:hover { >- background: rgba($invertedBg, 0.05); >+ background: rgba( $invertedBg, .05 ); > } > } > > .numInputWrapper { >- width: 8ch; > display: inline-block; >+ width: 8ch; > >- span.arrowUp:after { >+ span.arrowUp::after { > border-bottom-color: $monthForeground; > } > >- span.arrowDown:after { >+ span.arrowDown::after { > border-top-color: $monthForeground; > } > } > > input.cur-year { >+ appearance: textfield; > background: transparent; >+ border: 0; >+ border-radius: 0; > box-sizing: border-box; > color: inherit; > cursor: text; >- padding: 0 0 0 0.5ch; >- margin: 0; > display: inline-block; >- font-size: inherit; > font-family: inherit; >+ font-size: inherit; > font-weight: 300; >- line-height: inherit; > height: auto; >- border: 0; >- border-radius: 0; >+ line-height: inherit; >+ margin: 0; >+ padding: 0 0 0 .5ch; > vertical-align: initial; >- -webkit-appearance: textfield; >- -moz-appearance: textfield; >- appearance: textfield; > > &:focus { > outline: 0; >@@ -517,16 +437,16 @@ > > &[disabled], > &[disabled]:hover { >- font-size: 100%; >- color: rgba($monthForeground, 0.5); > background: transparent; >+ color: rgba( $monthForeground, .5 ); >+ font-size: 100%; > pointer-events: none; > } > } > > .flatpickr-monthDropdown-months { > appearance: none; >- background-image: url('data:image/svg+xml;charset=utf8,%3csvg fill="%23000000" fill-opacity="0.54" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M7 10l5 5 5-5z"/%3e%3cpath d="M0 0h24v24H0z" fill="none"/%3e%3c/svg%3e'); >+ background-image: url( 'data:image/svg+xml;charset=utf8,%3csvg fill="%23000000" fill-opacity="0.54" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M7 10l5 5 5-5z"/%3e%3cpath d="M0 0h24v24H0z" fill="none"/%3e%3c/svg%3e' ); > background-position: 100% 50%; > background-repeat: no-repeat; > background-size: 24px 24px; >@@ -535,8 +455,8 @@ > box-sizing: border-box; > color: inherit; > cursor: pointer; >- font-size: 90%; > font-family: inherit; >+ font-size: 90%; > font-weight: 300; > height: auto; > line-height: 120%; >@@ -561,13 +481,13 @@ > } > > .flatpickr-weekdays { >+ align-items: center; > background: $weekdaysBackground; >- text-align: center; >- overflow: hidden; >- width: 100%; > display: flex; >- align-items: center; > height: $weekdaysHeight; >+ overflow: hidden; >+ text-align: center; >+ width: 100%; > > .flatpickr-weekdaycontainer { > display: flex; >@@ -575,19 +495,17 @@ > } > } > >- >- > span.flatpickr-weekday { >- cursor: default; >- font-size: 90%; > background: $monthBackground; > color: $weekdaysForeground; >- line-height: 1; >- margin: 0; >- text-align: center; >+ cursor: default; > display: block; > flex: 1; >+ font-size: 90%; > font-weight: bolder; >+ line-height: 1; >+ margin: 0; >+ text-align: center; > } > > .dayContainer, >@@ -596,10 +514,10 @@ span.flatpickr-weekday { > } > > .flatpickr-days { >- position: relative; >- overflow: hidden; >- display: flex; > align-items: flex-start; >+ display: flex; >+ overflow: hidden; >+ position: relative; > width: $daysWidth; > > &:focus { >@@ -613,24 +531,21 @@ span.flatpickr-weekday { > } > > .dayContainer { >- padding: 0; >- outline: 0; >- text-align: left; >- width: $daysWidth; >- min-width: $daysWidth; >- max-width: $daysWidth; > box-sizing: border-box; > display: inline-block; >- display: -ms-flexbox; > display: flex; > flex-wrap: wrap; >- -ms-flex-wrap: wrap; >- -ms-flex-pack: justify; > justify-content: space-around; >- transform: translate3d(0px, 0px, 0px); >+ max-width: $daysWidth; >+ min-width: $daysWidth; > opacity: 1; >+ outline: 0; >+ padding: 0; >+ text-align: left; >+ transform: translate3d( 0, 0, 0 ); >+ width: $daysWidth; > >- &+.dayContainer { >+ & + .dayContainer { > box-shadow: -1px 0 0 $calendarBorderColor; > } > } >@@ -638,36 +553,33 @@ span.flatpickr-weekday { > .flatpickr-day { > background: none; > border: 1px solid transparent; >- border-radius: 150px; >+ border-radius: 0; > box-sizing: border-box; > color: $dayForeground; > cursor: pointer; >- >+ display: inline-block; >+ flex-basis: 14.2857%; > font-weight: 400; >- width: 14.2857143%; >- flex-basis: 14.2857143%; >- max-width: $daySize; > height: $daySize; >+ justify-content: center; > line-height: $daySize; > margin: 0; >- >- display: inline-block; >+ max-width: $daySize; > position: relative; >- justify-content: center; > text-align: center; >+ width: 14.2857%; > > &, > &.prevMonthDay, > &.nextMonthDay { >- > &.inRange, > &.today.inRange, > &:hover, > &:focus { >- cursor: pointer; >- outline: 0; > background: $dayHoverBackground; > border-color: $dayHoverBackground; >+ cursor: pointer; >+ outline: 0; > } > } > >@@ -676,15 +588,13 @@ span.flatpickr-weekday { > > &:hover, > &:focus { >- border-color: $todayColor; > background: $todayColor; >+ border-color: $todayColor; > >- @if variable-exists( "today_fg_color" ){ >+ @if variable-exists( "today_fg_color" ) { > color: $today_fg_color; >- } >- >- @else { >- color: white; >+ } @else { >+ color: #FFF; > } > } > } >@@ -692,7 +602,6 @@ span.flatpickr-weekday { > &.selected, > &.startRange, > &.endRange { >- > &, > &.inRange, > &:focus, >@@ -700,17 +609,14 @@ span.flatpickr-weekday { > &.prevMonthDay, > &.nextMonthDay { > background: $selectedDayBackground; >+ border-color: $selectedDayBackground; > box-shadow: none; > >- @if variable-exists( "selectedDayForeground" ){ >+ @if variable-exists( "selectedDayForeground" ) { > color: $selectedDayForeground; >+ } @else { >+ color: #FFF; > } >- >- @else { >- color: white; >- } >- >- border-color: $selectedDayBackground; > } > > &.startRange { >@@ -721,7 +627,7 @@ span.flatpickr-weekday { > border-radius: 0 50px 50px 0; > } > >- &.startRange+.endRange:not(:nth-child(7n+1)) { >+ &.startRange + .endRange:not( :nth-child( 7n+1 ) ) { > box-shadow: -5 * $dayMargin 0 0 $selectedDayBackground; > } > >@@ -742,25 +648,21 @@ span.flatpickr-weekday { > &.notAllowed, > &.notAllowed.prevMonthDay, > &.notAllowed.nextMonthDay { >- color: rgba($dayForeground, 0.3); > background: transparent; >+ color: rgba( $dayForeground, .3 ); >+ cursor: default; > >- @if variable-exists( "disabled_border_color" ){ >+ @if variable-exists( "disabled_border_color" ) { > border-color: $disabled_border_color; >- } >- >- @else { >- >+ } @else { > border-color: transparent; > } >- >- cursor: default; > } > > &.flatpickr-disabled, > &.flatpickr-disabled:hover { >+ color: rgba( $dayForeground, .1 ); > cursor: not-allowed; >- color: rgba($dayForeground, 0.1); > } > > &.week.selected { >@@ -785,38 +687,35 @@ span.flatpickr-weekday { > > @if variable-exists( "noCalendarBorder" ) { > border-left: 1px solid $calendarBorderColor; >- } >- >- @else { >+ } @else { > box-shadow: 1px 0 0 $calendarBorderColor; > } > } > > .flatpickr-weekday { > float: none; >- width: 100%; > line-height: $weekdaysHeight; >+ width: 100%; > } > > span.flatpickr-day { >- > &, > &:hover { >- display: block; >- width: 100%; >- max-width: none; >- color: rgba($dayForeground, 0.3); > background: transparent; >- cursor: default; > border: none; >+ color: rgba( $dayForeground, .3 ); >+ cursor: default; >+ display: block; >+ max-width: none; >+ width: 100%; > } > } > } > > .flatpickr-innerContainer { >+ box-sizing: border-box; > display: block; > display: flex; >- box-sizing: border-box; > overflow: hidden; > > @if variable-exists( "noCalendarBorder" ) { >@@ -826,44 +725,44 @@ span.flatpickr-weekday { > } > > .flatpickr-rContainer { >+ box-sizing: border-box; > display: inline-block; > padding: 0; >- box-sizing: border-box; > } > > .flatpickr-time { >- text-align: center; >- outline: 0; >+ box-sizing: border-box; > display: block; >+ display: flex; > height: 0; > line-height: $timeHeight; > max-height: $timeHeight; >- box-sizing: border-box; >+ outline: 0; > overflow: hidden; >- display: flex; >+ text-align: center; > > @if variable-exists( "noCalendarBorder" ) { > background: $calendarBackground; > border-radius: 0 0 5px 5px; > } > >- &:after { >+ &::after { >+ clear: both; > content: ""; > display: table; >- clear: both; > } > > .numInputWrapper { > flex: 1; >- width: 40%; >- height: $timeHeight; > float: left; >+ height: $timeHeight; >+ width: 40%; > >- span.arrowUp:after { >+ span.arrowUp::after { > border-bottom-color: $dayForeground; > } > >- span.arrowDown:after { >+ span.arrowDown::after { > border-top-color: $dayForeground; > } > } >@@ -877,22 +776,20 @@ span.flatpickr-weekday { > } > > input { >+ appearance: textfield; > background: transparent; >- box-shadow: none; > border: 0; > border-radius: 0; >- text-align: center; >- margin: 0; >- padding: 0; >- height: inherit; >- line-height: inherit; >+ box-shadow: none; >+ box-sizing: border-box; > color: $dayForeground; > font-size: 14px; >+ height: inherit; >+ line-height: inherit; >+ margin: 0; >+ padding: 0; > position: relative; >- box-sizing: border-box; >- -webkit-appearance: textfield; >- -moz-appearance: textfield; >- appearance: textfield; >+ text-align: center; > > &.flatpickr-hour { > font-weight: bold; >@@ -904,45 +801,44 @@ span.flatpickr-weekday { > } > > &:focus { >- outline: 0; > border: 0; >+ outline: 0; > } > } > > .flatpickr-time-separator, > .flatpickr-am-pm { >- height: inherit; >- float: left; >- line-height: inherit; >+ align-self: center; > color: $dayForeground; >+ float: left; > font-weight: bold; >- width: 2%; >+ height: inherit; >+ line-height: inherit; > user-select: none; >- align-self: center; >+ width: 2%; > } > > .flatpickr-am-pm { >- outline: 0; >- width: 18%; > cursor: pointer; >- text-align: center; > font-weight: 400; >+ outline: 0; >+ text-align: center; >+ width: 18%; > } > > input, > .flatpickr-am-pm { >- > &:hover, > &:focus { >- background: lighten($dayHoverBackground, 3); >+ background: lighten( $dayHoverBackground, 3 ); > } > } > } > > .flatpickr-input { >- background-repeat: no-repeat; >+ background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='#369' class='bi bi-calendar3'%3E%3Cg stroke-width='1.333'%3E%3Cpath d='M10.5 0h-9A1.5 1.5 0 0 0 0 1.5v9A1.5 1.5 0 0 0 1.5 12h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 10.5 0zM.75 2.893c0-.355.336-.643.75-.643h9c.414 0 .75.288.75.643v7.714c0 .355-.336.643-.75.643h-9c-.414 0-.75-.288-.75-.643z'/%3E%3Cpath d='M4.875 5.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zM2.625 7.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm-6.75 2.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z'/%3E%3C/g%3E%3C/svg%3E" ); > background-position: 3px; >- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='#369' class='bi bi-calendar3'%3E%3Cg stroke-width='1.333'%3E%3Cpath d='M10.5 0h-9A1.5 1.5 0 0 0 0 1.5v9A1.5 1.5 0 0 0 1.5 12h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 10.5 0zM.75 2.893c0-.355.336-.643.75-.643h9c.414 0 .75.288.75.643v7.714c0 .355-.336.643-.75.643h-9c-.414 0-.75-.288-.75-.643z'/%3E%3Cpath d='M4.875 5.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zM2.625 7.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm-6.75 2.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z'/%3E%3C/g%3E%3C/svg%3E"); >+ background-repeat: no-repeat; > border-style: inset; > border-width: 1px; > padding: 3px 3px 3px 20px; >@@ -956,10 +852,6 @@ span.flatpickr-weekday { > } > } > >-.flatpickr-day { >- border-radius: 0; >-} >- > .flatpickr_wrapper { > white-space: nowrap; > } >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr_vars.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr_vars.scss >index 0c0eaffab3..19b74871ce 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr_vars.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr_vars.scss >@@ -1,37 +1,24 @@ >-$bezier: cubic-bezier(0.23, 1, 0.32, 1); >+$bezier: cubic-bezier( .23, 1, .32, 1 ); > $slideTime: 400ms; >- >- > $daySize: 39px !default; > $padding: $daySize / 16; > $dayMargin: 2px !default; > $daysWidth: $daySize * 7 + $dayMargin * 14 + $padding * 2 + 2; > $calendarWidth: $daysWidth; >- > $monthNavHeight: 34px !default; > $weekdaysHeight: 28px !default; > $timeHeight: 40px; >- >- >- >-$calendarBackground: #ffffff !default; >-$calendarBorderColor: #e6e6e6 !default; >- >-$monthForeground: rgba(black, 0.9) !default; >-$arrow_hover_color: #f64747 !default; >- >+$calendarBackground: #FFFFFF !default; >+$calendarBorderColor: #E6E6E6 !default; >+$monthForeground: rgba( 0, 0, 0, .9 ) !default; >+$arrow_hover_color: #F64747 !default; > $monthBackground: transparent !default; >- > $weekdaysBackground: transparent !default; >-$weekdaysForeground: rgba(black, 0.54) !default; >- >+$weekdaysForeground: rgba( 0, 0, 0, .54 ) !default; > $dayForeground: #000 !default; >-$dayHoverBackground: #e6e6e6 !default; >- >+$dayHoverBackground: #E6E6E6 !default; > $todayColor: #538200 !default; > $selectedDayBackground: #FFF4C6 !default; > $selectedDayForeground: #000; >- >-$invertedBg: invert($calendarBackground); >- >+$invertedBg: invert( $calendarBackground ); > $timecontrols: 25px; >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss >index b0ebcd45fa..d53dd12fbf 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss >@@ -1,35 +1,35 @@ > @font-face { >- font-family: "NotoSans"; >+ font-family: NotoSans; > font-style: normal; > font-weight: 400; >- src: local("Noto Sans Regular"), >- url("fonts/NotoSans-Regular-webfont.woff2") format("woff2"), >- url("fonts/NotoSans-Regular-webfont.woff") format("woff"); >+ src: local( "Noto Sans Regular" ), >+ url( "fonts/NotoSans-Regular-webfont.woff2" ) format( "woff2" ), >+ url( "fonts/NotoSans-Regular-webfont.woff" ) format( "woff" ); > } > > @font-face { >- font-family: "NotoSans"; >+ font-family: NotoSans; > font-style: bold; > font-weight: 700; >- src: local("Noto Sans Bold"), >- url("fonts/NotoSans-Bold-webfont.woff2") format("woff2"), >- url("fonts/NotoSans-Bold-webfont.woff") format("woff"); >+ src: local( "Noto Sans Bold" ), >+ url( "fonts/NotoSans-Bold-webfont.woff2" ) format( "woff2" ), >+ url( "fonts/NotoSans-Bold-webfont.woff" ) format( "woff" ); > } > > @font-face { >- font-family: "NotoSans"; >+ font-family: NotoSans; > font-style: italic; > font-weight: 400; >- src: local("Noto Sans Italic"), >- url("fonts/NotoSans-Italic-webfont.woff2") format("woff2"), >- url("fonts/NotoSans-Italic-webfont.woff") format("woff"); >+ src: local( "Noto Sans Italic" ), >+ url( "fonts/NotoSans-Italic-webfont.woff2" ) format( "woff2" ), >+ url( "fonts/NotoSans-Italic-webfont.woff" ) format( "woff" ); > } > > @font-face { >- font-family: "NotoSans"; >+ font-family: NotoSans; > font-style: italic; > font-weight: 700; >- src: local("Noto Sans Bold Italic"), >- url("fonts/NotoSans-BoldItalic-webfont.woff2") format("woff2"), >- url("fonts/NotoSans-BoldItalic-webfont.woff") format("woff"); >+ src: local( "Noto Sans Bold Italic" ), >+ url( "fonts/NotoSans-BoldItalic-webfont.woff2" ) format( "woff2" ), >+ url( "fonts/NotoSans-BoldItalic-webfont.woff" ) format( "woff" ); > } >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss >index 0e5f462fbf..58c80143af 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss >@@ -8,7 +8,7 @@ > } > } > >-@media only screen and ( min-width: 0 ) and ( max-width: 440px ){ >+@media only screen and ( min-width: 0 ) and ( max-width: 440px ) { > /* Screens bewteen 0 and 390 pixels wide */ > .ui-tabs .ui-tabs-nav li a, > .statictabs li a { >@@ -18,7 +18,6 @@ > .input-fluid { > width: 90%; > } >- > } > > @media only screen and ( min-width: 342px ) and ( max-width: 479px ) { >@@ -31,6 +30,7 @@ > display: block; > } > } >+ > /* Override Bootstrap Responsive CSS fixed navbar */ > @media ( max-width: 979px ) { > .navbar-fixed-top, >@@ -129,12 +129,13 @@ > > &:first-child { > .btn-link { >- padding: 0.375rem 0.75rem; >+ padding: .375rem .75rem; > } > } > > a { > @include border-radius-all( 4px ); >+ > background-color: #F2F2EF; > border: 1px solid #DDD; > display: block; >@@ -164,6 +165,7 @@ > .toolbar { > .resort { > @include border-radius-all( 5px ); >+ > font-size: 14px; > max-width: 100%; > padding: 4px 6px; >@@ -181,12 +183,13 @@ > > .mastheadsearch { > @include border-radius-all( 0 ); >- margin: 0; > >+ margin: 0; > } > > .main { > @include border-radius-all( 0 ); >+ > margin: 0; > padding: 0; > } >@@ -258,7 +261,7 @@ > > .btn { > flex-grow: 1; >- padding: 0.375rem 0.75rem >+ padding: .375rem .75rem; > } > } > >@@ -298,10 +301,6 @@ > display: inline; > margin-right: 12px; > } >- >- #members { >- >- } > } > > @media only screen and ( min-width: 480px ) and ( max-width: 608px ) { >@@ -312,12 +311,11 @@ > } > > @media only screen and ( min-width: 608px ) { >- > .advanced-search-terms { > .search-term-row { > display: grid; >- grid-template-columns: 10% 30% 60%; > gap: 5px 5px; >+ grid-template-columns: 10% 30% 60%; > margin: 5px 0; > } > >@@ -462,7 +460,7 @@ > @media only screen and ( min-width: 992px ) { > /* Screens above 768 pixels wide */ > #menu { >- border-right: 1px solid #d8d8d8; >+ border-right: 1px solid #D8D8D8; > > ul { > padding: 1em 0; >@@ -472,9 +470,10 @@ > &.active { > a { > border-right: 0; >- border-top: 1px solid #d8d8d8; >+ border-top: 1px solid #D8D8D8; > } > } >+ > a { > border-bottom: 1px solid #999; > margin: .4em 0; >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >index 14caa1bcf6..63434d3cbf 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >@@ -20,6 +20,7 @@ > padding-left: 0; > padding-right: 0; > } >+ > .dropdown-toggle::after { > border: 0; > } >@@ -68,7 +69,7 @@ a { > padding-left: 0; > > &:hover { >- color: #c60000; >+ color: #C60000; > } > } > } >@@ -78,7 +79,7 @@ a { > } > > &.clear_date { >- color: #c33; >+ color: #C33; > font-size: 130%; > } > >@@ -103,7 +104,7 @@ a { > > &.reviewlink, > &.reviewlink:visited { >- color: black; >+ color: #000; > font-weight: normal; > text-decoration: none; > } >@@ -130,7 +131,7 @@ a { > > i { > .fa { >- color: #c60000 >+ color: #C60000; > } > } > } >@@ -172,6 +173,20 @@ td { > max-width: none; > } > >+ &.bookcover { >+ background: #FFF url( "../images/spinner-small.gif" ) center center no-repeat; >+ min-width: 120px; >+ text-align: center; >+ } >+ >+ .cover-slides { >+ background: transparent none; >+ border: 0; >+ margin: 0; >+ min-height: unset; >+ padding: 0; >+ } >+ > &.overdue { > color: #CC3333; > } >@@ -226,12 +241,12 @@ th { > } > > #backtotop { >+ bottom: 40px; > display: inline-block; >- text-align: center; > font-size: 120%; > position: fixed; >- bottom: 40px; > right: 40px; >+ text-align: center; > z-index: 1000; > } > >@@ -264,10 +279,16 @@ th { > > .actions { > white-space: nowrap; >+ >+ &:first-child { >+ .btn-link { >+ padding-left: 0; >+ } >+ } > } > > .advsearch_limit { >- border: 1px solid #d8d8d8; >+ border: 1px solid #D8D8D8; > font-size: 90%; > height: 100%; > margin-bottom: 15px; >@@ -296,10 +317,11 @@ th { > > span { > @include border-radius-all( 3px ); >+ > background-color: $base-theme-color; > color: #FFF; > display: inline; >- font-family: 'NotoSans'; >+ font-family: NotoSans; > font-size: 80%; > font-weight: normal; > margin: 0 0 0 .9em; >@@ -307,7 +329,6 @@ th { > } > } > >- > #members { > p { > color: #727272; >@@ -392,7 +413,6 @@ th { > content: ""; > } > } >- > } > > ul { >@@ -437,10 +457,6 @@ th { > #rssnews-container { > color: #727272; > font-size: 90%; >-} >- >-#rssnews-container { >- font-size: 90%; > padding: .5em 0; > } > >@@ -452,12 +468,12 @@ th { > > .fa { > &.fa-rss { >- background: rgb(240, 109, 52) none; >+ background: rgb( 240, 109, 52 ) none; > border-radius: 3px; > color: #FFF; > margin: 0 2px; > padding: 2px 4px; >- text-shadow: 1px 0 1px rgba(0, 0, 0, .25); >+ text-shadow: 1px 0 1px rgba( 0, 0, 0, .25 ); > > &.rsssearchicon { > font-size: 70%; >@@ -466,7 +482,7 @@ th { > } > > .form-control-filtered { >- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-funnel-fill'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z' fill='%23acacac'/%3E%3C/svg%3E"); >+ background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-funnel-fill'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z' fill='%23acacac'/%3E%3C/svg%3E" ); > background-position-x: 6px; > background-position-y: center; > background-repeat: no-repeat; >@@ -509,7 +525,7 @@ th { > > i { > &.fa { >- color: #c60000; >+ color: #C60000; > } > } > } >@@ -518,13 +534,13 @@ th { > &.disabled, > &[disabled] { > color: #333; >- opacity: 0.65; >+ opacity: .65; > > &:hover { > i { > &.fa { > color: #333; >- opacity: 0.65; >+ opacity: .65; > } > } > } >@@ -532,17 +548,10 @@ th { > } > } > >-.actions { >- &:first-child { >- .btn-link { >- padding-left: 0; >- } >- } >-} >- > /* Override Bootstrap alert */ > .alert { > /* Redefine a new style for Bootstrap's class "close" since we use that already */ >+ > /* Use <a class="closebtn" href="#">×</a> */ > > .closebtn { >@@ -555,12 +564,12 @@ th { > > /* Add style for Bootstrap dropdown-header class */ > .dropdown-header { >- border-top: 1px solid #eee; >+ border-top: 1px solid #EEE; > color: #000; > display: block; > font-size: 90%; > font-weight: 700; >- line-height: 1.42857143; >+ line-height: 1.4286; > padding: 3px 20px; > padding-left: 10px; > white-space: nowrap; >@@ -570,27 +579,37 @@ th { > .btn-link { > &.dropdown-toggle { > background-image: none; >- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); >+ box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .25 ); > } > } > } > > .breadcrumb { > background-color: #F0F3F3; >+ border-radius: 0; > font-size: 85%; > list-style: none outside none; > margin: 15px; > padding: 5px 10px; >- border-radius: 0px; > > a { >- >- color: darken( $links, 5%); >- >+ color: darken( $links, 5% ); > } > } > > .breadcrumb-item { >+ + .breadcrumb-item { >+ &::before { >+ background: transparent url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' %3E%3Cpath fill-rule='evenodd' d='M7.37 0l5.35 7.3c.2.2.2.51 0 .7l-5.38 8h-4.2l5.64-8.35L3.13.01z'/%3E%3C/svg%3E" ) 50% 50% no-repeat; >+ background-size: 8px; >+ content: ""; >+ display: inline-block; >+ float: none; >+ height: .8em; >+ width: .8em; >+ } >+ } >+ > &.active { > a:link, > a:visited, >@@ -604,7 +623,7 @@ th { > } > > #opac-main-search { >- background: #f0f3f3; >+ background: #F0F3F3; > margin: 7px 0; > padding: 15px; > >@@ -620,12 +639,12 @@ th { > flex-grow: 2; > } > >-.table-striped tbody > tr:nth-child(odd) > td, >-.table-striped tbody > tr:nth-child(odd) > th { >+.table-striped tbody > tr:nth-child( odd ) > td, >+.table-striped tbody > tr:nth-child( odd ) > th { > background-color: #F0F3F3; > > a { >- color: darken( $links, 5%); >+ color: darken( $links, 5% ); > > &.btn { > color: #FFF; >@@ -652,12 +671,12 @@ th { > } > > #toolbar { >- background-color: #f0f3f3; >- border: 1px solid #f0f3f3; >+ background-color: #F0F3F3; >+ border: 1px solid #F0F3F3; > margin: 0; > > &.clearfix { >- background-color: #f0f3f3; >+ background-color: #F0F3F3; > } > } > >@@ -667,6 +686,7 @@ th { > > .no-image { > @include border-radius-all( 3px ); >+ > background-color: #FFF; > border: 1px solid #AAA; > color: #979797; >@@ -700,16 +720,16 @@ th { > } > > #biblio-cover-slider { >- background-color: #fff; >- border: 1px solid #b9d8d9; >+ background-color: #FFF; >+ border: 1px solid #B9D8D9; > border-radius: 3px; > margin: 0 1em .5em 0; >- padding: 10px 5px 5px 5px; > min-height: 175px; >+ padding: 10px 5px 5px 5px; > } > > .cover-slides { >- background: #FFF url("../images/spinner-small.gif") center center no-repeat; >+ background: #FFF url( "../images/spinner-small.gif" ) center center no-repeat; > > .hint { > font-size: 80%; >@@ -720,28 +740,12 @@ th { > &.nav-active { > &:link, > &:visited { >- color: #85ca11; >+ color: #85CA11; > } > } > } > } > >-td { >- &.bookcover { >- background: #FFF url("../images/spinner-small.gif") center center no-repeat; >- min-width: 120px; >- text-align: center; >- } >- >- .cover-slides { >- background: transparent none; >- border: 0; >- margin: 0; >- min-height: unset; >- padding: 0; >- } >-} >- > .cover-image { > display: none; > >@@ -768,6 +772,62 @@ div { > margin-top: 3px; > } > } >+ >+ &.rows { >+ clear: left; >+ float: left; >+ margin: 0; >+ padding: 0; >+ width: 100%; >+ >+ + div.rows { >+ margin-top: .6em; >+ } >+ >+ span { >+ &.label { >+ float: left; >+ font-weight: bold; >+ margin-right: 1em; >+ text-align: left; >+ width: 9rem; >+ } >+ } >+ >+ ol { >+ list-style-type: none; >+ margin-left: 0; >+ padding: .5em 1em 0 0; >+ >+ li { >+ li { >+ border-bottom: 0; >+ } >+ } >+ } >+ >+ li { >+ border-bottom: 1px solid #EEE; >+ clear: left; >+ float: left; >+ list-style-type: none; >+ padding-bottom: .2em; >+ padding-top: .1em; >+ width: 100%; >+ } >+ >+ ul { >+ li { >+ margin-left: 7.3em; >+ >+ &:first-child { >+ clear: none; >+ float: none; >+ margin-left: 0; >+ } >+ } >+ } >+ } > } > > .required { >@@ -776,7 +836,6 @@ div { > } > } > >- > .label { > background-color: transparent; > color: inherit; >@@ -832,9 +891,9 @@ fieldset { > > div.label { > display: inline-block; >- width: 9rem; >- margin-right: 1rem; > float: none; >+ margin-right: 1rem; >+ width: 9rem; > } > > label, >@@ -848,8 +907,8 @@ fieldset { > > label.checkbox-label { > float: none; >- margin-right: 0; > font-weight: normal; >+ margin-right: 0; > text-align: left; > width: auto; > } >@@ -857,14 +916,15 @@ fieldset { > label { > &.error { > color: #C00; >- float: none; > display: inline; >+ float: none; > font-style: italic; > font-weight: normal; > margin-left: 1rem; > text-align: left; > width: auto; > } >+ > &.lradio { > float: none; > margin: inherit; >@@ -896,7 +956,6 @@ fieldset { > } > } > >- > li { > clear: left; > float: left; >@@ -912,6 +971,7 @@ fieldset { > margin: 0; > width: auto; > } >+ > input { > margin-right: 1rem; > } >@@ -942,64 +1002,6 @@ fieldset { > } > } > >-div { >- &.rows { >- float: left; >- clear: left; >- margin: 0; >- padding: 0; >- width: 100%; >- >- + div.rows { >- margin-top: .6em; >- } >- >- span { >- &.label { >- float: left; >- font-weight: bold; >- margin-right: 1em; >- text-align: left; >- width: 9rem; >- } >- } >- >- ol { >- list-style-type: none; >- margin-left: 0; >- padding: .5em 1em 0 0; >- >- li { >- li { >- border-bottom: 0; >- } >- } >- } >- >- li { >- border-bottom: 1px solid #EEE; >- clear: left; >- float: left; >- list-style-type: none; >- padding-bottom: .2em; >- padding-top: .1em; >- width: 100%; >- } >- >- ul { >- li { >- margin-left: 7.3em; >- >- &:first-child { >- clear: none; >- float: none; >- margin-left: 0; >- } >- } >- } >- } >-} >- > /* different sizes for different tags in opac-tags.tt */ > > .tagweight0 { >@@ -1092,32 +1094,32 @@ div { > font-weight: bold; > > &::before { >- color: #6c757d; >+ color: #6C757D; > content: "|"; > display: inline-block; > font-weight: normal; > padding: 0 .5rem; >- text-shadow: 1px 1px 0 #fff; >+ text-shadow: 1px 1px 0 #FFF; > } > } > > .check_control { > &::before { >- color: #6c757d; >+ color: #6C757D; > content: "|"; > display: inline-block; > font-weight: normal; > padding: 0 .5rem; >- text-shadow: 1px 1px 0 #fff; >+ text-shadow: 1px 1px 0 #FFF; > } > } > > .selections-toolbar { >- background: linear-gradient(#B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100%); >+ background: linear-gradient( #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% ); > border-bottom: none; >- margin-top: 3px; > display: flex; > margin: 0; >+ margin-top: 3px; > padding-left: 10px; > padding-top: .5em; > >@@ -1206,13 +1208,13 @@ div { > > a, > span { >- font-size: 87%; >- font-weight: normal; > display: inline-block; >- padding: 4px 12px; >- margin-bottom: 0; >+ font-size: 87%; > font-size: 14px; >+ font-weight: normal; > line-height: 20px; >+ margin-bottom: 0; >+ padding: 4px 12px; > text-align: center; > text-decoration: none; > vertical-align: middle; >@@ -1281,12 +1283,6 @@ div { > } > } > >-nav { >- .pagination { >- margin: 0; >- } >-} >- > .pagination_footer { > background-color: #E1E1E1; > text-align: center; >@@ -1399,11 +1395,11 @@ nav { > } > > i.fa { >- color: #7cbc0f; >+ color: #7CBC0F; > } > > .fa-li { >- top: unset; >+ top: unset; > } > } > >@@ -1420,19 +1416,9 @@ nav { > text-decoration: none; > } > } >-} > >-.breadcrumb-item { >- + .breadcrumb-item { >- &::before { >- background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' %3E%3Cpath fill-rule='evenodd' d='M7.37 0l5.35 7.3c.2.2.2.51 0 .7l-5.38 8h-4.2l5.64-8.35L3.13.01z'/%3E%3C/svg%3E") 50% 50% no-repeat; >- background-size: 8px; >- display: inline-block; >- content: ''; >- float: none; >- height: .8em; >- width: .8em; >- } >+ .pagination { >+ margin: 0; > } > } > >@@ -1473,8 +1459,8 @@ nav { > a { > color: darken( $links, 5% ); > font-weight: bold; >- text-decoration: none; > text-align: left; >+ text-decoration: none; > } > } > >@@ -1499,14 +1485,14 @@ nav { > } > > .dropdown-menu a { >+ border: 0; >+ clear: both; > display: block; >- width: 100%; > padding: .25rem 1.5rem; >- clear: both; > text-align: inherit; > white-space: nowrap; >- border: 0; >- } >+ width: 100%; >+ } > } > > .hint { >@@ -1543,17 +1529,6 @@ nav { > margin: .3em 0; > } > >-.ui-widget-content { >- a { >- &:link, >- &:visited { >- &.btn-default, >- &.btn-secondary { >- } >- } >- } >-} >- > #social_networks { > margin-top: .5em; > >@@ -1594,7 +1569,7 @@ nav { > } > > #linkedin { >- color: #0073b0; >+ color: #0073B0; > } > > #email { >@@ -1732,6 +1707,7 @@ nav { > > #didyoumean { > @include border-radius-all( 3px ); >+ > background-color: #EEE; > border: 1px solid #E8E8E8; > box-sizing: border-box; >@@ -1775,29 +1751,27 @@ nav { > > &.jstree-clicked { > background: transparent none; >- box-shadow: none; > border: 0; >+ box-shadow: none; > } > } > } > } > >- >- > #cartDetails { > background-color: #FFF; > border: 1px solid rgba( 0, 0, 0, .2 ); > border-radius: 6px; > box-shadow: 0 5px 10px rgba( 0, 0, 0, .2 ); >- color: black; >+ color: #000; > display: none; > font-size: 90%; >+ left: 50px; > margin: 0; > padding: 8px 20px; > position: fixed; > text-align: center; > top: 50px; >- left: 50px; > width: 180px; > z-index: 10; > } >@@ -1864,7 +1838,6 @@ nav { > .facet-count { > display: inline-block; > } >- > } > > #menu { >@@ -1891,8 +1864,8 @@ nav { > } > > a { >- background-color: #f0f3f3; >- border: 1px solid #d8d8d8; >+ background-color: #F0F3F3; >+ border: 1px solid #D8D8D8; > border-bottom-width: 0; > color: darken( $links, 5% ); > display: block; >@@ -1900,7 +1873,6 @@ nav { > padding: .4em .6em; > text-decoration: none; > } >- > } > } > >@@ -1924,6 +1896,7 @@ nav { > .commentline { > @include border-radius-all( 3px ); > @include shadowed; >+ > background-color: rgba( 255, 255, 204, .4 ); > border: 1px solid #CCC; > display: inline-block; >@@ -2017,6 +1990,7 @@ nav { > > .inactive { > @extend %page-middle-child; >+ > background-color: #F5F5F5; > } > >@@ -2024,7 +1998,7 @@ nav { > @extend %page-middle-child; > } > >- a[rel='last'] { >+ a[rel="last"] { > border-bottom-right-radius: 3px; > border-top-right-radius: 3px; > } >@@ -2032,6 +2006,7 @@ nav { > > .hold-message { > @include border-radius-all( 3px ); >+ > background-color: #FFF0B1; > display: inline-block; > margin: .5em; >@@ -2056,13 +2031,13 @@ nav { > padding: .4em; > width: 100%; > >- &[type='submit'] { >+ &[type="submit"] { > font-size: 100%; > padding: .5em; > transition: background-color .5s ease; > > &:hover { >- background: #77b50f none; >+ background: #77B50F none; > } > } > } >@@ -2097,7 +2072,7 @@ nav { > } > > .registration-value { >- background-color: #ebf8ff; >+ background-color: #EBF8FF; > border-radius: 5px; > display: inline-block; > font-family: monospace; >@@ -2163,7 +2138,6 @@ nav { > width: 100%; > } > >- > #user-menu-trigger { > display: none; > >@@ -2179,7 +2153,7 @@ nav { > } > } > >-/* Class to be added to toolbar when it starts being fixed at the top of the screen*/ >+/* Class to be added to toolbar when it starts being fixed at the top of the screen */ > .floating { > box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 ); > margin-top: 0; >@@ -2211,20 +2185,24 @@ nav { > > .table-bordered { > border-radius: 0; >+ > thead:first-child tr:first-child > th { > &:last-child { >- border-radius: 0; >+ border-radius: 0; > } >+ > &:first-child { >- border-radius: 0; >+ border-radius: 0; > } > } >+ > tbody:last-child tr:last-child > td { > &:last-child { >- border-radius: 0; >+ border-radius: 0; > } >+ > &:first-child { >- border-radius: 0; >+ border-radius: 0; > } > } > } >@@ -2267,7 +2245,6 @@ nav { > } > } > >- > #overdrive-results, > #recordedbooks-results, > #openlibrary-results { >@@ -2324,15 +2301,15 @@ nav { > text-decoration: none; > > &.shelfbrowser_cover { >+ display: inline-block; > min-height: 80px; > min-width: 80px; >- display: inline-block; > } > } > > #browser_previous { > a { >- transform: rotate(-90deg); >+ transform: rotate( -90deg ); > white-space: nowrap; > > i { >@@ -2343,7 +2320,7 @@ nav { > > #browser_next { > a { >- transform: rotate(90deg); >+ transform: rotate( 90deg ); > white-space: nowrap; > > i { >@@ -2428,8 +2405,8 @@ nav { > > a, > a:visited { >- text-decoration: none; > color: #29ADE4; >+ text-decoration: none; > } > } > >@@ -2453,8 +2430,8 @@ nav { > } > > .t { >- font-weight: bold; > display: inline; >+ font-weight: bold; > } > > .r { >@@ -2462,13 +2439,12 @@ nav { > } > } > >- > .contentblock { > font-size: 95%; > line-height: 135%; > margin-left: 2em; > >- :first-child:not(.term)::before { >+ :first-child:not( .term )::before { > content: "รข "; > } > } >@@ -2488,7 +2464,7 @@ nav { > > &:focus { > border-color: #C00; >- box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(204, 0, 0, .6); >+ box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 ), 0 0 8px rgba( 204, 0, 0, .6 ); > outline: 0 none; > } > >@@ -2500,7 +2476,6 @@ nav { > } > } > >- > #illrequests { > .illrequest-actions { > margin-bottom: 20px; >@@ -2525,7 +2500,6 @@ nav { > top: 50%; > transform: translateY( -50% ); > } >- > } > > #freeform-fields .custom-name { >@@ -2541,37 +2515,38 @@ nav { > > div.rows span.label { > float: inherit; >- width: inherit; >- text-align: inherit; > margin-right: 0; >+ text-align: inherit; >+ width: inherit; > } > > #ill-supplier-metadata { > display: flex; >- flex-flow: column nowrap; > flex: 1 1 auto; >+ flex-flow: column nowrap; > } > >- div[class^='requestattr-'] { >- width: 100%; >+ div[class^="requestattr-"] { > display: flex; > flex-flow: row nowrap; > padding: 5px; >- &:nth-of-type(even) { >- background-color: #f2f2f2; >+ width: 100%; >+ >+ &:nth-of-type( even ) { >+ background-color: #F2F2F2; > } >- &:nth-of-type(odd) { >- background-color: #ffffff; >+ >+ &:nth-of-type( odd ) { >+ background-color: #FFFFFF; > } > } > > #ill-supplier-metadata > div > span { > display: flex; >+ flex-basis: 0; > flex-flow: row nowrap; > flex-grow: 1; >- flex-basis: 0; > } >- > } > > .ill_availability_sourcename { >@@ -2597,11 +2572,12 @@ nav { > } > > .btn-danger { >- color: white !important; >+ color: #FFF !important; > } > > .count_label { > $base: #369; >+ > background-color: $base; > border-radius: 5px; > color: #FFF; >@@ -2672,14 +2648,13 @@ $star-selected: #EDB867; > } > > .br-theme-fontawesome-stars { >- > .br-widget { > height: 28px; > white-space: nowrap; > > a { >- -webkit-font-smoothing: antialiased; > font: normal normal normal 20px/1 FontAwesome; >+ -webkit-font-smoothing: antialiased; > margin-right: 2px; > text-decoration: none; > text-rendering: auto; >@@ -2702,7 +2677,6 @@ $star-selected: #EDB867; > } > } > >- > .br-current-rating { > display: none; > } >@@ -2713,7 +2687,6 @@ $star-selected: #EDB867; > cursor: default; > } > } >- > } > > #cancel_rating_text { >@@ -2724,7 +2697,6 @@ $star-selected: #EDB867; > > @media print { > .br-theme-fontawesome-stars { >- > .br-widget { > a { > &::after { >@@ -2738,9 +2710,7 @@ $star-selected: #EDB867; > content: "\f005"; > } > } >- > } >- > } > } > >@@ -2755,24 +2725,26 @@ $star-selected: #EDB867; > } > } > >-/*opac browse search*/ >+/* opac browse search */ > > #browse-resultswrapper { > margin-top: 15px; > } >+ > #browse-searchfuzziness { > padding: 15px 0; > } > >-#browse-searchresults, #browse-selectionsearch { >+#browse-searchresults, >+#browse-selectionsearch { > border: 1px solid #E3E3E3; > border-radius: 4px; >- padding: 0; > margin-bottom: 2em; >+ padding: 0; > } > > #browse-selectionsearch p.subjects { >- font-size: 0.9em; >+ font-size: .9em; > margin-bottom: 0; > } > >@@ -2789,9 +2761,9 @@ $star-selected: #EDB867; > text-align: center; > > img { >- margin:0.5em 0; >- position: relative; > left: -5px; >+ margin: .5em 0; >+ position: relative; > } > } > } >@@ -2804,29 +2776,30 @@ $star-selected: #EDB867; > margin-bottom: .4rem; > margin-left: 1rem; > } >-/*end browse search*/ >+ >+/* end browse search */ > > /* Skip to content link. CSS adapted from https://webaim.org/ */ > #scrolltocontent { >- background: #c60000; >- border: 1px solid white; >+ background: #C60000; >+ border: 1px solid #FFF; > border-radius: 0 0 4px 0; > border-width: 0 1px 1px 0; >- color: white; >- left: 0px; >+ color: #FFF; >+ left: 0; > padding: 6px 12px; > position: absolute; > text-decoration: none; >- text-shadow: 0 -1px 0 rgba(58, 0, 0, 0.75); >+ text-shadow: 0 -1px 0 rgba( 58, 0, 0, .75 ); > top: -40px; > transition: top .5s ease-out; > z-index: 100; > > &:focus { >- left: 0px; >+ left: 0; > outline-color: transparent; > position: absolute; >- top: 0px; >+ top: 0; > transition: top .1s ease-in; > } > } >@@ -2843,7 +2816,7 @@ $star-selected: #EDB867; > &[aria-expanded="false"] { font-weight: normal; } > > &:hover { >- background-color: rgba(255, 255, 204, 0.8); >+ background-color: rgba( 255, 255, 204, .8 ); > text-decoration: none; > } > } >@@ -2861,13 +2834,13 @@ $star-selected: #EDB867; > } > > #openid_connect { >- background-color: #fff; >+ background-color: #FFF; > border: 1px solid #AAA; >- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); >+ box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .2 ); > margin: .5em 0; > > i { >- color: #b53329; >+ color: #B53329; > margin: 0 .5em; > } > } >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/print.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/print.scss >index 40784cb6cc..13210fa5bb 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/print.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/print.scss >@@ -148,6 +148,7 @@ body#basket a { > body#basket table { > border-collapse: collapse; > } >+ > body#basket td, > body#basket th { > background-color: transparent; >@@ -161,13 +162,13 @@ body#basket th { > } > > body#basket th, >-body#basket th[scope=col] { >+body#basket th[scope="col"] { > border: 0; > text-align: center; > vertical-align: middle; > } > >-body#basket th[scope=row] { >+body#basket th[scope="row"] { > border: 0; > font-size: 89%; > text-align: right; >@@ -207,8 +208,8 @@ body#basket p { > > #userresults { > display: block; >- position: absolute; > left: 1; >+ position: absolute; > word-wrap: break-word; > } > >@@ -245,7 +246,7 @@ body#basket p { > .screen, > .suggestion, > .views, >-a[href]:after, >+a[href]::after, > fieldset.action, > h2 span.hint, > input, >@@ -292,51 +293,51 @@ td.resultscontrol, > display: none; > } > >-a[href]:after { >- display:none; >+a[href]::after { >+ display: none; > } > > #social_networks { >- display:none; >+ display: none; > } > > a.tag_add { >- display:none; >+ display: none; > } > > .results_summary.online_resources { >- display:none; >+ display: none; > } > > a#Normalview, > a#MARCview, > a#ISBDview { >- display:none; >+ display: none; > } > > .ui-tabs-panel { >- border:none !important; >+ border: none !important; > } > > #addcomment { >- display:none; >+ display: none; > } > > #ulactioncontainer { >- display:none; >+ display: none; > } > > #usermenu { >- display:none; >+ display: none; > } > > #didyoumean { >- display:none; >+ display: none; > } > > #top-pages, > #bottom-pages { >- display:none; >+ display: none; > } > > #selections-toolbar { >@@ -348,9 +349,9 @@ a#ISBDview { > } > > #numresults a { >- display:none; >+ display: none; > } > > #numresults { >- float:left; >+ float: left; > } >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss >index f86693fed6..9fad8a7c8e 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss >@@ -16,7 +16,6 @@ a { > } > } > >- > #members { > a { > &.logout { >@@ -41,7 +40,7 @@ a { > &:first-child { > tr { > &:first-child { >- &> th { >+ & > th { > &:first-child, > &:last-child { > border-radius: 0; >@@ -50,7 +49,7 @@ a { > } > > &:last-child { >- &> th { >+ & > th { > &:first-child, > &:last-child { > border-radius: 0; >@@ -79,12 +78,4 @@ a { > padding-top: 1rem; > } > >-#sci_checkin_button, >-#sci_refresh_button, >-#sci_append_button { >-} >- >-#sci_refresh_button { >-} >- > @import "responsive"; >-- >2.30.2
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 31529
:
140341
|
140504
|
141184