diff --git a/package.json b/package.json
index b79db54a10..722e0cf095 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
"reskindex": "reskindex -h src/header",
"build:res": "node scripts/copy-res.js",
"build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
- "build:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css --no-watch",
+ "build:css": "mkdirp build && postcss -c postcss.config.json",
"build:compile": "babel --source-maps -d lib src",
"build:bundle": "NODE_ENV=production webpack -p --progress",
"build:bundle:dev": "webpack --optimize-occurence-order --progress",
@@ -40,7 +40,7 @@
"start:res": "node scripts/copy-res.js -w",
"start:js": "webpack-dev-server -w --progress",
"start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
- "start:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css",
+ "start:css": "mkdirp build && postcss -c postcss.config.json -w",
"start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\" \"npm run start:css\"",
"start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\" \"npm run start:css\"",
"clean": "rimraf build lib webapp electron/dist",
@@ -76,6 +76,7 @@
"url": "^0.11.0"
},
"devDependencies": {
+ "autoprefixer": "^6.6.0",
"babel-cli": "^6.5.2",
"babel-core": "^6.14.0",
"babel-eslint": "^6.1.0",
@@ -90,7 +91,6 @@
"babel-preset-es2017": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.17.0",
- "catw": "^1.0.1",
"chokidar": "^1.6.1",
"cpx": "^1.3.2",
"css-raw-loader": "^0.1.1",
@@ -114,6 +114,14 @@
"mocha": "^2.4.5",
"parallelshell": "^1.2.0",
"phantomjs-prebuilt": "^2.1.7",
+ "postcss-cli": "^2.6.0",
+ "postcss-extend": "^1.0.5",
+ "postcss-import": "^9.0.0",
+ "postcss-mixins": "^5.4.1",
+ "postcss-nested": "^1.0.0",
+ "postcss-scss": "^0.4.0",
+ "postcss-simple-vars": "^3.0.0",
+ "postcss-strip-inline-comments": "^0.1.5",
"react-addons-perf": "^15.4.0",
"react-addons-test-utils": "^15.4.0",
"rimraf": "^2.4.3",
diff --git a/postcss.config.json b/postcss.config.json
new file mode 100644
index 0000000000..7ed32cdac1
--- /dev/null
+++ b/postcss.config.json
@@ -0,0 +1,15 @@
+{
+ "use": [
+ "postcss-import",
+ "autoprefixer",
+ "postcss-simple-vars",
+ "postcss-extend",
+ "postcss-nested",
+ "postcss-mixins",
+ "postcss-strip-inline-comments"
+ ],
+ "parser": "postcss-scss",
+ "input": "src/skins/vector/css/themes/[^_]*.scss",
+ "dir": "build",
+ "local-plugins": true
+}
diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/_common.scss
similarity index 81%
rename from src/skins/vector/css/common.css
rename to src/skins/vector/css/_common.scss
index bb00bbd8c0..01ba81d83e 100644
--- a/src/skins/vector/css/common.css
+++ b/src/skins/vector/css/_common.scss
@@ -29,7 +29,8 @@ body {
Arial here. */
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
font-size: 15px;
- color: #454545;
+ background-color: $primary-bg-color;
+ color: $primary-fg-color;
border: 0px;
margin: 0px;
/* This should render the fonts the same accross browsers */
@@ -41,7 +42,7 @@ div.error {
}
h2 {
- color: #454545;
+ color: $primary-fg-color;
font-weight: 400;
font-size: 18px;
margin-top: 16px;
@@ -51,15 +52,20 @@ h2 {
a:hover,
a:link,
a:visited {
- color: #76cfa6;
+ color: $accent-color;
+}
+
+input[type=text] {
+ background-color: $primary-bg-color;
+ color: $primary-fg-color;
}
input[type=text].error, input[type=password].error {
- border: 1px solid red;
+ border: 1px solid $warning-color;
}
input[type=text]:focus, textarea:focus {
- border: 1px solid #76CFA6;
+ border: 1px solid $accent-color;
outline: none;
box-shadow: none;
}
@@ -77,10 +83,7 @@ textarea {
/* applied to side-panels and messagepanel when in RoomSettings */
.mx_fadable {
opacity: 1;
- -webkit-transition: opacity 0.2s ease-in-out;
- -moz-transition: opacity 0.2s ease-in-out;
- -ms-transition: opacity 0.2s ease-in-out;
- -o-transition: opacity 0.2s ease-in-out;
+ transition: opacity 0.2s ease-in-out;
}
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
@@ -122,14 +125,8 @@ textarea {
width: 100%;
height: 100%;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
- -webkit-align-items: center;
align-items: center;
- -webkit-justify-content: center;
justify-content: center;
}
@@ -148,8 +145,8 @@ textarea {
}
.mx_Dialog {
- background-color: #fff;
- color: #747474;
+ background-color: $primary-bg-color;
+ color: $light-fg-color;
z-index: 4010;
font-weight: 300;
font-size: 15px;
@@ -168,13 +165,13 @@ textarea {
left: 0;
width: 100%;
height: 100%;
- background-color: #e9e9e9;
+ background-color: $dialog-background-bg-color;
opacity: 0.8;
}
.mx_Dialog_lightbox .mx_Dialog_background {
opacity: 0.85;
- background-color: #000;
+ background-color: $lightbox-background-bg-color;
}
.mx_Dialog_lightbox .mx_Dialog {
@@ -190,7 +187,7 @@ textarea {
.mx_Dialog_content {
margin: 24px 58px 68px 0;
font-size: 14px;
- color: #4a4a4a;
+ color: $primary-fg-color;
word-wrap: break-word;
}
@@ -202,7 +199,7 @@ textarea {
border: 0px;
height: 36px;
border-radius: 40px;
- border: solid 1px #76cfa6;
+ border: solid 1px $accent-color;
font-weight: 600;
font-size: 14px;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
@@ -212,26 +209,26 @@ textarea {
padding-right: 1.5em;
outline: none;
cursor: pointer;
- color: #76cfa6;
- background-color: #fff;
+ color: $accent-color;
+ background-color: $primary-bg-color;
/* align images in buttons (eg spinners) */
vertical-align: middle;
}
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
- color: #fff;
- background-color: #76cfa6;
+ color: $accent-fg-color;
+ background-color: $accent-color;
}
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
- background-color: #ff0064;
- border: solid 1px #ff0064;
+ background-color: $warning-color;
+ border: solid 1px $warning-color;
}
.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
- background-color: #777777;
- border: solid 1px #777777;
+ background-color: $light-fg-color;
+ border: solid 1px $light-fg-color;
opacity: 0.7;
}
@@ -241,11 +238,11 @@ textarea {
font-weight: bold;
font-size: 22px;
line-height: 1.4;
- color: #454545;
+ color: $primary-fg-color;
}
.mx_Dialog_title.danger {
- color: #ff0064;
+ color: $warning-color;
}
.mx_TextInputDialog_label {
@@ -256,10 +253,10 @@ textarea {
.mx_TextInputDialog_input {
font-size: 15px;
border-radius: 3px;
- border: 1px solid #f0f0f0;
+ border: 1px solid $input-border-color;
padding: 9px;
- color: #454545;
- background-color: #fff;
+ color: $primary-fg-color;
+ background-color: $primary-bg-color;
}
.mx_emojione {
@@ -268,19 +265,19 @@ textarea {
}
::-moz-selection {
- background-color: #76CFA6;
- color: white;
+ background-color: $accent-color;
+ color: $selection-fg-color;
}
::selection {
- background-color: #76CFA6;
- color: white;
+ background-color: $accent-color;
+ color: $selection-fg-color;
}
/** green button with rounded corners */
.mx_textButton {
- color: #fff;
- background-color: #76cfa6;
+ color: $accent-fg-color;
+ background-color: $accent-color;
border-radius: 17px;
text-align: center;
padding-left: 1em;
diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
new file mode 100644
index 0000000000..884352366e
--- /dev/null
+++ b/src/skins/vector/css/_components.scss
@@ -0,0 +1,74 @@
+// autogenerated by rethemendex.sh
+@import "./_common.scss";
+@import "./matrix-react-sdk/structures/_ContextualMenu.scss";
+@import "./matrix-react-sdk/structures/_CreateRoom.scss";
+@import "./matrix-react-sdk/structures/_FilePanel.scss";
+@import "./matrix-react-sdk/structures/_MatrixChat.scss";
+@import "./matrix-react-sdk/structures/_NotificationPanel.scss";
+@import "./matrix-react-sdk/structures/_RoomStatusBar.scss";
+@import "./matrix-react-sdk/structures/_RoomView.scss";
+@import "./matrix-react-sdk/structures/_SearchBox.scss";
+@import "./matrix-react-sdk/structures/_UploadBar.scss";
+@import "./matrix-react-sdk/structures/_UserSettings.scss";
+@import "./matrix-react-sdk/structures/login/_Login.scss";
+@import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss";
+@import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss";
+@import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss";
+@import "./matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss";
+@import "./matrix-react-sdk/views/elements/_AddressSelector.scss";
+@import "./matrix-react-sdk/views/elements/_AddressTile.scss";
+@import "./matrix-react-sdk/views/elements/_DirectorySearchBox.scss";
+@import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss";
+@import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
+@import "./matrix-react-sdk/views/elements/_RichText.scss";
+@import "./matrix-react-sdk/views/login/_ServerConfig.scss";
+@import "./matrix-react-sdk/views/messages/_MImageBody.scss";
+@import "./matrix-react-sdk/views/messages/_MNoticeBody.scss";
+@import "./matrix-react-sdk/views/messages/_MTextBody.scss";
+@import "./matrix-react-sdk/views/messages/_TextualEvent.scss";
+@import "./matrix-react-sdk/views/messages/_UnknownBody.scss";
+@import "./matrix-react-sdk/views/rooms/_Autocomplete.scss";
+@import "./matrix-react-sdk/views/rooms/_EntityTile.scss";
+@import "./matrix-react-sdk/views/rooms/_EventTile.scss";
+@import "./matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss";
+@import "./matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss";
+@import "./matrix-react-sdk/views/rooms/_MemberInfo.scss";
+@import "./matrix-react-sdk/views/rooms/_MemberList.scss";
+@import "./matrix-react-sdk/views/rooms/_MessageComposer.scss";
+@import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss";
+@import "./matrix-react-sdk/views/rooms/_RoomHeader.scss";
+@import "./matrix-react-sdk/views/rooms/_RoomList.scss";
+@import "./matrix-react-sdk/views/rooms/_RoomPreviewBar.scss";
+@import "./matrix-react-sdk/views/rooms/_RoomSettings.scss";
+@import "./matrix-react-sdk/views/rooms/_RoomTile.scss";
+@import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss";
+@import "./matrix-react-sdk/views/rooms/_TabCompleteBar.scss";
+@import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss";
+@import "./matrix-react-sdk/views/settings/_DevicesPanel.scss";
+@import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss";
+@import "./matrix-react-sdk/views/voip/_CallView.scss";
+@import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss";
+@import "./matrix-react-sdk/views/voip/_VideoView.scss";
+@import "./themes/_base.scss";
+@import "./vector-web/_fonts.scss";
+@import "./vector-web/structures/_CompatibilityPage.scss";
+@import "./vector-web/structures/_LeftPanel.scss";
+@import "./vector-web/structures/_RightPanel.scss";
+@import "./vector-web/structures/_RoomDirectory.scss";
+@import "./vector-web/structures/_RoomSubList.scss";
+@import "./vector-web/structures/_ViewSource.scss";
+@import "./vector-web/views/context_menus/_MessageContextMenu.scss";
+@import "./vector-web/views/context_menus/_NotificationStateContextMenu.scss";
+@import "./vector-web/views/context_menus/_RoomTagContextMenu.scss";
+@import "./vector-web/views/dialogs/_ChangelogDialog.scss";
+@import "./vector-web/views/directory/_NetworkDropdown.scss";
+@import "./vector-web/views/elements/_ImageView.scss";
+@import "./vector-web/views/elements/_Spinner.scss";
+@import "./vector-web/views/globals/_GuestWarningBar.scss";
+@import "./vector-web/views/globals/_MatrixToolbar.scss";
+@import "./vector-web/views/messages/_MessageTimestamp.scss";
+@import "./vector-web/views/messages/_SenderProfile.scss";
+@import "./vector-web/views/rooms/_RoomDropTarget.scss";
+@import "./vector-web/views/rooms/_RoomTooltip.scss";
+@import "./vector-web/views/rooms/_SearchBar.scss";
+@import "./vector-web/views/settings/_Notifications.scss";
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
similarity index 87%
rename from src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
index d317363dd5..d3e73a9a15 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
@@ -30,10 +30,10 @@ limitations under the License.
}
.mx_ContextualMenu {
- border: solid 1px rgba(187, 187, 187, 0.5);
+ border: solid 1px $menu-border-color;
border-radius: 4px;
- background-color: #f6f6f6;
- color: #4a4a4a;
+ background-color: $menu-bg-color;
+ color: $primary-fg-color;
position: absolute;
padding: 6px;
font-size: 14px;
@@ -51,7 +51,7 @@ limitations under the License.
width: 0;
height: 0;
border-top: 8px solid transparent;
- border-left: 8px solid rgba(187, 187, 187, 0.5);
+ border-left: 8px solid $menu-border-color;
border-bottom: 8px solid transparent;
}
@@ -60,7 +60,7 @@ limitations under the License.
width: 0;
height: 0;
border-top: 7px solid transparent;
- border-left: 7px solid #f6f6f6;
+ border-left: 7px solid $menu-bg-color;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
@@ -78,7 +78,7 @@ limitations under the License.
width: 0;
height: 0;
border-top: 8px solid transparent;
- border-right: 8px solid rgba(187, 187, 187, 0.5);
+ border-right: 8px solid $menu-border-color;
border-bottom: 8px solid transparent;
}
@@ -87,7 +87,7 @@ limitations under the License.
width: 0;
height: 0;
border-top: 7px solid transparent;
- border-right: 7px solid #f6f6f6;
+ border-right: 7px solid $menu-bg-color;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css b/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss
similarity index 91%
rename from src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss
index 88804409e2..2be193525e 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss
@@ -18,13 +18,13 @@ limitations under the License.
width: 960px;
margin-left: auto;
margin-right: auto;
- color: #4a4a4a;
+ color: $primary-fg-color;
}
.mx_CreateRoom input,
.mx_CreateRoom textarea {
border-radius: 3px;
- border: 1px solid #c7c7c7;
+ border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
padding: 9px;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
similarity index 90%
rename from src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
index fca53b1d2a..872085b66b 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
@@ -15,13 +15,8 @@ limitations under the License.
*/
.mx_FilePanel {
- -webkit-box-ordinal-group: 2;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 2;
- -webkit-order: 2;
order: 2;
- -webkit-flex: 1 1 0;
flex: 1 1 0;
width: 100%;
@@ -58,12 +53,12 @@ limitations under the License.
.mx_FilePanel .mx_EventTile .mx_MImageBody_download {
display: flex;
font-size: 14px;
- color: #acacac;
+ color: $event-timestamp-color;
}
.mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
flex: 1 1 auto;
- color: #747474;
+ color: $light-fg-color;
}
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
@@ -90,7 +85,7 @@ limitations under the License.
padding: 0px;
font-size: 11px;
opacity: 1.0;
- color: #acacac;
+ color: $event-timestamp-color;
}
.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
@@ -100,7 +95,7 @@ limitations under the License.
position: initial;
font-size: 11px;
opacity: 1.0;
- color: #acacac;
+ color: $event-timestamp-color;
}
/* Overrides for the wrappers around the body tile */
@@ -111,7 +106,7 @@ limitations under the License.
}
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
- background-color: #fff;
+ background-color: $primary-bg-color;
}
.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
similarity index 65%
rename from src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
index f1cc7d4a1a..05a39ea727 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
@@ -27,34 +27,21 @@ limitations under the License.
}
.mx_MatrixChat_wrapper {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
flex-direction: column;
- -webkit-flex-direction: column;
width: 100%;
height: 100%;
}
.mx_MatrixToolbar {
- -webkit-box-ordinal-group: 1;
- -moz-box-ordinal-group: 1;
- -ms-flex-order: 1;
- -webkit-order: 1;
order: 1;
height: 40px;
}
.mx_GuestWarningBar {
- -webkit-box-ordinal-group: 1;
- -moz-box-ordinal-group: 1;
- -ms-flex-order: 1;
- -webkit-order: 1;
order: 1;
height: 40px;
@@ -68,52 +55,32 @@ limitations under the License.
width: 100%;
height: 100%;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
- -webkit-box-ordinal-group: 2;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 2;
- -webkit-order: 2;
order: 2;
- -webkit-flex: 1;
flex: 1;
}
.mx_MatrixChat .mx_LeftPanel {
- -webkit-box-ordinal-group: 1;
- -moz-box-ordinal-group: 1;
- -ms-flex-order: 1;
- -webkit-order: 1;
order: 1;
- background-color: #eaf5f0;
+ background-color: $secondary-accent-color;
- -webkit-flex: 0 0 235px;
flex: 0 0 235px;
}
.mx_MatrixChat .mx_LeftPanel.collapsed {
- -webkit-flex: 0 0 60px;
flex: 0 0 60px;
}
.mx_MatrixChat .mx_MatrixChat_middlePanel {
- -webkit-box-ordinal-group: 2;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 2;
- -webkit-order: 2;
order: 2;
padding-left: 20px;
padding-right: 22px;
- background-color: #fff;
+ background-color: $primary-bg-color;
- -webkit-flex: 1;
flex: 1;
/* Experimental fix for https://github.com/vector-im/vector-web/issues/947
@@ -132,25 +99,15 @@ limitations under the License.
* point, but instead we fudge it and make the middlePanel
* flex itself.
*/
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
}
.mx_MatrixChat .mx_RightPanel {
- -webkit-box-ordinal-group: 3;
- -moz-box-ordinal-group: 3;
- -ms-flex-order: 3;
- -webkit-order: 3;
order: 3;
- -webkit-flex: 0 0 235px;
flex: 0 0 235px;
}
.mx_MatrixChat .mx_RightPanel.collapsed {
- -webkit-flex: 0 0 122px;
flex: 0 0 122px;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
similarity index 91%
rename from src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
index 83b0a033b7..ef75678dce 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
@@ -15,13 +15,8 @@ limitations under the License.
*/
.mx_NotificationPanel {
- -webkit-box-ordinal-group: 2;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 2;
- -webkit-order: 2;
order: 2;
- -webkit-flex: 1 1 0;
flex: 1 1 0;
width: 100%;
@@ -51,7 +46,7 @@ limitations under the License.
}
.mx_NotificationPanel .mx_EventTile_roomName a {
- color: #4a4a4a;
+ color: $primary-fg-color;
}
.mx_NotificationPanel .mx_EventTile_avatar {
@@ -61,8 +56,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
- color: #000;
- opacity: 0.3;
+ color: $primary-fg-color;
font-size: 12px;
display: inline;
padding-left: 0px;
@@ -94,7 +88,7 @@ limitations under the License.
}
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
- background-color: #fff;
+ background-color: $primary-bg-color;
}
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
similarity index 91%
rename from src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
index ef0b69c4d0..5daac88fc4 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
@@ -36,7 +36,7 @@ limitations under the License.
}
.mx_RoomStatusBar_placeholderIndicator span {
- color: #4a4a4a;
+ color: $primary-fg-color;
opacity: 0.5;
position: relative;
top: -4px;
@@ -76,7 +76,7 @@ limitations under the License.
.mx_RoomStatusBar_unreadMessagesBar {
padding-top: 10px;
- color: #ff0064;
+ color: $warning-color;
cursor: pointer;
}
@@ -93,29 +93,29 @@ limitations under the License.
}
.mx_RoomStatusBar_connectionLostBar_title {
- color: #ff0064;
+ color: $warning-color;
}
.mx_RoomStatusBar_connectionLostBar_desc {
- color: #454545;
+ color: $primary-fg-color;
font-size: 13px;
opacity: 0.5;
}
.mx_RoomStatusBar_resend_link {
- color: #454545 ! important;
+ color: $primary-fg-color ! important;
text-decoration: underline ! important;
cursor: pointer;
}
.mx_RoomStatusBar_tabCompleteBar {
padding-top: 10px;
- color: #4a4a4a;
+ color: $primary-fg-color;
}
.mx_RoomStatusBar_typingBar {
padding-top: 10px;
- color: #4a4a4a;
+ color: $primary-fg-color;
opacity: 0.5;
overflow-y: hidden;
display: block;
@@ -123,19 +123,16 @@ limitations under the License.
.mx_RoomStatusBar_tabCompleteWrapper {
display: flex;
- display: -webkit-flex;
height: 26px;
}
.mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar {
flex: 1 1 auto;
- -webkit-flex: 1 1 auto;
}
.mx_RoomStatusBar_tabCompleteEol {
flex: 0 0 auto;
- -webkit-flex: 0 0 auto;
- color: #76CFA6;
+ color: $accent-color;
}
.mx_RoomStatusBar_tabCompleteEol object {
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
similarity index 67%
rename from src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
index c3f7ceed3b..d1aeddec34 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -18,25 +18,15 @@ limitations under the License.
word-wrap: break-word;
position: relative;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
width: 100%;
flex-direction: column;
- -webkit-flex-direction: column;
}
.mx_RoomView .mx_RoomHeader {
- -webkit-box-ordinal-group: 1;
- -moz-box-ordinal-group: 1;
- -ms-flex-order: 1;
- -webkit-order: 1;
order: 1;
- -webkit-flex: 0 0 70px;
flex: 0 0 70px;
}
@@ -53,14 +43,10 @@ limitations under the License.
padding-right: 12px;
margin-left: -12px;
- -webkit-border-top-left-radius: 10px;
- -webkit-border-top-right-radius: 10px;
- -moz-border-radius-topleft: 10px;
- -moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
- background-color: rgba(255, 255, 255, 0.9);
+ background-color: $droptarget-bg-color;
border: 2px #e1dddd solid;
border-bottom: none;
position: absolute;
@@ -77,10 +63,6 @@ limitations under the License.
}
.mx_RoomView_auxPanel {
- -webkit-box-ordinal-group: 2;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 2;
- -webkit-order: 2;
order: 2;
min-width: 0px;
@@ -89,28 +71,18 @@ limitations under the License.
margin: auto;
overflow: auto;
- border-bottom: 1px solid #e5e5e5;
+ border-bottom: 1px solid $primary-hairline-color;
- -webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
.mx_RoomView_topUnreadMessagesBar {
- -webkit-box-ordinal-group: 3;
- -moz-box-ordinal-group: 3;
- -ms-flex-order: 3;
- -webkit-order: 3;
order: 3;
}
.mx_RoomView_messagePanel {
- -webkit-box-ordinal-group: 4;
- -moz-box-ordinal-group: 4;
- -ms-flex-order: 4;
- -webkit-order: 4;
order: 4;
- -webkit-flex: 1 1 0;
flex: 1 1 0;
width: 100%;
@@ -124,22 +96,15 @@ limitations under the License.
min-height: 100%;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
flex-direction: column;
- -webkit-flex-direction: column;
justify-content: flex-end;
- -webkit-justify-content: flex-end;
}
.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
justify-content: flex-start;
- -webkit-justify-content: flex-start;
}
.mx_RoomView_MessageList {
@@ -158,14 +123,10 @@ limitations under the License.
margin-bottom: 8px;
margin-left: 63px;
padding-bottom: 6px;
- border-bottom: 1px solid #e5e5e5;
+ border-bottom: 1px solid $primary-hairline-color;
}
.mx_RoomView_invitePrompt {
- -webkit-box-ordinal-group: 2;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 2;
- -webkit-order: 2;
order: 2;
min-width: 0px;
@@ -185,22 +146,17 @@ li.mx_RoomView_myReadMarker_container {
}
hr.mx_RoomView_myReadMarker {
- border-top: solid 1px #76cfa6;
- border-bottom: solid 1px #76cfa6;
+ border-top: solid 1px $accent-color;
+ border-bottom: solid 1px $accent-color;
margin-top: 0px;
position: relative;
top: 5px;
}
.mx_RoomView_statusArea {
- -webkit-box-ordinal-group: 5;
- -moz-box-ordinal-group: 5;
- -ms-flex-order: 5;
- -webkit-order: 5;
order: 5;
width: 100%;
- -webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
@@ -212,16 +168,16 @@ hr.mx_RoomView_myReadMarker {
.mx_RoomView_statusAreaBox_line {
margin-left: 65px;
- border-top: 1px solid #e5e5e5;
+ border-top: 1px solid $primary-hairline-color;
height: 1px;
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
- background-color: #fff;
+ background-color: $primary-bg-color;
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
- color: #fff;
+ color: $accent-fg-color;
opacity: 1.0;
}
@@ -234,8 +190,8 @@ hr.mx_RoomView_myReadMarker {
}
.mx_RoomView_inCall .mx_RoomView_statusAreaBox {
- background-color: #76CFA6;
- color: #fff;
+ background-color: $accent-color;
+ color: $accent-fg-color;
position: relative;
}
@@ -257,14 +213,9 @@ hr.mx_RoomView_myReadMarker {
}
.mx_RoomView .mx_MessageComposer {
- -webkit-box-ordinal-group: 6;
- -moz-box-ordinal-group: 6;
- -ms-flex-order: 6;
- -webkit-order: 6;
order: 6;
width: 100%;
- -webkit-flex: 0 0 auto;
flex: 0 0 auto;
margin-right: 2px;
}
@@ -272,13 +223,13 @@ hr.mx_RoomView_myReadMarker {
.mx_RoomView_ongoingConfCallNotification {
width: 100%;
text-align: center;
- background-color: #ff0064;
- color: #fff;
+ background-color: $warning-color;
+ color: $accent-fg-color;
font-weight: bold;
padding: 6px 0;
cursor: pointer;
}
.mx_RoomView_ongoingConfCallNotification a {
- color: #fff ! important;
+ color: $accent-fg-color ! important;
}
\ No newline at end of file
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
similarity index 96%
rename from src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
index 0b5362593b..bd335f6023 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
@@ -22,7 +22,6 @@ limitations under the License.
padding-bottom: 22px;
display: flex;
- display: -webkit-flex;
}
.mx_SearchBox_searchButton {
@@ -38,7 +37,6 @@ limitations under the License.
.mx_SearchBox_search {
flex: 1 1 auto;
- -webkit-flex: 1 1 auto;
width: 0px;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
font-size: 12px;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css b/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss
similarity index 93%
rename from src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss
index b489e13265..d76c81668c 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss
@@ -26,7 +26,7 @@ limitations under the License.
}
.mx_UploadBar_uploadProgressInner {
- background-color: #76cfa6;
+ background-color: $accent-color;
height: 5px;
}
@@ -34,7 +34,7 @@ limitations under the License.
margin-top: 5px;
margin-left: 65px;
opacity: 0.5;
- color: #4a4a4a;
+ color: $primary-fg-color;
}
.mx_UploadBar_uploadIcon {
@@ -57,5 +57,5 @@ limitations under the License.
float: right;
margin-top: 5px;
margin-right: 30px;
- color: #76cfa6;
+ color: $accent-color;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
similarity index 85%
rename from src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
index 427369a5c7..5c1b4c5c7e 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
@@ -20,34 +20,19 @@ limitations under the License.
margin-left: auto;
margin-right: auto;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
flex-direction: column;
- -webkit-flex-direction: column;
}
.mx_UserSettings .mx_RoomHeader {
- -webkit-box-ordinal-group: 1;
- -moz-box-ordinal-group: 1;
- -ms-flex-order: 1;
- -webkit-order: 1;
order: 1;
- -webkit-flex: 0 0 70px;
flex: 0 0 70px;
}
.mx_UserSettings_body {
- -webkit-box-ordinal-group: 2;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 2;
- -webkit-order: 2;
order: 2;
- -webkit-flex: 1 1 0;
flex: 1 1 0;
margin-top: -20px;
@@ -58,7 +43,7 @@ limitations under the License.
clear: both;
margin-left: 63px;
text-transform: uppercase;
- color: #3d3b39;
+ color: $h3-color;
font-weight: 600;
font-size: 13px;
margin-top: 26px;
@@ -84,8 +69,8 @@ limitations under the License.
border-radius: 36px;
font-weight: 400;
font-size: 16px;
- color: #fff;
- background-color: #76cfa6;
+ color: $accent-fg-color;
+ background-color: $accent-color;
width: auto;
margin: auto;
padding: 7px;
@@ -95,7 +80,7 @@ limitations under the License.
}
.mx_UserSettings_button.danger {
- background-color: #ff0064;
+ background-color: $warning-color;
}
.mx_UserSettings_section {
@@ -166,10 +151,10 @@ limitations under the License.
{
display: inline-block;
border: 0px;
- border-bottom: 1px solid rgba(151, 151, 151, 0.5);
+ border-bottom: 1px solid $input-underline-color;
padding: 0px;
width: 240px;
- color: rgba(74, 74, 74, 0.9);
+ color: $input-fg-color;
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
font-size: 16px;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
similarity index 87%
rename from src/skins/vector/css/matrix-react-sdk/structures/login/Login.css
rename to src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
index 0f610b25da..30231b43da 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
@@ -18,21 +18,15 @@ limitations under the License.
width: 100%;
height: 100%;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
- -webkit-align-items: center;
align-items: center;
- -webkit-justify-content: center;
justify-content: center;
overflow: auto;
}
.mx_Login h2 {
- color: #4a4a4a;
+ color: $primary-fg-color;
font-weight: 300;
margin-top: 32px;
margin-bottom: 20px;
@@ -53,7 +47,7 @@ limitations under the License.
.mx_Login_field {
width: 100%;
border-radius: 3px;
- border: 1px solid #c7c7c7;
+ border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
padding: 9px;
@@ -75,9 +69,9 @@ limitations under the License.
border-radius: 40px;
height: 40px;
border: 0px;
- background-color: #76cfa6;
+ background-color: $accent-color;
font-size: 15px;
- color: #fff;
+ color: $accent-fg-color;
}
.mx_Login_label {
@@ -99,7 +93,7 @@ limitations under the License.
}
.mx_Login_create:link {
- color: #4a4a4a;
+ color: $primary-fg-color;
}
.mx_Login_links {
@@ -112,7 +106,7 @@ limitations under the License.
}
.mx_Login_links a:link {
- color: #4a4a4a;
+ color: $primary-fg-color;
}
.mx_Login_prompt {
@@ -127,7 +121,7 @@ limitations under the License.
}
.mx_Login_forgot:link {
- color: #4a4a4a;
+ color: $primary-fg-color;
}
.mx_Login_loader {
@@ -147,7 +141,7 @@ limitations under the License.
}
.mx_Login_error {
- color: #ff2020;
+ color: $warning-color;
font-weight: bold;
text-align: center;
/*
diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
similarity index 96%
rename from src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css
rename to src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
index 901a29599a..d481e5c177 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
@@ -21,7 +21,7 @@ limitations under the License.
.mx_BaseAvatar_initial {
position: absolute;
z-index: 1;
- color: #fff;
+ color: $avatar-initial-color;
text-align: center;
speak: none;
pointer-events: none;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
similarity index 95%
rename from src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
rename to src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
index aa1dced80a..6bf9adce66 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
@@ -36,7 +36,7 @@ limitations under the License.
.mx_ChatInviteDialog_inputContainer {
border-radius: 3px;
- border: solid 1px #f0f0f0;
+ border: solid 1px $input-border-color;
line-height: 36px;
padding-left: 4px;
padding-right: 4px;
@@ -49,7 +49,7 @@ limitations under the License.
.mx_ChatInviteDialog_error {
position: absolute;
- color: #ff0064;
+ color: $warning-color;
line-height: 36px;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss
similarity index 90%
rename from src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css
rename to src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss
index 5e72d7f8bf..cbc0195cac 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss
@@ -24,7 +24,7 @@ limitations under the License.
border: 0px;
height: 36px;
border-radius: 40px;
- border: solid 1px #76cfa6;
+ border: solid 1px $accent-color;
font-weight: 600;
font-size: 14px;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
@@ -34,6 +34,6 @@ limitations under the License.
padding-right: 1.5em;
outline: none;
cursor: pointer;
- color: #76cfa6;
- background-color: #fff;
+ color: $accent-color;
+ background-color: $primary-bg-color;
}
\ No newline at end of file
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/SetDisplayNameDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss
similarity index 85%
rename from src/skins/vector/css/matrix-react-sdk/views/dialogs/SetDisplayNameDialog.css
rename to src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss
index 68409a803b..2f0750ad6b 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/SetDisplayNameDialog.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss
@@ -16,9 +16,9 @@ limitations under the License.
.mx_SetDisplayNameDialog_input {
border-radius: 3px;
- border: 1px solid #f0f0f0;
+ border: 1px solid $input-border-color;
padding: 9px;
- color: #454545;
- background-color: #fff;
+ color: $primary-fg-color;
+ background-color: $primary-bg-color;
font-size: 15px;
}
\ No newline at end of file
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss
similarity index 76%
rename from src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css
rename to src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss
index aa0f8c6a4e..9871a7e881 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss
@@ -16,13 +16,13 @@ limitations under the License.
.mx_AddressSelector {
position: absolute;
- background-color: #fff;
+ background-color: $primary-bg-color;
width: 485px;
max-height: 116px;
overflow-y: auto;
border-radius: 3px;
- background-color: #fff;
- border: solid 1px #76cfa6;
+ background-color: $primary-bg-color;
+ border: solid 1px $accent-color;
cursor: pointer;
}
@@ -31,15 +31,15 @@ limitations under the License.
}
.mx_AddressSelector_addressListElement .mx_AddressTile {
- background-color: #fff;
- border: solid 1px #fff;
+ background-color: $primary-bg-color;
+ border: solid 1px $primary-bg-color;
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
- background-color: #eaf5f0; /* selected colour */
+ background-color: $selected-color;
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
- background-color: #eaf5f0; /* selected colour */
- border: solid 1px #eaf5f0; /* selected colour */
+ background-color: $selected-color;
+ border: solid 1px $selected-color;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
similarity index 95%
rename from src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
index 76c0e6032f..59c0b68d3b 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
@@ -18,9 +18,9 @@ limitations under the License.
display: inline-block;
border-radius: 3px;
background-color: rgba(74, 73, 74, 0.1);
- border: solid 1px #f0f0f0;
+ border: solid 1px $input-border-color;
line-height: 26px;
- color: #454545;
+ color: $primary-fg-color;
font-size: 14px;
font-weight: normal;
margin-right: 4px;
@@ -28,8 +28,8 @@ limitations under the License.
.mx_AddressTile.mx_AddressTile_error {
background-color: rgba(255, 0, 100, 0.1);
- color: #ff0064;
- border-color: #ff0064;
+ color: $warning-color;
+ border-color: $warning-color;
}
.mx_AddressTile_network {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
similarity index 93%
rename from src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css
rename to src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
index c81974ebb4..94a92b23ce 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
@@ -17,19 +17,17 @@ limitations under the License.
.mx_DirectorySearchBox {
position: relative;
border-radius: 3px;
- border: 1px solid #c7c7c7;
+ border: 1px solid $strong-input-border-color;
}
.mx_DirectorySearchBox_container {
display: flex;
- display: -webkit-flex;
padding-left: 9px;
padding-right: 9px;
}
.mx_DirectorySearchBox_input {
flex-grow: 1;
- -webkit-flex-grow: 1;
border: 0;
padding: 0;
font-weight: 300;
@@ -44,7 +42,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
padding: 3px;
padding-left: 10px;
padding-right: 10px;
- background-color: #efefef;
+ background-color: $plinth-bg-color;
border-radius: 3px;
background-image: url('../../img/icon-return.svg');
background-position: 8px 70%;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/MemberEventListSummary.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss
similarity index 97%
rename from src/skins/vector/css/matrix-react-sdk/views/elements/MemberEventListSummary.css
rename to src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss
index b8197805a0..7d1b059b3c 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/MemberEventListSummary.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss
@@ -31,6 +31,6 @@ limitations under the License.
}
.mx_MemberEventListSummary_toggle {
- color:#76cfa6;
+ color:$accent-color;
cursor:pointer;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss
similarity index 88%
rename from src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css
rename to src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss
index 7b5e0c7461..a3fee232d0 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss
@@ -16,10 +16,10 @@ limitations under the License.
.mx_ProgressBar {
height: 5px;
- border: 1px solid black;
+ border: 1px solid $progressbar-color;
}
.mx_ProgressBar_fill {
height: 100%;
- background-color: #000;
+ background-color: $progressbar-color;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
similarity index 84%
rename from src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css
rename to src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
index f0b3c04645..72a4c0b7a4 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
@@ -1,14 +1,14 @@
.mx_UserPill {
color: white;
- background-color: #76cfa6;
+ background-color: $accent-color;
padding: 2px 8px;
border-radius: 16px;
}
.mx_RoomPill {
background-color: white;
- color: #76cfa6;
- border: 1px solid #76cfa6;
+ color: $accent-color;
+ border: 1px solid $accent-color;
padding: 2px 8px;
border-radius: 16px;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css b/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss
similarity index 96%
rename from src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css
rename to src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss
index 75cd4170da..1ad195de29 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss
@@ -27,5 +27,5 @@ limitations under the License.
opacity: 0.8;
font-size: 13px;
font-weight: 300;
- color: #4a4a4a;
+ color: $primary-fg-color;
}
\ No newline at end of file
diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss
similarity index 91%
rename from src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
rename to src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss
index 003ef1030c..83ae06160d 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss
@@ -22,18 +22,18 @@ limitations under the License.
.mx_MImageBody_thumbnail {
max-width: 100%;
/*
- background-color: #fff;
- border: 2px solid #fff;
+ background-color: $primary-bg-color;
+ border: 2px solid $primary-bg-color;
border-radius: 1px;
*/
}
.mx_MImageBody_download {
- color: #76cfa6;
+ color: $accent-color;
}
.mx_MImageBody_download a {
- color: #76cfa6;
+ color: $accent-color;
text-decoration: none;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_MNoticeBody.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css
rename to src/skins/vector/css/matrix-react-sdk/views/messages/_MNoticeBody.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_MTextBody.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css
rename to src/skins/vector/css/matrix-react-sdk/views/messages/_MTextBody.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/TextualEvent.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_TextualEvent.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/messages/TextualEvent.css
rename to src/skins/vector/css/matrix-react-sdk/views/messages/_TextualEvent.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_UnknownBody.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css
rename to src/skins/vector/css/matrix-react-sdk/views/messages/_UnknownBody.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
similarity index 85%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
index 6d611b5ef3..9265d4dc12 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
@@ -3,7 +3,7 @@
bottom: 0;
z-index: 1000;
width: 100%;
- border: 1px solid #e5e5e5;
+ border: 1px solid $primary-hairline-color;
background: white;
border-bottom: none;
border-radius: 4px 4px 0 0;
@@ -12,7 +12,7 @@
}
.mx_Autocomplete_ProviderSection {
- border-bottom: 1px solid #e5e5e5;
+ border-bottom: 1px solid $primary-hairline-color;
}
.mx_Autocomplete_Completion_container_pill {
@@ -28,7 +28,7 @@
user-select: none;
cursor: pointer;
align-items: center;
- color: #4a4a4a;
+ color: $primary-fg-color;
}
.mx_Autocomplete_Completion_block * {
@@ -42,7 +42,7 @@
user-select: none;
cursor: pointer;
align-items: center;
- color: #4a4a4a;
+ color: $primary-fg-color;
}
.mx_Autocomplete_Completion_pill * {
@@ -57,13 +57,13 @@
}
.mx_Autocomplete_Completion.selected {
- background: #f6f6f6;
+ background: $menu-bg-color;
outline: none;
}
.mx_Autocomplete_provider_name {
margin: 12px;
- color: #454545;
+ color: $primary-fg-color;
font-weight: 400;
opacity: 0.4;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
similarity index 96%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
index e52ece778d..3f360e79a0 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
@@ -17,7 +17,7 @@ limitations under the License.
.mx_EntityTile {
display: table-row;
position: relative;
- color: #454545;
+ color: $primary-fg-color;
cursor: pointer;
}
@@ -77,12 +77,12 @@ limitations under the License.
.mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic;
- font-color: #454545;
+ color: $primary-fg-color;
}
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
font-style: italic;
- font-color: #454545;
+ color: $primary-fg-color;
}
.mx_EntityTile_unavailable .mx_EntityTile_avatar,
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
similarity index 87%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
index fd3f486b7d..b79db91911 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
@@ -44,7 +44,7 @@ limitations under the License.
}
.mx_EventTile .mx_SenderProfile {
- color: #454545;
+ color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
display: block; /* anti-zalgo, with overflow hidden */
@@ -61,7 +61,7 @@ limitations under the License.
display: block;
visibility: hidden;
white-space: nowrap;
- color: #acacac;
+ color: $event-timestamp-color;
font-size: 11px;
left: 8px;
position: absolute;
@@ -93,20 +93,20 @@ limitations under the License.
* TODO: ultimately we probably want some transition on here.
*/
.mx_EventTile_selected .mx_EventTile_line {
- border-left: #76cfa6 5px solid;
+ border-left: $accent-color 5px solid;
padding-left: 60px;
- background-color: #f7f7f7;
+ background-color: $event-selected-color;
}
.mx_EventTile:hover .mx_EventTile_line,
.mx_EventTile.menu .mx_EventTile_line
{
- background-color: #f7f7f7;
+ background-color: $event-selected-color;
}
.mx_EventTile_searchHighlight {
- background-color: #76cfa6;
- color: #fff;
+ background-color: $accent-color;
+ color: $accent-fg-color;
border-radius: 5px;
padding-left: 2px;
padding-right: 2px;
@@ -114,26 +114,26 @@ limitations under the License.
}
.mx_EventTile_searchHighlight a {
- background-color: #76cfa6;
- color: #fff;
+ background-color: $accent-color;
+ color: $accent-fg-color;
}
.mx_EventTile_encrypting {
- color: #abddbc ! important;
+ color: $event-encrypting-color ! important;
}
.mx_EventTile_sending {
- color: #ddd;
+ color: $event-sending-color;
}
.mx_EventTile_notSent {
- color: #f44;
+ color: $event-notsent-color;
}
.mx_EventTile_highlight,
.mx_EventTile_highlight .markdown-body
{
- color: #FF0064;
+ color: $warning-color;
}
.mx_EventTile_contextual {
@@ -146,7 +146,12 @@ limitations under the License.
z-index: 1;
position: relative;
width: 90px;
- height: 1px; /* Hack to stop the height of this pushing the messages apart. Replaces marigin-top: -6px. This interacts better with a read marker being in between. Content overflows. */
+
+ /* Hack to stop the height of this pushing the messages apart.
+ Replaces margin-top: -6px. This interacts better with a read
+ marker being in between. Content overflows. */
+ height: 1px;
+
margin-right: 10px;
}
@@ -172,6 +177,9 @@ limitations under the License.
cursor: pointer;
top: 6px;
right: 6px;
+ width: 19px;
+ height: 19px;
+ background-image: url($edit-button-url);
}
.mx_EventTile:hover .mx_EventTile_editButton,
@@ -204,7 +212,7 @@ limitations under the License.
}
.mx_EventTile_readAvatarRemainder {
- color: #acacac;
+ color: $event-timestamp-color;
font-size: 11px;
position: absolute;
}
@@ -244,10 +252,10 @@ limitations under the License.
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
- border-left: #76cfa5 5px solid;
+ border-left: $e2e-verified-color 5px solid;
}
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
- border-left: #e8bf37 5px solid;
+ border-left: $e2e-unverified-color 5px solid;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
@@ -297,7 +305,7 @@ limitations under the License.
}
.mx_EventTile_content .markdown-body a {
- color: #76cfa6;
+ color: $accent-color;
}
.mx_EventTile_content .markdown-body .hljs {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
similarity index 89%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
index 2e2d9f8046..33f283e0d3 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
@@ -18,14 +18,12 @@ limitations under the License.
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
- display: -webkit-flex;
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 {
- -webkit-flex: 0 0 100px;
flex: 0 0 100px;
margin-left: 15px;
text-align: center;
@@ -34,7 +32,6 @@ limitations under the License.
.mx_LinkPreviewWidget_caption {
margin-left: 15px;
- -webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
@@ -56,7 +53,6 @@ limitations under the License.
.mx_LinkPreviewWidget_cancel {
visibility: hidden;
cursor: pointer;
- -webkit-flex: 0 0 40px;
flex: 0 0 40px;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
similarity index 90%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
index 53379ac4ce..f1584d4e00 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
@@ -20,8 +20,8 @@ limitations under the License.
.mx_MemberDeviceInfo_textButton {
- color: #fff;
- background-color: #76cfa6;
+ color: $accent-fg-color;
+ background-color: $accent-color;
border-radius: 17px;
text-align: center;
padding-left: 1em;
@@ -50,13 +50,13 @@ limitations under the License.
}
/* "Unblacklist" is too long for a regular button: make it wider and
- reduce the padding. */
+ reduce the padding. */
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
width: 8em;
padding-left: 1em;
padding-right: 1em;
-}
+}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
@@ -66,13 +66,13 @@ limitations under the License.
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
- color: #76cfa5;
+ color: $e2e-verified-color;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
- color: #e8bf37;
+ color: $e2e-unverified-color;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
- color: #ba6363;
+ color: $e2e-warning-color;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
similarity index 94%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
index 40b1524c27..d6fb5a19db 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
@@ -61,7 +61,7 @@ limitations under the License.
.mx_MemberInfo h3 {
text-transform: uppercase;
- color: #3d3b39;
+ color: $h3-color;
font-weight: 600;
font-size: 13px;
margin-top: 16px;
@@ -69,10 +69,9 @@ limitations under the License.
}
.mx_MemberInfo_profileField {
- font-color: #999999;
font-size: 13px;
position: relative;
- background-color: #fff;
+ background-color: $primary-bg-color;
}
.mx_MemberInfo_buttons {
@@ -82,7 +81,7 @@ limitations under the License.
.mx_MemberInfo_field {
cursor: pointer;
font-size: 13px;
- color: #76cfa6;
+ color: $accent-color;
margin-left: 8px;
line-height: 23px;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
similarity index 82%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
index 7d38360601..d87bced43e 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
@@ -20,22 +20,15 @@ limitations under the License.
margin-top: 12px;
margin-right: 20px;
- -webkit-flex: 1;
flex: 1;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
flex-direction: column;
- -webkit-flex-direction: column;
}
.mx_MemberList .mx_Spinner {
flex: 0;
- -webkit-flex: 0;
}
.mx_MemberList_chevron {
@@ -48,17 +41,16 @@ limitations under the License.
overflow-y: auto;
order: 1;
- -webkit-flex: 1 1 0;
flex: 1 1 0px;
}
.mx_MemberList_query {
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
border-radius: 3px;
- border: 1px solid #f0f0f0;
+ border: 1px solid $input-border-color;
padding: 9px;
- color: #454545;
- background-color: #fff;
+ color: $primary-fg-color;
+ background-color: $primary-bg-color;
margin-left: 3px;
font-size: 14px;
margin-bottom: 8px;
@@ -66,13 +58,13 @@ limitations under the License.
}
.mx_MemberList_query::-moz-placeholder {
- color: #454545;
+ color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
}
.mx_MemberList_query::-webkit-input-placeholder {
- color: #454545;
+ color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
}
@@ -80,7 +72,6 @@ limitations under the License.
.mx_MemberList_joined {
order: 2;
flex: 1 0 0;
- -webkit-flex: 1 0 0;
overflow-y: auto;
}
@@ -89,14 +80,13 @@ limitations under the License.
.mx_MemberList_invited {
order: 3;
flex: 0 0 100px;
- -webkit-flex: 0 0 100px;
overflow-y: auto;
}
*/
.mx_MemberList_invited h2 {
text-transform: uppercase;
- color: #3d3b39;
+ color: $h3-color;
font-weight: 600;
font-size: 13px;
padding-left: 3px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
similarity index 91%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
index 842f8db655..525cc1f654 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
@@ -18,7 +18,7 @@ limitations under the License.
max-width: 960px;
vertical-align: middle;
margin: auto;
- border-top: 1px solid #e5e5e5;
+ border-top: 1px solid $primary-hairline-color;
position: relative;
}
@@ -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 {
@@ -105,11 +105,9 @@ limitations under the License.
border: 0px;
resize: none;
outline: none;
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
box-shadow: none;
- color: #454545;
- background-color: #fff;
+ color: $primary-fg-color;
+ background-color: $primary-bg-color;
font-size: 14px;
max-height: 120px;
overflow: auto;
@@ -120,11 +118,11 @@ limitations under the License.
/* hack for FF as vertical alignment of custom placeholder text is broken */
.mx_MessageComposer_input textarea::-moz-placeholder {
line-height: 100%;
- color: #76cfa6;
+ color: $accent-color;
opacity: 1.0;
}
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
- color: #76cfa6;
+ color: $accent-color;
}
.mx_MessageComposer_upload,
@@ -153,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);
}
@@ -170,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/PresenceLabel.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_PresenceLabel.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_PresenceLabel.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
similarity index 77%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
index 056fa8794b..4affc99490 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
+++ 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,63 +23,36 @@ limitations under the License.
max-width: 960px;
margin: auto;
height: 70px;
-
- -webkit-align-items: center;
align-items: center;
-
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
}
.mx_RoomHeader_leftRow {
margin-left: -2px;
-
- -webkit-box-ordinal-group: 1;
- -moz-box-ordinal-group: 1;
- -ms-flex-order: 1;
- -webkit-order: 1;
order: 1;
-
- -webkit-flex: 1;
flex: 1;
}
.mx_RoomHeader_spinner {
height: 36px;
-
- -webkit-box-ordinal-group: 2;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 2;
- -webkit-order: 2;
order: 2;
-
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomHeader_textButton {
height: 36px;
- background-color: #76cfa6;
+ background-color: $accent-color;
border-radius: 36px;
margin-right: 8px;
- color: #fff;
+ color: $accent-fg-color;
line-height: 34px;
margin-top: -2px;
text-align: center;
-
- -webkit-box-ordinal-group: 2;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 2;
- -webkit-order: 2;
order: 2;
-
cursor: pointer;
/*
- -webkit-flex: 0 0 90px;
flex: 0 0 90px;
*/
padding-left: 12px;
@@ -88,27 +60,17 @@ limitations under the License.
}
.mx_RoomHeader_cancelButton {
- -webkit-box-ordinal-group: 2;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 2;
- -webkit-order: 2;
order: 2;
-
cursor: pointer;
-
padding-left: 12px;
padding-right: 12px;
}
.mx_RoomHeader_rightRow {
margin-top: 4px;
- background-color: #fff;
+ background-color: $primary-bg-color;
display: flex;
align-items: center;
- -webkit-box-ordinal-group: 3;
- -moz-box-ordinal-group: 3;
- -ms-flex-order: 3;
- -webkit-order: 3;
order: 3;
}
@@ -120,7 +82,7 @@ limitations under the License.
.mx_RoomHeader_simpleHeader {
line-height: 70px;
- color: #454545;
+ color: $primary-fg-color;
font-size: 22px;
font-weight: bold;
overflow: hidden;
@@ -138,7 +100,7 @@ limitations under the License.
width: 100%;
height: 31px;
overflow: hidden;
- color: #454545;
+ color: $primary-fg-color;
font-weight: bold;
font-size: 22px;
padding-left: 19px;
@@ -153,7 +115,7 @@ limitations under the License.
}
.mx_RoomHeader_settingsHint {
- color: #a2a2a2 ! important;
+ color: $settings-grey-fg-color ! important;
}
.mx_RoomHeader_searchStatus {
@@ -174,21 +136,21 @@ limitations under the License.
}
.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
- color: #76cfa6;
+ color: $accent-color;
}
.mx_RoomHeader_placeholder {
- color: #a2a2a2 ! important;
+ color: $settings-grey-fg-color ! important;
}
.mx_RoomHeader_editable {
- border-bottom: 1px solid #c7c7c7 ! important;
+ border-bottom: 1px solid $strong-input-border-color ! important;
min-width: 150px;
cursor: text;
}
.mx_RoomHeader_editable:focus {
- border-bottom: 1px solid #76CFA6 ! important;
+ border-bottom: 1px solid $accent-color ! important;
outline: none;
box-shadow: none;
}
@@ -197,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/RoomList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
similarity index 77%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
index 286a39f7d5..34ff3a8670 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
@@ -17,20 +17,9 @@ limitations under the License.
.mx_RoomPreviewBar {
text-align: center;
height: 176px;
-
- -webkit-align-items: center;
align-items: center;
-
flex-direction: column;
- -webkit-flex-direction: column;
-
justify-content: center;
- -webkit-justify-content: center;
-
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
}
@@ -38,16 +27,16 @@ limitations under the License.
}
.mx_RoomPreviewBar_invite_text {
- color: #454545;
+ color: $primary-fg-color;
}
.mx_RoomPreviewBar_join_text {
- color: #ff0064;
+ color: $warning-color;
}
.mx_RoomPreviewBar_preview_text {
margin-top: 25px;
- color: #a4a4a4;
+ color: $settings-grey-fg-color;
}
.mx_RoomPreviewBar_join_text a {
@@ -56,9 +45,7 @@ limitations under the License.
}
.mx_RoomPreviewBar_warning {
- display: -webkit-flex;
display: flex;
- -webkit-align-items: center;
align-items: center;
padding: 8px;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
similarity index 92%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
index 6a3b1ac8cb..ef115f6e9e 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
@@ -24,10 +24,10 @@ limitations under the License.
.mx_RoomSettings_integrationsButton_error {
position: relative;
height: 36px;
- background-color: #76cfa6;
+ background-color: $accent-color;
border-radius: 36px;
margin-right: 8px;
- color: #fff;
+ color: $accent-fg-color;
line-height: 34px;
text-align: center;
float: right;
@@ -47,8 +47,8 @@ limitations under the License.
font-size: 10pt;
line-height: 1.5em;
border-radius: 5px;
- background-color: #000;
- color: #fff;
+ background-color: $accent-color;
+ color: $accent-fg-color;
}
.mx_RoomSettings_e2eIcon {
@@ -81,7 +81,7 @@ limitations under the License.
.mx_RoomSettings h3 {
text-transform: uppercase;
- color: #3d3b39;
+ color: $h3-color;
font-weight: 600;
font-size: 13px;
margin-top: 36px;
@@ -174,7 +174,7 @@ limitations under the License.
}
.mx_RoomSettings_warning {
- color: #ff0064;
+ color: $warning-color;
font-weight: bold;
margin-top: 8px;
margin-bottom: 8px;
@@ -182,13 +182,13 @@ limitations under the License.
.mx_RoomSettings_editable {
border: 0px;
- border-bottom: 1px solid #c7c7c7;
+ border-bottom: 1px solid $strong-input-border-color;
padding: 0px;
min-width: 240px;
}
.mx_RoomSettings_editable:focus {
- border-bottom: 1px solid #76CFA6;
+ border-bottom: 1px solid $accent-color;
outline: none;
box-shadow: none;
}
@@ -205,7 +205,7 @@ limitations under the License.
}
.mx_RoomSettings_aliasPlaceholder {
- color: #a2a2a2;
+ color: $settings-grey-fg-color;
}
.mx_RoomSettings_buttons {
@@ -220,8 +220,8 @@ limitations under the License.
border-radius: 36px;
font-weight: 400;
font-size: 15px;
- color: #fff;
- background-color: #76cfa6;
+ color: $accent-fg-color;
+ background-color: $accent-color;
width: auto;
margin: auto;
padding: 6px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
similarity index 94%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
index b752d105d5..286a709d93 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
@@ -78,7 +78,7 @@ limitations under the License.
position: absolute;
content: "";
border-radius: 40px;
- background: #4A4A4A;
+ background: $primary-fg-color;
bottom: 0;
width: 24px;
height: 24px;
@@ -103,7 +103,7 @@ limitations under the License.
padding-right: 6px;
padding-top: 2px;
padding-bottom: 3px;
- color: rgba(69, 69, 69, 0.8);
+ color: $roomtile-name-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -142,7 +142,7 @@ limitations under the License.
width: 0;
height: 0;
margin-left: 5px;
- border-top: 5px solid #ff0064;
+ border-top: 5px solid $warning-color;
border-right: 7px solid transparent;
}
@@ -154,7 +154,7 @@ limitations under the License.
right: 8px; /*gutter */
top: 9px;
border-radius: 8px;
- color: #fff;
+ color: $accent-fg-color;
font-weight: 600;
font-size: 10px;
text-align: center;
@@ -175,11 +175,11 @@ limitations under the License.
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
- background-color: #76cfa6;
+ background-color: $accent-color;
}
.mx_RoomTile_highlight .mx_RoomTile_badge {
- background-color: #ff0064;
+ background-color: $warning-color;
}
.mx_RoomTile_unread, .mx_RoomTile_highlight {
@@ -187,7 +187,7 @@ limitations under the License.
}
.mx_RoomTile_selected {
- background-color: rgba(255, 255, 255, 0.8);
+ background-color: $roomtile-selected-bg-color;
}
.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
similarity index 84%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
index 76d9e21634..6116dd92ca 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
@@ -16,19 +16,17 @@ limitations under the License.
.mx_SearchableEntityList {
display: flex;
- display: -webkit-flex;
flex-direction: column;
- -webkit-flex-direction: column;
}
.mx_SearchableEntityList_query {
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
border-radius: 3px;
- border: 1px solid #f0f0f0;
+ border: 1px solid $input-border-color;
padding: 9px;
- color: #454545;
- background-color: #fff;
+ color: $primary-fg-color;
+ background-color: $primary-bg-color;
margin-left: 3px;
font-size: 15px;
margin-bottom: 8px;
@@ -36,20 +34,19 @@ limitations under the License.
}
.mx_SearchableEntityList_query::-moz-placeholder {
- color: #454545;
+ color: $primary-fg-color;
opacity: 0.5;
font-size: 12px;
}
.mx_SearchableEntityList_query::-webkit-input-placeholder {
- color: #454545;
+ color: $primary-fg-color;
opacity: 0.5;
font-size: 12px;
}
.mx_SearchableEntityList_listWrapper {
flex: 1;
- -webkit-flex: 1;
overflow-y: auto;
}
@@ -67,14 +64,13 @@ limitations under the License.
.mx_SearchableEntityList_hrWrapper {
width: 100%;
flex: 0 0 auto;
- -webkit-flex: 0 0 auto;
}
.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/rooms/TabCompleteBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss
similarity index 92%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss
index 1f8a345083..5dcbd21a47 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss
@@ -27,7 +27,7 @@ limitations under the License.
.mx_TabCompleteBar_command {
margin-right: 8px;
- background-color: #76CFA6;
+ background-color: $accent-color;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
@@ -41,7 +41,7 @@ limitations under the License.
.mx_TabCompleteBar_command .mx_TabCompleteBar_text {
opacity: 1.0;
vertical-align: initial;
- color: #fff;
+ color: $accent-fg-color;
}
.mx_TabCompleteBar_item img {
@@ -50,7 +50,7 @@ limitations under the License.
}
.mx_TabCompleteBar_text {
- color: #4a4a4a;
+ color: $primary-fg-color;
vertical-align: middle;
opacity: 0.5;
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss
similarity index 95%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss
index 77184d424f..7bbafcbe41 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss
@@ -19,7 +19,7 @@ limitations under the License.
max-width: 960px;
padding-top: 5px;
padding-bottom: 5px;
- border-bottom: 1px solid #e5e5e5;
+ border-bottom: 1px solid $primary-hairline-color;
}
.mx_TopUnreadMessagesBar_scrollUp {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css b/src/skins/vector/css/matrix-react-sdk/views/settings/_DevicesPanel.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css
rename to src/skins/vector/css/matrix-react-sdk/views/settings/_DevicesPanel.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css b/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss
similarity index 95%
rename from src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css
rename to src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss
index 93ee0e20fe..13fc9b2237 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss
@@ -24,7 +24,7 @@ limitations under the License.
}
.mx_IntegrationsManager iframe {
- background-color: #fff;
+ background-color: $primary-bg-color;
border: 0px;
width: 100%;
height: 100%;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css b/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss
similarity index 91%
rename from src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css
rename to src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss
index 8051b4d0d6..deb89a837c 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss
@@ -15,8 +15,8 @@ limitations under the License.
*/
.mx_CallView_voice {
- background-color: #76cfa6;
- color: #fff;
+ background-color: $accent-color;
+ color: $accent-fg-color;
cursor: pointer;
text-align: center;
padding: 6px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
similarity index 90%
rename from src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css
rename to src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
index 5cf62091b3..64eac25d01 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
@@ -18,7 +18,7 @@ limitations under the License.
text-align: center;
border: 1px solid #a4a4a4;
border-radius: 8px;
- background-color: #fff;
+ background-color: $primary-bg-color;
position: fixed;
z-index: 1000;
padding: 6px;
@@ -41,14 +41,12 @@ limitations under the License.
.mx_IncomingCallBox_buttons {
display: flex;
- display: -webkit-flex;
}
.mx_IncomingCallBox_buttons_cell {
vertical-align: middle;
padding: 6px;
flex: 1;
- -webkit-flex: 1;
}
.mx_IncomingCallBox_buttons_decline,
@@ -58,14 +56,14 @@ limitations under the License.
height: 36px;
line-height: 36px;
border-radius: 36px;
- color: #fff;
+ color: $accent-fg-color;
margin: auto;
}
.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/matrix-react-sdk/views/voip/VideoView.css b/src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/voip/VideoView.css
rename to src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss
diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh
new file mode 100755
index 0000000000..9381c5cd2a
--- /dev/null
+++ b/src/skins/vector/css/rethemendex.sh
@@ -0,0 +1,8 @@
+#!/bin/bash
+
+echo "// autogenerated by rethemendex.sh" > _components.scss
+
+for i in `find . -iname _\*.scss | fgrep -v _components.scss | sort`;
+do
+ echo "@import \"$i\";" >> _components.scss
+done
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
new file mode 100644
index 0000000000..ad18eb49c2
--- /dev/null
+++ b/src/skins/vector/css/themes/_base.scss
@@ -0,0 +1,104 @@
+
+// typical text (dark-on-white in light skin)
+$primary-fg-color: #454545;
+$primary-bg-color: #ffffff;
+
+// used for dialog box text
+$light-fg-color: #747474;
+
+// used for focusing form controls
+$focus-bg-color: #dddddd;
+
+// button UI (white-on-green in light skin)
+$accent-fg-color: #ffffff;
+$accent-color: #76CFA6;
+
+$selection-fg-color: $primary-bg-color;
+
+// red warning colour
+$warning-color: #ff0064;
+
+// left-panel style muted accent color
+$secondary-accent-color: #eaf5f0;
+
+// used by RoomDirectory permissions
+$plinth-bg-color: $secondary-accent-color;
+
+// used by RoomDropTarget
+$droptarget-bg-color: rgba(255,255,255,0.5);
+
+// used by AddressSelector
+$selected-color: #eaf5f0;
+
+// selected for hoverover & selected event tiles
+$event-selected-color: #f7f7f7;
+
+// used for the hairline dividers in RoomView
+$primary-hairline-color: #e5e5e5;
+
+// used for the border of input text fields
+$input-border-color: #f0f0f0;
+
+// apart from login forms, which have stronger border
+$strong-input-border-color: #c7c7c7;
+
+// used for UserSettings EditableText
+$input-underline-color: rgba(151, 151, 151, 0.5);
+$input-fg-color: rgba(74, 74, 74, 0.9);
+
+// context menus
+$menu-border-color: rgba(187, 187, 187, 0.5);
+$menu-bg-color: #f6f6f6;
+
+$avatar-initial-color: #ffffff;
+
+$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);
+$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
+
+$roomsublist-label-fg-color: $h3-color;
+$roomsublist-label-bg-color: #d3efe1;
+
+// ********************
+
+// event tile lifecycle
+$event-encrypting-color: #abddbc;
+$event-sending-color: #ddd;
+$event-notsent-color: #f44;
+
+// event timestamp
+$event-timestamp-color: #acacac;
+
+$edit-button-url: "/img/icon_context_message.svg";
+
+// e2e
+$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
+$e2e-unverified-color: #e8bf37;
+$e2e-warning-color: #ba6363;
+
+/*** ImageView ***/
+$lightbox-bg-color: #454545;
+$lightbox-fg-color: #ffffff;
+$lightbox-border-color: #ffffff;
+
+// unused?
+$progressbar-color: #000;
\ No newline at end of file
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
new file mode 100644
index 0000000000..e3e32e8442
--- /dev/null
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -0,0 +1,104 @@
+
+// typical text (dark-on-white in light skin)
+$primary-fg-color: #dddddd;
+$primary-bg-color: #2d2d2d;
+
+// used for focusing form controls
+$focus-bg-color: #101010;
+
+// used for dialog box text
+$light-fg-color: #747474;
+
+// button UI (white-on-green in light skin)
+$accent-fg-color: $primary-bg-color;
+$accent-color: #76CFA6;
+
+$selection-fg-color: $primary-bg-color;
+
+// red warning colour
+$warning-color: #ff0064;
+
+// left-panel style muted accent color
+$secondary-accent-color: $primary-bg-color;
+
+// used by RoomDirectory permissions
+$plinth-bg-color: #474747;
+
+// used by RoomDropTarget
+$droptarget-bg-color: rgba(45,45,45,0.5);
+
+// used by AddressSelector
+$selected-color: #eaf5f0;
+
+// selected for hoverover & selected event tiles
+$event-selected-color: #353535;
+
+// used for the hairline dividers in RoomView
+$primary-hairline-color: #474747;
+
+// used for the border of input text fields
+$input-border-color: #3a3a3a;
+
+// apart from login forms, which have stronger border
+$strong-input-border-color: #656565;
+
+// used for UserSettings EditableText
+$input-underline-color: $primary-fg-color;
+$input-fg-color: $primary-fg-color;
+
+// context menus
+$menu-border-color: rgba(187, 187, 187, 0.5);
+$menu-bg-color: #373737;
+
+$avatar-initial-color: #2d2d2d;
+
+$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);
+$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8);
+
+$roomsublist-label-fg-color: $h3-color;
+$roomsublist-label-bg-color: #454545;
+
+// ********************
+
+// event tile lifecycle
+$event-encrypting-color: #abddbc;
+$event-sending-color: #ddd;
+$event-notsent-color: #f44;
+
+// event timestamp
+$event-timestamp-color: #acacac;
+
+$edit-button-url: "/img/icon_context_message_dark.svg";
+
+// e2e
+$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
+$e2e-unverified-color: #e8bf37;
+$e2e-warning-color: #ba6363;
+
+/*** ImageView ***/
+$lightbox-bg-color: #454545;
+$lightbox-fg-color: #ffffff;
+$lightbox-border-color: #ffffff;
+
+// unused?
+$progressbar-color: #000;
\ No newline at end of file
diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss
new file mode 100644
index 0000000000..5a37d0368e
--- /dev/null
+++ b/src/skins/vector/css/themes/dark.scss
@@ -0,0 +1,3 @@
+@import "_base.scss";
+@import "_dark.scss";
+@import "../_components.scss";
diff --git a/src/skins/vector/css/themes/light.scss b/src/skins/vector/css/themes/light.scss
new file mode 100644
index 0000000000..ea0f93d5a3
--- /dev/null
+++ b/src/skins/vector/css/themes/light.scss
@@ -0,0 +1,2 @@
+@import "_base.scss";
+@import "../_components.scss";
\ No newline at end of file
diff --git a/src/skins/vector/css/vector-web/fonts.css b/src/skins/vector/css/vector-web/_fonts.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/fonts.css
rename to src/skins/vector/css/vector-web/_fonts.scss
diff --git a/src/skins/vector/css/vector-web/structures/CompatibilityPage.css b/src/skins/vector/css/vector-web/structures/_CompatibilityPage.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/structures/CompatibilityPage.css
rename to src/skins/vector/css/vector-web/structures/_CompatibilityPage.scss
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
similarity index 84%
rename from src/skins/vector/css/vector-web/structures/LeftPanel.css
rename to src/skins/vector/css/vector-web/structures/_LeftPanel.scss
index 4e3281716e..1ce10e51f6 100644
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
@@ -17,13 +17,8 @@ limitations under the License.
.mx_LeftPanel {
position: relative;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
flex-direction: column;
- -webkit-flex-direction: column;
}
.mx_LeftPanel_hideButton {
@@ -39,13 +34,8 @@ limitations under the License.
}
.mx_LeftPanel .mx_RoomList_scrollbar {
- -webkit-box-ordinal-group: 1;
- -moz-box-ordinal-group: 1;
- -ms-flex-order: 1;
- -webkit-order: 1;
order: 1;
- -webkit-flex: 1 1 0;
flex: 1 1 0;
overflow-y: auto;
@@ -57,16 +47,11 @@ limitations under the License.
}
.mx_LeftPanel .mx_BottomLeftMenu {
- -webkit-box-ordinal-group: 3;
- -moz-box-ordinal-group: 3;
- -ms-flex-order: 3;
- -webkit-order: 3;
order: 3;
border-top: 1px solid rgba(118, 207, 166, 0.2);
margin-left: 16px; /* gutter */
margin-right: 16px; /* gutter */
- -webkit-flex: 0 0 60px;
flex: 0 0 60px;
z-index: 1;
}
diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
similarity index 74%
rename from src/skins/vector/css/vector-web/structures/RightPanel.css
rename to src/skins/vector/css/vector-web/structures/_RightPanel.scss
index 5da4c4ab1a..91034e633d 100644
--- a/src/skins/vector/css/vector-web/structures/RightPanel.css
+++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
@@ -17,26 +17,16 @@ limitations under the License.
.mx_RightPanel {
position: relative;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
flex-direction: column;
- -webkit-flex-direction: column;
}
.mx_RightPanel_header {
- -webkit-box-ordinal-group: 1;
- -moz-box-ordinal-group: 1;
- -ms-flex-order: 1;
- -webkit-order: 1;
order: 1;
- border-bottom: 1px solid #e5e5e5;
+ border-bottom: 1px solid $primary-hairline-color;
margin-right: 20px;
- -webkit-flex: 0 0 70px;
flex: 0 0 70px;
}
@@ -45,7 +35,7 @@ limitations under the License.
.mx_RightPanel_headerButtonGroup {
margin-top: 6px;
float: left;
- background-color: #fff;
+ background-color: $primary-bg-color;
margin-left: 0px;
}
@@ -68,12 +58,13 @@ limitations under the License.
width: 25px;
height: 5px;
border-radius: 5px;
- background-color: rgba(118, 207, 166, 0.2);
+ background-color: $accent-color;
+ opacity: 0.2;
}
.mx_RightPanel_headerButton_badge {
font-size: 11px;
- color: #76cfa6;
+ color: $accent-color;
font-weight: bold;
padding-bottom: 2px;
}
@@ -81,33 +72,23 @@ limitations under the License.
.mx_RightPanel .mx_MemberList,
.mx_RightPanel .mx_MemberInfo,
.mx_RightPanel_blank {
- -webkit-box-ordinal-group: 2;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 2;
- -webkit-order: 2;
order: 2;
flex: 1 1 0;
- -webkit-flex: 1 1 0;
}
.mx_RightPanel_footer {
- -webkit-box-ordinal-group: 3;
- -moz-box-ordinal-group: 3;
- -ms-flex-order: 3;
- -webkit-order: 3;
order: 3;
- border-top: 1px solid #e5e5e5;
+ border-top: 1px solid $primary-hairline-color;
margin-right: 20px;
- -webkit-flex: 0 0 60px;
flex: 0 0 60px;
}
.mx_RightPanel_footer .mx_RightPanel_invite {
line-height: 35px;
font-size: 14px;
- color: #4A4A4A;
+ color: $primary-fg-color;
padding-top: 13px;
padding-left: 5px;
cursor: pointer;
diff --git a/src/skins/vector/css/vector-web/structures/RoomDirectory.css b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
similarity index 82%
rename from src/skins/vector/css/vector-web/structures/RoomDirectory.css
rename to src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
index 563b1772c9..6e508ec78f 100644
--- a/src/skins/vector/css/vector-web/structures/RoomDirectory.css
+++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
@@ -20,35 +20,23 @@ limitations under the License.
margin-left: auto;
margin-right: auto;
margin-bottom: 12px;
- color: #4a4a4a;
+ color: $primary-fg-color;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
flex-direction: column;
- -webkit-flex-direction: column;
}
.mx_RoomDirectory_list {
- -webkit-flex: 1;
flex: 1;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
flex-direction: column;
- -webkit-flex-direction: column;
}
.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
justify-content: flex-start;
- -webkit-justify-content: flex-start;
}
.mx_RoomDirectory_listheader {
@@ -72,13 +60,12 @@ limitations under the License.
.mx_RoomDirectory_tableWrapper {
overflow-y: auto;
- -webkit-flex: 1 1 0;
flex: 1 1 0;
}
.mx_RoomDirectory_table {
font-size: 14px;
- color: #4a4a4a;
+ color: $primary-fg-color;
width: 100%;
text-align: left;
table-layout: fixed;
@@ -110,11 +97,11 @@ limitations under the License.
padding-right: 5px;
height: 15px;
border-radius: 11px;
- background-color: #eaf5f0;
+ background-color: $plinth-bg-color;
text-transform: uppercase;
font-weight: 600;
font-size: 11px;
- color: #61c295;
+ color: $accent-color;
}
.mx_RoomDirectory_topic {
@@ -123,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/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss
similarity index 87%
rename from src/skins/vector/css/vector-web/structures/RoomSubList.css
rename to src/skins/vector/css/vector-web/structures/_RoomSubList.scss
index e6e81aefb1..0d56d6c378 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss
@@ -29,7 +29,7 @@ limitations under the License.
.mx_RoomSubList_label {
position: relative;
text-transform: uppercase;
- color: #3d3b39;
+ color: $roomsublist-label-fg-color;
font-weight: 600;
font-size: 12px;
width: 203px; /* padding + width = LHS Panel width */
@@ -39,8 +39,8 @@ limitations under the License.
padding-top: 6px;
padding-bottom: 6px;
cursor: pointer;
- background-color: #d3efe1;
- border-top: solid 2px #eaf5f0;
+ background-color: $roomsublist-label-bg-color;
+ border-top: solid 2px $secondary-accent-color;
}
.mx_RoomSubList_label.mx_RoomSubList_fixed {
@@ -63,7 +63,7 @@ limitations under the License.
display: inline-block;
font-size: 12px;
font-weight: normal;
- color: #76cfa6;
+ color: $accent-color;
padding-left: 5px;
text-transform: none;
}
@@ -80,14 +80,14 @@ limitations under the License.
right: 8px; /*gutter */
top: 7px;
border-radius: 8px;
- color: #fff;
+ color: $accent-fg-color;
font-weight: 600;
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
- background-color: #76cfa6;
+ background-color: $accent-color;
}
/*
@@ -97,7 +97,7 @@ limitations under the License.
*/
.mx_RoomSubList_badgeHighlight {
- background-color: #ff0064;
+ background-color: $warning-color;
}
/* This is the bottom of the speech bubble */
@@ -108,7 +108,7 @@ limitations under the License.
width: 0;
height: 0;
margin-left: 5px;
- border-top: 5px solid #ff0064;
+ border-top: 5px solid $warning-color;
border-right: 7px solid transparent;
}
@@ -129,7 +129,7 @@ limitations under the License.
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
- border-top: 6px solid #76cfa6;
+ border-top: 6px solid $accent-color;
}
.mx_RoomSubList_chevronUp {
@@ -137,14 +137,14 @@ limitations under the License.
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
- border-bottom: 6px solid #76cfa6;
+ border-bottom: 6px solid $accent-color;
}
.mx_RoomSubList_chevronRight {
width: 0;
height: 0;
border-top: 5px solid transparent;
- border-left: 6px solid #76cfa6;
+ border-left: 6px solid $accent-color;
border-bottom: 5px solid transparent;
}
@@ -165,7 +165,7 @@ limitations under the License.
.mx_RoomSubList_line {
display: inline-block;
width: 159px;
- border-top: dotted 2px #76cfa6;
+ border-top: dotted 2px $accent-color;
vertical-align: middle;
}
@@ -179,7 +179,7 @@ limitations under the License.
font-size: 10px;
font-weight: 600;
text-align: left;
- color: #76cfa6;
+ color: $accent-color;
padding-left: 7px;
padding-right: 7px;
padding-left: 7px;
@@ -198,20 +198,20 @@ limitations under the License.
right: 8px; /*gutter */
top: -2px;
border-radius: 8px;
- border: solid 1px #76cfa6;
- color: #fff;
+ border: solid 1px $accent-color;
+ color: $accent-fg-color;
font-weight: 600;
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 3px;
padding-right: 3px;
- background-color: #fff;
+ background-color: $primary-bg-color;
vertical-align: middle;
}
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
- background-color: #76cfa6;
+ background-color: $accent-color;
border: 0;
padding-top: 3px;
padding-left: 4px;
@@ -219,7 +219,7 @@ limitations under the License.
}
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
- background-color: #ff0064;
+ background-color: $warning-color;
border: 0;
padding-top: 3px;
padding-left: 4px;
diff --git a/src/skins/vector/css/vector-web/structures/ViewSource.css b/src/skins/vector/css/vector-web/structures/_ViewSource.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/structures/ViewSource.css
rename to src/skins/vector/css/vector-web/structures/_ViewSource.scss
diff --git a/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/_MessageContextMenu.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css
rename to src/skins/vector/css/vector-web/views/context_menus/_MessageContextMenu.scss
diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/_NotificationStateContextMenu.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
rename to src/skins/vector/css/vector-web/views/context_menus/_NotificationStateContextMenu.scss
diff --git a/src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
similarity index 96%
rename from src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css
rename to src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
index 947fd480fe..16a3ab79b1 100644
--- a/src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css
+++ b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
@@ -31,7 +31,7 @@ limitations under the License.
.mx_RoomTagContextMenu_field:last-child {
padding-bottom: 4px;
- color: #ff0064;
+ color: $warning-color;
}
.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet {
@@ -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/dialogs/ChangelogDialog.css b/src/skins/vector/css/vector-web/views/dialogs/_ChangelogDialog.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css
rename to src/skins/vector/css/vector-web/views/dialogs/_ChangelogDialog.scss
diff --git a/src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
similarity index 87%
rename from src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css
rename to src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
index 8b4c445996..84aa896a9d 100644
--- a/src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css
+++ b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
@@ -21,14 +21,14 @@ limitations under the License.
.mx_NetworkDropdown_input {
position: relative;
border-radius: 3px;
- border: 1px solid #c7c7c7;
+ border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
user-select: none;
}
.mx_NetworkDropdown_arrow {
- border-color: #4a4a4a transparent transparent;
+ border-color: $primary-fg-color transparent transparent;
border-style: solid;
border-width: 5px 5px 0;
display: block;
@@ -67,12 +67,12 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f
margin: 0;
padding: 0px;
border-radius: 3px;
- border: 1px solid #76cfa6;
- background-color: white;
+ border: 1px solid $accent-color;
+ background-color: $primary-bg-color;
}
.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
- background-color: #ddd;
+ background-color: $focus-bg-color;
}
.mx_NetworkDropdown_menu_network {
diff --git a/src/skins/vector/css/vector-web/views/elements/ImageView.css b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
similarity index 79%
rename from src/skins/vector/css/vector-web/views/elements/ImageView.css
rename to src/skins/vector/css/vector-web/views/elements/_ImageView.scss
index 73aaaa86b2..8ed0698a72 100644
--- a/src/skins/vector/css/vector-web/views/elements/ImageView.css
+++ b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
@@ -19,39 +19,27 @@ limitations under the License.
*/
.mx_ImageView {
- display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
- -webkit-align-items: center;
align-items: center;
}
.mx_ImageView_lhs {
- -webkit-box-ordinal-group: 1;
order: 1;
- -webkit-flex: 1;
flex: 1 1 10%;
min-width: 60px;
- /*
- background-color: #080;
- height: 20px;
- */
+ // background-color: #080;
+ // height: 20px;
}
.mx_ImageView_content {
- -webkit-box-ordinal-group: 2;
order: 2;
/* min-width hack needed for FF */
min-width: 0px;
height: 90%;
- -webkit-flex: 15;
flex: 15 15 0;
-
- display: -webkit-flex;
display: flex;
- -webkit-align-items: center;
- -webkit-justify-content: center;
align-items: center;
justify-content: center;
}
@@ -78,16 +66,13 @@ limitations under the License.
.mx_ImageView_label {
text-align: left;
display: flex;
- display: -webkit-flex;
justify-content: center;
- -webkit-justify-content: center;
flex-direction: column;
- -webkit-flex-direction: column;
padding-left: 30px;
padding-right: 30px;
min-height: 100%;
max-width: 240px;
- color: #fff;
+ color: $lightbox-fg-color;
}
.mx_ImageView_cancel {
@@ -114,10 +99,10 @@ limitations under the License.
margin-top: 24px;
margin-bottom: 6px;
border-radius: 5px;
- background-color: #454545;
+ background-color: $lightbox-bg-color;
font-size: 14px;
padding: 9px;
- border: 1px solid #fff;
+ border: 1px solid $lightbox-border-color;
}
.mx_ImageView_size {
@@ -125,7 +110,7 @@ limitations under the License.
}
.mx_ImageView_link {
- color: #fff ! important;
+ color: $lightbox-fg-color ! important;
text-decoration: none ! important;
}
@@ -141,13 +126,9 @@ limitations under the License.
}
.mx_ImageView_rhs {
- -webkit-box-ordinal-group: 3;
order: 3;
- -webkit-flex: 1;
flex: 1 1 10%;
min-width: 300px;
- /*
- background-color: #800;
- height: 20px;
- */
+ // background-color: #800;
+ // height: 20px;
}
diff --git a/src/skins/vector/css/vector-web/views/elements/Spinner.css b/src/skins/vector/css/vector-web/views/elements/_Spinner.scss
similarity index 86%
rename from src/skins/vector/css/vector-web/views/elements/Spinner.css
rename to src/skins/vector/css/vector-web/views/elements/_Spinner.scss
index 3831cc4c1c..aea5737918 100644
--- a/src/skins/vector/css/vector-web/views/elements/Spinner.css
+++ b/src/skins/vector/css/vector-web/views/elements/_Spinner.scss
@@ -15,16 +15,12 @@ limitations under the License.
*/
.mx_Spinner {
- display: -webkit-flex;
display: flex;
- -webkit-align-items: center;
- -webkit-justify-content: center;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
flex: 1;
- -webkit-flex: 1;
}
.mx_MatrixChat_middlePanel .mx_Spinner {
diff --git a/src/skins/vector/css/vector-web/views/globals/GuestWarningBar.css b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
similarity index 79%
rename from src/skins/vector/css/vector-web/views/globals/GuestWarningBar.css
rename to src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
index 717d75afe4..f5bdbaf9ca 100644
--- a/src/skins/vector/css/vector-web/views/globals/GuestWarningBar.css
+++ b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
@@ -15,15 +15,10 @@ limitations under the License.
*/
.mx_GuestWarningBar {
- background-color: #76cfa6;
- color: #fff;
+ background-color: $accent-color;
+ color: $accent-fg-color;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
- -webkit-align-items: center;
align-items: center;
}
@@ -34,7 +29,7 @@ limitations under the License.
}
.mx_GuestWarningBar a {
- color: #fff ! important;
+ color: $accent-fg-color ! important;
text-decoration: underline ! important;
cursor: pointer;
}
diff --git a/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
similarity index 82%
rename from src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css
rename to src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
index 4e214e113f..5a0b23aeb1 100644
--- a/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css
+++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
@@ -15,15 +15,10 @@ limitations under the License.
*/
.mx_MatrixToolbar {
- background-color: #76cfa6;
- color: #fff;
+ background-color: $accent-color;
+ color: $accent-fg-color;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
display: flex;
- -webkit-align-items: center;
align-items: center;
}
@@ -34,13 +29,12 @@ limitations under the License.
}
.mx_MatrixToolbar_content {
- -webkit-flex: 1;
flex: 1;
}
.mx_MatrixToolbar_link
{
- color: #fff ! important;
+ color: $accent-fg-color ! important;
text-decoration: underline ! important;
cursor: pointer;
}
diff --git a/src/skins/vector/css/vector-web/views/messages/MessageTimestamp.css b/src/skins/vector/css/vector-web/views/messages/_MessageTimestamp.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/messages/MessageTimestamp.css
rename to src/skins/vector/css/vector-web/views/messages/_MessageTimestamp.scss
diff --git a/src/skins/vector/css/vector-web/views/messages/SenderProfile.css b/src/skins/vector/css/vector-web/views/messages/_SenderProfile.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/messages/SenderProfile.css
rename to src/skins/vector/css/vector-web/views/messages/_SenderProfile.scss
diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
similarity index 89%
rename from src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css
rename to src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
index 003215aff2..e91658e8a8 100644
--- a/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css
+++ b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
@@ -22,9 +22,9 @@ limitations under the License.
margin-bottom: 7px;
padding-top: 5px;
padding-bottom: 5px;
- border: 1px dashed #76cfa6;
- color: #454545;
- background-color: rgba(255,255,255,0.5);
+ border: 1px dashed $accent-color;
+ color: $primary-fg-color;
+ background-color: $droptarget-bg-color;
border-radius: 4px;
}
@@ -39,7 +39,7 @@ limitations under the License.
}
.mx_RoomDropTarget_avatar {
- background-color: #fff;
+ background-color: $primary-bg-color;
border-radius: 24px;
width: 24px;
height: 24px;
diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
similarity index 82%
rename from src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
rename to src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
index 192fa77b39..5469a9e6d3 100644
--- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
+++ b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
@@ -21,16 +21,16 @@ limitations under the License.
width: 0;
height: 0;
border-top: 8px solid transparent;
- border-right: 8px solid rgba(187, 187, 187, 0.5);
+ border-right: 8px solid $menu-border-color;
border-bottom: 8px solid transparent;
}
-.mx_RoomTooltip_chevron:after{
+.mx_RoomTooltip_chevron:after {
content:'';
width: 0;
height: 0;
border-top: 7px solid transparent;
- border-right: 7px solid #fff;
+ border-right: 7px solid $primary-bg-color;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
@@ -40,14 +40,14 @@ limitations under the License.
.mx_RoomTooltip {
display: none;
position: fixed;
- border: 1px solid rgba(187, 187, 187, 0.5);
+ border: 1px solid $menu-border-color;
border-radius: 5px;
- background-color: #fff;
+ background-color: $primary-bg-color;
z-index: 2000;
padding: 5px;
pointer-events: none;
line-height: 14px;
font-size: 13px;
- color: rgba(0, 0, 0, 0.7);
+ color: $primary-fg-color;
}
diff --git a/src/skins/vector/css/vector-web/views/rooms/SearchBar.css b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
similarity index 85%
rename from src/skins/vector/css/vector-web/views/rooms/SearchBar.css
rename to src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
index 7ec1a17ad5..079ea16c68 100644
--- a/src/skins/vector/css/vector-web/views/rooms/SearchBar.css
+++ b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
@@ -18,21 +18,18 @@ limitations under the License.
padding-top: 5px;
padding-bottom: 5px;
display: flex;
- display: -webkit-flex;
align-items: center;
- -webkit-align-items: center;
}
.mx_SearchBar_input {
display: inline block;
border-radius: 3px 0px 0px 3px;
- border: 1px solid #f0f0f0;
+ border: 1px solid $input-border-color;
font-size: 15px;
padding: 9px;
padding-left: 11px;
width: auto;
flex: 1 1 0;
- -webkit-flex: 1 1 0;
}
.mx_SearchBar_searchButton {
@@ -41,7 +38,7 @@ limitations under the License.
width: 37px;
height: 37px;
border-radius: 0px 3px 3px 0px;
- background-color: #76CFA6;
+ background-color: $accent-color;
}
@keyframes pulsate {
@@ -61,8 +58,8 @@ limitations under the License.
border-radius: 36px;
font-weight: 400;
font-size: 15px;
- color: #fff;
- background-color: #76cfa6;
+ color: $accent-fg-color;
+ background-color: $accent-color;
width: auto;
margin: auto;
margin-left: 7px;
@@ -74,9 +71,9 @@ limitations under the License.
}
.mx_SearchBar_unselected {
- background-color: #fff;
- color: #76CFA6;
- border: #76CFA6 1px solid;
+ background-color: $primary-bg-color;
+ color: $accent-color;
+ border: $accent-color 1px solid;
}
.mx_SearchBar_cancel {
diff --git a/src/skins/vector/css/vector-web/views/settings/Notifications.css b/src/skins/vector/css/vector-web/views/settings/_Notifications.scss
similarity index 98%
rename from src/skins/vector/css/vector-web/views/settings/Notifications.css
rename to src/skins/vector/css/vector-web/views/settings/_Notifications.scss
index 7a93f3f7b2..4c88e44952 100644
--- a/src/skins/vector/css/vector-web/views/settings/Notifications.css
+++ b/src/skins/vector/css/vector-web/views/settings/_Notifications.scss
@@ -58,7 +58,7 @@ limitations under the License.
.mx_UserNotifSettings_keywords {
cursor: pointer;
- color: #76cfa6;
+ color: $accent-color;
}
.mx_UserSettings_devicesTable td {
diff --git a/src/skins/vector/img/icon_context_message_dark.svg b/src/skins/vector/img/icon_context_message_dark.svg
new file mode 100644
index 0000000000..b4336cc377
--- /dev/null
+++ b/src/skins/vector/img/icon_context_message_dark.svg
@@ -0,0 +1,15 @@
+
+
diff --git a/src/vector/index.html b/src/vector/index.html
index 73cdd2dfc8..a6c3092d15 100644
--- a/src/vector/index.html
+++ b/src/vector/index.html
@@ -20,14 +20,22 @@
- <% for(var i=0; i
-
- <% } %>
+ <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) {
+ var file = htmlWebpackPlugin.files.css[i];
+ var match = file.match(/^bundles\/.*?\/theme-((?!light\.).*)\.css$/);
+ if (match) {
+ var title = match[1].charAt(0).toUpperCase() + match[1].slice(1);
+ %>
+
+ <% } else { %>
+
+ <% }
+ } %>
- <% for(var i=0; i
+ <% for (var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%>
<% } %>
diff --git a/src/vector/index.js b/src/vector/index.js
index 8231950b49..a389224815 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -28,9 +28,9 @@ limitations under the License.
// https://babeljs.io/docs/plugins/transform-runtime/
require('babel-polyfill');
-// CSS requires: just putting them here for now as CSS is going to be
-// refactored "soon" anyway
-require('../../build/components.css');
+// Require common CSS here; this will make webpack process it into bundle.css.
+// Our own CSS (which is themed) is imported via separate webpack entry points
+// in webpack.config.js
require('gemini-scrollbar/gemini-scrollbar.css');
require('gfm.css/gfm.css');
require('highlight.js/styles/github.css');
diff --git a/webpack.config.js b/webpack.config.js
index 2a38d1392d..3a70196596 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,6 +15,10 @@ module.exports = {
// point, so that it doesn't block the pageload, but that is a separate
// problem)
"olm": "./src/vector/olm-loader.js",
+
+ // CSS themes
+ "theme-light": "./build/light.scss",
+ "theme-dark": "./build/dark.scss",
},
module: {
preLoaders: [
@@ -24,7 +28,8 @@ module.exports = {
{ test: /\.json$/, loader: "json" },
{ test: /\.js$/, loader: "babel", include: path.resolve('./src') },
// css-raw-loader loads CSS but doesn't try to treat url()s as require()s
- { test: /\.css$/, loader: ExtractTextPlugin.extract("css-raw-loader") },
+ // we're assuming that postcss has already preprocessed SCSS by this point
+ { test: /\.s?css$/, loader: ExtractTextPlugin.extract("css-raw-loader") },
],
noParse: [
// don't parse the languages within highlight.js. They cause stack