cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve dark theme

Browse Source
This commit is contained in:
Jan-Niklas Weghorn 2023-11-10 11:17:20 +01:00
parent 8a588db429
commit 94279b74c9
4 changed files with 150 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
cookbook/static/themes/tandoor_dark.min.css vendored
View File

@ -241,7 +241,7 @@ a {
} }
a:hover { a:hover {
color: #000; color: #FFF;
text-decoration: underline text-decoration: underline
} }
@ -1813,8 +1813,8 @@ pre code {
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
color: #495057; color: #fff;
background-color: #fff; background-color: rgb(20,20,20);
background-clip: padding-box; background-clip: padding-box;
border: 1px solid #ced4da; border: 1px solid #ced4da;
border-radius: .25rem; border-radius: .25rem;
@ -1835,8 +1835,8 @@ pre code {
} }
.form-control:focus { .form-control:focus {
color: #495057; color: #fff;
background-color: #fff; background-color: rgb(20,20,20);
border-color: #0014b7; border-color: #0014b7;
outline: 0; outline: 0;
box-shadow: 0 0 0 .2rem rgba(0, 6, 55, .25) box-shadow: 0 0 0 .2rem rgba(0, 6, 55, .25)
@ -1868,8 +1868,8 @@ pre code {
} }
.form-control:disabled, .form-control[readonly] { .form-control:disabled, .form-control[readonly] {
background-color: #e9ecef; background-color: #5D5D5D;
opacity: 1 opacity: 1;
} }
select.form-control:focus::-ms-value { select.form-control:focus::-ms-value {
@ -2504,7 +2504,7 @@ a.btn.disabled, fieldset:disabled a.btn {
.btn-light { .btn-light {
color: #212529; color: #212529;
background-color: #cfd5cd; background-color: #535353;
border-color: #cfd5cd border-color: #cfd5cd
} }
@ -2570,7 +2570,7 @@ a.btn.disabled, fieldset:disabled a.btn {
} }
.btn-outline-primary.focus, .btn-outline-primary:focus { .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 { .btn-outline-primary.disabled, .btn-outline-primary:disabled {
@ -3603,10 +3603,10 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
color: #495057; color: #fff;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
background-color: #e9ecef; background-color: #3F3F3F;
border: 1px solid #ced4da; border: 1px solid #ced4da;
border-radius: .25rem border-radius: .25rem
} }
@ -3927,10 +3927,11 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
width: 100%; width: 100%;
height: 1.4rem; height: 1.4rem;
padding: 0; padding: 0;
background-color: transparent; background-color: transparent !important;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none appearance: none;
border: transparent !important;
} }
.custom-range:focus { .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 { .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 { .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 { .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 { .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 { .custom-range::-webkit-slider-thumb:active {
background-color: #0019ea background-color: var(--secondary)
} }
.custom-range::-webkit-slider-runnable-track { .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; height: .5rem;
color: transparent; color: transparent;
cursor: pointer; cursor: pointer;
background-color: #dee2e6; background-color: #000;
border-color: transparent; border-color: transparent;
border-radius: 1rem 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 { .custom-range::-moz-range-thumb:active {
background-color: #0019ea background-color: var(--secondary)
} }
.custom-range::-moz-range-track { .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; height: .5rem;
color: transparent; color: transparent;
cursor: pointer; cursor: pointer;
background-color: #dee2e6; background-color: rgb(20,20,20);
border-color: transparent; border-color: transparent;
border-radius: 1rem border-radius: 1rem;
} }
.custom-range::-ms-thumb { .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 { .custom-range::-ms-thumb:active {
background-color: #0019ea background-color: var(--secondary)
} }
.custom-range::-ms-track { .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 { .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 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 { .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 { .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 { .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 { .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 { .navbar-dark .navbar-toggler {
@ -4776,7 +4777,7 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
padding: .75rem 1rem; padding: .75rem 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
list-style: none; list-style: none;
background-color: #e9ecef; background-color: #303030;
border-radius: .25rem border-radius: .25rem
} }
@ -4846,16 +4847,16 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
.page-item.active .page-link { .page-item.active .page-link {
z-index: 1; z-index: 1;
color: #fff; color: #fff;
background-color: #b98766; background-color: var(--primary);
border-color: #b98766 border-color: #b98766
} }
.page-item.disabled .page-link { .page-item.disabled .page-link {
color: #6c757d; color: #fff;
pointer-events: none; pointer-events: none;
cursor: auto; cursor: auto;
background-color: #fff; background-color: #303030;
border-color: #dee2e6 border-color: #303030
} }
.pagination-lg .page-link { .pagination-lg .page-link {
@ -5053,7 +5054,7 @@ a.badge-dark.focus, a.badge-dark:focus {
.jumbotron { .jumbotron {
padding: 2rem 1rem; padding: 2rem 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
background-color: #f7f7f7; background-color: #3F3F3F;
border-radius: .3rem border-radius: .3rem
} }
@ -5313,7 +5314,7 @@ a.badge-dark.focus, a.badge-dark:focus {
display: block; display: block;
padding: .75rem 1.25rem; padding: .75rem 1.25rem;
margin-bottom: -1px; margin-bottom: -1px;
background-color: #fff; background-color: #3F3F3F;
border: 1px solid rgba(0, 0, 0, .125) border: 1px solid rgba(0, 0, 0, .125)
} }
@ -6164,7 +6165,8 @@ a.close.disabled {
.popover-body { .popover-body {
padding: .5rem .75rem; padding: .5rem .75rem;
color: #212529 color: #fff;
background-color: #242424;
} }
.carousel { .carousel {
@ -10408,11 +10410,11 @@ footer a:hover {
.form-control { .form-control {
font-size: 14px; font-size: 14px;
background-color: rgb(20 20 20); background-color: rgb(20,20,20);
} }
.form-control, .form-control:focus { .form-control, .form-control:focus {
background-color: #f6f7fb; background-color: rgb(20,20,20);
border: none border: none
} }
@ -10456,24 +10458,72 @@ footer a:hover {
background-color: transparent !important; 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); background-color: rgb(20 20 20);
color: #fff; color: #fff;
border-radius: .25rem !important; border-radius: .25rem !important;
border: 1px solid #ced4da !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; .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;
} }
.multiselect__tag-icon:hover, .multiselect__tag-icon:focus { .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 { .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::-webkit-input-placeholder {
color: #fff !important;
}
.multiselect__input::-moz-placeholder {
color: #fff !important;
}
.multiselect__input:-ms-input-placeholder {
color: #fff !important;
}
.multiselect__input::-ms-input-placeholder {
color: #fff !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 {
background-color: rgb(20, 20, 20) !important;
color: #fff !important;
/* 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 { .form-control-search {
@ -10483,4 +10533,36 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
.ghost { .ghost {
opacity: 0.5 !important; opacity: 0.5 !important;
background: #b98766 !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;
}
.dropdown-item {
color: #fff !important;
}

36
cookbook/templates/base.html
View File

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

4
vue/src/apps/MealPlanView/MealPlanView.vue
View File

@ -796,4 +796,8 @@ having to override as much.
font-size: 18px !important; font-size: 18px !important;
} }
} }
.b-calendar-grid-help {
padding: 0.25rem;
}
</style> </style>

2
vue/src/apps/RecipeEditView/RecipeEditView.vue
View File

@ -689,7 +689,7 @@
<br/> <br/>
<!-- bottom buttons save/close/view --> <!-- 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"> v-if="recipe !== undefined">
<div class="col-3 col-md-6 mb-1 mb-md-0 pr-2 pl-2"> <div class="col-3 col-md-6 mb-1 mb-md-0 pr-2 pl-2">
<a :href="resolveDjangoUrl('delete_recipe', recipe.id)" <a :href="resolveDjangoUrl('delete_recipe', recipe.id)"