From d33817264e4a3688cea310e05d138c89d89a5c80 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Wed, 21 Oct 2020 01:48:12 +0000 Subject: [PATCH] Bug 26706: Fix btn-default styling for better contrast This patch makes some updates to the OPAC's CSS in order to make Bootstrap button styles more consistent. Some CSS has been simplified and some has been made more specific. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). View a variety of pages in the OPAC to confirm that button styles look good. For example: - Advanced search. - Catalog search results. - Bibligraphic details (including sidebar menu links and menus). - Subscription details, brief and full - "Your summary" page, various tabs. - Lists The more pages tested the better! Be sure to test the hover and active states of buttons as well. --- koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss | 142 +++++++++++---------- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 19 ++- 2 files changed, 83 insertions(+), 78 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss index 0d3500ee7d..5fdaaea52d 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss @@ -95,18 +95,6 @@ a { &:link, &:visited { color: $links; - - &.btn { - color: #FFF; - - &.btn-link { - color: $links; - - &.disabled { - color: #333; - } - } - } } } @@ -115,22 +103,6 @@ button { &:hover, &:active { color: $links-hover; - - &.btn { - color: #FFF; - - &.btn-link {} - } - } - - &.btn-link { - - &:focus, - &:hover { - // border: 1px solid $input-btn-focus-color; - box-shadow: none; - text-decoration: none; - } } } @@ -222,43 +194,88 @@ h1 { } } -.btn-primary, -.btn-primary:link, -.btn-primary:visited { +.btn-primary { $base-bg: #77b50f; + background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg); background-color: $base-bg; - background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg ); background-position: 0; - border: 1px solid darken( $base-bg, 5% ); - font-family: 'NotoSans'; + border: 1px solid darken($base-bg, 5%); + color: #FFF; + + &:link, + &:visited { + color: #FFF; + } &:hover, - &:active, - &:focus { + &:active { $base-bg: darken( $base-bg, 2); background-color: $base-bg; - background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg ); border-color: darken($base-bg, 5%); box-shadow: 0 0 0 1px lighten(saturate($base-bg, 0.5), 4); + color: #FFF; + } + + &:focus { + box-shadow: 0 0 0 2px lighten($base-bg, 10%); } } -.btn-danger, -.btn-danger:link, -.btn-danger:visited { +.btn-danger { $base-bg: #B92020; background-color: $base-bg; background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg ); background-position: 0; border: 1px solid darken( $base-bg, 5% ); - font-family: 'NotoSans'; + color: #FFF; + + &:link, + &:visited { + color: #FFF; + } &:hover, - &:active, - &:focus { + &:active { $base-bg: darken( $base-bg, 2); background-color: $base-bg; background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg ); + color: #FFF; + } + + &:focus { + box-shadow: 0 0 0 2px lighten($base-bg, 10%); + } +} + +.btn-default, +.btn-secondary { + $base-bg: #e6e6e6; + background-color: $base-bg; + background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg); + background-position: 0; + border: 1px solid darken($base-bg, 20%); + color: #000; + + &:link, + &:visited { + color: #000; + } + + &:hover, + &:active { + $base-bg: darken($base-bg, 2); + background-color: $base-bg; + background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg); + color: #000; + } + + &:focus { + box-shadow: 0 0 0 2px darken($base-bg, 10%); + } + + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active { + color: #000; } } @@ -539,15 +556,6 @@ ul { background: #FFFFFF none; border: 1px solid #AAA; color: #222222; - - a:link, - a:visited { - color: $links; - } - a:hover, - a:active { - color: $links-hover; - } } .ui-widget-header { @@ -650,15 +658,6 @@ ul { } button { - &.btn-link { - color: $links; - &:focus, - &:hover { - color: $links-hover; - text-decoration: none; - } - } - &.closebtn { background: transparent; border: 0; @@ -679,13 +678,18 @@ button { } } -.btn-default { - color: #212529; - background-color: #666666; - border-color: #666666; -} - .btn-link { + color: $links; + + &:focus, + &:hover { + text-decoration: none; + } + + &:focus { + box-shadow: 0 0 0 1px lighten($links, 20%); + } + &.btn-lg { font-size: 100%; } @@ -973,6 +977,10 @@ button { } } +.dropdown-item:active { + background-color: $links; +} + #koha_url { p { color: #666666; diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index c78024c9f5..24f095c819 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -47,15 +47,13 @@ a { &:link, &:visited { - &.btn-link { - &.cartRemove { - color: #900; - font-size: 90%; - padding-left: 0; + &.cartRemove { + color: #900; + font-size: 90%; + padding-left: 0; - &:hover { - color: #c60000; - } + &:hover { + color: #c60000; } } } @@ -1299,7 +1297,6 @@ nav { clear: both; text-align: inherit; white-space: nowrap; - background-color: transparent; border: 0; } } @@ -1343,8 +1340,8 @@ nav { a { &:link, &:visited { - &.btn { - color: #FFF; + &.btn-default, + &.btn-secondary { } } } -- 2.11.0