From 6255cef0792128c114de4addc6cb4952063bb4c6 Mon Sep 17 00:00:00 2001 From: Owen Leonard 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 Signed-off-by: Katrin Fischer Signed-off-by: Tomas Cohen Arazi --- .../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 × */ .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 × */ .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.39.5