Merge pull request #2727 from jrester/dark-theme-fixes

Improve dark theme

cookbook/static/assets/recipe_no_image.svg

@@ -51,13 +51,6 @@
      inkscape:window-y="54"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg4" />
-  <rect
-     style="fill:#f5f5f6;fill-opacity:1;stroke:#d8dde0;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     id="rect817"
-     width="1717.1526"
-     height="1092.339"
-     x="-602.57629"
-     y="-290.16949" />
   <path
      d="m 235.62851,202.1526 c -3.38906,-0.31992 -6.54323,1.7722 -7.40937,5.07666 l -3.10593,11.84344 c 39.34747,1.15551 65.965,27.49017 67.63017,66.72064 l 11.9414,-3.32129 c 3.29677,-0.91767 5.34573,-4.14216 4.95356,-7.55606 -4.37894,-38.04972 -35.85985,-69.14953 -74.00983,-72.76339 z m -12.26226,23.57322 -20.94044,79.87325 a 3.3995443,3.4118034 0 0 0 4.19438,4.15688 L 286.10367,287.635 c -0.8955,-36.81001 -25.8122,-61.48823 -62.73742,-61.90076 z m 5.78824,63.9529 a 6.7110067,6.7352075 0 1 1 6.711,-6.73521 6.7110067,6.7352075 0 0 1 -6.711,6.73521 z M 239.221,257.68648 a 6.7110067,6.7352075 0 1 1 6.71101,-6.7352 6.7110067,6.7352075 0 0 1 -6.71101,6.7352 z m 21.81077,21.88943 a 6.7110067,6.7352075 0 1 1 6.71101,-6.73521 6.7110067,6.7352075 0 0 1 -6.71101,6.73521 z"
      id="path2"

cookbook/static/themes/tandoor.min.css

