From 2a8197ae410df4756ef3de9da0cec60aa1b05d75 Mon Sep 17 00:00:00 2001 From: Martin Renvoize Date: Fri, 2 Jan 2026 15:44:31 +0000 Subject: [PATCH] Bug 37707: (follow-up) Add visual refinements for existing booking lead/trail periods This patch enhances the visual presentation of existing bookings' protected periods (lead/trail) to match the polished appearance of new booking lead/trail period indicators. Test plan: 1. Apply all patches and run: yarn build 2. Configure a bookable item with 2-day lead and 2-day trail 3. Create an existing booking for January 10-15 4. Open the booking calendar for that item 5. Verify visual styling of protected periods: - Jan 8-9 (lead period): diagonal striped pattern, rounded left edge on Jan 8 - Jan 10-15 (booking): solid color fill - Jan 16-17 (trail period): diagonal striped pattern, rounded right edge on Jan 17 6. Verify no visual gaps between consecutive protected period dates 7. Verify the striped pattern is clearly distinguishable from solid booking dates 8. Hover over different date ranges and verify lead/trail styling updates correctly --- .../prog/css/src/staff-global.scss | 1033 ++++++++++------- .../prog/js/modals/place_booking.js | 50 +- 2 files changed, 638 insertions(+), 445 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index 3fe0e7f40ff..a75fca56e89 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -75,7 +75,7 @@ $enable-dark-mode: false; $default-bs-btn-disabled-bg, $default-bs-btn-disabled-border-color, $default-bs-btn-disabled-color - ) + ); } .badge { @@ -86,7 +86,7 @@ $enable-dark-mode: false; ::selection { background: $background-color-primary; - color: #FFFFFF; + color: #ffffff; } .page-link { @@ -136,26 +136,26 @@ a { } &.authlink { - background-color: #E3F1DF; + background-color: #e3f1df; border-radius: 5px; display: inline-block; padding: 2px 4px; } &.edit-patronimage { - background-color: #E6E6E6; - border-color: #ADADAD; + background-color: #e6e6e6; + border-color: #adadad; color: #333; &:hover { - background-color: #DADADA; + background-color: #dadada; color: #333; text-decoration: none; } } &.cartRemove { - color: #CC3333; + color: #cc3333; font-size: 90%; margin: 0; padding: 0; @@ -167,7 +167,7 @@ a { vertical-align: middle; &:hover { - color: lighten( $warning-text-color, 35% ); + color: lighten($warning-text-color, 35%); text-decoration: none; } } @@ -218,7 +218,7 @@ a { } &.csv { - background-image: url( "../img/famfamfam/silk/page_white_excel.png" ); + background-image: url("../img/famfamfam/silk/page_white_excel.png"); } &.dropdown-toggle { @@ -248,14 +248,14 @@ a { .localimage { img { - border: 1px solid #0000CC; - margin: 0 .5em; - padding: .3em; + border: 1px solid #0000cc; + margin: 0 0.5em; + padding: 0.3em; } } &.pdf { - background-image: url( "../img/famfamfam/silk/page_white_acrobat.png" ); + background-image: url("../img/famfamfam/silk/page_white_acrobat.png"); } &.submit { @@ -273,7 +273,7 @@ a { } &.xml { - background-image: url( "../img/famfamfam/silk/page_white_code.png" ); + background-image: url("../img/famfamfam/silk/page_white_code.png"); } &.ctrl_link { @@ -282,42 +282,41 @@ a { } } - #resetZ3950Search { font-size: 110%; color: $green-text-color; } .alert-message { - --bs-alert-color: var( --bs-info-text-emphasis ); - --bs-alert-bg: var( --bs-info-bg-subtle ); - --bs-alert-border-color: var( --bs-info-border-subtle ); - --bs-alert-link-color: var( --bs-info-text-emphasis ); + --bs-alert-color: var(--bs-info-text-emphasis); + --bs-alert-bg: var(--bs-info-bg-subtle); + --bs-alert-border-color: var(--bs-info-border-subtle); + --bs-alert-link-color: var(--bs-info-text-emphasis); } .alert-alert { - --bs-alert-color: var( --bs-warning-text-emphasis ); - --bs-alert-bg: var( --bs-warning-bg-subtle ); - --bs-alert-border-color: var( --bs-warning-border-subtle ); - --bs-alert-link-color: var( --bs-warning-text-emphasis ); + --bs-alert-color: var(--bs-warning-text-emphasis); + --bs-alert-bg: var(--bs-warning-bg-subtle); + --bs-alert-border-color: var(--bs-warning-border-subtle); + --bs-alert-link-color: var(--bs-warning-text-emphasis); } .alert-error { - --bs-alert-color: var( --bs-danger-text-emphasis ); - --bs-alert-bg: var( --bs-danger-bg-subtle ); - --bs-alert-border-color: var( --bs-danger-border-subtle ); - --bs-alert-link-color: var( --bs-danger-text-emphasis ); + --bs-alert-color: var(--bs-danger-text-emphasis); + --bs-alert-bg: var(--bs-danger-bg-subtle); + --bs-alert-border-color: var(--bs-danger-border-subtle); + --bs-alert-link-color: var(--bs-danger-text-emphasis); } aside { h5 { font-size: 100%; - margin: .5em 0; + margin: 0.5em 0; } fieldset { &.brief { - padding: .4em .7em; + padding: 0.4em 0.7em; button + button, input + input { @@ -325,10 +324,10 @@ aside { } fieldset { - border-left: 2px solid #CCC; + border-left: 2px solid #ccc; border-radius: 0; - margin: .5em 0; - padding: .5em; + margin: 0.5em 0; + padding: 0.5em; legend { font-size: 95%; @@ -338,19 +337,19 @@ aside { &.action { border: 0; margin-left: 0; - padding: .5em 0; + padding: 0.5em 0; } } input[type="text"], select { - height: calc( 1.5em + .75rem + 2px ); + height: calc(1.5em + 0.75rem + 2px); } label { color: #696969; display: block; - margin: .5em 0; + margin: 0.5em 0; input { &[type="checkbox"], @@ -384,10 +383,10 @@ aside { } &.radio { - padding: .7em 0; + padding: 0.7em 0; input { - padding: .3em 0; + padding: 0.3em 0; } label { @@ -414,11 +413,11 @@ aside { .flatpickr-input { margin-right: 3px; - width: calc( 100% - 20px ); + width: calc(100% - 20px); } & + .action { - background-color: #FFF; + background-color: #fff; margin-left: 0; padding: 1rem; } @@ -438,7 +437,7 @@ aside { } .sidebar_menu { - background-color: #E6E6E6; + background-color: #e6e6e6; display: block; padding: 1em 0 1em 0; @@ -447,7 +446,7 @@ aside { font-size: 1.3em; font-weight: bold; margin-top: 0; - padding-left: .5em; + padding-left: 0.5em; } ul { @@ -455,11 +454,11 @@ aside { padding-left: 0; ul { - background-color: #F3F4F4; + background-color: #f3f4f4; li { a { - padding: .5em .3em .5em 1.3rem; + padding: 0.5em 0.3em 0.5em 1.3rem; } } } @@ -471,21 +470,21 @@ aside { border-left: 5px solid transparent; color: #000; display: block; - padding: .7em .3em .7em 1rem; + padding: 0.7em 0.3em 0.7em 1rem; text-decoration: none; } &.active > a, a:hover, a.current { - background-color: #F3F4F4; + background-color: #f3f4f4; border-left: solid 5px $background-color-primary; color: $green-text-color; font-weight: bold; text-decoration: none; } - a:hover:not( .current ) { + a:hover:not(.current) { border-left: solid 5px $background-color-secondary; font-weight: normal; } @@ -540,8 +539,8 @@ div { border: 0; clear: both; float: none; - margin: .9em 0 0; - padding: .4em; + margin: 0.9em 0 0; + padding: 0.4em; width: auto; } @@ -550,10 +549,10 @@ div { } .circmessage { - padding: .4em; + padding: 0.4em; .circmessage { - margin-bottom: .3em; + margin-bottom: 0.3em; } } @@ -564,7 +563,7 @@ div { } &.help { - margin: .9em 0 0; + margin: 0.9em 0 0; } &.justify { @@ -576,7 +575,7 @@ div { &.fa-exclamation { color: $warning-text-color; font-style: italic; - padding: 0 .3em; + padding: 0 0.3em; } } } @@ -584,7 +583,7 @@ div { &.required { color: $warning-text-color; font-style: italic; - margin-left: .5em; + margin-left: 0.5em; } // Tools > automatic_item_modification_by_age @@ -593,30 +592,30 @@ div { } &[class$="_table_controls"] { - padding: .7em 0; + padding: 0.7em 0; .btn-link { font-size: unset; - padding: 0 .5rem; + padding: 0 0.5rem; } } &.results { - padding: .7em 0; + padding: 0.7em 0; } &.rule { - background-color: #F4F8F9; - border: 2px solid #BFD9B9; + background-color: #f4f8f9; + border: 2px solid #bfd9b9; border-radius: 5px; - margin: .3em; - padding: .3em; + margin: 0.3em; + padding: 0.3em; } &.lastchecked { - background-color: #FFF; - border: 2px solid #BCDB89; - padding: .2em 1em; + background-color: #fff; + border: 2px solid #bcdb89; + padding: 0.2em 1em; } &.listgroup { @@ -633,7 +632,7 @@ div { &.sysprefs { h3 { - margin: .2em 0 .2em .4em; + margin: 0.2em 0 0.2em 0.4em; } dl { @@ -642,8 +641,8 @@ div { &.hint { float: right; - margin: .7em; - padding: .5em; + margin: 0.7em; + padding: 0.5em; width: 25%; } } @@ -655,20 +654,20 @@ div { + div { &.rows { - margin-top: .6em; + margin-top: 0.6em; } } li { - border-bottom: 1px solid #EEE; + border-bottom: 1px solid #eee; list-style-type: none; - padding: .275em; + padding: 0.275em; width: 100%; } ol { list-style-type: none; - padding: .5em 1em 0 0; + padding: 0.5em 1em 0 0; li { li { @@ -696,7 +695,7 @@ div { } .browse { - margin: .5em 0; + margin: 0.5em 0; } } @@ -726,7 +725,7 @@ body { padding: 0; text-align: left; - &:has( nav.fixed-bottom ) { + &:has(nav.fixed-bottom) { padding-bottom: 6rem; } @@ -767,15 +766,15 @@ form { .notification_method, #main_contact_method { - background-color: #FFE; - border: 1px solid #CCC; + background-color: #ffe; + border: 1px solid #ccc; border-radius: 5px; display: inline-block; - margin: .5em 0; - padding: .1em .3em; + margin: 0.5em 0; + padding: 0.1em 0.3em; &.none { - background-color: #EEE; + background-color: #eee; } } @@ -787,15 +786,15 @@ form { } td .main_contact_method { - background-color: #FFE; - border: 1px solid #CCC; + background-color: #ffe; + border: 1px solid #ccc; border-radius: 5px; display: inline-block; - margin: .5em 0; - padding: .1em .3em; + margin: 0.5em 0; + padding: 0.1em 0.3em; &.none { - background-color: #EEE; + background-color: #eee; } } @@ -829,7 +828,7 @@ h3, h4, h5, h6 { - margin: .5em 0; + margin: 0.5em 0; } hr { @@ -861,14 +860,14 @@ textarea { input { &[type="submit"] { - padding: .5em 1em; + padding: 0.5em 1em; } &[type="reset"], &[type="button"] { @include default-button; - padding: .5em 1em; + padding: 0.5em 1em; } &[type="checkbox"], @@ -878,32 +877,39 @@ input { } &.submit { - padding: .5em 1em; + padding: 0.5em 1em; } } $dayLeadBackground: #fad2cf !default; $dayTrailBackground: #fcdcb3 !default; +$existingLeadBackground: #e8f0d4 !default; +$existingTrailBackground: #d0e6f5 !default; +$trailClashLead: #d0f0e0 !default; +$leadClashTrail: #e5d4f5 !default; .flatpickr-day { - &.leadRangeStart { border-radius: 50px 0 0 50px; } &.leadRange { - box-shadow: -2.5 * $dayMargin 0 0 $dayLeadBackground, 2.5 * $dayMargin 0 0 $dayLeadBackground; + box-shadow: + -2.5 * $dayMargin 0 0 $dayLeadBackground, + 2.5 * $dayMargin 0 0 $dayLeadBackground; background: $dayLeadBackground; &.flatpickr-disabled { $darkLeadBackground: darken($dayLeadBackground, 10); - box-shadow: -2.5 * $dayMargin 0 0 $darkLeadBackground, 2.5 * $dayMargin 0 0 $darkLeadBackground; + box-shadow: + -2.5 * $dayMargin 0 0 $darkLeadBackground, + 2.5 * $dayMargin 0 0 $darkLeadBackground; background: $darkLeadBackground; } } &.selected { - &.leadRangeEnd { - border-radius: 0; - } + &.leadRangeEnd { + border-radius: 0; + } } &:hover, @@ -914,11 +920,15 @@ $dayTrailBackground: #fcdcb3 !default; } &.trailRange { - box-shadow: -2.5 * $dayMargin 0 0 $dayTrailBackground, 2.5 * $dayMargin 0 0 $dayTrailBackground; + box-shadow: + -2.5 * $dayMargin 0 0 $dayTrailBackground, + 2.5 * $dayMargin 0 0 $dayTrailBackground; background: $dayTrailBackground; &.flatpickr-disabled { $darkTrailBackground: darken($dayTrailBackground, 10); - box-shadow: -2.5 * $dayMargin 0 0 $darkTrailBackground, 2.5 * $dayMargin 0 0 $darkTrailBackground; + box-shadow: + -2.5 * $dayMargin 0 0 $darkTrailBackground, + 2.5 * $dayMargin 0 0 $darkTrailBackground; background: $darkTrailBackground; } } @@ -928,47 +938,173 @@ $dayTrailBackground: #fcdcb3 !default; } &.leadDisable { - color: #aaa !important; /* Gray out the text */ - background: #f5f5f5 !important; /* Light background */ + color: #aaa !important; /* Gray out the text */ + background: #f5f5f5 !important; /* Light background */ cursor: not-allowed !important; } &.trailDisable { - color: #aaa !important; /* Gray out the text */ - background: #f5f5f5 !important; /* Light background */ + color: #aaa !important; /* Gray out the text */ + background: #f5f5f5 !important; /* Light background */ cursor: not-allowed !important; } /* BIDIRECTIONAL ENHANCEMENT: Visual indicators for existing bookings' protected periods */ + + /* Existing booking's lead period (pastel green - preparation time before their booking) */ + &.existingBookingLeadStart { + border-radius: 50px 0 0 50px; + + /* Remove right rounding if it meets new booking trail start */ + &.trailRange { + border-radius: 0; + } + + /* Special case: leadRangeEnd + trailRangeStart on existingBookingLeadStart */ + /* Left shadow should be pink to match the leadRange to the left */ + &.leadRangeEnd.trailRangeStart { + box-shadow: + -2.5 * $dayMargin 0 0 $dayLeadBackground, + 2.5 * $dayMargin 0 0 $existingLeadBackground !important; + } + + /* Special case: trailRangeEnd on existingBookingLeadStart */ + /* Right shadow should be pastel green to match the existingBookingLead to the right */ + &.trailRangeEnd { + background: $existingLeadBackground !important; /* Green base fills the corners */ + border-radius: 0 !important; /* Right-side radius */ + position: relative; + z-index: 1; + + box-shadow: + -2.5 * $dayMargin 0 0 $trailClashLead, + 2.5 * $dayMargin 0 0 $existingLeadBackground !important; + + &::before { + content: ""; + position: absolute; + top: 0; + left: -1px; + right: 0px; + bottom: 0; + background: $trailClashLead; /* Olive collision color */ + border-radius: 0 50px 50px 0; + z-index: -1; + } + + display: flex; + align-items: center; + justify-content: center; + } + } + &.existingBookingLead { - /* Existing booking's lead period (preparation time before their booking starts) */ - /* Use diagonal stripes to distinguish from new booking's lead period */ - background: repeating-linear-gradient( - 45deg, - #e6d4f5, - #e6d4f5 10px, - #f0e6f8 10px, - #f0e6f8 20px - ); - opacity: 0.7; + background: $existingLeadBackground; /* Pastel green */ + box-shadow: + -2.5 * $dayMargin 0 0 $existingLeadBackground, + 2.5 * $dayMargin 0 0 $existingLeadBackground; + } + + /* New booking trail overlaps with existing booking lead */ + &.trailRange.existingBookingLead { + background: $trailClashLead !important; /* Light olive (orange + green merge) */ + box-shadow: + -2.5 * $dayMargin 0 0 $trailClashLead, + 2.5 * $dayMargin 0 0 $trailClashLead; + } + + &.trailRangeEnd.existingBookingLead { + background: $existingLeadBackground !important; /* Base fills corners with Existing Lead Green */ + border-radius: 0 !important; + position: relative; + z-index: 1; + + /* Shadows: Left matches the previous zone, Right matches the Green zone */ + box-shadow: + -2.5 * $dayMargin 0 0 $trailClashLead, + 2.5 * $dayMargin 0 0 $existingLeadBackground !important; + + &::before { + content: ""; + position: absolute; + top: 0; + right: 0; + left: -1px; + bottom: 0; + background: $trailClashLead; /* Light olive overlap color */ + border-radius: 0 50px 50px 0; + z-index: -1; + } + + display: flex; + align-items: center; + justify-content: center; + } + + /* Existing booking's trail period (pastel blue - processing time after their booking) */ + &.existingBookingTrailEnd { + border-radius: 0 50px 50px 0; + + /* Remove left rounding if it meets new booking lead end */ + &.leadRange { + border-radius: 0; + } + + /* Special case: leadRangeEnd + trailRangeStart on existingBookingTrailEnd */ + /* Left shadow should be lavender to match the leadRange.existingBookingTrail to the left */ + &.leadRangeEnd.trailRangeStart { + box-shadow: + -2.5 * $dayMargin 0 0 $leadClashTrail, + 2.5 * $dayMargin 0 0 $existingTrailBackground !important; + } } &.existingBookingTrail { - /* Existing booking's trail period (processing time after their booking ends) */ - /* Use diagonal stripes to distinguish from new booking's trail period */ - background: repeating-linear-gradient( - 45deg, - #fcd4e6, - #fcd4e6 10px, - #ffe6f0 10px, - #ffe6f0 20px - ); - opacity: 0.7; + background: $existingTrailBackground; /* Pastel blue */ + box-shadow: + -2.5 * $dayMargin 0 0 $existingTrailBackground, + 2.5 * $dayMargin 0 0 $existingTrailBackground; + } + + /* New booking lead overlaps with existing booking trail */ + &.leadRange.existingBookingTrail { + background: $leadClashTrail !important; /* Lavender (pink + blue merge) */ + box-shadow: + -2.5 * $dayMargin 0 0 $leadClashTrail, + 2.5 * $dayMargin 0 0 $leadClashTrail; + } + + &.leadRangeStart.existingBookingTrail { + background: $existingTrailBackground !important; /* Blue base fills the top/bottom left corners */ + border-radius: 0 !important; /* Base cell must stay square */ + position: relative; + z-index: 1; + + /* Shadows: Left is Blue, Right is Purple */ + box-shadow: + -2.5 * $dayMargin 0 0 $existingTrailBackground, + 2.5 * $dayMargin 0 0 $leadClashTrail !important; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: -1px; + bottom: 0; + background: $leadClashTrail; /* Lavender */ + border-radius: 50px 0 0 50px; + z-index: -1; + } + + display: flex; + align-items: center; + justify-content: center; } } .input-warning { - background-color: #FF9; + background-color: #ff9; border-color: #900; } @@ -1024,14 +1160,14 @@ label, .main, main { & > .row > div > aside { - margin-left: -.75rem; + margin-left: -0.75rem; } } #login_controls { - padding: .4em .5em; + padding: 0.4em 0.5em; position: absolute; - right: .5em; + right: 0.5em; } ul { @@ -1085,7 +1221,7 @@ ol { } .cart-controls { - border-top: 1px solid #E8E8E8; + border-top: 1px solid #e8e8e8; padding: 7px 0; } @@ -1124,11 +1260,11 @@ fieldset { } &.standard { - background-color: #F4F8F9 !important; + background-color: #f4f8f9 !important; } &.contrast { - background-color: #F3F3F3 !important; + background-color: #f3f3f3 !important; } &.action { @@ -1151,21 +1287,21 @@ fieldset { label { &.hint { display: block; - margin-bottom: .5em; + margin-bottom: 0.5em; } } select { font-size: 120%; max-width: 50%; - padding: .5em 0; + padding: 0.5em 0; } } &.brief { div { &.hint { - margin-bottom: .4em; + margin-bottom: 0.4em; } } @@ -1186,12 +1322,12 @@ fieldset { select, .select2-container { display: block; - margin-top: .5em; + margin-top: 0.5em; } } li { - margin-top: .5em; + margin-top: 0.5em; &:first-child { margin-top: 0; @@ -1231,7 +1367,7 @@ fieldset { ol { li { list-style-type: none; - padding: .3em 0; + padding: 0.3em 0; } } @@ -1253,25 +1389,25 @@ fieldset { legend { &.collapsed, &.expanded { - border: 1px solid #FFF; - margin-left: -.7em; - margin-top: -.7em; - padding: .7em; + border: 1px solid #fff; + margin-left: -0.7em; + margin-top: -0.7em; + padding: 0.7em; &:hover { - border: 1px solid #6FAF44; + border: 1px solid #6faf44; cursor: pointer; } i { - color: #4C7AA8; + color: #4c7aa8; font-size: 80%; - padding-right: .2rem; + padding-right: 0.2rem; } } &.collapsed { - margin-bottom: -.5em; + margin-bottom: -0.5em; i.fa.fa-caret-down::before { content: "\f0da"; @@ -1292,7 +1428,7 @@ details { } #floating-save { - background-color: rgba( 185, 216, 217, .6 ); + background-color: rgba(185, 216, 217, 0.6); bottom: 3%; position: fixed; right: 1%; @@ -1319,7 +1455,7 @@ dt { dd { font-size: 90%; font-weight: normal; - padding: .2em .2em .2em 2.5em; + padding: 0.2em 0.2em 0.2em 2.5em; } #disabled { @@ -1339,10 +1475,10 @@ dd { } .patroninfo { - background-color: #E6E6E6; + background-color: #e6e6e6; color: #000; left: -10px; - margin-right: .5rem; + margin-right: 0.5rem; padding-bottom: 1rem; padding-top: 1rem; width: 100%; @@ -1351,7 +1487,7 @@ dd { color: #000; font-weight: bold; margin-bottom: 0; - padding: .5em .9em; + padding: 0.5em 0.9em; text-align: left; &:empty { @@ -1394,8 +1530,8 @@ dd { .patroninfo-heading { clear: both; - margin-bottom: .3em; - padding: .5em; + margin-bottom: 0.3em; + padding: 0.5em; h3 { display: inline-block; @@ -1409,12 +1545,12 @@ dd { /* Patron image */ .patronimage-container { - padding: .2em; + padding: 0.2em; position: relative; &:hover { .patronimage { - opacity: .8; + opacity: 0.8; } .patronimage-controls { @@ -1424,15 +1560,16 @@ dd { } .patronimage { - border: 1px solid #EEE; + border: 1px solid #eee; display: block; margin: auto; max-width: 160px; opacity: 1; - transition: .2s ease; + transition: 0.2s ease; &.empty { - background: transparent url( "../img/patron-blank.min.svg" ) center 5px no-repeat; + background: transparent url("../img/patron-blank.min.svg") center 5px + no-repeat; height: 125px; padding: 0; min-width: 85px; @@ -1446,8 +1583,8 @@ dd { position: absolute; text-align: center; top: 80%; - transform: translate( -50%, -50% ); - transition: .5s ease; + transform: translate(-50%, -50%); + transition: 0.5s ease; } .patronimage-control { @@ -1465,7 +1602,7 @@ dd { box-shadow: none; color: $green-text-color; font-size: 100%; - padding: .3em; + padding: 0.3em; &:hover { text-decoration: underline; @@ -1475,8 +1612,8 @@ dd { .patronviews { border-right: 1px solid #000; border-top: 1px solid #000; - margin-bottom: .5em; - padding: .5em 0; + margin-bottom: 0.5em; + padding: 0.5em 0; } .column-tool { @@ -1490,7 +1627,7 @@ dd { .readonly, input[type="text"]:read-only { - background: #EEE url( "../img/locked.png" ) center left no-repeat; + background: #eee url("../img/locked.png") center left no-repeat; border-style: inset; border-width: 1px; cursor: default; @@ -1509,11 +1646,11 @@ input[type="text"]:read-only:focus { } .subfield_not_filled { - background-color: #FFFF99; + background-color: #ffff99; } .important_subfield_not_filled { - background-color: #FFFFCC; + background-color: #ffffcc; } .content_hidden { @@ -1563,7 +1700,7 @@ i { } &.warn { - color: #FFA500; + color: #ffa500; } &.fa-main-heading-a { @@ -1582,7 +1719,7 @@ i { */ .item_status { - padding: .2rem 0; + padding: 0.2rem 0; &:first-child { padding-top: 0; @@ -1591,7 +1728,7 @@ i { .circ-setting { font-size: 95%; - padding: .3em 0; + padding: 0.3em 0; input { vertical-align: middle; @@ -1609,7 +1746,7 @@ i { .circ-settings { border-radius: 0; - border-top: 2px solid #EEE; + border-top: 2px solid #eee; display: none; margin-left: -1em; margin-right: -1em; @@ -1619,7 +1756,7 @@ i { #show-circ-settings { display: inline; - opacity: .5; + opacity: 0.5; position: relative; right: 25px; @@ -1628,7 +1765,7 @@ i { } a { - color: rgb( 105, 105, 105 ); + color: rgb(105, 105, 105); &:hover { text-decoration: none; @@ -1637,15 +1774,15 @@ i { } .checkin-active-setting { - background-color: #FFC; + background-color: #ffc; border-radius: 3px; - box-shadow: 1px 1px 2px 0 rgba( 102, 102, 102, .5 ); - margin: .5em; - padding: .5em; + box-shadow: 1px 1px 2px 0 rgba(102, 102, 102, 0.5); + margin: 0.5em; + padding: 0.5em; } .form-control-group { - margin-bottom: .5rem; + margin-bottom: 0.5rem; white-space: nowrap; } @@ -1673,7 +1810,7 @@ i { .circmessage { li { list-style: $nav-menu-bullet; - margin-bottom: .4em; + margin-bottom: 0.4em; } } @@ -1691,10 +1828,10 @@ i { button, a.approve { - background: #FFF none; + background: #fff none; border: 1px solid #555; - margin: .4em; - padding: .4em; + margin: 0.4em; + padding: 0.4em; white-space: pre-line; &:active { @@ -1702,24 +1839,24 @@ i { } &:hover { - background-color: #FFC; + background-color: #ffc; } } input { - background-color: #FFFFFF; - margin: .4em; - padding: .4em; + background-color: #ffffff; + margin: 0.4em; + padding: 0.4em; &:hover { - background-color: #FFC; + background-color: #ffc; } &[type="submit"] { - background: #FFF none; + background: #fff none; &.approve { - background-color: #FEC32C; + background-color: #fec32c; background-image: none; border: 0; color: #000; @@ -1728,7 +1865,7 @@ i { &:hover, &:active, &:focus { - background-color: #FEC22C9F; + background-color: #fec22c9f; } } @@ -1754,7 +1891,7 @@ i { white-space: nowrap; &:hover { - background-color: #F1F1F1; + background-color: #f1f1f1; border: #696969 double 1px; font-weight: bold; text-decoration: none; @@ -1780,7 +1917,7 @@ i { } table { - margin: .5em auto; + margin: 0.5em auto; td { text-align: left; @@ -1799,13 +1936,15 @@ i { } ul + h4 { - margin-top: .7em; + margin-top: 0.7em; } } &.alert-warning { - fieldset:not( .bg-danger ):not( .bg-warning ):not( .bg-info ):not( .bg-success ):not( .bg-primary ):not(.action) { - background-color: rgba( 255, 255, 255, .5 ); + fieldset:not(.bg-danger):not(.bg-warning):not(.bg-info):not( + .bg-success + ):not(.bg-primary):not(.action) { + background-color: rgba(255, 255, 255, 0.5); margin: 1rem; } @@ -1828,7 +1967,7 @@ i { .approve, .success { - background-color: #FEC32C; + background-color: #fec32c; i { &.fa { @@ -1848,7 +1987,7 @@ i { .new { i { &.fa { - color: #425FAF; + color: #425faf; } } } @@ -1856,8 +1995,8 @@ i { .warning { i { &.fa-exclamation-triangle { - color: #FFD700; - text-shadow: 0 -1px 0 rgba( 0, 0, 0, .3 ); + color: #ffd700; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); } } } @@ -1867,11 +2006,11 @@ i { } .missing { - background-color: #FFFFCC; + background-color: #ffffcc; } .term { - background-color: #FFC; + background-color: #ffc; color: #990000; } @@ -1917,7 +2056,8 @@ li { } } -.patronbriefinfo, .patroninfo-section { +.patronbriefinfo, +.patroninfo-section { li { overflow: hidden; text-overflow: ellipsis; @@ -1967,16 +2107,16 @@ li { } .remove { - border-top: 1px solid #EEE; + border-top: 1px solid #eee; display: block; font-size: 90%; margin: 4px -4px 2px -4px; - padding-top: .5em; + padding-top: 0.5em; text-align: center; } & + p { - border-top: 1px solid #EEE; + border-top: 1px solid #eee; margin-top: 1em; padding-top: 1em; } @@ -1986,8 +2126,8 @@ li { #tbl_cash_register_stats_wrapper, #resulttable_wrapper, #numberpatternst_wrapper { - background-color: #FFFFFF; - box-shadow: 8px 8px 12px rgba( 170, 170, 170, .356 ); + background-color: #ffffff; + box-shadow: 8px 8px 12px rgba(170, 170, 170, 0.356); margin-top: 20px; padding: 20px; } @@ -2001,7 +2141,7 @@ li { } #searchresults { - background-color: #FFFFFF; + background-color: #ffffff; margin-bottom: 1rem; margin-top: 20px; min-width: 100%; @@ -2015,7 +2155,7 @@ li { h3 { color: #696969; margin: 0; - padding-bottom: .7em; + padding-bottom: 0.7em; } td { @@ -2024,8 +2164,8 @@ li { clear: left; color: #000; font-size: 90%; - list-style: url( "../img/item-bullet.svg" ); - padding: .2em 0; + list-style: url("../img/item-bullet.svg"); + padding: 0.2em 0; top: 100%; &.result_itype_image { @@ -2100,19 +2240,19 @@ li { position: sticky; top: -1px; z-index: 999; - background-color: #F3F4F4; - box-shadow: 0 0 2px 1px rgba( 0, 0, 0, .2 ); + background-color: #f3f4f4; + box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2); color: #696969; display: block; font-size: 80%; - margin-bottom: .5em; - margin-top: .5em; + margin-bottom: 0.5em; + margin-top: 0.5em; padding: 5px; width: 100%; &.floating { border-radius: 0; - box-shadow: 0 0 2px 1px rgba( 0, 0, 0, .4 ); + box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4); margin-bottom: 0; margin-top: 0; z-index: 100; @@ -2121,7 +2261,7 @@ li { .btn-group { > .btn { &:first-child { - margin-left: .7em; + margin-left: 0.7em; } } } @@ -2144,15 +2284,18 @@ li { } #table_search_selections { - background-color: lighten( $background-color-primary, 60 ); + background-color: lighten($background-color-primary, 60); border: 1px solid $background-color-primary; - border-color: lighten( $background-color-primary, 30 ) lighten( $background-color-primary, 50 ) lighten( $background-color-primary, 50 ) lighten( $background-color-primary, 30 ); + border-color: lighten($background-color-primary, 30) + lighten($background-color-primary, 50) + lighten($background-color-primary, 50) + lighten($background-color-primary, 30); border-radius: 4px; color: #333; display: inline-block; font-size: 11px; line-height: 1.5; - margin-left: .7em; + margin-left: 0.7em; padding: 5px 10px; text-align: center; vertical-align: middle; @@ -2170,15 +2313,15 @@ li { } #search-facets { - background-color: #E6E6E6; + background-color: #e6e6e6; h4 { background-color: $background-color-primary; border-radius: 0 4px 0 0; - color: #FFFFFF; + color: #ffffff; font-size: 100%; margin: 0; - padding: .4em .2em; + padding: 0.4em 0.2em; text-align: center; } @@ -2197,7 +2340,7 @@ li { font-size: 85%; font-weight: normal; margin-bottom: 2px; - padding: .1em .2em; + padding: 0.1em 0.2em; } &.showmore { @@ -2216,7 +2359,7 @@ li { } #biblio-cover-slider { - border: 1px solid #BFD9B9; + border: 1px solid #bfd9b9; border-radius: 3px; margin: 0 5px; min-height: 175px; @@ -2224,18 +2367,18 @@ li { } .cover-slides { - background: #FFF url( "../img/spinner-small.gif" ) center center no-repeat; + background: #fff url("../img/spinner-small.gif") center center no-repeat; .hint { font-size: 90%; - padding: .5em 0; + padding: 0.5em 0; } a { &.nav-active { &:link, &:visited { - color: #85CA11; + color: #85ca11; } } } @@ -2248,7 +2391,7 @@ td { a, button { display: inline-block; - margin-left: .3rem; + margin-left: 0.3rem; &:first-child { margin-left: 0; @@ -2257,7 +2400,7 @@ td { } &.bookcoverimg { - background: #FFF url( "../img/spinner-small.gif" ) center center no-repeat; + background: #fff url("../img/spinner-small.gif") center center no-repeat; min-width: 120px; text-align: center; } @@ -2287,7 +2430,7 @@ td { box-shadow: none; color: $green-text-color; font-size: 100%; - padding: .3em; + padding: 0.3em; &:hover { text-decoration: underline; @@ -2328,7 +2471,7 @@ td { #CheckPending { color: $green-text-color; font-weight: normal; - margin: 0 .5em 0 0; + margin: 0 0.5em 0 0; } .lost, @@ -2344,7 +2487,7 @@ td { } td.bundle { - background-color: #FFC !important; + background-color: #ffc !important; } .datedue { @@ -2365,9 +2508,9 @@ td.bundle { } #mainuserblock { - border: 1px solid #E8E8E8; - margin-top: .5em; - padding: .5em; + border: 1px solid #e8e8e8; + margin-top: 0.5em; + padding: 0.5em; } .labeledmarc-table { @@ -2394,14 +2537,14 @@ td.bundle { border: 0; font-family: $font-monospace; font-size: 95%; - margin: .7em 0 0; + margin: 0.7em 0 0; } tbody { tr { - &:nth-child( 2n+1 ) { + &:nth-child(2n + 1) { td { - background-color: #FFFFFF; + background-color: #ffffff; } } } @@ -2414,7 +2557,7 @@ td.bundle { } th { - background-color: #FFFFFF; + background-color: #ffffff; border: 0; padding: 2px; text-align: left; @@ -2443,20 +2586,19 @@ td.bundle { } &.alert { - background: #FFFADE none; - border-color: #E0C726; + background: #fffade none; + border-color: #e0c726; } &.message { - background: #E8EDF6 none; - border-color: #A4BEDD; + background: #e8edf6 none; + border-color: #a4bedd; } } &.modal-wide { width: 80%; } - } .modal-full { @@ -2472,7 +2614,6 @@ td.bundle { margin: 0; } - .modal-header { border-bottom: 1px solid $background-color-secondary; @@ -2482,12 +2623,12 @@ td.bundle { } .modal-body { - background-color: #FFF; + background-color: #fff; overflow-y: auto; fieldset, ol { - background-color: #FFF; + background-color: #fff; border: 0; margin: 0; padding: 0; @@ -2511,7 +2652,7 @@ td.bundle { } .basicModal { - background: #FFF; + background: #fff; left: 50%; margin-left: -300px; max-height: 100%; @@ -2523,12 +2664,12 @@ td.bundle { pointer-events: none; position: fixed; top: 25%; - transition: all .1s ease-out; + transition: all 0.1s ease-out; z-index: 1100; } .basicModal.show { - box-shadow: 0 5px 15px rgba( 0, 0, 0, .5 ); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); opacity: 1; pointer-events: auto; } @@ -2545,9 +2686,9 @@ td.bundle { } #cartDetails { - background-color: #352C2E; + background-color: #352c2e; box-shadow: 1px 1px 3px 0 #666; - color: #FFFFFF; + color: #ffffff; display: none; margin: 0; padding: 10px; @@ -2579,7 +2720,7 @@ td.bundle { .results_summary { color: #202020; display: block; - padding: 0 0 .5em; + padding: 0 0 0.5em; a { font-weight: normal; @@ -2604,15 +2745,15 @@ td.bundle { a, span { - background-color: lighten( $background-color-secondary, 50 ); - border: 1px solid lighten( $background-color-secondary, 15 ); + background-color: lighten($background-color-secondary, 50); + border: 1px solid lighten($background-color-secondary, 15); border-radius: 4px; font-weight: bold; - padding: .1em .4em; + padding: 0.1em 0.4em; text-decoration: none; &:hover { - background-color: lighten( $background-color-secondary, 40 ); + background-color: lighten($background-color-secondary, 40); } } } @@ -2626,7 +2767,7 @@ td.bundle { position: relative; .export_ok { - background: #E3E3E3 none; + background: #e3e3e3 none; border: 0; cursor: pointer; margin-left: 20px; @@ -2634,8 +2775,8 @@ td.bundle { } .import_export_options { - background: #FFFFFF; - border: 1px solid #CDCDCD; + background: #ffffff; + border: 1px solid #cdcdcd; left: 60px; padding: 10px; position: absolute; @@ -2646,7 +2787,7 @@ td.bundle { } .import_export_options { - background: #E3E3E3 none; + background: #e3e3e3 none; border: 0; cursor: pointer; margin-left: 20px; @@ -2660,7 +2801,7 @@ td.bundle { .form_import { .input_import { - border: 1px solid #BCBCBC; + border: 1px solid #bcbcbc; } } @@ -2700,8 +2841,8 @@ td.bundle { } td { - border: 1px solid #EEE; - padding: .3em .4em; + border: 1px solid #eee; + padding: 0.3em 0.4em; } } } @@ -2741,13 +2882,13 @@ td.bundle { top: 0; a { - background-color: #EEE; + background-color: #eee; border-radius: 0 0 0 5px; - color: #CCC; + color: #ccc; display: block; font-size: 160%; font-weight: bold; - padding: 0 .7em .2em; + padding: 0 0.7em 0.2em; text-decoration: none; text-shadow: 0 -1px 0 #666; @@ -2763,13 +2904,13 @@ td.bundle { top: 0; a { - background-color: #EEE; + background-color: #eee; border-radius: 0 0 0 5px; - color: #CCC; + color: #ccc; display: block; font-size: 160%; font-weight: bold; - padding: 0 .7em .2em; + padding: 0 0.7em 0.2em; text-decoration: none; text-shadow: 0 -1px 0 #666; @@ -2780,8 +2921,8 @@ td.bundle { } .no-image { - background-color: #FFFFFF; - border: 1px solid #AAAAAA; + background-color: #ffffff; + border: 1px solid #aaaaaa; border-radius: 3px; color: #979797; display: block; @@ -2796,14 +2937,14 @@ td.bundle { #acqui_order_supplierlist { .supplier { & + .supplier { - border-top: 1px solid #EEEEEE; + border-top: 1px solid #eeeeee; margin-top: 1em; } } .suppliername { display: inline-block; - margin: .5em 1em .5em 0; + margin: 0.5em 1em 0.5em 0; &.inactive { color: #888; @@ -2827,7 +2968,7 @@ td.bundle { // Override core jQueryUI widgets .ui-widget-content { - background: #FFFFFF none; + background: #ffffff none; border: 1px solid $background-color-secondary; border-radius: 4px; color: #222222; @@ -2835,7 +2976,7 @@ td.bundle { // Override jQuery Autocomplete .ui-autocomplete { - box-shadow: 0 6px 12px rgba( 0, 0, 0, .175 ); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); cursor: default; position: absolute; z-index: 2000; @@ -2851,10 +2992,10 @@ td.bundle { list-style-type: none; &.ui-menu-item { - padding: 5px 1em 5px .4em; + padding: 5px 1em 5px 0.4em; &:hover { - background: #E3F1DF none; + background: #e3f1df none; color: #212121; font-weight: normal; } @@ -2870,7 +3011,7 @@ td.bundle { .ui-state-active, .ui-state-focus { - background: #E3F1DF none; + background: #e3f1df none; color: #212121; font-weight: normal; margin: 0; @@ -2885,7 +3026,7 @@ td.bundle { } .ui-autocomplete-loading { - background: #FFF url( "../img/spinner-small.gif" ) right center no-repeat; + background: #fff url("../img/spinner-small.gif") right center no-repeat; } .patron-detail-autocomplete-selection { @@ -2897,7 +3038,7 @@ td.bundle { } fieldset > .toptabs { - background-color: #F3F4F4; + background-color: #f3f4f4; padding: 1em; } @@ -2932,7 +3073,7 @@ fieldset > .toptabs { } .commentline { - border-bottom: 1px solid #CCC; + border-bottom: 1px solid #ccc; .btn-toolbar { margin-bottom: 0; @@ -2981,7 +3122,7 @@ fieldset > .toptabs { &.jstree-hovered { background: transparent none; box-shadow: none; - color: darken( $green-text-color, 5 ); + color: darken($green-text-color, 5); } &.jstree-clicked { @@ -3008,11 +3149,11 @@ fieldset > .toptabs { } .pluginname { - background-color: #E3F1DF; + background-color: #e3f1df; cursor: move; - margin: .3em; + margin: 0.3em; padding-bottom: 4px; - padding-left: .2em; + padding-left: 0.2em; .ui-icon { float: right; @@ -3020,7 +3161,7 @@ fieldset > .toptabs { } .plugindesc { - padding: .4em; + padding: 0.4em; } .ui-sortable-placeholder { @@ -3047,7 +3188,7 @@ video { // Bootstrap overrides .dropdown-header { - border-top: 1px solid #EEE; + border-top: 1px solid #eee; color: #000; font-weight: bold; margin-top: 5px; @@ -3073,7 +3214,7 @@ nav { font-family: "Font Awesome 6 Free"; font-size: 12px; font-style: normal; - padding-right: .3em; + padding-right: 0.3em; } &:hover { @@ -3092,14 +3233,16 @@ nav { & + .breadcrumb-item { &::before { - background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1yaWdodCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy4zNyAwbDUuMzUgNy4zYy4yLjIuMi41MSAwIC43bC01LjM4IDhoLTQuMmw1LjY0LTguMzVMMy4xMy4wMXoiLz48L3N2Zz4=") 50% 50% no-repeat; + background: transparent + url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1yaWdodCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy4zNyAwbDUuMzUgNy4zYy4yLjIuMi41MSAwIC43bC01LjM4IDhoLTQuMmw1LjY0LTguMzVMMy4xMy4wMXoiLz48L3N2Zz4=") + 50% 50% no-repeat; background-size: 8px; content: ""; display: inline-block; float: none; - height: .8em; - margin-right: .3rem; - width: .8em; + height: 0.8em; + margin-right: 0.3rem; + width: 0.8em; } } @@ -3121,7 +3264,7 @@ nav { } .pagination { - margin: .5em 0; + margin: 0.5em 0; } button, @@ -3130,7 +3273,7 @@ button, &.btn-primary { &.dropdown-toggle { - border-left: 1px solid darken( saturate( $btn-primary, 15 ), 15 ); + border-left: 1px solid darken(saturate($btn-primary, 15), 15); } } } @@ -3144,16 +3287,16 @@ button, /* Bootstrap Collapse */ .panel { - background: #F7F9F6 none; + background: #f7f9f6 none; box-shadow: none; &:hover { - background: #E3F1DF none; + background: #e3f1df none; } } .panel-collapse { - background: #FFF none; + background: #fff none; } .panel-title { @@ -3164,7 +3307,7 @@ button, border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; - padding: .2rem 1rem; + padding: 0.2rem 1rem; &::before { content: "\f0d7"; @@ -3174,7 +3317,7 @@ button, } &:hover { - background: #E3F1DF none; + background: #e3f1df none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @@ -3188,7 +3331,7 @@ button, } &:hover { - background: #E3F1DF none; + background: #e3f1df none; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } @@ -3197,7 +3340,7 @@ button, } .panel-default { - border: 1px solid #BFD9B9; + border: 1px solid #bfd9b9; > .panel-heading { background: transparent none; @@ -3209,11 +3352,11 @@ button, + .panel-collapse { &.collapse { - border-top: 1px solid #DBE9D7 + border-top: 1px solid #dbe9d7; } > .panel-body { - border-top-color: #BFD9B9; + border-top-color: #bfd9b9; padding: 1rem; } } @@ -3237,7 +3380,7 @@ button, .navbar { &.fixed-bottom { .nav-item { - border-right: 1px solid #CCC; + border-right: 1px solid #ccc; &:last-child { border-right: 0; @@ -3249,13 +3392,13 @@ button, .tooltip { &.bottom { .tooltip-arrow { - border-bottom-color: #EEE; + border-bottom-color: #eee; } .tooltip-inner { - background-color: #FFFFFF; - border: 1px solid rgba( 0, 0, 0, .2 ); - box-shadow: 0 5px 10px rgba( 0, 0, 0, .2 ); + background-color: #ffffff; + border: 1px solid rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); color: #000; font-size: 120%; padding: 1em; @@ -3264,8 +3407,8 @@ button, } .separator { - color: #BFBFBF; - padding: 0 .2em; + color: #bfbfbf; + padding: 0 0.2em; } .close { @@ -3296,7 +3439,7 @@ label { } &.disabled { - color: #CCC; + color: #ccc; cursor: not-allowed; } } @@ -3325,11 +3468,11 @@ label { font-size: 13px; } - > .btn:first-child:not( :last-child, .dropdown-toggle ) { - border-right: 1px solid #CCC; + > .btn:first-child:not(:last-child, .dropdown-toggle) { + border-right: 1px solid #ccc; &.btn-primary { - border-right: 1px solid darken( saturate( $btn-primary, 15 ), 15 ); + border-right: 1px solid darken(saturate($btn-primary, 15), 15); } } } @@ -3370,7 +3513,7 @@ code { } .tab-content { - background-color: #FFF; + background-color: #fff; border: 0; border-radius: 0; padding: 1em; @@ -3388,18 +3531,18 @@ code { } .nav-tabs { - padding: .2em 1.4em 0 0; + padding: 0.2em 1.4em 0 0; .nav-link { background-color: $background-color-primary; border-radius: 5px; - color: #FFF; + color: #fff; font-weight: bold; - margin: .2em .4em; + margin: 0.2em 0.4em; transition: none; .badge { - line-height: .6; + line-height: 0.6; } } } @@ -3417,11 +3560,11 @@ code { } #jobstatus { - margin: .4em; + margin: 0.4em; } #jobprogress { - background: url( "../img/progress.png" ) -300px 0 no-repeat; + background: url("../img/progress.png") -300px 0 no-repeat; border: 1px solid #666; display: inline-block; height: 10px; @@ -3429,7 +3572,7 @@ code { } .progress_panel { - border: 2px solid #EEE; + border: 2px solid #eee; border-radius: 5px; clear: both; font-size: 120%; @@ -3451,7 +3594,7 @@ progress { } span { - background-color: #ECFFEB; + background-color: #ecffeb; border-radius: 5px; display: inline-block; font-size: 75%; @@ -3460,7 +3603,7 @@ progress { white-space: nowrap; &.selected { - background-color: #D2FAD0; + background-color: #d2fad0; } } } @@ -3471,7 +3614,7 @@ progress { &[type="password"] { font-family: $font-monospace; font-size: 140%; - padding: .3em; + padding: 0.3em; } } } @@ -3485,7 +3628,7 @@ progress { } .tag_editor { - background: transparent url( "../img/edit-tag.png" ) top left no-repeat; + background: transparent url("../img/edit-tag.png") top left no-repeat; display: block; height: 16px; margin: 4px; @@ -3506,28 +3649,28 @@ progress { .browse-controls { margin-left: 1.1em; - margin-right: .5em; + margin-right: 0.5em; padding-bottom: 1em; padding-top: 1em; } #browse-return-to-results { - background-color: #E6E6E6; - border: 1px solid lighten( $background-color-primary, 30% ); + background-color: #e6e6e6; + border: 1px solid lighten($background-color-primary, 30%); border-bottom-width: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; display: block; - padding: .5em; + padding: 0.5em; text-align: center; } .browse-button { background-color: transparent; - border: 1px solid lighten( $background-color-primary, 30% ); + border: 1px solid lighten($background-color-primary, 30%); display: block; overflow: hidden; - padding: .4em .6em; + padding: 0.4em 0.6em; text-align: center; white-space: nowrap; width: 100%; @@ -3537,7 +3680,7 @@ a.browse-button { color: $green-text-color; &:hover { - background: #FFF; + background: #fff; } } @@ -3564,29 +3707,29 @@ span { &.required { color: $warning-text-color; font-style: italic; - margin-left: .5em; + margin-left: 0.5em; } &.important { - color: #EAC117; + color: #eac117; font-style: italic; - margin-left: .5em; + margin-left: 0.5em; } &[class*=" label-"] { - color: #FFF; + color: #fff; display: inline; font-size: 75%; font-weight: normal; - padding: .2em .6em .3em; + padding: 0.2em 0.6em 0.3em; } } .result-biblio-itemtype { float: right; font-size: 85%; - margin: .5em; - padding: .5em; + margin: 0.5em; + padding: 0.5em; text-align: center; img { @@ -3614,7 +3757,7 @@ span { tr { &.active { td { - background-color: #FFFFCC; + background-color: #ffffcc; } } } @@ -3626,8 +3769,8 @@ input.renew { .renewals-info { display: block; - font-size: .8em; - padding: .5em; + font-size: 0.8em; + padding: 0.5em; } .date-select { @@ -3641,7 +3784,7 @@ input.renew { } #transport-types { - padding-top: .5px; + padding-top: 0.5px; } #i18nMenu { @@ -3664,19 +3807,19 @@ input.renew { } .onsite-checkout-only { - background-color: rgba( 255, 242, 206, .5 ); - border: 1px solid #FFF2CE; + background-color: rgba(255, 242, 206, 0.5); + border: 1px solid #fff2ce; border-radius: 4px; } .branchgriditem { - background-color: #FFFFFF; - border: 1px solid #BFD9B9; + background-color: #ffffff; + border: 1px solid #bfd9b9; border-radius: 3px; display: table-cell; float: left; margin: 3px; - padding: .3em; + padding: 0.3em; } .branchgridrow { @@ -3697,21 +3840,21 @@ input.renew { } #new_rule { - background-color: #F4F8F9; - border: 2px solid #BFD9B9; + background-color: #f4f8f9; + border: 2px solid #bfd9b9; border-radius: 5px; display: none; - margin: .3em; - padding: .3em; + margin: 0.3em; + padding: 0.3em; } .blocks { - margin-bottom: .3em; + margin-bottom: 0.3em; } .remove_rule { font-size: 80%; - padding-left: .7em; + padding-left: 0.7em; } .underline { @@ -3731,11 +3874,11 @@ input.renew { } .form-message { - background-color: #FFF; - border: 1px solid #A4BEDD; + background-color: #fff; + border: 1px solid #a4bedd; border-radius: 5px; margin: 1em; - padding: .5em; + padding: 0.5em; } #pat_member { @@ -3745,7 +3888,7 @@ input.renew { } #fixedlengthbuilderaction { - border: 3px solid #E3F1DF; + border: 3px solid #e3f1df; left: 80%; padding: 5px; position: relative; @@ -3779,7 +3922,7 @@ input.renew { } .fetch-failed { - background-color: rgba( 255, 0, 0, .1 ); + background-color: rgba(255, 0, 0, 0.1); & > * { background-color: inherit; @@ -3808,8 +3951,8 @@ input.renew { } } - .metadata-row:not( :first-child ) { - margin-top: .5em; + .metadata-row:not(:first-child) { + margin-top: 0.5em; } .metadata-label { @@ -3854,7 +3997,7 @@ input.renew { } #dataPreviewLabel { - margin: .3em 0; + margin: 0.3em 0; } .bg-info { @@ -3906,7 +4049,7 @@ input.renew { #search-summary { position: absolute; top: 50%; - transform: translateY( -50% ); + transform: translateY(-50%); } #generic_confirm_search_count { @@ -4042,7 +4185,7 @@ input.renew { #stockrotation .stage, #catalog_stockrotation .stage { - background-color: rgba( 0, 0, 0, .1 ); + background-color: rgba(0, 0, 0, 0.1); border-radius: 5px; display: inline-block; margin: 3px 0 3px 0; @@ -4069,7 +4212,7 @@ input.renew { } .drag_placeholder { - border: 1px dotted #AAA; + border: 1px dotted #aaa; height: 2em; } @@ -4101,8 +4244,8 @@ input.renew { display: inline-block; } - li:nth-child( odd ) { - background-color: #F3F3F3; + li:nth-child(odd) { + background-color: #f3f3f3; } h3 { @@ -4110,8 +4253,8 @@ input.renew { } #ajax_status { - background: #F3F3F3; - border: 1px solid #BCBCBC; + background: #f3f3f3; + border: 1px solid #bcbcbc; border-radius: 5px; display: inline-block; margin-left: 10px; @@ -4134,14 +4277,14 @@ input.renew { } .loggedin-menu-label { - color: #FFFFFF; + color: #ffffff; font-size: 12px; line-height: 1.4286; padding: 4px 12px; white-space: nowrap; span { - color: #FFFFFF; + color: #ffffff; font-weight: bold; left: 15px; top: 0; @@ -4163,7 +4306,7 @@ input.renew { margin-bottom: 15px; a { - background-color: #E0E0E0; + background-color: #e0e0e0; border-radius: 6px; color: #101010; display: block; @@ -4173,7 +4316,7 @@ input.renew { &:hover { background-color: $background-color-primary; - color: #FFF; + color: #fff; text-decoration: none; } } @@ -4182,12 +4325,12 @@ input.renew { .about { h2 { - border-bottom: 1px solid #BFD9B9; - margin: .5em 0; - padding: .5em 0; + border-bottom: 1px solid #bfd9b9; + margin: 0.5em 0; + padding: 0.5em 0; & + p { - margin-left: .5rem; + margin-left: 0.5rem; } } } @@ -4250,7 +4393,6 @@ input.renew { } } } - } .slider { @@ -4260,9 +4402,9 @@ input.renew { left: 0; right: 0; bottom: 0; - background-color: #CCC; - -webkit-transition: .4s; - transition: .4s; + background-color: #ccc; + -webkit-transition: 0.4s; + transition: 0.4s; border-radius: 34px; &::before { @@ -4273,8 +4415,8 @@ input.renew { left: 4px; bottom: 4px; background-color: white; - -webkit-transition: .4s; - transition: .4s; + -webkit-transition: 0.4s; + transition: 0.4s; border-radius: 34px; text-align: center; font-weight: bold; @@ -4333,7 +4475,7 @@ input.renew { } .permission-highlight { - background-color: #FFC !important; + background-color: #ffc !important; } .togglechildren_on, @@ -4357,7 +4499,7 @@ input.renew { } .parent { - border: 1px solid #DDD; + border: 1px solid #ddd; border-bottom-width: 0; padding: 5px; @@ -4365,20 +4507,20 @@ input.renew { border-bottom-width: 1px; } - &:nth-child( odd ) { - background-color: #F8F8F8; + &:nth-child(odd) { + background-color: #f8f8f8; } } .superlibrarian-hint { color: #000; - padding: .2em 0; + padding: 0.2em 0; text-indent: 2em; } .child-flags { - background-color: #FFF; - border: 1px solid #DDD; + background-color: #fff; + border: 1px solid #ddd; border-bottom-width: 0; margin: 0 5px 0 20px; padding: 5px; @@ -4391,8 +4533,8 @@ input.renew { border-bottom-width: 1px; } - &:nth-child( odd ) { - background-color: #EEE; + &:nth-child(odd) { + background-color: #eee; } } @@ -4408,7 +4550,7 @@ div .suggestion_note { padding: 2px 0 0 0; i { - color: #CCC; + color: #ccc; } } @@ -4423,26 +4565,29 @@ div .suggestion_note { font-weight: bold; &.text-bg-info { - background-color: #9BD6E8; + background-color: #9bd6e8; } &.text-bg-danger { - background-color: #FF7873; + background-color: #ff7873; } &:has( span:empty + span:empty ), /* If the element contains two empty spans */ - &:has( span:only-child:empty ) { /* If the element contains only one span and it is empty */ + &:has( span:only-child:empty ) { + /* If the element contains only one span and it is empty */ background-color: transparent; padding: 0; } - &:has( span + span:empty ) { /* If the element has a non-empty span followed by an empty one, reset style */ - background-color: #9BD6E8; + &:has(span + span:empty) { + /* If the element has a non-empty span followed by an empty one, reset style */ + background-color: #9bd6e8; } } } -.count-active { /* Add separator between two counts in a tab */ +.count-active { + /* Add separator between two counts in a tab */ & + .count-inactive { &:empty::before { content: ""; @@ -4455,24 +4600,24 @@ div .suggestion_note { } .ac-library { - background-color: #EEE !important; + background-color: #eee !important; font-weight: normal; color: #000; } .ac-currentlibrary { .ac-library { - background-color: #E6FCB7 !important; + background-color: #e6fcb7 !important; font-weight: bold; } } .badge + .badge { - margin-left: .3rem; + margin-left: 0.3rem; } .currentlibrary { - background-color: #E6FCB7 !important; + background-color: #e6fcb7 !important; display: inline-block; padding: 2px 4px; } @@ -4498,18 +4643,18 @@ div .suggestion_note { .results_available_count { font-weight: bold; - margin-bottom: .5em; + margin-bottom: 0.5em; } .results_checkedout { color: #900; - margin: .3em 0; + margin: 0.3em 0; } .results_unavailable { color: #555; font-style: italic; - margin: .3em 0; + margin: 0.3em 0; } .result_item_details { @@ -4528,7 +4673,7 @@ div .suggestion_note { #camera, #output { - border: 8px solid #EDF4F6; + border: 8px solid #edf4f6; padding: 1em; } @@ -4543,14 +4688,14 @@ div .suggestion_note { flex-wrap: nowrap; div { - padding: 0 .5em; + padding: 0 0.5em; } } #koha_version, #koha_community { float: right; - margin: .5em; + margin: 0.5em; } #cookieConsentedJSItems { @@ -4562,7 +4707,7 @@ div .suggestion_note { } .cookieConsentedJSItem { - border: 1px solid #CCC; + border: 1px solid #ccc; margin-bottom: 30px; padding: 10px; } @@ -4593,9 +4738,9 @@ div .suggestion_note { /* Cookie consent bar */ #cookieConsentBar { align-items: center; - background: rgba( 0, 0, 0, .7 ); + background: rgba(0, 0, 0, 0.7); bottom: 0; - color: rgba( 255, 255, 255, .9 ); + color: rgba(255, 255, 255, 0.9); display: none; flex-wrap: wrap; left: 0; @@ -4606,14 +4751,14 @@ div .suggestion_note { a:link, a:visited { - color: #D7EBFF; + color: #d7ebff; } button { - margin-bottom: .5rem; - margin-top: .5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; - &:not( :last-child ) { + &:not(:last-child) { margin-right: 10px; } } @@ -4634,13 +4779,13 @@ div .suggestion_note { .consentModalItem { align-items: center; - border: 1px solid #CCC; + border: 1px solid #ccc; border-radius: 5px; display: flex; padding: 10px 20px; } - .consentModalItem:not( :last-child ) { + .consentModalItem:not(:last-child) { margin-bottom: 20px; } @@ -4660,20 +4805,20 @@ div .suggestion_note { .chocolat-wrapper { z-index: 1050; - --chocolat-icon-left: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 32 32'%3E%3Ccircle fill='%23408540' cx='16' cy='16' r='16' fill-opacity='.9'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.3' d='M15.3 20.7 10.7 16l4.6-4.7m7.4 4.7h-12'/%3E%3C/svg%3E" ); - --chocolat-icon-right: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle fill='%23408540' cx='16' cy='16' r='16' fill-opacity='.9'/%3E%3Cpath d='m16.7 11.3 4.6 4.7-4.6 4.7M9.3 16h12' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E" ); - --chocolat-icon-loader: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cg transform='translate(1 1)' stroke-width='2' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23000' cx='18' cy='18' r='18'/%3E%3Cpath d='M36 18C36 8 28 0 18 0' stroke='%236faf44'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E" ); - --chocolat-icon-close: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' stroke-linecap='round'%3E%3Ccircle fill='%23408540' cx='16' cy='16' r='16' fill-opacity='.9'/%3E%3Cpath d='m12 12 8 8m0-8-8 8' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E" ); + --chocolat-icon-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 32 32'%3E%3Ccircle fill='%23408540' cx='16' cy='16' r='16' fill-opacity='.9'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.3' d='M15.3 20.7 10.7 16l4.6-4.7m7.4 4.7h-12'/%3E%3C/svg%3E"); + --chocolat-icon-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle fill='%23408540' cx='16' cy='16' r='16' fill-opacity='.9'/%3E%3Cpath d='m16.7 11.3 4.6 4.7-4.6 4.7M9.3 16h12' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E"); + --chocolat-icon-loader: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cg transform='translate(1 1)' stroke-width='2' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23000' cx='18' cy='18' r='18'/%3E%3Cpath d='M36 18C36 8 28 0 18 0' stroke='%236faf44'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + --chocolat-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' stroke-linecap='round'%3E%3Ccircle fill='%23408540' cx='16' cy='16' r='16' fill-opacity='.9'/%3E%3Cpath d='m12 12 8 8m0-8-8 8' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E"); a:link, a:visited, a:hover, a:active { - color: #FFF; + color: #fff; } .chocolat-bottom { - background: rgba( 0, 0, 0, .7 ); + background: rgba(0, 0, 0, 0.7); } } @@ -4693,12 +4838,12 @@ div .suggestion_note { #setlibrary_panel { .setlibrary_panel_open { - border-bottom: 1px solid #CCC; - border-top: 1px solid #CCC; + border-bottom: 1px solid #ccc; + border-top: 1px solid #ccc; } fieldset { - background-color: #554B4D; + background-color: #554b4d; margin: 0; &.rows { @@ -4708,7 +4853,7 @@ div .suggestion_note { } &.action { - padding: .5em 0 1em 1em; + padding: 0.5em 0 1em 1em; } } @@ -4717,12 +4862,12 @@ div .suggestion_note { } label { - color: #FFF; + color: #fff; display: block; float: none; font-weight: normal; margin: 0; - padding-bottom: .2em; + padding-bottom: 0.2em; text-align: left; width: unset; } @@ -4732,7 +4877,7 @@ div .suggestion_note { } #cancel_set_library { - color: #FFF; + color: #fff; padding: 0.4em 20px; &:hover { @@ -4757,7 +4902,7 @@ div .suggestion_note { border: 1px solid #408540; &::before { - font-family: 'Font Awesome 6 Free'; + font-family: "Font Awesome 6 Free"; content: "\f058"; color: #408540; position: absolute; @@ -4770,13 +4915,13 @@ div .suggestion_note { } .dropdown-menu { - box-shadow: 0 2px 6px rgba(0,0,0,0.175); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.175); } .navbar.fixed-bottom { - background: #FFF none; + background: #fff none; border-radius: 0; - border-top: 1px solid #ADADAD; + border-top: 1px solid #adadad; box-shadow: none; fieldset { @@ -4786,11 +4931,11 @@ div .suggestion_note { .navbar-inner { min-height: 0; - padding: .4em 0; + padding: 0.4em 0; } .nav > li { - border-right: 1px solid #CCC; + border-right: 1px solid #ccc; > a { font-weight: normal; @@ -4802,7 +4947,7 @@ div .suggestion_note { &.navbar-text { line-height: normal; - padding: .4em .7em; + padding: 0.4em 0.7em; } } } @@ -4817,14 +4962,14 @@ div .suggestion_note { @import "toolbar"; @import "forms"; -@media only screen and ( min-width: 608px ) { +@media only screen and (min-width: 608px) { .consentButtons { text-align: right; white-space: nowrap; } } -@media only screen and ( min-width: 576px ) { +@media only screen and (min-width: 576px) { body { padding-bottom: 4em; } @@ -4843,23 +4988,23 @@ div .suggestion_note { } } -@media ( min-width: 768px ) { +@media (min-width: 768px) { .nav-tabs { .nav-link { border-radius: 0; - margin: 0 .4em calc( -1 * var( --bs-nav-tabs-border-width ) ) 0; + margin: 0 0.4em calc(-1 * var(--bs-nav-tabs-border-width)) 0; } } } -@media ( max-width: 767px ) { +@media (max-width: 767px) { #marcPreview { margin: 0; width: auto; } } -@media only screen and ( min-width: 1000px ) { +@media only screen and (min-width: 1000px) { .patronimage { h5 { text-align: center; @@ -4875,7 +5020,7 @@ div .suggestion_note { &.brief { & + .action { display: flex; - gap: .5rem; + gap: 0.5rem; input, button, @@ -4894,7 +5039,7 @@ div .suggestion_note { } } -@media only screen and ( max-width: 1000px ) { +@media only screen and (max-width: 1000px) { .browse-button { display: inline-block; width: 50%; @@ -4912,7 +5057,7 @@ div .suggestion_note { } } -@media ( min-width: 1050px ) { +@media (min-width: 1050px) { #helper { i { display: none; @@ -4924,7 +5069,7 @@ div .suggestion_note { } } -@media only screen and ( min-width: 1200px ) { +@media only screen and (min-width: 1200px) { .browse-button { display: inline-block; width: 50%; @@ -4962,7 +5107,7 @@ div .suggestion_note { z-index: $zindex-tooltip; } -@media only screen and ( max-width: 1200px ) { +@media only screen and (max-width: 1200px) { .patron_search_modal { .modal-body { display: block; diff --git a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js b/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js index e1d19f2fc0d..dc04dc17d49 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js +++ b/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js @@ -1065,13 +1065,25 @@ $("#placeBookingModal").on("show.bs.modal", function (e) { dayElem.dateObj ).startOf("day"); - // Clear existing booking lead/trail classes + // Clear existing booking lead/trail classes (including start/end) dayElem.classList.remove( "existingBookingLead" ); + dayElem.classList.remove( + "existingBookingLeadStart" + ); + dayElem.classList.remove( + "existingBookingLeadEnd" + ); dayElem.classList.remove( "existingBookingTrail" ); + dayElem.classList.remove( + "existingBookingTrailStart" + ); + dayElem.classList.remove( + "existingBookingTrailEnd" + ); // Apply new booking's lead/trail period classes dayElem.classList.toggle( @@ -1125,6 +1137,25 @@ $("#placeBookingModal").on("show.bs.modal", function (e) { dayElem.classList.add( "existingBookingTrail" ); + // Add start/end classes for rounded borders + if ( + elemDate.isSame( + existingTrailStart + ) + ) { + dayElem.classList.add( + "existingBookingTrailStart" + ); + } + if ( + elemDate.isSame( + existingTrailEnd + ) + ) { + dayElem.classList.add( + "existingBookingTrailEnd" + ); + } } } @@ -1152,6 +1183,23 @@ $("#placeBookingModal").on("show.bs.modal", function (e) { dayElem.classList.add( "existingBookingLead" ); + // Add start/end classes for rounded borders + if ( + elemDate.isSame( + existingLeadStart + ) + ) { + dayElem.classList.add( + "existingBookingLeadStart" + ); + } + if ( + elemDate.isSame(existingLeadEnd) + ) { + dayElem.classList.add( + "existingBookingLeadEnd" + ); + } } } -- 2.52.0