From 0ae0f8a51464471868a5b931eb03fcbf80021e13 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Fri, 24 Sep 2021 16:57:00 +0000 Subject: [PATCH] Bug 29036: (follow-up) Improve the use of variables to keep colors consistent This patch modifies the OPAC SCSS so that a "base theme color" variable is defined which can be used to color button backgrounds and similar elements. The patch also moves some other colors into variables and removes some unused CSS. The Koha logo which is displayed in the upper left corner of the OPAC has been modified to use the same color. To test, apply the patch and repeat the previous test plan. --- .../opac-tmpl/bootstrap/css/src/_common.scss | 95 +++++++------------ .../opac-tmpl/bootstrap/css/src/opac.scss | 4 +- .../bootstrap/images/koha-green-logo.svg | 2 +- 3 files changed, 36 insertions(+), 65 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss index a1b2205497..0dff93e074 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss @@ -14,9 +14,7 @@ $h4-font-size: $font-size-base * 1.2; $h5-font-size: $font-size-base * 1.1; $h6-font-size: $font-size-base; -$input-btn-focus-width: 1px; -$input-btn-focus-color: #85CA11; -$input-btn-focus-box-shadow: 0 1px 1px $input-btn-focus-width $input-btn-focus-color; +$base-theme-color: #548300; $color: #999999; $links: #0076B2; @@ -35,7 +33,7 @@ $sci-heading-color: #727272; } @mixin input-focus { - border-color: #85CA11; + border-color: $base-theme-color; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(194, 228, 136, .6); } @@ -119,29 +117,6 @@ caption { text-align: left; } -h1 { - &#libraryname { - background: transparent url( "../images/logo-koha.png" ) no-repeat scroll 0%; - border: 0; - float: left !important; - margin: 0; - padding: 0; - width: 120px; - - a { - border: 0; - cursor: pointer; - display: block; - height: 0 !important; - margin: 0; - overflow: hidden; - padding: 40px 0 0; - text-decoration: none; - width: 120px; - } - } -} - .dropdown-menu-right { left: auto; right: 0; @@ -204,11 +179,8 @@ h1 { } .btn-primary { - $base-bg: #548300; - background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg); - background-color: $base-bg; - background-position: 0; - border: 1px solid darken($base-bg, 5%); + background-color: $base-theme-color; + border: 1px solid darken($base-theme-color, 10%); color: #FFF; &:link, @@ -218,15 +190,14 @@ h1 { &:hover, &:active { - $base-bg: darken( $base-bg, 2); - background-color: $base-bg; - border-color: darken($base-bg, 5%); - box-shadow: 0 0 0 1px lighten(saturate($base-bg, 0.5), 4); + background-color: $base-theme-color; + border-color: lighten($base-theme-color, 5%); + box-shadow: 0 0 0 1px lighten(saturate($base-theme-color, 0.5), 4); color: #FFF; } &:focus { - box-shadow: 0 0 0 2px lighten($base-bg, 10%); + box-shadow: 0 0 0 2px lighten($base-theme-color, 10%); } } @@ -294,7 +265,7 @@ select, textarea, .form-control { &:focus { - border-color: #85ca11; + border-color: $base-theme-color; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194,228,136,.6) } } @@ -315,10 +286,10 @@ textarea, vertical-align: middle; &:hover { - color: #005580; + color: $links-hover; &::before { - color: #44AE89; + color: #338468; } } @@ -442,7 +413,7 @@ div.dt-button-collection button.dt-button.buttons-columnVisibility.active:not(.d } div.dt-button-collection button.dt-button.buttons-columnVisibility.active:before { - color: #538200; + color: $base-theme-color; content: "\f00c"; display: inline-block; font-family: FontAwesome; @@ -503,7 +474,7 @@ div.dt-button-collection button.dt-button.buttons-print:not(.disabled):before { margin-top: -100px; margin-left: -200px; background-color: #FFF; - border: 2px solid #005580; + border: 2px solid $links-hover; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); border-radius: 3px; text-align: center; @@ -554,7 +525,7 @@ div.dt-button-collection button.dt-button.buttons-print:not(.disabled):before { .buttons-renewall { &:hover { i.fa { - color: #44AE89; + color: #338468; } } } @@ -932,7 +903,7 @@ ul { } .close:hover { - color: #005580; + color: $links-hover; filter: inherit; font-size: inherit; opacity: inherit; @@ -1092,15 +1063,15 @@ button { > a { &:focus { .caret { - border-bottom-color: #85CA11; - border-top-color: #85CA11; + border-bottom-color: $base-theme-color; + border-top-color: $base-theme-color; } } &:hover { .caret { - border-bottom-color: #85CA11; - border-top-color: #85CA11; + border-bottom-color: $base-theme-color; + border-top-color: $base-theme-color; } } } @@ -1137,11 +1108,11 @@ button { text-shadow: none; &:hover { - color: #85CA11; + color: $base-theme-color; } &:focus { - color: #85CA11; + color: $base-theme-color; } } @@ -1149,15 +1120,15 @@ button { > a { &:hover { .caret { - border-bottom-color: #85CA11; - border-top-color: #85CA11; + border-bottom-color: $base-theme-color; + border-top-color: $base-theme-color; } } &:focus { .caret { - border-bottom-color: #85CA11; - border-top-color: #85CA11; + border-bottom-color: $base-theme-color; + border-top-color: $base-theme-color; } } } @@ -1165,15 +1136,15 @@ button { &.open { > .dropdown-toggle { background-color: transparent; - color: #85CA11; + color: $base-theme-color; .caret { - border-bottom-color: #85CA11; - border-top-color: #85CA11; + border-bottom-color: $base-theme-color; + border-top-color: $base-theme-color; &:hover { - border-bottom-color: #85CA11; - border-top-color: #85CA11; + border-bottom-color: $base-theme-color; + border-top-color: $base-theme-color; } } } @@ -1231,7 +1202,7 @@ button { a { &:hover { - color: #85CA11; + color: $base-theme-color; } } @@ -1273,10 +1244,10 @@ button { > a { font-size: 90%; &:hover { - background: #85ca11 none; + background: $base-theme-color none; } &:focus { - background: #85ca11 none; + background: $base-theme-color none; } } } diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index c665cfea5d..f66d6ce869 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -280,7 +280,7 @@ th { span { @include border-radius-all( 3px ); - background-color: #85ca11; + background-color: $base-theme-color; color: #FFF; display: inline; font-family: 'NotoSans'; @@ -471,7 +471,7 @@ th { &:hover { i { &.fa { - color: #44AE89; + color: #338468; } } } diff --git a/koha-tmpl/opac-tmpl/bootstrap/images/koha-green-logo.svg b/koha-tmpl/opac-tmpl/bootstrap/images/koha-green-logo.svg index 3c8b805313..95a14ff67d 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/images/koha-green-logo.svg +++ b/koha-tmpl/opac-tmpl/bootstrap/images/koha-green-logo.svg @@ -1 +1 @@ - \ No newline at end of file + -- 2.20.1