Merge remote-tracking branch 'origin/develop' into dbkr/add_searching_known_users

This commit is contained in:
David Baker 2017-01-19 11:12:49 +00:00
commit 5f8170f4cd
91 changed files with 833 additions and 642 deletions

25
docs/theming.md Normal file
View File

@ -0,0 +1,25 @@
Theming Riot
============
Themes are a very basic way of providing simple alternative look & feels to the
riot-web app via CSS & custom imagery.
They are *NOT* co be confused with 'skins', which describe apps which sit on top
of matrix-react-sdk - e.g. in theory Riot itself is a react-sdk skin.
As of Jan 2017, skins are not fully supported; riot is the only available skin.
To define a theme for Riot:
1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`.
2. Fork `src/skins/vector/css/themes/dark.scss` to be teal.scss
3. Fork `src/skins/vector/css/themes/_base.scss` to be _teal.scss
4. Override variables in _teal.scss as desired. You may wish to delete ones
which don't differ from _base.scss, to make it clear which are being
overridden. If every single colour is being changed (as per _dark.scss)
then you might as well keep them all.
5. Add the theme to the list of entrypoints in webpack.config.js
6. Add the theme to the list of themes in matrix-react-sdk's UserSettings.js
7. Sit back and admire your handywork.
In future, the assets for a theme will probably be gathered together into a
single directory tree.

View File

@ -29,21 +29,19 @@
"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: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",
"build:electron": "npm run clean && npm run build && build -wml --ia32 --x64", "build:electron": "npm run clean && npm run build && build -wml --ia32 --x64",
"build": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle", "build": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle",
"build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle:dev", "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle:dev",
"dist": "scripts/package.sh", "dist": "scripts/package.sh",
"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": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\"",
"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\"",
"start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\" \"npm run start:css\"", "clean": "rimraf lib webapp electron/dist",
"clean": "rimraf build lib webapp electron/dist",
"prepublish": "npm run build:compile", "prepublish": "npm run build:compile",
"test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false", "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
"test:multi": "karma start" "test:multi": "karma start"
@ -76,6 +74,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 +89,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 +112,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-extend": "^1.0.5",
"postcss-import": "^9.0.0",
"postcss-loader": "^1.2.2",
"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",

13
postcss.config.js Normal file
View File

@ -0,0 +1,13 @@
module.exports = {
plugins: [
require("postcss-import")(),
require("autoprefixer")(),
require("postcss-simple-vars")(),
require("postcss-extend")(),
require("postcss-nested")(),
require("postcss-mixins")(),
require("postcss-strip-inline-comments")(),
],
"parser": "postcss-scss",
"local-plugins": true,
};

View File

@ -1,13 +1,32 @@
#!/usr/bin/env python #!/usr/bin/env python
#
# auto-deploy script for https://riot.im/develop
#
# Listens for HTTP hits. When it gets one, downloads the artifact from jenkins
# and deploys it as the new version.
#
# Requires the following python packages:
#
# - requests
# - flask
#
from __future__ import print_function from __future__ import print_function
import json, requests, tarfile, argparse, os, errno import json, requests, tarfile, argparse, os, errno
import time
from urlparse import urljoin from urlparse import urljoin
from flask import Flask, jsonify, request, abort from flask import Flask, jsonify, request, abort
app = Flask(__name__) app = Flask(__name__)
arg_jenkins_url, arg_extract_path, arg_should_clean, arg_symlink, arg_config_location = ( arg_jenkins_url = None
None, None, None, None, None arg_extract_path = None
) arg_bundles_path = None
arg_should_clean = None
arg_symlink = None
arg_config_location = None
class DeployException(Exception):
pass
def download_file(url): def download_file(url):
local_filename = url.split('/')[-1] local_filename = url.split('/')[-1]
@ -57,6 +76,9 @@ def on_receive_jenkins_poke():
abort(400, "Missing or bad build number") abort(400, "Missing or bad build number")
return return
return fetch_jenkins_build(job_name, build_num)
def fetch_jenkins_build(job_name, build_num):
artifact_url = urljoin( artifact_url = urljoin(
arg_jenkins_url, "job/%s/%s/api/json" % (job_name, build_num) arg_jenkins_url, "job/%s/%s/api/json" % (job_name, build_num)
) )
@ -106,14 +128,6 @@ def on_receive_jenkins_poke():
arg_jenkins_url, "job/%s/%s/artifact/%s" % (job_name, build_num, tar_gz_path) arg_jenkins_url, "job/%s/%s/artifact/%s" % (job_name, build_num, tar_gz_path)
) )
print("Retrieving .tar.gz file: %s" % tar_gz_url)
# we rely on the fact that flask only serves one request at a time to
# ensure that we do not overwrite a tarball from a concurrent request.
filename = download_file(tar_gz_url)
print("Downloaded file: %s" % filename)
try:
# we extract into a directory based on the build number. This avoids the # we extract into a directory based on the build number. This avoids the
# problem of multiple builds building the same git version and thus having # problem of multiple builds building the same git version and thus having
# the same tarball name. That would lead to two potential problems: # the same tarball name. That would lead to two potential problems:
@ -122,11 +136,30 @@ def on_receive_jenkins_poke():
# (b) we'll be overwriting the live deployment, which means people might # (b) we'll be overwriting the live deployment, which means people might
# see half-written files. # see half-written files.
build_dir = os.path.join(arg_extract_path, "%s-#%s" % (job_name, build_num)) build_dir = os.path.join(arg_extract_path, "%s-#%s" % (job_name, build_num))
try:
deploy_tarball(tar_gz_url, build_dir)
except DeployException as e:
abort(400, e.message)
return jsonify({})
def deploy_tarball(tar_gz_url, build_dir):
"""Download a tarball from jenkins and deploy it as the new version
"""
print("Deploying %s to %s" % (tar_gz_url, build_dir))
if os.path.exists(build_dir): if os.path.exists(build_dir):
abort(400, "Not deploying. We have previously deployed this build.") raise DeployException(
return "Not deploying. We have previously deployed this build."
)
os.mkdir(build_dir) os.mkdir(build_dir)
# we rely on the fact that flask only serves one request at a time to
# ensure that we do not overwrite a tarball from a concurrent request.
filename = download_file(tar_gz_url)
print("Downloaded file: %s" % filename)
try:
untar_to(filename, build_dir) untar_to(filename, build_dir)
print("Extracted to: %s" % build_dir) print("Extracted to: %s" % build_dir)
finally: finally:
@ -139,9 +172,47 @@ def on_receive_jenkins_poke():
if arg_config_location: if arg_config_location:
create_symlink(source=arg_config_location, linkname=os.path.join(extracted_dir, 'config.json')) create_symlink(source=arg_config_location, linkname=os.path.join(extracted_dir, 'config.json'))
if arg_bundles_path:
extracted_bundles = os.path.join(extracted_dir, 'bundles')
move_bundles(source=extracted_bundles, dest=arg_bundles_path)
# replace the (hopefully now empty) extracted_bundles dir with a
# symlink to the common dir.
relpath = os.path.relpath(arg_bundles_path, extracted_dir)
os.rmdir(extracted_bundles)
print ("Symlink %s -> %s" % (extracted_bundles, relpath))
os.symlink(relpath, extracted_bundles)
create_symlink(source=extracted_dir, linkname=arg_symlink) create_symlink(source=extracted_dir, linkname=arg_symlink)
return jsonify({}) def move_bundles(source, dest):
"""Move the contents of the 'bundles' directory to a common dir
We check that we will not be overwriting anything before we proceed.
Args:
source (str): path to 'bundles' within the extracted tarball
dest (str): target common directory
"""
if not os.path.isdir(dest):
os.mkdir(dest)
# build a map from source to destination, checking for non-existence as we go.
renames = {}
for f in os.listdir(source):
dst = os.path.join(dest, f)
if os.path.exists(dst):
raise DeployException(
"Not deploying. The bundle includes '%s' which we have previously deployed."
% f
)
renames[os.path.join(source, f)] = dst
for (src, dst) in renames.iteritems():
print ("Move %s -> %s" % (src, dst))
os.rename(src, dst)
if __name__ == "__main__": if __name__ == "__main__":
parser = argparse.ArgumentParser("Runs a Vector redeployment server.") parser = argparse.ArgumentParser("Runs a Vector redeployment server.")
@ -161,6 +232,13 @@ if __name__ == "__main__":
"The location to extract .tar.gz files to." "The location to extract .tar.gz files to."
) )
) )
parser.add_argument(
"-b", "--bundles-dir", dest="bundles_dir", help=(
"A directory to move the contents of the 'bundles' directory to. A \
symlink to the bundles directory will also be written inside the \
extracted tarball. Example: './bundles'."
)
)
parser.add_argument( parser.add_argument(
"-c", "--clean", dest="clean", action="store_true", default=False, help=( "-c", "--clean", dest="clean", action="store_true", default=False, help=(
"Remove .tar.gz files after they have been downloaded and extracted." "Remove .tar.gz files after they have been downloaded and extracted."
@ -179,15 +257,31 @@ if __name__ == "__main__":
To this location." To this location."
) )
) )
parser.add_argument(
"--test", dest="tarball_uri", help=(
"Don't start an HTTP listener. Instead download a build from Jenkins \
immediately."
),
)
args = parser.parse_args() args = parser.parse_args()
if args.jenkins.endswith("/"): # important for urljoin if args.jenkins.endswith("/"): # important for urljoin
arg_jenkins_url = args.jenkins arg_jenkins_url = args.jenkins
else: else:
arg_jenkins_url = args.jenkins + "/" arg_jenkins_url = args.jenkins + "/"
arg_extract_path = args.extract arg_extract_path = args.extract
arg_bundles_path = args.bundles_dir
arg_should_clean = args.clean arg_should_clean = args.clean
arg_symlink = args.symlink arg_symlink = args.symlink
arg_config_location = args.config arg_config_location = args.config
if not os.path.isdir(arg_extract_path):
os.mkdir(arg_extract_path)
if args.tarball_uri is not None:
build_dir = os.path.join(arg_extract_path, "test-%i" % (time.time()))
deploy_tarball(args.tarball_uri, build_dir)
else:
print( print(
"Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s. Config location: %s" % "Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s. Config location: %s" %
(args.port, arg_extract_path, (args.port, arg_extract_path,

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], input[type=password] {
background-color: transparent;
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;
@ -46,7 +44,6 @@ limitations under the License.
height: 24px; height: 24px;
border: 0px ! important; border: 0px ! important;
/* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */ /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */
background-color: transparent;
border: 0px; border: 0px;
} }

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

@ -2,7 +2,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" height="35" viewBox="0, 0, 35, 35"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" height="35" viewBox="0, 0, 35, 35">
<g id="Symbols"> <g id="Symbols">
<path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#EAF5F0" id="Oval-109"/> <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#76CFA6" opacity="0.15" id="Oval-109"/>
<path d="M23,28 C21.195,28 16.807,25.624 13.122,20.524 C9.675,15.755 8,12.309 8,9.99 C8,8.164 9.225,7.293 9.883,6.825 L10.045,6.708 C10.773,6.173 11.903,6 12.337,6 C13.097,6 13.417,6.458 13.611,6.857 C13.776,7.195 15.141,10.212 15.28,10.587 C15.492,11.164 15.422,12.005 14.766,12.488 L14.65,12.571 C14.324,12.804 13.718,13.236 13.634,13.761 C13.594,14.016 13.677,14.283 13.889,14.577 C14.946,16.043 18.32,20.346 18.928,20.931 C19.405,21.389 20.009,21.455 20.42,21.098 C20.846,20.729 21.035,20.511 21.037,20.508 L21.081,20.465 C21.116,20.434 21.449,20.162 21.992,20.162 C22.385,20.162 22.783,20.302 23.178,20.576 C24.201,21.287 26.51,22.876 26.51,22.876 L26.547,22.906 C26.842,23.166 27.269,23.917 26.772,24.893 C26.256,25.907 24.655,28 23,28 L23,28 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" id="path-1"/> <path d="M23,28 C21.195,28 16.807,25.624 13.122,20.524 C9.675,15.755 8,12.309 8,9.99 C8,8.164 9.225,7.293 9.883,6.825 L10.045,6.708 C10.773,6.173 11.903,6 12.337,6 C13.097,6 13.417,6.458 13.611,6.857 C13.776,7.195 15.141,10.212 15.28,10.587 C15.492,11.164 15.422,12.005 14.766,12.488 L14.65,12.571 C14.324,12.804 13.718,13.236 13.634,13.761 C13.594,14.016 13.677,14.283 13.889,14.577 C14.946,16.043 18.32,20.346 18.928,20.931 C19.405,21.389 20.009,21.455 20.42,21.098 C20.846,20.729 21.035,20.511 21.037,20.508 L21.081,20.465 C21.116,20.434 21.449,20.162 21.992,20.162 C22.385,20.162 22.783,20.302 23.178,20.576 C24.201,21.287 26.51,22.876 26.51,22.876 L26.547,22.906 C26.842,23.166 27.269,23.917 26.772,24.893 C26.256,25.907 24.655,28 23,28 L23,28 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" id="path-1"/>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

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

@ -7,7 +7,7 @@
<g id="1:1-chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="1:1-chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Chat-People-2-Invite-modal-(similar-to-chat-group-5)" transform="translate(-909.000000, -263.000000)"> <g id="Chat-People-2-Invite-modal-(similar-to-chat-group-5)" transform="translate(-909.000000, -263.000000)">
<g id="icons_close" transform="translate(909.000000, 263.000000)"> <g id="icons_close" transform="translate(909.000000, 263.000000)">
<path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-1-Copy-7" fill="#EAF5F0"></path> <path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-1-Copy-7" fill="#76CFA6" opacity="0.15"></path>
<polyline id="icon_close" fill="#76CFA6" opacity="0.9" transform="translate(17.468897, 17.470577) rotate(-315.000000) translate(-17.468897, -17.470577) " points="18.2115394 5.97057742 16.674774 5.97057742 16.674774 16.7275762 5.9688975 16.7275762 5.9688975 18.2642903 16.674774 18.2642903 16.674774 28.9705774 18.2115394 28.9705774 18.2115394 18.2642903 28.9688975 18.2642903 28.9688975 16.7275762 18.2115394 16.7275762 18.2115394 5.97057742"></polyline> <polyline id="icon_close" fill="#76CFA6" opacity="0.9" transform="translate(17.468897, 17.470577) rotate(-315.000000) translate(-17.468897, -17.470577) " points="18.2115394 5.97057742 16.674774 5.97057742 16.674774 16.7275762 5.9688975 16.7275762 5.9688975 18.2642903 16.674774 18.2642903 16.674774 28.9705774 18.2115394 28.9705774 18.2115394 18.2642903 28.9688975 18.2642903 28.9688975 16.7275762 18.2115394 16.7275762 18.2115394 5.97057742"></polyline>
</g> </g>
</g> </g>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -2,7 +2,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" height="35" viewBox="0, 0, 35, 35"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" height="35" viewBox="0, 0, 35, 35">
<g id="Symbols"> <g id="Symbols">
<path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#EAF5F0" id="Oval-1-Copy-7"/> <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#76CFA6" opacity="0.15" id="Oval-1-Copy-7"/>
<path d="M22.4,15.4 C22.4,19.266 19.266,22.4 15.4,22.4 C11.534,22.4 8.4,19.266 8.4,15.4 C8.4,11.534 11.534,8.4 15.4,8.4 C19.266,8.4 22.4,11.534 22.4,15.4 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" stroke-linecap="round" id="path-1" opacity="0.7"/> <path d="M22.4,15.4 C22.4,19.266 19.266,22.4 15.4,22.4 C11.534,22.4 8.4,19.266 8.4,15.4 C8.4,11.534 11.534,8.4 15.4,8.4 C19.266,8.4 22.4,11.534 22.4,15.4 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" stroke-linecap="round" id="path-1" opacity="0.7"/>
<path d="M20.3,20.3 L25.25,25.25" fill-opacity="0" stroke="#76CFA6" stroke-width="1" stroke-linecap="round" id="Line" opacity="0.7"/> <path d="M20.3,20.3 L25.25,25.25" fill-opacity="0" stroke="#76CFA6" stroke-width="1" stroke-linecap="round" id="Line" opacity="0.7"/>
</g> </g>

Before

Width:  |  Height:  |  Size: 895 B

After

Width:  |  Height:  |  Size: 910 B

View File

@ -2,7 +2,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" height="35" viewBox="0, 0, 35, 35"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" height="35" viewBox="0, 0, 35, 35">
<g id="Symbols"> <g id="Symbols">
<path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#EAF5F0" id="Oval-109-Copy"/> <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#76CFA6" opacity="0.15" id="Oval-109-Copy"/>
<g id="file"> <g id="file">
<path d="M10,10.01 C10,7.795 11.782,6 14.004,6 L18.402,6 C18.402,6 25,12.492 25,12.492 L25,24.006 C25,26.212 23.206,28 21,28 L14,28 C11.791,28 10,26.2 10,23.99 L10,10.01 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" id="path-1"/> <path d="M10,10.01 C10,7.795 11.782,6 14.004,6 L18.402,6 C18.402,6 25,12.492 25,12.492 L25,24.006 C25,26.212 23.206,28 21,28 L14,28 C11.791,28 10,26.2 10,23.99 L10,10.01 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" id="path-1"/>
<path d="M25,13 L20.157,13 C18.966,13 18,12.034 18,10.843 L18,6" fill-opacity="0" stroke="#76CFA6" stroke-width="1" id="path-3"/> <path d="M25,13 L20.157,13 C18.966,13 18,12.034 18,10.843 L18,6" fill-opacity="0" stroke="#76CFA6" stroke-width="1" id="path-3"/>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -7,7 +7,7 @@
<g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Extra-icons-sheet" transform="translate(-542.000000, -366.000000)"> <g id="Extra-icons-sheet" transform="translate(-542.000000, -366.000000)">
<g id="icons_video" transform="translate(542.000000, 366.000000)"> <g id="icons_video" transform="translate(542.000000, 366.000000)">
<path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-109-Copy-2" fill="#EAF5F0"></path> <path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-109-Copy-2" fill="#76CFA6" opacity="0.15"></path>
<g transform="translate(9.000000, 11.500000)" id="Rectangle-20-+-Path-16" stroke="#76CFA6"> <g transform="translate(9.000000, 11.500000)" id="Rectangle-20-+-Path-16" stroke="#76CFA6">
<g transform="scale(1.0, 0.8)"> <g transform="scale(1.0, 0.8)">
<rect id="Rectangle-20" x="0" y="0" width="13" height="17" rx="4"></rect> <rect id="Rectangle-20" x="0" y="0" width="13" height="17" rx="4"></rect>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.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": "./src/skins/vector/css/themes/light.scss",
"theme-dark": "./src/skins/vector/css/themes/dark.scss"
}, },
module: { module: {
preLoaders: [ preLoaders: [
@ -23,8 +27,25 @@ module.exports = {
loaders: [ loaders: [
{ 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 {
{ test: /\.css$/, loader: ExtractTextPlugin.extract("css-raw-loader") }, test: /\.scss$/,
// 1. postcss-loader turns the SCSS into normal CSS.
// 2. css-raw-loader turns the CSS into a javascript module
// whose default export is a string containing the CSS.
// (css-raw-loader is similar to css-loader, but the latter
// would also drag in the imgs and fonts that our CSS refers to
// as webpack inputs.)
// 3. ExtractTextPlugin turns that string into a separate asset.
loader: ExtractTextPlugin.extract(
"css-raw-loader!postcss-loader?config=postcss.config.js"
),
},
{
// this works similarly to the scss case, without postcss.
test: /\.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