Merge pull request #2973 from vector-im/matthew/postcss

Switch CSS to using postcss, and implement a dark theme.
This commit is contained in:
Matthew Hodgson 2017-01-18 16:46:53 +00:00 committed by GitHub
commit c0e5a1ba3b
84 changed files with 667 additions and 606 deletions

View file

@ -29,7 +29,7 @@
"reskindex": "reskindex -h src/header", "reskindex": "reskindex -h src/header",
"build:res": "node scripts/copy-res.js", "build:res": "node scripts/copy-res.js",
"build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.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:compile": "babel --source-maps -d lib src",
"build:bundle": "NODE_ENV=production webpack -p --progress", "build:bundle": "NODE_ENV=production webpack -p --progress",
"build:bundle:dev": "webpack --optimize-occurence-order --progress", "build:bundle:dev": "webpack --optimize-occurence-order --progress",
@ -40,7 +40,7 @@
"start:res": "node scripts/copy-res.js -w", "start:res": "node scripts/copy-res.js -w",
"start:js": "webpack-dev-server -w --progress", "start:js": "webpack-dev-server -w --progress",
"start:js:prod": "NODE_ENV=production 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": "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\"", "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\" \"npm run start:css\"",
"clean": "rimraf build lib webapp electron/dist", "clean": "rimraf build lib webapp electron/dist",
@ -76,6 +76,7 @@
"url": "^0.11.0" "url": "^0.11.0"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^6.6.0",
"babel-cli": "^6.5.2", "babel-cli": "^6.5.2",
"babel-core": "^6.14.0", "babel-core": "^6.14.0",
"babel-eslint": "^6.1.0", "babel-eslint": "^6.1.0",
@ -90,7 +91,6 @@
"babel-preset-es2017": "^6.16.0", "babel-preset-es2017": "^6.16.0",
"babel-preset-react": "^6.16.0", "babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.17.0", "babel-preset-stage-2": "^6.17.0",
"catw": "^1.0.1",
"chokidar": "^1.6.1", "chokidar": "^1.6.1",
"cpx": "^1.3.2", "cpx": "^1.3.2",
"css-raw-loader": "^0.1.1", "css-raw-loader": "^0.1.1",
@ -114,6 +114,14 @@
"mocha": "^2.4.5", "mocha": "^2.4.5",
"parallelshell": "^1.2.0", "parallelshell": "^1.2.0",
"phantomjs-prebuilt": "^2.1.7", "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-perf": "^15.4.0",
"react-addons-test-utils": "^15.4.0", "react-addons-test-utils": "^15.4.0",
"rimraf": "^2.4.3", "rimraf": "^2.4.3",

15
postcss.config.json Normal file
View file

@ -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
}

View file

