dark_theme: Add dark themed colors to notice/info banners.

Previously, infomational banners didn't have any dark theme stylings which
resulted in a messy and terrible contrast with the dark themed app. These
changes adds those missing styles and uses the same stylings and colors
as the compose banners. Thus, making a definite improvement then before.
This commit is contained in:
Joelute 2023-05-02 20:09:47 -04:00 committed by Tim Abbott
parent 877c72add8
commit 9cabdf2033
3 changed files with 22 additions and 2 deletions

View File

@ -1167,6 +1167,26 @@
border-color: hsl(165deg 68% 37%);
}
.alert.alert-info {
color: hsl(205deg 58% 80%);
background-color: hsl(204deg 100% 12%);
border-color: hsl(205deg 58% 69% / 40%);
.banner-action-button {
background-color: hsl(205deg 58% 69% / 10%);
border-color: transparent;
color: hsl(205deg 58% 69%);
&:hover {
background-color: hsl(205deg 58% 69% / 15%);
}
&:active {
background-color: hsl(205deg 58% 69% / 20%);
}
}
}
.alert.alert-error,
.alert.alert-danger {
background-color: hsl(318deg 12% 21%);

View File

@ -6,7 +6,7 @@
{{/tr}}
</p>
<div id="mark_as_read_controls">
<button id="mark_view_read" class="btn btn-info">
<button id="mark_view_read" class="btn btn-info banner-action-button">
{{t 'Mark as read' }}
</button>
</div>

View File

@ -6,7 +6,7 @@
{{/tr}}
</p>
<div id="mark_as_read_controls">
<button id="mark_view_read" class="btn btn-info">
<button id="mark_view_read" class="btn btn-info banner-action-button">
{{t 'Mark as read' }}
</button>
</div>