MDL-80364 message: Change icon and background-color when item selected

Icon and background-color had contrast issues in the selected state.
This commit is contained in:
Pedro Jordao 2024-02-27 13:54:11 +01:00
parent e567c21d6e
commit 25125bbfe2
5 changed files with 18 additions and 7 deletions

View File

@ -36,6 +36,6 @@
}
}}
<div class="image-container"><img src="{{{iconurl}}}" alt="{{#str}}notificationimage, message{{/str}}"/></div>
<div class="image-container">{{#pix}} e/text_highlight, core, {{#str}} notificationimage, message {{/str}} {{/pix}}</div>
<div class="subject-container">{{subject}}</div>
<div class="timestamp">{{timecreatedpretty}}</div>

View File

@ -65,7 +65,7 @@
<div class="content-item-body">
<div class="notification-image">
<img src="{{{iconurl}}}" alt="{{#str}}notificationimage, message{{/str}}"/>
{{#pix}} e/text_highlight, core, {{#str}} notificationimage, message {{/str}} {{/pix}}
</div>
<div class="notification-message">{{shortenedsubject}}</div>
</div>

View File

@ -6,7 +6,7 @@ $region-header-height: 25px;
$region-footer-height: 30px;
$content-item-hover-colour-bg: $primary;
$content-item-hover-colour-text: $white;
$content-item-selected-colour-bg: #4f94cd;
$content-item-selected-colour-bg: #3279b3;
$content-item-unread-colour: #f4f4f4;
$content-header-footer-height: $region-header-height + $region-footer-height;
@ -178,6 +178,11 @@ $content-header-footer-height: $region-header-height + $region-footer-height;
.icon {
font-weight: bolder;
}
.notification-image {
.icon {
font-weight: 400;
}
}
}
}

View File

@ -36374,6 +36374,9 @@ body {
.navbar-nav .popover-region .icon {
font-weight: bolder;
}
.navbar-nav .popover-region .notification-image .icon {
font-weight: 400;
}
.navbar .popover-region.collapsed .popover-region-container {
opacity: 0;
@ -36473,9 +36476,9 @@ body {
width: calc(100% - 24px);
}
.content-item-container.selected {
background-color: #4f94cd;
background-color: #3279b3;
color: #fff;
border-color: #4f94cd;
border-color: #3279b3;
}
.content-item-container.selected .content-item-footer .timestamp {
color: #fff;

View File

@ -36308,6 +36308,9 @@ body {
.navbar-nav .popover-region .icon {
font-weight: bolder;
}
.navbar-nav .popover-region .notification-image .icon {
font-weight: 400;
}
.navbar .popover-region.collapsed .popover-region-container {
opacity: 0;
@ -36407,9 +36410,9 @@ body {
width: calc(100% - 24px);
}
.content-item-container.selected {
background-color: #4f94cd;
background-color: #3279b3;
color: #fff;
border-color: #4f94cd;
border-color: #3279b3;
}
.content-item-container.selected .content-item-footer .timestamp {
color: #fff;