@ -29,7 +29,8 @@ body {
Arial here. */ Arial here. */
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
font-size: 15px; font-size: 15px;
color: #454545; background-color: $primary-bg-color;
color: $primary-fg-color;
border: 0px; border: 0px;
margin: 0px; margin: 0px;
/* This should render the fonts the same accross browsers */ /* This should render the fonts the same accross browsers */
@ -41,7 +42,7 @@ div.error {
} }
h2 { h2 {
color: #454545; color: $primary-fg-color;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
margin-top: 16px; margin-top: 16px;
@ -51,15 +52,20 @@ h2 {
a:hover, a:hover,
a:link, a:link,
a:visited { 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 { input[type=text].error, input[type=password].error {
border: 1px solid red; border: 1px solid $warning-color;
} }
input[type=text]:focus, textarea:focus { input[type=text]:focus, textarea:focus {
border: 1px solid #76CFA6; border: 1px solid $accent-color;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
} }
@ -77,10 +83,7 @@ textarea {
/* applied to side-panels and messagepanel when in RoomSettings */ /* applied to side-panels and messagepanel when in RoomSettings */
.mx_fadable { .mx_fadable {
opacity: 1; opacity: 1;
-webkit-transition: opacity 0.2s ease-in-out; 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;
} }
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48. /* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
@ -122,14 +125,8 @@ textarea {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center;
align-items: center; align-items: center;
-webkit-justify-content: center;
justify-content: center; justify-content: center;
} }
@ -148,8 +145,8 @@ textarea {
} }
.mx_Dialog { .mx_Dialog {
background-color: #fff; background-color: $primary-bg-color;
color: #747474; color: $light-fg-color;
z-index: 4010; z-index: 4010;
font-weight: 300; font-weight: 300;
font-size: 15px; font-size: 15px;
@ -168,13 +165,13 @@ textarea {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #e9e9e9; background-color: $dialog-background-bg-color;
opacity: 0.8; opacity: 0.8;
} }
.mx_Dialog_lightbox .mx_Dialog_background { .mx_Dialog_lightbox .mx_Dialog_background {
opacity: 0.85; opacity: 0.85;
background-color: #000; background-color: $lightbox-background-bg-color;
} }
.mx_Dialog_lightbox .mx_Dialog { .mx_Dialog_lightbox .mx_Dialog {
@ -190,7 +187,7 @@ textarea {
.mx_Dialog_content { .mx_Dialog_content {
margin: 24px 58px 68px 0; margin: 24px 58px 68px 0;
font-size: 14px; font-size: 14px;
color: #4a4a4a; color: $primary-fg-color;
word-wrap: break-word; word-wrap: break-word;
} }
@ -202,7 +199,7 @@ textarea {
border: 0px; border: 0px;
height: 36px; height: 36px;
border-radius: 40px; border-radius: 40px;
border: solid 1px #76cfa6; border: solid 1px $accent-color;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
@ -212,26 +209,26 @@ textarea {
padding-right: 1.5em; padding-right: 1.5em;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
color: #76cfa6; color: $accent-color;
background-color: #fff; background-color: $primary-bg-color;
/* align images in buttons (eg spinners) */ /* align images in buttons (eg spinners) */
vertical-align: middle; vertical-align: middle;
} }
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary { .mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
color: #fff; color: $accent-fg-color;
background-color: #76cfa6; background-color: $accent-color;
} }
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger { .mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
background-color: #ff0064; background-color: $warning-color;
border: solid 1px #ff0064; border: solid 1px $warning-color;
} }
.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled { .mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
background-color: #777777; background-color: $light-fg-color;
border: solid 1px #777777; border: solid 1px $light-fg-color;
opacity: 0.7; opacity: 0.7;
} }
@ -241,11 +238,11 @@ textarea {
font-weight: bold; font-weight: bold;
font-size: 22px; font-size: 22px;
line-height: 1.4; line-height: 1.4;
color: #454545; color: $primary-fg-color;
} }
.mx_Dialog_title.danger { .mx_Dialog_title.danger {
color: #ff0064; color: $warning-color;
} }
.mx_TextInputDialog_label { .mx_TextInputDialog_label {
@ -256,10 +253,10 @@ textarea {
.mx_TextInputDialog_input { .mx_TextInputDialog_input {
font-size: 15px; font-size: 15px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #f0f0f0; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;
color: #454545; color: $primary-fg-color;
background-color: #fff; background-color: $primary-bg-color;
} }
.mx_emojione { .mx_emojione {
@ -268,19 +265,19 @@ textarea {
} }
::-moz-selection { ::-moz-selection {
background-color: #76CFA6; background-color: $accent-color;
color: white; color: $selection-fg-color;
} }
::selection { ::selection {
background-color: #76CFA6; background-color: $accent-color;
color: white; color: $selection-fg-color;
} }
/** green button with rounded corners */ /** green button with rounded corners */
.mx_textButton { .mx_textButton {
color: #fff; color: $accent-fg-color;
background-color: #76cfa6; background-color: $accent-color;
border-radius: 17px; border-radius: 17px;
text-align: center; text-align: center;
padding-left: 1em; padding-left: 1em;

View file

@ -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";

View file

@ -30,10 +30,10 @@ limitations under the License.
} }
.mx_ContextualMenu { .mx_ContextualMenu {
border: solid 1px rgba(187, 187, 187, 0.5); border: solid 1px $menu-border-color;
border-radius: 4px; border-radius: 4px;
background-color: #f6f6f6; background-color: $menu-bg-color;
color: #4a4a4a; color: $primary-fg-color;
position: absolute; position: absolute;
padding: 6px; padding: 6px;
font-size: 14px; font-size: 14px;
@ -51,7 +51,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-top: 8px solid transparent; 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; border-bottom: 8px solid transparent;
} }
@ -60,7 +60,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-top: 7px solid transparent; border-top: 7px solid transparent;
border-left: 7px solid #f6f6f6; border-left: 7px solid $menu-bg-color;
border-bottom: 7px solid transparent; border-bottom: 7px solid transparent;
position:absolute; position:absolute;
top: -7px; top: -7px;
@ -78,7 +78,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-top: 8px solid transparent; 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; border-bottom: 8px solid transparent;
} }
@ -87,7 +87,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-top: 7px solid transparent; border-top: 7px solid transparent;
border-right: 7px solid #f6f6f6; border-right: 7px solid $menu-bg-color;
border-bottom: 7px solid transparent; border-bottom: 7px solid transparent;
position:absolute; position:absolute;
top: -7px; top: -7px;

View file

@ -18,13 +18,13 @@ limitations under the License.
width: 960px; width: 960px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
color: #4a4a4a; color: $primary-fg-color;
} }
.mx_CreateRoom input, .mx_CreateRoom input,
.mx_CreateRoom textarea { .mx_CreateRoom textarea {
border-radius: 3px; border-radius: 3px;
border: 1px solid #c7c7c7; border: 1px solid $strong-input-border-color;
font-weight: 300; font-weight: 300;
font-size: 13px; font-size: 13px;
padding: 9px; padding: 9px;

View file

@ -15,13 +15,8 @@ limitations under the License.
*/ */
.mx_FilePanel { .mx_FilePanel {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2; order: 2;
-webkit-flex: 1 1 0;
flex: 1 1 0; flex: 1 1 0;
width: 100%; width: 100%;
@ -58,12 +53,12 @@ limitations under the License.
.mx_FilePanel .mx_EventTile .mx_MImageBody_download { .mx_FilePanel .mx_EventTile .mx_MImageBody_download {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
color: #acacac; color: $event-timestamp-color;
} }
.mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink { .mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
flex: 1 1 auto; flex: 1 1 auto;
color: #747474; color: $light-fg-color;
} }
.mx_FilePanel .mx_EventTile .mx_MImageBody_size { .mx_FilePanel .mx_EventTile .mx_MImageBody_size {
@ -90,7 +85,7 @@ limitations under the License.
padding: 0px; padding: 0px;
font-size: 11px; font-size: 11px;
opacity: 1.0; opacity: 1.0;
color: #acacac; color: $event-timestamp-color;
} }
.mx_FilePanel .mx_EventTile .mx_MessageTimestamp { .mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
@ -100,7 +95,7 @@ limitations under the License.
position: initial; position: initial;
font-size: 11px; font-size: 11px;
opacity: 1.0; opacity: 1.0;
color: #acacac; color: $event-timestamp-color;
} }
/* Overrides for the wrappers around the body tile */ /* Overrides for the wrappers around the body tile */
@ -111,7 +106,7 @@ limitations under the License.
} }
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line { .mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
background-color: #fff; background-color: $primary-bg-color;
} }
.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line { .mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {

View file

@ -27,34 +27,21 @@ limitations under the License.
} }
.mx_MatrixChat_wrapper { .mx_MatrixChat_wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.mx_MatrixToolbar { .mx_MatrixToolbar {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1; order: 1;
height: 40px; height: 40px;
} }
.mx_GuestWarningBar { .mx_GuestWarningBar {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1; order: 1;
height: 40px; height: 40px;
@ -68,52 +55,32 @@ limitations under the License.
width: 100%; width: 100%;
height: 100%; height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2; order: 2;
-webkit-flex: 1;
flex: 1; flex: 1;
} }
.mx_MatrixChat .mx_LeftPanel { .mx_MatrixChat .mx_LeftPanel {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1; order: 1;
background-color: #eaf5f0; background-color: $secondary-accent-color;
-webkit-flex: 0 0 235px;
flex: 0 0 235px; flex: 0 0 235px;
} }
.mx_MatrixChat .mx_LeftPanel.collapsed { .mx_MatrixChat .mx_LeftPanel.collapsed {
-webkit-flex: 0 0 60px;
flex: 0 0 60px; flex: 0 0 60px;
} }
.mx_MatrixChat .mx_MatrixChat_middlePanel { .mx_MatrixChat .mx_MatrixChat_middlePanel {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2; order: 2;
padding-left: 20px; padding-left: 20px;
padding-right: 22px; padding-right: 22px;
background-color: #fff; background-color: $primary-bg-color;
-webkit-flex: 1;
flex: 1; flex: 1;
/* Experimental fix for https://github.com/vector-im/vector-web/issues/947 /* 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 * point, but instead we fudge it and make the middlePanel
* flex itself. * flex itself.
*/ */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
} }
.mx_MatrixChat .mx_RightPanel { .mx_MatrixChat .mx_RightPanel {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3; order: 3;
-webkit-flex: 0 0 235px;
flex: 0 0 235px; flex: 0 0 235px;
} }
.mx_MatrixChat .mx_RightPanel.collapsed { .mx_MatrixChat .mx_RightPanel.collapsed {
-webkit-flex: 0 0 122px;
flex: 0 0 122px; flex: 0 0 122px;
} }

View file

@ -15,13 +15,8 @@ limitations under the License.
*/ */
.mx_NotificationPanel { .mx_NotificationPanel {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2; order: 2;
-webkit-flex: 1 1 0;
flex: 1 1 0; flex: 1 1 0;
width: 100%; width: 100%;
@ -51,7 +46,7 @@ limitations under the License.
} }
.mx_NotificationPanel .mx_EventTile_roomName a { .mx_NotificationPanel .mx_EventTile_roomName a {
color: #4a4a4a; color: $primary-fg-color;
} }
.mx_NotificationPanel .mx_EventTile_avatar { .mx_NotificationPanel .mx_EventTile_avatar {
@ -61,8 +56,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile, .mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp { .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
color: #000; color: $primary-fg-color;
opacity: 0.3;
font-size: 12px; font-size: 12px;
display: inline; display: inline;
padding-left: 0px; padding-left: 0px;
@ -94,7 +88,7 @@ limitations under the License.
} }
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line { .mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
background-color: #fff; background-color: $primary-bg-color;
} }
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line { .mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {

View file

@ -36,7 +36,7 @@ limitations under the License.
} }
.mx_RoomStatusBar_placeholderIndicator span { .mx_RoomStatusBar_placeholderIndicator span {
color: #4a4a4a; color: $primary-fg-color;
opacity: 0.5; opacity: 0.5;
position: relative; position: relative;
top: -4px; top: -4px;
@ -76,7 +76,7 @@ limitations under the License.
.mx_RoomStatusBar_unreadMessagesBar { .mx_RoomStatusBar_unreadMessagesBar {
padding-top: 10px; padding-top: 10px;
color: #ff0064; color: $warning-color;
cursor: pointer; cursor: pointer;
} }
@ -93,29 +93,29 @@ limitations under the License.
} }
.mx_RoomStatusBar_connectionLostBar_title { .mx_RoomStatusBar_connectionLostBar_title {
color: #ff0064; color: $warning-color;
} }
.mx_RoomStatusBar_connectionLostBar_desc { .mx_RoomStatusBar_connectionLostBar_desc {
color: #454545; color: $primary-fg-color;
font-size: 13px; font-size: 13px;
opacity: 0.5; opacity: 0.5;
} }
.mx_RoomStatusBar_resend_link { .mx_RoomStatusBar_resend_link {
color: #454545 ! important; color: $primary-fg-color ! important;
text-decoration: underline ! important; text-decoration: underline ! important;
cursor: pointer; cursor: pointer;
} }
.mx_RoomStatusBar_tabCompleteBar { .mx_RoomStatusBar_tabCompleteBar {
padding-top: 10px; padding-top: 10px;
color: #4a4a4a; color: $primary-fg-color;
} }
.mx_RoomStatusBar_typingBar { .mx_RoomStatusBar_typingBar {
padding-top: 10px; padding-top: 10px;
color: #4a4a4a; color: $primary-fg-color;
opacity: 0.5; opacity: 0.5;
overflow-y: hidden; overflow-y: hidden;
display: block; display: block;
@ -123,19 +123,16 @@ limitations under the License.
.mx_RoomStatusBar_tabCompleteWrapper { .mx_RoomStatusBar_tabCompleteWrapper {
display: flex; display: flex;
display: -webkit-flex;
height: 26px; height: 26px;
} }
.mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar { .mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar {
flex: 1 1 auto; flex: 1 1 auto;
-webkit-flex: 1 1 auto;
} }
.mx_RoomStatusBar_tabCompleteEol { .mx_RoomStatusBar_tabCompleteEol {
flex: 0 0 auto; flex: 0 0 auto;
-webkit-flex: 0 0 auto; color: $accent-color;
color: #76CFA6;
} }
.mx_RoomStatusBar_tabCompleteEol object { .mx_RoomStatusBar_tabCompleteEol object {

View file

@ -18,25 +18,15 @@ limitations under the License.
word-wrap: break-word; word-wrap: break-word;
position: relative; position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
} }
.mx_RoomView .mx_RoomHeader { .mx_RoomView .mx_RoomHeader {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1; order: 1;
-webkit-flex: 0 0 70px;
flex: 0 0 70px; flex: 0 0 70px;
} }
@ -53,14 +43,10 @@ limitations under the License.
padding-right: 12px; padding-right: 12px;
margin-left: -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-left-radius: 10px;
border-top-right-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: 2px #e1dddd solid;
border-bottom: none; border-bottom: none;
position: absolute; position: absolute;
@ -77,10 +63,6 @@ limitations under the License.
} }
.mx_RoomView_auxPanel { .mx_RoomView_auxPanel {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2; order: 2;
min-width: 0px; min-width: 0px;
@ -89,28 +71,18 @@ limitations under the License.
margin: auto; margin: auto;
overflow: auto; overflow: auto;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid $primary-hairline-color;
-webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
} }
.mx_RoomView_topUnreadMessagesBar { .mx_RoomView_topUnreadMessagesBar {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3; order: 3;
} }
.mx_RoomView_messagePanel { .mx_RoomView_messagePanel {
-webkit-box-ordinal-group: 4;
-moz-box-ordinal-group: 4;
-ms-flex-order: 4;
-webkit-order: 4;
order: 4; order: 4;
-webkit-flex: 1 1 0;
flex: 1 1 0; flex: 1 1 0;
width: 100%; width: 100%;
@ -124,22 +96,15 @@ limitations under the License.
min-height: 100%; min-height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
-webkit-justify-content: flex-end;
} }
.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper { .mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
justify-content: flex-start; justify-content: flex-start;
-webkit-justify-content: flex-start;
} }
.mx_RoomView_MessageList { .mx_RoomView_MessageList {
@ -158,14 +123,10 @@ limitations under the License.
margin-bottom: 8px; margin-bottom: 8px;
margin-left: 63px; margin-left: 63px;
padding-bottom: 6px; padding-bottom: 6px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid $primary-hairline-color;
} }
.mx_RoomView_invitePrompt { .mx_RoomView_invitePrompt {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2; order: 2;
min-width: 0px; min-width: 0px;
@ -185,22 +146,17 @@ li.mx_RoomView_myReadMarker_container {
} }
hr.mx_RoomView_myReadMarker { hr.mx_RoomView_myReadMarker {
border-top: solid 1px #76cfa6; border-top: solid 1px $accent-color;
border-bottom: solid 1px #76cfa6; border-bottom: solid 1px $accent-color;
margin-top: 0px; margin-top: 0px;
position: relative; position: relative;
top: 5px; top: 5px;
} }
.mx_RoomView_statusArea { .mx_RoomView_statusArea {
-webkit-box-ordinal-group: 5;
-moz-box-ordinal-group: 5;
-ms-flex-order: 5;
-webkit-order: 5;
order: 5; order: 5;
width: 100%; width: 100%;
-webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
} }
@ -212,16 +168,16 @@ hr.mx_RoomView_myReadMarker {
.mx_RoomView_statusAreaBox_line { .mx_RoomView_statusAreaBox_line {
margin-left: 65px; margin-left: 65px;
border-top: 1px solid #e5e5e5; border-top: 1px solid $primary-hairline-color;
height: 1px; height: 1px;
} }
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner { .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
background-color: #fff; background-color: $primary-bg-color;
} }
.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename { .mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
color: #fff; color: $accent-fg-color;
opacity: 1.0; opacity: 1.0;
} }
@ -234,8 +190,8 @@ hr.mx_RoomView_myReadMarker {
} }
.mx_RoomView_inCall .mx_RoomView_statusAreaBox { .mx_RoomView_inCall .mx_RoomView_statusAreaBox {
background-color: #76CFA6; background-color: $accent-color;
color: #fff; color: $accent-fg-color;
position: relative; position: relative;
} }
@ -257,14 +213,9 @@ hr.mx_RoomView_myReadMarker {
} }
.mx_RoomView .mx_MessageComposer { .mx_RoomView .mx_MessageComposer {
-webkit-box-ordinal-group: 6;
-moz-box-ordinal-group: 6;
-ms-flex-order: 6;
-webkit-order: 6;
order: 6; order: 6;
width: 100%; width: 100%;
-webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
margin-right: 2px; margin-right: 2px;
} }
@ -272,13 +223,13 @@ hr.mx_RoomView_myReadMarker {
.mx_RoomView_ongoingConfCallNotification { .mx_RoomView_ongoingConfCallNotification {
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: #ff0064; background-color: $warning-color;
color: #fff; color: $accent-fg-color;
font-weight: bold; font-weight: bold;
padding: 6px 0; padding: 6px 0;
cursor: pointer; cursor: pointer;
} }
.mx_RoomView_ongoingConfCallNotification a { .mx_RoomView_ongoingConfCallNotification a {
color: #fff ! important; color: $accent-fg-color ! important;
} }

View file

@ -22,7 +22,6 @@ limitations under the License.
padding-bottom: 22px; padding-bottom: 22px;
display: flex; display: flex;
display: -webkit-flex;
} }
.mx_SearchBox_searchButton { .mx_SearchBox_searchButton {
@ -38,7 +37,6 @@ limitations under the License.
.mx_SearchBox_search { .mx_SearchBox_search {
flex: 1 1 auto; flex: 1 1 auto;
-webkit-flex: 1 1 auto;
width: 0px; width: 0px;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
font-size: 12px; font-size: 12px;

View file

@ -26,7 +26,7 @@ limitations under the License.
} }
.mx_UploadBar_uploadProgressInner { .mx_UploadBar_uploadProgressInner {
background-color: #76cfa6; background-color: $accent-color;
height: 5px; height: 5px;
} }
@ -34,7 +34,7 @@ limitations under the License.
margin-top: 5px; margin-top: 5px;
margin-left: 65px; margin-left: 65px;
opacity: 0.5; opacity: 0.5;
color: #4a4a4a; color: $primary-fg-color;
} }
.mx_UploadBar_uploadIcon { .mx_UploadBar_uploadIcon {
@ -57,5 +57,5 @@ limitations under the License.
float: right; float: right;
margin-top: 5px; margin-top: 5px;
margin-right: 30px; margin-right: 30px;
color: #76cfa6; color: $accent-color;
} }

