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

fix contrast issue

Browse source 
when badges with and without highlighted state have a very
different brightness (as they might do in dark mode), hardcoding
the fg color of a badge independent of it's highlighted state
to $accent-fg-color doesn't work well, so add an extra SASS
variable we can reassign to something more specific in the custom theme
This commit is contained in:
Bruno Windels 2019-10-01 16:58:14 +02:00
parent c1edd6d0b5
commit 15b7a5af31
4 changed files with 6 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
res/css/structures/_RoomSubList.scss
View file

@ -70,10 +70,10 @@ limitations under the License.
.mx_RoomSubList_badge { .mx_RoomSubList_badge {
flex: 0 0 auto; flex: 0 0 auto;
border-radius: 8px; border-radius: 8px;
color: $accent-fg-color;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
padding: 0 5px; padding: 0 5px;
color: $roomtile-badge-fg-color;
background-color: $roomtile-name-color; background-color: $roomtile-name-color;
cursor: pointer; cursor: pointer;
} }
@ -104,6 +104,7 @@ limitations under the License.
} }
.mx_RoomSubList_badgeHighlight { .mx_RoomSubList_badgeHighlight {
color: $accent-fg-color;
background-color: $warning-color; background-color: $warning-color;
} }

3
res/css/views/rooms/_RoomTile.scss
View file

@ -110,7 +110,7 @@ limitations under the License.
flex: 0 1 content; flex: 0 1 content;
border-radius: 0.8em; border-radius: 0.8em;
padding: 0 0.4em; padding: 0 0.4em;
color: $accent-fg-color; color: $roomtile-badge-fg-color;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
} }
@ -156,6 +156,7 @@ limitations under the License.
.mx_RoomTile_highlight .mx_RoomTile_badge, .mx_RoomTile_highlight .mx_RoomTile_badge,
.mx_RoomTile_badge.mx_RoomTile_badgeRed { .mx_RoomTile_badge.mx_RoomTile_badgeRed {
color: $accent-fg-color;
background-color: $warning-color; background-color: $warning-color;
} }

1
res/themes/light-custom/css/_custom.scss
View file

@ -48,6 +48,7 @@ $roomsublist-background: var(--roomlist-background-color);
$secondary-accent-color: var(--roomlist-background-color); $secondary-accent-color: var(--roomlist-background-color);
$selected-color: var(--roomlist-background-color); $selected-color: var(--roomlist-background-color);
$widget-menu-bar-bg-color: var(--roomlist-background-color); $widget-menu-bar-bg-color: var(--roomlist-background-color);
$roomtile-badge-fg-color: var(--roomlist-background-color);
// //
// --timeline-text-color // --timeline-text-color
$message-action-bar-fg-color: var(--timeline-text-color); $message-action-bar-fg-color: var(--timeline-text-color);

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

@ -167,6 +167,7 @@ $header-divider-color: #91A1C0;
// ******************** // ********************
$roomtile-name-color: #61708b; $roomtile-name-color: #61708b;
$roomtile-badge-fg-color: $accent-fg-color;
$roomtile-selected-color: #212121; $roomtile-selected-color: #212121;
$roomtile-notified-color: #212121; $roomtile-notified-color: #212121;
$roomtile-selected-bg-color: #fff; $roomtile-selected-bg-color: #fff;