From 0c956aefa277b9806d6066b102a46da25a18c311 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. Signed-off-by: jeremy breuillard Signed-off-by: Katrin Fischer Signed-off-by: Katrin Fischer Signed-off-by: Fridolin Somers Signed-off-by: Kyle M Hall (cherry picked from commit 31710ad447625901c168c124bc1164aa403f95e5) Signed-off-by: Andrew Fuerste-Henry --- .../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 af031c0138..efb7a976f2 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: #0074AD; @@ -37,7 +35,7 @@ $high-contrast-grey: #666666; } @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); } @@ -121,29 +119,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; @@ -206,11 +181,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, @@ -220,15 +192,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%); } } @@ -296,7 +267,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) } } @@ -317,10 +288,10 @@ textarea, vertical-align: middle; &:hover { - color: #005580; + color: $links-hover; &::before { - color: #44AE89; + color: #338468; } } @@ -444,7 +415,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; @@ -505,7 +476,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; @@ -556,7 +527,7 @@ div.dt-button-collection button.dt-button.buttons-print:not(.disabled):before { .buttons-renewall { &:hover { i.fa { - color: #44AE89; + color: #338468; } } } @@ -934,7 +905,7 @@ ul { } .close:hover { - color: #005580; + color: $links-hover; filter: inherit; font-size: inherit; opacity: inherit; @@ -1094,15 +1065,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; } } } @@ -1139,11 +1110,11 @@ button { text-shadow: none; &:hover { - color: #85CA11; + color: $base-theme-color; } &:focus { - color: #85CA11; + color: $base-theme-color; } } @@ -1151,15 +1122,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; } } } @@ -1167,15 +1138,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; } } } @@ -1233,7 +1204,7 @@ button { a { &:hover { - color: #85CA11; + color: $base-theme-color; } } @@ -1275,10 +1246,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 52b3565121..684dd9ed73 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -267,7 +267,7 @@ th { span { @include border-radius-all( 3px ); - background-color: #85ca11; + background-color: $base-theme-color; color: #FFF; display: inline; font-family: 'NotoSans'; @@ -454,7 +454,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.39.5