View file

@ -20,34 +20,19 @@ limitations under the License.
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
} }
.mx_UserSettings .mx_RoomHeader { .mx_UserSettings .mx_RoomHeader {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1; order: 1;
-webkit-flex: 0 0 70px;
flex: 0 0 70px; flex: 0 0 70px;
} }
.mx_UserSettings_body { .mx_UserSettings_body {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2; order: 2;
-webkit-flex: 1 1 0;
flex: 1 1 0; flex: 1 1 0;
margin-top: -20px; margin-top: -20px;
@ -58,7 +43,7 @@ limitations under the License.
clear: both; clear: both;
margin-left: 63px; margin-left: 63px;
text-transform: uppercase; text-transform: uppercase;
color: #3d3b39; color: $h3-color;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 13px;
margin-top: 26px; margin-top: 26px;
@ -84,8 +69,8 @@ limitations under the License.
border-radius: 36px; border-radius: 36px;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
color: #fff; color: $accent-fg-color;
background-color: #76cfa6; background-color: $accent-color;
width: auto; width: auto;
margin: auto; margin: auto;
padding: 7px; padding: 7px;
@ -95,7 +80,7 @@ limitations under the License.
} }
.mx_UserSettings_button.danger { .mx_UserSettings_button.danger {
background-color: #ff0064; background-color: $warning-color;
} }
.mx_UserSettings_section { .mx_UserSettings_section {
@ -166,10 +151,10 @@ limitations under the License.
{ {
display: inline-block; display: inline-block;
border: 0px; border: 0px;
border-bottom: 1px solid rgba(151, 151, 151, 0.5); border-bottom: 1px solid $input-underline-color;
padding: 0px; padding: 0px;
width: 240px; width: 240px;
color: rgba(74, 74, 74, 0.9); color: $input-fg-color;
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif; font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
font-size: 16px; font-size: 16px;
} }

View file

@ -18,21 +18,15 @@ limitations under the License.
width: 100%; width: 100%;
height: 100%; height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center;
align-items: center; align-items: center;
-webkit-justify-content: center;
justify-content: center; justify-content: center;
overflow: auto; overflow: auto;
} }
.mx_Login h2 { .mx_Login h2 {
color: #4a4a4a; color: $primary-fg-color;
font-weight: 300; font-weight: 300;
margin-top: 32px; margin-top: 32px;
margin-bottom: 20px; margin-bottom: 20px;
@ -53,7 +47,7 @@ limitations under the License.
.mx_Login_field { .mx_Login_field {
width: 100%; width: 100%;
border-radius: 3px; border-radius: 3px;
border: 1px solid #c7c7c7; border: 1px solid $strong-input-border-color;
font-weight: 300; font-weight: 300;
font-size: 13px; font-size: 13px;
padding: 9px; padding: 9px;
@ -75,9 +69,9 @@ limitations under the License.
border-radius: 40px; border-radius: 40px;
height: 40px; height: 40px;
border: 0px; border: 0px;
background-color: #76cfa6; background-color: $accent-color;
font-size: 15px; font-size: 15px;
color: #fff; color: $accent-fg-color;
} }
.mx_Login_label { .mx_Login_label {
@ -99,7 +93,7 @@ limitations under the License.
} }
.mx_Login_create:link { .mx_Login_create:link {
color: #4a4a4a; color: $primary-fg-color;
} }
.mx_Login_links { .mx_Login_links {
@ -112,7 +106,7 @@ limitations under the License.
} }
.mx_Login_links a:link { .mx_Login_links a:link {
color: #4a4a4a; color: $primary-fg-color;
} }
.mx_Login_prompt { .mx_Login_prompt {
@ -127,7 +121,7 @@ limitations under the License.
} }
.mx_Login_forgot:link { .mx_Login_forgot:link {
color: #4a4a4a; color: $primary-fg-color;
} }
.mx_Login_loader { .mx_Login_loader {
@ -147,7 +141,7 @@ limitations under the License.
} }
.mx_Login_error { .mx_Login_error {
color: #ff2020; color: $warning-color;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
/* /*

View file

@ -21,7 +21,7 @@ limitations under the License.
.mx_BaseAvatar_initial { .mx_BaseAvatar_initial {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
color: #fff; color: $avatar-initial-color;
text-align: center; text-align: center;
speak: none; speak: none;
pointer-events: none; pointer-events: none;

View file

@ -36,7 +36,7 @@ limitations under the License.
.mx_ChatInviteDialog_inputContainer { .mx_ChatInviteDialog_inputContainer {
border-radius: 3px; border-radius: 3px;
border: solid 1px #f0f0f0; border: solid 1px $input-border-color;
line-height: 36px; line-height: 36px;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
@ -49,7 +49,7 @@ limitations under the License.
.mx_ChatInviteDialog_error { .mx_ChatInviteDialog_error {
position: absolute; position: absolute;
color: #ff0064; color: $warning-color;
line-height: 36px; line-height: 36px;
} }

View file

@ -24,7 +24,7 @@ limitations under the License.
border: 0px; border: 0px;
height: 36px; height: 36px;
border-radius: 40px; border-radius: 40px;
border: solid 1px #76cfa6; border: solid 1px $accent-color;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
@ -34,6 +34,6 @@ limitations under the License.
padding-right: 1.5em; padding-right: 1.5em;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
color: #76cfa6; color: $accent-color;
background-color: #fff; background-color: $primary-bg-color;
} }

View file

@ -16,9 +16,9 @@ limitations under the License.
.mx_SetDisplayNameDialog_input { .mx_SetDisplayNameDialog_input {
border-radius: 3px; border-radius: 3px;
border: 1px solid #f0f0f0; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;
color: #454545; color: $primary-fg-color;
background-color: #fff; background-color: $primary-bg-color;
font-size: 15px; font-size: 15px;
} }

View file

@ -16,13 +16,13 @@ limitations under the License.
.mx_AddressSelector { .mx_AddressSelector {
position: absolute; position: absolute;
background-color: #fff; background-color: $primary-bg-color;
width: 485px; width: 485px;
max-height: 116px; max-height: 116px;
overflow-y: auto; overflow-y: auto;
border-radius: 3px; border-radius: 3px;
background-color: #fff; background-color: $primary-bg-color;
border: solid 1px #76cfa6; border: solid 1px $accent-color;
cursor: pointer; cursor: pointer;
} }
@ -31,15 +31,15 @@ limitations under the License.
} }
.mx_AddressSelector_addressListElement .mx_AddressTile { .mx_AddressSelector_addressListElement .mx_AddressTile {
background-color: #fff; background-color: $primary-bg-color;
border: solid 1px #fff; border: solid 1px $primary-bg-color;
} }
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected { .mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
background-color: #eaf5f0; /* selected colour */ background-color: $selected-color;
} }
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile { .mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
background-color: #eaf5f0; /* selected colour */ background-color: $selected-color;
border: solid 1px #eaf5f0; /* selected colour */ border: solid 1px $selected-color;
} }

View file

@ -18,9 +18,9 @@ limitations under the License.
display: inline-block; display: inline-block;
border-radius: 3px; border-radius: 3px;
background-color: rgba(74, 73, 74, 0.1); background-color: rgba(74, 73, 74, 0.1);
border: solid 1px #f0f0f0; border: solid 1px $input-border-color;
line-height: 26px; line-height: 26px;
color: #454545; color: $primary-fg-color;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
margin-right: 4px; margin-right: 4px;
@ -28,8 +28,8 @@ limitations under the License.
.mx_AddressTile.mx_AddressTile_error { .mx_AddressTile.mx_AddressTile_error {
background-color: rgba(255, 0, 100, 0.1); background-color: rgba(255, 0, 100, 0.1);
color: #ff0064; color: $warning-color;
border-color: #ff0064; border-color: $warning-color;
} }
.mx_AddressTile_network { .mx_AddressTile_network {

View file

@ -17,19 +17,17 @@ limitations under the License.
.mx_DirectorySearchBox { .mx_DirectorySearchBox {
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
border: 1px solid #c7c7c7; border: 1px solid $strong-input-border-color;
} }
.mx_DirectorySearchBox_container { .mx_DirectorySearchBox_container {
display: flex; display: flex;
display: -webkit-flex;
padding-left: 9px; padding-left: 9px;
padding-right: 9px; padding-right: 9px;
} }
.mx_DirectorySearchBox_input { .mx_DirectorySearchBox_input {
flex-grow: 1; flex-grow: 1;
-webkit-flex-grow: 1;
border: 0; border: 0;
padding: 0; padding: 0;
font-weight: 300; font-weight: 300;
@ -44,7 +42,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
padding: 3px; padding: 3px;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
background-color: #efefef; background-color: $plinth-bg-color;
border-radius: 3px; border-radius: 3px;
background-image: url('../../img/icon-return.svg'); background-image: url('../../img/icon-return.svg');
background-position: 8px 70%; background-position: 8px 70%;

View file

@ -31,6 +31,6 @@ limitations under the License.
} }
.mx_MemberEventListSummary_toggle { .mx_MemberEventListSummary_toggle {
color:#76cfa6; color:$accent-color;
cursor:pointer; cursor:pointer;
} }

View file

@ -16,10 +16,10 @@ limitations under the License.
.mx_ProgressBar { .mx_ProgressBar {
height: 5px; height: 5px;
border: 1px solid black; border: 1px solid $progressbar-color;
} }
.mx_ProgressBar_fill { .mx_ProgressBar_fill {
height: 100%; height: 100%;
background-color: #000; background-color: $progressbar-color;
} }

View file

@ -1,14 +1,14 @@
.mx_UserPill { .mx_UserPill {
color: white; color: white;
background-color: #76cfa6; background-color: $accent-color;
padding: 2px 8px; padding: 2px 8px;
border-radius: 16px; border-radius: 16px;
} }
.mx_RoomPill { .mx_RoomPill {
background-color: white; background-color: white;
color: #76cfa6; color: $accent-color;
border: 1px solid #76cfa6; border: 1px solid $accent-color;
padding: 2px 8px; padding: 2px 8px;
border-radius: 16px; border-radius: 16px;
} }

View file

@ -27,5 +27,5 @@ limitations under the License.
opacity: 0.8; opacity: 0.8;
font-size: 13px; font-size: 13px;
font-weight: 300; font-weight: 300;
color: #4a4a4a; color: $primary-fg-color;
} }

View file

@ -22,18 +22,18 @@ limitations under the License.
.mx_MImageBody_thumbnail { .mx_MImageBody_thumbnail {
max-width: 100%; max-width: 100%;
/* /*
background-color: #fff; background-color: $primary-bg-color;
border: 2px solid #fff; border: 2px solid $primary-bg-color;
border-radius: 1px; border-radius: 1px;
*/ */
} }
.mx_MImageBody_download { .mx_MImageBody_download {
color: #76cfa6; color: $accent-color;
} }
.mx_MImageBody_download a { .mx_MImageBody_download a {
color: #76cfa6; color: $accent-color;
text-decoration: none; text-decoration: none;
} }

View file

@ -3,7 +3,7 @@
bottom: 0; bottom: 0;
z-index: 1000; z-index: 1000;
width: 100%; width: 100%;
border: 1px solid #e5e5e5; border: 1px solid $primary-hairline-color;
background: white; background: white;
border-bottom: none; border-bottom: none;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
@ -12,7 +12,7 @@
} }
.mx_Autocomplete_ProviderSection { .mx_Autocomplete_ProviderSection {
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid $primary-hairline-color;
} }
.mx_Autocomplete_Completion_container_pill { .mx_Autocomplete_Completion_container_pill {
@ -28,7 +28,7 @@
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
color: #4a4a4a; color: $primary-fg-color;
} }
.mx_Autocomplete_Completion_block * { .mx_Autocomplete_Completion_block * {
@ -42,7 +42,7 @@
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
color: #4a4a4a; color: $primary-fg-color;
} }
.mx_Autocomplete_Completion_pill * { .mx_Autocomplete_Completion_pill * {
@ -57,13 +57,13 @@
} }
.mx_Autocomplete_Completion.selected { .mx_Autocomplete_Completion.selected {
background: #f6f6f6; background: $menu-bg-color;
outline: none; outline: none;
} }
.mx_Autocomplete_provider_name { .mx_Autocomplete_provider_name {
margin: 12px; margin: 12px;
color: #454545; color: $primary-fg-color;
font-weight: 400; font-weight: 400;
opacity: 0.4; opacity: 0.4;
} }

