mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-24 02:05:45 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2378 from matrix-org/nadonomy/colours-and-contrast

Browse source 
Colour, contrast & legibility improvements
This commit is contained in:
J. Ryan Stinnett 2018-12-20 14:22:04 +00:00 committed by GitHub
commit 95c739be11
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 40 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/_common.scss
View file

@ -47,7 +47,7 @@ h2 {
a:hover,
a:link,
a:visited {
color: $accent-color;
color: $accent-color-alt;
}
input[type=text], input[type=password], textarea {
@ -301,7 +301,7 @@ textarea {
}
.mx_textButton {
@mixin mx_DialogButton_small;
@mixin mx_DialogButton_small;
}
.mx_textButton:hover {

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

@ -94,7 +94,7 @@ limitations under the License.
font-weight: 600;
font-size: 12px;
padding: 0 5px;
background-color: $accent-color;
background-color: $roomtile-name-color;
}
.mx_RoomSubList_addRoom, .mx_RoomSubList_badge {

4
res/css/structures/_TagPanel.scss
View file

@ -131,12 +131,12 @@ limitations under the License.
.mx_TagPanel_groupsButton > .mx_GroupsButton:before {
mask: url('../../img/feather-icons/users.svg');
mask-position: center 10px;
mask-position: center 11px;
}
.mx_TagPanel_groupsButton > .mx_TagPanel_report:before {
mask: url('../../img/feather-icons/life-buoy.svg');
mask-position: center 10px;
mask-position: center 9px;
}
.mx_TagPanel_groupsButton > .mx_AccessibleButton {

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

@ -445,7 +445,7 @@ limitations under the License.
}
.mx_EventTile_content .markdown-body a {
color: $accent-color;
color: $accent-color-alt;
}
.mx_EventTile_content .markdown-body .hljs {

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

@ -112,7 +112,7 @@ limitations under the License.
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
background-color: $accent-color;
background-color: $roomtile-name-color;
}
.mx_RoomTile_highlight .mx_RoomTile_badge {
@ -130,10 +130,6 @@ limitations under the License.
.mx_RoomTile_selected {
border-radius: 4px;
background-color: $roomtile-selected-bg-color;
.mx_RoomTile_name {
color: $roomtile-selected-color;
}
}
.mx_DNDRoomTile {
@ -162,4 +158,3 @@ limitations under the License.
.mx_RoomTile.mx_RoomTile_transparent:focus {
background-color: $roomtile-transparent-focused-color;
}

7
res/img/feather-icons/life-buoy.svg
View file

@ -1,8 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>life-buoy</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-77.000000, -862.000000)" stroke="#2E3648" stroke-width="1.6">
<g id="Buoy" transform="translate(68.000000, 853.000000)">
@ -18,4 +15,4 @@
</g>
</g>
</g>
</svg>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

11
res/img/feather-icons/search-input.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="LifeBuoy" transform="translate(-1378.000000, -91.000000)" stroke="#61708b" stroke-width="1.6">
<g id="search-copy" transform="translate(1379.000000, 92.000000)">
<circle id="Oval" cx="6.22222222" cy="6.22222222" r="6.22222222"></circle>
<path d="M14,14 L10.6166667,10.6166667" id="Path"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 676 B

8
res/img/icons-close.svg
View file

@ -75,22 +75,22 @@
<g
id="icons_create_room"
transform="translate(20,18)">
<path
id="Line"
class="st1"
d="M -2.5,28.5 4.6,21.4"
style="fill:none;stroke:#9fa9ba;stroke-width:2;stroke-linecap:round;stroke-opacity:1"
style="fill:none;stroke:#454545;stroke-width:2;stroke-linecap:round;stroke-opacity:1"
inkscape:connector-curvature="0" />
<path
id="Line_1_"
class="st1"
d="m -2.5,21.5 7.1,7.1"
style="fill:none;stroke:#9fa9ba;stroke-width:2;stroke-linecap:round;stroke-opacity:1"
style="fill:none;stroke:#454545;stroke-width:2;stroke-linecap:round;stroke-opacity:1"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
</g>
</g>
</svg>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

2
res/img/topleft-chevron.svg
View file

@ -64,7 +64,7 @@
<g
id="matrix-my-stuff-no-lines-message-context-menu-smaller-icons"
transform="translate(-203,-25)"
style="stroke:#212121;stroke-width:1.29999995">
style="stroke:#61708b;stroke-width:1.6">
<g
id="Group-3"
transform="translate(128,15)">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

24
res/themes/dharma/css/_dharma.scss
View file

@ -20,19 +20,20 @@ $focus-bg-color: #dddddd;
// button UI (white-on-green in light skin)
$accent-fg-color: #ffffff;
$accent-color: #f56679;
$accent-color-50pct: #f56679;
$accent-color: #7ac9a1;
$accent-color-50pct: #92caad;
$accent-color-alt: #238CF5;
$selection-fg-color: $primary-bg-color;
$focus-brightness: 125%;
$focus-brightness: 105%;
// red warning colour
$warning-color: #ff0064;
$warning-color: #f56679;
// background colour for warnings
$warning-bg-color: #DF2A8B;
$info-bg-color: #2A9EDF;
$mention-user-pill-bg-color: #ff0064;
$mention-user-pill-bg-color: $warning-color;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
// pinned events indicator
@ -121,13 +122,13 @@ $rte-group-pill-color: #aaa;
$topleftmenu-color: #212121;
$roomheader-color: #45474a;
$roomheader-addroom-color: #929eb4;
$roomheader-addroom-color: #91A1C0;
$roomtopic-color: #9fa9ba;
$eventtile-meta-color: $roomtopic-color;
// ********************
$roomtile-name-color: #929eb4;
$roomtile-name-color: #61708b;
$roomtile-selected-color: #212121;
$roomtile-notified-color: #212121;
$roomtile-selected-bg-color: #fff;
@ -215,7 +216,10 @@ $progressbar-color: #000;
> input[type=search] {
border: none;
flex: 1;
color: inherit; //from .mx_textinput
color: $primary-fg-color;
},
input::placeholder {
color: $roomsublist-label-fg-color;
}
}
}
@ -262,9 +266,11 @@ input[type=search].mx_textinput_icon {
background-position: 10px center;
}
// FIXME THEME - Tint by CSS rather than referencing a duplicate asset
input[type=text].mx_textinput_icon.mx_textinput_search,
input[type=search].mx_textinput_icon.mx_textinput_search {
background-image: url('../../img/feather-icons/search.svg');
background-image: url('../../img/feather-icons/search-input.svg');
}
// dont search UI as not all browsers support it,