mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
Merge branch 'develop' into rav/hotkey-ux
This commit is contained in:
Richard van der Hoff
commit
67e14ff363
2
.eslintignore
Normal file
2
.eslintignore
Normal file
@ -0,0 +1,2 @@
|
||||
src/vector/modernizr.js
|
||||
src/component-index.js
|
||||
3
.eslintrc.js
Normal file
3
.eslintrc.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
extends: ["./node_modules/matrix-react-sdk/.eslintrc.js"],
|
||||
}
|
||||
@ -4,4 +4,4 @@ node_js:
|
||||
install:
|
||||
- npm install
|
||||
- (cd node_modules/matrix-js-sdk && npm install)
|
||||
- (cd node_modules/matrix-react-sdk && npm run build)
|
||||
- (cd node_modules/matrix-react-sdk && npm install)
|
||||
|
||||
29
CHANGELOG.md
29
CHANGELOG.md
@ -1,3 +1,32 @@
|
||||
Changes in [0.9.6](https://github.com/vector-im/riot-web/releases/tag/v0.9.6) (2017-01-16)
|
||||
==========================================================================================
|
||||
[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.6-rc.1...v0.9.6)
|
||||
|
||||
* Update to matrix-js-sdk 0.9.6 for video calling fix
|
||||
|
||||
Changes in [0.9.6-rc.1](https://github.com/vector-im/riot-web/releases/tag/v0.9.6-rc.1) (2017-01-13)
|
||||
====================================================================================================
|
||||
[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.5...v0.9.6-rc.1)
|
||||
|
||||
* Build the js-sdk in the CI script
|
||||
[\#2920](https://github.com/vector-im/riot-web/pull/2920)
|
||||
* Hopefully fix Windows shortcuts
|
||||
[\#2917](https://github.com/vector-im/riot-web/pull/2917)
|
||||
* Update README now the js-sdk has a transpile step
|
||||
[\#2921](https://github.com/vector-im/riot-web/pull/2921)
|
||||
* Use the role for 'toggle dev tools'
|
||||
[\#2915](https://github.com/vector-im/riot-web/pull/2915)
|
||||
* Enable screen sharing easter-egg in desktop app
|
||||
[\#2909](https://github.com/vector-im/riot-web/pull/2909)
|
||||
* make electron send email validation URLs with a nextlink of riot.im
|
||||
[\#2808](https://github.com/vector-im/riot-web/pull/2808)
|
||||
* add Debian Stretch install steps to readme
|
||||
[\#2809](https://github.com/vector-im/riot-web/pull/2809)
|
||||
* Update desktop build instructions fixes #2792
|
||||
[\#2793](https://github.com/vector-im/riot-web/pull/2793)
|
||||
* CSS for the delete threepid button
|
||||
[\#2784](https://github.com/vector-im/riot-web/pull/2784)
|
||||
|
||||
Changes in [0.9.5](https://github.com/vector-im/riot-web/releases/tag/v0.9.5) (2016-12-24)
|
||||
==========================================================================================
|
||||
[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.4...v0.9.5)
|
||||
|
||||
40
README.md
40
README.md
@ -14,7 +14,7 @@ https://riot.im/develop for those who like living dangerously.
|
||||
To host your own copy of Riot, the quickest bet is to use a pre-built
|
||||
released version of Riot:
|
||||
|
||||
1. Download the latest version from https://github.com/vector-im/vector-web/releases
|
||||
1. Download the latest version from https://github.com/vector-im/riot-web/releases
|
||||
1. Untar the tarball on your web server
|
||||
1. Move (or symlink) the vector-x.x.x directory to an appropriate name
|
||||
1. If desired, copy `config.sample.json` to `config.json` and edit it
|
||||
@ -44,7 +44,7 @@ access to Riot (or other apps) due to sharing the same domain.
|
||||
|
||||
We have put some coarse mitigations into place to try to protect against this
|
||||
situation, but it's still not good practice to do it in the first place. See
|
||||
https://github.com/vector-im/vector-web/issues/1977 for more details.
|
||||
https://github.com/vector-im/riot-web/issues/1977 for more details.
|
||||
|
||||
Building From Source
|
||||
====================
|
||||
@ -53,8 +53,8 @@ Riot is a modular webapp built with modern ES6 and requires a npm build system
|
||||
to build.
|
||||
|
||||
1. Install or update `node.js` so that your `npm` is at least at version `2.0.0`
|
||||
1. Clone the repo: `git clone https://github.com/vector-im/vector-web.git`
|
||||
1. Switch to the vector-web directory: `cd vector-web`
|
||||
1. Clone the repo: `git clone https://github.com/vector-im/riot-web.git`
|
||||
1. Switch to the riot-web directory: `cd riot-web`
|
||||
1. Install the prerequisites: `npm install`
|
||||
1. If you are using the `develop` branch of vector-web, you will probably need
|
||||
to rebuild some of the dependencies, due to
|
||||
@ -109,16 +109,18 @@ Running as a Desktop app
|
||||
========================
|
||||
|
||||
Riot can also be run as a desktop app, wrapped in electron. You can download a
|
||||
pre-built version from https://riot.im/download/desktop/ or, if you prefer,
|
||||
pre-built version from https://riot.im/desktop.html or, if you prefer,
|
||||
built it yourself.
|
||||
|
||||
To run as a desktop app:
|
||||
```
|
||||
npm install
|
||||
npm install electron
|
||||
npm run build
|
||||
node_modules/.bin/electron .
|
||||
```
|
||||
|
||||
1. Follow the instructions in 'Building From Source' above
|
||||
2. Install electron and run it:
|
||||
|
||||
```
|
||||
npm install electron
|
||||
node_modules/.bin/electron .
|
||||
```
|
||||
|
||||
To build packages, use electron-builder. This is configured to output:
|
||||
* dmg + zip for macOS
|
||||
@ -141,11 +143,9 @@ npm run build:electron
|
||||
|
||||
For other packages, use electron-builder manually. For example, to build a package
|
||||
for 64 bit Linux:
|
||||
```
|
||||
npm install
|
||||
npm run build
|
||||
node_modules/.bin/build -l --x64
|
||||
```
|
||||
|
||||
1. Follow the instructions in 'Building From Source' above
|
||||
2. `node_modules/.bin/build -l --x64`
|
||||
|
||||
All electron packages go into `electron/dist/`
|
||||
|
||||
@ -179,13 +179,13 @@ the `component-index.js` for the app (used in future for skinning)
|
||||
development on Riot forcing `matrix-react-sdk` to move fast at the expense of
|
||||
maintaining a clear abstraction between the two.** Hacking on Riot inevitably
|
||||
means hacking equally on `matrix-react-sdk`, and there are bits of
|
||||
`matrix-react-sdk` behaviour incorrectly residing in the `vector-web` project
|
||||
`matrix-react-sdk` behaviour incorrectly residing in the `riot-web` project
|
||||
(e.g. matrix-react-sdk specific CSS), and a bunch of Riot specific behaviour
|
||||
in the `matrix-react-sdk` (grep for `vector` / `riot`). This separation problem will be
|
||||
solved asap once development on Riot (and thus matrix-react-sdk) has
|
||||
stabilised. Until then, the two projects should basically be considered as a
|
||||
single unit. In particular, `matrix-react-sdk` issues are currently filed
|
||||
against `vector-web` in github.
|
||||
against `riot-web` in github.
|
||||
|
||||
Please note that Riot is intended to run correctly without access to the public
|
||||
internet. So please don't depend on resources (JS libs, CSS, images, fonts)
|
||||
@ -220,8 +220,8 @@ Then similarly with `matrix-react-sdk`:
|
||||
|
||||
Finally, build and start Riot itself:
|
||||
|
||||
1. `git clone git@github.com:vector-im/vector-web.git`
|
||||
1. `cd vector-web`
|
||||
1. `git clone git@github.com:vector-im/riot-web.git`
|
||||
1. `cd riot-web`
|
||||
1. `git checkout develop`
|
||||
1. `npm install`
|
||||
1. `rm -r node_modules/matrix-js-sdk; ln -s ../../matrix-js-sdk node_modules/`
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
"brand": "Riot",
|
||||
"integrations_ui_url": "https://scalar.vector.im/",
|
||||
"integrations_rest_url": "https://scalar.vector.im/api",
|
||||
"bug_report_endpoint_url": "https://vector.im/bugs",
|
||||
"enableLabs": true,
|
||||
"roomDirectory": {
|
||||
"servers": [
|
||||
|
||||
25
docs/theming.md
Normal file
25
docs/theming.md
Normal 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.
|
||||
@ -26,6 +26,8 @@ if (check_squirrel_hooks()) return;
|
||||
const electron = require('electron');
|
||||
const url = require('url');
|
||||
|
||||
const tray = require('./tray');
|
||||
|
||||
const VectorMenu = require('./vectormenu');
|
||||
|
||||
let vectorConfig = {};
|
||||
@ -112,7 +114,16 @@ function startAutoUpdate(update_base_url) {
|
||||
// 204 No Content. On windows it takes a base path and looks for
|
||||
// files under that path.
|
||||
if (process.platform == 'darwin') {
|
||||
electron.autoUpdater.setFeedURL(update_base_url + 'macos/');
|
||||
// include the current version in the URL we hit. Electron doesn't add
|
||||
// it anywhere (apart from the User-Agent) so it's up to us. We could
|
||||
// (and previously did) just use the User-Agent, but this doesn't
|
||||
// rely on NSURLConnection setting the User-Agent to what we expect,
|
||||
// and also acts as a convenient cache-buster to ensure that when the
|
||||
// app updates it always gets a fresh value to avoid update-looping.
|
||||
electron.autoUpdater.setFeedURL(
|
||||
update_base_url +
|
||||
'macos/?localVersion=' + encodeURIComponent(electron.app.getVersion())
|
||||
);
|
||||
} else if (process.platform == 'win32') {
|
||||
electron.autoUpdater.setFeedURL(update_base_url + 'win32/' + process.arch + '/');
|
||||
} else {
|
||||
@ -150,6 +161,19 @@ electron.ipcMain.on('install_update', installUpdate);
|
||||
|
||||
electron.app.commandLine.appendSwitch('--enable-usermedia-screen-capturing');
|
||||
|
||||
const shouldQuit = electron.app.makeSingleInstance((commandLine, workingDirectory) => {
|
||||
// Someone tried to run a second instance, we should focus our window.
|
||||
if (mainWindow) {
|
||||
if (!mainWindow.isVisible()) mainWindow.show();
|
||||
if (mainWindow.isMinimized()) mainWindow.restore();
|
||||
mainWindow.focus();
|
||||
}
|
||||
});
|
||||
|
||||
if (shouldQuit) {
|
||||
electron.app.quit()
|
||||
}
|
||||
|
||||
electron.app.on('ready', () => {
|
||||
if (vectorConfig.update_base_url) {
|
||||
console.log("Starting auto update with base URL: " + vectorConfig.update_base_url);
|
||||
@ -166,10 +190,17 @@ electron.app.on('ready', () => {
|
||||
icon: icon_path,
|
||||
width: 1024, height: 768,
|
||||
show: false,
|
||||
autoHideMenuBar: true,
|
||||
});
|
||||
mainWindow.loadURL(`file://${__dirname}/../../webapp/index.html`);
|
||||
electron.Menu.setApplicationMenu(VectorMenu);
|
||||
|
||||
// Create trayIcon icon
|
||||
tray.create(mainWindow, {
|
||||
icon_path: icon_path,
|
||||
brand: vectorConfig.brand || 'Riot'
|
||||
});
|
||||
|
||||
mainWindow.once('ready-to-show', () => {
|
||||
mainWindow.show();
|
||||
});
|
||||
@ -177,7 +208,7 @@ electron.app.on('ready', () => {
|
||||
mainWindow = null;
|
||||
});
|
||||
mainWindow.on('close', (e) => {
|
||||
if (process.platform == 'darwin' && !appQuitting) {
|
||||
if (!appQuitting && (tray.hasTray() || process.platform == 'darwin')) {
|
||||
// On Mac, closing the window just hides it
|
||||
// (this is generally how single-window Mac apps
|
||||
// behave, eg. Mail.app)
|
||||
|
||||
@ -1,3 +1,19 @@
|
||||
/*
|
||||
Copyright 2017 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
const path = require('path');
|
||||
const spawn = require('child_process').spawn;
|
||||
const app = require('electron').app;
|
||||
|
||||
67
electron/src/tray.js
Normal file
67
electron/src/tray.js
Normal file
@ -0,0 +1,67 @@
|
||||
/*
|
||||
Copyright 2017 Karl Glatz <karl@glatz.biz>
|
||||
Copyright 2017 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
const path = require('path');
|
||||
const electron = require('electron');
|
||||
|
||||
const app = electron.app;
|
||||
const Tray = electron.Tray;
|
||||
const MenuItem = electron.MenuItem;
|
||||
|
||||
let trayIcon = null;
|
||||
|
||||
exports.hasTray = function hasTray() {
|
||||
return (trayIcon !== null);
|
||||
}
|
||||
|
||||
exports.create = function (win, config) {
|
||||
// no trays on darwin
|
||||
if (process.platform === 'darwin' || trayIcon) {
|
||||
return;
|
||||
}
|
||||
|
||||
const toggleWin = function () {
|
||||
if (win.isVisible() && !win.isMinimized()) {
|
||||
win.hide();
|
||||
} else {
|
||||
if (win.isMinimized()) win.restore();
|
||||
if (!win.isVisible()) win.show();
|
||||
win.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const contextMenu = electron.Menu.buildFromTemplate([
|
||||
{
|
||||
label: 'Show/Hide ' + config.brand,
|
||||
click: toggleWin
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
click: function () {
|
||||
app.quit();
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
trayIcon = new Tray(config.icon_path);
|
||||
trayIcon.setToolTip(config.brand);
|
||||
trayIcon.setContextMenu(contextMenu);
|
||||
trayIcon.on('click', toggleWin);
|
||||
};
|
||||
115
karma.conf.js
115
karma.conf.js
@ -2,13 +2,14 @@
|
||||
|
||||
var path = require('path');
|
||||
var webpack = require('webpack');
|
||||
var webpack_config = require('./webpack.config');
|
||||
|
||||
/*
|
||||
* We use webpack to build our tests. It's a pain to have to wait for webpack
|
||||
* to build everything; however it's the easiest way to load our dependencies
|
||||
* from node_modules.
|
||||
*
|
||||
* If you run karma in multi-run mode (with `npm run test:multi`), it will watch
|
||||
* If you run karma in multi-run mode (with `npm run test-multi`), it will watch
|
||||
* the tests for changes, and webpack will rebuild using a cache. This is much quicker
|
||||
* than a clean rebuild.
|
||||
*/
|
||||
@ -19,8 +20,41 @@ var testFile = process.env.KARMA_TEST_FILE || 'test/all-tests.js';
|
||||
process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
|
||||
process.env.Q_DEBUG = 1;
|
||||
|
||||
/* the webpack config is based on the real one, to (a) try to simulate the
|
||||
* deployed environment as closely as possible, and (b) to avoid a shedload of
|
||||
* cut-and-paste.
|
||||
*/
|
||||
|
||||
// find out if we're shipping olm, and where it is, if so.
|
||||
const olm_entry = webpack_config.entry['olm'];
|
||||
|
||||
// remove the default entries - karma provides its own (via the 'files' and
|
||||
// 'preprocessors' config below)
|
||||
delete webpack_config['entry'];
|
||||
|
||||
// add ./test as a search path for js
|
||||
webpack_config.module.loaders.unshift({
|
||||
test: /\.js$/, loader: "babel",
|
||||
include: [path.resolve('./src'), path.resolve('./test')],
|
||||
});
|
||||
|
||||
// disable parsing for sinon, because it
|
||||
// tries to do voodoo with 'require' which upsets
|
||||
// webpack (https://github.com/webpack/webpack/issues/304)
|
||||
webpack_config.module.noParse.push(/sinon\/pkg\/sinon\.js$/);
|
||||
|
||||
// ?
|
||||
webpack_config.resolve.alias['sinon'] = 'sinon/pkg/sinon.js';
|
||||
|
||||
webpack_config.resolve.root = [
|
||||
path.resolve('./src'),
|
||||
path.resolve('./test'),
|
||||
];
|
||||
|
||||
webpack_config.devtool = 'inline-source-map';
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
const myconfig = {
|
||||
// frameworks to use
|
||||
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
||||
frameworks: ['mocha'],
|
||||
@ -29,19 +63,29 @@ module.exports = function (config) {
|
||||
files: [
|
||||
'node_modules/babel-polyfill/browser.js',
|
||||
testFile,
|
||||
{pattern: 'vector/img/*', watched: false, included: false, served: true, nocache: false},
|
||||
|
||||
// make the images available via our httpd. They will be avaliable
|
||||
// below http://localhost:[PORT]/base/. See also `proxies` which
|
||||
// defines alternative URLs for them.
|
||||
//
|
||||
// This isn't required by any of the tests, but it stops karma
|
||||
// logging warnings when it serves a 404 for them.
|
||||
{
|
||||
pattern: 'src/skins/vector/img/*',
|
||||
watched: false, included: false, served: true, nocache: false,
|
||||
},
|
||||
],
|
||||
|
||||
// redirect img links to the karma server
|
||||
proxies: {
|
||||
"/img/": "/base/vector/img/",
|
||||
// redirect img links to the karma server. See above.
|
||||
"/img/": "/base/src/skins/vector/img/",
|
||||
},
|
||||
|
||||
// preprocess matching files before serving them to the browser
|
||||
// available preprocessors:
|
||||
// https://npmjs.org/browse/keyword/karma-preprocessor
|
||||
preprocessors: {
|
||||
'test/**/*.js': ['webpack', 'sourcemap']
|
||||
'{src,test}/**/*.js': ['webpack'],
|
||||
},
|
||||
|
||||
// test results reporter to use
|
||||
@ -84,53 +128,20 @@ module.exports = function (config) {
|
||||
outputDir: 'karma-reports',
|
||||
},
|
||||
|
||||
webpack: {
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.json$/, loader: "json" },
|
||||
{
|
||||
test: /\.js$/, loader: "babel",
|
||||
include: [path.resolve('./src'),
|
||||
path.resolve('./test'),
|
||||
]
|
||||
},
|
||||
],
|
||||
noParse: [
|
||||
// don't parse the languages within highlight.js. They
|
||||
// cause stack overflows
|
||||
// (https://github.com/webpack/webpack/issues/1721), and
|
||||
// there is no need for webpack to parse them - they can
|
||||
// just be included as-is.
|
||||
/highlight\.js\/lib\/languages/,
|
||||
webpack: webpack_config,
|
||||
|
||||
// also disable parsing for sinon, because it
|
||||
// tries to do voodoo with 'require' which upsets
|
||||
// webpack (https://github.com/webpack/webpack/issues/304)
|
||||
/sinon\/pkg\/sinon\.js$/,
|
||||
],
|
||||
webpackMiddleware: {
|
||||
stats: {
|
||||
// don't fill the console up with a mahoosive list of modules
|
||||
chunks: false,
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
// alias any requires to the react module to the one in our path, otherwise
|
||||
// we tend to get the react source included twice when using npm link.
|
||||
react: path.resolve('./node_modules/react'),
|
||||
|
||||
// same goes for js-sdk
|
||||
"matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),
|
||||
|
||||
sinon: 'sinon/pkg/sinon.js',
|
||||
},
|
||||
root: [
|
||||
path.resolve('./src'),
|
||||
path.resolve('./test'),
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
// olm may not be installed, so avoid webpack warnings by
|
||||
// ignoring it.
|
||||
new webpack.IgnorePlugin(/^olm$/),
|
||||
],
|
||||
devtool: 'inline-source-map',
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// include the olm loader if we have it.
|
||||
if (olm_entry) {
|
||||
myconfig.files.unshift(olm_entry);
|
||||
}
|
||||
|
||||
config.set(myconfig);
|
||||
};
|
||||
|
||||
40
package.json
40
package.json
@ -2,7 +2,7 @@
|
||||
"name": "riot-web",
|
||||
"productName": "Riot",
|
||||
"main": "electron/src/electron-main.js",
|
||||
"version": "0.9.5",
|
||||
"version": "0.9.6",
|
||||
"description": "A feature-rich client for Matrix.org",
|
||||
"author": "Vector Creations Ltd.",
|
||||
"repository": {
|
||||
@ -29,24 +29,24 @@
|
||||
"reskindex": "reskindex -h src/header",
|
||||
"build:res": "node scripts/copy-res.js",
|
||||
"build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
|
||||
"build:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css --no-watch",
|
||||
"build:compile": "babel --source-maps -d lib src",
|
||||
"build:bundle": "NODE_ENV=production webpack -p --progress",
|
||||
"build:bundle:dev": "webpack --optimize-occurence-order --progress",
|
||||
"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:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle:dev",
|
||||
"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:bundle:dev",
|
||||
"dist": "scripts/package.sh",
|
||||
"start:res": "node scripts/copy-res.js -w",
|
||||
"start:js": "webpack-dev-server -w --progress",
|
||||
"start:js": "webpack-dev-server --output-filename=bundles/_dev_/[name].js --output-chunk-file=bundles/_dev_/[name].js -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\" \"npm run start:css\"",
|
||||
"start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\" \"npm run start:css\"",
|
||||
"clean": "rimraf build lib webapp electron/dist",
|
||||
"start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\"",
|
||||
"start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\"",
|
||||
"lint": "eslint src/",
|
||||
"lintall": "eslint src/ test/",
|
||||
"clean": "rimraf lib webapp electron/dist",
|
||||
"prepublish": "npm run build:compile",
|
||||
"test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
|
||||
"test:multi": "karma start"
|
||||
"test-multi": "karma start"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-polyfill": "^6.5.0",
|
||||
@ -76,6 +76,7 @@
|
||||
"url": "^0.11.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.6.0",
|
||||
"babel-cli": "^6.5.2",
|
||||
"babel-core": "^6.14.0",
|
||||
"babel-eslint": "^6.1.0",
|
||||
@ -90,13 +91,16 @@
|
||||
"babel-preset-es2017": "^6.16.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"babel-preset-stage-2": "^6.17.0",
|
||||
"catw": "^1.0.1",
|
||||
"chokidar": "^1.6.1",
|
||||
"cpx": "^1.3.2",
|
||||
"css-raw-loader": "^0.1.1",
|
||||
"electron-builder": "^11.2.4",
|
||||
"electron-builder-squirrel-windows": "^11.2.1",
|
||||
"emojione": "^2.2.3",
|
||||
"eslint": "^3.14.0",
|
||||
"eslint-config-google": "^0.7.1",
|
||||
"eslint-plugin-flowtype": "^2.30.0",
|
||||
"eslint-plugin-react": "^6.9.0",
|
||||
"expect": "^1.16.0",
|
||||
"fs-extra": "^0.30.0",
|
||||
"html-webpack-plugin": "^2.24.0",
|
||||
@ -107,13 +111,20 @@
|
||||
"karma-junit-reporter": "^0.4.1",
|
||||
"karma-mocha": "^0.2.2",
|
||||
"karma-phantomjs-launcher": "^1.0.0",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-webpack": "^1.7.0",
|
||||
"minimist": "^1.2.0",
|
||||
"mkdirp": "^0.5.1",
|
||||
"mocha": "^2.4.5",
|
||||
"parallelshell": "^1.2.0",
|
||||
"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-test-utils": "^15.4.0",
|
||||
"rimraf": "^2.4.3",
|
||||
@ -140,7 +151,10 @@
|
||||
],
|
||||
"linux": {
|
||||
"target": "deb",
|
||||
"maintainer": "support@riot.im"
|
||||
"maintainer": "support@riot.im",
|
||||
"desktop": {
|
||||
"StartupWMClass": "riot-web"
|
||||
}
|
||||
},
|
||||
"win": {
|
||||
"target": "squirrel"
|
||||
|
||||
13
postcss.config.js
Normal file
13
postcss.config.js
Normal 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,
|
||||
};
|
||||
183
scripts/deploy.py
Executable file
183
scripts/deploy.py
Executable file
@ -0,0 +1,183 @@
|
||||
#!/usr/bin/env python
|
||||
#
|
||||
# download and unpack a riot-web tarball.
|
||||
#
|
||||
# Allows `bundles` to be extracted to a common directory, and a link to
|
||||
# config.json to be added.
|
||||
|
||||
from __future__ import print_function
|
||||
|
||||
import argparse
|
||||
import os
|
||||
import os.path
|
||||
import subprocess
|
||||
import sys
|
||||
import tarfile
|
||||
|
||||
try:
|
||||
# python3
|
||||
from urllib.request import urlretrieve
|
||||
except ImportError:
|
||||
# python2
|
||||
from urllib import urlretrieve
|
||||
|
||||
class DeployException(Exception):
|
||||
pass
|
||||
|
||||
def create_relative_symlink(linkname, target):
|
||||
relpath = os.path.relpath(target, os.path.dirname(linkname))
|
||||
print ("Symlink %s -> %s" % (linkname, relpath))
|
||||
os.symlink(relpath, linkname)
|
||||
|
||||
|
||||
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)
|
||||
|
||||
class Deployer:
|
||||
def __init__(self):
|
||||
self.packages_path = "."
|
||||
self.bundles_path = None
|
||||
self.should_clean = False
|
||||
self.config_location = None
|
||||
self.verify_signature = True
|
||||
|
||||
def deploy(self, tarball, extract_path):
|
||||
"""Download a tarball if necessary, and unpack it
|
||||
|
||||
Returns:
|
||||
(str) the path to the unpacked deployment
|
||||
"""
|
||||
print("Deploying %s to %s" % (tarball, extract_path))
|
||||
|
||||
name_str = os.path.basename(tarball).replace(".tar.gz", "")
|
||||
extracted_dir = os.path.join(extract_path, name_str)
|
||||
if os.path.exists(extracted_dir):
|
||||
raise DeployException('Cannot unpack %s: %s already exists' % (
|
||||
tarball, extracted_dir))
|
||||
|
||||
downloaded = False
|
||||
if tarball.startswith("http://") or tarball.startswith("https://"):
|
||||
tarball = self.download_and_verify(tarball)
|
||||
print("Downloaded file: %s" % tarball)
|
||||
downloaded = True
|
||||
|
||||
try:
|
||||
with tarfile.open(tarball) as tar:
|
||||
tar.extractall(extract_path)
|
||||
finally:
|
||||
if self.should_clean and downloaded:
|
||||
os.remove(tarball)
|
||||
|
||||
print ("Extracted into: %s" % extracted_dir)
|
||||
|
||||
if self.config_location:
|
||||
create_relative_symlink(
|
||||
target=self.config_location,
|
||||
linkname=os.path.join(extracted_dir, 'config.json')
|
||||
)
|
||||
|
||||
if self.bundles_path:
|
||||
extracted_bundles = os.path.join(extracted_dir, 'bundles')
|
||||
move_bundles(source=extracted_bundles, dest=self.bundles_path)
|
||||
|
||||
# replace the (hopefully now empty) extracted_bundles dir with a
|
||||
# symlink to the common dir.
|
||||
os.rmdir(extracted_bundles)
|
||||
create_relative_symlink(
|
||||
target=self.bundles_path,
|
||||
linkname=extracted_bundles,
|
||||
)
|
||||
return extracted_dir
|
||||
|
||||
def download_and_verify(self, url):
|
||||
tarball = self.download_file(url)
|
||||
|
||||
if self.verify_signature:
|
||||
sigfile = self.download_file(url + ".asc")
|
||||
subprocess.check_call(["gpg", "--verify", sigfile, tarball])
|
||||
|
||||
return tarball
|
||||
|
||||
def download_file(self, url):
|
||||
if not os.path.isdir(self.packages_path):
|
||||
os.mkdir(self.packages_path)
|
||||
local_filename = os.path.join(self.packages_path,
|
||||
url.split('/')[-1])
|
||||
sys.stdout.write("Downloading %s -> %s..." % (url, local_filename))
|
||||
sys.stdout.flush()
|
||||
urlretrieve(url, local_filename)
|
||||
print ("Done")
|
||||
return local_filename
|
||||
|
||||
if __name__ == "__main__":
|
||||
parser = argparse.ArgumentParser("Deploy a Riot build on a web server.")
|
||||
parser.add_argument(
|
||||
"-p", "--packages-dir", default="./packages", help=(
|
||||
"The directory to download the tarball into. (Default: '%(default)s')"
|
||||
)
|
||||
)
|
||||
parser.add_argument(
|
||||
"-e", "--extract-path", default="./deploys", help=(
|
||||
"The location to extract .tar.gz files to. (Default: '%(default)s')"
|
||||
)
|
||||
)
|
||||
parser.add_argument(
|
||||
"-b", "--bundles-dir", nargs='?', default="./bundles", 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'. \
|
||||
(Default: '%(default)s')"
|
||||
)
|
||||
)
|
||||
parser.add_argument(
|
||||
"-c", "--clean", action="store_true", default=False, help=(
|
||||
"Remove .tar.gz files after they have been downloaded and extracted. \
|
||||
(Default: %(default)s)"
|
||||
)
|
||||
)
|
||||
parser.add_argument(
|
||||
"--config", nargs='?', default='./config.json', help=(
|
||||
"Write a symlink at config.json in the extracted tarball to this \
|
||||
location. (Default: '%(default)s')"
|
||||
)
|
||||
)
|
||||
parser.add_argument(
|
||||
"tarball", help=(
|
||||
"filename of tarball, or URL to download."
|
||||
),
|
||||
)
|
||||
|
||||
args = parser.parse_args()
|
||||
|
||||
deployer = Deployer()
|
||||
deployer.packages_path = args.packages_dir
|
||||
deployer.bundles_path = args.bundles_dir
|
||||
deployer.should_clean = args.clean
|
||||
deployer.config_location = args.config
|
||||
|
||||
deployer.deploy(args.tarball, args.extract_path)
|
||||
@ -20,12 +20,15 @@ rm -r node_modules/olm
|
||||
cp -r olm/package node_modules/olm
|
||||
|
||||
# we may be using dev branches of js-sdk and react-sdk, in which case we need to build them
|
||||
(cd node_modules/matrix-js-sdk && npm run build)
|
||||
(cd node_modules/matrix-react-sdk && npm run build)
|
||||
(cd node_modules/matrix-js-sdk && npm install)
|
||||
(cd node_modules/matrix-react-sdk && npm install)
|
||||
|
||||
# run the mocha tests
|
||||
npm run test
|
||||
|
||||
# run eslint
|
||||
npm run lintall -- -f checkstyle -o eslint.xml || true
|
||||
|
||||
rm dist/vector-*.tar.gz || true # rm previous artifacts without failing if it doesn't exist
|
||||
|
||||
# node_modules deps from 'npm install' don't have a .git dir so can't
|
||||
|
||||
@ -1,26 +1,30 @@
|
||||
#!/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
|
||||
import json, requests, tarfile, argparse, os, errno
|
||||
import time
|
||||
from urlparse import urljoin
|
||||
|
||||
from flask import Flask, jsonify, request, abort
|
||||
|
||||
from deploy import Deployer, DeployException
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
arg_jenkins_url, arg_extract_path, arg_should_clean, arg_symlink, arg_config_location = (
|
||||
None, None, None, None, None
|
||||
)
|
||||
|
||||
def download_file(url):
|
||||
local_filename = url.split('/')[-1]
|
||||
r = requests.get(url, stream=True)
|
||||
with open(local_filename, 'wb') as f:
|
||||
for chunk in r.iter_content(chunk_size=1024):
|
||||
if chunk: # filter out keep-alive new chunks
|
||||
f.write(chunk)
|
||||
return local_filename
|
||||
|
||||
def untar_to(tarball, dest):
|
||||
with tarfile.open(tarball) as tar:
|
||||
tar.extractall(dest)
|
||||
arg_jenkins_url = None
|
||||
deployer = None
|
||||
arg_extract_path = None
|
||||
arg_symlink = None
|
||||
|
||||
def create_symlink(source, linkname):
|
||||
try:
|
||||
@ -57,6 +61,9 @@ def on_receive_jenkins_poke():
|
||||
abort(400, "Missing or bad build number")
|
||||
return
|
||||
|
||||
return fetch_jenkins_build(job_name, build_num)
|
||||
|
||||
def fetch_jenkins_build(job_name, build_num):
|
||||
artifact_url = urljoin(
|
||||
arg_jenkins_url, "job/%s/%s/api/json" % (job_name, build_num)
|
||||
)
|
||||
@ -106,43 +113,41 @@ def on_receive_jenkins_poke():
|
||||
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)
|
||||
|
||||
# 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
|
||||
# the same tarball name. That would lead to two potential problems:
|
||||
# (a) sometimes jenkins serves corrupted artifacts; we would replace
|
||||
# a good deploy with a bad one
|
||||
# (b) we'll be overwriting the live deployment, which means people might
|
||||
# see half-written files.
|
||||
build_dir = os.path.join(arg_extract_path, "%s-#%s" % (job_name, build_num))
|
||||
try:
|
||||
# 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
|
||||
# the same tarball name. That would lead to two potential problems:
|
||||
# (a) sometimes jenkins serves corrupted artifacts; we would replace
|
||||
# a good deploy with a bad one
|
||||
# (b) we'll be overwriting the live deployment, which means people might
|
||||
# see half-written files.
|
||||
build_dir = os.path.join(arg_extract_path, "%s-#%s" % (job_name, build_num))
|
||||
if os.path.exists(build_dir):
|
||||
abort(400, "Not deploying. We have previously deployed this build.")
|
||||
return
|
||||
os.mkdir(build_dir)
|
||||
|
||||
untar_to(filename, build_dir)
|
||||
print("Extracted to: %s" % build_dir)
|
||||
finally:
|
||||
if arg_should_clean:
|
||||
os.remove(filename)
|
||||
|
||||
name_str = filename.replace(".tar.gz", "")
|
||||
extracted_dir = os.path.join(build_dir, name_str)
|
||||
|
||||
if arg_config_location:
|
||||
create_symlink(source=arg_config_location, linkname=os.path.join(extracted_dir, 'config.json'))
|
||||
extracted_dir = deploy_tarball(tar_gz_url, build_dir)
|
||||
except DeployException as e:
|
||||
abort(400, e.message)
|
||||
|
||||
create_symlink(source=extracted_dir, linkname=arg_symlink)
|
||||
|
||||
return jsonify({})
|
||||
|
||||
def deploy_tarball(tar_gz_url, build_dir):
|
||||
"""Download a tarball from jenkins and unpack it
|
||||
|
||||
Returns:
|
||||
(str) the path to the unpacked deployment
|
||||
"""
|
||||
if os.path.exists(build_dir):
|
||||
raise DeployException(
|
||||
"Not deploying. We have previously deployed this build."
|
||||
)
|
||||
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.
|
||||
|
||||
return deployer.deploy(tar_gz_url, build_dir)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
parser = argparse.ArgumentParser("Runs a Vector redeployment server.")
|
||||
parser.add_argument(
|
||||
@ -161,6 +166,13 @@ if __name__ == "__main__":
|
||||
"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(
|
||||
"-c", "--clean", dest="clean", action="store_true", default=False, help=(
|
||||
"Remove .tar.gz files after they have been downloaded and extracted."
|
||||
@ -179,18 +191,47 @@ if __name__ == "__main__":
|
||||
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()
|
||||
if args.jenkins.endswith("/"): # important for urljoin
|
||||
arg_jenkins_url = args.jenkins
|
||||
else:
|
||||
arg_jenkins_url = args.jenkins + "/"
|
||||
arg_extract_path = args.extract
|
||||
arg_should_clean = args.clean
|
||||
arg_symlink = args.symlink
|
||||
arg_config_location = args.config
|
||||
print(
|
||||
"Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s. Config location: %s" %
|
||||
(args.port, arg_extract_path,
|
||||
" (clean after)" if arg_should_clean else "", arg_symlink, arg_jenkins_url, arg_config_location)
|
||||
)
|
||||
app.run(host="0.0.0.0", port=args.port, debug=True)
|
||||
|
||||
if not os.path.isdir(arg_extract_path):
|
||||
os.mkdir(arg_extract_path)
|
||||
|
||||
deployer = Deployer()
|
||||
deployer.bundles_path = args.bundles_dir
|
||||
deployer.should_clean = args.clean
|
||||
deployer.config_location = args.config
|
||||
|
||||
# we don't pgp-sign jenkins artifacts; instead we rely on HTTPS access to
|
||||
# the jenkins server (and the jenkins server not being compromised and/or
|
||||
# github not serving it compromised source). If that's not good enough for
|
||||
# you, don't use riot.im/develop.
|
||||
deployer.verify_signature = False
|
||||
|
||||
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(
|
||||
"Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s. Config location: %s" %
|
||||
(args.port,
|
||||
arg_extract_path,
|
||||
" (clean after)" if deployer.should_clean else "",
|
||||
arg_symlink,
|
||||
arg_jenkins_url,
|
||||
deployer.config_location,
|
||||
)
|
||||
)
|
||||
app.run(host="0.0.0.0", port=args.port, debug=True)
|
||||
|
||||
@ -27,60 +27,62 @@ limitations under the License.
|
||||
module.exports.components = require('matrix-react-sdk/lib/component-index').components;
|
||||
|
||||
import structures$BottomLeftMenu from './components/structures/BottomLeftMenu';
|
||||
module.exports.components['structures.BottomLeftMenu'] = structures$BottomLeftMenu;
|
||||
structures$BottomLeftMenu && (module.exports.components['structures.BottomLeftMenu'] = structures$BottomLeftMenu);
|
||||
import structures$CompatibilityPage from './components/structures/CompatibilityPage';
|
||||
module.exports.components['structures.CompatibilityPage'] = structures$CompatibilityPage;
|
||||
structures$CompatibilityPage && (module.exports.components['structures.CompatibilityPage'] = structures$CompatibilityPage);
|
||||
import structures$LeftPanel from './components/structures/LeftPanel';
|
||||
module.exports.components['structures.LeftPanel'] = structures$LeftPanel;
|
||||
structures$LeftPanel && (module.exports.components['structures.LeftPanel'] = structures$LeftPanel);
|
||||
import structures$RightPanel from './components/structures/RightPanel';
|
||||
module.exports.components['structures.RightPanel'] = structures$RightPanel;
|
||||
structures$RightPanel && (module.exports.components['structures.RightPanel'] = structures$RightPanel);
|
||||
import structures$RoomDirectory from './components/structures/RoomDirectory';
|
||||
module.exports.components['structures.RoomDirectory'] = structures$RoomDirectory;
|
||||
structures$RoomDirectory && (module.exports.components['structures.RoomDirectory'] = structures$RoomDirectory);
|
||||
import structures$RoomSubList from './components/structures/RoomSubList';
|
||||
module.exports.components['structures.RoomSubList'] = structures$RoomSubList;
|
||||
structures$RoomSubList && (module.exports.components['structures.RoomSubList'] = structures$RoomSubList);
|
||||
import structures$SearchBox from './components/structures/SearchBox';
|
||||
module.exports.components['structures.SearchBox'] = structures$SearchBox;
|
||||
structures$SearchBox && (module.exports.components['structures.SearchBox'] = structures$SearchBox);
|
||||
import structures$ViewSource from './components/structures/ViewSource';
|
||||
module.exports.components['structures.ViewSource'] = structures$ViewSource;
|
||||
structures$ViewSource && (module.exports.components['structures.ViewSource'] = structures$ViewSource);
|
||||
import views$context_menus$MessageContextMenu from './components/views/context_menus/MessageContextMenu';
|
||||
module.exports.components['views.context_menus.MessageContextMenu'] = views$context_menus$MessageContextMenu;
|
||||
views$context_menus$MessageContextMenu && (module.exports.components['views.context_menus.MessageContextMenu'] = views$context_menus$MessageContextMenu);
|
||||
import views$context_menus$NotificationStateContextMenu from './components/views/context_menus/NotificationStateContextMenu';
|
||||
module.exports.components['views.context_menus.NotificationStateContextMenu'] = views$context_menus$NotificationStateContextMenu;
|
||||
views$context_menus$NotificationStateContextMenu && (module.exports.components['views.context_menus.NotificationStateContextMenu'] = views$context_menus$NotificationStateContextMenu);
|
||||
import views$context_menus$RoomTagContextMenu from './components/views/context_menus/RoomTagContextMenu';
|
||||
module.exports.components['views.context_menus.RoomTagContextMenu'] = views$context_menus$RoomTagContextMenu;
|
||||
views$context_menus$RoomTagContextMenu && (module.exports.components['views.context_menus.RoomTagContextMenu'] = views$context_menus$RoomTagContextMenu);
|
||||
import views$dialogs$BugReportDialog from './components/views/dialogs/BugReportDialog';
|
||||
views$dialogs$BugReportDialog && (module.exports.components['views.dialogs.BugReportDialog'] = views$dialogs$BugReportDialog);
|
||||
import views$dialogs$ChangelogDialog from './components/views/dialogs/ChangelogDialog';
|
||||
module.exports.components['views.dialogs.ChangelogDialog'] = views$dialogs$ChangelogDialog;
|
||||
views$dialogs$ChangelogDialog && (module.exports.components['views.dialogs.ChangelogDialog'] = views$dialogs$ChangelogDialog);
|
||||
import views$directory$NetworkDropdown from './components/views/directory/NetworkDropdown';
|
||||
module.exports.components['views.directory.NetworkDropdown'] = views$directory$NetworkDropdown;
|
||||
views$directory$NetworkDropdown && (module.exports.components['views.directory.NetworkDropdown'] = views$directory$NetworkDropdown);
|
||||
import views$elements$ImageView from './components/views/elements/ImageView';
|
||||
module.exports.components['views.elements.ImageView'] = views$elements$ImageView;
|
||||
views$elements$ImageView && (module.exports.components['views.elements.ImageView'] = views$elements$ImageView);
|
||||
import views$elements$Spinner from './components/views/elements/Spinner';
|
||||
module.exports.components['views.elements.Spinner'] = views$elements$Spinner;
|
||||
views$elements$Spinner && (module.exports.components['views.elements.Spinner'] = views$elements$Spinner);
|
||||
import views$globals$GuestWarningBar from './components/views/globals/GuestWarningBar';
|
||||
module.exports.components['views.globals.GuestWarningBar'] = views$globals$GuestWarningBar;
|
||||
views$globals$GuestWarningBar && (module.exports.components['views.globals.GuestWarningBar'] = views$globals$GuestWarningBar);
|
||||
import views$globals$MatrixToolbar from './components/views/globals/MatrixToolbar';
|
||||
module.exports.components['views.globals.MatrixToolbar'] = views$globals$MatrixToolbar;
|
||||
views$globals$MatrixToolbar && (module.exports.components['views.globals.MatrixToolbar'] = views$globals$MatrixToolbar);
|
||||
import views$globals$NewVersionBar from './components/views/globals/NewVersionBar';
|
||||
module.exports.components['views.globals.NewVersionBar'] = views$globals$NewVersionBar;
|
||||
views$globals$NewVersionBar && (module.exports.components['views.globals.NewVersionBar'] = views$globals$NewVersionBar);
|
||||
import views$login$VectorCustomServerDialog from './components/views/login/VectorCustomServerDialog';
|
||||
module.exports.components['views.login.VectorCustomServerDialog'] = views$login$VectorCustomServerDialog;
|
||||
views$login$VectorCustomServerDialog && (module.exports.components['views.login.VectorCustomServerDialog'] = views$login$VectorCustomServerDialog);
|
||||
import views$login$VectorLoginFooter from './components/views/login/VectorLoginFooter';
|
||||
module.exports.components['views.login.VectorLoginFooter'] = views$login$VectorLoginFooter;
|
||||
views$login$VectorLoginFooter && (module.exports.components['views.login.VectorLoginFooter'] = views$login$VectorLoginFooter);
|
||||
import views$login$VectorLoginHeader from './components/views/login/VectorLoginHeader';
|
||||
module.exports.components['views.login.VectorLoginHeader'] = views$login$VectorLoginHeader;
|
||||
views$login$VectorLoginHeader && (module.exports.components['views.login.VectorLoginHeader'] = views$login$VectorLoginHeader);
|
||||
import views$messages$DateSeparator from './components/views/messages/DateSeparator';
|
||||
module.exports.components['views.messages.DateSeparator'] = views$messages$DateSeparator;
|
||||
views$messages$DateSeparator && (module.exports.components['views.messages.DateSeparator'] = views$messages$DateSeparator);
|
||||
import views$messages$MessageTimestamp from './components/views/messages/MessageTimestamp';
|
||||
module.exports.components['views.messages.MessageTimestamp'] = views$messages$MessageTimestamp;
|
||||
views$messages$MessageTimestamp && (module.exports.components['views.messages.MessageTimestamp'] = views$messages$MessageTimestamp);
|
||||
import views$rooms$DNDRoomTile from './components/views/rooms/DNDRoomTile';
|
||||
module.exports.components['views.rooms.DNDRoomTile'] = views$rooms$DNDRoomTile;
|
||||
views$rooms$DNDRoomTile && (module.exports.components['views.rooms.DNDRoomTile'] = views$rooms$DNDRoomTile);
|
||||
import views$rooms$RoomDropTarget from './components/views/rooms/RoomDropTarget';
|
||||
module.exports.components['views.rooms.RoomDropTarget'] = views$rooms$RoomDropTarget;
|
||||
views$rooms$RoomDropTarget && (module.exports.components['views.rooms.RoomDropTarget'] = views$rooms$RoomDropTarget);
|
||||
import views$rooms$RoomTooltip from './components/views/rooms/RoomTooltip';
|
||||
module.exports.components['views.rooms.RoomTooltip'] = views$rooms$RoomTooltip;
|
||||
views$rooms$RoomTooltip && (module.exports.components['views.rooms.RoomTooltip'] = views$rooms$RoomTooltip);
|
||||
import views$rooms$SearchBar from './components/views/rooms/SearchBar';
|
||||
module.exports.components['views.rooms.SearchBar'] = views$rooms$SearchBar;
|
||||
views$rooms$SearchBar && (module.exports.components['views.rooms.SearchBar'] = views$rooms$SearchBar);
|
||||
import views$settings$IntegrationsManager from './components/views/settings/IntegrationsManager';
|
||||
module.exports.components['views.settings.IntegrationsManager'] = views$settings$IntegrationsManager;
|
||||
views$settings$IntegrationsManager && (module.exports.components['views.settings.IntegrationsManager'] = views$settings$IntegrationsManager);
|
||||
import views$settings$Notifications from './components/views/settings/Notifications';
|
||||
module.exports.components['views.settings.Notifications'] = views$settings$Notifications;
|
||||
views$settings$Notifications && (module.exports.components['views.settings.Notifications'] = views$settings$Notifications);
|
||||
|
||||
@ -70,45 +70,21 @@ module.exports = React.createClass({
|
||||
},
|
||||
|
||||
onMemberListButtonClick: function() {
|
||||
if (this.props.collapsed || this.state.phase !== this.Phase.MemberList) {
|
||||
this.setState({ phase: this.Phase.MemberList });
|
||||
dis.dispatch({
|
||||
action: 'show_right_panel',
|
||||
});
|
||||
}
|
||||
else {
|
||||
dis.dispatch({
|
||||
action: 'hide_right_panel',
|
||||
});
|
||||
}
|
||||
this.setState({ phase: this.Phase.MemberList });
|
||||
},
|
||||
|
||||
onFileListButtonClick: function() {
|
||||
if (this.props.collapsed || this.state.phase !== this.Phase.FilePanel) {
|
||||
this.setState({ phase: this.Phase.FilePanel });
|
||||
dis.dispatch({
|
||||
action: 'show_right_panel',
|
||||
});
|
||||
}
|
||||
else {
|
||||
dis.dispatch({
|
||||
action: 'hide_right_panel',
|
||||
});
|
||||
}
|
||||
this.setState({ phase: this.Phase.FilePanel });
|
||||
},
|
||||
|
||||
onNotificationListButtonClick: function() {
|
||||
if (this.props.collapsed || this.state.phase !== this.Phase.NotificationPanel) {
|
||||
this.setState({ phase: this.Phase.NotificationPanel });
|
||||
dis.dispatch({
|
||||
action: 'show_right_panel',
|
||||
});
|
||||
}
|
||||
else {
|
||||
dis.dispatch({
|
||||
action: 'hide_right_panel',
|
||||
});
|
||||
}
|
||||
this.setState({ phase: this.Phase.NotificationPanel });
|
||||
},
|
||||
|
||||
onCollapseClick: function() {
|
||||
dis.dispatch({
|
||||
action: 'hide_right_panel',
|
||||
});
|
||||
},
|
||||
|
||||
onInviteButtonClick: function() {
|
||||
@ -242,6 +218,9 @@ module.exports = React.createClass({
|
||||
{ notificationsHighlight }
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
<div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" title="Hide panel" onClick={ this.onCollapseClick }>
|
||||
<TintableSvg src="img/minimise.svg" width="10" height="16"/>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
||||
@ -95,13 +95,13 @@ module.exports = React.createClass({
|
||||
if (this.props.collapsed) {
|
||||
toggleCollapse =
|
||||
<AccessibleButton className="mx_SearchBox_maximise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, true) }>
|
||||
<TintableSvg src="img/maximise.svg" width="10" height="16" alt="<"/>
|
||||
<TintableSvg src="img/maximise.svg" width="10" height="16" alt="Expand panel"/>
|
||||
</AccessibleButton>
|
||||
}
|
||||
else {
|
||||
toggleCollapse =
|
||||
<AccessibleButton className="mx_SearchBox_minimise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, false) }>
|
||||
<TintableSvg src="img/minimise.svg" width="10" height="16" alt="<"/>
|
||||
<TintableSvg src="img/minimise.svg" width="10" height="16" alt="Collapse panel"/>
|
||||
</AccessibleButton>
|
||||
}
|
||||
|
||||
|
||||
@ -120,22 +120,22 @@ module.exports = React.createClass({
|
||||
</div>
|
||||
<div className={ alertMeClasses } onClick={this._onClickAlertMe} >
|
||||
<img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
|
||||
<img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
|
||||
<img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
|
||||
All messages (loud)
|
||||
</div>
|
||||
<div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
|
||||
<img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
|
||||
<img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off.svg" width="16" height="12" />
|
||||
<img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" src="img/icon-context-mute-off.svg" width="16" height="12" />
|
||||
All messages
|
||||
</div>
|
||||
<div className={ mentionsClasses } onClick={this._onClickMentions} >
|
||||
<img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
|
||||
<img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
|
||||
<img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
|
||||
Mentions only
|
||||
</div>
|
||||
<div className={ muteNotifsClasses } onClick={this._onClickMute} >
|
||||
<img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
|
||||
<img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute.svg" width="16" height="12" />
|
||||
<img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" src="img/icon-context-mute.svg" width="16" height="12" />
|
||||
Mute
|
||||
</div>
|
||||
</div>
|
||||
|
||||
127
src/components/views/dialogs/BugReportDialog.js
Normal file
127
src/components/views/dialogs/BugReportDialog.js
Normal file
@ -0,0 +1,127 @@
|
||||
/*
|
||||
Copyright 2017 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import sdk from 'matrix-react-sdk';
|
||||
import rageshake from '../../../vector/rageshake';
|
||||
|
||||
export default class BugReportDialog extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
sendLogs: true,
|
||||
busy: false,
|
||||
err: null,
|
||||
text: "",
|
||||
};
|
||||
this._onSubmit = this._onSubmit.bind(this);
|
||||
this._onCancel = this._onCancel.bind(this);
|
||||
this._onTextChange = this._onTextChange.bind(this);
|
||||
this._onSendLogsChange = this._onSendLogsChange.bind(this);
|
||||
}
|
||||
|
||||
_onCancel(ev) {
|
||||
this.props.onFinished(false);
|
||||
}
|
||||
|
||||
_onSubmit(ev) {
|
||||
const sendLogs = this.state.sendLogs;
|
||||
const userText = this.state.text;
|
||||
if (!sendLogs && userText.trim().length === 0) {
|
||||
this.setState({
|
||||
err: "Please describe the bug and/or send logs.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setState({ busy: true, err: null });
|
||||
rageshake.sendBugReport(userText, sendLogs).then(() => {
|
||||
this.setState({ busy: false });
|
||||
this.props.onFinished(false);
|
||||
}, (err) => {
|
||||
this.setState({ busy: false, err: `Failed: ${err.message}` });
|
||||
});
|
||||
}
|
||||
|
||||
_onTextChange(ev) {
|
||||
this.setState({ text: ev.target.value });
|
||||
}
|
||||
|
||||
_onSendLogsChange(ev) {
|
||||
this.setState({ sendLogs: ev.target.checked });
|
||||
}
|
||||
|
||||
render() {
|
||||
const Loader = sdk.getComponent("elements.Spinner");
|
||||
|
||||
let error = null;
|
||||
if (this.state.err) {
|
||||
error = <div className="error">
|
||||
{this.state.err}
|
||||
</div>;
|
||||
}
|
||||
|
||||
const okLabel = this.state.busy ? <Loader /> : 'Send';
|
||||
|
||||
let cancelButton = null;
|
||||
if (!this.state.busy) {
|
||||
cancelButton = <button onClick={this._onCancel}>
|
||||
Cancel
|
||||
</button>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx_BugReportDialog">
|
||||
<div className="mx_Dialog_title">
|
||||
Report a bug
|
||||
</div>
|
||||
<div className="mx_Dialog_content">
|
||||
<p>Please describe the bug. What did you do?
|
||||
What did you expect to happen?
|
||||
What actually happened?</p>
|
||||
<textarea
|
||||
className="mx_BugReportDialog_input"
|
||||
rows={5}
|
||||
onChange={this._onTextChange}
|
||||
value={this.state.text}
|
||||
placeholder="Describe your problem here."
|
||||
/>
|
||||
<p>In order to diagnose problems, logs from this client will be sent with
|
||||
this bug report.
|
||||
If you would prefer to only send the text above, please untick:</p>
|
||||
<input type="checkbox" checked={this.state.sendLogs}
|
||||
onChange={this._onSendLogsChange} id="mx_BugReportDialog_logs"/>
|
||||
<label htmlFor="mx_BugReportDialog_logs">Send logs</label>
|
||||
{error}
|
||||
</div>
|
||||
<div className="mx_Dialog_buttons">
|
||||
<button
|
||||
className="mx_Dialog_primary danger"
|
||||
onClick={this._onSubmit}
|
||||
autoFocus={true}
|
||||
>
|
||||
{okLabel}
|
||||
</button>
|
||||
|
||||
{cancelButton}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
BugReportDialog.propTypes = {
|
||||
onFinished: React.PropTypes.func.isRequired,
|
||||
};
|
||||
@ -181,7 +181,10 @@ export default class NetworkDropdown extends React.Component {
|
||||
span_class = 'mx_NetworkDropdown_menu_network';
|
||||
} else {
|
||||
key = server + '_inst_' + instance.instance_id;
|
||||
icon = <img src={instance.icon || DEFAULT_ICON_URL} />;
|
||||
const imgUrl = instance.icon ?
|
||||
MatrixClientPeg.get().mxcUrlToHttp(instance.icon, 25, 25, 'crop', true) :
|
||||
DEFAULT_ICON_URL;
|
||||
icon = <img src={imgUrl} />;
|
||||
name = instance.desc;
|
||||
span_class = 'mx_NetworkDropdown_menu_network';
|
||||
}
|
||||
|
||||
@ -23,11 +23,14 @@ module.exports = React.createClass({
|
||||
statics: {
|
||||
replaces: 'LoginHeader',
|
||||
},
|
||||
propTypes: {
|
||||
icon: React.PropTypes.string,
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_Login_logo">
|
||||
<img src="img/logo.png" width="195" height="195" alt="Riot"/>
|
||||
<img src={this.props.icon || "img/logo.png"} alt="Riot"/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -29,7 +29,8 @@ body {
|
||||
Arial here. */
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
font-size: 15px;
|
||||
color: #454545;
|
||||
background-color: $primary-bg-color;
|
||||
color: $primary-fg-color;
|
||||
border: 0px;
|
||||
margin: 0px;
|
||||
/* This should render the fonts the same accross browsers */
|
||||
@ -41,7 +42,7 @@ div.error {
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
margin-top: 16px;
|
||||
@ -51,15 +52,20 @@ h2 {
|
||||
a:hover,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
input[type=text], input[type=password], textarea {
|
||||
background-color: transparent;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
input[type=text].error, input[type=password].error {
|
||||
border: 1px solid red;
|
||||
border: 1px solid $warning-color;
|
||||
}
|
||||
|
||||
input[type=text]:focus, textarea:focus {
|
||||
border: 1px solid #76CFA6;
|
||||
border: 1px solid $accent-color;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -77,10 +83,7 @@ textarea {
|
||||
/* applied to side-panels and messagepanel when in RoomSettings */
|
||||
.mx_fadable {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.2s ease-in-out;
|
||||
-moz-transition: opacity 0.2s ease-in-out;
|
||||
-ms-transition: opacity 0.2s ease-in-out;
|
||||
-o-transition: opacity 0.2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
|
||||
@ -122,14 +125,8 @@ textarea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@ -148,8 +145,8 @@ textarea {
|
||||
}
|
||||
|
||||
.mx_Dialog {
|
||||
background-color: #fff;
|
||||
color: #747474;
|
||||
background-color: $primary-bg-color;
|
||||
color: $light-fg-color;
|
||||
z-index: 4010;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
@ -168,13 +165,13 @@ textarea {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #e9e9e9;
|
||||
background-color: $dialog-background-bg-color;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mx_Dialog_lightbox .mx_Dialog_background {
|
||||
opacity: 0.85;
|
||||
background-color: #000;
|
||||
background-color: $lightbox-background-bg-color;
|
||||
}
|
||||
|
||||
.mx_Dialog_lightbox .mx_Dialog {
|
||||
@ -190,7 +187,7 @@ textarea {
|
||||
.mx_Dialog_content {
|
||||
margin: 24px 58px 68px 0;
|
||||
font-size: 14px;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
@ -202,7 +199,7 @@ textarea {
|
||||
border: 0px;
|
||||
height: 36px;
|
||||
border-radius: 40px;
|
||||
border: solid 1px #76cfa6;
|
||||
border: solid 1px $accent-color;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
@ -212,26 +209,26 @@ textarea {
|
||||
padding-right: 1.5em;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
color: #76cfa6;
|
||||
background-color: #fff;
|
||||
color: $accent-color;
|
||||
background-color: $primary-bg-color;
|
||||
|
||||
/* align images in buttons (eg spinners) */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
|
||||
color: #fff;
|
||||
background-color: #76cfa6;
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
|
||||
background-color: #ff0064;
|
||||
border: solid 1px #ff0064;
|
||||
background-color: $warning-color;
|
||||
border: solid 1px $warning-color;
|
||||
}
|
||||
|
||||
.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
|
||||
background-color: #777777;
|
||||
border: solid 1px #777777;
|
||||
background-color: $light-fg-color;
|
||||
border: solid 1px $light-fg-color;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@ -241,11 +238,11 @@ textarea {
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
line-height: 1.4;
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_Dialog_title.danger {
|
||||
color: #ff0064;
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_TextInputDialog_label {
|
||||
@ -256,10 +253,10 @@ textarea {
|
||||
.mx_TextInputDialog_input {
|
||||
font-size: 15px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 9px;
|
||||
color: #454545;
|
||||
background-color: #fff;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_emojione {
|
||||
@ -268,19 +265,19 @@ textarea {
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: #76CFA6;
|
||||
color: white;
|
||||
background-color: $accent-color;
|
||||
color: $selection-fg-color;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #76CFA6;
|
||||
color: white;
|
||||
background-color: $accent-color;
|
||||
color: $selection-fg-color;
|
||||
}
|
||||
|
||||
/** green button with rounded corners */
|
||||
.mx_textButton {
|
||||
color: #fff;
|
||||
background-color: #76cfa6;
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
border-radius: 17px;
|
||||
text-align: center;
|
||||
padding-left: 1em;
|
||||
75
src/skins/vector/css/_components.scss
Normal file
75
src/skins/vector/css/_components.scss
Normal file
@ -0,0 +1,75 @@
|
||||
// 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/_BugReportDialog.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/dialogs/_UnknownDeviceDialog.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 "./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";
|
||||
@ -30,10 +30,10 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_ContextualMenu {
|
||||
border: solid 1px rgba(187, 187, 187, 0.5);
|
||||
border: solid 1px $menu-border-color;
|
||||
border-radius: 4px;
|
||||
background-color: #f6f6f6;
|
||||
color: #4a4a4a;
|
||||
background-color: $menu-bg-color;
|
||||
color: $primary-fg-color;
|
||||
position: absolute;
|
||||
padding: 6px;
|
||||
font-size: 14px;
|
||||
@ -51,7 +51,7 @@ limitations under the License.
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 8px solid transparent;
|
||||
border-left: 8px solid rgba(187, 187, 187, 0.5);
|
||||
border-left: 8px solid $menu-border-color;
|
||||
border-bottom: 8px solid transparent;
|
||||
}
|
||||
|
||||
@ -60,7 +60,7 @@ limitations under the License.
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 7px solid transparent;
|
||||
border-left: 7px solid #f6f6f6;
|
||||
border-left: 7px solid $menu-bg-color;
|
||||
border-bottom: 7px solid transparent;
|
||||
position:absolute;
|
||||
top: -7px;
|
||||
@ -78,7 +78,7 @@ limitations under the License.
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 8px solid transparent;
|
||||
border-right: 8px solid rgba(187, 187, 187, 0.5);
|
||||
border-right: 8px solid $menu-border-color;
|
||||
border-bottom: 8px solid transparent;
|
||||
}
|
||||
|
||||
@ -87,7 +87,7 @@ limitations under the License.
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 7px solid transparent;
|
||||
border-right: 7px solid #f6f6f6;
|
||||
border-right: 7px solid $menu-bg-color;
|
||||
border-bottom: 7px solid transparent;
|
||||
position:absolute;
|
||||
top: -7px;
|
||||
@ -18,13 +18,13 @@ limitations under the License.
|
||||
width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_CreateRoom input,
|
||||
.mx_CreateRoom textarea {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #c7c7c7;
|
||||
border: 1px solid $strong-input-border-color;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
padding: 9px;
|
||||
@ -15,13 +15,8 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_FilePanel {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
|
||||
-webkit-flex: 1 1 0;
|
||||
flex: 1 1 0;
|
||||
|
||||
width: 100%;
|
||||
@ -58,12 +53,12 @@ limitations under the License.
|
||||
.mx_FilePanel .mx_EventTile .mx_MImageBody_download {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
color: #acacac;
|
||||
color: $event-timestamp-color;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
|
||||
flex: 1 1 auto;
|
||||
color: #747474;
|
||||
color: $light-fg-color;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
|
||||
@ -90,7 +85,7 @@ limitations under the License.
|
||||
padding: 0px;
|
||||
font-size: 11px;
|
||||
opacity: 1.0;
|
||||
color: #acacac;
|
||||
color: $event-timestamp-color;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
|
||||
@ -100,7 +95,7 @@ limitations under the License.
|
||||
position: initial;
|
||||
font-size: 11px;
|
||||
opacity: 1.0;
|
||||
color: #acacac;
|
||||
color: $event-timestamp-color;
|
||||
}
|
||||
|
||||
/* Overrides for the wrappers around the body tile */
|
||||
@ -111,7 +106,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
|
||||
@ -27,34 +27,21 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MatrixChat_wrapper {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.mx_GuestWarningBar {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
height: 40px;
|
||||
@ -68,52 +55,32 @@ limitations under the License.
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_MatrixChat .mx_LeftPanel {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
background-color: #eaf5f0;
|
||||
background-color: $secondary-accent-color;
|
||||
|
||||
-webkit-flex: 0 0 235px;
|
||||
flex: 0 0 235px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat .mx_LeftPanel.collapsed {
|
||||
-webkit-flex: 0 0 60px;
|
||||
flex: 0 0 60px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat .mx_MatrixChat_middlePanel {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
|
||||
padding-left: 20px;
|
||||
padding-right: 22px;
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
|
||||
/* Experimental fix for https://github.com/vector-im/vector-web/issues/947
|
||||
@ -132,25 +99,15 @@ limitations under the License.
|
||||
* point, but instead we fudge it and make the middlePanel
|
||||
* flex itself.
|
||||
*/
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_MatrixChat .mx_RightPanel {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
-moz-box-ordinal-group: 3;
|
||||
-ms-flex-order: 3;
|
||||
-webkit-order: 3;
|
||||
order: 3;
|
||||
|
||||
-webkit-flex: 0 0 235px;
|
||||
flex: 0 0 235px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat .mx_RightPanel.collapsed {
|
||||
-webkit-flex: 0 0 122px;
|
||||
flex: 0 0 122px;
|
||||
}
|
||||
@ -15,13 +15,8 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_NotificationPanel {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
|
||||
-webkit-flex: 1 1 0;
|
||||
flex: 1 1 0;
|
||||
|
||||
width: 100%;
|
||||
@ -51,7 +46,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile_roomName a {
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile_avatar {
|
||||
@ -61,8 +56,7 @@ limitations under the License.
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
|
||||
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
|
||||
color: #000;
|
||||
opacity: 0.3;
|
||||
color: $primary-fg-color;
|
||||
font-size: 12px;
|
||||
display: inline;
|
||||
padding-left: 0px;
|
||||
@ -94,7 +88,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
|
||||
@ -21,10 +21,10 @@ limitations under the License.
|
||||
|
||||
/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
|
||||
.mx_RoomStatusBar_indicator {
|
||||
padding-left: 18px;
|
||||
padding-left: 17px;
|
||||
padding-right: 12px;
|
||||
margin-left: -73px;
|
||||
margin-top: 13px;
|
||||
margin-top: 8px;
|
||||
float: left;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
@ -36,16 +36,16 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_placeholderIndicator span {
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
opacity: 0.5;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
/*
|
||||
/*
|
||||
animation-duration: 1s;
|
||||
animation-name: bounce;
|
||||
animation-direction: alternate;
|
||||
animation-iteration-count: infinite;
|
||||
*/
|
||||
*/
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
|
||||
@ -70,13 +70,43 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_typingIndicatorAvatars {
|
||||
width: 52px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
|
||||
margin-right: -12px;
|
||||
border: 1px solid $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
|
||||
padding-left: 1px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_typingIndicatorRemaining {
|
||||
display: inline-block;
|
||||
color: #acacac;
|
||||
background-color: #ddd;
|
||||
border: 1px solid $primary-bg-color;
|
||||
border-radius: 40px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 0.8em;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_scrollDownIndicator {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_unreadMessagesBar {
|
||||
padding-top: 10px;
|
||||
color: #ff0064;
|
||||
color: $warning-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -93,29 +123,29 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_connectionLostBar_title {
|
||||
color: #ff0064;
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_connectionLostBar_desc {
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
font-size: 13px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_resend_link {
|
||||
color: #454545 ! important;
|
||||
color: $primary-fg-color ! important;
|
||||
text-decoration: underline ! important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_tabCompleteBar {
|
||||
padding-top: 10px;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_typingBar {
|
||||
padding-top: 10px;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
opacity: 0.5;
|
||||
overflow-y: hidden;
|
||||
display: block;
|
||||
@ -123,19 +153,16 @@ limitations under the License.
|
||||
|
||||
.mx_RoomStatusBar_tabCompleteWrapper {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar {
|
||||
flex: 1 1 auto;
|
||||
-webkit-flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_tabCompleteEol {
|
||||
flex: 0 0 auto;
|
||||
-webkit-flex: 0 0 auto;
|
||||
color: #76CFA6;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_tabCompleteEol object {
|
||||
@ -18,25 +18,15 @@ limitations under the License.
|
||||
word-wrap: break-word;
|
||||
position: relative;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_RoomView .mx_RoomHeader {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
-webkit-flex: 0 0 70px;
|
||||
flex: 0 0 70px;
|
||||
}
|
||||
|
||||
@ -53,14 +43,10 @@ limitations under the License.
|
||||
padding-right: 12px;
|
||||
margin-left: -12px;
|
||||
|
||||
-webkit-border-top-left-radius: 10px;
|
||||
-webkit-border-top-right-radius: 10px;
|
||||
-moz-border-radius-topleft: 10px;
|
||||
-moz-border-radius-topright: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
background-color: $droptarget-bg-color;
|
||||
border: 2px #e1dddd solid;
|
||||
border-bottom: none;
|
||||
position: absolute;
|
||||
@ -77,10 +63,6 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomView_auxPanel {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
|
||||
min-width: 0px;
|
||||
@ -89,28 +71,18 @@ limitations under the License.
|
||||
margin: auto;
|
||||
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_RoomView_topUnreadMessagesBar {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
-moz-box-ordinal-group: 3;
|
||||
-ms-flex-order: 3;
|
||||
-webkit-order: 3;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.mx_RoomView_messagePanel {
|
||||
-webkit-box-ordinal-group: 4;
|
||||
-moz-box-ordinal-group: 4;
|
||||
-ms-flex-order: 4;
|
||||
-webkit-order: 4;
|
||||
order: 4;
|
||||
|
||||
-webkit-flex: 1 1 0;
|
||||
flex: 1 1 0;
|
||||
|
||||
width: 100%;
|
||||
@ -124,22 +96,25 @@ limitations under the License.
|
||||
|
||||
min-height: 100%;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
|
||||
justify-content: flex-end;
|
||||
-webkit-justify-content: flex-end;
|
||||
}
|
||||
|
||||
.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
|
||||
justify-content: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
}
|
||||
|
||||
.mx_RoomView_empty {
|
||||
flex: 1 1 auto;
|
||||
font-size: 13px;
|
||||
padding-left: 3em;
|
||||
padding-right: 3em;
|
||||
margin-right: 20px;
|
||||
margin-top: 33%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mx_RoomView_MessageList {
|
||||
@ -158,14 +133,10 @@ limitations under the License.
|
||||
margin-bottom: 8px;
|
||||
margin-left: 63px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
}
|
||||
|
||||
.mx_RoomView_invitePrompt {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
|
||||
min-width: 0px;
|
||||
@ -185,23 +156,32 @@ li.mx_RoomView_myReadMarker_container {
|
||||
}
|
||||
|
||||
hr.mx_RoomView_myReadMarker {
|
||||
border-top: solid 1px #76cfa6;
|
||||
border-bottom: solid 1px #76cfa6;
|
||||
border-top: solid 1px $accent-color;
|
||||
border-bottom: solid 1px $accent-color;
|
||||
margin-top: 0px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.mx_RoomView_statusArea {
|
||||
-webkit-box-ordinal-group: 5;
|
||||
-moz-box-ordinal-group: 5;
|
||||
-ms-flex-order: 5;
|
||||
-webkit-order: 5;
|
||||
order: 5;
|
||||
|
||||
width: 100%;
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
|
||||
max-height: 0px;
|
||||
background-color: $primary-bg-color;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
|
||||
-webkit-transition: all .2s ease-out;
|
||||
-moz-transition: all .2s ease-out;
|
||||
-ms-transition: all .2s ease-out;
|
||||
-o-transition: all .2s ease-out;
|
||||
}
|
||||
|
||||
.mx_RoomView_statusArea_expanded {
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
.mx_RoomView_statusAreaBox {
|
||||
@ -212,16 +192,16 @@ hr.mx_RoomView_myReadMarker {
|
||||
|
||||
.mx_RoomView_statusAreaBox_line {
|
||||
margin-left: 65px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
|
||||
color: #fff;
|
||||
color: $accent-fg-color;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
@ -234,8 +214,8 @@ hr.mx_RoomView_myReadMarker {
|
||||
}
|
||||
|
||||
.mx_RoomView_inCall .mx_RoomView_statusAreaBox {
|
||||
background-color: #76CFA6;
|
||||
color: #fff;
|
||||
background-color: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -257,14 +237,9 @@ hr.mx_RoomView_myReadMarker {
|
||||
}
|
||||
|
||||
.mx_RoomView .mx_MessageComposer {
|
||||
-webkit-box-ordinal-group: 6;
|
||||
-moz-box-ordinal-group: 6;
|
||||
-ms-flex-order: 6;
|
||||
-webkit-order: 6;
|
||||
order: 6;
|
||||
|
||||
width: 100%;
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 2px;
|
||||
}
|
||||
@ -272,13 +247,13 @@ hr.mx_RoomView_myReadMarker {
|
||||
.mx_RoomView_ongoingConfCallNotification {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: #ff0064;
|
||||
color: #fff;
|
||||
background-color: $warning-color;
|
||||
color: $accent-fg-color;
|
||||
font-weight: bold;
|
||||
padding: 6px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_RoomView_ongoingConfCallNotification a {
|
||||
color: #fff ! important;
|
||||
color: $accent-fg-color ! important;
|
||||
}
|
||||
@ -22,7 +22,6 @@ limitations under the License.
|
||||
padding-bottom: 22px;
|
||||
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
}
|
||||
|
||||
.mx_SearchBox_searchButton {
|
||||
@ -38,7 +37,6 @@ limitations under the License.
|
||||
|
||||
.mx_SearchBox_search {
|
||||
flex: 1 1 auto;
|
||||
-webkit-flex: 1 1 auto;
|
||||
width: 0px;
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
font-size: 12px;
|
||||
@ -46,7 +44,6 @@ limitations under the License.
|
||||
height: 24px;
|
||||
border: 0px ! important;
|
||||
/* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */
|
||||
background-color: transparent;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_UploadBar_uploadProgressInner {
|
||||
background-color: #76cfa6;
|
||||
background-color: $accent-color;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@ limitations under the License.
|
||||
margin-top: 5px;
|
||||
margin-left: 65px;
|
||||
opacity: 0.5;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_UploadBar_uploadIcon {
|
||||
@ -57,5 +57,5 @@ limitations under the License.
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
margin-right: 30px;
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
}
|
||||
@ -20,34 +20,19 @@ limitations under the License.
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_UserSettings .mx_RoomHeader {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
-webkit-flex: 0 0 70px;
|
||||
flex: 0 0 70px;
|
||||
}
|
||||
|
||||
.mx_UserSettings_body {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
|
||||
-webkit-flex: 1 1 0;
|
||||
flex: 1 1 0;
|
||||
|
||||
margin-top: -20px;
|
||||
@ -58,7 +43,7 @@ limitations under the License.
|
||||
clear: both;
|
||||
margin-left: 63px;
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
color: $h3-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-top: 26px;
|
||||
@ -84,8 +69,8 @@ limitations under the License.
|
||||
border-radius: 36px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: #76cfa6;
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
padding: 7px;
|
||||
@ -95,7 +80,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_UserSettings_button.danger {
|
||||
background-color: #ff0064;
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_UserSettings_section {
|
||||
@ -166,10 +151,10 @@ limitations under the License.
|
||||
{
|
||||
display: inline-block;
|
||||
border: 0px;
|
||||
border-bottom: 1px solid rgba(151, 151, 151, 0.5);
|
||||
border-bottom: 1px solid $input-underline-color;
|
||||
padding: 0px;
|
||||
width: 240px;
|
||||
color: rgba(74, 74, 74, 0.9);
|
||||
color: $input-fg-color;
|
||||
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -18,21 +18,15 @@ limitations under the License.
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.mx_Login h2 {
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
font-weight: 300;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 20px;
|
||||
@ -48,12 +42,24 @@ limitations under the License.
|
||||
|
||||
.mx_Login_logo {
|
||||
text-align: center;
|
||||
height: 195px;
|
||||
}
|
||||
|
||||
.mx_Login_logo img {
|
||||
max-height: 100%
|
||||
}
|
||||
|
||||
.mx_Login_support {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
margin-top: 0px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.mx_Login_field {
|
||||
width: 100%;
|
||||
width: 280px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #c7c7c7;
|
||||
border: 1px solid $strong-input-border-color;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
padding: 9px;
|
||||
@ -75,9 +81,9 @@ limitations under the License.
|
||||
border-radius: 40px;
|
||||
height: 40px;
|
||||
border: 0px;
|
||||
background-color: #76cfa6;
|
||||
background-color: $accent-color;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
color: $accent-fg-color;
|
||||
}
|
||||
|
||||
.mx_Login_label {
|
||||
@ -99,7 +105,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Login_create:link {
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_Login_links {
|
||||
@ -112,7 +118,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Login_links a:link {
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_Login_prompt {
|
||||
@ -127,7 +133,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Login_forgot:link {
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_Login_loader {
|
||||
@ -147,7 +153,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Login_error {
|
||||
color: #ff2020;
|
||||
color: $warning-color;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
/*
|
||||
@ -21,7 +21,7 @@ limitations under the License.
|
||||
.mx_BaseAvatar_initial {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
color: $avatar-initial-color;
|
||||
text-align: center;
|
||||
speak: none;
|
||||
pointer-events: none;
|
||||
@ -31,4 +31,5 @@ limitations under the License.
|
||||
.mx_BaseAvatar_image {
|
||||
border-radius: 40px;
|
||||
vertical-align: top;
|
||||
background-color: #fff;
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
/*
|
||||
Copyright 2017 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_BugReportDialog_input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -36,7 +36,7 @@ limitations under the License.
|
||||
|
||||
.mx_ChatInviteDialog_inputContainer {
|
||||
border-radius: 3px;
|
||||
border: solid 1px #f0f0f0;
|
||||
border: solid 1px $input-border-color;
|
||||
line-height: 36px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
@ -49,7 +49,7 @@ limitations under the License.
|
||||
|
||||
.mx_ChatInviteDialog_error {
|
||||
position: absolute;
|
||||
color: #ff0064;
|
||||
color: $warning-color;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
@ -63,3 +63,9 @@ limitations under the License.
|
||||
.mx_ChatInviteDialog_cancel object {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_ChatInviteDialog_addressSelectHeader {
|
||||
font-weight: bold;
|
||||
line-height: 150%;
|
||||
text-indent: 4px;
|
||||
}
|
||||
@ -24,7 +24,7 @@ limitations under the License.
|
||||
border: 0px;
|
||||
height: 36px;
|
||||
border-radius: 40px;
|
||||
border: solid 1px #76cfa6;
|
||||
border: solid 1px $accent-color;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
@ -34,6 +34,6 @@ limitations under the License.
|
||||
padding-right: 1.5em;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
color: #76cfa6;
|
||||
background-color: #fff;
|
||||
color: $accent-color;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
@ -16,9 +16,9 @@ limitations under the License.
|
||||
|
||||
.mx_SetDisplayNameDialog_input {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 9px;
|
||||
color: #454545;
|
||||
background-color: #fff;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
font-size: 15px;
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
/*
|
||||
Copyright 2016 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
// CSS voodoo to support a gemini-scrollbar for the contents of the dialog
|
||||
.mx_Dialog_unknownDevice .mx_Dialog {
|
||||
// ideally we'd shrink the height to fit when needed, but in practice this
|
||||
// is a pain in the ass. plus might as well make the dialog big given how
|
||||
// important it is.
|
||||
height: 100%;
|
||||
|
||||
// position the gemini scrollbar nicely
|
||||
padding-right: 58px;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog .mx_Dialog_content {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog .mx_MemberDeviceInfo {
|
||||
float: right;
|
||||
clear: both;
|
||||
padding: 0px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog .mx_MemberDeviceInfo_textButton {
|
||||
border: 0px;
|
||||
height: 24px;
|
||||
border-radius: 40px;
|
||||
border: solid 1px $accent-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
margin-left: 0px;
|
||||
margin-right: 8px;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
width: 85px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
color: $accent-color;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog .mx_UnknownDeviceDialog_deviceList li {
|
||||
height: 40px;
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
}
|
||||
@ -16,13 +16,13 @@ limitations under the License.
|
||||
|
||||
.mx_AddressSelector {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
width: 485px;
|
||||
max-height: 116px;
|
||||
overflow-y: auto;
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
border: solid 1px #76cfa6;
|
||||
background-color: $primary-bg-color;
|
||||
border: solid 1px $accent-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -31,15 +31,15 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_AddressSelector_addressListElement .mx_AddressTile {
|
||||
background-color: #fff;
|
||||
border: solid 1px #fff;
|
||||
background-color: $primary-bg-color;
|
||||
border: solid 1px $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
|
||||
background-color: #eaf5f0; /* selected colour */
|
||||
background-color: $selected-color;
|
||||
}
|
||||
|
||||
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
|
||||
background-color: #eaf5f0; /* selected colour */
|
||||
border: solid 1px #eaf5f0; /* selected colour */
|
||||
background-color: $selected-color;
|
||||
border: solid 1px $selected-color;
|
||||
}
|
||||
@ -18,9 +18,9 @@ limitations under the License.
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(74, 73, 74, 0.1);
|
||||
border: solid 1px #f0f0f0;
|
||||
border: solid 1px $input-border-color;
|
||||
line-height: 26px;
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
margin-right: 4px;
|
||||
@ -28,8 +28,8 @@ limitations under the License.
|
||||
|
||||
.mx_AddressTile.mx_AddressTile_error {
|
||||
background-color: rgba(255, 0, 100, 0.1);
|
||||
color: #ff0064;
|
||||
border-color: #ff0064;
|
||||
color: $warning-color;
|
||||
border-color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_AddressTile_network {
|
||||
@ -106,7 +106,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_AddressTile_email.mx_AddressTile_justified {
|
||||
width: 380px; /* name + id width */
|
||||
width: 200px; /* same as id width */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@ -17,19 +17,17 @@ limitations under the License.
|
||||
.mx_DirectorySearchBox {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #c7c7c7;
|
||||
border: 1px solid $strong-input-border-color;
|
||||
}
|
||||
|
||||
.mx_DirectorySearchBox_container {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
padding-left: 9px;
|
||||
padding-right: 9px;
|
||||
}
|
||||
|
||||
.mx_DirectorySearchBox_input {
|
||||
flex-grow: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font-weight: 300;
|
||||
@ -44,9 +42,9 @@ input[type=text].mx_DirectorySearchBox_input:focus {
|
||||
padding: 3px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background-color: #efefef;
|
||||
background-color: $plinth-bg-color;
|
||||
border-radius: 3px;
|
||||
background-image: url('img/icon-return.svg');
|
||||
background-image: url('../../img/icon-return.svg');
|
||||
background-position: 8px 70%;
|
||||
background-repeat: no-repeat;
|
||||
text-indent: 18px;
|
||||
@ -63,7 +61,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
|
||||
.mx_DirectorySearchBox_clear {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background: url('img/icon_context_delete.svg');
|
||||
background: url('../../img/icon_context_delete.svg');
|
||||
background-position: 0 50%;
|
||||
background-repeat: no-repeat;
|
||||
width: 15px;
|
||||
@ -31,6 +31,6 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MemberEventListSummary_toggle {
|
||||
color:#76cfa6;
|
||||
color:$accent-color;
|
||||
cursor:pointer;
|
||||
}
|
||||
@ -16,10 +16,10 @@ limitations under the License.
|
||||
|
||||
.mx_ProgressBar {
|
||||
height: 5px;
|
||||
border: 1px solid black;
|
||||
border: 1px solid $progressbar-color;
|
||||
}
|
||||
|
||||
.mx_ProgressBar_fill {
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
background-color: $progressbar-color;
|
||||
}
|
||||
@ -1,14 +1,14 @@
|
||||
.mx_UserPill {
|
||||
color: white;
|
||||
background-color: #76cfa6;
|
||||
background-color: $accent-color;
|
||||
padding: 2px 8px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.mx_RoomPill {
|
||||
background-color: white;
|
||||
color: #76cfa6;
|
||||
border: 1px solid #76cfa6;
|
||||
color: $accent-color;
|
||||
border: 1px solid $accent-color;
|
||||
padding: 2px 8px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
@ -27,5 +27,5 @@ limitations under the License.
|
||||
opacity: 0.8;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
@ -22,18 +22,18 @@ limitations under the License.
|
||||
.mx_MImageBody_thumbnail {
|
||||
max-width: 100%;
|
||||
/*
|
||||
background-color: #fff;
|
||||
border: 2px solid #fff;
|
||||
background-color: $primary-bg-color;
|
||||
border: 2px solid $primary-bg-color;
|
||||
border-radius: 1px;
|
||||
*/
|
||||
}
|
||||
|
||||
.mx_MImageBody_download {
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_MImageBody_download a {
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
border: 1px solid #e5e5e5;
|
||||
background: white;
|
||||
border: 1px solid $primary-hairline-color;
|
||||
background: $primary-bg-color;
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
max-height: 50vh;
|
||||
@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
.mx_Autocomplete_ProviderSection {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_container_pill {
|
||||
@ -28,7 +28,7 @@
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_block * {
|
||||
@ -42,7 +42,7 @@
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_pill * {
|
||||
@ -57,13 +57,13 @@
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion.selected {
|
||||
background: #f6f6f6;
|
||||
background: $menu-bg-color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_provider_name {
|
||||
margin: 12px;
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
font-weight: 400;
|
||||
opacity: 0.4;
|
||||
}
|
||||
@ -17,7 +17,7 @@ limitations under the License.
|
||||
.mx_EntityTile {
|
||||
display: table-row;
|
||||
position: relative;
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -77,12 +77,12 @@ limitations under the License.
|
||||
|
||||
.mx_EntityTile_ellipsis .mx_EntityTile_name {
|
||||
font-style: italic;
|
||||
font-color: #454545;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
|
||||
font-style: italic;
|
||||
font-color: #454545;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_EntityTile_unavailable .mx_EntityTile_avatar,
|
||||
@ -44,7 +44,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_EventTile .mx_SenderProfile {
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
opacity: 0.5;
|
||||
font-size: 14px;
|
||||
display: block; /* anti-zalgo, with overflow hidden */
|
||||
@ -61,7 +61,7 @@ limitations under the License.
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
white-space: nowrap;
|
||||
color: #acacac;
|
||||
color: $event-timestamp-color;
|
||||
font-size: 11px;
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
@ -93,20 +93,20 @@ limitations under the License.
|
||||
* TODO: ultimately we probably want some transition on here.
|
||||
*/
|
||||
.mx_EventTile_selected .mx_EventTile_line {
|
||||
border-left: #76cfa6 5px solid;
|
||||
border-left: $accent-color 5px solid;
|
||||
padding-left: 60px;
|
||||
background-color: #f7f7f7;
|
||||
background-color: $event-selected-color;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_EventTile_line,
|
||||
.mx_EventTile.menu .mx_EventTile_line
|
||||
{
|
||||
background-color: #f7f7f7;
|
||||
background-color: $event-selected-color;
|
||||
}
|
||||
|
||||
.mx_EventTile_searchHighlight {
|
||||
background-color: #76cfa6;
|
||||
color: #fff;
|
||||
background-color: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
border-radius: 5px;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
@ -114,26 +114,26 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_EventTile_searchHighlight a {
|
||||
background-color: #76cfa6;
|
||||
color: #fff;
|
||||
background-color: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
}
|
||||
|
||||
.mx_EventTile_encrypting {
|
||||
color: #abddbc ! important;
|
||||
color: $event-encrypting-color ! important;
|
||||
}
|
||||
|
||||
.mx_EventTile_sending {
|
||||
color: #ddd;
|
||||
color: $event-sending-color;
|
||||
}
|
||||
|
||||
.mx_EventTile_notSent {
|
||||
color: #f44;
|
||||
color: $event-notsent-color;
|
||||
}
|
||||
|
||||
.mx_EventTile_highlight,
|
||||
.mx_EventTile_highlight .markdown-body
|
||||
{
|
||||
color: #FF0064;
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_EventTile_contextual {
|
||||
@ -146,7 +146,12 @@ limitations under the License.
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
height: 1px; /* Hack to stop the height of this pushing the messages apart. Replaces marigin-top: -6px. This interacts better with a read marker being in between. Content overflows. */
|
||||
|
||||
/* Hack to stop the height of this pushing the messages apart.
|
||||
Replaces margin-top: -6px. This interacts better with a read
|
||||
marker being in between. Content overflows. */
|
||||
height: 1px;
|
||||
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@ -172,6 +177,9 @@ limitations under the License.
|
||||
cursor: pointer;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
background-image: url($edit-button-url);
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_EventTile_editButton,
|
||||
@ -204,7 +212,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_EventTile_readAvatarRemainder {
|
||||
color: #acacac;
|
||||
color: $event-timestamp-color;
|
||||
font-size: 11px;
|
||||
position: absolute;
|
||||
}
|
||||
@ -244,10 +252,10 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
|
||||
border-left: #76cfa5 5px solid;
|
||||
border-left: $e2e-verified-color 5px solid;
|
||||
}
|
||||
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
|
||||
border-left: #e8bf37 5px solid;
|
||||
border-left: $e2e-unverified-color 5px solid;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
|
||||
@ -286,6 +294,10 @@ limitations under the License.
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body code {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body h1,
|
||||
.mx_EventTile_content .markdown-body h2,
|
||||
.mx_EventTile_content .markdown-body h3,
|
||||
@ -297,7 +309,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body a {
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body .hljs {
|
||||
@ -18,14 +18,12 @@ limitations under the License.
|
||||
margin-top: 15px;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 15px;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
border-left: 4px solid #ddd;
|
||||
color: #888;
|
||||
border-left: 4px solid $preview-widget-bar-color;
|
||||
color: $preview-widget-fg-color;
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_image {
|
||||
-webkit-flex: 0 0 100px;
|
||||
flex: 0 0 100px;
|
||||
margin-left: 15px;
|
||||
text-align: center;
|
||||
@ -34,7 +32,6 @@ limitations under the License.
|
||||
|
||||
.mx_LinkPreviewWidget_caption {
|
||||
margin-left: 15px;
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
@ -56,7 +53,6 @@ limitations under the License.
|
||||
.mx_LinkPreviewWidget_cancel {
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
-webkit-flex: 0 0 40px;
|
||||
flex: 0 0 40px;
|
||||
}
|
||||
|
||||
@ -20,8 +20,8 @@ limitations under the License.
|
||||
|
||||
|
||||
.mx_MemberDeviceInfo_textButton {
|
||||
color: #fff;
|
||||
background-color: #76cfa6;
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
border-radius: 17px;
|
||||
text-align: center;
|
||||
padding-left: 1em;
|
||||
@ -50,13 +50,13 @@ limitations under the License.
|
||||
}
|
||||
|
||||
/* "Unblacklist" is too long for a regular button: make it wider and
|
||||
reduce the padding. */
|
||||
reduce the padding. */
|
||||
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
|
||||
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
|
||||
width: 8em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
|
||||
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
|
||||
@ -66,13 +66,13 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
|
||||
color: #76cfa5;
|
||||
color: $e2e-verified-color;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
|
||||
color: #e8bf37;
|
||||
color: $e2e-unverified-color;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
|
||||
color: #ba6363;
|
||||
color: $e2e-warning-color;
|
||||
}
|
||||
@ -61,7 +61,7 @@ limitations under the License.
|
||||
|
||||
.mx_MemberInfo h3 {
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
color: $h3-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-top: 16px;
|
||||
@ -69,10 +69,9 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MemberInfo_profileField {
|
||||
font-color: #999999;
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_buttons {
|
||||
@ -82,7 +81,7 @@ limitations under the License.
|
||||
.mx_MemberInfo_field {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
margin-left: 8px;
|
||||
line-height: 23px;
|
||||
}
|
||||
@ -20,22 +20,15 @@ limitations under the License.
|
||||
margin-top: 12px;
|
||||
margin-right: 20px;
|
||||
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_MemberList .mx_Spinner {
|
||||
flex: 0;
|
||||
-webkit-flex: 0;
|
||||
}
|
||||
|
||||
.mx_MemberList_chevron {
|
||||
@ -48,17 +41,16 @@ limitations under the License.
|
||||
overflow-y: auto;
|
||||
|
||||
order: 1;
|
||||
-webkit-flex: 1 1 0;
|
||||
flex: 1 1 0px;
|
||||
}
|
||||
|
||||
.mx_MemberList_query {
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 9px;
|
||||
color: #454545;
|
||||
background-color: #fff;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
margin-left: 3px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
@ -66,13 +58,13 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MemberList_query::-moz-placeholder {
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
opacity: 0.5;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mx_MemberList_query::-webkit-input-placeholder {
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
opacity: 0.5;
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -80,7 +72,6 @@ limitations under the License.
|
||||
.mx_MemberList_joined {
|
||||
order: 2;
|
||||
flex: 1 0 0;
|
||||
-webkit-flex: 1 0 0;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -89,14 +80,13 @@ limitations under the License.
|
||||
.mx_MemberList_invited {
|
||||
order: 3;
|
||||
flex: 0 0 100px;
|
||||
-webkit-flex: 0 0 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
*/
|
||||
|
||||
.mx_MemberList_invited h2 {
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
color: $h3-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
padding-left: 3px;
|
||||
@ -18,7 +18,7 @@ limitations under the License.
|
||||
max-width: 960px;
|
||||
vertical-align: middle;
|
||||
margin: auto;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -57,7 +57,7 @@ limitations under the License.
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
color: #888;
|
||||
color: $greyed-fg-color;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input_wrapper {
|
||||
@ -90,10 +90,10 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input blockquote {
|
||||
color: rgb(119, 119, 119);
|
||||
color: $blockquote-fg-color;
|
||||
margin: 0 0 16px;
|
||||
padding: 0 15px;
|
||||
border-left: 4px solid rgb(221, 221, 221);
|
||||
border-left: 4px solid $blockquote-bar-color;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input textarea {
|
||||
@ -105,11 +105,9 @@ limitations under the License.
|
||||
border: 0px;
|
||||
resize: none;
|
||||
outline: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
color: #454545;
|
||||
background-color: #fff;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
font-size: 14px;
|
||||
max-height: 120px;
|
||||
overflow: auto;
|
||||
@ -120,11 +118,11 @@ limitations under the License.
|
||||
/* hack for FF as vertical alignment of custom placeholder text is broken */
|
||||
.mx_MessageComposer_input textarea::-moz-placeholder {
|
||||
line-height: 100%;
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
opacity: 1.0;
|
||||
}
|
||||
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_upload,
|
||||
@ -153,7 +151,7 @@ limitations under the License.
|
||||
|
||||
.mx_MessageComposer_formatbar_wrapper {
|
||||
width: 100%;
|
||||
background-color: #f7f7f7;
|
||||
background-color: $menu-bg-color;
|
||||
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
@ -170,7 +168,7 @@ limitations under the License.
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
color: $greyed-fg-color;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_formatbar * {
|
||||
@ -16,7 +16,6 @@ limitations under the License.
|
||||
|
||||
/* add 20px to the height of the header when editing */
|
||||
.mx_RoomHeader_editing {
|
||||
-webit-flex: 0 0 93px ! important;
|
||||
flex: 0 0 93px ! important;
|
||||
}
|
||||
|
||||
@ -24,63 +23,36 @@ limitations under the License.
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
height: 70px;
|
||||
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_leftRow {
|
||||
margin-left: -2px;
|
||||
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_spinner {
|
||||
height: 36px;
|
||||
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_textButton {
|
||||
height: 36px;
|
||||
background-color: #76cfa6;
|
||||
background-color: $accent-color;
|
||||
border-radius: 36px;
|
||||
margin-right: 8px;
|
||||
color: #fff;
|
||||
color: $accent-fg-color;
|
||||
line-height: 34px;
|
||||
margin-top: -2px;
|
||||
text-align: center;
|
||||
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
/*
|
||||
-webkit-flex: 0 0 90px;
|
||||
flex: 0 0 90px;
|
||||
*/
|
||||
padding-left: 12px;
|
||||
@ -88,27 +60,17 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomHeader_cancelButton {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_rightRow {
|
||||
margin-top: 4px;
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-webkit-box-ordinal-group: 3;
|
||||
-moz-box-ordinal-group: 3;
|
||||
-ms-flex-order: 3;
|
||||
-webkit-order: 3;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
@ -120,7 +82,7 @@ limitations under the License.
|
||||
|
||||
.mx_RoomHeader_simpleHeader {
|
||||
line-height: 70px;
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
@ -138,7 +100,7 @@ limitations under the License.
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
overflow: hidden;
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
padding-left: 19px;
|
||||
@ -153,7 +115,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomHeader_settingsHint {
|
||||
color: #a2a2a2 ! important;
|
||||
color: $settings-grey-fg-color ! important;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_searchStatus {
|
||||
@ -174,21 +136,21 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_placeholder {
|
||||
color: #a2a2a2 ! important;
|
||||
color: $settings-grey-fg-color ! important;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_editable {
|
||||
border-bottom: 1px solid #c7c7c7 ! important;
|
||||
border-bottom: 1px solid $strong-input-border-color ! important;
|
||||
min-width: 150px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_editable:focus {
|
||||
border-bottom: 1px solid #76CFA6 ! important;
|
||||
border-bottom: 1px solid $accent-color ! important;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -197,7 +159,7 @@ limitations under the License.
|
||||
vertical-align: bottom;
|
||||
float: left;
|
||||
max-height: 42px;
|
||||
color: #A2A2A2;
|
||||
color: $settings-grey-fg-color;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
margin-left: 19px;
|
||||
@ -17,20 +17,10 @@ limitations under the License.
|
||||
.mx_RoomPreviewBar {
|
||||
text-align: center;
|
||||
height: 176px;
|
||||
|
||||
-webkit-align-items: center;
|
||||
background-color: $event-selected-color;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
|
||||
justify-content: center;
|
||||
-webkit-justify-content: center;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -38,16 +28,16 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_invite_text {
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_join_text {
|
||||
color: #ff0064;
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_preview_text {
|
||||
margin-top: 25px;
|
||||
color: #a4a4a4;
|
||||
color: $settings-grey-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_join_text a {
|
||||
@ -56,9 +46,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_warning {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
}
|
||||
@ -24,10 +24,10 @@ limitations under the License.
|
||||
.mx_RoomSettings_integrationsButton_error {
|
||||
position: relative;
|
||||
height: 36px;
|
||||
background-color: #76cfa6;
|
||||
background-color: $accent-color;
|
||||
border-radius: 36px;
|
||||
margin-right: 8px;
|
||||
color: #fff;
|
||||
color: $accent-fg-color;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
float: right;
|
||||
@ -47,8 +47,8 @@ limitations under the License.
|
||||
font-size: 10pt;
|
||||
line-height: 1.5em;
|
||||
border-radius: 5px;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
background-color: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomSettings_e2eIcon {
|
||||
@ -81,7 +81,7 @@ limitations under the License.
|
||||
|
||||
.mx_RoomSettings h3 {
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
color: $h3-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-top: 36px;
|
||||
@ -174,7 +174,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomSettings_warning {
|
||||
color: #ff0064;
|
||||
color: $warning-color;
|
||||
font-weight: bold;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
@ -182,13 +182,13 @@ limitations under the License.
|
||||
|
||||
.mx_RoomSettings_editable {
|
||||
border: 0px;
|
||||
border-bottom: 1px solid #c7c7c7;
|
||||
border-bottom: 1px solid $strong-input-border-color;
|
||||
padding: 0px;
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
.mx_RoomSettings_editable:focus {
|
||||
border-bottom: 1px solid #76CFA6;
|
||||
border-bottom: 1px solid $accent-color;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -205,7 +205,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomSettings_aliasPlaceholder {
|
||||
color: #a2a2a2;
|
||||
color: $settings-grey-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomSettings_buttons {
|
||||
@ -220,8 +220,8 @@ limitations under the License.
|
||||
border-radius: 36px;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
background-color: #76cfa6;
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
padding: 6px;
|
||||
@ -65,7 +65,7 @@ limitations under the License.
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-radius: 40px;
|
||||
background-image: url("img/icons_ellipsis.svg");
|
||||
background-image: url("../../img/icons_ellipsis.svg");
|
||||
background-size: 25px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@ -78,7 +78,7 @@ limitations under the License.
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-radius: 40px;
|
||||
background: #4A4A4A;
|
||||
background: $primary-fg-color;
|
||||
bottom: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@ -103,7 +103,7 @@ limitations under the License.
|
||||
padding-right: 6px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 3px;
|
||||
color: rgba(69, 69, 69, 0.8);
|
||||
color: $roomtile-name-color;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -142,7 +142,7 @@ limitations under the License.
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: 5px;
|
||||
border-top: 5px solid #ff0064;
|
||||
border-top: 5px solid $warning-color;
|
||||
border-right: 7px solid transparent;
|
||||
}
|
||||
|
||||
@ -154,7 +154,7 @@ limitations under the License.
|
||||
right: 8px; /*gutter */
|
||||
top: 9px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
color: $accent-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
@ -171,15 +171,15 @@ limitations under the License.
|
||||
|
||||
.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
|
||||
.mx_RoomTile.mx_RoomTile_notificationStateMenu.mx_RoomTile_noBadges .mx_RoomTile_badge {
|
||||
background-color: rgb(214, 214, 214);
|
||||
background-color: $neutral-badge-color;
|
||||
}
|
||||
|
||||
.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
|
||||
background-color: #76cfa6;
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomTile_highlight .mx_RoomTile_badge {
|
||||
background-color: #ff0064;
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_RoomTile_unread, .mx_RoomTile_highlight {
|
||||
@ -187,7 +187,12 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomTile_selected {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
background-color: $roomtile-selected-bg-color;
|
||||
}
|
||||
|
||||
.mx_RoomTile:focus {
|
||||
outline: 0;
|
||||
background-color: $roomtile-focused-bg-color;
|
||||
}
|
||||
|
||||
.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
|
||||
@ -16,19 +16,17 @@ limitations under the License.
|
||||
|
||||
.mx_SearchableEntityList {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_SearchableEntityList_query {
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 9px;
|
||||
color: #454545;
|
||||
background-color: #fff;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
margin-left: 3px;
|
||||
font-size: 15px;
|
||||
margin-bottom: 8px;
|
||||
@ -36,20 +34,19 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_SearchableEntityList_query::-moz-placeholder {
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
opacity: 0.5;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mx_SearchableEntityList_query::-webkit-input-placeholder {
|
||||
color: #454545;
|
||||
color: $primary-fg-color;
|
||||
opacity: 0.5;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mx_SearchableEntityList_listWrapper {
|
||||
flex: 1;
|
||||
-webkit-flex: 1;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -67,14 +64,13 @@ limitations under the License.
|
||||
.mx_SearchableEntityList_hrWrapper {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
-webkit-flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_SearchableEntityList hr {
|
||||
height: 1px;
|
||||
border: 0px;
|
||||
color: #e1dddd;
|
||||
background-color: #e1dddd;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-fg-color;
|
||||
margin-right: 15px;
|
||||
margin-top: 11px;
|
||||
margin-bottom: 11px;
|
||||
@ -27,7 +27,7 @@ limitations under the License.
|
||||
|
||||
.mx_TabCompleteBar_command {
|
||||
margin-right: 8px;
|
||||
background-color: #76CFA6;
|
||||
background-color: $accent-color;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-top: 2px;
|
||||
@ -41,7 +41,7 @@ limitations under the License.
|
||||
.mx_TabCompleteBar_command .mx_TabCompleteBar_text {
|
||||
opacity: 1.0;
|
||||
vertical-align: initial;
|
||||
color: #fff;
|
||||
color: $accent-fg-color;
|
||||
}
|
||||
|
||||
.mx_TabCompleteBar_item img {
|
||||
@ -50,7 +50,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_TabCompleteBar_text {
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
vertical-align: middle;
|
||||
opacity: 0.5;
|
||||
}
|
||||
@ -19,7 +19,7 @@ limitations under the License.
|
||||
max-width: 960px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
}
|
||||
|
||||
.mx_TopUnreadMessagesBar_scrollUp {
|
||||
@ -24,7 +24,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_IntegrationsManager iframe {
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
border: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -15,8 +15,8 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_CallView_voice {
|
||||
background-color: #76cfa6;
|
||||
color: #fff;
|
||||
background-color: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
padding: 6px;
|
||||
@ -18,7 +18,7 @@ limitations under the License.
|
||||
text-align: center;
|
||||
border: 1px solid #a4a4a4;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
padding: 6px;
|
||||
@ -41,14 +41,12 @@ limitations under the License.
|
||||
|
||||
.mx_IncomingCallBox_buttons {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons_cell {
|
||||
vertical-align: middle;
|
||||
padding: 6px;
|
||||
flex: 1;
|
||||
-webkit-flex: 1;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons_decline,
|
||||
@ -58,14 +56,14 @@ limitations under the License.
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border-radius: 36px;
|
||||
color: #fff;
|
||||
color: $accent-fg-color;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons_decline {
|
||||
background-color: #f48080;
|
||||
background-color: $voip-decline-color;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons_accept {
|
||||
background-color: #80f480;
|
||||
background-color: $voip-accept-color;
|
||||
}
|
||||
13
src/skins/vector/css/rethemendex.sh
Executable file
13
src/skins/vector/css/rethemendex.sh
Executable file
@ -0,0 +1,13 @@
|
||||
#!/bin/bash
|
||||
|
||||
cd `dirname $0`
|
||||
|
||||
{
|
||||
echo "// autogenerated by rethemendex.sh"
|
||||
|
||||
find . \! \( -path ./themes -prune \) -iname _\*.scss |
|
||||
fgrep -v _components.scss | LC_ALL=C sort |
|
||||
while read i; do
|
||||
echo "@import \"$i\";"
|
||||
done
|
||||
} > _components.scss
|
||||
107
src/skins/vector/css/themes/_base.scss
Normal file
107
src/skins/vector/css/themes/_base.scss
Normal file
@ -0,0 +1,107 @@
|
||||
|
||||
// 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;
|
||||
|
||||
$neutral-badge-color: #dbdbdb;
|
||||
|
||||
$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);
|
||||
$roomtile-focused-bg-color: rgba(255, 255, 255, 0.9);
|
||||
|
||||
$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;
|
||||
127
src/skins/vector/css/themes/_dark.scss
Normal file
127
src/skins/vector/css/themes/_dark.scss
Normal file
@ -0,0 +1,127 @@
|
||||
|
||||
// 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;
|
||||
|
||||
$neutral-badge-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(255, 255, 255, 0.05);
|
||||
$roomtile-focused-bg-color: rgba(255, 255, 255, 0.2);
|
||||
|
||||
$roomsublist-label-fg-color: $h3-color;
|
||||
$roomsublist-label-bg-color: #454545;
|
||||
|
||||
// ********************
|
||||
|
||||
// event tile lifecycle
|
||||
$event-encrypting-color: rgba(171, 221, 188, 0.4);
|
||||
$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;
|
||||
|
||||
// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it
|
||||
// better match the theme. Typically applied to dark grey 'off' buttons or
|
||||
// light grey 'on' buttons.
|
||||
.mx_filterFlipColor {
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
.gm-scrollbar .thumb {
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body pre,
|
||||
.mx_EventTile_content .markdown-body code {
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body pre code {
|
||||
filter: none;
|
||||
}
|
||||
3
src/skins/vector/css/themes/dark.scss
Normal file
3
src/skins/vector/css/themes/dark.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import "_base.scss";
|
||||
@import "_dark.scss";
|
||||
@import "../_components.scss";
|
||||
2
src/skins/vector/css/themes/light.scss
Normal file
2
src/skins/vector/css/themes/light.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import "_base.scss";
|
||||
@import "../_components.scss";
|
||||
@ -3,44 +3,46 @@
|
||||
* Includes extended Latin, Greek, Cyrillic and Vietnamese character sets
|
||||
*/
|
||||
|
||||
/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
|
||||
src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
|
||||
src: url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
|
||||
src: url('../../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
|
||||
src: url('../../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
|
||||
src: url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
|
||||
src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
@ -52,14 +54,14 @@
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Mono';
|
||||
src: url('fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
|
||||
src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Mono';
|
||||
src: url('fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
|
||||
src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
@ -17,13 +17,8 @@ limitations under the License.
|
||||
.mx_LeftPanel {
|
||||
position: relative;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_hideButton {
|
||||
@ -39,13 +34,8 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_RoomList_scrollbar {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
-webkit-flex: 1 1 0;
|
||||
flex: 1 1 0;
|
||||
|
||||
overflow-y: auto;
|
||||
@ -57,16 +47,11 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
-moz-box-ordinal-group: 3;
|
||||
-ms-flex-order: 3;
|
||||
-webkit-order: 3;
|
||||
order: 3;
|
||||
|
||||
border-top: 1px solid rgba(118, 207, 166, 0.2);
|
||||
margin-left: 16px; /* gutter */
|
||||
margin-right: 16px; /* gutter */
|
||||
-webkit-flex: 0 0 60px;
|
||||
flex: 0 0 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -17,26 +17,16 @@ limitations under the License.
|
||||
.mx_RightPanel {
|
||||
position: relative;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_RightPanel_header {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
margin-right: 20px;
|
||||
|
||||
-webkit-flex: 0 0 70px;
|
||||
flex: 0 0 70px;
|
||||
}
|
||||
|
||||
@ -44,14 +34,15 @@ limitations under the License.
|
||||
|
||||
.mx_RightPanel_headerButtonGroup {
|
||||
margin-top: 6px;
|
||||
float: left;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: $primary-bg-color;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton {
|
||||
cursor: pointer;
|
||||
display: table-cell;
|
||||
flex: 0;
|
||||
vertical-align: top;
|
||||
padding-left: 4px;
|
||||
padding-right: 5px;
|
||||
@ -68,46 +59,43 @@ limitations under the License.
|
||||
width: 25px;
|
||||
height: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(118, 207, 166, 0.2);
|
||||
background-color: $accent-color;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton_badge {
|
||||
font-size: 11px;
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
font-weight: bold;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.mx_RightPanel_collapsebutton {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mx_RightPanel .mx_MemberList,
|
||||
.mx_RightPanel .mx_MemberInfo,
|
||||
.mx_RightPanel_blank {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
flex: 1 1 0;
|
||||
-webkit-flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mx_RightPanel_footer {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
-moz-box-ordinal-group: 3;
|
||||
-ms-flex-order: 3;
|
||||
-webkit-order: 3;
|
||||
order: 3;
|
||||
|
||||
border-top: 1px solid #e5e5e5;
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
margin-right: 20px;
|
||||
|
||||
-webkit-flex: 0 0 60px;
|
||||
flex: 0 0 60px;
|
||||
}
|
||||
|
||||
.mx_RightPanel_footer .mx_RightPanel_invite {
|
||||
line-height: 35px;
|
||||
font-size: 14px;
|
||||
color: #4A4A4A;
|
||||
color: $primary-fg-color;
|
||||
padding-top: 13px;
|
||||
padding-left: 5px;
|
||||
cursor: pointer;
|
||||
@ -20,35 +20,23 @@ limitations under the License.
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 12px;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_list {
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
|
||||
justify-content: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_listheader {
|
||||
@ -72,13 +60,12 @@ limitations under the License.
|
||||
|
||||
.mx_RoomDirectory_tableWrapper {
|
||||
overflow-y: auto;
|
||||
-webkit-flex: 1 1 0;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_table {
|
||||
font-size: 14px;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
table-layout: fixed;
|
||||
@ -110,11 +97,11 @@ limitations under the License.
|
||||
padding-right: 5px;
|
||||
height: 15px;
|
||||
border-radius: 11px;
|
||||
background-color: #eaf5f0;
|
||||
background-color: $plinth-bg-color;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
color: #61c295;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_topic {
|
||||
@ -123,7 +110,7 @@ limitations under the License.
|
||||
|
||||
.mx_RoomDirectory_alias {
|
||||
font-size: 12px;
|
||||
color: #b3b3b3;
|
||||
color: $settings-grey-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_roomMemberCount {
|
||||
@ -29,7 +29,7 @@ limitations under the License.
|
||||
.mx_RoomSubList_label {
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
color: $roomsublist-label-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
width: 203px; /* padding + width = LHS Panel width */
|
||||
@ -39,8 +39,8 @@ limitations under the License.
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
cursor: pointer;
|
||||
background-color: #d3efe1;
|
||||
border-top: solid 2px #eaf5f0;
|
||||
background-color: $roomsublist-label-bg-color;
|
||||
border-top: solid 2px $secondary-accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_label.mx_RoomSubList_fixed {
|
||||
@ -63,7 +63,7 @@ limitations under the License.
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
padding-left: 5px;
|
||||
text-transform: none;
|
||||
}
|
||||
@ -80,14 +80,14 @@ limitations under the License.
|
||||
right: 8px; /*gutter */
|
||||
top: 7px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
color: $accent-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
padding-top: 1px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
background-color: #76cfa6;
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -97,7 +97,7 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_RoomSubList_badgeHighlight {
|
||||
background-color: #ff0064;
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
/* This is the bottom of the speech bubble */
|
||||
@ -108,7 +108,7 @@ limitations under the License.
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: 5px;
|
||||
border-top: 5px solid #ff0064;
|
||||
border-top: 5px solid $warning-color;
|
||||
border-right: 7px solid transparent;
|
||||
}
|
||||
|
||||
@ -129,7 +129,7 @@ limitations under the License.
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 6px solid #76cfa6;
|
||||
border-top: 6px solid $accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevronUp {
|
||||
@ -137,14 +137,14 @@ limitations under the License.
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 6px solid #76cfa6;
|
||||
border-bottom: 6px solid $accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevronRight {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-left: 6px solid #76cfa6;
|
||||
border-left: 6px solid $accent-color;
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
|
||||
@ -165,7 +165,7 @@ limitations under the License.
|
||||
.mx_RoomSubList_line {
|
||||
display: inline-block;
|
||||
width: 159px;
|
||||
border-top: dotted 2px #76cfa6;
|
||||
border-top: dotted 2px $accent-color;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -179,7 +179,7 @@ limitations under the License.
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
padding-left: 7px;
|
||||
@ -198,20 +198,20 @@ limitations under the License.
|
||||
right: 8px; /*gutter */
|
||||
top: -2px;
|
||||
border-radius: 8px;
|
||||
border: solid 1px #76cfa6;
|
||||
color: #fff;
|
||||
border: solid 1px $accent-color;
|
||||
color: $accent-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
padding-top: 1px;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
|
||||
background-color: #76cfa6;
|
||||
background-color: $accent-color;
|
||||
border: 0;
|
||||
padding-top: 3px;
|
||||
padding-left: 4px;
|
||||
@ -219,7 +219,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
|
||||
background-color: #ff0064;
|
||||
background-color: $warning-color;
|
||||
border: 0;
|
||||
padding-top: 3px;
|
||||
padding-left: 4px;
|
||||
@ -31,7 +31,7 @@ limitations under the License.
|
||||
|
||||
.mx_RoomTagContextMenu_field:last-child {
|
||||
padding-bottom: 4px;
|
||||
color: #ff0064;
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet {
|
||||
@ -70,8 +70,7 @@ limitations under the License.
|
||||
border-right-style: none;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
border-color: #bbbbbb;
|
||||
opacity: 0.4;
|
||||
border-color: $menu-border-color;
|
||||
}
|
||||
|
||||
.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {
|
||||
@ -21,14 +21,14 @@ limitations under the License.
|
||||
.mx_NetworkDropdown_input {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #c7c7c7;
|
||||
border: 1px solid $strong-input-border-color;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_arrow {
|
||||
border-color: #4a4a4a transparent transparent;
|
||||
border-color: $primary-fg-color transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 5px 0;
|
||||
display: block;
|
||||
@ -67,12 +67,12 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #76cfa6;
|
||||
background-color: white;
|
||||
border: 1px solid $accent-color;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
|
||||
background-color: #ddd;
|
||||
background-color: $focus-bg-color;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_menu_network {
|
||||
@ -19,39 +19,27 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_ImageView {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_ImageView_lhs {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
order: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1 1 10%;
|
||||
min-width: 60px;
|
||||
/*
|
||||
background-color: #080;
|
||||
height: 20px;
|
||||
*/
|
||||
// background-color: #080;
|
||||
// height: 20px;
|
||||
}
|
||||
|
||||
.mx_ImageView_content {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
order: 2;
|
||||
/* min-width hack needed for FF */
|
||||
min-width: 0px;
|
||||
height: 90%;
|
||||
-webkit-flex: 15;
|
||||
flex: 15 15 0;
|
||||
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -62,7 +50,7 @@ limitations under the License.
|
||||
max-height: 100%;
|
||||
/* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
|
||||
object-fit: contain;
|
||||
/* background-image: url('img/trans.png'); */
|
||||
/* background-image: url('../../img/trans.png'); */
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
@ -78,16 +66,13 @@ limitations under the License.
|
||||
.mx_ImageView_label {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: center;
|
||||
-webkit-justify-content: center;
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
min-height: 100%;
|
||||
max-width: 240px;
|
||||
color: #fff;
|
||||
color: $lightbox-fg-color;
|
||||
}
|
||||
|
||||
.mx_ImageView_cancel {
|
||||
@ -114,10 +99,10 @@ limitations under the License.
|
||||
margin-top: 24px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 5px;
|
||||
background-color: #454545;
|
||||
background-color: $lightbox-bg-color;
|
||||
font-size: 14px;
|
||||
padding: 9px;
|
||||
border: 1px solid #fff;
|
||||
border: 1px solid $lightbox-border-color;
|
||||
}
|
||||
|
||||
.mx_ImageView_size {
|
||||
@ -125,7 +110,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_ImageView_link {
|
||||
color: #fff ! important;
|
||||
color: $lightbox-fg-color ! important;
|
||||
text-decoration: none ! important;
|
||||
}
|
||||
|
||||
@ -141,13 +126,9 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_ImageView_rhs {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
order: 3;
|
||||
-webkit-flex: 1;
|
||||
flex: 1 1 10%;
|
||||
min-width: 300px;
|
||||
/*
|
||||
background-color: #800;
|
||||
height: 20px;
|
||||
*/
|
||||
// background-color: #800;
|
||||
// height: 20px;
|
||||
}
|
||||
@ -15,16 +15,12 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_Spinner {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
-webkit-flex: 1;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_middlePanel .mx_Spinner {
|
||||
@ -15,15 +15,10 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_GuestWarningBar {
|
||||
background-color: #76cfa6;
|
||||
color: #fff;
|
||||
background-color: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -34,7 +29,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_GuestWarningBar a {
|
||||
color: #fff ! important;
|
||||
color: $accent-fg-color ! important;
|
||||
text-decoration: underline ! important;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -15,15 +15,10 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_MatrixToolbar {
|
||||
background-color: #76cfa6;
|
||||
color: #fff;
|
||||
background-color: $accent-color;
|
||||
color: $accent-fg-color;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -34,13 +29,12 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_content {
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_link
|
||||
{
|
||||
color: #fff ! important;
|
||||
color: $accent-fg-color ! important;
|
||||
text-decoration: underline ! important;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -22,9 +22,9 @@ limitations under the License.
|
||||
margin-bottom: 7px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border: 1px dashed #76cfa6;
|
||||
color: #454545;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
border: 1px dashed $accent-color;
|
||||
color: $primary-fg-color;
|
||||
background-color: $droptarget-bg-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@ -39,7 +39,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomDropTarget_avatar {
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
border-radius: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user