View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_EntityTile { .mx_EntityTile {
display: table-row; display: table-row;
position: relative; position: relative;
color: #454545; color: $primary-fg-color;
cursor: pointer; cursor: pointer;
} }
@ -77,12 +77,12 @@ limitations under the License.
.mx_EntityTile_ellipsis .mx_EntityTile_name { .mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic; font-style: italic;
font-color: #454545; color: $primary-fg-color;
} }
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name { .mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
font-style: italic; font-style: italic;
font-color: #454545; color: $primary-fg-color;
} }
.mx_EntityTile_unavailable .mx_EntityTile_avatar, .mx_EntityTile_unavailable .mx_EntityTile_avatar,

View file

@ -44,7 +44,7 @@ limitations under the License.
} }
.mx_EventTile .mx_SenderProfile { .mx_EventTile .mx_SenderProfile {
color: #454545; color: $primary-fg-color;
opacity: 0.5; opacity: 0.5;
font-size: 14px; font-size: 14px;
display: block; /* anti-zalgo, with overflow hidden */ display: block; /* anti-zalgo, with overflow hidden */
@ -61,7 +61,7 @@ limitations under the License.
display: block; display: block;
visibility: hidden; visibility: hidden;
white-space: nowrap; white-space: nowrap;
color: #acacac; color: $event-timestamp-color;
font-size: 11px; font-size: 11px;
left: 8px; left: 8px;
position: absolute; position: absolute;
@ -93,20 +93,20 @@ limitations under the License.
* TODO: ultimately we probably want some transition on here. * TODO: ultimately we probably want some transition on here.
*/ */
.mx_EventTile_selected .mx_EventTile_line { .mx_EventTile_selected .mx_EventTile_line {
border-left: #76cfa6 5px solid; border-left: $accent-color 5px solid;
padding-left: 60px; padding-left: 60px;
background-color: #f7f7f7; background-color: $event-selected-color;
} }
.mx_EventTile:hover .mx_EventTile_line, .mx_EventTile:hover .mx_EventTile_line,
.mx_EventTile.menu .mx_EventTile_line .mx_EventTile.menu .mx_EventTile_line
{ {
background-color: #f7f7f7; background-color: $event-selected-color;
} }
.mx_EventTile_searchHighlight { .mx_EventTile_searchHighlight {
background-color: #76cfa6; background-color: $accent-color;
color: #fff; color: $accent-fg-color;
border-radius: 5px; border-radius: 5px;
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
@ -114,26 +114,26 @@ limitations under the License.
} }
.mx_EventTile_searchHighlight a { .mx_EventTile_searchHighlight a {
background-color: #76cfa6; background-color: $accent-color;
color: #fff; color: $accent-fg-color;
} }
.mx_EventTile_encrypting { .mx_EventTile_encrypting {
color: #abddbc ! important; color: $event-encrypting-color ! important;
} }
.mx_EventTile_sending { .mx_EventTile_sending {
color: #ddd; color: $event-sending-color;
} }
.mx_EventTile_notSent { .mx_EventTile_notSent {
color: #f44; color: $event-notsent-color;
} }
.mx_EventTile_highlight, .mx_EventTile_highlight,
.mx_EventTile_highlight .markdown-body .mx_EventTile_highlight .markdown-body
{ {
color: #FF0064; color: $warning-color;
} }
.mx_EventTile_contextual { .mx_EventTile_contextual {
@ -146,7 +146,12 @@ limitations under the License.
z-index: 1; z-index: 1;
position: relative; position: relative;
width: 90px; 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; margin-right: 10px;
} }
@ -172,6 +177,9 @@ limitations under the License.
cursor: pointer; cursor: pointer;
top: 6px; top: 6px;
right: 6px; right: 6px;
width: 19px;
height: 19px;
background-image: url($edit-button-url);
} }
.mx_EventTile:hover .mx_EventTile_editButton, .mx_EventTile:hover .mx_EventTile_editButton,
@ -204,7 +212,7 @@ limitations under the License.
} }
.mx_EventTile_readAvatarRemainder { .mx_EventTile_readAvatarRemainder {
color: #acacac; color: $event-timestamp-color;
font-size: 11px; font-size: 11px;
position: absolute; position: absolute;
} }
@ -244,10 +252,10 @@ limitations under the License.
} }
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { .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 { .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, .mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
@ -297,7 +305,7 @@ limitations under the License.
} }
.mx_EventTile_content .markdown-body a { .mx_EventTile_content .markdown-body a {
color: #76cfa6; color: $accent-color;
} }
.mx_EventTile_content .markdown-body .hljs { .mx_EventTile_content .markdown-body .hljs {

View file

@ -18,14 +18,12 @@ limitations under the License.
margin-top: 15px; margin-top: 15px;
margin-right: 15px; margin-right: 15px;
margin-bottom: 15px; margin-bottom: 15px;
display: -webkit-flex;
display: flex; display: flex;
border-left: 4px solid #ddd; border-left: 4px solid $preview-widget-bar-color;
color: #888; color: $preview-widget-fg-color;
} }
.mx_LinkPreviewWidget_image { .mx_LinkPreviewWidget_image {
-webkit-flex: 0 0 100px;
flex: 0 0 100px; flex: 0 0 100px;
margin-left: 15px; margin-left: 15px;
text-align: center; text-align: center;
@ -34,7 +32,6 @@ limitations under the License.
.mx_LinkPreviewWidget_caption { .mx_LinkPreviewWidget_caption {
margin-left: 15px; margin-left: 15px;
-webkit-flex: 1 1 auto;
flex: 1 1 auto; flex: 1 1 auto;
} }
@ -56,7 +53,6 @@ limitations under the License.
.mx_LinkPreviewWidget_cancel { .mx_LinkPreviewWidget_cancel {
visibility: hidden; visibility: hidden;
cursor: pointer; cursor: pointer;
-webkit-flex: 0 0 40px;
flex: 0 0 40px; flex: 0 0 40px;
} }

View file

@ -20,8 +20,8 @@ limitations under the License.
.mx_MemberDeviceInfo_textButton { .mx_MemberDeviceInfo_textButton {
color: #fff; color: $accent-fg-color;
background-color: #76cfa6; background-color: $accent-color;
border-radius: 17px; border-radius: 17px;
text-align: center; text-align: center;
padding-left: 1em; padding-left: 1em;
@ -50,13 +50,13 @@ limitations under the License.
} }
/* "Unblacklist" is too long for a regular button: make it wider and /* "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_blacklist,
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist { .mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
width: 8em; width: 8em;
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
} }
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified, .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified, .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
@ -66,13 +66,13 @@ limitations under the License.
} }
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified { .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
color: #76cfa5; color: $e2e-verified-color;
} }
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified { .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
color: #e8bf37; color: $e2e-unverified-color;
} }
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted { .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
color: #ba6363; color: $e2e-warning-color;
} }

View file

@ -61,7 +61,7 @@ limitations under the License.
.mx_MemberInfo h3 { .mx_MemberInfo h3 {
text-transform: uppercase; text-transform: uppercase;
color: #3d3b39; color: $h3-color;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 13px;
margin-top: 16px; margin-top: 16px;
@ -69,10 +69,9 @@ limitations under the License.
} }
.mx_MemberInfo_profileField { .mx_MemberInfo_profileField {
font-color: #999999;
font-size: 13px; font-size: 13px;
position: relative; position: relative;
background-color: #fff; background-color: $primary-bg-color;
} }
.mx_MemberInfo_buttons { .mx_MemberInfo_buttons {
@ -82,7 +81,7 @@ limitations under the License.
.mx_MemberInfo_field { .mx_MemberInfo_field {
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
color: #76cfa6; color: $accent-color;
margin-left: 8px; margin-left: 8px;
line-height: 23px; line-height: 23px;
} }

View file

@ -20,22 +20,15 @@ limitations under the License.
margin-top: 12px; margin-top: 12px;
margin-right: 20px; margin-right: 20px;
-webkit-flex: 1;
flex: 1; flex: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
} }
.mx_MemberList .mx_Spinner { .mx_MemberList .mx_Spinner {
flex: 0; flex: 0;
-webkit-flex: 0;
} }
.mx_MemberList_chevron { .mx_MemberList_chevron {
@ -48,17 +41,16 @@ limitations under the License.
overflow-y: auto; overflow-y: auto;
order: 1; order: 1;
-webkit-flex: 1 1 0;
flex: 1 1 0px; flex: 1 1 0px;
} }
.mx_MemberList_query { .mx_MemberList_query {
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
border-radius: 3px; border-radius: 3px;
border: 1px solid #f0f0f0; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;
color: #454545; color: $primary-fg-color;
background-color: #fff; background-color: $primary-bg-color;
margin-left: 3px; margin-left: 3px;
font-size: 14px; font-size: 14px;
margin-bottom: 8px; margin-bottom: 8px;
@ -66,13 +58,13 @@ limitations under the License.
} }
.mx_MemberList_query::-moz-placeholder { .mx_MemberList_query::-moz-placeholder {
color: #454545; color: $primary-fg-color;
opacity: 0.5; opacity: 0.5;
font-size: 14px; font-size: 14px;
} }
.mx_MemberList_query::-webkit-input-placeholder { .mx_MemberList_query::-webkit-input-placeholder {
color: #454545; color: $primary-fg-color;
opacity: 0.5; opacity: 0.5;
font-size: 14px; font-size: 14px;
} }
@ -80,7 +72,6 @@ limitations under the License.
.mx_MemberList_joined { .mx_MemberList_joined {
order: 2; order: 2;
flex: 1 0 0; flex: 1 0 0;
-webkit-flex: 1 0 0;
overflow-y: auto; overflow-y: auto;
} }
@ -89,14 +80,13 @@ limitations under the License.
.mx_MemberList_invited { .mx_MemberList_invited {
order: 3; order: 3;
flex: 0 0 100px; flex: 0 0 100px;
-webkit-flex: 0 0 100px;
overflow-y: auto; overflow-y: auto;
} }
*/ */
.mx_MemberList_invited h2 { .mx_MemberList_invited h2 {
text-transform: uppercase; text-transform: uppercase;
color: #3d3b39; color: $h3-color;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 13px;
padding-left: 3px; padding-left: 3px;

View file

@ -18,7 +18,7 @@ limitations under the License.
max-width: 960px; max-width: 960px;
vertical-align: middle; vertical-align: middle;
margin: auto; margin: auto;
border-top: 1px solid #e5e5e5; border-top: 1px solid $primary-hairline-color;
position: relative; position: relative;
} }
@ -57,7 +57,7 @@ limitations under the License.
height: 60px; height: 60px;
text-align: center; text-align: center;
font-style: italic; font-style: italic;
color: #888; color: $greyed-fg-color;
} }
.mx_MessageComposer_input_wrapper { .mx_MessageComposer_input_wrapper {
@ -90,10 +90,10 @@ limitations under the License.
} }
.mx_MessageComposer_input blockquote { .mx_MessageComposer_input blockquote {
color: rgb(119, 119, 119); color: $blockquote-fg-color;
margin: 0 0 16px; margin: 0 0 16px;
padding: 0 15px; padding: 0 15px;
border-left: 4px solid rgb(221, 221, 221); border-left: 4px solid $blockquote-bar-color;
} }
.mx_MessageComposer_input textarea { .mx_MessageComposer_input textarea {
@ -105,11 +105,9 @@ limitations under the License.
border: 0px; border: 0px;
resize: none; resize: none;
outline: none; outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; box-shadow: none;
color: #454545; color: $primary-fg-color;
background-color: #fff; background-color: $primary-bg-color;
font-size: 14px; font-size: 14px;
max-height: 120px; max-height: 120px;
overflow: auto; overflow: auto;
@ -120,11 +118,11 @@ limitations under the License.
/* hack for FF as vertical alignment of custom placeholder text is broken */ /* hack for FF as vertical alignment of custom placeholder text is broken */
.mx_MessageComposer_input textarea::-moz-placeholder { .mx_MessageComposer_input textarea::-moz-placeholder {
line-height: 100%; line-height: 100%;
color: #76cfa6; color: $accent-color;
opacity: 1.0; opacity: 1.0;
} }
.mx_MessageComposer_input textarea::-webkit-input-placeholder { .mx_MessageComposer_input textarea::-webkit-input-placeholder {
color: #76cfa6; color: $accent-color;
} }
.mx_MessageComposer_upload, .mx_MessageComposer_upload,
@ -153,7 +151,7 @@ limitations under the License.
.mx_MessageComposer_formatbar_wrapper { .mx_MessageComposer_formatbar_wrapper {
width: 100%; width: 100%;
background-color: #f7f7f7; background-color: $menu-bg-color;
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
} }
@ -170,7 +168,7 @@ limitations under the License.
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
font-size: 10px; font-size: 10px;
color: #888; color: $greyed-fg-color;
} }
.mx_MessageComposer_formatbar * { .mx_MessageComposer_formatbar * {

View file

@ -16,7 +16,6 @@ limitations under the License.
/* add 20px to the height of the header when editing */ /* add 20px to the height of the header when editing */
.mx_RoomHeader_editing { .mx_RoomHeader_editing {
-webit-flex: 0 0 93px ! important;
flex: 0 0 93px ! important; flex: 0 0 93px ! important;
} }
@ -24,63 +23,36 @@ limitations under the License.
max-width: 960px; max-width: 960px;
margin: auto; margin: auto;
height: 70px; height: 70px;
-webkit-align-items: center;
align-items: center; align-items: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
} }
.mx_RoomHeader_leftRow { .mx_RoomHeader_leftRow {
margin-left: -2px; margin-left: -2px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1; order: 1;
-webkit-flex: 1;
flex: 1; flex: 1;
} }
.mx_RoomHeader_spinner { .mx_RoomHeader_spinner {
height: 36px; height: 36px;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2; order: 2;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
} }
.mx_RoomHeader_textButton { .mx_RoomHeader_textButton {
height: 36px; height: 36px;
background-color: #76cfa6; background-color: $accent-color;
border-radius: 36px; border-radius: 36px;
margin-right: 8px; margin-right: 8px;
color: #fff; color: $accent-fg-color;
line-height: 34px; line-height: 34px;
margin-top: -2px; margin-top: -2px;
text-align: center; text-align: center;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2; order: 2;
cursor: pointer; cursor: pointer;
/* /*
-webkit-flex: 0 0 90px;
flex: 0 0 90px; flex: 0 0 90px;
*/ */
padding-left: 12px; padding-left: 12px;
@ -88,27 +60,17 @@ limitations under the License.
} }
.mx_RoomHeader_cancelButton { .mx_RoomHeader_cancelButton {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2; order: 2;
cursor: pointer; cursor: pointer;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
} }
.mx_RoomHeader_rightRow { .mx_RoomHeader_rightRow {
margin-top: 4px; margin-top: 4px;
background-color: #fff; background-color: $primary-bg-color;
display: flex; display: flex;
align-items: center; align-items: center;
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3; order: 3;
} }
@ -120,7 +82,7 @@ limitations under the License.
.mx_RoomHeader_simpleHeader { .mx_RoomHeader_simpleHeader {
line-height: 70px; line-height: 70px;
color: #454545; color: $primary-fg-color;
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
@ -138,7 +100,7 @@ limitations under the License.
width: 100%; width: 100%;
height: 31px; height: 31px;
overflow: hidden; overflow: hidden;
color: #454545; color: $primary-fg-color;
font-weight: bold; font-weight: bold;
font-size: 22px; font-size: 22px;
padding-left: 19px; padding-left: 19px;
@ -153,7 +115,7 @@ limitations under the License.
} }
.mx_RoomHeader_settingsHint { .mx_RoomHeader_settingsHint {
color: #a2a2a2 ! important; color: $settings-grey-fg-color ! important;
} }
.mx_RoomHeader_searchStatus { .mx_RoomHeader_searchStatus {
@ -174,21 +136,21 @@ limitations under the License.
} }
.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) { .mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
color: #76cfa6; color: $accent-color;
} }
.mx_RoomHeader_placeholder { .mx_RoomHeader_placeholder {
color: #a2a2a2 ! important; color: $settings-grey-fg-color ! important;
} }
.mx_RoomHeader_editable { .mx_RoomHeader_editable {
border-bottom: 1px solid #c7c7c7 ! important; border-bottom: 1px solid $strong-input-border-color ! important;
min-width: 150px; min-width: 150px;
cursor: text; cursor: text;
} }
.mx_RoomHeader_editable:focus { .mx_RoomHeader_editable:focus {
border-bottom: 1px solid #76CFA6 ! important; border-bottom: 1px solid $accent-color ! important;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
} }
@ -197,7 +159,7 @@ limitations under the License.
vertical-align: bottom; vertical-align: bottom;
float: left; float: left;
max-height: 42px; max-height: 42px;
color: #A2A2A2; color: $settings-grey-fg-color;
font-weight: 300; font-weight: 300;
font-size: 13px; font-size: 13px;
margin-left: 19px; margin-left: 19px;

