Attachment 125294 Details for Bug 29036 – Bug 29036: (follow-up) Improve the use of variables to keep colors consistent

[patch] Bug 29036: (follow-up) Improve the use of variables to keep colors consistent

Bug-29036-follow-up-Improve-the-use-of-variables-t.patch (text/plain), 15.27 KB, created by Owen Leonard on 2021-09-24 18:04:06 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2021-09-24 18:04:06 UTC

Size: 15.27 KB

patch

obsolete

>From 0ae0f8a51464471868a5b931eb03fcbf80021e13 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>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 @@
>-<svg xmlns="http://www.w3.org/2000/svg" width="80" height="22.939"><path fill="#85ca11" d="M8.54 1.1C9.7.4 11.04.05 12.38 0a6.03 6.05 0 0 1 5.16 3.1 10.3 10.32 0 0 1 1.23 4.13 18.86 18.9 0 0 1-4.4 13.16 8.42 8.45 0 0 1-4.28 2.48 5.37 5.4 0 0 1-3.97-.97c-.7-.5-.96-1.4-.92-2.23.63.86 1.6 1.45 2.7 1.5.95.02 1.9-.4 2.55-1.12a3.45 3.46 0 0 0 .18-4.42c-.46-.54-1-1.03-1.65-1.37a5.78 5.8 0 0 0-2.08-.63 7.23 7.26 0 0 0-3.88.8 4.67 4.7 0 0 0-2.24 3.1c-.28 1-.17 2.06-.07 3.05-.43-1.14-.6-2.4-.7-3.62v-.9A19.3 19.35 0 0 1 5.03 3.83C6.06 2.76 7.2 1.78 8.53 1.1zm15.54.8c1.58.05 3.17 0 4.7-.38-1.16 4.05-2.32 8.08-3.48 12.13.14-.08.27-.18.4-.3 1.42-1.26 2.8-2.6 4.24-3.85.67-.55 1.37-1.17 2.23-1.35.4-.1.88-.07 1.2.23.72.65.65 1.92-.08 2.54-.4.35-.98.42-1.46.28-.4-.1-.62-.5-.97-.7-.55 0-1.03.35-1.46.67-.87.75-1.73 1.53-2.62 2.26-.03.12.1.23.13.35.9 1.58 1.8 3.18 2.68 4.78.32.5.64 1.07 1.16 1.42.27.2.7.16.92-.06.48-.4.82-.94 1.05-1.5.28 0 .55 0 .8 0-.33.9-.75 1.82-1.4 2.58-.45.54-1.1 1.03-1.83 1-.64.02-1.2-.35-1.62-.8-.66-.75-1.12-1.66-1.6-2.54-.72-1.24-1.4-2.5-2.1-3.75-.63 2.22-1.2 4.46-1.85 6.66-.73 0-1.5 0-2.2 0 1.43-5.16 2.85-10.32 4.3-15.5.24-.85.56-1.7.54-2.58 0-.32-.2-.65-.53-.72-.45-.1-.9-.03-1.36-.04.08-.27.15-.53.23-.78zm29.7 0c1.58.04 3.17.04 4.7-.38-.9 3.33-1.9 6.65-2.82 10a9.93 9.96 0 0 1 2.8-2.78 4.16 4.17 0 0 1 2.9-.57c.7.12 1.37.57 1.67 1.26.25.52.27 1.1.2 1.68-.14 1.52-.8 2.93-1.3 4.36-.4 1.2-.87 2.4-1.27 3.6-.13.46-.34 1-.2 1.5.12.33.58.37.9.25.3-.15.56-.38.8-.65.4-.57.8-1.2.96-1.9.3 0 .57 0 .88 0a5.46 5.48 0 0 1-1.86 3.1c-.7.56-1.72.76-2.57.47-.76-.25-1.23-1.03-1.26-1.8-.03-.8.24-1.6.47-2.36.43-1.33.96-2.63 1.45-3.94.45-1.22.93-2.45.93-3.76a.8.8 0 0 0-.6-.78c-.9-.16-1.77.23-2.46.76a9.1 9.13 0 0 0-2.25 2.86c-.9 1.57-1.48 3.33-1.94 5.07-.36 1.2-.7 2.43-1.05 3.64h-2.22c1.03-3.7 2.06-7.44 3.1-11.16.54-2 1.13-4 1.65-6 .08-.42.28-.86.12-1.28-.04-.23-.27-.34-.46-.34-.5-.1-.98-.04-1.5-.05.1-.26.2-.52.24-.78zM43.6 8.1a6.57 6.6 0 0 0-3.1.73 9.26 9.28 0 0 0-4.1 9.14c.2 1.38.9 2.72 2.13 3.44 1 .62 2.22.66 3.33.47a6.35 6.37 0 0 0 3.48-1.84c.84-.83 1.5-1.83 1.96-2.93.6-1.54.84-3.24.6-4.88a5.14 5.16 0 0 0-1.8-3.33 4.4 4.4 0 0 0-2.5-.8zm.02.75c.46 0 .9.14 1.23.46.58.52.74 1.32.83 2.07a13.63 13.67 0 0 1-2.27 8.3 3.54 3.55 0 0 1-2.3 1.52c-.62.07-1.32-.04-1.77-.5-.58-.6-.7-1.44-.77-2.22-.1-1.95.32-3.88 1.05-5.67.4-.9.8-1.82 1.44-2.6.46-.56 1.05-1.05 1.76-1.25.26-.08.54-.1.8-.1zm29.74-.76c-.12 0-.23 0-.32 0a5.18 5.2 0 0 0-3.5 1.55 10.2 10.22 0 0 0-2.8 8.54c.18 1.2.67 2.45 1.7 3.22.8.6 1.95.64 2.9.4a5.78 5.8 0 0 0 3.2-2.53c.05.73.18 1.53.68 2.12.46.54 1.26.65 1.92.44.62-.2 1.14-.65 1.53-1.15.64-.8 1.06-1.73 1.35-2.7-.26 0-.53 0-.8.02-.23.86-.7 1.62-1.18 2.34-.28.32-.6.76-1.08.68-.32-.08-.44-.46-.46-.75-.08-.87.06-1.73.3-2.57.87-3.07 1.76-6.13 2.63-9.2-.75 0-1.5 0-2.25 0-.26.9-.54 1.85-.8 2.8 0-.9-.37-1.75-1-2.36a2.96 2.97 0 0 0-2-.88zm.08 1.07c.45 0 .93.1 1.3.42.56.5.74 1.3.82 2.03.23 2.4-.42 4.8-1.53 6.9-.5.92-1.2 1.86-2.23 2.2-.63.2-1.4.23-1.96-.15-.68-.42-.83-1.28-.9-2-.05-1.37.13-2.73.47-4.06.4-1.37.88-2.77 1.72-3.95.44-.62 1.08-1.15 1.85-1.34.16-.03.3-.05.46-.05z"/></svg>
>\ No newline at end of file
>+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="22.939"><path fill="#518000" d="M8.54 1.1C9.7.4 11.04.05 12.38 0a6.03 6.05 0 0 1 5.16 3.1 10.3 10.32 0 0 1 1.23 4.13 18.86 18.9 0 0 1-4.4 13.16 8.42 8.45 0 0 1-4.28 2.48 5.37 5.4 0 0 1-3.97-.97c-.7-.5-.96-1.4-.92-2.23.63.86 1.6 1.45 2.7 1.5.95.02 1.9-.4 2.55-1.12a3.45 3.46 0 0 0 .18-4.42c-.46-.54-1-1.03-1.65-1.37a5.78 5.8 0 0 0-2.08-.63 7.23 7.26 0 0 0-3.88.8 4.67 4.7 0 0 0-2.24 3.1c-.28 1-.17 2.06-.07 3.05-.43-1.14-.6-2.4-.7-3.62v-.9A19.3 19.35 0 0 1 5.03 3.83C6.06 2.76 7.2 1.78 8.53 1.1zm15.54.8c1.58.05 3.17 0 4.7-.38-1.16 4.05-2.32 8.08-3.48 12.13.14-.08.27-.18.4-.3 1.42-1.26 2.8-2.6 4.24-3.85.67-.55 1.37-1.17 2.23-1.35.4-.1.88-.07 1.2.23.72.65.65 1.92-.08 2.54-.4.35-.98.42-1.46.28-.4-.1-.62-.5-.97-.7-.55 0-1.03.35-1.46.67-.87.75-1.73 1.53-2.62 2.26-.03.12.1.23.13.35.9 1.58 1.8 3.18 2.68 4.78.32.5.64 1.07 1.16 1.42.27.2.7.16.92-.06.48-.4.82-.94 1.05-1.5.28 0 .55 0 .8 0-.33.9-.75 1.82-1.4 2.58-.45.54-1.1 1.03-1.83 1-.64.02-1.2-.35-1.62-.8-.66-.75-1.12-1.66-1.6-2.54-.72-1.24-1.4-2.5-2.1-3.75-.63 2.22-1.2 4.46-1.85 6.66-.73 0-1.5 0-2.2 0 1.43-5.16 2.85-10.32 4.3-15.5.24-.85.56-1.7.54-2.58 0-.32-.2-.65-.53-.72-.45-.1-.9-.03-1.36-.04.08-.27.15-.53.23-.78zm29.7 0c1.58.04 3.17.04 4.7-.38-.9 3.33-1.9 6.65-2.82 10a9.93 9.96 0 0 1 2.8-2.78 4.16 4.17 0 0 1 2.9-.57c.7.12 1.37.57 1.67 1.26.25.52.27 1.1.2 1.68-.14 1.52-.8 2.93-1.3 4.36-.4 1.2-.87 2.4-1.27 3.6-.13.46-.34 1-.2 1.5.12.33.58.37.9.25.3-.15.56-.38.8-.65.4-.57.8-1.2.96-1.9.3 0 .57 0 .88 0a5.46 5.48 0 0 1-1.86 3.1c-.7.56-1.72.76-2.57.47-.76-.25-1.23-1.03-1.26-1.8-.03-.8.24-1.6.47-2.36.43-1.33.96-2.63 1.45-3.94.45-1.22.93-2.45.93-3.76a.8.8 0 0 0-.6-.78c-.9-.16-1.77.23-2.46.76a9.1 9.13 0 0 0-2.25 2.86c-.9 1.57-1.48 3.33-1.94 5.07-.36 1.2-.7 2.43-1.05 3.64h-2.22c1.03-3.7 2.06-7.44 3.1-11.16.54-2 1.13-4 1.65-6 .08-.42.28-.86.12-1.28-.04-.23-.27-.34-.46-.34-.5-.1-.98-.04-1.5-.05.1-.26.2-.52.24-.78zM43.6 8.1a6.57 6.6 0 0 0-3.1.73 9.26 9.28 0 0 0-4.1 9.14c.2 1.38.9 2.72 2.13 3.44 1 .62 2.22.66 3.33.47a6.35 6.37 0 0 0 3.48-1.84c.84-.83 1.5-1.83 1.96-2.93.6-1.54.84-3.24.6-4.88a5.14 5.16 0 0 0-1.8-3.33 4.4 4.4 0 0 0-2.5-.8zm.02.75c.46 0 .9.14 1.23.46.58.52.74 1.32.83 2.07a13.63 13.67 0 0 1-2.27 8.3 3.54 3.55 0 0 1-2.3 1.52c-.62.07-1.32-.04-1.77-.5-.58-.6-.7-1.44-.77-2.22-.1-1.95.32-3.88 1.05-5.67.4-.9.8-1.82 1.44-2.6.46-.56 1.05-1.05 1.76-1.25.26-.08.54-.1.8-.1zm29.74-.76c-.12 0-.23 0-.32 0a5.18 5.2 0 0 0-3.5 1.55 10.2 10.22 0 0 0-2.8 8.54c.18 1.2.67 2.45 1.7 3.22.8.6 1.95.64 2.9.4a5.78 5.8 0 0 0 3.2-2.53c.05.73.18 1.53.68 2.12.46.54 1.26.65 1.92.44.62-.2 1.14-.65 1.53-1.15.64-.8 1.06-1.73 1.35-2.7-.26 0-.53 0-.8.02-.23.86-.7 1.62-1.18 2.34-.28.32-.6.76-1.08.68-.32-.08-.44-.46-.46-.75-.08-.87.06-1.73.3-2.57.87-3.07 1.76-6.13 2.63-9.2-.75 0-1.5 0-2.25 0-.26.9-.54 1.85-.8 2.8 0-.9-.37-1.75-1-2.36a2.96 2.97 0 0 0-2-.88zm.08 1.07c.45 0 .93.1 1.3.42.56.5.74 1.3.82 2.03.23 2.4-.42 4.8-1.53 6.9-.5.92-1.2 1.86-2.23 2.2-.63.2-1.4.23-1.96-.15-.68-.42-.83-1.28-.9-2-.05-1.37.13-2.73.47-4.06.4-1.37.88-2.77 1.72-3.95.44-.62 1.08-1.15 1.85-1.34.16-.03.3-.05.46-.05z"/></svg>
>-- 
>2.20.1

Actions: View | Diff | Splinter Review

Attachments on bug 29036: 125080 | 125293 | 125294 | 126036 | 126055 | 126056 | 126659 | 126660 | 126806 | 126807 | 127177 | 127873 | 127874