X-Git-Url: http://koha-dev.rot13.org:8081/gitweb/?a=blobdiff_plain;f=koha-tmpl%2Fintranet-tmpl%2Fprog%2Fcss%2Fsrc%2Fstaff-global.scss;h=be6cfdae246ff8d42fb7e9c62cf7fd916311898e;hb=30ee65e4c35cc4f589ec0029535cea48c8d10c88;hp=21642753e9777676fceda40f2a38216a977e69c3;hpb=b128878294cc76ce4a45f62b1b48ef0c19247ef2;p=koha-ffzg.git 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 21642753e9..be6cfdae24 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -14,13 +14,18 @@ .btn-success, .btn-info, .btn-warning, -.btn-danger { +.btn-danger, +button { + box-shadow: unset; text-shadow: unset; } .page-section { @include card; - padding: .5em 1em; + + & + .page-section { + margin-top: 1em; + } } a { @@ -64,12 +69,12 @@ a { } &.clear_date { - color: $green-text-color; + color: $warning-text-color; font-size: 130%; vertical-align: middle; &:hover { - color: $green-text-color; + color: lighten( $warning-text-color, 35% ); text-decoration: none; } } @@ -191,110 +196,52 @@ a { aside { - fieldset { - @include card; - padding: .9em; - - button + button, - input + input { - margin-left: 5px; - } + h5 { + font-size: 100%; + margin: .5em 0; + } - fieldset.brief { - width: 100%; + fieldset { + &.brief { + padding: .4em .7em; - legend { - color: #696969; - font-weight: bold; - font-size: 13px; - margin: 0; - border-bottom: 0; + button + button, + input + input { + margin-left: 5px; } - li { - margin-top: 0; - padding: 0; - - &.radio { - padding: 0; - } + fieldset { + border-left: 2px solid #CCC; + border-radius: 0; + margin: .5em 0; + padding: .5em; - label { - color: #696969; - font-size: 13px; - padding: .5em .3em 0 0; + legend { + font-size: 95%; margin: 0; - font-weight: normal; } - input, select { - height: calc(1.5em + .75rem + 2px); - width: calc(100% - 20px); + &.action { + border: 0; + margin-left: 0; + padding: .5em 0; } } - } - - 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); + input[type="text"], + select { + height: calc(1.5em + .75rem + 2px); + } - &[type="checkbox"], - &[type="radio"] { - width: auto; - margin: 0; - vertical-align: middle; - } - } - + label { + color: #696969; + display: block; + margin: .5em 0 0 0; + } + li { + margin-top: 0; + padding: 0; &.checkbox { label { @@ -316,6 +263,8 @@ aside { } &.radio { + padding: .7em 0; + input { padding: .3em 0; } @@ -329,41 +278,27 @@ 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; - } + ol { + margin: 0; + padding: 0; + } - select, - [type="text"] { - width: 100%; - } + select, + [type="text"] { + width: 100%; + } - .flatpickr-input { - margin-right: 3px; - width: calc(100% - 20px); - } + .flatpickr-input { + margin-right: 3px; + width: calc(100% - 20px); + } - &.action { - margin-left: 0; - padding: 0; - } - } + &+.action { + margin-left: 0; + padding: 0; } } } @@ -394,19 +329,43 @@ aside { list-style: none; a { + border-left: 5px solid #E6E6E6; color: #000; display: block; text-decoration: none; padding: .7em .3em .7em 1.2em; } - &.active > a, a:hover, a.current { + &.active > a, + a:hover, + a.current { background-color: #F3F4F4; text-decoration: none; color: $green-text-color; border-left: solid 5px $background-color-primary; font-weight: bold; } + + a:hover { + border-left: solid 5px $background-color-secondary; + font-weight: normal; + } + + &.active > a:hover { + border-left: solid 5px $background-color-primary; + font-weight: bold; + } + } + } +} + +#admin_preferences #menu{ + + ul { + + ul { + background-color: #f3f4f4; + font-size: 85%; } } } @@ -575,10 +534,6 @@ h4, h5, h6 { margin: .5em 0; - - a, a:link, a:visited { - color: #000; - } } hr { @@ -624,38 +579,35 @@ textarea { } input { - &[type="checkbox"], - &[type="radio"] { - margin: 0; - vertical-align: middle; + &[type="submit"] { + @include primary-button; + padding: .5em 1em; } - &[type="submit"], &[type="reset"], &[type="button"] { @include default-button; + padding: .5em 1em; &:disabled { @include disabled-button; } } + &[type="checkbox"], + &[type="radio"] { + height: unset; + margin: 3px 3px 0 5px; + } + &.submit { - @include default-button; + @include primary-button; + padding: .5em 1em; &:disabled { @include disabled-button; } } - - &[type="submit"], &.submit { - background-color: #FEC32C; - border: 0; - - &:hover { - background-color: #fec22c9f; - } - } } .input-warning { @@ -672,11 +624,10 @@ label, max-width: inherit; padding: 0; vertical-align: middle; + white-space: normal; input { &[type="checkbox"], - &[type="radio"], - &[type="checkbox"], &[type="radio"] { margin-top: 0; } @@ -691,7 +642,7 @@ label, } &.required { - color: #C00; + color: $warning-text-color; } } @@ -710,13 +661,7 @@ label, } #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; h3{ background-color: #FFFFFF; @@ -758,11 +703,6 @@ ul { } } - &.nav-tabs { - border-bottom: 1px solid transparent; - padding: .2em 1.4em 0 1.4em; - } - &.budget_hierarchy { margin-left: 0; padding-left: 0; @@ -829,7 +769,7 @@ ol { .overdue, .debit { - color: #CC0000; + color: $warning-text-color; font-weight: bold; } @@ -845,14 +785,11 @@ ol { fieldset { + fieldset { &.action { - padding-top: 20px; + margin-top: -1em; } } &.lastchecked { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - border-bottom-width: 0; margin-bottom: 0; margin-right: 0; } @@ -868,14 +805,18 @@ fieldset { &.action { background-color: transparent; border: 0; - clear: both; box-shadow: none; + clear: both; float: none; - margin: .9em 0 0; - padding: .4em; + padding: 1rem; width: auto; - } + a { + &.cancel { + padding-left: 1em; + } + } + } &.brief { div { @@ -884,8 +825,12 @@ fieldset { } } - label { + label, + span.label { + display: block; + font-weight: bold; padding: .3em 0; + text-align: left; &.inline { display: inline; @@ -896,7 +841,7 @@ fieldset { } li { - margin-top: 1em; + margin-top: .5em; &:first-child { margin-top: 0; @@ -924,28 +869,36 @@ fieldset { ol, li { list-style-type: none; - } - - span { - .label { - display: block; - font-weight: bold; - padding: .3em 0; - text-align: left; - } + padding-left: 0; } .action { - margin-left: 1em; + margin: 0; + padding: 1em 0 0 0; } } + ol { li { list-style-type: none; padding: .3em 0; } } + + div { + &.help-block { + display: block; + margin-top: 5px; + margin-bottom: 10px; + color: #737373; + + li { + list-style-type: unset; + list-style-position: inside; + } + } + } } details { @@ -1070,14 +1023,13 @@ div { } &.note { - background: linear-gradient(to bottom, #F4F6FA 0%, #E8EDF6 100%); // W3C - border: 1px solid #BCBCBC; + background-color: #CFE2FF; margin: .5em 0; padding: .5em; i { &.fa-exclamation { - color: #CC0000; + color: $warning-text-color; font-style: italic; padding: 0 .3em; } @@ -1106,9 +1058,8 @@ div { } &.lastchecked { + background-color: #FFF; border: 2px solid #BCDB89; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; padding: .2em 1em; } @@ -1122,11 +1073,6 @@ div { font-size: 80%; } } - - input { - font-size: 90%; - padding: .2em .6em; - } } &.sysprefs { @@ -1186,6 +1132,7 @@ div { margin-right: 1em; padding-top: 0; text-align: left; + vertical-align: top; width: 9em; white-space: normal; } @@ -1233,11 +1180,6 @@ div { } } -#reserves, -#checkouts { - padding: 1em; -} - #sales { display: none; } @@ -1329,8 +1271,6 @@ dd { } .patroninfo-section { - padding: .5em; - margin: .5em 0; @include card; } @@ -1430,11 +1370,13 @@ dd { .dropdown-menu { background-color: #F3F4F4; + li { list-style-type: none; a { color: #000; + padding: .4em 20px; &:hover { background-color: #DADADA; @@ -1508,13 +1450,13 @@ input[type='text']:read-only:focus { } .error { - color: #CC0000; + color: $warning-text-color; } // Font Awesome icons i { &.error { - color: #CC0000; + color: $warning-text-color; } &.success { @@ -1527,12 +1469,15 @@ i { } .circ-setting { - font-size: 85%; - padding-top: .9em; - padding-bottom: .9em; + font-size: 95%; + padding: .3em 0; input { vertical-align: middle; + + &.flatpickr-input { + max-width: 11em; + } } label { @@ -1542,6 +1487,7 @@ i { } .circ-settings { + border-top: 2px solid #EEE; border-radius: 0; display: none; margin-left: -1em; @@ -1611,16 +1557,10 @@ i { @include card; } -#circ_needsconfirmation { - margin: auto; -} - .dialog { - border-radius: 2px; margin: 1em auto; padding: .5em; text-align: center; - display: table; width: 65%; max-width: 600px; @@ -1633,9 +1573,7 @@ i { button, a.approve { background: #FFF none; - border: 1px outset #999999; - border-left-color: #666; - border-top-color: #666; + border: 1px solid #555; margin: .4em; padding: .4em; white-space: pre-line; @@ -1742,7 +1680,7 @@ i { } &.message { - background-color: #ffffff; + background-color: #CFE2FF; text-align: center; ul, @@ -1758,7 +1696,7 @@ i { &.alert, &.error { - background-color: rgb(255, 237, 135); + background-color: rgb( 255, 237, 135 ); color: inherit; text-align: center; text-shadow: none; @@ -1794,7 +1732,7 @@ i { .deny { i { &.fa { - color: #CC0000; + color: $warning-text-color; } } } @@ -2086,9 +2024,9 @@ li { } #patron_search_selected { - background-color: #F9FEFF; - border: 1px solid #B9D8D9; - border-color: #A2CBCC #CEE0E3 #CEE0E3 #A2CBCC; + 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-radius: 3px; color: #333; display: inline-block; @@ -2158,12 +2096,6 @@ li { text-align: center; } -.custom_cover_image { - img { - max-width: 140px; - } -} - #biblio-cover-slider { border: 1px solid #bfd9b9; border-radius: 3px; @@ -2191,6 +2123,9 @@ li { } td { + &.actions { + white-space: nowrap; + } &.bookcoverimg { background: #FFF url("../img/spinner-small.gif") center center no-repeat; min-width: 120px; @@ -2240,6 +2175,12 @@ td { } } +.custom_cover_image { + img { + max-width: 140px; + } +} + .cover-nav { display: inline-block; padding: 3px 4px; @@ -2416,7 +2357,6 @@ td.bundle { .results_summary { color: #202020; display: block; - font-size: 85%; padding: 0 0 .5em; a { @@ -2442,15 +2382,15 @@ td.bundle { a, span { - background-color: #E4ECF5; - border: 1px solid #A4BEDD; + background-color: lighten( $background-color-secondary, 50 ); + border: 1px solid lighten( $background-color-secondary, 15 ); border-radius: 4px; font-weight: bold; padding: .1em .4em; text-decoration: none; &:hover { - background-color: #EBEFF7; + background-color: lighten( $background-color-secondary, 40 ) } } } @@ -2574,7 +2514,7 @@ td.bundle { text-shadow: 0 -1px 0 #666; &:hover { - color: #CC0000; + color: $warning-text-color; } } } @@ -2597,7 +2537,7 @@ td.bundle { text-shadow: 0 -1px 0 #666; &:hover { - color: #CC0000; + color: $warning-text-color; } } } @@ -2703,6 +2643,7 @@ td.bundle { box-shadow: 2px 2px 2px rgba(0, 0, 0, .3); cursor: default; position: absolute; + z-index: 2000; &.ui-menu { li { @@ -2726,6 +2667,9 @@ td.bundle { .ui-state-active, .ui-state-focus { + background: #e3f1df none; + color: #212121; + font-weight: normal; margin: 0; } } @@ -2822,104 +2766,13 @@ td.bundle { } } -.statictabs { - @include card; - - margin-top: 20px; - 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 { - line-height: 1.3; - margin: 0; - outline: 0 none; - padding: .2em .2em 0; - text-decoration: none; - display: flex; - - li { - list-style-type: none; - margin-right: .4em; - - a { - background-color: $background-color-secondary; - border-radius: 4px 4px 0 0; - color: #111; - display: inline-block; - padding: .5em 1em; - text-decoration: none; - white-space: nowrap; - } - - &.active, - &:hover { - a { - background-color: $background-color-primary; - color: #fff; - } - } - - } - } - - .tabs-container { - border: 2px solid $background-color-primary; - border-radius: 4px; - display: block; - padding: 1em 1.4em; - } -} - .toptabs { margin-top: 5px; - .ui-tabs-panel { - fieldset { - box-shadow: none; - } - } +} + +fieldset > .toptabs { + background-color: #F3F4F4; + padding: 1em; } .authref { @@ -2986,7 +2839,7 @@ td.bundle { margin-bottom: 1em; a { - color: #069; + color: $green-text-color; font-weight: normal; text-decoration: underline; @@ -2994,7 +2847,7 @@ td.bundle { &.jstree-hovered { background: transparent none; box-shadow: none; - color: #005580; + color: darken( $green-text-color, 5 ); } &.jstree-clicked { @@ -3090,7 +2943,9 @@ nav { font-style: italic; &+li::before { - content: '/'; + background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1yaWdodCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy4zNyAwbDUuMzUgNy4zYy4yLjIuMi41MSAwIC43bC01LjM4IDhoLTQuMmw1LjY0LTguMzVMMy4xMy4wMXoiLz48L3N2Zz4=") 50% 50% no-repeat; + background-size: 8px; + content: ""; display: inline-block; height: .8em; width: .8em; @@ -3135,31 +2990,41 @@ nav { button, .btn { - 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; + @include default-button; + + &.btn-default { + color: #555; + } &.btn-link { + background: transparent none; border: 0; } -} -#merge-patrons { - padding: 0 25px; -} + &.btn-primary { + @include primary-button; -#patronlist-menu { - padding: 0 25px; + &.dropdown-toggle { + border-left: 1px solid darken( saturate( $btn-primary, 15 ), 15 ); + } + } + + &.btn-danger { + background-color: #CC3333; + border-color: #9B2323; + color: #fff; + } + + &.btn-danger:hover { + color: #fff; + background-color: #c82333; + border-color: #a81c29; + } + + &.btn-danger:not( :disabled ):not( .disabled ).active, + &.btn-danger:not( :disabled ):not( .disabled ):active { + box-shadow: inset 0 0 0 1px #a81c29; + } } .btn-xs, @@ -3171,11 +3036,11 @@ button, /* Bootstrap Collapse */ .panel { - background: #F4F8F9 none; + background: #F7F9F6 none; box-shadow: none; &:hover { - background: #e3f1df none; + background: #E3F1DF none; } } @@ -3277,12 +3142,6 @@ button, } } -.loggedout { - color: #004D99; - font-weight: bold; - padding: .4em .2em; -} - .navbar-fixed-bottom { .navbar-inner { min-height: 0; @@ -3325,7 +3184,7 @@ button, } .separator { - color: #666; + color: #bfbfbf; padding: 0 .2em; } @@ -3386,28 +3245,33 @@ label { } } -.modal-header { - .closebtn { - margin-top: 4px; - } -} - .closebtn { color: #000; - filter: alpha(opacity = 20); + cursor: pointer; float: right; font-size: 21px; font-weight: bold; line-height: 1; - opacity: .2; + margin-top: 4px; + text-decoration: none; + text-shadow: 0 1px 0 rgba( 255, 255, 255, .4 ); - &:hover, - &:focus { + &:focus, + &:hover { + text-shadow: 0 1px 0 rgba( 255, 255, 255, .6 ); + } + + &:active { + box-shadow: none; + text-shadow: 0 1px 0 rgba( 255, 255, 255, .9 ); + } +} + +.modal-header { + border-bottom: 1px solid $background-color-secondary; + + h3 { color: #000; - cursor: pointer; - filter: alpha(opacity = 50); - opacity: .5; - text-decoration: none; } } @@ -3425,24 +3289,36 @@ label { } .modal-content { - background-color: rgb(211, 223, 204); + background-color: $background-color-modal; fieldset { box-shadow: none; } } +.modal-footer { + border-top: 1px solid $background-color-secondary; +} + .btn-group { label, select { font-size: 13px; } + + > .btn:first-child:not( :last-child ):not( .dropdown-toggle ) { + border-right: 1px solid darken( saturate( $btn-primary, 15 ), 15 ); + } } .tooltip-inner { white-space: pre-wrap; } +.wrapfix { + white-space: pre-wrap; +} + pre { background-color: transparent; border: 0; @@ -3472,28 +3348,35 @@ code { .tab-content { background-color: #fff; - border: 2px solid $background-color-primary; - border-radius: 4px; + border: 0; + border-radius: 0; padding: 1em; } .nav-tabs { + border-bottom: 0; + padding: .2em 1.4em 0 0; + > li { + margin-bottom: -2px; + > a { - background-color: $background-color-secondary; - border-radius: 4px 4px 0 0; - border-color: $background-color-secondary; - color: #111; + background-color: $background-color-primary; + border: 2px solid $background-color-primary; + border-bottom: 0; + border-radius: 0; + color: #FFF; + font-weight: bold; line-height: 1.3; margin-right: .4em; padding: .5em 1em; &:hover, &:focus, &:active { background-color: $background-color-primary; - border-color: $background-color-primary; + border: 2px solid $background-color-primary; + border-bottom: 0; padding: .5em 1em; text-decoration: none; - color: #FFFFFF; } } @@ -3501,9 +3384,11 @@ code { a, a:hover, a:focus { - background-color: $background-color-primary; - color: #FFFFFF; + background-color: #FFF; + border: 2px solid #FFF; + color: #111; cursor: default; + padding: .5em 1em; } } } @@ -3653,7 +3538,7 @@ span { } &.circ-hlt { - color: #CC0000; + color: $warning-text-color; font-weight: bold; } @@ -3668,7 +3553,7 @@ span { } &.required { - color: #C00; + color: $warning-text-color; font-style: italic; margin-left: .5em; } @@ -3808,7 +3693,7 @@ input.renew { } .onsite_checkout { - color: #CC0000; + color: $warning-text-color; } .onsite-checkout-only { @@ -4279,7 +4164,7 @@ input.renew { cursor: pointer; &:hover { - color: #004d99; + color: $green-text-color; } } }