View file

@ -17,20 +17,9 @@ limitations under the License.
.mx_RoomPreviewBar { .mx_RoomPreviewBar {
text-align: center; text-align: center;
height: 176px; height: 176px;
-webkit-align-items: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
justify-content: center; justify-content: center;
-webkit-justify-content: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
} }
@ -38,16 +27,16 @@ limitations under the License.
} }
.mx_RoomPreviewBar_invite_text { .mx_RoomPreviewBar_invite_text {
color: #454545; color: $primary-fg-color;
} }
.mx_RoomPreviewBar_join_text { .mx_RoomPreviewBar_join_text {
color: #ff0064; color: $warning-color;
} }
.mx_RoomPreviewBar_preview_text { .mx_RoomPreviewBar_preview_text {
margin-top: 25px; margin-top: 25px;
color: #a4a4a4; color: $settings-grey-fg-color;
} }
.mx_RoomPreviewBar_join_text a { .mx_RoomPreviewBar_join_text a {
@ -56,9 +45,7 @@ limitations under the License.
} }
.mx_RoomPreviewBar_warning { .mx_RoomPreviewBar_warning {
display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center;
align-items: center; align-items: center;
padding: 8px; padding: 8px;
} }

View file

@ -24,10 +24,10 @@ limitations under the License.
.mx_RoomSettings_integrationsButton_error { .mx_RoomSettings_integrationsButton_error {
position: relative; position: relative;
height: 36px; height: 36px;
background-color: #76cfa6; background-color: $accent-color;
border-radius: 36px; border-radius: 36px;
margin-right: 8px; margin-right: 8px;
color: #fff; color: $accent-fg-color;
line-height: 34px; line-height: 34px;
text-align: center; text-align: center;
float: right; float: right;
@ -47,8 +47,8 @@ limitations under the License.
font-size: 10pt; font-size: 10pt;
line-height: 1.5em; line-height: 1.5em;
border-radius: 5px; border-radius: 5px;
background-color: #000; background-color: $accent-color;
color: #fff; color: $accent-fg-color;
} }
.mx_RoomSettings_e2eIcon { .mx_RoomSettings_e2eIcon {
@ -81,7 +81,7 @@ limitations under the License.
.mx_RoomSettings h3 { .mx_RoomSettings h3 {
text-transform: uppercase; text-transform: uppercase;
color: #3d3b39; color: $h3-color;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 13px;
margin-top: 36px; margin-top: 36px;
@ -174,7 +174,7 @@ limitations under the License.
} }
.mx_RoomSettings_warning { .mx_RoomSettings_warning {
color: #ff0064; color: $warning-color;
font-weight: bold; font-weight: bold;
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
@ -182,13 +182,13 @@ limitations under the License.
.mx_RoomSettings_editable { .mx_RoomSettings_editable {
border: 0px; border: 0px;
border-bottom: 1px solid #c7c7c7; border-bottom: 1px solid $strong-input-border-color;
padding: 0px; padding: 0px;
min-width: 240px; min-width: 240px;
} }
.mx_RoomSettings_editable:focus { .mx_RoomSettings_editable:focus {
border-bottom: 1px solid #76CFA6; border-bottom: 1px solid $accent-color;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
} }
@ -205,7 +205,7 @@ limitations under the License.
} }
.mx_RoomSettings_aliasPlaceholder { .mx_RoomSettings_aliasPlaceholder {
color: #a2a2a2; color: $settings-grey-fg-color;
} }
.mx_RoomSettings_buttons { .mx_RoomSettings_buttons {
@ -220,8 +220,8 @@ limitations under the License.
border-radius: 36px; border-radius: 36px;
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
color: #fff; color: $accent-fg-color;
background-color: #76cfa6; background-color: $accent-color;
width: auto; width: auto;
margin: auto; margin: auto;
padding: 6px; padding: 6px;

View file

@ -78,7 +78,7 @@ limitations under the License.
position: absolute; position: absolute;
content: ""; content: "";
border-radius: 40px; border-radius: 40px;
background: #4A4A4A; background: $primary-fg-color;
bottom: 0; bottom: 0;
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -103,7 +103,7 @@ limitations under the License.
padding-right: 6px; padding-right: 6px;
padding-top: 2px; padding-top: 2px;
padding-bottom: 3px; padding-bottom: 3px;
color: rgba(69, 69, 69, 0.8); color: $roomtile-name-color;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -142,7 +142,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
margin-left: 5px; margin-left: 5px;
border-top: 5px solid #ff0064; border-top: 5px solid $warning-color;
border-right: 7px solid transparent; border-right: 7px solid transparent;
} }
@ -154,7 +154,7 @@ limitations under the License.
right: 8px; /*gutter */ right: 8px; /*gutter */
top: 9px; top: 9px;
border-radius: 8px; border-radius: 8px;
color: #fff; color: $accent-fg-color;
font-weight: 600; font-weight: 600;
font-size: 10px; font-size: 10px;
text-align: center; text-align: center;
@ -175,11 +175,11 @@ limitations under the License.
} }
.mx_RoomTile_unreadNotify .mx_RoomTile_badge { .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
background-color: #76cfa6; background-color: $accent-color;
} }
.mx_RoomTile_highlight .mx_RoomTile_badge { .mx_RoomTile_highlight .mx_RoomTile_badge {
background-color: #ff0064; background-color: $warning-color;
} }
.mx_RoomTile_unread, .mx_RoomTile_highlight { .mx_RoomTile_unread, .mx_RoomTile_highlight {
@ -187,7 +187,7 @@ limitations under the License.
} }
.mx_RoomTile_selected { .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 { .mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {

View file

@ -16,19 +16,17 @@ limitations under the License.
.mx_SearchableEntityList { .mx_SearchableEntityList {
display: flex; display: flex;
display: -webkit-flex;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
} }
.mx_SearchableEntityList_query { .mx_SearchableEntityList_query {
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
border-radius: 3px; border-radius: 3px;
border: 1px solid #f0f0f0; border: 1px solid $input-border-color;
padding: 9px; padding: 9px;
color: #454545; color: $primary-fg-color;
background-color: #fff; background-color: $primary-bg-color;
margin-left: 3px; margin-left: 3px;
font-size: 15px; font-size: 15px;
margin-bottom: 8px; margin-bottom: 8px;
@ -36,20 +34,19 @@ limitations under the License.
} }
.mx_SearchableEntityList_query::-moz-placeholder { .mx_SearchableEntityList_query::-moz-placeholder {
color: #454545; color: $primary-fg-color;
opacity: 0.5; opacity: 0.5;
font-size: 12px; font-size: 12px;
} }
.mx_SearchableEntityList_query::-webkit-input-placeholder { .mx_SearchableEntityList_query::-webkit-input-placeholder {
color: #454545; color: $primary-fg-color;
opacity: 0.5; opacity: 0.5;
font-size: 12px; font-size: 12px;
} }
.mx_SearchableEntityList_listWrapper { .mx_SearchableEntityList_listWrapper {
flex: 1; flex: 1;
-webkit-flex: 1;
overflow-y: auto; overflow-y: auto;
} }
@ -67,14 +64,13 @@ limitations under the License.
.mx_SearchableEntityList_hrWrapper { .mx_SearchableEntityList_hrWrapper {
width: 100%; width: 100%;
flex: 0 0 auto; flex: 0 0 auto;
-webkit-flex: 0 0 auto;
} }
.mx_SearchableEntityList hr { .mx_SearchableEntityList hr {
height: 1px; height: 1px;
border: 0px; border: 0px;
color: #e1dddd; color: $primary-fg-color;
background-color: #e1dddd; background-color: $primary-fg-color;
margin-right: 15px; margin-right: 15px;
margin-top: 11px; margin-top: 11px;
margin-bottom: 11px; margin-bottom: 11px;

View file

@ -27,7 +27,7 @@ limitations under the License.
.mx_TabCompleteBar_command { .mx_TabCompleteBar_command {
margin-right: 8px; margin-right: 8px;
background-color: #76CFA6; background-color: $accent-color;
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
padding-top: 2px; padding-top: 2px;
@ -41,7 +41,7 @@ limitations under the License.
.mx_TabCompleteBar_command .mx_TabCompleteBar_text { .mx_TabCompleteBar_command .mx_TabCompleteBar_text {
opacity: 1.0; opacity: 1.0;
vertical-align: initial; vertical-align: initial;
color: #fff; color: $accent-fg-color;
} }
.mx_TabCompleteBar_item img { .mx_TabCompleteBar_item img {
@ -50,7 +50,7 @@ limitations under the License.
} }
.mx_TabCompleteBar_text { .mx_TabCompleteBar_text {
color: #4a4a4a; color: $primary-fg-color;
vertical-align: middle; vertical-align: middle;
opacity: 0.5; opacity: 0.5;
} }

View file

@ -19,7 +19,7 @@ limitations under the License.
max-width: 960px; max-width: 960px;
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid $primary-hairline-color;
} }
.mx_TopUnreadMessagesBar_scrollUp { .mx_TopUnreadMessagesBar_scrollUp {

View file

@ -24,7 +24,7 @@ limitations under the License.
} }
.mx_IntegrationsManager iframe { .mx_IntegrationsManager iframe {
background-color: #fff; background-color: $primary-bg-color;
border: 0px; border: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;

View file

@ -15,8 +15,8 @@ limitations under the License.
*/ */
.mx_CallView_voice { .mx_CallView_voice {
background-color: #76cfa6; background-color: $accent-color;
color: #fff; color: $accent-fg-color;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
padding: 6px; padding: 6px;

View file

@ -18,7 +18,7 @@ limitations under the License.
text-align: center; text-align: center;
border: 1px solid #a4a4a4; border: 1px solid #a4a4a4;
border-radius: 8px; border-radius: 8px;
background-color: #fff; background-color: $primary-bg-color;
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
padding: 6px; padding: 6px;
@ -41,14 +41,12 @@ limitations under the License.
.mx_IncomingCallBox_buttons { .mx_IncomingCallBox_buttons {
display: flex; display: flex;
display: -webkit-flex;
} }
.mx_IncomingCallBox_buttons_cell { .mx_IncomingCallBox_buttons_cell {
vertical-align: middle; vertical-align: middle;
padding: 6px; padding: 6px;
flex: 1; flex: 1;
-webkit-flex: 1;
} }
.mx_IncomingCallBox_buttons_decline, .mx_IncomingCallBox_buttons_decline,
@ -58,14 +56,14 @@ limitations under the License.
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
border-radius: 36px; border-radius: 36px;
color: #fff; color: $accent-fg-color;
margin: auto; margin: auto;
} }
.mx_IncomingCallBox_buttons_decline { .mx_IncomingCallBox_buttons_decline {
background-color: #f48080; background-color: $voip-decline-color;
} }
.mx_IncomingCallBox_buttons_accept { .mx_IncomingCallBox_buttons_accept {
background-color: #80f480; background-color: $voip-accept-color;
} }

View file

@ -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

View file

@ -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;

View file

@ -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;

View file

@ -0,0 +1,3 @@
@import "_base.scss";
@import "_dark.scss";
@import "../_components.scss";

View file

@ -0,0 +1,2 @@
@import "_base.scss";
@import "../_components.scss";

View file

@ -17,13 +17,8 @@ limitations under the License.
.mx_LeftPanel { .mx_LeftPanel {
position: relative; position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
} }
.mx_LeftPanel_hideButton { .mx_LeftPanel_hideButton {
@ -39,13 +34,8 @@ limitations under the License.
} }
.mx_LeftPanel .mx_RoomList_scrollbar { .mx_LeftPanel .mx_RoomList_scrollbar {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1; order: 1;
-webkit-flex: 1 1 0;
flex: 1 1 0; flex: 1 1 0;
overflow-y: auto; overflow-y: auto;
@ -57,16 +47,11 @@ limitations under the License.
} }
.mx_LeftPanel .mx_BottomLeftMenu { .mx_LeftPanel .mx_BottomLeftMenu {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3; order: 3;
border-top: 1px solid rgba(118, 207, 166, 0.2); border-top: 1px solid rgba(118, 207, 166, 0.2);
margin-left: 16px; /* gutter */ margin-left: 16px; /* gutter */
margin-right: 16px; /* gutter */ margin-right: 16px; /* gutter */
-webkit-flex: 0 0 60px;
flex: 0 0 60px; flex: 0 0 60px;
z-index: 1; z-index: 1;
} }

View file

@ -17,26 +17,16 @@ limitations under the License.
.mx_RightPanel { .mx_RightPanel {
position: relative; position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
} }
.mx_RightPanel_header { .mx_RightPanel_header {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1; order: 1;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid $primary-hairline-color;
margin-right: 20px; margin-right: 20px;
-webkit-flex: 0 0 70px;
flex: 0 0 70px; flex: 0 0 70px;
} }
@ -45,7 +35,7 @@ limitations under the License.
.mx_RightPanel_headerButtonGroup { .mx_RightPanel_headerButtonGroup {
margin-top: 6px; margin-top: 6px;
float: left; float: left;
background-color: #fff; background-color: $primary-bg-color;
margin-left: 0px; margin-left: 0px;
} }
@ -68,12 +58,13 @@ limitations under the License.
width: 25px; width: 25px;
height: 5px; height: 5px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(118, 207, 166, 0.2); background-color: $accent-color;
opacity: 0.2;
} }
.mx_RightPanel_headerButton_badge { .mx_RightPanel_headerButton_badge {
font-size: 11px; font-size: 11px;
color: #76cfa6; color: $accent-color;
font-weight: bold; font-weight: bold;
padding-bottom: 2px; padding-bottom: 2px;
} }
@ -81,33 +72,23 @@ limitations under the License.
.mx_RightPanel .mx_MemberList, .mx_RightPanel .mx_MemberList,
.mx_RightPanel .mx_MemberInfo, .mx_RightPanel .mx_MemberInfo,
.mx_RightPanel_blank { .mx_RightPanel_blank {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2; order: 2;
flex: 1 1 0; flex: 1 1 0;
-webkit-flex: 1 1 0;
} }
.mx_RightPanel_footer { .mx_RightPanel_footer {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3; order: 3;
border-top: 1px solid #e5e5e5; border-top: 1px solid $primary-hairline-color;
margin-right: 20px; margin-right: 20px;
-webkit-flex: 0 0 60px;
flex: 0 0 60px; flex: 0 0 60px;
} }
.mx_RightPanel_footer .mx_RightPanel_invite { .mx_RightPanel_footer .mx_RightPanel_invite {
line-height: 35px; line-height: 35px;
font-size: 14px; font-size: 14px;
color: #4A4A4A; color: $primary-fg-color;
padding-top: 13px; padding-top: 13px;
padding-left: 5px; padding-left: 5px;
cursor: pointer; cursor: pointer;

View file

@ -20,35 +20,23 @@ limitations under the License.
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 12px; margin-bottom: 12px;
color: #4a4a4a; color: $primary-fg-color;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
} }
.mx_RoomDirectory_list { .mx_RoomDirectory_list {
-webkit-flex: 1;
flex: 1; flex: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
} }
.mx_RoomDirectory_list .mx_RoomView_messageListWrapper { .mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
justify-content: flex-start; justify-content: flex-start;
-webkit-justify-content: flex-start;
} }
.mx_RoomDirectory_listheader { .mx_RoomDirectory_listheader {
@ -72,13 +60,12 @@ limitations under the License.
.mx_RoomDirectory_tableWrapper { .mx_RoomDirectory_tableWrapper {
overflow-y: auto; overflow-y: auto;
-webkit-flex: 1 1 0;
flex: 1 1 0; flex: 1 1 0;
} }
.mx_RoomDirectory_table { .mx_RoomDirectory_table {
font-size: 14px; font-size: 14px;
color: #4a4a4a; color: $primary-fg-color;
width: 100%; width: 100%;
text-align: left; text-align: left;
table-layout: fixed; table-layout: fixed;
@ -110,11 +97,11 @@ limitations under the License.
padding-right: 5px; padding-right: 5px;
height: 15px; height: 15px;
border-radius: 11px; border-radius: 11px;
background-color: #eaf5f0; background-color: $plinth-bg-color;
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
font-size: 11px; font-size: 11px;
color: #61c295; color: $accent-color;
} }
.mx_RoomDirectory_topic { .mx_RoomDirectory_topic {
@ -123,7 +110,7 @@ limitations under the License.
.mx_RoomDirectory_alias { .mx_RoomDirectory_alias {
font-size: 12px; font-size: 12px;
color: #b3b3b3; color: $settings-grey-fg-color;
} }
.mx_RoomDirectory_roomMemberCount { .mx_RoomDirectory_roomMemberCount {

View file

@ -29,7 +29,7 @@ limitations under the License.
.mx_RoomSubList_label { .mx_RoomSubList_label {
position: relative; position: relative;
text-transform: uppercase; text-transform: uppercase;
color: #3d3b39; color: $roomsublist-label-fg-color;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
width: 203px; /* padding + width = LHS Panel width */ width: 203px; /* padding + width = LHS Panel width */
@ -39,8 +39,8 @@ limitations under the License.
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; padding-bottom: 6px;
cursor: pointer; cursor: pointer;
background-color: #d3efe1; background-color: $roomsublist-label-bg-color;
border-top: solid 2px #eaf5f0; border-top: solid 2px $secondary-accent-color;
} }
.mx_RoomSubList_label.mx_RoomSubList_fixed { .mx_RoomSubList_label.mx_RoomSubList_fixed {
@ -63,7 +63,7 @@ limitations under the License.
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
color: #76cfa6; color: $accent-color;
padding-left: 5px; padding-left: 5px;
text-transform: none; text-transform: none;
} }
@ -80,14 +80,14 @@ limitations under the License.
right: 8px; /*gutter */ right: 8px; /*gutter */
top: 7px; top: 7px;
border-radius: 8px; border-radius: 8px;
color: #fff; color: $accent-fg-color;
font-weight: 600; font-weight: 600;
font-size: 10px; font-size: 10px;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
background-color: #76cfa6; background-color: $accent-color;
} }
/* /*
@ -97,7 +97,7 @@ limitations under the License.
*/ */
.mx_RoomSubList_badgeHighlight { .mx_RoomSubList_badgeHighlight {
background-color: #ff0064; background-color: $warning-color;
} }
/* This is the bottom of the speech bubble */ /* This is the bottom of the speech bubble */
@ -108,7 +108,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
margin-left: 5px; margin-left: 5px;
border-top: 5px solid #ff0064; border-top: 5px solid $warning-color;
border-right: 7px solid transparent; border-right: 7px solid transparent;
} }
@ -129,7 +129,7 @@ limitations under the License.
height: 0; height: 0;
border-left: 5px solid transparent; border-left: 5px solid transparent;
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-top: 6px solid #76cfa6; border-top: 6px solid $accent-color;
} }
.mx_RoomSubList_chevronUp { .mx_RoomSubList_chevronUp {
@ -137,14 +137,14 @@ limitations under the License.
height: 0; height: 0;
border-left: 5px solid transparent; border-left: 5px solid transparent;
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-bottom: 6px solid #76cfa6; border-bottom: 6px solid $accent-color;
} }
.mx_RoomSubList_chevronRight { .mx_RoomSubList_chevronRight {
width: 0; width: 0;
height: 0; height: 0;
border-top: 5px solid transparent; border-top: 5px solid transparent;
border-left: 6px solid #76cfa6; border-left: 6px solid $accent-color;
border-bottom: 5px solid transparent; border-bottom: 5px solid transparent;
} }
@ -165,7 +165,7 @@ limitations under the License.
.mx_RoomSubList_line { .mx_RoomSubList_line {
display: inline-block; display: inline-block;
width: 159px; width: 159px;
border-top: dotted 2px #76cfa6; border-top: dotted 2px $accent-color;
vertical-align: middle; vertical-align: middle;
} }
@ -179,7 +179,7 @@ limitations under the License.
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 600;
text-align: left; text-align: left;
color: #76cfa6; color: $accent-color;
padding-left: 7px; padding-left: 7px;
padding-right: 7px; padding-right: 7px;
padding-left: 7px; padding-left: 7px;
@ -198,20 +198,20 @@ limitations under the License.
right: 8px; /*gutter */ right: 8px; /*gutter */
top: -2px; top: -2px;
border-radius: 8px; border-radius: 8px;
border: solid 1px #76cfa6; border: solid 1px $accent-color;
color: #fff; color: $accent-fg-color;
font-weight: 600; font-weight: 600;
font-size: 10px; font-size: 10px;
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
padding-left: 3px; padding-left: 3px;
padding-right: 3px; padding-right: 3px;
background-color: #fff; background-color: $primary-bg-color;
vertical-align: middle; vertical-align: middle;
} }
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify { .mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
background-color: #76cfa6; background-color: $accent-color;
border: 0; border: 0;
padding-top: 3px; padding-top: 3px;
padding-left: 4px; padding-left: 4px;
@ -219,7 +219,7 @@ limitations under the License.
} }
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight { .mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
background-color: #ff0064; background-color: $warning-color;
border: 0; border: 0;
padding-top: 3px; padding-top: 3px;
padding-left: 4px; padding-left: 4px;

View file

@ -31,7 +31,7 @@ limitations under the License.
.mx_RoomTagContextMenu_field:last-child { .mx_RoomTagContextMenu_field:last-child {
padding-bottom: 4px; padding-bottom: 4px;
color: #ff0064; color: $warning-color;
} }
.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet { .mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet {
@ -70,8 +70,7 @@ limitations under the License.
border-right-style: none; border-right-style: none;
border-top-style: solid; border-top-style: solid;
border-top-width: 1px; border-top-width: 1px;
border-color: #bbbbbb; border-color: $menu-border-color;
opacity: 0.4;
} }
.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon { .mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {

View file

@ -21,14 +21,14 @@ limitations under the License.
.mx_NetworkDropdown_input { .mx_NetworkDropdown_input {
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
border: 1px solid #c7c7c7; border: 1px solid $strong-input-border-color;
font-weight: 300; font-weight: 300;
font-size: 13px; font-size: 13px;
user-select: none; user-select: none;
} }
.mx_NetworkDropdown_arrow { .mx_NetworkDropdown_arrow {
border-color: #4a4a4a transparent transparent; border-color: $primary-fg-color transparent transparent;
border-style: solid; border-style: solid;
border-width: 5px 5px 0; border-width: 5px 5px 0;
display: block; display: block;
@ -67,12 +67,12 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f
margin: 0; margin: 0;
padding: 0px; padding: 0px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #76cfa6; border: 1px solid $accent-color;
background-color: white; background-color: $primary-bg-color;
} }
.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover { .mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
background-color: #ddd; background-color: $focus-bg-color;
} }
.mx_NetworkDropdown_menu_network { .mx_NetworkDropdown_menu_network {

View file

@ -19,39 +19,27 @@ limitations under the License.
*/ */
.mx_ImageView { .mx_ImageView {
display: -webkit-flex;
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-align-items: center;
align-items: center; align-items: center;
} }
.mx_ImageView_lhs { .mx_ImageView_lhs {
-webkit-box-ordinal-group: 1;
order: 1; order: 1;
-webkit-flex: 1;
flex: 1 1 10%; flex: 1 1 10%;
min-width: 60px; min-width: 60px;
/* // background-color: #080;
background-color: #080; // height: 20px;
height: 20px;
*/
} }
.mx_ImageView_content { .mx_ImageView_content {
-webkit-box-ordinal-group: 2;
order: 2; order: 2;
/* min-width hack needed for FF */ /* min-width hack needed for FF */
min-width: 0px; min-width: 0px;
height: 90%; height: 90%;
-webkit-flex: 15;
flex: 15 15 0; flex: 15 15 0;
display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center;
-webkit-justify-content: center;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
@ -78,16 +66,13 @@ limitations under the License.
.mx_ImageView_label { .mx_ImageView_label {
text-align: left; text-align: left;
display: flex; display: flex;
display: -webkit-flex;
justify-content: center; justify-content: center;
-webkit-justify-content: center;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
min-height: 100%; min-height: 100%;
max-width: 240px; max-width: 240px;
color: #fff; color: $lightbox-fg-color;
} }
.mx_ImageView_cancel { .mx_ImageView_cancel {
@ -114,10 +99,10 @@ limitations under the License.
margin-top: 24px; margin-top: 24px;
margin-bottom: 6px; margin-bottom: 6px;
border-radius: 5px; border-radius: 5px;
background-color: #454545; background-color: $lightbox-bg-color;
font-size: 14px; font-size: 14px;
padding: 9px; padding: 9px;
border: 1px solid #fff; border: 1px solid $lightbox-border-color;
} }
.mx_ImageView_size { .mx_ImageView_size {
@ -125,7 +110,7 @@ limitations under the License.
} }
.mx_ImageView_link { .mx_ImageView_link {
color: #fff ! important; color: $lightbox-fg-color ! important;
text-decoration: none ! important; text-decoration: none ! important;
} }
@ -141,13 +126,9 @@ limitations under the License.
} }
.mx_ImageView_rhs { .mx_ImageView_rhs {
-webkit-box-ordinal-group: 3;
order: 3; order: 3;
-webkit-flex: 1;
flex: 1 1 10%; flex: 1 1 10%;
min-width: 300px; min-width: 300px;
/* // background-color: #800;
background-color: #800; // height: 20px;
height: 20px;
*/
} }

View file

@ -15,16 +15,12 @@ limitations under the License.
*/ */
.mx_Spinner { .mx_Spinner {
display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center;
-webkit-justify-content: center;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
flex: 1; flex: 1;
-webkit-flex: 1;
} }
.mx_MatrixChat_middlePanel .mx_Spinner { .mx_MatrixChat_middlePanel .mx_Spinner {

View file

@ -15,15 +15,10 @@ limitations under the License.
*/ */
.mx_GuestWarningBar { .mx_GuestWarningBar {
background-color: #76cfa6; background-color: $accent-color;
color: #fff; color: $accent-fg-color;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center;
align-items: center; align-items: center;
} }
@ -34,7 +29,7 @@ limitations under the License.
} }
.mx_GuestWarningBar a { .mx_GuestWarningBar a {
color: #fff ! important; color: $accent-fg-color ! important;
text-decoration: underline ! important; text-decoration: underline ! important;
cursor: pointer; cursor: pointer;
} }

View file

@ -15,15 +15,10 @@ limitations under the License.
*/ */
.mx_MatrixToolbar { .mx_MatrixToolbar {
background-color: #76cfa6; background-color: $accent-color;
color: #fff; color: $accent-fg-color;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center;
align-items: center; align-items: center;
} }
@ -34,13 +29,12 @@ limitations under the License.
} }
.mx_MatrixToolbar_content { .mx_MatrixToolbar_content {
-webkit-flex: 1;
flex: 1; flex: 1;
} }
.mx_MatrixToolbar_link .mx_MatrixToolbar_link
{ {
color: #fff ! important; color: $accent-fg-color ! important;
text-decoration: underline ! important; text-decoration: underline ! important;
cursor: pointer; cursor: pointer;
} }

View file

@ -22,9 +22,9 @@ limitations under the License.
margin-bottom: 7px; margin-bottom: 7px;
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
border: 1px dashed #76cfa6; border: 1px dashed $accent-color;
color: #454545; color: $primary-fg-color;
background-color: rgba(255,255,255,0.5); background-color: $droptarget-bg-color;
border-radius: 4px; border-radius: 4px;
} }
@ -39,7 +39,7 @@ limitations under the License.
} }
.mx_RoomDropTarget_avatar { .mx_RoomDropTarget_avatar {
background-color: #fff; background-color: $primary-bg-color;
border-radius: 24px; border-radius: 24px;
width: 24px; width: 24px;
height: 24px; height: 24px;

View file

@ -21,16 +21,16 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-top: 8px solid transparent; 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; border-bottom: 8px solid transparent;
} }
.mx_RoomTooltip_chevron:after{ .mx_RoomTooltip_chevron:after {
content:''; content:'';
width: 0; width: 0;
height: 0; height: 0;
border-top: 7px solid transparent; border-top: 7px solid transparent;
border-right: 7px solid #fff; border-right: 7px solid $primary-bg-color;
border-bottom: 7px solid transparent; border-bottom: 7px solid transparent;
position:absolute; position:absolute;
top: -7px; top: -7px;
@ -40,14 +40,14 @@ limitations under the License.
.mx_RoomTooltip { .mx_RoomTooltip {
display: none; display: none;
position: fixed; position: fixed;
border: 1px solid rgba(187, 187, 187, 0.5); border: 1px solid $menu-border-color;
border-radius: 5px; border-radius: 5px;
background-color: #fff; background-color: $primary-bg-color;
z-index: 2000; z-index: 2000;
padding: 5px; padding: 5px;
pointer-events: none; pointer-events: none;
line-height: 14px; line-height: 14px;
font-size: 13px; font-size: 13px;
color: rgba(0, 0, 0, 0.7); color: $primary-fg-color;
} }

View file

@ -18,21 +18,18 @@ limitations under the License.
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
display: flex; display: flex;
display: -webkit-flex;
align-items: center; align-items: center;
-webkit-align-items: center;
} }
.mx_SearchBar_input { .mx_SearchBar_input {
display: inline block; display: inline block;
border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px;
border: 1px solid #f0f0f0; border: 1px solid $input-border-color;
font-size: 15px; font-size: 15px;
padding: 9px; padding: 9px;
padding-left: 11px; padding-left: 11px;
width: auto; width: auto;
flex: 1 1 0; flex: 1 1 0;
-webkit-flex: 1 1 0;
} }
.mx_SearchBar_searchButton { .mx_SearchBar_searchButton {
@ -41,7 +38,7 @@ limitations under the License.
width: 37px; width: 37px;
height: 37px; height: 37px;
border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px;
background-color: #76CFA6; background-color: $accent-color;
} }
@keyframes pulsate { @keyframes pulsate {
@ -61,8 +58,8 @@ limitations under the License.
border-radius: 36px; border-radius: 36px;
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
color: #fff; color: $accent-fg-color;
background-color: #76cfa6; background-color: $accent-color;
width: auto; width: auto;
margin: auto; margin: auto;
margin-left: 7px; margin-left: 7px;
@ -74,9 +71,9 @@ limitations under the License.
} }
.mx_SearchBar_unselected { .mx_SearchBar_unselected {
background-color: #fff; background-color: $primary-bg-color;
color: #76CFA6; color: $accent-color;
border: #76CFA6 1px solid; border: $accent-color 1px solid;
} }
.mx_SearchBar_cancel { .mx_SearchBar_cancel {

View file

@ -58,7 +58,7 @@ limitations under the License.
.mx_UserNotifSettings_keywords { .mx_UserNotifSettings_keywords {
cursor: pointer; cursor: pointer;
color: #76cfa6; color: $accent-color;
} }
.mx_UserSettings_devicesTable td { .mx_UserSettings_devicesTable td {

View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>ED5D3E59-2561-4AC1-9B43-82FBC51767FC</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon_context">
<g>
<path d="M9.5,19 C14.7467051,19 19,14.7467051 19,9.5 C19,4.25329488 14.7467051,0 9.5,0 C4.25329488,0 0,4.25329488 0,9.5 C0,14.7467051 4.25329488,19 9.5,19 Z" id="Oval-69" fill="#000" opacity="0.2"></path>
<path d="M4.5,9.50063771 C4.5,9.13148623 4.59887838,8.85242947 4.7966381,8.66345907 C4.99439782,8.47448867 5.28224377,8.38000488 5.66018457,8.38000488 C6.0249414,8.38000488 6.3072941,8.47668596 6.50725115,8.67005103 C6.70720821,8.86341609 6.80718523,9.14027555 6.80718523,9.50063771 C6.80718523,9.84781589 6.70610956,10.1213794 6.50395517,10.3213365 C6.30180079,10.5212935 6.02054674,10.6212705 5.66018457,10.6212705 C5.29103309,10.6212705 5.00538444,10.5234908 4.80323006,10.3279284 C4.60107568,10.132366 4.5,9.85660521 4.5,9.50063771 L4.5,9.50063771 Z M8.3431114,9.50063771 C8.3431114,9.13148623 8.44198978,8.85242947 8.63974951,8.66345907 C8.83750923,8.47448867 9.12755247,8.38000488 9.50988794,8.38000488 C9.87464476,8.38000488 10.1569975,8.47668596 10.3569545,8.67005103 C10.5569116,8.86341609 10.6568886,9.14027555 10.6568886,9.50063771 C10.6568886,9.84781589 10.5558129,10.1213794 10.3536585,10.3213365 C10.1515042,10.5212935 9.8702501,10.6212705 9.50988794,10.6212705 C9.13634179,10.6212705 8.84849585,10.5234908 8.64634146,10.3279284 C8.44418708,10.132366 8.3431114,9.85660521 8.3431114,9.50063771 L8.3431114,9.50063771 Z M12.1928148,9.50063771 C12.1928148,9.13148623 12.2916931,8.85242947 12.4894529,8.66345907 C12.6872126,8.47448867 12.9750585,8.38000488 13.3529993,8.38000488 C13.7177562,8.38000488 14.0001089,8.47668596 14.2000659,8.67005103 C14.400023,8.86341609 14.5,9.14027555 14.5,9.50063771 C14.5,9.84781589 14.3989243,10.1213794 14.1967699,10.3213365 C13.9946156,10.5212935 13.7133615,10.6212705 13.3529993,10.6212705 C12.9838479,10.6212705 12.6981992,10.5234908 12.4960448,10.3279284 C12.2938904,10.132366 12.1928148,9.85660521 12.1928148,9.50063771 L12.1928148,9.50063771 Z" id="…" fill="#FFF" opacity="0.6"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

@ -20,14 +20,22 @@
<meta name="msapplication-TileImage" content="vector-icons/mstile-144x144.png"> <meta name="msapplication-TileImage" content="vector-icons/mstile-144x144.png">
<meta name="msapplication-config" content="vector-icons/browserconfig.xml"> <meta name="msapplication-config" content="vector-icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<% for(var i=0; i<htmlWebpackPlugin.files.css.length; i++) {%> <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) {
<link href="<%= htmlWebpackPlugin.files.css[i] %>" rel="stylesheet"> 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);
%>
<link rel="alternate stylesheet" title="<%= title %>" href="<%= file %>">
<% } else { %>
<link rel="stylesheet" href="<%= file %>">
<% }
} %>
</head> </head>
<body style="height: 100%;"> <body style="height: 100%;">
<section id="matrixchat" style="height: 100%;"></section> <section id="matrixchat" style="height: 100%;"></section>
<noscript>Sorry, Riot requires JavaScript to be enabled.</noscript> <noscript>Sorry, Riot requires JavaScript to be enabled.</noscript>
<% for(var i=0; i<htmlWebpackPlugin.files.js.length; i++) {%> <% for (var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%>
<script src="<%= htmlWebpackPlugin.files.js[i] %>"></script> <script src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
<% } %> <% } %>
<img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/> <img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>

View file

@ -28,9 +28,9 @@ limitations under the License.
// https://babeljs.io/docs/plugins/transform-runtime/ // https://babeljs.io/docs/plugins/transform-runtime/
require('babel-polyfill'); require('babel-polyfill');
// CSS requires: just putting them here for now as CSS is going to be // Require common CSS here; this will make webpack process it into bundle.css.
// refactored "soon" anyway // Our own CSS (which is themed) is imported via separate webpack entry points
require('../../build/components.css'); // in webpack.config.js
require('gemini-scrollbar/gemini-scrollbar.css'); require('gemini-scrollbar/gemini-scrollbar.css');
require('gfm.css/gfm.css'); require('gfm.css/gfm.css');
require('highlight.js/styles/github.css'); require('highlight.js/styles/github.css');

View file

@ -15,6 +15,10 @@ module.exports = {
// point, so that it doesn't block the pageload, but that is a separate // point, so that it doesn't block the pageload, but that is a separate
// problem) // problem)
"olm": "./src/vector/olm-loader.js", "olm": "./src/vector/olm-loader.js",
// CSS themes
"theme-light": "./build/light.scss",
"theme-dark": "./build/dark.scss",
}, },
module: { module: {
preLoaders: [ preLoaders: [
@ -24,7 +28,8 @@ module.exports = {
{ test: /\.json$/, loader: "json" }, { test: /\.json$/, loader: "json" },
{ test: /\.js$/, loader: "babel", include: path.resolve('./src') }, { test: /\.js$/, loader: "babel", include: path.resolve('./src') },
// css-raw-loader loads CSS but doesn't try to treat url()s as require()s // 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: [ noParse: [
// don't parse the languages within highlight.js. They cause stack // don't parse the languages within highlight.js. They cause stack