diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
index 2511f07d..3f360e79 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
@@ -77,12 +77,12 @@ limitations under the License.
.mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic;
- font-color: $primary-fg-color;
+ color: $primary-fg-color;
}
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
font-style: italic;
- font-color: $primary-fg-color;
+ color: $primary-fg-color;
}
.mx_EntityTile_unavailable .mx_EntityTile_avatar,
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
index 0e911541..33f283e0 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
@@ -19,8 +19,8 @@ limitations under the License.
margin-right: 15px;
margin-bottom: 15px;
display: flex;
- border-left: 4px solid #ddd;
- color: #888;
+ border-left: 4px solid $preview-widget-bar-color;
+ color: $preview-widget-fg-color;
}
.mx_LinkPreviewWidget_image {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
index 970c2496..d6fb5a19 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
@@ -69,7 +69,6 @@ limitations under the License.
}
.mx_MemberInfo_profileField {
- font-color: #999999;
font-size: 13px;
position: relative;
background-color: $primary-bg-color;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
index 5ecb3441..525cc1f6 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
@@ -57,7 +57,7 @@ limitations under the License.
height: 60px;
text-align: center;
font-style: italic;
- color: #888;
+ color: $greyed-fg-color;
}
.mx_MessageComposer_input_wrapper {
@@ -90,10 +90,10 @@ limitations under the License.
}
.mx_MessageComposer_input blockquote {
- color: rgb(119, 119, 119);
+ color: $blockquote-fg-color;
margin: 0 0 16px;
padding: 0 15px;
- border-left: 4px solid rgb(221, 221, 221);
+ border-left: 4px solid $blockquote-bar-color;
}
.mx_MessageComposer_input textarea {
@@ -151,7 +151,7 @@ limitations under the License.
.mx_MessageComposer_formatbar_wrapper {
width: 100%;
- background-color: #f7f7f7;
+ background-color: $menu-bg-color;
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
}
@@ -168,7 +168,7 @@ limitations under the License.
flex-direction: row;
align-items: center;
font-size: 10px;
- color: #888;
+ color: $greyed-fg-color;
}
.mx_MessageComposer_formatbar * {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
index 688b8a84..4affc994 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
@@ -16,7 +16,6 @@ limitations under the License.
/* add 20px to the height of the header when editing */
.mx_RoomHeader_editing {
- -webit-flex: 0 0 93px ! important;
flex: 0 0 93px ! important;
}
@@ -24,25 +23,19 @@ limitations under the License.
max-width: 960px;
margin: auto;
height: 70px;
-
align-items: center;
-
display: flex;
}
.mx_RoomHeader_leftRow {
margin-left: -2px;
-
order: 1;
-
flex: 1;
}
.mx_RoomHeader_spinner {
height: 36px;
-
order: 2;
-
padding-left: 12px;
padding-right: 12px;
}
@@ -56,9 +49,7 @@ limitations under the License.
line-height: 34px;
margin-top: -2px;
text-align: center;
-
order: 2;
-
cursor: pointer;
/*
@@ -70,9 +61,7 @@ limitations under the License.
.mx_RoomHeader_cancelButton {
order: 2;
-
cursor: pointer;
-
padding-left: 12px;
padding-right: 12px;
}
@@ -126,7 +115,7 @@ limitations under the License.
}
.mx_RoomHeader_settingsHint {
- color: #a2a2a2 ! important;
+ color: $settings-grey-fg-color ! important;
}
.mx_RoomHeader_searchStatus {
@@ -151,7 +140,7 @@ limitations under the License.
}
.mx_RoomHeader_placeholder {
- color: #a2a2a2 ! important;
+ color: $settings-grey-fg-color ! important;
}
.mx_RoomHeader_editable {
@@ -170,7 +159,7 @@ limitations under the License.
vertical-align: bottom;
float: left;
max-height: 42px;
- color: #A2A2A2;
+ color: $settings-grey-fg-color;
font-weight: 300;
font-size: 13px;
margin-left: 19px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
index 3814f9c0..34ff3a86 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
@@ -17,13 +17,9 @@ limitations under the License.
.mx_RoomPreviewBar {
text-align: center;
height: 176px;
-
align-items: center;
-
flex-direction: column;
-
justify-content: center;
-
display: flex;
}
@@ -40,7 +36,7 @@ limitations under the License.
.mx_RoomPreviewBar_preview_text {
margin-top: 25px;
- color: #a4a4a4;
+ color: $settings-grey-fg-color;
}
.mx_RoomPreviewBar_join_text a {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
index d9de0e8a..ef115f6e 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
@@ -205,7 +205,7 @@ limitations under the License.
}
.mx_RoomSettings_aliasPlaceholder {
- color: #a2a2a2;
+ color: $settings-grey-fg-color;
}
.mx_RoomSettings_buttons {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
index b404da02..6116dd92 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
@@ -69,8 +69,8 @@ limitations under the License.
.mx_SearchableEntityList hr {
height: 1px;
border: 0px;
- color: #e1dddd;
- background-color: #e1dddd;
+ color: $primary-fg-color;
+ background-color: $primary-fg-color;
margin-right: 15px;
margin-top: 11px;
margin-bottom: 11px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
index d45c4a58..64eac25d 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
@@ -61,9 +61,9 @@ limitations under the License.
}
.mx_IncomingCallBox_buttons_decline {
- background-color: #f48080;
+ background-color: $voip-decline-color;
}
.mx_IncomingCallBox_buttons_accept {
- background-color: #80f480;
+ background-color: $voip-accept-color;
}
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index e623372a..4f47df64 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -55,6 +55,19 @@ $h3-color: #3d3b39;
$dialog-background-bg-color: #e9e9e9;
$lightbox-background-bg-color: #000;
+$greyed-fg-color: #888;
+
+$preview-widget-bar-color: #ddd;
+$preview-widget-fg-color: $greyed-fg-color;
+
+$blockquote-bar-color: #ddd;
+$blockquote-fg-color: #777;
+
+$settings-grey-fg-color: #a2a2a2;
+
+$voip-decline-color: #f48080;
+$voip-accept-color: #80f480;
+
// ********************
$roomtile-name-color: rgba(69, 69, 69, 0.8);
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index 1d93c1a4..28b80a20 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -55,6 +55,19 @@ $h3-color: $primary-fg-color;
$dialog-background-bg-color: #000;
$lightbox-background-bg-color: #000;
+$greyed-fg-color: #888;
+
+$preview-widget-bar-color: $menu-bg-color;
+$preview-widget-fg-color: $greyed-fg-color;
+
+$blockquote-bar-color: #ddd;
+$blockquote-fg-color: #777;
+
+$settings-grey-fg-color: #a2a2a2;
+
+$voip-decline-color: #f48080;
+$voip-accept-color: #80f480;
+
// ********************
$roomtile-name-color: rgba(186, 186, 186, 0.8);
diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
index f0d4c860..8c8ceeaf 100644
--- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
+++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
@@ -101,7 +101,7 @@ limitations under the License.
text-transform: uppercase;
font-weight: 600;
font-size: 11px;
- color: #61c295;
+ color: $accent-fg-color;
}
.mx_RoomDirectory_topic {
@@ -110,7 +110,7 @@ limitations under the License.
.mx_RoomDirectory_alias {
font-size: 12px;
- color: #b3b3b3;
+ color: $settings-grey-fg-color;
}
.mx_RoomDirectory_roomMemberCount {
diff --git a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
index 0a2e7605..16a3ab79 100644
--- a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
+++ b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
@@ -70,8 +70,7 @@ limitations under the License.
border-right-style: none;
border-top-style: solid;
border-top-width: 1px;
- border-color: #bbbbbb;
- opacity: 0.4;
+ border-color: $menu-border-color;
}
.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {
diff --git a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
index d31a9d27..66c26e12 100644
--- a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
+++ b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
@@ -29,10 +29,8 @@ limitations under the License.
order: 1;
flex: 1 1 10%;
min-width: 60px;
- /*
- background-color: #080;
- height: 20px;
- */
+ // background-color: #080;
+ // height: 20px;
}
.mx_ImageView_content {
@@ -41,7 +39,6 @@ limitations under the License.
min-width: 0px;
height: 90%;
flex: 15 15 0;
-
display: flex;
align-items: center;
justify-content: center;
@@ -132,8 +129,6 @@ limitations under the License.
order: 3;
flex: 1 1 10%;
min-width: 300px;
- /*
- background-color: #800;
- height: 20px;
- */
+ // background-color: #800;
+ // height: 20px;
}