From 79382262851534eada641edfe1e252f75374c53c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sol=C3=A8ne=20Desvaux?= Date: Mon, 25 Jul 2022 16:37:41 +0200 Subject: [PATCH] Bug 30952: The rest of CSS changes There is still work to do to split this patch correctly into several more logical patches. Consider this patch a WIP. --- .../prog/css/src/staff-global.scss | 1282 +++++++++++------ 1 file changed, 816 insertions(+), 466 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 4c880a5bdd..a06b35b295 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -4,56 +4,70 @@ @import "fonts"; ::selection { - background: #538200; + background: #418940; color: #FFFFFF; } a { &:link, &:visited { - color: #004D99; - text-decoration: none; + color: #71B443; + border: 0; + background-color: transparent; + box-shadow: none; + font-size: 100%; } &:hover, - &:active { - color: #538200; - text-decoration: none; + &:active, + &:focus { + text-decoration: underline; + color: #71B443; + border: 0; + background-color: transparent; + box-shadow: none; + font-size: 100%; } &:hover { .term { - color: #FF9090; + color: #000; + text-decoration: underline; } } &.authlink { - background-color: #e6f0f2; + background-color: #e3f1df; border-radius: 5px; display: inline-block; padding: 2px 4px; } &.btn { - &:link, - &:visited { - color: #333333; - } - &.btn-link { &:link, &:visited { - color: #004D99; + color: #71B443; } &:hover { - color: #538200; + text-decoration: underline; + font-weight: bold; } } + } - &.cancel { - padding-left: 1em; + &.edit-patronimage { + color: #333; + background-color: #e6e6e6; + border-color: #adadad; + + &:hover{ + text-decoration: none; + color: #333; + background-color: #dadada; + } } &.cartRemove { @@ -64,17 +78,53 @@ a { } &.clear_date { - color: #C33; + color: #418940; font-size: 130%; + vertical-align: middle; &:hover { - color: #FF9090; + color: #71B443; + text-decoration: none; } } - &.close { + &.settings { + i, img { + text-align: center; + color: #71B443; + border: solid 3px #71B443; + border-radius: 50%; + background-color: transparent; + width: 40px; + height: 40px; + margin-bottom: 5px; + margin-left: auto; + margin-right: auto; + padding: 5px; + align-items: center; + justify-content: center; + box-sizing: content-box; + display: flex; + + } + &:hover { - color: #538200; + color: #418940; + text-decoration: none; + font-weight: bold; + + i, img { + border-color: #418940; + background-color: transparent; + color: #418940; + } + + } + + img { + max-width: 30px; + height: auto; + padding: 10px; } } @@ -138,54 +188,128 @@ a { &.xml { background-image: url("../img/famfamfam/silk/page_white_code.png"); } - } -a.ctrl_link { - display: inline-block; - padding-right: 1rem; + + +#resetZ3950Search { + font-size: 110%; + color: #71B443; } -aside { - h5 { - font-size: 100%; - margin: .5em 0; +a { + .ctrl_link { + display: inline-block; + padding-right: 1rem; } +} + +aside { fieldset { - &.brief { - padding: .4em .7em; + box-shadow: 8px 8px 12px rgba(170, 170, 170, .356); + padding: .9em; - button + button, - input + input { - margin-left: 5px; + button + button, + input + input { + margin-left: 5px; + } + + fieldset.brief { + width: 100%; + + legend { + color: #696969; + font-weight: bold; + font-size: 13px; + margin: 0; + border-bottom: 0; } - fieldset { - border-width: 1px; - border-radius: 0; - margin: 0 0 .5em 0; - padding: .5em; + li { + margin-top: 0; + padding: 0; - legend { - font-size: 95%; + &.radio { + padding: 0; + } + + label { + color: #696969; + font-size: 13px; + padding: .5em .3em 0 0; margin: 0; + font-weight: normal; } - &.action { - margin-left: 0; - padding: .5em 0; + input, select { + height: calc(1.5em + .75rem + 2px); + width: calc(100% - 20px); } } + } + + ol { + padding: 0; + li { + list-style: none; + left: 0; + flex-direction: row; + width: 100%; + + fieldset { + width: 100%; + + legend { + color: #696969; + font-weight: bold; + font-size: 13px; + margin: 0; + border-bottom: 0; + } + + li { + margin-top: 0; + padding: 0; + + label { + color: #696969; + font-size: 13px; + padding: .5em .3em 0 0; + margin: 0; + font-weight: normal; + } + + input, + select { + height: calc(1.5em + .75rem + 2px); + width: calc(100% - 20px); + } + } + + } + + label { + color: #696969; + padding: .5em .3em 0 0; + margin: 0; + } + + input, + select { + height: calc(1.5em + .75rem + 2px); + width: calc(100% - 20px); + + + &[type="checkbox"], + &[type="radio"] { + width: auto; + margin: 0; + vertical-align: middle; + } + } - input, select { - height: calc(1.5em + .75rem + 2px); - } - label { - margin: .5em 0 0 0; - } - li { &.checkbox { label { display: inline; @@ -206,8 +330,6 @@ aside { } &.radio { - padding: .7em 0; - input { padding: .3em 0; } @@ -221,27 +343,121 @@ aside { display: inline; } } + + select, + [type="text"] { + width: 100%; + } + + .flatpickr-input { + margin-right: 3px; + width: calc(100% - 20px); + } + + &+.action { + margin-left: 0; + padding: 0; + } + + .radio, .checkbox { + margin: 0; + } + + select, + [type="text"] { + width: 100%; + } + + .flatpickr-input { + margin-right: 3px; + width: calc(100% - 20px); + } + + &.action { + margin-left: 0; + padding: 0; + } } } + } + } +} - ol { - margin: 0; - padding: 0; - } +#menu, #navmenulist { + background-color: #e6e6e6; + display: block; - select, - [type="text"] { - width: 100%; + h5 { + margin: .5em 0; + padding-left: .5em; + padding-bottom: .2em; + color: #696969; + border-bottom: 1px solid #696969; + font-weight: normal; + font-size: 1.2em; + } + + ul { + margin-bottom: 10px; + padding-left: 0; + + ul { + font-size: 75%; + } + + li { + list-style: none; + + a { + color: #000; + display: block; + text-decoration: none; + padding: .7em .3em .7em 1.2em; } - .flatpickr-input { - margin-right: 3px; - width: calc(100% - 20px); + &.active > a, a:hover, a.current { + background-color: #F3F4F4; + text-decoration: none; + color: #418940; + border-left: solid 5px #418940; + font-weight: bold; } + } + } +} - &+.action { - margin-left: 0; - padding: 0; +div { + display: block; + + &.mainmenu { + display: inline; + } + + + &.koha-mainpage { + display: flex; + align-items: center; + justify-content: center; + } + + &.settings-links { + display: inline; + + ul { + float: right; + + li { + list-style-type: none; + margin-bottom: 0; + height: auto; + width: 150px; + padding: 5px 10px; + + a, + a:visited, + a:link { + color: #000; + } } } } @@ -250,7 +466,8 @@ aside { button { @include default-button; - &:active { + &:active, + &:hover { border: 1px inset #999999; } @@ -266,6 +483,14 @@ button { } } +#add_to_patron_list_submit { + color: #71B443; + + &:hover { + border: 0; + } +} + main { &::after { clear: both; @@ -280,6 +505,7 @@ body { line-height: 1.22; padding: 0 0 4em; text-align: left; + background-color: #F3F4F4; &.nobackdrop { .modal-backdrop { @@ -337,13 +563,15 @@ h1 { } h2 { - font-size: 146.5%; + font-size: 150%; font-weight: bold; + color: #696969; } h3 { font-size: 131%; font-weight: bold; + color: #696969; } h4 { @@ -353,7 +581,6 @@ h4 { h5 { font-size: 100%; - font-weight: bold; } h6 { @@ -367,7 +594,11 @@ h3, h4, h5, h6 { - margin: .3em 0; + margin: .5em 0; + + a, a:link, a:visited { + color: #000; + } } hr { @@ -376,7 +607,13 @@ hr { } p { - margin: .5em 0; + margin: .7em 0; +} + +#patron_search { + .address { + font-size: 100%; + } } strong { @@ -401,7 +638,7 @@ cite { input, textarea { &:focus { - border-color: #538200; + border-color: #418940; border-radius: 4px; } } @@ -413,22 +650,11 @@ input { vertical-align: middle; } - &[type="submit"], - &[type="button"] { - &:active { - border: 1px inset #999999; - } - } - &[type="submit"], &[type="reset"], &[type="button"] { @include default-button; - &:active { - border: 1px inset #999999; - } - &:disabled { @include disabled-button; } @@ -437,14 +663,19 @@ input { &.submit { @include default-button; - &:active { - border: 1px inset #999999; - } - &:disabled { @include disabled-button; } } + + &[type="submit"], &.submit { + background-color: #FEC32C; + border: 0; + + &:hover { + background-color: #fec22c9f; + } + } } .input-warning { @@ -498,19 +729,17 @@ label, padding-top: 10px; } -#navmenulist { - li { - border-bottom: 1px solid #EEE; - list-style: $nav-menu-bullet; - padding: .2em 0; - - a { - text-decoration: none; +#area-news, #area-userblock { + background-color: #FFF; + border: 0; + color: #696969; + margin: 0 0 1em 0; + box-shadow: 8px 8px 12px rgba(170, 170, 170, .356); + display: block; + padding: 1em; - &.current { - font-weight: bold; - } - } + h3{ + background-color: #FFFFFF; } } @@ -529,7 +758,7 @@ ul { padding-left: 1.1em; li { - list-style-type: disc; + list-style-type: none; input { &.submit { @@ -543,6 +772,11 @@ ul { } } + &.nav-tabs { + border-bottom: 1px solid transparent; + padding: .2em 1.4em 0 1.4em; + } + &.budget_hierarchy { margin-left: 0; padding-left: 0; @@ -623,10 +857,15 @@ ol { } fieldset { - background-color: #F4F8F9; - border: 2px solid #B9D8D9; - border-radius: 5px; - margin: 1em 1em 1em 0; + width: 100%; + color: #71B443; + background-color: #FFF; + position: relative; + color: #696969; + left: 0; + top: 0; + margin: 0 1em 1em 0; + box-shadow: 8px 8px 12px rgba(170, 170, 170, .356); padding: 1em; + fieldset { @@ -635,6 +874,16 @@ fieldset { } } + legend { + position: relative; + top: 1.5em; + margin: .5em 0; + font-size: 131%; + font-weight: bold; + color: #696969; + border-bottom: none; + } + &.lastchecked { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -643,11 +892,11 @@ fieldset { margin-right: 0; } - .standard { - background-color:#f4f8f9 !important; + &.standard { + background-color:#F4F8F9 !important; } - .contrast { + &.contrast { background-color:#F3F3F3 !important; } @@ -655,15 +904,15 @@ fieldset { background-color: transparent; border: 0; clear: both; + box-shadow: none; float: none; margin: .9em 0 0; padding: .4em; width: auto; } - &.brief { - border: 2px solid #B9D8D9; + &.brief { div { &.hint { margin-bottom: .4em; @@ -671,8 +920,6 @@ fieldset { } label { - display: block; - font-weight: bold; padding: .3em 0; &.inline { @@ -728,14 +975,18 @@ fieldset { } } + ol { + li { + list-style-type: none; + padding: .3em 0; + } + } + &.rows { - border: 2px solid #B9D8D9; - border-width: 1px; + border: 0; clear: left; float: left; font-size: 90%; - margin: .9em 0 0; - padding: 0; width: 100%; fieldset { @@ -809,7 +1060,8 @@ fieldset { font-weight: bold; margin-right: 1rem; text-align: right; - width: 9rem; + width: auto; + min-width: 9rem; &.error { float: none; @@ -836,12 +1088,6 @@ fieldset { } } - legend { - font-size: 110%; - font-weight: bold; - margin-left: 1em; - } - li { clear: left; float: left; @@ -876,8 +1122,6 @@ fieldset { } fieldset { - margin-left: 10em; - label { width: 6em; } @@ -977,7 +1221,7 @@ fieldset { .dataTables_wrapper { label { - font-weight: 400; + font-weight: normal; width: unset; } } @@ -993,6 +1237,10 @@ fieldset { margin: 1em; } } + + fieldset { + box-shadow: none; + } } #multi_receiving { @@ -1005,17 +1253,6 @@ fieldset { } } -legend { - background-color: #FFFFFF; - border: 2px solid #B9D8D9; - border-radius: 3px; - font-size: 123.1%; - font-weight: bold; - margin-bottom: 0; - padding: .2em .5em; - width: auto; -} - details { > summary { cursor: pointer; @@ -1148,7 +1385,7 @@ div { &.rule { background-color: #F4F8F9; - border: 2px solid #B9D8D9; + border: 2px solid #bfd9b9; border-radius: 5px; margin: .3em; padding: .3em; @@ -1281,35 +1518,23 @@ div { } .browse { - margin: .5em 0; - } -} - - .ui-corner-top { - border-radius: 0 0 4px 4px; - } - - > div, - > ul { - display: none; + margin: .5em 50px; + font-weight: bold; - > li { - display: none; + a { + color: #71B443; + font-weight: normal; - &:first-of-type { - display: block; + &:hover, &:active { + font-weight: bold; + color: #418940; } } - - &:first-of-type { - display: block; - } } } #reserves, #checkouts { - border: 1px solid #B9D8D9; padding: 1em; } @@ -1358,48 +1583,48 @@ dd { .patroninfo { - margin-top: -.5em; + margin-right: .5em; + padding-top: 1em; + background-color: #e6e6e6; + left: -10px; + width: 100%; + padding-bottom: 25px; h5 { - border-right: 1px solid #B9D8D9; margin-bottom: 0; - padding-bottom: .5em; - padding-left: 0em; - padding-top: .5em; + padding: .5em .9em; + font-weight: bold; + color: #000; &:empty { border-right: 0; } + + li { + &.patrondateofbirth { + font-size: 75%; + font-weight: normal; + list-style-type: none; + text-align: center; + } + } } ul { border: 0; - border-bottom: 0; - border-right: 1px solid #B9D8D9; - border-top: 0; margin: 0; - padding: 0; + padding: 0 .9em; li { list-style-type: none; margin: 0; - } - } - + #menu { - margin-right: 0; + } } > div { - border-right: 1px solid #B9D8D9; width: 100%; } - - &.is-staff { - h5 { - background-color: #EEE; - } - } } .patroninfo-section { @@ -1412,7 +1637,6 @@ dd { } .patroninfo-heading { - background-color: rgba(237, 244, 246, .4); padding: .5em; margin-bottom: .3em; clear: both; @@ -1477,6 +1701,19 @@ dd { display: inline-block; } +#addColumn, #delColumn{ + color: #71b443; + padding: .3em; + border: none; + background-color: transparent; + box-shadow: none; + font-size: 100%; + + &:hover{ + text-decoration: underline; + } +} + .patronviews { border-right: 1px solid #000; border-top: 1px solid #000; @@ -1494,9 +1731,22 @@ dd { } .dropdown-menu { + background-color: #F3F4F4; li { list-style-type: none; + + a { + color: #000; + + &:hover { + background-color: #DADADA; + background-image: none; + color: #000; + text-decoration: none; + } + } } + } .rows { @@ -1576,7 +1826,7 @@ i { } &.success { - color: #008000; + color: #418940; } &.warn { @@ -1586,7 +1836,8 @@ i { .circ-setting { font-size: 85%; - padding-top: .3em; + padding-top: .9em; + padding-bottom: .9em; input { vertical-align: middle; @@ -1599,9 +1850,7 @@ i { } .circ-settings { - background-color: #F4F8F9; border-radius: 0; - border-top: 2px solid #B9D8D9; display: none; margin-left: -1em; margin-right: -1em; @@ -1610,7 +1859,22 @@ i { } #show-circ-settings { - margin-top: .5em; + display: inline; + position: relative; + right: 25px; + opacity: .5; + + &:hover { + opacity: 1; + } + + a { + color: rgb(105, 105, 105); + + &:hover { + text-decoration: none; + } + } } .checkin-active-setting { @@ -1655,11 +1919,11 @@ i { } .dialog { - border: 1px solid #BCBCBC; border-radius: 2px; margin: 1em auto; padding: .5em; text-align: center; + display: table; width: 65%; max-width: 600px; @@ -1697,9 +1961,8 @@ i { input { background-color: #FFFFFF; - border: 1px solid #BCBCBC; margin: .4em; - padding: .4em .4em .4em 25px; + padding: .4em; &:hover { background-color: #FFC; @@ -1707,6 +1970,51 @@ i { &[type="submit"] { background: #FFF none; + + &.approve { + background-color: #FEC32C; + color: #000; + text-shadow: 0 1px 0 #FFFFFF; + border: 0; + background-image: none; + margin-top: 5px; + + &:hover, + &:active, + &:focus { + background-color: #fec22c9f; + } + } + + &.deny { + background-color: transparent; + color: #696969; + border: #696969 double 1px; + margin-top: 5px; + margin-left: 5px; + + display: inline-block; + margin-bottom: 0; + font-weight: normal; + text-align: center; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; + padding: 6px 12px; + font-size: 12px; + line-height: 1.42857143; + border-radius: 4px; + user-select: none; + + &:hover { + font-weight: bold; + background-color: #F1F1F1; + border: #696969 double 1px; + text-decoration: none; + } + } } &.flatpickr-input { @@ -1738,9 +2046,10 @@ i { } &.message { - background: linear-gradient(to bottom, #FFFFFF 0%, #F4F6FA 2%, #EAEEF5 23%, #E8EDF6 94%, #CDDBF2 100%); - border: 1px solid #BCBCBC; + color: #000000; text-align: center; + background-color: transparent; + ul, h5 { @@ -1755,9 +2064,8 @@ i { &.alert, &.error { - background: linear-gradient(to bottom, #FEF8D3 0%, #FFEC91 9%, #FFED87 89%, #F9DC00 100%); - border: 1px solid #E0C726; color: inherit; + background-color: #FFFFFF; text-align: center; text-shadow: none; @@ -1781,9 +2089,10 @@ i { .approve, .success { + background-color: #FEC32C; i { &.fa { - color: #008000; + color: #418940; } } } @@ -1826,69 +2135,16 @@ i { color: #990000; } -// style for shelving location in catalogsearch -.shelvingloc { - display: block; - font-style: italic; -} - -// style for bundled detail in catalogsearch -.bundled { - display: block; - font-style: italic; -} - -#menu { - border-right: 1px solid #B9D8D9; - margin-right: .5em; - padding-bottom: 2em; - padding-top: 1em; - - li { - a { - background: linear-gradient(to bottom, #E8F0F6 0%, #E8F0F6 96%, #C1C1C1 100%); - border: 1px solid #B9D8D9; - border-bottom-left-radius: 5px; - border-top-left-radius: 5px; - display: block; - font-size: 111%; - margin: .5em 0; - margin-right: -1px; - padding: .4em .3em; - text-decoration: none; - - &:hover { - background: linear-gradient(to bottom, #FAFAFA 0%, #FFFFFF 96%, #E6E6E6 97%, #CCCCCC 99%, #C1C1C1 100%); - border-bottom: 1px solid #85CA11; - border-left: 1px solid #85CA11; - border-top: 1px solid #85CA11; - } - } - - &.active { - a { - background-color: #FFFFFF; - background-image: none; - border-bottom: 1px solid #85CA11; - border-left: 1px solid #85CA11; - border-right: 0; - border-top: 1px solid #85CA11; - color: #000000; - font-weight: bold; - - &:hover { - background-color: #FFFFFF; - color: #538200; - } - } - } - } - - ul { - li { - list-style-type: none; - } - } +// style for shelving location in catalogsearch +.shelvingloc { + display: block; + font-style: italic; +} + +// style for bundled detail in catalogsearch +.bundled { + display: block; + font-style: italic; } #closewindow { @@ -1901,8 +2157,14 @@ i { } .barcode { - font-size: 200%; + font-size: 100%; vertical-align: middle; + font-style: italic; + width: 250px; + height: 30px; + padding-left: 5px; + padding-right: 30px; + border-radius: 0; } li { @@ -1973,14 +2235,60 @@ li { } } +#catalogue_stats_wrapper, #tbl_cash_register_stats_wrapper, #resulttable_wrapper, #numberpatternst_wrapper { + background-color: #FFFFFF; + margin-top: 20px; + box-shadow: 8px 8px 12px rgba(170, 170, 170, .356); + padding: 20px; +} + #searchresults { + background-color: #FFFFFF; + margin-top: 20px; + min-width: 100%; + width: fit-content; + padding: 20px; + + fieldset { + box-shadow: none; + } + + h3{ + padding-bottom: .7em; + margin: 0; + color: #696969; + } + td { + border: 0; + + + button, a { + &.btn-default { + color: #71B443; + padding: .3em; + border: 0; + background-color: transparent; + border: 0; + box-shadow: none; + font-size: 100%; + + &:hover, &:active, &:focus, &:active:hover, &:active:focus { + background-color: transparent; + color: #71B443; + text-decoration: underline; + } + } + } + ul { li { clear: left; font-size: 90%; list-style: url("../img/item-bullet.svg"); padding: .2em 0; + color: #000; + top: 100%; &.result_itype_image { list-style: none; @@ -2012,6 +2320,7 @@ li { table { td { vertical-align: top; + text-align: center; } } @@ -2037,15 +2346,37 @@ li { } } } + + .dropdown-menu { + background-color: #FFFFFF; + color: #000; + height: fit-content; + top: 100%; + + a { + color: #000; + + &:hover { + background-image: none; + color: #000; + text-decoration: underline; + background-color: #FFFFFF; + } + } + } } .searchheader { - background-color: #E6F0F2; - border: 1px solid #B9D8D9; - border-radius: 5px 5px 0 0; + background-color: transparent; + border: 1px solid #696969; + border-radius: 5px 5px 5px 5px; font-size: 80%; - margin: 0 0 .5em -1px; - padding: .4em 0 .4em 1em; + margin-top: .5em; + margin-bottom: .5em; + padding: 5px; + width: 100%; + color: #696969; + display: block; &.floating { border-radius: 0; @@ -2078,15 +2409,20 @@ li { } } -#search-facets { - border: 1px solid #B9D8D9; - border-radius: 5px 5px 0 0; +.mini-inp { + height: 12px; + width: 30px; +} + + +#search-facets { h4 { - background-color: #E6F0F2; - border-bottom: 1px solid #B9D8D9; - border-radius: 5px 5px 0 0; + background-color: #71B443; + border-bottom: 1px solid #71B443; + border-radius: 4px 4px 0 0; font-size: 90%; + color: #FFFFFF; margin: 0; padding: .4em .2em; text-align: center; @@ -2132,7 +2468,7 @@ li { } #biblio-cover-slider { - border: 1px solid #b9d8d9; + border: 1px solid #bfd9b9; border-radius: 3px; margin: 5px; padding: 10px 5px 5px 5px; @@ -2183,6 +2519,21 @@ td { } } +.highlight_toggle { + color: #71B443; + padding: .3em; + border: 0; + background-color: transparent; + border: 0; + box-shadow: none; + font-size: 100%; + + &:hover { + text-decoration: underline; + } +} + + .cover-image { display: none; @@ -2211,6 +2562,7 @@ td { #CheckPending { font-weight: normal; margin: 0 .5em 0 0; + color: #71B443; } .lost, @@ -2334,10 +2686,9 @@ td.bundle { } #cartDetails { - background-color: #FFFFFF; - border: 1px solid #739ACF; + background-color: #352C2E; box-shadow: 1px 1px 3px 0 #666; - color: #000; + color: #FFFFFF; display: none; margin: 0; padding: 10px; @@ -2347,11 +2698,9 @@ td.bundle { } #cartmenulink { - padding-left: 15px; - - i.fa.fa-shopping-cart { - padding-right: 7px; - } + position: relative; + left: 0; + top: 0; } #basketcount { @@ -2410,7 +2759,6 @@ td.bundle { } .container { - border: 1px solid #EEE; margin: 1em 0; padding: 1em; } @@ -2502,7 +2850,7 @@ td.bundle { } .advsearch { - margin: 0; + margin: 0 1em 1em 0; table { border-collapse: separate; @@ -2621,13 +2969,14 @@ td.bundle { // Override core jQueryUI widgets .ui-widget-content { background: #FFFFFF none; - border: 1px solid #B9D8D9; + border-radius: 4px; + border: 3px solid #418940; color: #222222; } .ui-widget-header { - background: #E6F0F2 none; - border: 1px solid #B9D8D9; + background: #b5dbad none; + border: 1px solid #bfd9b9; color: #222222; font-weight: bold; } @@ -2635,8 +2984,7 @@ td.bundle { .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { - background: #F4F8F9 none; - border: 1px solid #B9D8D9; + border: 1px solid #bfd9b9; color: #555555; font-weight: normal; } @@ -2647,21 +2995,12 @@ td.bundle { .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { - background: #E6F0F2 none; - border: 1px solid #B9D8D9; + background: #cad8c6 none; + border: 1px solid #bfd9b9; color: #212121; font-weight: normal; } -// .ui-state-active, -// .ui-widget-content .ui-state-active, -// .ui-widget-header .ui-state-active { -// background: #FFFFFF none; -// border: 1px solid #AAAAAA; -// color: #212121; -// font-weight: normal; -// } - .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { @@ -2690,7 +3029,7 @@ td.bundle { padding: 3px 1em 3px .4em; &:hover { - background: #E6F0F2 none; + background: #e3f1df none; color: #212121; font-weight: normal; } @@ -2737,44 +3076,43 @@ td.bundle { &.ui-widget-header { background: none; border: 0; + padding: .2em .9em 0 .9em; } } .ui-tabs { + .ui-tabs-panel { + background: #FFF none; + border-radius: 4px; + border: 3px solid #418940; + + fieldset { + box-shadow: none; + } + } .ui-tabs-nav { li { - background: #E6F0F2 none; - border: 1px solid #B9D8D9; + background: #71B443; + border: 0; margin-right: .4em; - top: 1px; + border-radius: 4px 4px 0 0; - &.ui-tabs-active { - background-color: #FFFFFF; - border: 1px solid #B9D8D9; + &.ui-tabs-active, &.ui-state-hover { + background-color: #418940; + border-radius: 4px 4px 0 0; + border: 0; border-bottom-width: 0; + padding-bottom: 0; a { - color: #000; - font-weight: bold; + color: #FFF; } - &.ui-state-hover { - background: #FFF none; - } - } - &.ui-state-default { - &.ui-state-hover { - background: #EDF4F5 none; - } } } } - .ui-tabs-panel { - border: 1px solid #B9D8D9; - } - &.ui-widget-content { background: transparent none; border: 0; @@ -2782,22 +3120,22 @@ td.bundle { .ui-state-default { a { - color: #004D99; + color: #FFFFFF; &:link, &:visited { - color: #004D99; + color: #FFFFFF; } } } .ui-state-hover { a { - color: #538200; + color: #418940; &:link, &:visited { - color: #538200; + color: #418940; } } } @@ -2806,25 +3144,69 @@ td.bundle { .ui-widget { font-family: inherit; - font-size: inherit; input, select, textarea, button { font-family: inherit; - font-size: inherit; } } .statictabs { + + background-color: #FFFFFF; + margin-top: 20px; + box-shadow: 8px 8px 12px rgba(170, 170, 170, .356); + padding: 20px; + + h3{ + padding-bottom: .7em; + margin: 0; + color: #696969; + } + + td { + border: 0; + + ul { + li { + clear: left; + font-size: 90%; + list-style: url("../img/item-bullet.svg"); + padding: .2em 0; + + &.result_itype_image { + list-style: none; + list-style-type: none; + } + + img { + float: left; + margin: 3px 5px 3px -5px; + max-width: 25px; + } + } + } + } + + span { + &.status { + clear: left; + color: #900; + display: block; + } + + &.unavailable { + clear: left; + display: block; + } + } + + > ul { background: none repeat scroll 0 0 transparent; border: 0 none; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - border-top-left-radius: 4px; - border-top-right-radius: 4px; color: #222222; font-size: 100%; font-weight: bold; @@ -2846,12 +3228,10 @@ td.bundle { } li { - background: none repeat scroll 0 0 #E6F0F2; - border: 1px solid #B9D8D9; - border-bottom: 0 none; border-top-left-radius: 4px; border-top-right-radius: 4px; - color: #555555; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; float: left; font-weight: normal; list-style: none outside none; @@ -2861,35 +3241,34 @@ td.bundle { position: relative; top: 1px; white-space: nowrap; + background: #71B443; - &.active { - background-color: #FFFFFF; - color: #212121; + &.active, &:hover { font-weight: normal; padding-bottom: 1px; + background-color: #418940; + border: 0; + border-bottom-width: 0; + a { background: none repeat scroll 0 0 transparent; - color: #000000; - cursor: text; - font-weight: bold; + color: #FFFFFF; outline: 0 none; top: 1px; } } a { - color: #004D99; + color: #FFFFFF; cursor: pointer; float: left; padding: .5em 1em; text-decoration: none; &:hover { - background-color: #EDF4F5; border-top-left-radius: 4px; border-top-right-radius: 4px; - color: #538200; } } } @@ -2897,9 +3276,8 @@ td.bundle { .tabs-container { background: none repeat scroll 0 0 transparent; - border: 1px solid #B9D8D9; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; + border: 3px solid #418940; + border-radius: 4px; color: #222222; display: block; padding: 1em 1.4em; @@ -2910,6 +3288,12 @@ td.bundle { margin-top: 5px; .ui-tabs-panel { background: #FFF none; + border-radius: 4px; + border: 3px solid #418940; + + fieldset { + box-shadow: none; + } } } @@ -3012,7 +3396,7 @@ td.bundle { } .pluginname { - background-color: #E6F0F2; + background-color: #e3f1df; cursor: move; margin: .3em; padding-bottom: 4px; @@ -3124,24 +3508,24 @@ nav { .active { a { - background-color: #5A9EAA; - border-color: #5A9EAA; + background-color: #6daa5a; + border-color: #6daa5a; &:hover, &:focus { - background-color: #5A9EAA; - border-color: #5A9EAA; + background-color: #6daa5a; + border-color: #6daa5a; } } span { - background-color: #5A9EAA; - border-color: #5A9EAA; + background-color: #6daa5a; + border-color: #6daa5a; &:hover, &:focus { - background-color: #5A9EAA; - border-color: #5A9EAA; + background-color: #6daa5a; + border-color: #6daa5a; } } } @@ -3149,13 +3533,33 @@ nav { button, .btn { - border-color: #ADADAD #ADADAD #949494; + display: inline-block; + margin-bottom: 0; + font-weight: normal; + text-align: center; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; + font-size: 12px; + line-height: 1.42857143; + border-radius: 4px; + user-select: none; &.btn-link { border: 0; } } +#merge-patrons { + padding: 0 25px; +} + +#patronlist-menu { + padding: 0 25px; +} + .btn-xs, .btn-group-xs > .btn { font-size: 10.5px; @@ -3167,6 +3571,10 @@ button, .panel { background: #F4F8F9 none; box-shadow: none; + + &:hover { + background: #e3f1df none; + } } .panel-collapse { @@ -3189,7 +3597,7 @@ button, } &:hover { - background: #e6f0f2 none; + background: #e3f1df none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @@ -3203,7 +3611,7 @@ button, } &:hover { - background: #e6f0f2 none; + background: #e3f1df none; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } @@ -3212,14 +3620,14 @@ button, } .panel-default { - border: 1px solid #B9D8D9; + border: 1px solid #bfd9b9; > .panel-heading { background: transparent none; padding: 0; + .panel-collapse { > .panel-body { - border-top-color: #B9D8D9; + border-top-color: #bfd9b9; } } } @@ -3235,7 +3643,7 @@ button, #changelanguage { background: #FFF none; - border-top: 1px solid #EEE; + border-top: 1px solid rgb(173, 173, 173); min-height: $language-footer-min-height; .dropdown-menu { @@ -3260,6 +3668,13 @@ button, li { a { line-height: 20px; + padding: .4em 15px; + color: #000; + + &:hover, &:active, &:focus{ + color: #418940; + text-decoration: none; + } } } } @@ -3406,7 +3821,7 @@ label { fieldset, ol { - background-color: transparent; + background-color: #FFF; border: 0; margin: 0; padding: 0; @@ -3414,7 +3829,11 @@ label { } .modal-content { - background-color: #EDF4F6; + background-color: rgb(211, 223, 204); + + fieldset { + box-shadow: none; + } } .btn-group { @@ -3456,25 +3875,27 @@ code { } .tab-content { - background-color: #FFF; - border: 1px solid #B9D8D9; - border-top-width: 0; + border: 3px solid #418940; + border-radius: 4px; padding: 1em; } .nav-tabs { > li { > a { - background-color: #e6f0f2; - border: 1px solid #b9d8d9; - border-radius: 4px 4px 0 0; + background-color: #71B443; + color: #FFFFFF; line-height: 1.42857143; margin-right: .4em; padding: .5em 1em; - &:hover { - background-color: #EEF4F5; - border-color: #b9d8d9; + &:hover, &:focus, &:active { + background-color: #418940; + border-radius: 4px 4px 0 0; + border: 1px solid #418940; + padding: .5em 1em; + text-decoration: none; + color: #FFFFFF; } } @@ -3482,10 +3903,9 @@ code { a, a:hover, a:focus { - background-color: #fff; - border: 1px solid #b9d8d9; - border-bottom-color: transparent; - color: #000; + background-color: #418940; + border-radius: 4px 4px 0 0; + color: #FFFFFF; cursor: default; font-weight: bold; } @@ -3540,7 +3960,7 @@ progress { } span { - background-color: #EBF3FF; + background-color: #ecffeb; border-radius: 5px; display: inline-block; font-size: 75%; @@ -3549,7 +3969,7 @@ progress { white-space: nowrap; &.selected { - background-color: #CCE0FC; + background-color: #d2fad0; } } } @@ -3603,7 +4023,7 @@ progress { #browse-return-to-results { background-color: #E8F0F6; - border: 1px solid #B9D8D9; + border: 1px solid #bfd9b9; border-bottom-width: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; @@ -3614,7 +4034,7 @@ progress { .browse-button { background-color: #FFF; - border: 1px solid #B9D8D9; + border: 1px solid #bfd9b9; color: #004D99; display: block; overflow: hidden; @@ -3746,7 +4166,6 @@ input.renew { .date-select { label { - display: inline-block; width: 40%; } } @@ -3762,7 +4181,7 @@ input.renew { #i18nMenu { .navbar-text { .currentlanguage { - color: #000; + color: #418940; font-weight: bold; } } @@ -3802,7 +4221,7 @@ input.renew { .branchgriditem { background-color: #FFFFFF; - border: 1px solid #B9D8D9; + border: 1px solid #bfd9b9; border-radius: 3px; display: table-cell; float: left; @@ -3829,7 +4248,7 @@ input.renew { #new_rule { background-color: #F4F8F9; - border: 2px solid #B9D8D9; + border: 2px solid #bfd9b9; border-radius: 5px; display: none; margin: .3em; @@ -3890,7 +4309,7 @@ input.renew { } #fixedlengthbuilderaction { - border: 3px solid #E6F0F2; + border: 3px solid #e3f1df; left: 80%; padding: 5px; position: relative; @@ -4076,7 +4495,7 @@ input.renew { padding: 5px 7px; margin: 3px 0 3px 0; border-radius: 5px; - background-color: rgba(0, 0, 0, 0.1); + background-color: rgba(0, 0, 0, .1); } #stage_list_headings { @@ -4173,68 +4592,23 @@ input.renew { } } -#lastborrower-window { - display: none; - background-image: linear-gradient(to left, #418940, #71B443); - box-shadow: 1px 1px 1px 0 #999; - color: #FFFFFF; - padding: .2em; - border-radius: 5px 5px 5px 5px; - - > * { - padding: 0 .4em; - } -} - -#lastborrower-remove { - cursor: pointer; - border-left: 1px solid #fff; -} - -#lastborrowerlink { - color: #FFFFFF; -} - /* ==== MODULE LINKS - Start ==== */ .buttons-list { - // List containing the module links - margin-bottom: 30px; + /* List containing the module links */ + margin: 30px 0; padding: 0; + margin-left: 15px; li { - // Standard attributes for the list elements + /* Standard attributes for the list elements */ list-style-type: none; - - a { - &.circ-button { - // Class used for each module link - background-color: #F4F8F9; - background-position: 5px 3px; - background-repeat: no-repeat; - border: 2px solid #B9D8D9; - border-radius: 6px; - box-sizing: content-box; - color: #000000; - display: block; - font-size: 110%; - font-weight: bold; - margin: .5em 0; - max-width: 260px; - padding: 8px; - text-decoration: none; - - &:hover { - // Class used for each module link hover state - border-color: #538200; - color: #538200; - } - } - } + display: table; + margin-bottom: 15px; } } .about h2 { - border-bottom: 1px solid #B9D8D9; + border-bottom: 1px solid #bfd9b9; padding: .5em .2em; margin: .5em 0; } @@ -4254,27 +4628,14 @@ input.renew { column-gap: 2em; } -// ==== MODULE LINKS - End ==== +/* ==== MODULE LINKS - End ==== */ -#catalog-search-link { - border-right: 1px solid lighten( #E6F0F2, 15% ); - padding-right: .3em; +#catalog-search-link a { + padding-right: .2em; } -#catalog-search-dropdown { - padding: 0; - - & > a { - border-left: 1px solid darken( #B4D2D8, 5% ); - margin-right: .6em; - padding: .4em .6em; - - &:hover, - &.catalog-search-dropdown-hover { - background-color: darken( #E6F0F2, 5% ); - border-left: 1px solid darken( #B4D2D8, 15% ); - } - } +#catalog-search-dropdown a.dropdown-toggle { + padding-left: .2em; } #tools_holidays { @@ -4414,7 +4775,6 @@ div .suggestion_note { } .currentlibrary { - background-color: #E6FCB7; display: inline-block; padding: 2px 4px; } @@ -4517,7 +4877,7 @@ div .suggestion_note { .open { .dropdown-menu { - background-color: #FFF; + background-color: #352C2E; border: 1px solid #ccc; position: absolute; } @@ -4533,8 +4893,10 @@ div .suggestion_note { padding-left: 1.5em; &:hover { - background-color: #0070A9; + text-decoration: underline; color: #FFF; + background-color: #352C2E; + background-image: none; } } @@ -4543,7 +4905,7 @@ div .suggestion_note { box-shadow: unset; float: none; left: auto; - position: relative; + position: initial; right: auto; &.dropdown-menu { @@ -4551,18 +4913,6 @@ div .suggestion_note { } } - .dropdown-menu { - li { - a { - color: #004D99; - - &:hover { - color: #FFF; - } - } - } - } - .dropdown-toggle { display: none; } -- 2.30.2