@@ -4634,13 +4634,15 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 .card-img-top {
     width: 100%;
     border-top-left-radius: calc(.25rem - 1px);
-    border-top-right-radius: calc(.25rem - 1px)
+    border-top-right-radius: calc(.25rem - 1px);
+    background-color: #f5f5f6;
 }
 
 .card-img-bottom {
     width: 100%;
     border-bottom-right-radius: calc(.25rem - 1px);
-    border-bottom-left-radius: calc(.25rem - 1px)
+    border-bottom-left-radius: calc(.25rem - 1px);
+    background-color: #f5f5f6;
 }
 
 .card-deck {

cookbook/static/themes/tandoor_dark.min.css

@@ -241,7 +241,7 @@ a {
 }
 
 a:hover {
-    color: #000;
+    color: #FFF;
     text-decoration: underline
 }
 
@@ -1813,8 +1813,8 @@ pre code {
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
-    color: #495057;
+    color: #fff;
-    background-color: #fff;
+    background-color: rgb(20,20,20);
     background-clip: padding-box;
     border: 1px solid #ced4da;
     border-radius: .25rem;
@@ -1835,8 +1835,8 @@ pre code {
 }
 
 .form-control:focus {
-    color: #495057;
+    color: #fff;
-    background-color: #fff;
+    background-color: rgb(20,20,20);
     border-color: #0014b7;
     outline: 0;
     box-shadow: 0 0 0 .2rem rgba(0, 6, 55, .25)
@@ -1868,8 +1868,8 @@ pre code {
 }
 
 .form-control:disabled, .form-control[readonly] {
-    background-color: #e9ecef;
+    background-color: #5D5D5D;
-    opacity: 1
+    opacity: 1;
 }
 
 select.form-control:focus::-ms-value {
@@ -2504,7 +2504,7 @@ a.btn.disabled, fieldset:disabled a.btn {
 
 .btn-light {
     color: #212529;
-    background-color: #cfd5cd;
+    background-color: #535353;
     border-color: #cfd5cd
 }
 
@@ -2570,7 +2570,7 @@ a.btn.disabled, fieldset:disabled a.btn {
 }
 
 .btn-outline-primary.focus, .btn-outline-primary:focus {
-    box-shadow: 0 0 0 .2rem rgba(0, 6, 55, .5)
+    box-shadow: 0 0 0 .2rem var(--primary)
 }
 
 .btn-outline-primary.disabled, .btn-outline-primary:disabled {
@@ -2776,7 +2776,7 @@ a.btn.disabled, fieldset:disabled a.btn {
 }
 
 .btn-link:hover {
-    color: #000;
+    color: #fff;
     text-decoration: underline
 }
 
@@ -3379,15 +3379,15 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .dropdown-item:focus, .dropdown-item:hover {
-    color: #16181b;
+    color: #fff !important;
     text-decoration: none;
-    background-color: #f8f9fa
+    background-color: #4E4E4E !important;
 }
 
 .dropdown-item.active, .dropdown-item:active {
     color: #fff;
     text-decoration: none;
-    background-color: #b98766
+    background-color: #b98766 !important;
 }
 
 .dropdown-item.disabled, .dropdown-item:disabled {
@@ -3603,10 +3603,10 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
-    color: #495057;
+    color: #fff;
     text-align: center;
     white-space: nowrap;
-    background-color: #e9ecef;
+    background-color: #3F3F3F;
     border: 1px solid #ced4da;
     border-radius: .25rem
 }
@@ -3676,7 +3676,7 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .custom-control-input:focus ~ .custom-control-label:before {
-    box-shadow: 0 0 0 .2rem rgba(0, 6, 55, .25)
+    box-shadow: 0 0 0 .2rem var(--primary)
 }
 
 .custom-control-input:focus:not(:checked) ~ .custom-control-label:before {
@@ -3927,10 +3927,11 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
     width: 100%;
     height: 1.4rem;
     padding: 0;
-    background-color: transparent;
+    background-color: transparent !important;
     -webkit-appearance: none;
     -moz-appearance: none;
-    appearance: none
+    appearance: none;
+    border: transparent !important;
 }
 
 .custom-range:focus {
@@ -3938,15 +3939,15 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .custom-range:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 6, 55, .25)
+    box-shadow: 0 0 0 1px #000, 0 0 0 .2rem rgba(0, 6, 55, .25)
 }
 
 .custom-range:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 6, 55, .25)
+    box-shadow: 0 0 0 1px #000, 0 0 0 .2rem rgba(0, 6, 55, .25)
 }
 
 .custom-range:focus::-ms-thumb {
-    box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 6, 55, .25)
+    box-shadow: 0 0 0 1px #000, 0 0 0 .2rem rgba(0, 6, 55, .25)
 }
 
 .custom-range::-moz-focus-outer {
@@ -3974,7 +3975,7 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .custom-range::-webkit-slider-thumb:active {
-    background-color: #0019ea
+    background-color: var(--secondary)
 }
 
 .custom-range::-webkit-slider-runnable-track {
@@ -3982,7 +3983,7 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
     height: .5rem;
     color: transparent;
     cursor: pointer;
-    background-color: #dee2e6;
+    background-color: #000;
     border-color: transparent;
     border-radius: 1rem
 }
@@ -4007,7 +4008,7 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .custom-range::-moz-range-thumb:active {
-    background-color: #0019ea
+    background-color: var(--secondary)
 }
 
 .custom-range::-moz-range-track {
@@ -4015,9 +4016,9 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
     height: .5rem;
     color: transparent;
     cursor: pointer;
-    background-color: #dee2e6;
+    background-color: rgb(20,20,20);
     border-color: transparent;
-    border-radius: 1rem
+    border-radius: 1rem;
 }
 
 .custom-range::-ms-thumb {
@@ -4042,7 +4043,7 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .custom-range::-ms-thumb:active {
-    background-color: #0019ea
+    background-color: var(--secondary)
 }
 
 .custom-range::-ms-track {
@@ -4144,8 +4145,8 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
-    color: #495057;
+    color: #fff;
-    background-color: #fff;
+    background-color: #303030;
     border-color: #dee2e6 #dee2e6 #fff
 }
 
@@ -4500,19 +4501,19 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 }
 
 .navbar-dark .navbar-nav .nav-link {
-    color: hsla(0, 0%, 18%, .5)
+    color: hsla(0, 0%, 5%, .5)
 }
 
 .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
-    color: hsla(0, 0%, 18%, .75)
+    color: hsla(0, 0%, 5%, .75)
 }
 
 .navbar-dark .navbar-nav .nav-link.disabled {
-    color: hsla(0, 0%, 18%, .25)
+    color: hsla(0, 0%, 5%, .25)
 }
 
 .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
-    color: #2e2e2e
+    color: #1E1E1E
 }
 
 .navbar-dark .navbar-toggler {
@@ -4636,13 +4637,15 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 .card-img-top {
     width: 100%;
     border-top-left-radius: calc(.25rem - 1px);
-    border-top-right-radius: calc(.25rem - 1px)
+    border-top-right-radius: calc(.25rem - 1px);
+    background-color: #141414;
 }
 
 .card-img-bottom {
     width: 100%;
     border-bottom-right-radius: calc(.25rem - 1px);
-    border-bottom-left-radius: calc(.25rem - 1px)
+    border-bottom-left-radius: calc(.25rem - 1px);
+    background-color: #141414;
 }
 
 .card-deck {
@@ -4776,7 +4779,7 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
     padding: .75rem 1rem;
     margin-bottom: 1rem;
     list-style: none;
-    background-color: #e9ecef;
+    background-color: #303030;
     border-radius: .25rem
 }
 
@@ -4846,16 +4849,16 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
 .page-item.active .page-link {
     z-index: 1;
     color: #fff;
-    background-color: #b98766;
+    background-color: var(--primary);
     border-color: #b98766
 }
 
 .page-item.disabled .page-link {
-    color: #6c757d;
+    color: #fff;
     pointer-events: none;
     cursor: auto;
-    background-color: #fff;
+    background-color: #303030;
-    border-color: #dee2e6
+    border-color: #303030
 }
 
 .pagination-lg .page-link {
@@ -5053,7 +5056,7 @@ a.badge-dark.focus, a.badge-dark:focus {
 .jumbotron {
     padding: 2rem 1rem;
     margin-bottom: 2rem;
-    background-color: #f7f7f7;
+    background-color: #3F3F3F;
     border-radius: .3rem
 }
 
@@ -5313,7 +5316,7 @@ a.badge-dark.focus, a.badge-dark:focus {
     display: block;
     padding: .75rem 1.25rem;
     margin-bottom: -1px;
-    background-color: #fff;
+    background-color: #3F3F3F;
     border: 1px solid rgba(0, 0, 0, .125)
 }
 
@@ -5611,13 +5614,13 @@ a.badge-dark.focus, a.badge-dark:focus {
     font-size: 1.5rem;
     font-weight: 700;
     line-height: 1;
-    color: #000;
+    color: #fff;
     text-shadow: 0 1px 0 #fff;
     opacity: .5
 }
 
 .close:hover {
-    color: #000;
+    color: #fff;
     text-decoration: none
 }
 
@@ -6164,7 +6167,8 @@ a.close.disabled {
 
 .popover-body {
     padding: .5rem .75rem;
-    color: #212529
+    color: #fff;
+    background-color: #242424;
 }
 
 .carousel {
@@ -10408,11 +10412,11 @@ footer a:hover {
 
 .form-control {
     font-size: 14px;
-    background-color: rgb(20 20 20);
+    background-color: rgb(20,20,20);
 }
 
 .form-control, .form-control:focus {
-    background-color: #f6f7fb;
+    background-color: rgb(20,20,20);
     border: none
 }
 
@@ -10456,24 +10460,63 @@ footer a:hover {
     background-color: transparent !important;
 }
 
-textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([class="select2-search__field"]):not([class="vue-treeselect__input"]), select {
+textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([class="select2-search__field"]):not([class="vue-treeselect__input"]):not([class="custom-range"]), select {S
     background-color: rgb(20 20 20);
     color: #fff;
     border-radius: .25rem !important;
     border: 1px solid #ced4da !important;
 }
 
-.multiselect__tag, .multiselect__option--highlight, .multiselect__option--highlight:after, .vue-treeselect__multi-value-item {
+.b-calendar-grid-help,
-    background-color: #cfd5cd !important;
+.v-note-op, 
-    color: #212529 !important;
+.v-note-show,
+.v-show-content,
+.op-icon.dropdown-item,
+.popup-dropdown,
+.content-input-wrapper, 
+.auto-textarea-input, 
+.bottom-action-bar,
+.custom-select,
+.multiselect__tag,
+.multiselect__tags, 
+.multiselect__input, 
+.multiselect__option--highlight, 
+.multiselect__option--highlight:after, 
+.multiselect__option--selected, 
+.multiselect__option--selected:after, 
+.vue-treeselect__multi-value-item {
+    background-color: rgb(20, 20, 20) !important;
+    color: #fff !important;
+}
+
+.op-icon:hover, .op-icon.selected {
+    background-color: #303030 !important;
+    color: #fff !important;
 }
 
 .multiselect__tag-icon:hover, .multiselect__tag-icon:focus {
-    background-color: #a7240e !important;
+    background-color: rgb(20, 20, 20) !important;
 }
 
 .multiselect__tag-icon:after, .vue-treeselect__icon vue-treeselect__value-remove, .vue-treeselect__value-remove {
-    color: #212529 !important
+    color: rgb(20, 20, 20) !important
+}
+
+.multiselect__input::placeholder {
+    color: #fff !important;
+}
+
+.multiselect__single, .multiselect__content-wrapper {
+    background-color: rgb(20,20,20) !important;
+}
+
+.multiselect__content-wrapper {
+    color: #7A7A7A;
+}
+
+.custom-select {
+    /* add the arrow on the right */
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center/8px 10px;
 }
 
 .form-control-search {
@@ -10484,3 +10527,38 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
     opacity: 0.5 !important;
     background: #b98766 !important;
 }
+
+/* Meal-Plan */
+
+.cv-header {
+    background-color: #303030 !important;
+}
+
+.cv-weeknumber, .cv-header-day {
+    background-color: #303030 !important;
+    color: #fff !important;
+}
+
+.cv-day.past {
+    background-color: #333333 !important;
+}
+
+.cv-day.today {
+    background-color: var(--primary) !important;
+}
+
+.cv-day.outsideOfMonth {
+    background-color: #0d0d0d !important;
+}
+
+.cv-item {
+    background-color: #4E4E4E !important;
+}
+
+.b-sidebar-body {
+    background-color: #303030 !important;
+}
+
+.bottom-nav-link {
+    color: #898989;
+}

cookbook/templates/base.html

@@ -136,10 +136,10 @@
                         <i class="fas fa-fw fa-toolbox fa-lg"></i>
                     </a>
                     <div class="dropdown-menu dropdown-menu-center dropdown-menu-center-large">
-                        <div class="row m-0 mt-2 mt-md-0">
+                        <div class="row m-0 mt-1 mt-md-0">
                             <div class="col-4">
                                 <a href="{% url 'list_keyword' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-tags fa-2x"></i>
                                         </div>
@@ -151,7 +151,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'list_food' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-leaf fa-2x"></i>
                                         </div>
@@ -163,7 +163,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'list_unit' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-balance-scale fa-2x"></i>
                                         </div>
@@ -174,10 +174,10 @@
                                 </a>
                             </div>
                         </div>
-                        <div class="row m-0 mt-2 mt-md-0">
+                        <div class="row m-0 mt-1 mt-md-0">
                             <div class="col-4">
                                 <a href="{% url 'list_supermarket' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-store-alt fa-2x"></i>
                                         </div>
@@ -189,7 +189,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'list_supermarket_category' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card  p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-cubes fa-2x"></i>
                                         </div>
@@ -201,7 +201,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'list_automation' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-robot fa-2x"></i>
                                         </div>
@@ -212,10 +212,10 @@
                                 </a>
                             </div>
                         </div>
-                        <div class="row m-0 mt-2 mt-md-0">
+                        <div class="row m-0 mt-1 mt-md-0">
                             <div class="col-4">
                                 <a href="{% url 'list_user_file' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-file fa-2x"></i>
                                         </div>
@@ -227,7 +227,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'data_batch_edit' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-edit fa-2x"></i>
                                         </div>
@@ -239,7 +239,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'view_history' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-history fa-2x"></i>
                                         </div>
@@ -250,10 +250,10 @@
                                 </a>
                             </div>
                         </div>
-                        <div class="row m-0 mt-2 mt-md-0">
+                        <div class="row m-0 mt-1 mt-md-0">
                             <div class="col-4">
                                 <a href="{% url 'view_ingredient_editor' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-th-list fa-2x"></i>
                                         </div>
@@ -265,7 +265,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'view_export' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-file-export fa-2x"></i>
                                         </div>
@@ -277,7 +277,7 @@
                             </div>
                             <div class="col-4">
                                 <a href="{% url 'list_property_type' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-database fa-2x"></i>
                                         </div>
@@ -288,10 +288,10 @@
                                 </a>
                             </div>
                         </div>
-                        <div class="row m-0 mt-2 mt-md-0">
+                        <div class="row m-0 mt-1 mt-md-0">
                             <div class="col-4">
                                 <a href="{% url 'list_unit_conversion' %}" class="p-0 p-md-1">
-                                    <div class="card p-0 no-gutters border-0">
+                                    <div class="card p-1 pt-2 no-gutters border-0">
                                         <div class="card-body text-center p-0 no-gutters">
                                             <i class="fas fa-exchange-alt fa-2x"></i>
                                         </div>

vue/src/apps/CookbookView/CookbookView.vue

@@ -56,7 +56,7 @@
         </div>
 
 
-        <bottom-navigation-bar>
+        <bottom-navigation-bar active-view="view_books">
             <template #custom_create_functions>
                 <div class="dropdown-divider" ></div>
                 <h6 class="dropdown-header">{{ $t('Books')}}</h6>

vue/src/apps/MealPlanView/MealPlanView.vue

@@ -230,7 +230,7 @@
             :current_period="current_period"
         ></auto-meal-plan-modal>
 
-        <bottom-navigation-bar :create_links="[{label:$t('Export_To_ICal'), url: iCalUrl, icon:'fas fa-download'}]">
+        <bottom-navigation-bar active-view="view_plan" :create_links="[{label:$t('Export_To_ICal'), url: iCalUrl, icon:'fas fa-download'}]">
             <template #custom_create_functions>
                 <h6 class="dropdown-header">{{ $t('Meal_Plan') }}</h6>
                 <a class="dropdown-item" @click="createEntryClick(new Date())"><i
@@ -796,4 +796,8 @@ having to override as much.
         font-size: 18px !important;
     }
 }
+
+.b-calendar-grid-help {
+    padding: 0.25rem;
+}
 </style>

vue/src/apps/RecipeEditView/RecipeEditView.vue

@@ -425,6 +425,7 @@
                                                                      v-if="!ingredient.is_header">
                                                                     <input
                                                                             class="form-control"
+                                                                            style="height: 100%;"
                                                                             v-model="ingredient.amount"
                                                                             type="number"
                                                                             step="any"
@@ -506,6 +507,7 @@
                                                                     <input
                                                                             class="form-control"
                                                                             maxlength="256"
+                                                                            style="height: 100%;"
                                                                             v-model="ingredient.note"
                                                                             v-bind:placeholder="$t('Note')"
                                                                             v-on:keydown.tab="
@@ -689,7 +691,7 @@
             <br/>
 
             <!-- bottom buttons save/close/view -->
-            <div class="row fixed-bottom p-2 b-2 border-top text-center" style="background: white"
+            <div class="row fixed-bottom p-2 b-2 border-top text-center bg-white bottom-action-bar"
                  v-if="recipe !== undefined">
                 <div class="col-3 col-md-6 mb-1 mb-md-0 pr-2 pl-2">
                     <a :href="resolveDjangoUrl('delete_recipe', recipe.id)"

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -846,7 +846,7 @@
 
                 <meal-plan-edit-modal :entry="mealplan_entry_edit" :create_date="mealplan_default_date"></meal-plan-edit-modal>
 
-                <bottom-navigation-bar></bottom-navigation-bar>
+                <bottom-navigation-bar active-view="view_search"></bottom-navigation-bar>
             </div>
         </div>
     </div>

vue/src/apps/RecipeView/RecipeView.vue

@@ -2,7 +2,7 @@
     <div id="app" v-if="recipe_id !== undefined">
         <recipe-view-component :recipe_id="recipe_id"></recipe-view-component>
 
-        <bottom-navigation-bar></bottom-navigation-bar>
+        <bottom-navigation-bar active-view="view_search"></bottom-navigation-bar>
     </div>
 </template>
 

vue/src/apps/ShoppingListView/ShoppingListView.vue

@@ -566,7 +566,7 @@
         <shopping-modal v-if="new_recipe.id" :recipe="new_recipe" :servings="parseInt(add_recipe_servings)"
                         :modal_id="new_recipe.id" @finish="finishShopping" :list_recipe="new_recipe.list_recipe"/>
 
-        <bottom-navigation-bar>
+        <bottom-navigation-bar active-view="view_shopping">
             <template #custom_create_functions>
 
                 <div class="dropdown-divider"></div>

vue/src/components/BottomNavigationBar.vue

@@ -1,17 +1,17 @@
 <template>
     <!-- bottom button nav -->
-    <div class="fixed-bottom p-1 pt-2 pl-2 pr-2 border-top text-center d-lg-none d-print-none" style="background: white">
+    <div class="fixed-bottom p-1 pt-2 pl-2 pr-2 border-top text-center d-lg-none d-print-none bottom-action-bar bg-white">
         <div class="d-flex flex-row justify-content-around">
             <div class="flex-column" v-if="show_button_1">
                 <slot name="button_1">
-                    <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_search')">
+                    <a class="nav-link bottom-nav-link p-0" v-bind:class="{'bottom-nav-link-active': activeView === 'view_search' }" v-bind:href="resolveDjangoUrl('view_search')">
                         <i class="fas fa-fw fa-book " style="font-size: 1.5em"></i><br/><small>{{ $t('Recipes') }}</small></a> <!-- TODO localize -->
                 </slot>
 
             </div>
             <div class="flex-column" v-if="show_button_2">
                 <slot name="button_2">
-                    <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_plan')">
+                    <a class="nav-link bottom-nav-link p-0" v-bind:class="{'bottom-nav-link-active': activeView === 'view_plan' }" v-bind:href="resolveDjangoUrl('view_plan')">
                         <i class="fas fa-calendar-alt" style="font-size: 1.5em"></i><br/><small>{{ $t('Meal_Plan') }}</small></a>
                 </slot>
 
@@ -20,7 +20,7 @@
                 <slot name="button_create">
                     <div class="dropup">
                         <a class="nav-link bottom-nav-link p-0" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
-                           aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus-circle fa-2x bottom-nav-link"></i>
+                           aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus-circle fa-2x bottom-nav-link bottom-nav-link-active"></i>
                         </a>
                         <div class="dropdown-menu center-dropup" aria-labelledby="navbarDropdownMenuLink">
 
@@ -46,14 +46,14 @@
             </div>
             <div class="flex-column" v-if="show_button_3">
                 <slot name="button_3">
-                    <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_shopping')">
+                    <a class="nav-link bottom-nav-link p-0" v-bind:class="{'bottom-nav-link-active': activeView === 'view_shopping' }" v-bind:href="resolveDjangoUrl('view_shopping')">
                         <i class="fas fa-shopping-cart" style="font-size: 1.5em"></i><br/><small>{{ $t('Shopping_list') }}</small></a>
                 </slot>
             </div>
             <div class="flex-column">
 
                 <slot name="button_4" v-if="show_button_4">
-                    <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_books')">
+                    <a class="nav-link bottom-nav-link p-0" v-bind:class="{'bottom-nav-link-active': activeView === 'view_books' }" v-bind:href="resolveDjangoUrl('view_books')">
                         <i class="fas fa-book-open" style="font-size: 1.5em"></i><br/><small>{{ $t('Books') }}</small></a> <!-- TODO localize -->
                 </slot>
 
@@ -80,6 +80,7 @@ export default {
         show_button_3: {type: Boolean, default: true},
         show_button_4: {type: Boolean, default: true},
         show_button_create: {type: Boolean, default: true},
+        activeView: {type: String, default: ""}
     }
 }
 </script>
@@ -90,6 +91,10 @@ export default {
     color: #666666
 }
 
+.bottom-nav-link-active {
+    color: var(--primary);
+}
+
 .center-dropup {
     right: auto;
     left: 50%;