16648 dashboard contrast issues (#16824)

* fixed #16648: dashboard contrast issues

* reinstate amendment to 16649

* fixed #16648: created gridstack override and removed inline bug fix

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
This commit is contained in:
Andrew Gormley 2024-07-10 15:08:16 +01:00 committed by GitHub
parent 2c00726ebc
commit 7b0cdca17c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 20 additions and 3 deletions

Binary file not shown.

View File

@ -6,6 +6,7 @@
// Overrides of external libraries
@import 'overrides/bootstrap';
@import 'overrides/gridstack';
@import 'overrides/tabler';
@import 'overrides/tomselect';

View File

@ -0,0 +1,12 @@
// Altering dashboard card colors
.grid-stack {
.card-header {
// Default color of card header changes depending on theme
&.bg-default {
background: var(--tblr-bg-surface-secondary)!important;
}
a {
color: inherit!important;
}
}
}

View File

@ -93,6 +93,10 @@ body[data-bs-theme=dark] {
.btn {
color: var(--#{$prefix}body-color);
}
// Stops table headers from appearing as primary link color
th.orderable a {
color: var(--#{$prefix}body-color);
}
}
// Adjusting text colors

View File

@ -9,14 +9,14 @@
gs-id="{{ widget.id }}"
>
<div class="card grid-stack-item-content">
<div class="card-header text-{{ widget.fg_color }} bg-{{ widget.color|default:"secondary" }} px-2 py-1 d-flex flex-row">
<div class="card-header {% if widget.color %} text-{{ widget.fg_color }} {% endif %} bg-{{ widget.color|default:'default' }} px-2 py-1 d-flex flex-row">
<a href="#"
hx-get="{% url 'extras:dashboardwidget_config' id=widget.id %}"
hx-target="#htmx-modal-content"
data-bs-toggle="modal"
data-bs-target="#htmx-modal"
>
<i class="mdi mdi-cog text-{{ widget.fg_color }}"></i>
<i class="mdi mdi-cog {% if widget.color %} text-{{ widget.fg_color }} {% endif %}"></i>
</a>
<div class="card-title flex-fill text-center">
{% if widget.title %}
@ -29,7 +29,7 @@
data-bs-toggle="modal"
data-bs-target="#htmx-modal"
>
<i class="mdi mdi-close text-{{ widget.fg_color }}"></i>
<i class="mdi mdi-close {% if widget.color %} text-{{ widget.fg_color }} {% endif %}"></i>
</a>
</div>
<div class="card-body p-2 pt-1 overflow-auto">