imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revamp notification dot for better readibility (#8197)

Browse source
This commit is contained in:
Germain 2022-04-04 12:36:54 +01:00 • committed by GitHub
parent 39f001e7f5
commit 1758450e5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 36 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

28
res/css/structures/_RightPanel.scss
View file

@ -93,7 +93,8 @@ limitations under the License.
mask-position: center;
}
$dot-size: 7px;
$dot-size: 8px;
$dot-offset: -3px;
$pulse-color: $alert;
.mx_RightPanel_pinnedMessagesButton {
@ -104,8 +105,8 @@ $pulse-color: $alert;
}
.mx_RightPanel_headerButton_unreadIndicator_bg {
position: absolute;
right: 0;
top: 0;
right: $dot-offset;
top: $dot-offset;
margin: 4px;
width: $dot-size;
height: $dot-size;
@ -117,8 +118,8 @@ $pulse-color: $alert;
.mx_RightPanel_headerButton_unreadIndicator {
position: absolute;
right: 0;
top: 0;
right: $dot-offset;
top: $dot-offset;
margin: 4px;
width: $dot-size;
height: $dot-size;
@ -135,13 +136,13 @@ $pulse-color: $alert;
}
&.mx_Indicator_gray {
background: rgba($roomtile-default-badge-bg-color, 1);
box-shadow: rgba($roomtile-default-badge-bg-color, 1);
background: rgba($room-icon-unread-color, 1);
box-shadow: rgba($room-icon-unread-color, 1);
}
&.mx_Indicator_bold {
background: rgba($input-darker-fg-color, 1);
box-shadow: rgba($input-darker-fg-color, 1);
background: rgba($primary-content, 1);
box-shadow: rgba($primary-content, 1);
}
&::after {
@ -197,7 +198,14 @@ $pulse-color: $alert;
}
}
.mx_RightPanel_headerButton_highlight {
.mx_RightPanel_headerButton_unread {
&::before {
background-color: $room-icon-unread-color !important;
}
}
.mx_RightPanel_headerButton_highlight,
.mx_RightPanel_headerButton:hover {
&::before {
background-color: $accent !important;
}

2
res/css/views/rooms/_EventTile.scss
View file

@ -70,7 +70,7 @@ $left-gutter: 64px;
}
&[data-shape=ThreadsList][data-notification=total]::before {
background-color: $roomtile-default-badge-bg-color;
background-color: $room-icon-unread-color;
}
&[data-shape=ThreadsList][data-notification=highlight]::before {

5
res/themes/dark/css/_dark.scss
View file

@ -79,6 +79,11 @@ $settings-profile-button-bg-color: #e7e7e7;
$settings-subsection-fg-color: $text-secondary-color;
// ********************
// Room
// ********************
$room-icon-unread-color: #fff;
// ********************
// RoomHeader
// ********************
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);

1
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -85,6 +85,7 @@ $roomheader-addroom-bg-color: #3c4556;
$roomheader-addroom-fg-color: $text-primary-color;
$icon-button-color: $header-panel-text-primary-color;
$roomtopic-color: $text-secondary-color;
$room-icon-unread-color: #fff;
// Legacy theme backports
$accent: #0DBD8B;

1
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -127,6 +127,7 @@ $roomheader-addroom-bg-color: #91a1c0;
$roomheader-addroom-fg-color: $accent-fg-color;
$icon-button-color: #91a1c0;
$roomtopic-color: #9e9e9e;
$room-icon-unread-color: #737D8C;
// ********************

5
res/themes/light/css/_light.scss
View file

@ -118,6 +118,11 @@ $settings-profile-button-bg-color: $menu-border-color;
$settings-subsection-fg-color: $muted-fg-color;
// ********************
// Room
// ********************
$room-icon-unread-color: $secondary-content;
// ********************
// RoomHeader
// ********************
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);