From bac90783a4712a55d958bda177d30a578a35452a 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 a1b2205..0dff93e 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 c665cfe..f66d6ce 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 3c8b805..95a14ff 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.25.1