OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

fix contrast issue 

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
pull/21833/head
Bruno Windels 2019-10-01 16:58:14 +02:00
parent c1edd6d0b5
commit 15b7a5af31
4 changed files with 6 additions and 2 deletions
Show Stats 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 {
flex: 0 0 auto;
border-radius: 8px;
color: $accent-fg-color;
font-weight: 600;
font-size: 12px;
padding: 0 5px;
color: $roomtile-badge-fg-color;
background-color: $roomtile-name-color;
cursor: pointer;
}
@ -104,6 +104,7 @@ limitations under the License.
}
.mx_RoomSubList_badgeHighlight {
color: $accent-fg-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;
border-radius: 0.8em;
padding: 0 0.4em;
color: $accent-fg-color;
color: $roomtile-badge-fg-color;
font-weight: 600;
font-size: 12px;
}
@ -156,6 +156,7 @@ limitations under the License.
.mx_RoomTile_highlight .mx_RoomTile_badge,
.mx_RoomTile_badge.mx_RoomTile_badgeRed {
color: $accent-fg-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);
$selected-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
$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-badge-fg-color: $accent-fg-color;
$roomtile-selected-color: #212121;
$roomtile-notified-color: #212121;
$roomtile-selected-bg-color: #fff;