From b61aa33e99bc5535088b87e2a045e0e51c78dbf2 Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Thu, 20 Dec 2018 11:33:53 +0000 Subject: [PATCH 1/6] Tint input icon. --- res/img/feather-icons/search-input.svg | 11 +++++++++++ res/themes/dharma/css/_dharma.scss | 4 +++- 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 res/img/feather-icons/search-input.svg diff --git a/res/img/feather-icons/search-input.svg b/res/img/feather-icons/search-input.svg new file mode 100644 index 0000000000..3be5acb32e --- /dev/null +++ b/res/img/feather-icons/search-input.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 2cc27f3be0..805e13b579 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -262,9 +262,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, From 6c2d2f60cf2e225f630c1ed2481aace584a1b915 Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Thu, 20 Dec 2018 11:34:20 +0000 Subject: [PATCH 2/6] Polished left left panel. --- res/css/structures/_TagPanel.scss | 4 ++-- res/img/feather-icons/life-buoy.svg | 7 ++----- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index 1275c9c60e..77eefc7e10 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -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 { diff --git a/res/img/feather-icons/life-buoy.svg b/res/img/feather-icons/life-buoy.svg index 3ba383fa9a..20bd0f0b5d 100644 --- a/res/img/feather-icons/life-buoy.svg +++ b/res/img/feather-icons/life-buoy.svg @@ -1,8 +1,5 @@ - + - - life-buoy - Created with Sketch. @@ -18,4 +15,4 @@ - \ No newline at end of file + From d7473c4f4dd7046ee8e5ec588a8d4d3a1e5bf72a Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Thu, 20 Dec 2018 11:35:21 +0000 Subject: [PATCH 3/6] Various colour, contrast and legibility improvements. --- res/css/structures/_RoomSubList.scss | 4 ++-- res/css/views/rooms/_RoomTile.scss | 4 ++-- res/img/icons-close.svg | 8 ++++---- res/img/topleft-chevron.svg | 2 +- res/themes/dharma/css/_dharma.scss | 9 ++++++--- 5 files changed, 15 insertions(+), 12 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index a3319669cb..78208d7d7c 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -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 { @@ -114,7 +114,7 @@ limitations under the License. } .mx_RoomSubList_badgeHighlight { - background-color: $warning-color; + background-color: $accent-color; } .mx_RoomSubList_chevron { diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index d5ec3d365a..19dfbb3c26 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -112,11 +112,11 @@ 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 { - background-color: $warning-color; + background-color: $accent-color; } .mx_RoomTile_unread, .mx_RoomTile_highlight { diff --git a/res/img/icons-close.svg b/res/img/icons-close.svg index e516140dd2..b2dd44fc26 100644 --- a/res/img/icons-close.svg +++ b/res/img/icons-close.svg @@ -75,22 +75,22 @@ - + - \ No newline at end of file + diff --git a/res/img/topleft-chevron.svg b/res/img/topleft-chevron.svg index fa89852874..1cfeaf6352 100644 --- a/res/img/topleft-chevron.svg +++ b/res/img/topleft-chevron.svg @@ -64,7 +64,7 @@ + style="stroke:#61708b;stroke-width:1.6"> diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 805e13b579..c9930168f0 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -121,13 +121,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 +215,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; } } } From 9b8f07c19f39f57986d4be71f89bd29374e9c692 Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Thu, 20 Dec 2018 11:35:43 +0000 Subject: [PATCH 4/6] Don't override text colour of selected room in room list. --- res/css/views/rooms/_RoomTile.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 19dfbb3c26..d0ef5c332a 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -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 { From 42c8d43065d97b8c8df0433702e67f8d21265b21 Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Thu, 20 Dec 2018 11:35:58 +0000 Subject: [PATCH 5/6] Lint. --- res/css/views/rooms/_RoomTile.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index d0ef5c332a..104691430a 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -158,4 +158,3 @@ limitations under the License. .mx_RoomTile.mx_RoomTile_transparent:focus { background-color: $roomtile-transparent-focused-color; } - From 09bf68b1bdac149be670f5e8b1a7e5070f8566e8 Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Thu, 20 Dec 2018 12:46:43 +0000 Subject: [PATCH 6/6] Improved colours. --- res/css/_common.scss | 4 ++-- res/css/structures/_RoomSubList.scss | 2 +- res/css/views/rooms/_EventTile.scss | 2 +- res/css/views/rooms/_RoomTile.scss | 2 +- res/themes/dharma/css/_dharma.scss | 11 ++++++----- 5 files changed, 11 insertions(+), 10 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 149ec75569..797070d4e2 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -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 { diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 78208d7d7c..2d471ee198 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -114,7 +114,7 @@ limitations under the License. } .mx_RoomSubList_badgeHighlight { - background-color: $accent-color; + background-color: $warning-color; } .mx_RoomSubList_chevron { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 52074563f6..154e5390c8 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -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 { diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 104691430a..232b715f7a 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -116,7 +116,7 @@ limitations under the License. } .mx_RoomTile_highlight .mx_RoomTile_badge { - background-color: $accent-color; + background-color: $warning-color; } .mx_RoomTile_unread, .mx_RoomTile_highlight { diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index c9930168f0..0851762be2 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -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