@@ -, +, @@ - The login page - Circulation -> Checkouts -> Check out button (btn-primary) - Circulation -> Set library (input[type='submit']) - Cataloging -> Basic MARC editor (split button) - Patrons -> Sidebar filter (input[type='button']) - Circulation -> Checkouts -> Show checkouts (btn-default) --- koha-tmpl/intranet-tmpl/prog/css/login.css | 63 +++++-------------- .../intranet-tmpl/prog/css/src/_mixins.scss | 46 ++++++++++++-- .../intranet-tmpl/prog/css/src/_toolbar.scss | 4 ++ .../prog/css/src/_variables.scss | 2 + .../prog/css/src/staff-global.scss | 55 ++++++++-------- 5 files changed, 88 insertions(+), 82 deletions(-) --- a/koha-tmpl/intranet-tmpl/prog/css/login.css +++ a/koha-tmpl/intranet-tmpl/prog/css/login.css @@ -105,29 +105,6 @@ label { text-align: center; } -#login #submit-button, #login .button { - font-size: 1.4em; - padding : .3em .6em; - background: rgba(254, 195, 44, 1); - border: none; - color: #000; -} - -#login #submit-button:hover, #login #submit-button:focus, #login #submit-button:active { - background: rgba(254, 195, 44, 0.7); - border: none; -} - -#login #onerror_actions { - margin-bottom: 1em; - text-align: center; -} - -#login #onerror_actions .button { - margin: 3px; - color: #333333; -} - #footer { text-align: center; border-top: 1px solid #ccc; @@ -135,35 +112,25 @@ label { font-style: italic; } -.submit input, .submit input:focus, .button { - border: 1px outset #999999; - border-top-color: #666; - border-left-color: #666; - -moz-border-radius : 2px; - padding: 0.25em; - background: #ffffff; /* Old browsers */ - background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 35%, #e0e0e0 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(35%,#f7f7f7), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* Opera11.10+ */ - background: -ms-linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* IE10+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */ - background: linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* W3C */ - color: #333333; - padding: 0.25em; -} - -.submit input:active, .button:active { - background: #fff; - border: 1px solid #999; - border-left-color: #999; - border-top-color: #999; +.submit { + text-align: right; } -.submit, .editform th, #postcustomsubmit { - text-align: right; +#submit-button { + font-size: 135%; } +input[type="submit"]:active, +input[type="submit"]:focus { + box-shadow: inset 0 0 0 1px #edb423; +} + +input[type="submit"]:active, +input[type="submit"]:focus, +input[type="submit"]:hover { + background: #ffd15e none; + border: 1px solid #ffc32b; +} textarea, input, select { background: #fff; --- a/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss +++ a/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss @@ -8,24 +8,28 @@ $table-odd-row: #f3f4f4; $nav-menu-bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 25 25'%3E%3Cpath fill='%23999' d='M9.66.95h4.56l9.21 11.85-9.21 10.53H9.66l5.08-10.53z'/%3E%3C/svg%3E"); @mixin default-button { - background-color: #fff; - border: 1px solid #ccc; + background: #FFF none; + border: 1px solid #555; border-radius: 4px; - color: #333; + cursor: pointer; display: inline-block; font-size: inherit; + font-weight: normal; line-height: 1.42857143; + margin-bottom: 0; padding: .5em 1em; text-align: center; + touch-action: manipulation; + user-select: none; vertical-align: middle; white-space: nowrap; &:hover { background-color: #e0e0e0; - } - &:active { - box-shadow: inset 0 3px 5px rgba(0,0,0,0.125); + &:active { + box-shadow: none; + } } &:active:hover { @@ -34,6 +38,36 @@ $nav-menu-bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s } } +@mixin primary-button { + background: $btn-primary none; + border: 1px solid $btn-primary; + border-radius: 4px; + cursor: pointer; + display: inline-block; + font-size: inherit; + font-weight: normal; + line-height: 1.42857143; + margin-bottom: 0; + padding: .5em 1em; + text-align: center; + touch-action: manipulation; + user-select: none; + vertical-align: middle; + white-space: nowrap; + + &:hover, + &:active, + &:focus { + background: $btn-primary-hover none; + border: 1px solid $btn-primary; + } + + &:active, + &:focus { + box-shadow: inset 0 0 0 1px darken( desaturate( $btn-primary, 15 ), 5 ); + } +} + @mixin disabled-button { background: #EEE none; border: 1px solid #C0C0C0; --- a/koha-tmpl/intranet-tmpl/prog/css/src/_toolbar.scss +++ a/koha-tmpl/intranet-tmpl/prog/css/src/_toolbar.scss @@ -70,5 +70,9 @@ } } } + + &.btn-link { + font-size: 100%; + } } } --- a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss +++ a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss @@ -2,6 +2,8 @@ $green-text-color: #006100; $background-color-primary: #408540; $background-color-secondary: lighten(saturate(adjust-hue($background-color-primary, -24), 9), 9); $background-color-modal: lighten( saturate( $background-color-secondary, 5 ), 40 ); +$btn-primary: #FFC32B; +$btn-primary-hover: lighten( $btn-primary, 10 ); // Copied from Bootstrap 5 without system-ui because of // https://infinnie.github.io/blog/2017/systemui.html --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -14,7 +14,9 @@ .btn-success, .btn-info, .btn-warning, -.btn-danger { +.btn-danger, +button { + box-shadow: unset; text-shadow: unset; } @@ -566,7 +568,10 @@ textarea { } input { - &[type="submit"], + &[type="submit"] { + @include primary-button; + } + &[type="reset"], &[type="button"] { @include default-button; @@ -584,21 +589,12 @@ input { } &.submit { - @include default-button; + @include primary-button; &:disabled { @include disabled-button; } } - - &[type="submit"], &.submit { - background-color: #FEC32C; - border: 0; - - &:hover { - background-color: #fec22c9f; - } - } } .input-warning { @@ -1566,9 +1562,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; @@ -3064,23 +3058,24 @@ 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; } + + &.btn-primary { + @include primary-button; + + &.dropdown-toggle { + border-left: 1px solid darken( saturate( $btn-primary, 15 ), 15 ); + } + } } #merge-patrons { @@ -3375,6 +3370,10 @@ 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 { --