mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 19:26:04 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2535 from matrix-org/experimental

Browse source 
Merge redesign into develop
This commit is contained in:
Bruno Windels 2019-01-30 12:49:27 +00:00 committed by GitHub
commit 3e7c3bfff8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
419 changed files with 15686 additions and 6144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
.eslintignore.errorfiles
View file

@ -1,14 +1,8 @@
# autogenerated file: run scripts/generate-eslint-error-ignore-file to update. # autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
src/autocomplete/AutocompleteProvider.js
src/autocomplete/Autocompleter.js
src/autocomplete/UserProvider.js
src/component-index.js src/component-index.js
src/components/structures/BottomLeftMenu.js src/components/structures/BottomLeftMenu.js
src/components/structures/CompatibilityPage.js
src/components/structures/CreateRoom.js src/components/structures/CreateRoom.js
src/components/structures/LoggedInView.js
src/components/structures/login/ForgotPassword.js
src/components/structures/MessagePanel.js src/components/structures/MessagePanel.js
src/components/structures/NotificationPanel.js src/components/structures/NotificationPanel.js
src/components/structures/RoomDirectory.js src/components/structures/RoomDirectory.js
@ -18,7 +12,6 @@ src/components/structures/ScrollPanel.js
src/components/structures/SearchBox.js src/components/structures/SearchBox.js
src/components/structures/TimelinePanel.js src/components/structures/TimelinePanel.js
src/components/structures/UploadBar.js src/components/structures/UploadBar.js
src/components/structures/UserSettings.js
src/components/views/avatars/BaseAvatar.js src/components/views/avatars/BaseAvatar.js
src/components/views/avatars/MemberAvatar.js src/components/views/avatars/MemberAvatar.js
src/components/views/create_room/RoomAlias.js src/components/views/create_room/RoomAlias.js
@ -35,11 +28,6 @@ src/components/views/elements/UserSelector.js
src/components/views/globals/MatrixToolbar.js src/components/views/globals/MatrixToolbar.js
src/components/views/globals/NewVersionBar.js src/components/views/globals/NewVersionBar.js
src/components/views/globals/UpdateCheckBar.js src/components/views/globals/UpdateCheckBar.js
src/components/views/login/CountryDropdown.js
src/components/views/login/InteractiveAuthEntryComponents.js
src/components/views/login/PasswordLogin.js
src/components/views/login/RegistrationForm.js
src/components/views/login/ServerConfig.js
src/components/views/messages/MFileBody.js src/components/views/messages/MFileBody.js
src/components/views/messages/RoomAvatarEvent.js src/components/views/messages/RoomAvatarEvent.js
src/components/views/messages/TextualBody.js src/components/views/messages/TextualBody.js
@ -52,9 +40,7 @@ src/components/views/rooms/LinkPreviewWidget.js
src/components/views/rooms/MemberDeviceInfo.js src/components/views/rooms/MemberDeviceInfo.js
src/components/views/rooms/MemberInfo.js src/components/views/rooms/MemberInfo.js
src/components/views/rooms/MemberList.js src/components/views/rooms/MemberList.js
src/components/views/rooms/MemberTile.js
src/components/views/rooms/MessageComposer.js src/components/views/rooms/MessageComposer.js
src/components/views/rooms/MessageComposerInput.js
src/components/views/rooms/PinnedEventTile.js src/components/views/rooms/PinnedEventTile.js
src/components/views/rooms/RoomList.js src/components/views/rooms/RoomList.js
src/components/views/rooms/RoomPreviewBar.js src/components/views/rooms/RoomPreviewBar.js
@ -76,7 +62,6 @@ src/HtmlUtils.js
src/ImageUtils.js src/ImageUtils.js
src/languageHandler.js src/languageHandler.js
src/linkify-matrix.js src/linkify-matrix.js
src/Login.js
src/Markdown.js src/Markdown.js
src/MatrixClientPeg.js src/MatrixClientPeg.js
src/Modal.js src/Modal.js
@ -104,12 +89,10 @@ src/VectorConferenceHandler.js
src/Velociraptor.js src/Velociraptor.js
src/WhoIsTyping.js src/WhoIsTyping.js
src/wrappers/withMatrixClient.js src/wrappers/withMatrixClient.js
test/components/structures/login/Registration-test.js
test/components/structures/MessagePanel-test.js test/components/structures/MessagePanel-test.js
test/components/structures/ScrollPanel-test.js test/components/structures/ScrollPanel-test.js
test/components/structures/TimelinePanel-test.js test/components/structures/TimelinePanel-test.js
test/components/views/dialogs/InteractiveAuthDialog-test.js test/components/views/dialogs/InteractiveAuthDialog-test.js
test/components/views/login/RegistrationForm-test.js
test/components/views/rooms/MessageComposerInput-test.js test/components/views/rooms/MessageComposerInput-test.js
test/components/views/rooms/RoomSettings-test.js test/components/views/rooms/RoomSettings-test.js
test/mock-clock.js test/mock-clock.js

5
.eslintrc.js
View file

@ -42,9 +42,8 @@ module.exports = {
// bind or arrow function in props causes performance issues // bind or arrow function in props causes performance issues
// (but we currently use them in some places) // (but we currently use them in some places)
"react/jsx-no-bind": ["warn", { // It's disabled here, but we should using it sparingly.
"ignoreRefs": true, "react/jsx-no-bind": "off",
}],
"react/jsx-key": ["error"], "react/jsx-key": ["error"],
// Components in JSX should always be defined. // Components in JSX should always be defined.

24
.travis.yml
View file

@ -14,8 +14,22 @@ node_js:
addons: addons:
chrome: stable chrome: stable
install: install:
- npm install - ./scripts/travis/install-deps.sh
# install synapse prerequisites for end to end tests matrix:
- sudo apt-get install build-essential python2.7-dev libffi-dev python-pip python-setuptools sqlite3 libssl-dev python-virtualenv libjpeg-dev libxslt1-dev include:
script: - name: Linting Checks
./scripts/travis.sh script:
# run the linter, but exclude any files known to have errors or warnings.
- npm run lintwithexclusions
# - name: End-to-End Tests
# if: branch = develop
# install:
# - sudo apt-get install build-essential python2.7-dev libffi-dev python-pip python-setuptools sqlite3 libssl-dev python-virtualenv libjpeg-dev libxslt1-dev
# script:
# - ./scripts/travis/end-to-end-tests.sh
- name: Unit Tests
script:
- ./scripts/travis/unit-tests.sh
- name: Riot-web Unit Tests
script:
- ./scripts/travis/riot-unit-tests.sh

33
README.md
View file

@ -127,3 +127,36 @@ Github Issues
All issues should be filed under https://github.com/vector-im/riot-web/issues All issues should be filed under https://github.com/vector-im/riot-web/issues
for now. for now.
Development
===========
Ensure you have the latest stable Node JS runtime installed (v8.x is the best choice). Then check out
the code and pull in dependencies:
```bash
git clone https://github.com/matrix-org/matrix-react-sdk.git
cd matrix-react-sdk
git checkout develop
npm install
```
`matrix-react-sdk` depends on `matrix-js-sdk`. To make use of changes in the
latter and to ensure tests run against the develop branch of `matrix-js-sdk`,
you should run the following which will sync changes from the JS sdk here.
```bash
npm link ../matrix-js-sdk
```
Command assumes a checked out and installed `matrix-js-sdk` folder in parent
folder.
Running tests
=============
Ensure you've followed the above development instructions and then:
```bash
npm run test
```

4
karma.conf.js
View file

@ -168,6 +168,10 @@ module.exports = function (config) {
path.resolve('./test'), path.resolve('./test'),
] ]
}, },
{
test: /\.(gif|png|svg|ttf)$/,
loader: 'file-loader',
},
], ],
noParse: [ noParse: [
// for cross platform compatibility use [\\\/] as the path separator // for cross platform compatibility use [\\\/] as the path separator

6
package.json
View file

@ -37,6 +37,7 @@
"scripts": { "scripts": {
"reskindex": "node scripts/reskindex.js -h header", "reskindex": "node scripts/reskindex.js -h header",
"reskindex:watch": "node scripts/reskindex.js -h header -w", "reskindex:watch": "node scripts/reskindex.js -h header -w",
"rethemendex": "res/css/rethemendex.sh",
"i18n": "matrix-gen-i18n", "i18n": "matrix-gen-i18n",
"prunei18n": "matrix-prune-i18n", "prunei18n": "matrix-prune-i18n",
"build": "npm run reskindex && npm run start:init", "build": "npm run reskindex && npm run start:init",
@ -47,7 +48,7 @@
"start:init": "babel src -d lib --source-maps --copy-files", "start:init": "babel src -d lib --source-maps --copy-files",
"lint": "eslint src/", "lint": "eslint src/",
"lintall": "eslint src/ test/", "lintall": "eslint src/ test/",
"lintwithexclusions": "eslint --max-warnings 20 --ignore-path .eslintignore.errorfiles src test", "lintwithexclusions": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
"clean": "rimraf lib", "clean": "rimraf lib",
"prepublish": "npm run clean && npm run build && git rev-parse HEAD > git-revision.txt", "prepublish": "npm run clean && npm run build && git rev-parse HEAD > git-revision.txt",
"test": "karma start --single-run=true --browsers ChromeHeadless", "test": "karma start --single-run=true --browsers ChromeHeadless",
@ -118,13 +119,14 @@
"babel-preset-react": "^6.24.1", "babel-preset-react": "^6.24.1",
"chokidar": "^1.6.1", "chokidar": "^1.6.1",
"concurrently": "^4.0.1", "concurrently": "^4.0.1",
"eslint": "^5.8.0", "eslint": "^5.12.0",
"eslint-config-google": "^0.7.1", "eslint-config-google": "^0.7.1",
"eslint-plugin-babel": "^5.2.1", "eslint-plugin-babel": "^5.2.1",
"eslint-plugin-flowtype": "^2.30.0", "eslint-plugin-flowtype": "^2.30.0",
"eslint-plugin-react": "^7.7.0", "eslint-plugin-react": "^7.7.0",
"estree-walker": "^0.5.0", "estree-walker": "^0.5.0",
"expect": "^23.6.0", "expect": "^23.6.0",
"file-loader": "^3.0.1",
"flow-parser": "^0.57.3", "flow-parser": "^0.57.3",
"jest-mock": "^23.2.0", "jest-mock": "^23.2.0",
"karma": "^3.0.0", "karma": "^3.0.0",

71
res/css/_common.scss
View file

@ -30,8 +30,6 @@ body {
color: $primary-fg-color; color: $primary-fg-color;
border: 0px; border: 0px;
margin: 0px; margin: 0px;
/* This should render the fonts the same accross browsers */
-webkit-font-smoothing: subpixel-antialiased;
} }
.error, .warning { .error, .warning {
@ -49,20 +47,14 @@ h2 {
a:hover, a:hover,
a:link, a:link,
a:visited { a:visited {
color: $accent-color; color: $accent-color-alt;
} }
input[type=text], input[type=password], textarea { input[type=text], input[type=password], textarea {
background-color: transparent; background-color: transparent;
color: $primary-fg-color;
}
input[type=text].error, input[type=password].error {
border: 1px solid $warning-color;
} }
input[type=text]:focus, input[type=password]:focus, textarea:focus { input[type=text]:focus, input[type=password]:focus, textarea:focus {
border: 1px solid $accent-color;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
} }
@ -83,11 +75,6 @@ textarea {
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
} }
.mx_fadable.mx_fadable_faded {
opacity: 0.3;
pointer-events: none;
}
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48. /* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
Stop the scrollbar view from pushing out the container's overall sizing, which causes Stop the scrollbar view from pushing out the container's overall sizing, which causes
flexbox to adapt to the new size and cause the view to keep growing. flexbox to adapt to the new size and cause the view to keep growing.
@ -170,10 +157,10 @@ textarea {
font-weight: 300; font-weight: 300;
font-size: 15px; font-size: 15px;
position: relative; position: relative;
padding: 0 58px 36px; padding: 40px 58px 36px 58px;
width: 60%; width: 60%;
max-width: 704px; max-width: 704px;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
max-height: 80%; max-height: 80%;
overflow-y: auto; overflow-y: auto;
} }
@ -184,7 +171,7 @@ textarea {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $dialog-background-bg-color; background-color: $dialog-backdrop-color;
opacity: 0.8; opacity: 0.8;
} }
@ -203,15 +190,36 @@ textarea {
pointer-events: none; pointer-events: none;
} }
.mx_Dialog_cancelButton { .mx_Dialog_header {
position: absolute; position: relative;
right: 11px;
top: 13px;
cursor: pointer;
} }
.mx_Dialog_cancelButton object { .mx_Dialog_title {
pointer-events: none; font-weight: bold;
font-size: 22px;
line-height: 36px;
color: $primary-fg-color;
}
.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
text-align: center;
}
.mx_Dialog_title.danger {
color: $warning-color;
}
.mx_Dialog_cancelButton {
mask: url('$(res)/img/feather-icons/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
width: 36px;
height: 36px;
background-color: $primary-fg-color;
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
} }
.mx_Dialog_content { .mx_Dialog_content {
@ -267,19 +275,6 @@ textarea {
color: $accent-color; color: $accent-color;
} }
.mx_Dialog_title {
min-height: 16px;
padding-top: 40px;
font-weight: bold;
font-size: 22px;
line-height: 1.4;
color: $primary-fg-color;
}
.mx_Dialog_title.danger {
color: $warning-color;
}
.mx_TextInputDialog_label { .mx_TextInputDialog_label {
text-align: left; text-align: left;
padding-bottom: 12px; padding-bottom: 12px;
@ -314,7 +309,7 @@ textarea {
} }
.mx_textButton { .mx_textButton {
@mixin mx_DialogButton_small; @mixin mx_DialogButton_small;
} }
.mx_textButton:hover { .mx_textButton:hover {

46
res/css/_components.scss
View file

@ -1,6 +1,6 @@
// autogenerated by rethemendex.sh // autogenerated by rethemendex.sh
@import "./_common.scss"; @import "./_common.scss";
@import "./_fonts.scss"; @import "./structures/_AutoHideScrollbar.scss";
@import "./structures/_CompatibilityPage.scss"; @import "./structures/_CompatibilityPage.scss";
@import "./structures/_ContextualMenu.scss"; @import "./structures/_ContextualMenu.scss";
@import "./structures/_CreateRoom.scss"; @import "./structures/_CreateRoom.scss";
@ -8,7 +8,6 @@
@import "./structures/_GroupView.scss"; @import "./structures/_GroupView.scss";
@import "./structures/_HomePage.scss"; @import "./structures/_HomePage.scss";
@import "./structures/_LeftPanel.scss"; @import "./structures/_LeftPanel.scss";
@import "./structures/_LoginBox.scss";
@import "./structures/_MatrixChat.scss"; @import "./structures/_MatrixChat.scss";
@import "./structures/_MyGroups.scss"; @import "./structures/_MyGroups.scss";
@import "./structures/_NotificationPanel.scss"; @import "./structures/_NotificationPanel.scss";
@ -18,17 +17,31 @@
@import "./structures/_RoomSubList.scss"; @import "./structures/_RoomSubList.scss";
@import "./structures/_RoomView.scss"; @import "./structures/_RoomView.scss";
@import "./structures/_SearchBox.scss"; @import "./structures/_SearchBox.scss";
@import "./structures/_TabbedView.scss";
@import "./structures/_TagPanel.scss"; @import "./structures/_TagPanel.scss";
@import "./structures/_TopLeftMenuButton.scss";
@import "./structures/_UploadBar.scss"; @import "./structures/_UploadBar.scss";
@import "./structures/_UserSettings.scss"; @import "./structures/_UserSettings.scss";
@import "./structures/_ViewSource.scss"; @import "./structures/_ViewSource.scss";
@import "./structures/login/_Login.scss"; @import "./structures/auth/_Login.scss";
@import "./views/auth/_AuthBody.scss";
@import "./views/auth/_AuthButtons.scss";
@import "./views/auth/_AuthFooter.scss";
@import "./views/auth/_AuthHeader.scss";
@import "./views/auth/_AuthHeaderLogo.scss";
@import "./views/auth/_AuthPage.scss";
@import "./views/auth/_CountryDropdown.scss";
@import "./views/auth/_InteractiveAuthEntryComponents.scss";
@import "./views/auth/_LanguageSelector.scss";
@import "./views/auth/_ServerConfig.scss";
@import "./views/auth/_ServerTypeSelector.scss";
@import "./views/avatars/_BaseAvatar.scss"; @import "./views/avatars/_BaseAvatar.scss";
@import "./views/avatars/_MemberStatusMessageAvatar.scss"; @import "./views/avatars/_MemberStatusMessageAvatar.scss";
@import "./views/context_menus/_MessageContextMenu.scss"; @import "./views/context_menus/_MessageContextMenu.scss";
@import "./views/context_menus/_RoomTileContextMenu.scss"; @import "./views/context_menus/_RoomTileContextMenu.scss";
@import "./views/context_menus/_StatusMessageContextMenu.scss"; @import "./views/context_menus/_StatusMessageContextMenu.scss";
@import "./views/context_menus/_TagTileContextMenu.scss"; @import "./views/context_menus/_TagTileContextMenu.scss";
@import "./views/context_menus/_TopLeftMenu.scss";
@import "./views/dialogs/_BugReportDialog.scss"; @import "./views/dialogs/_BugReportDialog.scss";
@import "./views/dialogs/_ChangelogDialog.scss"; @import "./views/dialogs/_ChangelogDialog.scss";
@import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss"; @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@ -41,14 +54,17 @@
@import "./views/dialogs/_EncryptedEventDialog.scss"; @import "./views/dialogs/_EncryptedEventDialog.scss";
@import "./views/dialogs/_GroupAddressPicker.scss"; @import "./views/dialogs/_GroupAddressPicker.scss";
@import "./views/dialogs/_RestoreKeyBackupDialog.scss"; @import "./views/dialogs/_RestoreKeyBackupDialog.scss";
@import "./views/dialogs/_RoomSettingsDialog.scss";
@import "./views/dialogs/_RoomUpgradeDialog.scss"; @import "./views/dialogs/_RoomUpgradeDialog.scss";
@import "./views/dialogs/_SetEmailDialog.scss"; @import "./views/dialogs/_SetEmailDialog.scss";
@import "./views/dialogs/_SetMxIdDialog.scss"; @import "./views/dialogs/_SetMxIdDialog.scss";
@import "./views/dialogs/_SetPasswordDialog.scss"; @import "./views/dialogs/_SetPasswordDialog.scss";
@import "./views/dialogs/_SettingsDialog.scss";
@import "./views/dialogs/_ShareDialog.scss"; @import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_UnknownDeviceDialog.scss"; @import "./views/dialogs/_UnknownDeviceDialog.scss";
@import "./views/dialogs/_UserSettingsDialog.scss";
@import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss"; @import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
@import "./views/dialogs/keybackup/_NewRecoveryMethodDialog.scss"; @import "./views/dialogs/keybackup/_KeyBackupFailedDialog.scss";
@import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss"; @import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";
@import "./views/directory/_NetworkDropdown.scss"; @import "./views/directory/_NetworkDropdown.scss";
@import "./views/elements/_AccessibleButton.scss"; @import "./views/elements/_AccessibleButton.scss";
@ -57,22 +73,24 @@
@import "./views/elements/_DirectorySearchBox.scss"; @import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_Dropdown.scss"; @import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss"; @import "./views/elements/_EditableItemList.scss";
@import "./views/elements/_Field.scss";
@import "./views/elements/_HexVerify.scss";
@import "./views/elements/_ImageView.scss"; @import "./views/elements/_ImageView.scss";
@import "./views/elements/_InlineSpinner.scss"; @import "./views/elements/_InlineSpinner.scss";
@import "./views/elements/_MemberEventListSummary.scss"; @import "./views/elements/_MemberEventListSummary.scss";
@import "./views/elements/_ProgressBar.scss"; @import "./views/elements/_ProgressBar.scss";
@import "./views/elements/_ReplyThread.scss"; @import "./views/elements/_ReplyThread.scss";
@import "./views/elements/_ResizeHandle.scss";
@import "./views/elements/_RichText.scss"; @import "./views/elements/_RichText.scss";
@import "./views/elements/_RoleButton.scss"; @import "./views/elements/_RoleButton.scss";
@import "./views/elements/_Spinner.scss"; @import "./views/elements/_Spinner.scss";
@import "./views/elements/_SyntaxHighlight.scss"; @import "./views/elements/_SyntaxHighlight.scss";
@import "./views/elements/_ToggleSwitch.scss";
@import "./views/elements/_ToolTipButton.scss"; @import "./views/elements/_ToolTipButton.scss";
@import "./views/globals/_MatrixToolbar.scss"; @import "./views/globals/_MatrixToolbar.scss";
@import "./views/groups/_GroupPublicityToggle.scss"; @import "./views/groups/_GroupPublicityToggle.scss";
@import "./views/groups/_GroupRoomList.scss"; @import "./views/groups/_GroupRoomList.scss";
@import "./views/groups/_GroupUserSettings.scss"; @import "./views/groups/_GroupUserSettings.scss";
@import "./views/login/_InteractiveAuthEntryComponents.scss";
@import "./views/login/_ServerConfig.scss";
@import "./views/messages/_CreateEvent.scss"; @import "./views/messages/_CreateEvent.scss";
@import "./views/messages/_DateSeparator.scss"; @import "./views/messages/_DateSeparator.scss";
@import "./views/messages/_MEmoteBody.scss"; @import "./views/messages/_MEmoteBody.scss";
@ -88,8 +106,10 @@
@import "./views/messages/_UnknownBody.scss"; @import "./views/messages/_UnknownBody.scss";
@import "./views/rooms/_AppsDrawer.scss"; @import "./views/rooms/_AppsDrawer.scss";
@import "./views/rooms/_Autocomplete.scss"; @import "./views/rooms/_Autocomplete.scss";
@import "./views/rooms/_AuxPanel.scss";
@import "./views/rooms/_EntityTile.scss"; @import "./views/rooms/_EntityTile.scss";
@import "./views/rooms/_EventTile.scss"; @import "./views/rooms/_EventTile.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
@import "./views/rooms/_LinkPreviewWidget.scss"; @import "./views/rooms/_LinkPreviewWidget.scss";
@import "./views/rooms/_MemberDeviceInfo.scss"; @import "./views/rooms/_MemberDeviceInfo.scss";
@import "./views/rooms/_MemberInfo.scss"; @import "./views/rooms/_MemberInfo.scss";
@ -112,10 +132,24 @@
@import "./views/rooms/_SearchableEntityList.scss"; @import "./views/rooms/_SearchableEntityList.scss";
@import "./views/rooms/_Stickers.scss"; @import "./views/rooms/_Stickers.scss";
@import "./views/rooms/_TopUnreadMessagesBar.scss"; @import "./views/rooms/_TopUnreadMessagesBar.scss";
@import "./views/rooms/_WhoIsTypingTile.scss";
@import "./views/settings/_DevicesPanel.scss"; @import "./views/settings/_DevicesPanel.scss";
@import "./views/settings/_EmailAddresses.scss";
@import "./views/settings/_IntegrationsManager.scss"; @import "./views/settings/_IntegrationsManager.scss";
@import "./views/settings/_KeyBackupPanel.scss"; @import "./views/settings/_KeyBackupPanel.scss";
@import "./views/settings/_Notifications.scss"; @import "./views/settings/_Notifications.scss";
@import "./views/settings/_PhoneNumbers.scss";
@import "./views/settings/_ProfileSettings.scss";
@import "./views/settings/tabs/_GeneralRoomSettingsTab.scss";
@import "./views/settings/tabs/_GeneralUserSettingsTab.scss";
@import "./views/settings/tabs/_HelpSettingsTab.scss";
@import "./views/settings/tabs/_NotificationSettingsTab.scss";
@import "./views/settings/tabs/_PreferencesSettingsTab.scss";
@import "./views/settings/tabs/_RolesRoomSettingsTab.scss";
@import "./views/settings/tabs/_SecurityRoomSettingsTab.scss";
@import "./views/settings/tabs/_SecuritySettingsTab.scss";
@import "./views/settings/tabs/_SettingsTab.scss";
@import "./views/settings/tabs/_VoiceSettingsTab.scss";
@import "./views/voip/_CallView.scss"; @import "./views/voip/_CallView.scss";
@import "./views/voip/_IncomingCallbox.scss"; @import "./views/voip/_IncomingCallbox.scss";
@import "./views/voip/_VideoView.scss"; @import "./views/voip/_VideoView.scss";

83
res/css/structures/_AutoHideScrollbar.scss Normal file
View file

@ -0,0 +1,83 @@
/*
Copyright 2018 New Vector 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.
*/
/*
1. for browsers that support native overlay auto-hiding scrollbars
*/
.mx_AutoHideScrollbar {
overflow-x: hidden;
overflow-y: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
/*
2. webkit also supports overflow:overlay where the scrollbars don't take any space
in the layout but they don't autohide, so do that only on hover
*/
body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar {
overflow-y: hidden;
}
body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar:hover {
overflow-y: overlay;
}
/*
3. as a last fallback, compensate for the scrollbar taking up space in the layout
by having giving the child element (.mx_AutoHideScrollbar_offset) a
negative right margin of the width of the scrollbar when the container
is overflowing. This is what Firefox ends up using. Overflow is detected
in javascript, and adds the mx_AutoHideScrollbar_overflow class to the container.
This only works in Firefox, which should be fine as this fallback is only needed there.
*/
body.mx_scrollbar_nooverlay {
.mx_AutoHideScrollbar {
overflow-y: hidden;
}
.mx_AutoHideScrollbar:hover {
overflow-y: auto;
}
/*
offset scrollbar width with negative margin-right
include before and after psuedo-elements here so they can
be used to do something interesting like scroll-indicating
gradients (see IndicatorScrollBar)
*/
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset,
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::before,
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after
{
margin-right: calc(-1 * var(--scrollbar-width));
}
}
// style the native scrollbars ...
// ... standard css scrollbars (firefox at time of writing)
.mx_AutoHideScrollbar {
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
scrollbar-width: thin;
}
// or fallback for webkit browsers
::-webkit-scrollbar {
width: 6px;
background-color: $scrollbar-track-color;
}
::-webkit-scrollbar-thumb {
background-color: $scrollbar-thumb-color;
border-radius: 3px;
}

11
res/css/structures/_ContextualMenu.scss
View file

@ -30,12 +30,11 @@ limitations under the License.
} }
.mx_ContextualMenu { .mx_ContextualMenu {
border: solid 1px $menu-border-color;
border-radius: 4px; border-radius: 4px;
box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);;
background-color: $menu-bg-color; background-color: $menu-bg-color;
color: $primary-fg-color; color: $primary-fg-color;
position: absolute; position: absolute;
padding: 6px;
font-size: 14px; font-size: 14px;
z-index: 5001; z-index: 5001;
} }
@ -51,7 +50,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-top: 8px solid transparent; border-top: 8px solid transparent;
border-left: 8px solid $menu-border-color; border-left: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
} }
@ -78,7 +77,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-top: 8px solid transparent; border-top: 8px solid transparent;
border-right: 8px solid $menu-border-color; border-right: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
} }
@ -105,7 +104,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-left: 8px solid transparent; border-left: 8px solid transparent;
border-bottom: 8px solid $menu-border-color; border-bottom: 8px solid $menu-bg-color;
border-right: 8px solid transparent; border-right: 8px solid transparent;
} }
@ -132,7 +131,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-left: 8px solid transparent; border-left: 8px solid transparent;
border-top: 8px solid $menu-border-color; border-top: 8px solid $menu-bg-color;
border-right: 8px solid transparent; border-right: 8px solid transparent;
} }

4
res/css/structures/_FilePanel.scss
View file

@ -16,11 +16,7 @@ limitations under the License.
.mx_FilePanel { .mx_FilePanel {
order: 2; order: 2;
flex: 1 1 0; flex: 1 1 0;
width: 100%;
overflow-y: auto; overflow-y: auto;
} }

12
res/css/structures/_GroupView.scss
View file

@ -15,10 +15,6 @@ limitations under the License.
*/ */
.mx_GroupView { .mx_GroupView {
max-width: 960px;
width: 100%;
margin-left: auto;
margin-right: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
@ -29,7 +25,6 @@ limitations under the License.
} }
.mx_GroupView_header { .mx_GroupView_header {
max-width: 960px;
min-height: 70px; min-height: 70px;
align-items: center; align-items: center;
display: flex; display: flex;
@ -39,6 +34,8 @@ limitations under the License.
.mx_GroupView_header_view { .mx_GroupView_header_view {
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
padding-bottom: 0px; padding-bottom: 0px;
padding-left: 8px;
padding-right: 8px;
} }
.mx_GroupView_header_avatar, .mx_GroupView_header_info { .mx_GroupView_header_avatar, .mx_GroupView_header_info {
@ -162,6 +159,11 @@ limitations under the License.
line-height: 2em; line-height: 2em;
} }
.mx_GroupView > .mx_MainSplit {
flex: 1;
display: flex;
}
.mx_GroupView_body { .mx_GroupView_body {
flex-grow: 1; flex-grow: 1;
} }

50
res/css/structures/_LeftPanel.scss
View file

@ -15,32 +15,22 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_LeftPanel {
position: relative;
display: flex;
flex-direction: column;
}
.mx_LeftPanel_container { .mx_LeftPanel_container {
display: flex; display: flex;
/* LeftPanel 235px */ /* LeftPanel 260px */
flex: 0 0 235px; min-width: 260px;
flex: 0 0 auto;
} }
.mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel { .mx_LeftPanel_container.collapsed {
/* TagPanel 60px + LeftPanel 235px */ min-width: unset;
flex: 0 0 295px; /* Collapsed LeftPanel 70px */
flex: 0 0 70px;
} }
.mx_LeftPanel_container_collapsed { .mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
/* Collapsed LeftPanel 60px */ /* TagPanel 70px + Collapsed LeftPanel 70px */
flex: 0 0 60px; flex: 0 0 140px;
}
.mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 60px + Collapsed LeftPanel 60px */
flex: 0 0 120px;
} }
.mx_LeftPanel_hideButton { .mx_LeftPanel_hideButton {
@ -51,8 +41,12 @@ limitations under the License.
cursor: pointer; cursor: pointer;
} }
.mx_LeftPanel_callView { .mx_LeftPanel {
flex: 1;
overflow-x: hidden;
display: flex;
flex-direction: column;
min-height: 0;
} }
.mx_LeftPanel .mx_AppTile_mini { .mx_LeftPanel .mx_AppTile_mini {
@ -68,7 +62,7 @@ limitations under the License.
z-index: 6; z-index: 6;
} }
.mx_LeftPanel.collapsed .mx_BottomLeftMenu { .mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
flex: 0 0 160px; flex: 0 0 160px;
margin-bottom: 9px; margin-bottom: 9px;
} }
@ -91,12 +85,6 @@ limitations under the License.
pointer-events: none; pointer-events: none;
} }
.collapsed .mx_RoleButton {
margin-right: 0px ! important;
padding-top: 3px ! important;
padding-bottom: 3px ! important;
}
.mx_BottomLeftMenu_options > div { .mx_BottomLeftMenu_options > div {
display: inline-block; display: inline-block;
} }
@ -115,7 +103,7 @@ limitations under the License.
margin-right: 0px; margin-right: 0px;
} }
.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings { .mx_LeftPanel_container.collapsed .mx_BottomLeftMenu_settings {
float: none; float: none;
} }
@ -124,7 +112,7 @@ limitations under the License.
flex: 0 0 50px; flex: 0 0 50px;
} }
.mx_LeftPanel.collapsed .mx_BottomLeftMenu { .mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
flex: 0 0 160px; flex: 0 0 160px;
} }

35
res/css/structures/_MatrixChat.scss
View file

@ -54,6 +54,7 @@ limitations under the License.
order: 2; order: 2;
flex: 1; flex: 1;
min-height: 0;
} }
.mx_MatrixChat_syncError { .mx_MatrixChat_syncError {
@ -68,26 +69,12 @@ limitations under the License.
transform: translateX(-50%); transform: translateX(-50%);
} }
.mx_MatrixChat .mx_LeftPanel { /* not the left panel, and not the resize handle, so the roomview/groupview/... */
order: 1; .mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_ResizeHandle) {
background-color: $secondary-accent-color;
flex: 0 0 235px;
}
.mx_MatrixChat .mx_LeftPanel.collapsed {
flex: 0 0 60px;
}
.mx_MatrixChat .mx_MatrixChat_middlePanel {
order: 2;
padding-left: 20px;
padding-right: 22px;
background-color: $primary-bg-color; background-color: $primary-bg-color;
flex: 1; flex: 1 1 0;
min-width: 0;
/* Experimental fix for https://github.com/vector-im/vector-web/issues/947 /* Experimental fix for https://github.com/vector-im/vector-web/issues/947
and https://github.com/vector-im/vector-web/issues/946. and https://github.com/vector-im/vector-web/issues/946.
@ -96,21 +83,9 @@ limitations under the License.
*/ */
overflow-x: auto; overflow-x: auto;
display: flex;
/* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari /* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari
needed height 100% all the way down to the HomePage. Height does not needed height 100% all the way down to the HomePage. Height does not
have to be auto, empirically. have to be auto, empirically.
*/ */
height: 100%; height: 100%;
} }
.mx_MatrixChat .mx_RightPanel {
order: 3;
flex: 0 0 235px;
}
.mx_MatrixChat .mx_RightPanel.collapsed {
flex: 0 0 122px;
}

36
res/css/structures/_MyGroups.scss
View file

@ -15,10 +15,6 @@ limitations under the License.
*/ */
.mx_MyGroups { .mx_MyGroups {
max-width: 960px;
margin-left: auto;
margin-right: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -34,6 +30,11 @@ limitations under the License.
flex-wrap: wrap; flex-wrap: wrap;
} }
.mx_MyGroups > :not(.mx_RoomHeader) {
max-width: 960px;
margin: 40px;
}
.mx_MyGroups_headerCard { .mx_MyGroups_headerCard {
flex: 1 0 50%; flex: 1 0 50%;
margin-bottom: 30px; margin-bottom: 30px;
@ -43,14 +44,31 @@ limitations under the License.
} }
.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button { .mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
flex: 0 0 auto;
margin-right: 13px; margin-right: 13px;
height: 50px; height: 40px;
width: 40px;
border-radius: 20px;
background-color: $roomheader-addroom-color;
position: relative;
&:before {
background-color: $accent-fg-color;
mask: url('$(res)/img/icons-create-room.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 80%;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
} }
.mx_MyGroups_headerCard_button object {
/* Otherwise the SVG object absorbs clicks and the button doesn't work */
pointer-events: none;
}
.mx_MyGroups_headerCard_header { .mx_MyGroups_headerCard_header {
font-weight: bold; font-weight: bold;

6
res/css/structures/_NotificationPanel.scss
View file

@ -16,11 +16,7 @@ limitations under the License.
.mx_NotificationPanel { .mx_NotificationPanel {
order: 2; order: 2;
flex: 1 1 0; flex: 1 1 0;
width: 100%;
overflow-y: auto; overflow-y: auto;
} }
@ -97,4 +93,4 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile_content { .mx_NotificationPanel .mx_EventTile_content {
margin-right: 0px; margin-right: 0px;
} }

85
res/css/structures/_RightPanel.scss
View file

@ -15,8 +15,10 @@ limitations under the License.
*/ */
.mx_RightPanel { .mx_RightPanel {
overflow-x: hidden;
flex: 0 0 auto;
position: relative; position: relative;
min-width: 250px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -25,59 +27,57 @@ limitations under the License.
order: 1; order: 1;
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
margin-right: 20px;
flex: 0 0 70px; flex: 0 0 52px;
} }
/** Fixme - factor this out with the main header **/ /** Fixme - factor this out with the main header **/
.mx_RightPanel_headerButtonGroup { .mx_RightPanel_headerButtonGroup {
margin-top: 6px; height: 100%;
display: flex; display: flex;
width: 100%;
background-color: $primary-bg-color; background-color: $primary-bg-color;
margin-left: 0px; padding: 0 9px;
align-items: center;
} }
.mx_RightPanel_headerButton { .mx_RightPanel_headerButton {
cursor: pointer; cursor: pointer;
flex: 0 0 auto; flex: 0 0 auto;
vertical-align: top; vertical-align: top;
padding-left: 4px; margin-top: 4px;
padding-left: 5px;
padding-right: 5px; padding-right: 5px;
text-align: center; text-align: center;
position: relative; position: relative;
border-bottom: 2px solid transparent;
} }
.mx_RightPanel_headerButton object { .mx_RightPanel_headerButton object {
pointer-events: none; pointer-events: none;
padding-bottom: 3px;
}
.mx_RightPanel_headerButton_badgeHighlight .mx_RightPanel_headerButton_badge {
color: $warning-color;
} }
.mx_RightPanel_headerButton_highlight { .mx_RightPanel_headerButton_highlight {
width: 25px; border-color: $button-bg-color;
height: 5px;
border-radius: 5px;
background-color: $accent-color;
opacity: 0.2;
} }
.mx_RightPanel_headerButton_badge { .mx_RightPanel_headerButton_badge {
font-size: 11px; font-size: 8px;
color: $accent-color; border-radius: 8px;
color: $accent-fg-color;
background-color: $accent-color;
font-weight: bold; font-weight: bold;
padding-bottom: 2px; position: absolute;
top: -4px;
left: 20px;
padding: 2px 4px;
} }
.mx_RightPanel_collapsebutton { .mx_RightPanel_collapsebutton {
flex: 1; flex: 1;
text-align: right; text-align: right;
margin-top: 20px; height: 16px;
border: none;
} }
.mx_RightPanel .mx_MemberList, .mx_RightPanel .mx_MemberList,
@ -92,46 +92,3 @@ limitations under the License.
order: 2; order: 2;
margin: auto; margin: auto;
} }
.mx_RightPanel_footer {
order: 3;
border-top: 1px solid $primary-hairline-color;
margin-right: 20px;
flex: 0 0 60px;
}
.mx_RightPanel_footer .mx_RightPanel_invite {
font-size: 14px;
color: $primary-fg-color;
padding-top: 13px;
padding-left: 5px;
cursor: pointer;
display: flex;
align-items: center;
}
.collapsed .mx_RightPanel_footer .mx_RightPanel_invite {
display: none;
}
.mx_RightPanel_invite .mx_RightPanel_icon object {
pointer-events: none;
}
.mx_RightPanel_invite .mx_RightPanel_message {
padding-left: 10px;
line-height: 18px;
}
.mx_MatrixChat_useCompactLayout {
.mx_RightPanel_footer {
flex: 0 0 50px;
}
.mx_RightPanel_footer .mx_RightPanel_invite {
line-height: 25px;
padding-top: 8px;
}
}

54
res/css/structures/_RoomDirectory.scss
View file

@ -14,29 +14,48 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_RoomDirectory { .mx_RoomDirectory_dialogWrapper > .mx_Dialog {
max-width: 960px; max-width: 960px;
width: 100%; height: 100%;
margin-left: auto; padding: 20px;
margin-right: auto; }
margin-bottom: 12px;
color: $primary-fg-color;
word-break: break-word;
.mx_RoomDirectory_dialog {
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mx_RoomDirectory .mx_RoomHeader_simpleHeader { .mx_RoomDirectory {
margin-left: 0px; margin-bottom: 12px;
color: $primary-fg-color;
word-break: break-word;
display: flex;
flex-direction: column;
flex: 1;
}
.mx_RoomDirectory .gm-scroll-view {
// little hack because gemini doesn't seem to detect
// the scrollbar width well in this instance
// when using css scrollbars
scrollbar-width: thin;
}
.mx_RoomDirectory_createRoom {
background-color: $button-bg-color;
border-radius: 4px;
padding: 8px;
color: $button-fg-color;
font-weight: 600;
position: absolute;
top: 0;
left: 0;
} }
.mx_RoomDirectory_list { .mx_RoomDirectory_list {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -45,22 +64,17 @@ limitations under the License.
} }
.mx_RoomDirectory_listheader { .mx_RoomDirectory_listheader {
display: table; display: flex;
table-layout: fixed;
width: 100%;
margin-top: 12px; margin-top: 12px;
margin-bottom: 12px; margin-bottom: 12px;
border-spacing: 5px;
} }
.mx_RoomDirectory_searchbox { .mx_RoomDirectory_searchbox {
display: table-cell; flex: 1 !important;
vertical-align: middle;
} }
.mx_RoomDirectory_listheader .mx_NetworkDropdown { .mx_RoomDirectory_listheader .mx_NetworkDropdown {
display: table-cell; flex: 0 0 200px;
width: 200px;
} }
.mx_RoomDirectory_tableWrapper { .mx_RoomDirectory_tableWrapper {

309
res/css/structures/_RoomSubList.scss
View file

@ -14,235 +14,168 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_RoomSubList { /* a word of explanation about the flex-shrink values employed here:
display: table; there are 3 priotized categories of screen real-estate grabbing,
table-layout: fixed; each with a flex-shrink difference of 4 order of magnitude,
width: 100%; so they ideally wouldn't affect each other.
lowest category: .mx_RoomSubList
flex-shrink: 10000000
distribute size of items within the same categery by their size
middle category: .mx_RoomSubList.resized-sized
flex-shrink: 1000
applied when using the resizer, will have a max-height set to it,
to limit the size
highest category: .mx_RoomSubList.resized-all
flex-shrink: 1
small flex-shrink value (1), is only added if you can drag the resizer so far
so in practice you can only assign this category if there is enough space.
*/
background-color: $roomsublist-background; .mx_RoomSubList {
display: flex;
flex-direction: column;
}
.mx_RoomSubList_nonEmpty .mx_AutoHideScrollbar_offset {
padding-bottom: 4px;
} }
.mx_RoomSubList_labelContainer { .mx_RoomSubList_labelContainer {
height: 31px; /* mx_RoomSubList_label height including border */ display: flex;
width: 235px; /* LHS Panel width */ flex-direction: row;
position: relative; align-items: center;
flex: 0 0 auto;
margin: 0 16px;
height: 36px;
} }
.mx_RoomSubList_label { .mx_RoomSubList_label {
position: relative; flex: 1;
cursor: pointer;
display: flex;
align-items: center;
padding: 0 6px;
}
.mx_RoomSubList_label > span {
flex: 1 1 auto;
text-transform: uppercase; text-transform: uppercase;
color: $roomsublist-label-fg-color; color: $roomsublist-label-fg-color;
font-weight: 600; font-weight: 700;
font-size: 12px; font-size: 12px;
width: 203px; /* padding + width = LHS Panel width */ margin-left: 8px;
height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */
padding-left: 16px; /* gutter */
padding-right: 16px; /* gutter */
padding-top: 6px;
padding-bottom: 6px;
cursor: pointer;
background-color: $secondary-accent-color;
}
.mx_RoomSubList_label.mx_RoomSubList_fixed {
position: fixed;
top: 0;
z-index: 5;
/* pointer-events: none; */
}
.collapsed .mx_RoomSubList_label {
height: 17px;
width: 28px; /* collapsed LHS Panel width */
}
.collapsed .mx_RoomSubList_labelContainer {
width: 28px; /* collapsed LHS Panel width */
}
.mx_RoomSubList_roomCount {
display: inline-block;
font-size: 12px;
font-weight: normal;
color: $accent-color;
padding-left: 5px;
text-transform: none;
}
.collapsed .mx_RoomSubList_roomCount {
display: none;
} }
.mx_RoomSubList_badge { .mx_RoomSubList_badge {
display: inline-block; flex: 0 0 auto;
min-width: 15px;
height: 15px;
position: absolute;
right: 8px; /*gutter */
top: 7px;
border-radius: 8px; border-radius: 8px;
color: $accent-fg-color; color: $accent-fg-color;
font-weight: 600; font-weight: 600;
font-size: 10px; font-size: 12px;
text-align: center; padding: 0 5px;
padding-top: 1px; background-color: $roomtile-name-color;
padding-left: 4px;
padding-right: 4px;
background-color: $accent-color;
} }
.mx_RoomSubList_label .mx_RoomSubList_badge:hover { .mx_RoomSubList_addRoom, .mx_RoomSubList_badge {
filter: brightness($focus-brightness); margin-left: 7px;
} }
/* .mx_RoomSubList_addRoom {
.collapsed .mx_RoomSubList_badge { background-color: $roomheader-addroom-color;
display: none; color: $roomsublist-background;
background-image: url('$(res)/img/icons-room-add.svg');
background-repeat: no-repeat;
background-position: center;
border-radius: 10px; // 16/2 + 2 padding
height: 16px;
flex: 0 0 16px;
background-clip: content-box;
} }
*/
.mx_RoomSubList_badgeHighlight { .mx_RoomSubList_badgeHighlight {
background-color: $warning-color; background-color: $warning-color;
} }
/* This is the bottom of the speech bubble */
.mx_RoomSubList_badgeHighlight:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
margin-left: 5px;
border-top: 5px solid $warning-color;
border-right: 7px solid transparent;
}
/* Hide the bottom of speech bubble */
.collapsed .mx_RoomSubList_badgeHighlight:after {
display: none;
}
.mx_RoomSubList_chevron { .mx_RoomSubList_chevron {
pointer-events: none; pointer-events: none;
position: absolute; background-image: url('$(res)/img/topleft-chevron.svg');
right: 41px; background-repeat: no-repeat;
top: 11px; transition: transform 0.2s ease-in;
width: 10px;
height: 10px;
background-position: center;
margin-left: 2px;
} }
.mx_RoomSubList_chevronDown { .mx_RoomSubList_chevronDown {
width: 0; transform: rotateZ(0deg);
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid $roomsublist-chevron-color;
} }
.mx_RoomSubList_chevronUp { .mx_RoomSubList_chevronUp {
width: 0; transform: rotateZ(180deg);
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 6px solid $roomsublist-chevron-color;
} }
.mx_RoomSubList_chevronRight { .mx_RoomSubList_chevronRight {
width: 0; transform: rotateZ(-90deg);
height: 0;
border-top: 5px solid transparent;
border-left: 6px solid $roomsublist-chevron-color;
border-bottom: 5px solid transparent;
} }
/* The overflow section */ .mx_RoomSubList_scroll {
.mx_RoomSubList_ellipsis { /* let rooms list grab as much space as it needs (auto),
display: block; potentially overflowing and showing a scrollbar */
line-height: 11px; flex: 0 1 auto;
height: 18px; padding: 0 8px;
position: relative;
cursor: pointer;
font-size: 13px;
background-color: $secondary-accent-color;
} }
.collapsed .mx_RoomSubList_ellipsis { // overflow indicators
height: 20px; .mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
&.mx_IndicatorScrollbar_topOverflow::before,
&.mx_IndicatorScrollbar_bottomOverflow::after {
position: sticky;
left: 0;
right: 0;
height: 35px;
content: "";
display: block;
z-index: 100;
pointer-events: none;
}
&.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
margin-top: -35px;
}
&.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
margin-bottom: -35px;
}
&.mx_IndicatorScrollbar_topOverflow::before {
top: 0;
background: linear-gradient(to top, rgba(242,245,248,0), rgba(242,245,248,1));
}
&.mx_IndicatorScrollbar_bottomOverflow::after {
bottom: 0;
background: linear-gradient(to bottom, rgba(242,245,248,0), rgba(242,245,248,1));
}
} }
.mx_RoomSubList_line { .collapsed {
display: inline-block;
width: 159px; .mx_RoomSubList_scroll {
border-top: dotted 2px $accent-color; padding: 0;
vertical-align: middle; }
.mx_RoomSubList_labelContainer {
margin-right: 14px;
margin-left: 2px;
}
.mx_RoomSubList_addRoom {
margin-left: 3px;
margin-right: 10px;
}
.mx_RoomSubList_label > span {
display: none;
}
} }
.collapsed .mx_RoomSubList_line {
display: none;
}
.mx_RoomSubList_more {
display: inline-block;
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
text-align: left;
color: $accent-color;
padding-left: 7px;
padding-right: 7px;
padding-left: 7px;
vertical-align: middle;
}
.collapsed .mx_RoomSubList_more {
display: none;
}
.mx_RoomSubList_moreBadge {
display: inline-block;
min-width: 15px;
height: 13px;
position: absolute;
right: 8px; /*gutter */
top: -2px;
border-radius: 8px;
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: $primary-bg-color;
vertical-align: middle;
}
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
background-color: $accent-color;
border: 0;
padding-top: 3px;
padding-left: 4px;
padding-right: 4px;
}
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
background-color: $warning-color;
border: 0;
padding-top: 3px;
padding-left: 4px;
padding-right: 4px;
}
.collapsed .mx_RoomSubList_moreBadge {
position: static;
margin-left: 16px;
margin-top: 2px;
}
.mx_RoomSubList_ellipsis .mx_RoomSubList_chevronDown {
position: relative;
top: 4px;
left: 2px;
}

99
res/css/structures/_RoomView.scss
View file

@ -16,23 +16,12 @@ limitations under the License.
.mx_RoomView { .mx_RoomView {
word-wrap: break-word; word-wrap: break-word;
position: relative;
display: flex; display: flex;
width: 100%;
flex-direction: column; flex-direction: column;
} }
.mx_RoomView .mx_RoomHeader {
order: 1;
flex: 0 0 70px;
}
.mx_RoomView_fileDropTarget { .mx_RoomView_fileDropTarget {
min-width: 0px; min-width: 0px;
max-width: 960px;
width: 100%; width: 100%;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
@ -50,7 +39,7 @@ limitations under the License.
border: 2px #e1dddd solid; border: 2px #e1dddd solid;
border-bottom: none; border-bottom: none;
position: absolute; position: absolute;
top: 70px; top: 52px;
bottom: 0px; bottom: 0px;
z-index: 3000; z-index: 3000;
} }
@ -63,42 +52,53 @@ limitations under the License.
} }
.mx_RoomView_auxPanel { .mx_RoomView_auxPanel {
order: 2;
min-width: 0px; min-width: 0px;
max-width: 960px;
width: 100%; width: 100%;
margin: 0px auto; margin: 0px auto;
overflow: auto; overflow: auto;
border-bottom: 1px solid $primary-hairline-color;
flex: 0 0 auto; flex: 0 0 auto;
} }
.mx_RoomView_auxPanel_fullHeight {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3000;
background-color: $primary-bg-color;
}
.mx_RoomView_auxPanel_apps { .mx_RoomView_auxPanel_apps {
max-width: 1920px ! important; max-width: 1920px ! important;
} }
.mx_RoomView_body { .mx_RoomView .mx_MainSplit {
order: 3;
flex: 1 1 0; flex: 1 1 0;
flex-direction: column;
display: flex; display: flex;
} }
.mx_RoomView_body .mx_RoomView_topUnreadMessagesBar { .mx_RoomView_body {
order: 1; position: relative; //for .mx_RoomView_auxPanel_fullHeight
display: flex;
flex-direction: column;
flex: 1;
} }
.mx_RoomView_body .mx_RoomView_messagePanel { .mx_RoomView_body .mx_RoomView_timeline {
order: 2; /* offset parent for mx_RoomView_topUnreadMessagesBar */
position: relative;
flex: 1;
display: flex;
flex-direction: column;
} }
.mx_RoomView_body .mx_RoomView_messagePanelSpinner { .mx_RoomView_body {
order: 2; .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner{
margin: auto; order: 2;
}
} }
.mx_RoomView_body .mx_RoomView_statusArea { .mx_RoomView_body .mx_RoomView_statusArea {
@ -114,10 +114,30 @@ limitations under the License.
overflow-y: auto; overflow-y: auto;
} }
.mx_RoomView_messageListWrapper { .mx_RoomView_messagePanelSearchSpinner {
max-width: 960px; flex: 1;
margin: auto; background-image: url('$(res)/img/typing-indicator-2x.gif');
background-position: center 367px;
background-size: 25px;
background-repeat: no-repeat;
position: relative;
}
.mx_RoomView_messagePanelSearchSpinner:before {
background-color: $greyed-fg-color;
mask: url('$(res)/img/feather-icons/search-input.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 50px;
content: '';
position: absolute;
top: 286px;
left: 0;
right: 0;
height: 50px;
}
.mx_RoomView_messageListWrapper {
min-height: 100%; min-height: 100%;
display: flex; display: flex;
@ -127,8 +147,15 @@ limitations under the License.
justify-content: flex-end; justify-content: flex-end;
} }
.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper { .mx_RoomView_searchResultsPanel {
justify-content: flex-start; .mx_RoomView_messageListWrapper {
justify-content: flex-start;
}
a {
text-decoration: none;
color: inherit;
}
} }
.mx_RoomView_empty { .mx_RoomView_empty {
@ -142,9 +169,12 @@ limitations under the License.
} }
.mx_RoomView_MessageList { .mx_RoomView_MessageList {
width: 100%;
list-style-type: none; list-style-type: none;
padding: 0px; padding: 18px;
margin: 0;
/* needed as min-height is set to clientHeight in ScrollPanel
to prevent shrinking when WhoIsTypingTile is hidden */
box-sizing: border-box;
} }
.mx_RoomView_MessageList li { .mx_RoomView_MessageList li {
@ -184,7 +214,6 @@ hr.mx_RoomView_myReadMarker {
} }
.mx_RoomView_statusAreaBox { .mx_RoomView_statusAreaBox {
max-width: 960px;
margin: auto; margin: auto;
min-height: 50px; min-height: 50px;
} }

55
res/css/structures/_SearchBox.scss
View file

@ -14,55 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_SearchBox {
height: 24px;
margin-left: 16px;
margin-right: 16px;
padding-top: 24px;
padding-bottom: 22px;
border-bottom: 1px solid $panel-divider-color;
display: flex;
}
.mx_SearchBox_searchButton {
margin-right: 10px;
margin-top: 5px;
pointer-events: none;
}
.mx_SearchBox_closeButton { .mx_SearchBox_closeButton {
cursor: pointer; cursor: pointer;
margin-top: -5px; background-image: url('$(res)/img/icons-close.svg');
} background-repeat: no-repeat;
width: 16px;
.mx_SearchBox_search { height: 16px;
flex: 1 1 auto; background-position: center;
width: 0px; padding: 9px;
font-family: $font-family;
font-size: 12px;
margin-top: -2px;
height: 24px;
border: 0px ! important;
/* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */
border: 0px;
}
.mx_SearchBox_minimise,
.mx_SearchBox_maximise {
margin-top: 3px;
cursor: pointer;
}
.mx_SearchBox_minimise {
margin-left: 10px;
}
.mx_SearchBox_maximise {
margin-left: 9px;
}
.mx_SearchBox object {
pointer-events: none;
} }

94
res/css/structures/_TabbedView.scss Normal file
View file

@ -0,0 +1,94 @@
/*
Copyright 2017 Travis Ralston
Copyright 2019 New Vector 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_TabbedView {
margin: 0;
padding: 0;
display: flex;
width: 100%;
height: 100%;
}
.mx_TabbedView_tabLabels {
width: 150px;
max-width: 150px;
height: 100%;
color: $tab-label-fg-color;
}
.mx_TabbedView_tabLabel {
vertical-align: text-top;
cursor: pointer;
display: block;
border-radius: 3px;
font-size: 12px;
font-weight: 600;
min-height: 20px; // use min-height instead of height to allow the label to overflow a bit
margin-bottom: 6px;
position: relative;
}
.mx_TabbedView_tabLabel_active {
background-color: $tab-label-active-bg-color;
color: $tab-label-active-fg-color;
}
// TODO: Remove temporary hack alongside "visit old settings" tab
.mx_TabbedView_tabLabel_TEMP_HACK {
background-color: orange;
}
.mx_TabbedView_maskedIcon {;
margin-left: 6px;
margin-right: 9px;
margin-top: 1px;
width: 14px;
height: 14px;
display: inline-block;
}
.mx_TabbedView_maskedIcon:before {
display: inline-block;
background-color: $tab-label-icon-bg-color;
mask-repeat: no-repeat;
mask-size: 14px;
width: 14px;
height: 18px;
mask-position: center;
content: '';
vertical-align: middle;
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
background-color: $tab-label-active-icon-bg-color;
}
.mx_TabbedView_tabLabel_text {
vertical-align: middle;
}
.mx_TabbedView_tabPanel {
width: calc(100% - 320px);
display: inline-block;
margin-left: 70px;
flex-grow: 1;
}
.mx_TabbedView_tabPanelContent {
flex-grow: 1;
min-width: 560px;
}

59
res/css/structures/_TagPanel.scss
View file

@ -15,8 +15,9 @@ limitations under the License.
*/ */
.mx_TagPanel { .mx_TagPanel {
flex: 0 0 60px; flex: 0 0 70px;
background-color: $tertiary-accent-color; background-color: $tagpanel-bg-color;
cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -38,6 +39,8 @@ limitations under the License.
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
display: none;
} }
.mx_TagPanel .mx_TagPanel_clearButton object { .mx_TagPanel .mx_TagPanel_clearButton object {
@ -50,6 +53,7 @@ limitations under the License.
height: 0px; height: 0px;
width: 42px; width: 42px;
border-bottom: 1px solid $panel-divider-color; border-bottom: 1px solid $panel-divider-color;
display: none;
} }
.mx_TagPanel .mx_TagPanel_scroller { .mx_TagPanel .mx_TagPanel_scroller {
@ -60,19 +64,21 @@ limitations under the License.
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 5px;
height: 100%; height: 100%;
} }
.mx_TagPanel .mx_TagTile { .mx_TagPanel .mx_TagTile {
padding: 6px 3px; padding-top: 9px;
opacity: 0.5; padding-bottom: 9px;
// opacity: 0.5;
position: relative; position: relative;
} }
.mx_TagPanel .mx_TagTile:focus, .mx_TagPanel .mx_TagTile:focus,
.mx_TagPanel .mx_TagTile:hover, .mx_TagPanel .mx_TagTile:hover,
.mx_TagPanel .mx_TagTile.mx_TagTile_selected { .mx_TagPanel .mx_TagTile.mx_TagTile_selected {
opacity: 1; // opacity: 1;
} }
.mx_TagPanel .mx_TagTile.mx_TagTile_selected { .mx_TagPanel .mx_TagTile.mx_TagTile_selected {
@ -83,12 +89,12 @@ limitations under the License.
.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar { .mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
border: 3px solid $accent-color; border: 3px solid $accent-color;
background-color: $accent-color; background-color: $accent-color;
border-radius: 60px; border-radius: 40px;
/* In case this is a "initial" avatar */ /* In case this is a "initial" avatar */
display: block; display: block;
height: 35px; height: 40px;
width: 35px; width: 40px;
} }
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus { .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
@ -119,11 +125,38 @@ limitations under the License.
} }
.mx_TagPanel_groupsButton { .mx_TagPanel_groupsButton {
margin-bottom: 17px; flex: 0;
margin-top: 18px; margin: 17px 0 3px 0;
height: 25px;
} }
.mx_TagPanel_groupsButton object { .mx_TagPanel_groupsButton > .mx_GroupsButton:before {
pointer-events: none; mask: url('$(res)/img/feather-icons/users.svg');
mask-position: center 11px;
}
.mx_TagPanel_groupsButton > .mx_TagPanel_report:before {
mask: url('$(res)/img/feather-icons/life-buoy.svg');
mask-position: center 9px;
}
.mx_TagPanel_groupsButton > .mx_AccessibleButton {
margin-bottom: 12px;
height: 40px;
width: 40px;
border-radius: 20px;
background-color: $roomheader-addroom-color;
position: relative;
/* overwrite mx_RoleButton inline-block */
display: block !important;
&:before {
background-color: $tagpanel-bg-color;
mask-repeat: no-repeat;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
} }

44
res/css/structures/_TopLeftMenuButton.scss Normal file
View file

@ -0,0 +1,44 @@
/*
Copyright 2018 New Vector 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_TopLeftMenuButton {
flex: 0 0 52px;
border-bottom: 1px solid $panel-divider-color;
color: $topleftmenu-color;
background-color: $primary-bg-color;
display: flex;
align-items: center;
min-width: 0;
padding: 0 7px;
overflow: hidden;
}
.mx_TopLeftMenuButton .mx_BaseAvatar {
margin: 0 7px;
}
.mx_TopLeftMenuButton_name {
margin: 0 7px;
font-size: 18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-weight: 600;
}
.mx_TopLeftMenuButton_chevron {
margin: 0 7px;
}

14
res/css/structures/_UserSettings.scss
View file

@ -173,7 +173,7 @@ limitations under the License.
padding: 0px; padding: 0px;
width: 240px; width: 240px;
color: $input-fg-color; color: $input-fg-color;
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif; font-family: $font-family;
font-size: 16px; font-size: 16px;
} }
@ -255,3 +255,15 @@ input.mx_UserSettings_phoneNumberField {
.mx_UserSettings_analyticsModal table { .mx_UserSettings_analyticsModal table {
margin: 10px 0px; margin: 10px 0px;
} }
// Temp styles to keep the layout moderately usable. Not perfect, but better
// than 30 options being impossible to understand.
.mx_UserSettings .mx_SettingsFlag {
height: 30px;
}
.mx_UserSettings .mx_SettingsFlag .mx_ToggleSwitch {
float: left;
margin-right: 5px;
}

142
res/css/structures/auth/_Login.scss Normal file
View file

@ -0,0 +1,142 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 New Vector 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_Login_field {
width: 100%;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
padding: 9px;
margin-bottom: 14px;
}
.mx_Login_submit {
@mixin mx_DialogButton;
width: 100%;
margin-top: 35px;
margin-bottom: 24px;
box-sizing: border-box;
text-align: center;
}
.mx_Login_submit:hover {
@mixin mx_DialogButton_hover;
}
.mx_Login_submit:disabled {
opacity: 0.3;
}
.mx_AuthBody a.mx_Login_sso_link:link,
.mx_AuthBody a.mx_Login_sso_link:hover,
.mx_AuthBody a.mx_Login_sso_link:visited {
color: $button-primary-fg-color;
}
.mx_Login_loader {
display: inline;
position: relative;
top: 2px;
left: 8px;
}
.mx_Login_loader .mx_Spinner {
display: inline;
}
.mx_Login_loader .mx_Spinner img {
width: 16px;
height: 16px;
}
.mx_Login_error {
color: $warning-color;
font-weight: bold;
text-align: center;
/*
height: 24px;
*/
margin-top: 12px;
margin-bottom: 12px;
}
.mx_Login_type_container {
display: flex;
margin-bottom: 14px;
color: $primary-fg-color;
}
.mx_Login_type_label {
flex-grow: 1;
line-height: 35px;
}
.mx_Login_type_dropdown {
display: inline-block;
min-width: 170px;
align-self: flex-end;
flex: 1 1 auto;
}
.mx_Login_field_prefix {
height: 38px;
padding: 0px 5px;
line-height: 38px;
background-color: #eee;
border: 1px solid #c7c7c7;
border-right: 0px;
border-radius: 3px 0px 0px 3px;
text-align: center;
}
.mx_Login_field_has_prefix {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.mx_Login_phoneSection {
display:flex;
}
.mx_Login_phoneCountry {
margin-bottom: 14px;
/* To override mx_Login_field_prefix */
text-align: left;
padding: 0px;
background-color: $primary-bg-color;
}
.mx_Login_field_prefix .mx_Dropdown_input {
/* To use prefix border instead of dropdown border */
border: 0;
}
.mx_Login_phoneCountry .mx_Dropdown_option {
/* To match height of mx_Login_field */
height: 38px;
line-height: 38px;
}
.mx_Login_phoneCountry .mx_Dropdown_option img {
margin: 3px;
vertical-align: top;
}

295
res/css/structures/login/_Login.scss
View file

@ -1,295 +0,0 @@
/*
Copyright 2015, 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.
*/
.mx_Login {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
.mx_Login h2 {
font-weight: 300;
margin-top: 32px;
margin-bottom: 20px;
}
.mx_Login_box {
width: 300px;
min-height: 450px;
padding-top: 50px;
padding-bottom: 50px;
margin: auto;
}
.mx_Login_logo {
text-align: center;
height: 150px;
margin-bottom: 45px;
}
.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: 280px;
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
padding: 9px;
margin-bottom: 14px;
}
.mx_Login_field_disabled {
opacity: 0.3;
}
.mx_Login_fieldLabel {
margin-top: -10px;
margin-left: 8px;
margin-bottom: 14px;
font-size: 13px;
opacity: 0.8;
}
.mx_Login_submit {
@mixin mx_DialogButton;
width: 100%;
margin-top: 35px;
margin-bottom: 24px;
}
.mx_Login_submit:hover {
@mixin mx_DialogButton_hover;
}
.mx_Login_submit:disabled {
opacity: 0.3;
}
.mx_Login_label {
font-size: 13px;
opacity: 0.8;
}
.mx_Login_checkbox,
.mx_Login_radio {
margin-right: 10px;
}
.mx_Login_create {
display: block;
text-align: center;
width: 100%;
font-size: 13px;
opacity: 0.8;
}
.mx_Login_create:link {
color: $primary-fg-color;
}
.mx_Login_links {
display: block;
text-align: center;
margin-top: 15px;
width: 100%;
font-size: 13px;
opacity: 0.8;
}
.mx_Login_links a:link {
color: $primary-fg-color;
}
.mx_Login_prompt {
padding-top: 15px;
padding-bottom: 15px;
font-size: 13px;
}
.mx_Login_forgot {
font-size: 15px;
}
.mx_Login_forgot:link {
color: $primary-fg-color;
}
.mx_Login_sso_link {
display: block;
text-align: center;
font-size: 15px;
margin-bottom: 20px;
}
.mx_Login_sso_link:link {
color: $primary-fg-color;
}
.mx_Login_loader {
display: inline;
position: relative;
top: 2px;
left: 8px;
}
.mx_Login_loader .mx_Spinner {
display: inline;
}
.mx_Login_loader .mx_Spinner img {
width: 16px;
height: 16px;
}
.mx_Login_error {
color: $warning-color;
font-weight: bold;
text-align: center;
/*
height: 24px;
*/
margin-top: 12px;
margin-bottom: 12px;
}
.mx_Login_type_container {
display: flex;
margin-bottom: 14px;
}
.mx_Login_type_label {
flex-grow: 1;
line-height: 35px;
}
.mx_Login_type_dropdown {
display: inline-block;
min-width: 170px;
align-self: flex-end;
flex: 1 1 auto;
}
.mx_Login_field_group {
display: flex;
}
.mx_Login_field_prefix {
height: 34px;
padding: 0px 5px;
line-height: 33px;
background-color: #eee;
border: 1px solid #c7c7c7;
border-right: 0px;
border-radius: 3px 0px 0px 3px;
text-align: center;
}
.mx_Login_field_suffix {
height: 34px;
padding: 0px 5px;
line-height: 33px;
background-color: #eee;
border: 1px solid #c7c7c7;
border-left: 0px;
border-radius: 0px 3px 3px 0px;
text-align: center;
flex-grow: 1;
}
.mx_Login_username {
height: 16px;
flex-shrink: 1;
min-width: 0px;
}
.mx_Login_phoneNumberField {
height: 16px;
}
.mx_Login_field_has_prefix {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.mx_Login_field_has_suffix {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.mx_Login_phoneSection {
display:flex;
}
.mx_Login_phoneCountry {
margin-bottom: 14px;
width: 150px;
/* To override mx_Login_field_prefix */
text-align: left;
padding: 0px;
background-color: $primary-bg-color;
}
.mx_Login_field_prefix .mx_Dropdown_input {
/* To use prefix border instead of dropdown border */
border: 0;
}
.mx_Login_phoneCountry .mx_Dropdown_option {
/*
To match height of mx_Login_field
33px + 2px border from mx_Dropdown_option = 35px
*/
height: 33px;
line-height: 33px;
}
.mx_Login_phoneCountry .mx_Dropdown_option img {
margin: 3px;
vertical-align: top;
}
.mx_Login_language {
margin-left: auto;
margin-right: auto;
min-width: 60%;
}
.mx_Login_language_div {
display: flex;
margin-top: 12px;
margin-bottom: 12px;
}

79
res/css/views/auth/_AuthBody.scss Normal file
View file

@ -0,0 +1,79 @@
/*
Copyright 2019 New Vector 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_AuthBody {
width: 500px;
background-color: $authpage-body-bg-color;
border-radius: 0 4px 4px 0;
padding: 25px 60px;
box-sizing: border-box;
font-size: 12px;
color: $authpage-body-color;
}
.mx_AuthBody h2 {
font-size: 24px;
font-weight: 600;
margin-top: 8px;
}
.mx_AuthBody h3 {
font-size: 14px;
font-weight: 600;
color: $primary-fg-color;
}
.mx_Auth_editServerDetails {
padding-left: 1em;
font-size: 12px;
font-weight: normal;
}
.mx_AuthBody .mx_Field input {
width: 100%;
box-sizing: border-box;
}
.mx_Auth_fieldRow {
display: flex;
margin-bottom: 10px;
}
.mx_Auth_fieldRow > * {
margin: 0 5px;
flex: 1;
}
.mx_Auth_fieldRow > *:first-child {
margin-left: 0;
}
.mx_Auth_fieldRow > *:last-child {
margin-right: 0;
}
.mx_AuthBody a:link,
.mx_AuthBody a:hover,
.mx_AuthBody a:visited {
color: $accent-color;
text-decoration: none;
}
.mx_Auth_changeFlow {
display: block;
text-align: center;
width: 100%;
}

9
res/css/structures/_LoginBox.scss → res/css/views/auth/_AuthButtons.scss
View file

@ -1,5 +1,6 @@
/* /*
Copyright 2017 OpenMarket Ltd Copyright 2017 OpenMarket Ltd
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -14,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_LoginBox { .mx_AuthButtons {
min-height: 24px; min-height: 24px;
height: unset !important; height: unset !important;
padding-top: 13px !important; padding-top: 13px !important;
@ -22,13 +23,13 @@ limitations under the License.
order: 4; order: 4;
} }
.mx_LoginBox_loginButton_wrapper { .mx_AuthButtons_loginButton_wrapper {
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
.mx_LoginBox_loginButton, .mx_AuthButtons_loginButton,
.mx_LoginBox_registerButton { .mx_AuthButtons_registerButton {
margin-top: 3px; margin-top: 3px;
height: 40px; height: 40px;
border: 0px; border: 0px;

30
res/css/views/auth/_AuthFooter.scss Normal file
View file

@ -0,0 +1,30 @@
/*
Copyright 2019 New Vector 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_AuthFooter {
text-align: center;
width: 100%;
font-size: 14px;
opacity: 0.72;
margin: 20px 0;
}
.mx_AuthFooter a:link,
.mx_AuthFooter a:hover,
.mx_AuthFooter a:visited {
color: $accent-fg-color;
margin: 0 22px;
}

23
res/css/views/auth/_AuthHeader.scss Normal file
View file

@ -0,0 +1,23 @@
/*
Copyright 2019 New Vector 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_AuthHeader {
display: flex;
flex-direction: column;
width: 206px;
padding: 25px 50px;
box-sizing: border-box;
}

24
res/css/views/auth/_AuthHeaderLogo.scss Normal file
View file

@ -0,0 +1,24 @@
/*
Copyright 2019 New Vector 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_AuthHeaderLogo {
margin-top: 15px;
flex: 1;
}
.mx_AuthHeaderLogo img {
width: 100%;
}

33
res/css/views/auth/_AuthPage.scss Normal file
View file

@ -0,0 +1,33 @@
/*
Copyright 2019 New Vector 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_AuthPage {
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
background-color: $authpage-bg-color;
}
.mx_AuthPage_modal {
display: flex;
margin: 100px auto auto;
border-radius: 4px;
// Not currently supported in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1178765
backdrop-filter: blur(10px);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
background-color: $authpage-modal-bg-color;
}

34
res/css/views/auth/_CountryDropdown.scss Normal file
View file

@ -0,0 +1,34 @@
/*
Copyright 2019 New Vector 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_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option {
padding: 0 3px;
}
.mx_CountryDropdown .mx_Dropdown_arrow {
padding-right: 3px;
}
.mx_CountryDropdown_shortOption {
display: inline-flex;
align-items: center;
height: 100%;
}
.mx_CountryDropdown_option {
display: flex;
align-items: center;
}

0
res/css/views/login/_InteractiveAuthEntryComponents.scss → res/css/views/auth/_InteractiveAuthEntryComponents.scss
View file

30
res/css/views/auth/_LanguageSelector.scss Normal file
View file

@ -0,0 +1,30 @@
/*
Copyright 2019 New Vector 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_Auth_language {
width: 100%;
}
.mx_Auth_language .mx_Dropdown_input {
border: none;
font-size: 14px;
font-weight: 600;
color: $authpage-lang-color;
}
.mx_Auth_language .mx_Dropdown_arrow::before {
background: $authpage-lang-color;
}

27
res/css/views/login/_ServerConfig.scss → res/css/views/auth/_ServerConfig.scss
View file

@ -14,23 +14,24 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_ServerConfig { .mx_ServerConfig_fields {
margin-top: 7px; display: flex;
margin: 1em 0;
} }
.mx_ServerConfig .mx_Login_field { .mx_ServerConfig_fields .mx_Field {
margin-top: 4px; flex: 1;
margin-bottom: 5px; margin: 0 5px;
}
.mx_ServerConfig_fields .mx_Field:first-child {
margin-left: 0;
}
.mx_ServerConfig_fields .mx_Field:last-child {
margin-right: 0;
} }
.mx_ServerConfig_help:link { .mx_ServerConfig_help:link {
opacity: 0.8; opacity: 0.8;
font-size: 13px;
font-weight: 300;
color: $primary-fg-color;
} }
.mx_ServerConfig_selector {
text-align: center;
width: 302px; // for fr i18n
}

69
res/css/views/auth/_ServerTypeSelector.scss Normal file
View file

@ -0,0 +1,69 @@
/*
Copyright 2019 New Vector 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_ServerTypeSelector {
display: flex;
margin-bottom: 28px;
}
.mx_ServerTypeSelector_type {
margin: 0 5px;
}
.mx_ServerTypeSelector_type:first-child {
margin-left: 0;
}
.mx_ServerTypeSelector_type:last-child {
margin-right: 0;
}
.mx_ServerTypeSelector_label {
text-align: center;
font-weight: 600;
color: $primary-fg-color;
margin: 8px 0;
}
.mx_ServerTypeSelector_type .mx_AccessibleButton {
padding: 10px;
border: 1px solid $input-border-color;
border-radius: 4px;
}
.mx_ServerTypeSelector_type.mx_ServerTypeSelector_type_selected .mx_AccessibleButton {
border-color: $input-valid-border-color;
}
.mx_ServerTypeSelector_logo {
display: flex;
justify-content: center;
height: 18px;
margin-bottom: 12px;
font-weight: 600;
color: $primary-fg-color;
}
.mx_ServerTypeSelector_logo > div {
display: flex;
width: 70%;
align-items: center;
justify-content: space-evenly;
}
.mx_ServerTypeSelector_description {
font-size: 10px;
}

15
res/css/views/avatars/_MemberStatusMessageAvatar.scss
View file

@ -14,7 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_MemberStatusMessageAvatar_hasStatus { .mx_MessageComposer_avatar .mx_BaseAvatar {
border: 2px solid $accent-color; padding: 2px;
border-radius: 40px; border: 1px solid transparent;
border-radius: 15px;
}
.mx_MessageComposer_avatar .mx_BaseAvatar_initial {
left: 2px;
}
.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar {
border-color: $accent-color;
} }

4
res/css/views/context_menus/_MessageContextMenu.scss
View file

@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_MessageContextMenu {
padding: 6px;
}
.mx_MessageContextMenu_field { .mx_MessageContextMenu_field {
padding: 3px 6px 3px 6px; padding: 3px 6px 3px 6px;
cursor: pointer; cursor: pointer;

4
res/css/views/context_menus/_RoomTileContextMenu.scss
View file

@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_RoomTileContextMenu {
padding: 6px;
}
.mx_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave { .mx_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave {
padding-top: 8px; padding-top: 8px;
padding-right: 20px; padding-right: 20px;

58
res/css/views/context_menus/_StatusMessageContextMenu.scss
View file

@ -14,42 +14,52 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_StatusMessageContextMenu_message { .mx_StatusMessageContextMenu {
display: inline-block; padding: 10px;
border-radius: 3px 0 0 3px; }
.mx_StatusMessageContextMenu_form {
display: flex;
flex-direction: column;
}
input.mx_StatusMessageContextMenu_message {
border-radius: 4px;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
font-size: 13px; padding: 6.5px 11px;
padding: 7px 7px 7px 9px; background-color: $primary-bg-color;
width: 135px; font-weight: normal;
background-color: $primary-bg-color !important; margin: 0 0 10px;
} }
.mx_StatusMessageContextMenu_submit { .mx_StatusMessageContextMenu_message::placeholder {
display: inline-block; color: $memberstatus-placeholder-color;
} }
.mx_StatusMessageContextMenu_submitFaded { .mx_StatusMessageContextMenu_actionContainer {
opacity: 0.5; display: flex;
} }
.mx_StatusMessageContextMenu_submit img { .mx_StatusMessageContextMenu_submit,
vertical-align: middle; .mx_StatusMessageContextMenu_clear {
margin-left: 8px; @mixin mx_DialogButton;
align-self: start;
font-size: 12px;
padding: 6px 1em;
border: 1px solid transparent;
margin-right: 10px;
} }
.mx_StatusMessageContextMenu hr { .mx_StatusMessageContextMenu_submit[disabled] {
border: 0.5px solid $menu-border-color; opacity: 0.49;
}
.mx_StatusMessageContextMenu_clearIcon {
margin: 5px 15px 5px 5px;
vertical-align: middle;
} }
.mx_StatusMessageContextMenu_clear { .mx_StatusMessageContextMenu_clear {
padding: 2px; color: $warning-color;
background-color: transparent;
border: 1px solid $warning-color;
} }
.mx_StatusMessageContextMenu_hasStatus .mx_StatusMessageContextMenu_clear { .mx_StatusMessageContextMenu_actionContainer .mx_Spinner {
color: $warning-color; justify-content: start;
} }

63
res/css/views/context_menus/_TopLeftMenu.scss Normal file
View file

@ -0,0 +1,63 @@
/*
Copyright 2018 New Vector 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_TopLeftMenu {
min-width: 180px;
border-radius: 4px;
.mx_TopLeftMenu_section:not(:last-child) {
border-bottom: 1px solid $menu-border-color;
}
.mx_TopLeftMenu_section {
list-style: none;
margin: 5px 0;
padding: 0;
li.mx_TopLeftMenu_icon_settings::after {
mask-image: url('$(res)/img/feather-icons/settings.svg');
}
li.mx_TopLeftMenu_icon_signout::after {
mask-image: url('$(res)/img/feather-icons/sign-out.svg');
}
li::after {
mask-repeat: no-repeat;
mask-position: 0 center;
mask-size: 16px;
position: absolute;
width: 16px;
height: 16px;
content: "";
top: 5px;
left: 14px;
background-color: $primary-fg-color;
}
li {
position: relative;
cursor: pointer;
white-space: nowrap;
padding: 5px 20px 5px 43px;
}
li:hover {
background-color: $menu-selected-color;
}
}
}

2
res/css/views/dialogs/_DevtoolsDialog.scss
View file

@ -61,7 +61,7 @@ limitations under the License.
padding: 0; padding: 0;
width: 240px; width: 240px;
color: $input-fg-color; color: $input-fg-color;
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif; font-family: $font-family;
font-size: 16px; font-size: 16px;
} }

5
res/css/views/dialogs/_EncryptedEventDialog.scss
View file

@ -14,10 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_EncryptedEventDialog .mx_MemberDeviceInfo { .mx_EncryptedEventDialog .mx_DeviceVerifyButtons {
float: right; float: right;
padding: 0px; padding: 0px;
margin-right: 42px; margin-right: 42px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
} }
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton { .mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {

34
res/css/views/dialogs/_RoomSettingsDialog.scss Normal file
View file

@ -0,0 +1,34 @@
/*
Copyright 2019 New Vector 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.
*/
// ICONS
// ==========================================================
.mx_RoomSettingsDialog_settingsIcon:before {
mask-image: url('$(res)/img/feather-icons/settings.svg');
}
.mx_RoomSettingsDialog_securityIcon:before {
mask-image: url('$(res)/img/feather-icons/lock.svg');
}
.mx_RoomSettingsDialog_rolesIcon:before {
mask-image: url('$(res)/img/feather-icons/users-sm.svg');
}
.mx_RoomSettingsDialog_warningIcon:before {
mask-image: url('$(res)/img/feather-icons/warning-triangle.svg');
}

70
res/css/views/dialogs/_SettingsDialog.scss Normal file
View file

@ -0,0 +1,70 @@
/*
Copyright 2019 New Vector 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_SettingsDialog {
.mx_Dialog {
max-width: 784px; // 900px - 58px (left padding) - 58px (right padding)
width: 80%;
height: 80%;
border-radius: 4px;
.mx_TabbedView_tabLabels {
// Force the sidebar to be always visible, letting the rest of the content scroll
position: fixed;
}
.mx_TabbedView_tabPanel {
max-width: 485px;
margin-left: 206px; // 70px margin + 136px for the sidebar
}
.mx_SettingsDialog_header {
font-size: 24px;
display: block;
text-align: center;
color: $dialog-title-fg-color;
margin-top: 16px;
margin-bottom: 24px;
padding: 0;
}
.mx_SettingsDialog_close {
position: absolute;
top: 16px;
right: 25px;
}
.mx_SettingsDialog_closeIcon {
width: 16px;
height: 16px;
display: inline-block;
}
.mx_SettingsDialog_closeIcon:before {
mask: url('$(res)/img/feather-icons/cancel.svg');
background-color: $dialog-close-fg-color;
mask-repeat: no-repeat;
mask-size: 16px;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
}

50
res/css/views/dialogs/_UserSettingsDialog.scss Normal file
View file

@ -0,0 +1,50 @@
/*
Copyright 2019 New Vector 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.
*/
// ICONS
// ==========================================================
.mx_UserSettingsDialog_settingsIcon:before {
mask-image: url('$(res)/img/feather-icons/settings.svg');
}
.mx_UserSettingsDialog_voiceIcon:before {
mask-image: url('$(res)/img/feather-icons/phone.svg');
}
.mx_UserSettingsDialog_bellIcon:before {
mask-image: url('$(res)/img/feather-icons/notifications.svg');
}
.mx_UserSettingsDialog_preferencesIcon:before {
mask-image: url('$(res)/img/feather-icons/sliders.svg');
}
.mx_UserSettingsDialog_securityIcon:before {
mask-image: url('$(res)/img/feather-icons/lock.svg');
}
.mx_UserSettingsDialog_helpIcon:before {
mask-image: url('$(res)/img/feather-icons/help-circle.svg');
}
.mx_UserSettingsDialog_labsIcon:before {
mask-image: url('$(res)/img/feather-icons/flag.svg');
}
.mx_UserSettingsDialog_flairIcon:before {
mask-image: url('$(res)/img/feather-icons/flair.svg');
}

10
res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
View file

@ -14,8 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_CreateKeyBackupDialog { .mx_CreateKeyBackupDialog .mx_Dialog_title {
padding-right: 40px; /* TODO: Consider setting this for all dialog titles. */
margin-bottom: 1em;
} }
.mx_CreateKeyBackupDialog_primaryContainer { .mx_CreateKeyBackupDialog_primaryContainer {
@ -79,3 +80,8 @@ limitations under the License.
display: flex; display: flex;
align-items: center; align-items: center;
} }
.mx_CreateKeyBackupDialog_recoveryKeyButtons button {
flex: 1;
white-space: nowrap;
}

8
res/css/views/dialogs/keybackup/_NewRecoveryMethodDialog.scss → res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss
View file

@ -14,17 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_NewRecoveryMethodDialog .mx_Dialog_title { .mx_KeyBackupFailedDialog .mx_Dialog_title {
margin-bottom: 32px; margin-bottom: 32px;
} }
.mx_NewRecoveryMethodDialog_title { .mx_KeyBackupFailedDialog_title {
position: relative; position: relative;
padding-left: 45px; padding-left: 45px;
padding-bottom: 10px; padding-bottom: 10px;
&:before { &:before {
mask: url("../../../img/e2e/lock-warning.svg"); mask: url("$(res)/img/e2e/lock-warning.svg");
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-color: $primary-fg-color; background-color: $primary-fg-color;
content: ""; content: "";
@ -36,6 +36,6 @@ limitations under the License.
} }
} }
.mx_NewRecoveryMethodDialog .mx_Dialog_buttons { .mx_KeyBackupFailedDialog .mx_Dialog_buttons {
margin-top: 36px; margin-top: 36px;
} }

6
res/css/views/directory/_NetworkDropdown.scss
View file

@ -35,13 +35,13 @@ limitations under the License.
height: 0; height: 0;
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 14px; top: 16px;
width: 0 width: 0
} }
.mx_NetworkDropdown_networkoption { .mx_NetworkDropdown_networkoption {
height: 35px; height: 37px;
line-height: 35px; line-height: 37px;
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
overflow: hidden; overflow: hidden;

55
res/css/views/elements/_AccessibleButton.scss
View file

@ -16,9 +16,62 @@ limitations under the License.
.mx_AccessibleButton:focus { .mx_AccessibleButton:focus {
outline: 0; outline: 0;
filter: brightness($focus-brightness);
} }
.mx_AccessibleButton { .mx_AccessibleButton {
cursor: pointer; cursor: pointer;
}
.mx_AccessibleButton_disabled {
cursor: default;
}
.mx_AccessibleButton_hasKind {
padding: 7px 18px;
text-align: center;
border-radius: 4px;
display: inline-block;
font-size: 14px;
}
.mx_AccessibleButton_kind_primary {
color: $button-primary-fg-color;
background-color: $button-primary-bg-color;
}
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
color: $button-primary-disabled-fg-color;
background-color: $button-primary-disabled-bg-color;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
padding: 5px 12px;
color: $button-primary-fg-color;
background-color: $button-primary-bg-color;
}
.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
color: $button-primary-disabled-fg-color;
background-color: $button-primary-disabled-bg-color;
}
.mx_AccessibleButton_kind_danger {
color: $button-danger-fg-color;
background-color: $button-danger-bg-color;
}
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
padding: 5px 12px;
color: $button-danger-fg-color;
background-color: $button-danger-bg-color;
}
.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
} }

34
res/css/views/elements/_DirectorySearchBox.scss
View file

@ -15,26 +15,10 @@ limitations under the License.
*/ */
.mx_DirectorySearchBox { .mx_DirectorySearchBox {
position: relative;
border-radius: 3px;
border: 1px solid $strong-input-border-color;
}
.mx_DirectorySearchBox_container {
display: flex; display: flex;
padding-left: 9px; padding-left: 9px;
padding-right: 9px; padding-right: 9px;
} margin: 0 5px 0 0 !important;
.mx_DirectorySearchBox_input {
flex-grow: 1;
border: 0;
padding: 0;
font-weight: 300;
font-size: 13px;
}
input[type=text].mx_DirectorySearchBox_input:focus {
border: 0;
} }
.mx_DirectorySearchBox_joinButton { .mx_DirectorySearchBox_joinButton {
@ -44,7 +28,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
padding-right: 10px; padding-right: 10px;
background-color: $plinth-bg-color; background-color: $plinth-bg-color;
border-radius: 3px; border-radius: 3px;
background-image: url('../../img/icon-return.svg'); background-image: url('$(res)/img/icon-return.svg');
background-position: 8px 70%; background-position: 8px 70%;
background-repeat: no-repeat; background-repeat: no-repeat;
text-indent: 18px; text-indent: 18px;
@ -54,16 +38,12 @@ input[type=text].mx_DirectorySearchBox_input:focus {
cursor: pointer; cursor: pointer;
} }
.mx_DirectorySearchBox_clear_wrapper {
display: table-cell;
}
.mx_DirectorySearchBox_clear { .mx_DirectorySearchBox_clear {
display: inline-block; background-color: $warning-color;
vertical-align: middle; mask: url('$(res)/img/cancel.svg');
background: url('../../img/icon_context_delete.svg'); mask-repeat: no-repeat;
background-position: 0 50%; mask-position: center;
background-repeat: no-repeat; mask-size: 10px;
width: 15px; width: 15px;
height: 15px; height: 15px;
cursor: pointer; cursor: pointer;

35
res/css/views/elements/_Dropdown.scss
View file

@ -23,11 +23,12 @@ limitations under the License.
} }
.mx_Dropdown_input { .mx_Dropdown_input {
display: flex;
align-items: center;
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
border: 1px solid $strong-input-border-color; border: 1px solid $strong-input-border-color;
font-weight: 300; font-size: 12px;
font-size: 13px;
user-select: none; user-select: none;
} }
@ -41,19 +42,23 @@ limitations under the License.
} }
.mx_Dropdown_arrow { .mx_Dropdown_arrow {
border-color: $primary-fg-color transparent transparent;
border-style: solid;
border-width: 5px 5px 0;
display: block; display: block;
height: 0; position: relative;
position: absolute; width: 10px;
right: 10px; height: 6px;
top: 14px; padding-right: 8px;
width: 0
} }
.mx_Dropdown.left_aligned .mx_Dropdown_arrow { .mx_Dropdown_arrow::before {
left: 10px; content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
mask-repeat: no-repeat;
background: $primary-fg-color;
} }
.mx_Dropdown_input > .mx_Dropdown_option { .mx_Dropdown_input > .mx_Dropdown_option {
@ -62,10 +67,6 @@ limitations under the License.
white-space: nowrap; white-space: nowrap;
} }
.mx_Dropdown.left_aligned .mx_Dropdown_input > .mx_Dropdown_option {
padding-left: 25px;
}
.mx_Dropdown_option { .mx_Dropdown_option {
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
@ -81,7 +82,7 @@ limitations under the License.
.mx_Dropdown_option img { .mx_Dropdown_option img {
margin: 5px; margin: 5px;
width: 27px; width: 16px;
vertical-align: middle; vertical-align: middle;
} }

95
res/css/views/elements/_Field.scss Normal file
View file

@ -0,0 +1,95 @@
/*
Copyright 2019 New Vector 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.
*/
/* TODO: Consider unifying with general input styles in _dharma.scss */
.mx_Field {
position: relative;
margin: 1em 0;
}
.mx_Field input,
.mx_Field select,
.mx_Field textarea {
font-weight: normal;
font-family: $font-family;
border-radius: 4px;
transition: border-color 0.25s;
border: 1px solid $input-border-color;
padding: 8px 9px;
}
.mx_Field input:focus,
.mx_Field select:focus,
.mx_Field textarea:focus {
outline: 0;
border-color: $input-focused-border-color;
}
.mx_Field input::placeholder,
.mx_Field textarea::placeholder {
transition: color 0.25s ease-in 0s;
color: transparent;
}
.mx_Field input:placeholder-shown:focus::placeholder,
.mx_Field textarea:placeholder-shown:focus::placeholder {
transition: color 0.25s ease-in 0.1s;
color: $greyed-fg-color;
}
.mx_Field label {
transition:
font-size 0.25s ease-out 0.1s,
color 0.25s ease-out 0.1s,
top 0.25s ease-out 0.1s,
background-color 0.25s ease-out 0.1s;
color: $primary-fg-color;
background-color: transparent;
font-size: 14px;
position: absolute;
left: 0px;
top: 0px;
margin: 7px 8px;
padding: 2px;
}
.mx_Field input:focus + label,
.mx_Field input:not(:placeholder-shown) + label,
.mx_Field textarea:focus + label,
.mx_Field textarea:not(:placeholder-shown) + label,
.mx_Field select + label /* Always show a select's label on top to not collide with the value */ {
transition:
font-size 0.25s ease-out 0s,
color 0.25s ease-out 0s,
top 0.25s ease-out 0s,
background-color 0.25s ease-out 0s;
font-size: 10px;
top: -14px;
background-color: $field-focused-label-bg-color;
}
.mx_Field input:focus + label,
.mx_Field select:focus + label,
.mx_Field textarea:focus + label {
color: $input-focused-border-color;
}
.mx_Field select:disabled,
.mx_Field input:disabled {
background-color: $field-focused-label-bg-color;
color: $greyed-fg-color;
}

34
res/css/views/elements/_HexVerify.scss Normal file
View file

@ -0,0 +1,34 @@
/*
Copyright 2019 New Vector 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_HexVerify {
text-align: center;
}
.mx_HexVerify_pair {
display: inline-block;
font-weight: bold;
padding-left: 3px;
padding-right: 3px;
}
.mx_HexVerify_pair_verified {
color: $accent-color;
}
.mx_HexVerify_pair:hover{
color: $accent-color;
}

2
res/css/views/elements/_ImageView.scss
View file

@ -50,7 +50,7 @@ limitations under the License.
max-height: 100%; max-height: 100%;
/* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */ /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
object-fit: contain; object-fit: contain;
/* background-image: url('../../img/trans.png'); */ /* background-image: url('$(res)/img/trans.png'); */
pointer-events: all; pointer-events: all;
} }

51
res/css/views/elements/_ResizeHandle.scss Normal file
View file

@ -0,0 +1,51 @@
/*
Copyright 2018 New Vector 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_ResizeHandle {
cursor: row-resize;
flex: 0 0 auto;
z-index: 100;
}
.mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -5px;
padding: 0 5px;
cursor: col-resize;
}
.mx_ResizeHandle.mx_ResizeHandle_vertical {
margin: -5px 0;
padding: 5px 0;
cursor: row-resize;
}
.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -10px 0 0;
padding: 0 10px 0 0;
}
.mx_ResizeHandle > div {
background: $panel-divider-color;
}
.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
width: 1px;
height: 100%;
}
.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
height: 1px;
}

12
res/css/views/elements/_RichText.scss
View file

@ -19,6 +19,11 @@
cursor: pointer; cursor: pointer;
} }
/* More specific to override `.markdown-body a` text-decoration */
.mx_EventTile_content .markdown-body a.mx_Pill {
text-decoration: none;
}
/* More specific to override `.markdown-body a` color */ /* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_UserPill, .mx_EventTile_content .markdown-body a.mx_UserPill,
.mx_UserPill { .mx_UserPill {
@ -31,7 +36,9 @@
background-color: $accent-color ! important; background-color: $accent-color ! important;
} }
/* More specific to override `.markdown-body a` color */
.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me, .mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
.mx_EventTile_content .markdown-body a.mx_AtRoomPill,
.mx_EventTile_content .mx_AtRoomPill, .mx_EventTile_content .mx_AtRoomPill,
.mx_MessageComposer_input .mx_AtRoomPill { .mx_MessageComposer_input .mx_AtRoomPill {
color: $accent-fg-color; color: $accent-fg-color;
@ -72,6 +79,11 @@
.mx_Markdown_ITALIC { .mx_Markdown_ITALIC {
font-style: italic; font-style: italic;
// compensate for Nunito italics being terrible
// https://github.com/google/fonts/issues/1726
transform: skewX(-14deg);
display: inline-block;
} }
.mx_Markdown_CODE { .mx_Markdown_CODE {

53
res/css/views/elements/_ToggleSwitch.scss Normal file
View file

@ -0,0 +1,53 @@
/*
Copyright 2019 New Vector 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_ToggleSwitch {
transition: background-color 0.20s ease-out 0.1s;
width: 48px;
height: 24px;
border-radius: 14px;
background-color: $togglesw-off-color;
position: relative;
opacity: 0.5;
}
.mx_ToggleSwitch_enabled {
cursor: pointer;
opacity: 1;
}
.mx_ToggleSwitch.mx_ToggleSwitch_on {
background-color: $togglesw-on-color;
}
.mx_ToggleSwitch_ball {
transition: left 0.15s ease-out 0.1s;
margin: 2px;
width: 20px;
height: 20px;
border-radius: 20px;
background-color: $togglesw-ball-color;
position: absolute;
top: 0;
}
.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
left: 2px;
}
.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
left: 23px; // 48px switch - 20px ball - 5px padding = 23px
}

21
res/css/views/groups/_GroupPublicityToggle.scss
View file

@ -20,23 +20,14 @@ limitations under the License.
margin: 8px; margin: 8px;
} }
.mx_GroupPublicity_toggle > label {
display: flex;
align-items: flex-start;
}
.mx_GroupPublicity_toggle > label,
.mx_GroupPublicity_toggle .mx_GroupTile {
width: 50%;
}
.mx_GroupPublicity_toggle input {
margin-right: 8px;
vertical-align: -4px;
}
.mx_GroupPublicity_toggle .mx_GroupTile { .mx_GroupPublicity_toggle .mx_GroupTile {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
cursor: pointer; cursor: pointer;
box-sizing: border-box;
width: 100%;
}
.mx_GroupPublicity_toggle .mx_ToggleSwitch {
float: right;
} }

6
res/css/views/groups/_GroupRoomList.scss
View file

@ -18,4 +18,10 @@ limitations under the License.
position: relative; position: relative;
color: $primary-fg-color; color: $primary-fg-color;
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
}
.mx_GroupRoomList_wrapper {
padding: 10px;
} }

1
res/css/views/groups/_GroupUserSettings.scss
View file

@ -18,6 +18,5 @@ limitations under the License.
height: 200px; height: 200px;
border: 1px solid $primary-hairline-color; border: 1px solid $primary-hairline-color;
border-radius: 3px; border-radius: 3px;
margin-right: 32px;
overflow: hidden; overflow: hidden;
} }

21
res/css/views/messages/_DateSeparator.scss
View file

@ -16,10 +16,21 @@ limitations under the License.
.mx_DateSeparator { .mx_DateSeparator {
clear: both; clear: both;
margin-top: 32px; margin: 4px 0;
margin-bottom: 8px; display: flex;
margin-left: 63px; align-items: center;
padding-bottom: 6px; font-size: 14px;
border-bottom: 1px solid $primary-hairline-color; color: $roomtopic-color;
} }
.mx_DateSeparator > hr {
flex: 1 1 0;
height: 0;
border: none;
border-bottom: 1px solid $panel-divider-color;
}
.mx_DateSeparator > date {
margin: 0 25px;
flex: 0 0 auto;
}

2
res/css/views/messages/_MImageBody.scss
View file

@ -56,4 +56,6 @@ limitations under the License.
border-radius: 5px; border-radius: 5px;
background: $imagebody-giflabel; background: $imagebody-giflabel;
border: 2px solid $imagebody-giflabel-border; border: 2px solid $imagebody-giflabel-border;
color: $imagebody-giflabel-color;
pointer-events: none;
} }

38
res/css/views/messages/_SenderProfile.scss
View file

@ -13,3 +13,41 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_SenderProfile_name {
font-weight: 600;
}
.mx_SenderProfile_color1 {
color: $username-variant1-color;
}
.mx_SenderProfile_color2 {
color: $username-variant2-color;
}
.mx_SenderProfile_color3 {
color: $username-variant3-color;
}
.mx_SenderProfile_color4 {
color: $username-variant4-color;
}
.mx_SenderProfile_color5 {
color: $username-variant5-color;
}
.mx_SenderProfile_color6 {
color: $username-variant6-color;
}
.mx_SenderProfile_color7 {
color: $username-variant7-color;
}
.mx_SenderProfile_color8 {
color: $username-variant8-color;
}

50
res/css/views/rooms/_AuxPanel.scss Normal file
View file

@ -0,0 +1,50 @@
/*
Copyright 2018 New Vector 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.
*/
.m_RoomView_auxPanel_stateViews {
padding: 5px;
padding-left: 19px;
border-bottom: 1px solid #e5e5e5;
}
.m_RoomView_auxPanel_stateViews_span a {
text-decoration: none;
color: inherit;
}
.m_RoomView_auxPanel_stateViews_span[data-severity=warning] {
font-weight: bold;
color: orange;
}
.m_RoomView_auxPanel_stateViews_span[data-severity=alert] {
font-weight: bold;
color: red;
}
.m_RoomView_auxPanel_stateViews_span[data-severity=normal] {
font-weight: normal;
}
.m_RoomView_auxPanel_stateViews_span[data-severity=notice] {
font-weight: normal;
color: $settings-grey-fg-color;
}
.m_RoomView_auxPanel_stateViews_delim {
padding: 0 5px;
color: $settings-grey-fg-color;
}

32
res/css/views/rooms/_EntityTile.scss
View file

@ -15,12 +15,19 @@ limitations under the License.
*/ */
.mx_EntityTile { .mx_EntityTile {
display: table-row; display: flex;
position: relative; align-items: center;
color: $primary-fg-color; color: $primary-fg-color;
cursor: pointer; cursor: pointer;
} }
.mx_EntityTile:hover {
background-image: url('$(res)/img/member_chevron.png');
background-position: center right 10px;
background-repeat: no-repeat;
padding-right: 30px;
}
.mx_EntityTile_invite { .mx_EntityTile_invite {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
@ -30,12 +37,10 @@ limitations under the License.
.mx_EntityTile_avatar, .mx_EntityTile_avatar,
.mx_GroupRoomTile_avatar { .mx_GroupRoomTile_avatar {
display: table-cell;
padding-left: 3px; padding-left: 3px;
padding-right: 12px; padding-right: 12px;
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
vertical-align: middle;
width: 36px; width: 36px;
height: 36px; height: 36px;
position: relative; position: relative;
@ -51,32 +56,21 @@ limitations under the License.
.mx_EntityTile_name, .mx_EntityTile_name,
.mx_GroupRoomTile_name { .mx_GroupRoomTile_name {
display: table-cell; flex: 1 1 0;
vertical-align: middle;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 14px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
max-width: 155px;
} }
.mx_EntityTile_details { .mx_EntityTile_details {
display: table-cell; overflow: hidden;
padding-right: 14px;
vertical-align: middle;
} }
.mx_EntityTile_name_hover { .mx_EntityTile_name_hover {
font-size: 13px; font-size: 13px;
} }
.mx_EntityTile_chevron {
margin-top: 8px;
margin-right: -4px;
margin-left: 6px;
float: right;
}
.mx_EntityTile_ellipsis .mx_EntityTile_name { .mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic; font-style: italic;
color: $primary-fg-color; color: $primary-fg-color;
@ -87,6 +81,7 @@ limitations under the License.
color: $primary-fg-color; color: $primary-fg-color;
} }
/*
.mx_EntityTile_unavailable .mx_EntityTile_avatar, .mx_EntityTile_unavailable .mx_EntityTile_avatar,
.mx_EntityTile_unavailable .mx_EntityTile_name, .mx_EntityTile_unavailable .mx_EntityTile_name,
.mx_EntityTile_unavailable .mx_EntityTile_name_hover, .mx_EntityTile_unavailable .mx_EntityTile_name_hover,
@ -110,6 +105,7 @@ limitations under the License.
{ {
opacity: 0.25; opacity: 0.25;
} }
*/
.mx_EntityTile_subtext { .mx_EntityTile_subtext {
font-size: 11px; font-size: 11px;
@ -118,5 +114,3 @@ limitations under the License.
white-space: nowrap; white-space: nowrap;
text-overflow: clip; text-overflow: clip;
} }

19
res/css/views/rooms/_EventTile.scss
View file

@ -55,11 +55,6 @@ limitations under the License.
line-height: 22px; line-height: 22px;
} }
.mx_EventTile .mx_SenderProfile .mx_SenderProfile_name,
.mx_EventTile .mx_SenderProfile .mx_SenderProfile_aux {
opacity: 0.5;
}
.mx_EventTile .mx_SenderProfile .mx_Flair { .mx_EventTile .mx_SenderProfile .mx_Flair {
opacity: 0.7; opacity: 0.7;
margin-left: 5px; margin-left: 5px;
@ -296,8 +291,8 @@ limitations under the License.
} }
/* always override hidden attribute for blocked and warning */ /* always override hidden attribute for blocked and warning */
.mx_EventTile_e2eIcon_hidden[src="img/e2e-blocked.svg"], .mx_EventTile_e2eIcon_hidden[src*="img/e2e-blocked.svg"],
.mx_EventTile_e2eIcon_hidden[src="img/e2e-warning.svg"] { .mx_EventTile_e2eIcon_hidden[src*="img/e2e-warning.svg"] {
display: block; display: block;
} }
@ -450,13 +445,21 @@ limitations under the License.
} }
.mx_EventTile_content .markdown-body a { .mx_EventTile_content .markdown-body a {
color: $accent-color; color: $accent-color-alt;
text-decoration: underline;
} }
.mx_EventTile_content .markdown-body .hljs { .mx_EventTile_content .markdown-body .hljs {
display: inline ! important; display: inline ! important;
} }
// compensate for Nunito italics being terrible
// https://github.com/google/fonts/issues/1726
.mx_EventTile_content .markdown-body em {
transform: skewX(-14deg);
display: inline-block;
}
/* end of overrides */ /* end of overrides */
.mx_MatrixChat_useCompactLayout { .mx_MatrixChat_useCompactLayout {

69
res/css/views/rooms/_JumpToBottomButton.scss Normal file
View file

@ -0,0 +1,69 @@
/*
Copyright 2019 New Vector 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.
*/
@charset "utf-8";
.mx_JumpToBottomButton {
z-index: 1000;
position: absolute;
// 12 because height is 50 but button is only 38 = 12+(50-38) = 24
bottom: 12px;
right: 24px;
width: 38px;
// give it a fixed height so the badge doesn't make
// it taller and pop upwards when visible
height: 50px;
text-align: center;
}
.mx_JumpToBottomButton_badge {
position: relative;
top: -12px;
border-radius: 16px;
font-weight: bold;
font-size: 12px;
line-height: 14px;
text-align: center;
// to be able to get it centered
// with text-align in parent
display: inline-block;
padding: 0 4px;
color: $secondary-accent-color;
background-color: $warning-color;
}
.mx_JumpToBottomButton_scrollDown {
position: relative;
height: 38px;
border-radius: 19px;
box-sizing: border-box;
background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color;
cursor: pointer;
}
.mx_JumpToBottomButton_scrollDown:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
mask: url('$(res)/img/icon-jump-to-bottom.svg');
mask-repeat: no-repeat;
mask-position: 9px 14px;
background: $roomtile-name-color;
}

17
res/css/views/rooms/_MemberDeviceInfo.scss
View file

@ -15,13 +15,16 @@ limitations under the License.
*/ */
.mx_MemberDeviceInfo { .mx_MemberDeviceInfo {
padding: 10px 0px; display: flex;
padding-bottom: 10px;
align-items: start;
} }
.mx_MemberDeviceInfo.mx_DeviceVerifyButtons { .mx_MemberDeviceInfo > .mx_DeviceVerifyButtons {
display: flex; display: flex;
flex-wrap: wrap; flex-direction: column;
justify-content: space-between; flex: 0 1 auto;
align-items: stretch;
} }
.mx_MemberDeviceInfo_textButton { .mx_MemberDeviceInfo_textButton {
@ -39,16 +42,14 @@ limitations under the License.
} }
.mx_MemberDeviceInfo_deviceInfo { .mx_MemberDeviceInfo_deviceInfo {
margin-bottom: 10px; margin: 0 5px 5px 8px;
padding-bottom: 10px; flex: 1;
border-bottom: 1px solid rgba(0,0,0,0.1);
} }
/* "Unblacklist" is too long for a regular button: make it wider and /* "Unblacklist" is too long for a regular button: make it wider and
reduce the padding. */ reduce the padding. */
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist, .mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist { .mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
width: 8em;
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
} }

66
res/css/views/rooms/_MemberInfo.scss
View file

@ -15,14 +15,35 @@ limitations under the License.
*/ */
.mx_MemberInfo { .mx_MemberInfo {
margin-top: 20px; display: flex;
padding-right: 20px; flex-direction: column;
height: 100%; flex: 1;
overflow-y: auto; overflow-y: auto;
} }
.mx_MemberInfo_name {
align-items: center;
display: flex;
}
.mx_MemberInfo_cancel {
height: 16px;
padding: 10px 15px;
cursor: pointer;
}
.mx_MemberInfo_name h2 {
flex: 1;
}
.mx_MemberInfo h2 { .mx_MemberInfo h2 {
margin-top: 6px; font-size: 18px;
font-weight: 600;
margin: 16px 0;
}
.mx_MemberInfo_container {
margin: 0 16px 16px 16px;
} }
.mx_MemberInfo .mx_RoomTile_nameContainer { .mx_MemberInfo .mx_RoomTile_nameContainer {
@ -37,14 +58,17 @@ limitations under the License.
width: 160px; width: 160px;
} }
.mx_MemberInfo_cancel { .mx_MemberInfo_avatar {
float: right; background: $tagpanel-bg-color;
margin-right: 10px; margin-bottom: 16px;
cursor: pointer;
} }
.mx_MemberInfo_avatar { .mx_MemberInfo_avatar > img {
clear: both; height: auto;
width: 100%;
max-height: 30vh;
object-fit: contain;
display: block;
} }
.mx_MemberInfo_avatar .mx_BaseAvatar { .mx_MemberInfo_avatar .mx_BaseAvatar {
@ -60,17 +84,15 @@ limitations under the License.
.mx_MemberInfo h3 { .mx_MemberInfo h3 {
text-transform: uppercase; text-transform: uppercase;
color: $h3-color; color: $input-darker-fg-color;
font-weight: 600; font-weight: bold;
font-size: 13px; font-size: 12px;
margin-top: 16px; margin: 4px 0;
margin-bottom: 14px;
} }
.mx_MemberInfo_profileField { .mx_MemberInfo_profileField {
font-size: 13px; font-size: 15px;
position: relative; position: relative;
background-color: $primary-bg-color;
} }
.mx_MemberInfo_buttons { .mx_MemberInfo_buttons {
@ -79,14 +101,17 @@ limitations under the License.
.mx_MemberInfo_field { .mx_MemberInfo_field {
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 15px;
color: $accent-color; color: $primary-fg-color;
margin-left: 8px; margin-left: 8px;
line-height: 23px; line-height: 23px;
} }
.mx_MemberInfo_createRoom { .mx_MemberInfo_createRoom {
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
padding: 0 8px;
} }
.mx_MemberInfo_createRoom_label { .mx_MemberInfo_createRoom_label {
@ -117,3 +142,6 @@ limitations under the License.
white-space: nowrap; white-space: nowrap;
text-overflow: clip; text-overflow: clip;
} }
.mx_MemberInfo .mx_MemberInfo_scrollContainer {
flex: 1;
}

108
res/css/views/rooms/_MemberList.scss
View file

@ -17,20 +17,24 @@ limitations under the License.
.mx_MemberList, .mx_MemberList,
.mx_GroupMemberList, .mx_GroupMemberList,
.mx_GroupRoomList { .mx_GroupRoomList {
height: 100%;
margin-top: 12px;
margin-right: 20px;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.mx_MemberList .mx_Spinner { .mx_Spinner {
flex: 0 0 auto; flex: 1 0 auto;
}
h2 {
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
font-size: 13px;
padding-left: 3px;
padding-right: 12px;
margin-top: 8px;
margin-bottom: 4px;
}
} }
.mx_MemberList_chevron { .mx_MemberList_chevron {
@ -49,65 +53,39 @@ limitations under the License.
.mx_MemberList_query, .mx_MemberList_query,
.mx_GroupMemberList_query, .mx_GroupMemberList_query,
.mx_GroupRoomList_query { .mx_GroupRoomList_query {
font-family: $font-family; flex: 1 1 0;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
margin-left: 3px;
font-size: 14px;
margin-bottom: 8px;
width: 189px;
} }
.mx_MemberList_query::-moz-placeholder,
.mx_GroupMemberList_query::-moz-placeholder,
.mx_GroupRoomList_query::-moz-placeholder {
color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
}
.mx_MemberList_query::-webkit-input-placeholder,
.mx_GroupMemberList_query::-webkit-input-placeholder,
.mx_GroupRoomList_query::-webkit-input-placeholder {
color: $primary-fg-color;
opacity: 0.5;
font-size: 14px;
}
.mx_MemberList_joined {
order: 2;
flex: 1 0 0;
overflow-y: auto;
}
/*
.mx_MemberList_invited {
order: 3;
flex: 0 0 100px;
overflow-y: auto;
}
*/
.mx_GroupMemberList_invited h2,
.mx_MemberList_invited h2 {
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
font-size: 13px;
padding-left: 3px;
padding-right: 12px;
margin-top: 8px;
margin-bottom: 4px;
}
/* we have to have display: table in order for the horizontal wrapping to work */
.mx_MemberList_wrapper { .mx_MemberList_wrapper {
display: table; padding: 10px;
table-layout: fixed;
width: 100%;
} }
.mx_MemberList_invite,
.mx_RightPanel_invite {
flex: 0 0 auto;
position: relative;
background-color: $button-bg-color;
border-radius: 4px;
padding: 8px;
margin: 9px;
display: flex;
color: $button-fg-color;
font-weight: 600;
.mx_RightPanel_icon {
padding-right: 5px;
padding-top: 2px;
}
}
.mx_MemberList_invite span {
margin: 0 auto;
background-image: url('$(res)/img/feather-icons/user-add.svg');
background-repeat: no-repeat;
background-position: center left;
padding-left: 25px;
}

16
res/css/views/rooms/_MessageComposer.scss
View file

@ -16,7 +16,6 @@ limitations under the License.
*/ */
.mx_MessageComposer_wrapper { .mx_MessageComposer_wrapper {
max-width: 960px;
vertical-align: middle; vertical-align: middle;
margin: auto; margin: auto;
border-top: 1px solid $primary-hairline-color; border-top: 1px solid $primary-hairline-color;
@ -58,13 +57,8 @@ limitations under the License.
width: 100%; width: 100%;
} }
.mx_MessageComposer_row > div:last-child{
padding-right: 0;
}
.mx_MessageComposer .mx_MessageComposer_avatar { .mx_MessageComposer .mx_MessageComposer_avatar {
padding-left: 10px; padding: 0 27px;
padding-right: 28px;
} }
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar { .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
@ -77,7 +71,7 @@ limitations under the License.
.mx_MessageComposer_e2eIcon { .mx_MessageComposer_e2eIcon {
position: absolute; position: absolute;
left: 44px; left: 60px;
} }
.mx_MessageComposer_noperm_error { .mx_MessageComposer_noperm_error {
@ -113,7 +107,8 @@ limitations under the License.
width: 100%; width: 100%;
max-height: 120px; max-height: 120px;
min-height: 19px; min-height: 19px;
overflow: auto; overflow-y: auto;
overflow-x: hidden;
word-break: break-word; word-break: break-word;
} }
@ -187,7 +182,7 @@ limitations under the License.
/*display: table-cell;*/ /*display: table-cell;*/
/*vertical-align: middle;*/ /*vertical-align: middle;*/
/*padding-left: 10px;*/ /*padding-left: 10px;*/
padding-right: 5px; padding-right: 12px;
cursor: pointer; cursor: pointer;
padding-top: 4px; padding-top: 4px;
} }
@ -216,7 +211,6 @@ limitations under the License.
.mx_MessageComposer_formatbar { .mx_MessageComposer_formatbar {
margin: auto; margin: auto;
max-width: 960px;
display: flex; display: flex;
height: 30px; height: 30px;

99
res/css/views/rooms/_RoomHeader.scss
View file

@ -14,29 +14,24 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
/* add 20px to the height of the header when editing */ .mx_RoomHeader {
.mx_RoomHeader_editing { flex: 0 0 52px;
flex: 0 0 93px ! important; border-bottom: 1px solid $primary-hairline-color;
} }
.mx_RoomHeader_wrapper { .mx_RoomHeader_wrapper {
max-width: 960px;
margin: auto; margin: auto;
height: 70px; height: 52px;
align-items: center; align-items: center;
display: flex; display: flex;
} align-items: center;
min-width: 0;
.mx_RoomHeader_leftRow { padding: 0 10px 0 19px;
margin-left: -2px;
order: 1;
flex: 1;
overflow: hidden;
} }
.mx_RoomHeader_spinner { .mx_RoomHeader_spinner {
flex: 1;
height: 36px; height: 36px;
order: 2;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
} }
@ -45,7 +40,6 @@ limitations under the License.
@mixin mx_DialogButton; @mixin mx_DialogButton;
margin-right: 8px; margin-right: 8px;
margin-top: -5px; margin-top: -5px;
order: 2;
} }
.mx_RoomHeader_textButton:hover { .mx_RoomHeader_textButton:hover {
@ -57,31 +51,29 @@ limitations under the License.
} }
.mx_RoomHeader_cancelButton { .mx_RoomHeader_cancelButton {
order: 2;
cursor: pointer; cursor: pointer;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
} }
.mx_RoomHeader_rightRow { .mx_RoomHeader_buttons {
margin-top: 4px;
background-color: $primary-bg-color;
display: flex; display: flex;
align-items: center; align-items: center;
order: 3; background-color: $primary-bg-color;
padding-right: 5px;
} }
.mx_RoomHeader_info { .mx_RoomHeader_info {
display: table-cell; display: flex;
width: 100%; flex: 1;
vertical-align: middle; align-items: center;
} }
.mx_RoomHeader_simpleHeader { .mx_RoomHeader_simpleHeader {
line-height: 70px; line-height: 52px;
color: $primary-fg-color; color: $roomheader-color;
font-size: 22px; font-size: 18px;
font-weight: bold; font-weight: 600;
overflow: hidden; overflow: hidden;
margin-left: 63px; margin-left: 63px;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -99,22 +91,20 @@ limitations under the License.
} }
.mx_RoomHeader_name { .mx_RoomHeader_name {
vertical-align: middle; flex: 0 1 auto;
width: 100%;
height: 31px;
overflow: hidden; overflow: hidden;
color: $primary-fg-color; color: $roomheader-color;
font-weight: bold; font-weight: 600;
font-size: 22px; font-size: 18px;
padding-left: 19px; margin: 0 7px;
padding-right: 16px;
/* why isn't text-overflow working? */
text-overflow: ellipsis;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
display: flex;
} }
.mx_RoomHeader_nametext { .mx_RoomHeader_nametext {
display: inline-block; white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }
.mx_RoomHeader_settingsHint { .mx_RoomHeader_settingsHint {
@ -122,7 +112,6 @@ limitations under the License.
} }
.mx_RoomHeader_searchStatus { .mx_RoomHeader_searchStatus {
display: inline-block;
font-weight: normal; font-weight: normal;
opacity: 0.6; opacity: 0.6;
} }
@ -166,25 +155,23 @@ limitations under the License.
} }
.mx_RoomHeader_topic { .mx_RoomHeader_topic {
vertical-align: bottom; flex: 1;
float: left; color: $roomtopic-color;
max-height: 38px; font-weight: 400;
color: $settings-grey-fg-color;
font-weight: 300;
font-size: 13px; font-size: 13px;
margin-left: 19px; margin: 0 7px;
margin-right: 16px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
column-width: 960px; line-height: 1.2em;
max-height: 2.4em;
} }
.mx_RoomHeader_avatar { .mx_RoomHeader_avatar {
display: table-cell; flex: 0;
width: 48px; width: 28px;
height: 50px; height: 28px;
vertical-align: middle; margin: 0 7px;
} }
.mx_RoomHeader_avatar .mx_BaseAvatar_image { .mx_RoomHeader_avatar .mx_BaseAvatar_image {
@ -192,13 +179,13 @@ limitations under the License.
} }
.mx_RoomHeader_avatarPicker { .mx_RoomHeader_avatarPicker {
margin-top: 23px;
position: relative; position: relative;
} }
.mx_RoomHeader_avatarPicker_edit { .mx_RoomHeader_avatarPicker_edit {
margin-left: 16px; position: absolute;
margin-top: 4px; left: 16px;
top: 18px;
} }
.mx_RoomHeader_avatarPicker_edit > label { .mx_RoomHeader_avatarPicker_edit > label {
@ -210,7 +197,7 @@ limitations under the License.
} }
.mx_RoomHeader_button { .mx_RoomHeader_button {
margin-left: 12px; margin-left: 10px;
cursor: pointer; cursor: pointer;
} }
@ -218,6 +205,10 @@ limitations under the License.
pointer-events: none; pointer-events: none;
} }
.mx_RoomHeader_showPanel {
height: 16px;
}
.mx_RoomHeader_voipButton { .mx_RoomHeader_voipButton {
display: table-cell; display: table-cell;
} }

33
res/css/views/rooms/_RoomList.scss
View file

@ -16,8 +16,24 @@ limitations under the License.
*/ */
.mx_RoomList { .mx_RoomList {
padding-bottom: 12px; /* take up remaining space below TopLeftMenu */
min-height: 400px; flex: 1;
min-height: 0;
overflow-y: hidden;
}
.mx_RoomList .mx_ResizeHandle {
// needed so the z-index takes effect
position: relative;
}
.mx_SearchBox {
flex: none;
}
/* hide resize handles next to collapsed / empty sublists */
.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
display: none;
} }
.mx_RoomList_expandButton { .mx_RoomList_expandButton {
@ -27,20 +43,7 @@ limitations under the License.
padding-right: 12px; padding-right: 12px;
} }
/* Evil hacky override until Chrome fixes drop and drag table cells
and we can correctly fix horizontal wrapping in the sidebar again */
.mx_RoomList_scrollbar .gm-scroll-view {
overflow-x: hidden ! important;
overflow-y: scroll ! important;
}
/* Make sure the scrollbar is above the sticky headers from RoomList */
.mx_RoomList_scrollbar .gm-scrollbar.-vertical {
z-index: 6;
}
.mx_RoomList_emptySubListTip_container { .mx_RoomList_emptySubListTip_container {
background-color: $secondary-accent-color;
padding-left: 18px; padding-left: 18px;
padding-right: 18px; padding-right: 18px;
padding-top: 8px; padding-top: 8px;

10
res/css/views/rooms/_RoomSettings.scss
View file

@ -16,8 +16,7 @@ limitations under the License.
*/ */
.mx_RoomSettings { .mx_RoomSettings {
margin-left: 65px; margin: 40px;
margin-bottom: 20px;
} }
.mx_RoomSettings_upgradeButton, .mx_RoomSettings_upgradeButton,
@ -67,15 +66,16 @@ limitations under the License.
.mx_RoomSettings_integrationsButton_errorPopup { .mx_RoomSettings_integrationsButton_errorPopup {
position: absolute; position: absolute;
top: 110%; top: 110%;
left: -125%; left: -275%;
width: 348%; width: 550%;
padding: 2%; padding: 30%;
font-size: 10pt; font-size: 10pt;
line-height: 1.5em; line-height: 1.5em;
border-radius: 5px; border-radius: 5px;
background-color: $accent-color; background-color: $accent-color;
color: $accent-fg-color; color: $accent-fg-color;
text-align: center; text-align: center;
z-index: 1000;
} }
.mx_RoomSettings_unbanButton { .mx_RoomSettings_unbanButton {
display: inline; display: inline;

150
res/css/views/rooms/_RoomTile.scss
View file

@ -15,13 +15,30 @@ limitations under the License.
*/ */
.mx_RoomTile { .mx_RoomTile {
position: relative; display: flex;
flex-direction: row;
align-items: center;
cursor: pointer; cursor: pointer;
font-size: 13px;
display: block;
height: 34px; height: 34px;
margin: 0;
padding: 0 8px 0 10px;
position: relative;
}
background-color: $secondary-accent-color; .mx_RoomTile_menuButton {
display: none;
flex: 0 0 16px;
height: 16px;
background-image: url('$(res)/img/icon_context.svg');
background-repeat: no-repeat;
background-position: center;
}
// toggle menuButton and badge on hover/menu displayed
.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover, .mx_RoomTile_menuDisplayed {
.mx_RoomTile_menuButton {
display: block;
}
} }
.mx_RoomTile_tooltip { .mx_RoomTile_tooltip {
@ -33,9 +50,18 @@ limitations under the License.
.mx_RoomTile_nameContainer { .mx_RoomTile_nameContainer {
display: inline-block; display: flex;
width: 180px; align-items: center;
flex: 1;
vertical-align: middle; vertical-align: middle;
min-width: 0;
}
.mx_RoomTile_labelContainer {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
} }
.mx_RoomTile_subtext { .mx_RoomTile_subtext {
@ -55,11 +81,8 @@ limitations under the License.
} }
.mx_RoomTile_avatar { .mx_RoomTile_avatar {
display: inline-block; flex: 0;
padding-top: 5px; padding: 4px;
padding-bottom: 5px;
padding-left: 16px;
padding-right: 6px;
width: 24px; width: 24px;
vertical-align: middle; vertical-align: middle;
} }
@ -78,87 +101,52 @@ limitations under the License.
} }
.mx_RoomTile_name { .mx_RoomTile_name {
display: inline-block; font-size: 14px;
position: relative; font-weight: 600;
width: 165px; padding: 0 6px;
vertical-align: middle;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 3px;
color: $roomtile-name-color; color: $roomtile-name-color;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.mx_RoomTile_invite { .collapsed {
/* color: rgba(69, 69, 69, 0.5); */ .mx_RoomTile {
} margin: 0 2px;
padding: 0 2px;
position: relative;
justify-content: center;
}
.collapsed .mx_RoomTile_nameContainer { .mx_RoomTile_name {
width: 60px; /* colapsed panel width */ display: none;
} }
.collapsed .mx_RoomTile_name { .mx_RoomTile_badge {
display: none; position: absolute;
} right: 6px;
top: 0px;
border-radius: 16px;
z-index: 3;
border: 0.18em solid $secondary-accent-color;
}
.collapsed .mx_RoomTile_badge { .mx_RoomTile_menuButton {
top: 0px; display: none; //no design for this for now
min-width: 12px; }
border-radius: 16px;
padding: 0px 4px 0px 4px;
z-index: 3;
}
/* Hide the bottom of speech bubble */
.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:after {
display: none;
}
/* This is the bottom of the speech bubble */
.mx_RoomTile_highlight .mx_RoomTile_badge:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
margin-left: 5px;
border-top: 5px solid $warning-color;
border-right: 7px solid transparent;
} }
.mx_RoomTile_badge { .mx_RoomTile_badge {
display: inline-block; flex: 0 1 content;
min-width: 15px; border-radius: 0.8em;
height: 15px; padding: 0 0.4em;
position: absolute;
right: 8px; /*gutter */
top: 9px;
border-radius: 8px;
color: $accent-fg-color; color: $accent-fg-color;
font-weight: 600; font-weight: 600;
font-size: 10px; font-size: 12px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
}
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menuDisplayed .mx_RoomTile_badge {
letter-spacing: 0.1em;
opacity: 1;
}
.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menuDisplayed.mx_RoomTile_noBadges .mx_RoomTile_badge {
background-color: $neutral-badge-color;
} }
.mx_RoomTile_unreadNotify .mx_RoomTile_badge { .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
background-color: $accent-color; background-color: $roomtile-name-color;
} }
.mx_RoomTile_highlight .mx_RoomTile_badge { .mx_RoomTile_highlight .mx_RoomTile_badge {
@ -167,9 +155,14 @@ limitations under the License.
.mx_RoomTile_unread, .mx_RoomTile_highlight { .mx_RoomTile_unread, .mx_RoomTile_highlight {
font-weight: 800; font-weight: 800;
.mx_RoomTile_name {
color: $roomtile-selected-color;
}
} }
.mx_RoomTile_selected { .mx_RoomTile_selected {
border-radius: 4px;
background-color: $roomtile-selected-bg-color; background-color: $roomtile-selected-bg-color;
} }
@ -187,10 +180,6 @@ limitations under the License.
background-color: $roomtile-focused-bg-color; background-color: $roomtile-focused-bg-color;
} }
.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
width: 140px;
}
.mx_RoomTile_arrow { .mx_RoomTile_arrow {
position: absolute; position: absolute;
right: 0px; right: 0px;
@ -203,4 +192,3 @@ limitations under the License.
.mx_RoomTile.mx_RoomTile_transparent:focus { .mx_RoomTile.mx_RoomTile_transparent:focus {
background-color: $roomtile-transparent-focused-color; background-color: $roomtile-transparent-focused-color;
} }

4
res/css/views/rooms/_RoomTooltip.scss
View file

@ -21,7 +21,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-top: 8px solid transparent; border-top: 8px solid transparent;
border-right: 8px solid $menu-border-color; border-right: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
} }
@ -40,8 +40,8 @@ limitations under the License.
.mx_RoomTooltip { .mx_RoomTooltip {
display: none; display: none;
position: fixed; position: fixed;
border: 1px solid $menu-border-color;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.21);
background-color: $primary-bg-color; background-color: $primary-bg-color;
z-index: 2000; z-index: 2000;
padding: 5px; padding: 5px;

99
res/css/views/rooms/_SearchBar.scss
View file

@ -15,69 +15,52 @@ limitations under the License.
*/ */
.mx_SearchBar { .mx_SearchBar {
padding-top: 5px; height: 56px;
padding-bottom: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
} border-bottom: 1px solid $primary-hairline-color;
.mx_SearchBar_input { .mx_SearchBar_input {
display: inline block; // border: 1px solid $input-border-color;
border-radius: 3px 0px 0px 3px; // font-size: 15px;
border: 1px solid $input-border-color; flex: 1 1 0;
font-size: 15px; margin-left: 22px;
padding: 9px; }
padding-left: 11px;
width: auto;
flex: 1 1 0;
}
.mx_SearchBar_searchButton { .mx_SearchBar_searchButton {
cursor: pointer; cursor: pointer;
margin-right: 10px; width: 37px;
width: 37px; height: 37px;
height: 37px; background-color: $accent-color;
border-radius: 0px 3px 3px 0px; mask: url('$(res)/img/feather-icons/search-input.svg');
background-color: $accent-color; mask-repeat: no-repeat;
} mask-position: center;
}
@keyframes pulsate { .mx_SearchBar_button {
0% { opacity: 1.0; } border: 0;
50% { opacity: 0.1; } margin: 0 0 0 22px;
100% { opacity: 1.0; } padding: 5px;
} font-size: 15px;
cursor: pointer;
color: $primary-fg-color;
border-bottom: 2px solid $accent-color;
font-weight: 600;
}
.mx_SearchBar_searching img { .mx_SearchBar_unselected {
animation: pulsate 0.5s ease-out; color: $input-darker-fg-color;
animation-iteration-count: infinite; border-color: transparent;
} }
.mx_SearchBar_button { .mx_SearchBar_cancel {
display: inline; background-color: $warning-color;
border: 0px; mask: url('$(res)/img/cancel.svg');
border-radius: 36px; mask-repeat: no-repeat;
font-weight: 400; mask-position: center;
font-size: 15px; mask-size: 14px;
color: $accent-fg-color; padding: 9px;
background-color: $accent-color; margin: 0 12px 0 3px;
width: auto; cursor: pointer;
margin: auto; }
margin-left: 7px;
padding-top: 6px;
padding-bottom: 4px;
padding-left: 24px;
padding-right: 24px;
cursor: pointer;
}
.mx_SearchBar_unselected {
background-color: $primary-bg-color;
color: $accent-color;
border: $accent-color 1px solid;
}
.mx_SearchBar_cancel {
padding-left: 14px;
padding-right: 14px;
cursor: pointer;
} }

66
res/css/views/rooms/_TopUnreadMessagesBar.scss
View file

@ -14,40 +14,48 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
@charset "utf-8";
.mx_TopUnreadMessagesBar { .mx_TopUnreadMessagesBar {
margin: auto; /* centre horizontally */ z-index: 1000;
max-width: 960px; position: absolute;
padding-top: 10px; top: 24px;
padding-bottom: 10px; right: 24px;
border-bottom: 1px solid $primary-hairline-color; width: 38px;
}
.mx_TopUnreadMessagesBar:after {
content: "·";
position: absolute;
top: -8px;
left: 11px;
width: 16px;
height: 16px;
border-radius: 16px;
font-weight: 600;
font-size: 30px;
line-height: 14px;
text-align: center;
color: $secondary-accent-color;
background-color: $accent-color;
} }
.mx_TopUnreadMessagesBar_scrollUp { .mx_TopUnreadMessagesBar_scrollUp {
display: inline; height: 38px;
cursor: pointer; border-radius: 19px;
text-decoration: underline; box-sizing: border-box;
} background: $primary-bg-color;
border: 1.3px solid $roomtile-name-color;
.mx_TopUnreadMessagesBar_scrollUp img {
padding-left: 10px;
padding-right: 31px;
vertical-align: middle;
}
.mx_TopUnreadMessagesBar_scrollUp span {
opacity: 0.5;
}
.mx_TopUnreadMessagesBar_close {
float: right;
padding-right: 14px;
padding-top: 3px;
cursor: pointer; cursor: pointer;
} }
.mx_MatrixChat_useCompactLayout { .mx_TopUnreadMessagesBar_scrollUp:before {
.mx_TopUnreadMessagesBar { content: "";
padding-top: 4px; position: absolute;
padding-bottom: 4px; width: 38px;
} height: 38px;
mask: url('$(res)/img/icon-jump-to-first-unread.svg');
mask-repeat: no-repeat;
mask-position: 9px 13px;
background: $roomtile-name-color;
} }

77
res/css/views/rooms/_WhoIsTypingTile.scss Normal file
View file

@ -0,0 +1,77 @@
/*
Copyright 2018 New Vector 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_WhoIsTypingTile {
margin-left: -18px; //offset padding from mx_RoomView_MessageList to center avatars
padding-top: 18px;
display: flex;
align-items: center;
}
/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
.mx_WhoIsTypingTile_avatars {
flex: 0 0 83px; // 18 + 65
text-align: center;
}
.mx_WhoIsTypingTile_avatars > :not(:first-child) {
margin-left: -12px;
}
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_image {
border: 1px solid $primary-bg-color;
}
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
padding-top: 1px;
}
.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
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;
}
.mx_WhoIsTypingTile_label {
flex: 1;
font-size: 14px;
font-weight: 600;
color: $eventtile-meta-color;
}
.mx_WhoIsTypingTile_label > span {
background-image: url('$(res)/img/typing-indicator-2x.gif');
background-size: 25px;
background-position: left bottom;
background-repeat: no-repeat;
padding-bottom: 15px;
display: block;
}
.mx_MatrixChat_useCompactLayout {
.mx_WhoIsTypingTile {
padding-top: 4px;
}
}

43
res/css/views/settings/_EmailAddresses.scss Normal file
View file

@ -0,0 +1,43 @@
/*
Copyright 2019 New Vector 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_ExistingEmailAddress {
margin-bottom: 5px;
}
.mx_ExistingEmailAddress_delete {
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
}
.mx_ExistingEmailAddress_email {
vertical-align: middle;
}
.mx_ExistingEmailAddress_promptText {
margin-right: 10px;
}
.mx_ExistingEmailAddress_confirmBtn {
margin-right: 5px;
}
.mx_EmailAddresses_new .mx_Field input {
// Use 100% of the space available for the input, but don't let the 10px
// padding on either side of the input to push it out of alignment.
width: calc(100% - 20px);
}

2
res/css/views/settings/_Notifications.scss
View file

@ -44,12 +44,10 @@ limitations under the License.
.mx_UserNotifSettings_pushRulesTable thead { .mx_UserNotifSettings_pushRulesTable thead {
font-weight: bold; font-weight: bold;
font-size: 15px;
} }
.mx_UserNotifSettings_pushRulesTable tbody th { .mx_UserNotifSettings_pushRulesTable tbody th {
font-weight: 400; font-weight: 400;
font-size: 15px;
} }
.mx_UserNotifSettings_pushRulesTable tbody th:first-child { .mx_UserNotifSettings_pushRulesTable tbody th:first-child {

56
res/css/views/settings/_PhoneNumbers.scss Normal file
View file

@ -0,0 +1,56 @@
/*
Copyright 2019 New Vector 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_ExistingPhoneNumber {
margin-bottom: 5px;
}
.mx_ExistingPhoneNumber_delete {
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
}
.mx_ExistingPhoneNumber_address {
vertical-align: middle;
}
.mx_ExistingPhoneNumber_promptText {
margin-right: 10px;
}
.mx_ExistingPhoneNumber_confirmBtn {
margin-right: 5px;
}
.mx_PhoneNumbers_new .mx_Field input {
// Use 100% of the space available for the input, but don't let the 10px
// padding on either side of the input to push it out of alignment.
width: calc(100% - 20px);
}
.mx_PhoneNumbers_input {
display: flex;
align-items: center;
}
.mx_PhoneNumbers_input > .mx_Field {
flex-grow: 1;
}
.mx_PhoneNumbers_country {
width: 80px;
}

125
res/css/views/settings/_ProfileSettings.scss Normal file
View file

@ -0,0 +1,125 @@
/*
Copyright 2019 New Vector 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_ProfileSettings_profile {
display: flex;
}
.mx_ProfileSettings_controls {
flex-grow: 1;
}
.mx_ProfileSettings_controls .mx_Field #profileDisplayName,
.mx_ProfileSettings_controls .mx_Field #profileTopic {
width: calc(100% - 20px); // subtract 10px padding on left and right
}
.mx_ProfileSettings_controls .mx_Field #profileTopic {
height: 4em;
}
.mx_ProfileSettings_controls .mx_Field:first-child {
margin-top: 0;
}
.mx_ProfileSettings_avatar {
width: 88px;
height: 88px;
margin-left: 13px;
position: relative;
cursor: pointer;
}
.mx_ProfileSettings_avatar > * {
display: block;
width: 88px;
height: 88px;
border-radius: 4px;
}
.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarOverlay_disabled {
cursor: default;
}
.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarPlaceholder {
background-color: $settings-profile-placeholder-bg-color;
}
.mx_ProfileSettings_avatarOverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
text-align: center;
vertical-align: middle;
font-size: 10px;
}
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay:not(.mx_ProfileSettings_avatarOverlay_disabled) {
display: inline-block;
opacity: 0.5 !important;
color: $settings-profile-overlay-fg-color !important;
background-color: $settings-profile-overlay-bg-color !important;
}
.mx_ProfileSettings_avatarOverlay_show {
display: inline-block;
opacity: 1;
color: $settings-profile-overlay-placeholder-fg-color;
background-color: $settings-profile-overlay-placeholder-bg-color;
}
.mx_ProfileSettings_avatarOverlayText {
display: block;
margin-top: 17px;
margin-bottom: 8px;
}
.mx_ProfileSettings_noAvatarText {
display: block;
margin: 34px auto auto;
}
.mx_ProfileSettings_avatarOverlayImgContainer {
position: relative;
width: 14px;
height: 14px;
margin: auto;
}
.mx_ProfileSettings_avatarOverlayImg:before {
background-color: $settings-profile-overlay-placeholder-fg-color;
mask: url("$(res)/img/feather-icons/upload.svg");
mask-repeat: no-repeat;
mask-size: 14px;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg:before {
background-color: $settings-profile-overlay-fg-color !important;
}
.mx_ProfileSettings_avatarUpload {
display: none;
}

23
res/css/views/settings/tabs/_GeneralRoomSettingsTab.scss Normal file
View file

@ -0,0 +1,23 @@
/*
Copyright 2019 New Vector 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_GeneralRoomSettingsTab_profileSection {
margin-top: 10px;
}
.mx_GeneralRoomSettingsTab .mx_AliasSettings .mx_Field select {
width: 100%;
}

46
res/css/views/settings/tabs/_GeneralUserSettingsTab.scss Normal file
View file

@ -0,0 +1,46 @@
/*
Copyright 2019 New Vector 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_GeneralUserSettingsTab_changePassword,
.mx_GeneralUserSettingsTab_themeSection {
display: block;
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field,
.mx_GeneralUserSettingsTab_themeSection .mx_Field {
display: block;
margin-right: 100px; // Align with the other fields on the page
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field input {
display: block;
width: calc(100% - 20px); // subtract 10px padding on left and right
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
margin-top: 0;
}
.mx_GeneralUserSettingsTab_themeSection .mx_Field select {
display: block;
width: 100%;
}
.mx_GeneralUserSettingsTab_accountSection > .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_accountSection > .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_languageInput {
margin-right: 100px; // Align with the other fields on the page
}

24
res/css/views/settings/tabs/_HelpSettingsTab.scss Normal file
View file

@ -0,0 +1,24 @@
/*
Copyright 2019 New Vector 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_HelpSettingsTab_debugButton {
margin-bottom: 5px;
margin-top: 5px;
}
.mx_HelpSettingsTab span.mx_AccessibleButton {
word-break: break-word;
}

19
res/css/views/settings/tabs/_NotificationSettingsTab.scss Normal file
View file

@ -0,0 +1,19 @@
/*
Copyright 2019 New Vector 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_NotificationSettingsTab .mx_SettingsTab_heading {
margin-bottom: 10px; // Give some spacing between the title and the first elements
}

27
res/css/views/settings/tabs/_PreferencesSettingsTab.scss Normal file
View file

@ -0,0 +1,27 @@
/*
Copyright 2019 New Vector 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_PreferencesSettingsTab .mx_Field {
margin-right: 100px; // Align with the rest of the controls
}
.mx_PreferencesSettingsTab .mx_Field input {
display: block;
// Subtract 10px padding on left and right
// This is to keep the input aligned with the rest of the tab's controls.
width: calc(100% - 20px);
}

24
res/css/views/settings/tabs/_RolesRoomSettingsTab.scss Normal file
View file

@ -0,0 +1,24 @@
/*
Copyright 2019 New Vector 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_RolesRoomSettingsTab ul {
margin-bottom: 0;
}
.mx_RolesRoomSettingsTab_unbanBtn {
margin-right: 10px;
margin-bottom: 5px;
}

34
res/css/views/settings/tabs/_SecurityRoomSettingsTab.scss Normal file
View file

@ -0,0 +1,34 @@
/*
Copyright 2019 New Vector 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_SecurityRoomSettingsTab label {
display: block;
}
.mx_SecurityRoomSettingsTab_warning {
display: block;
img {
vertical-align: middle;
margin-right: 5px;
margin-left: 3px;
margin-bottom: 5px;
}
}
.mx_SecurityRoomSettingsTab_encryptionSection {
margin-bottom: 25px;
}

53
res/css/views/settings/tabs/_SecuritySettingsTab.scss Normal file
View file

@ -0,0 +1,53 @@
/*
Copyright 2019 New Vector 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_SecuritySettingsTab .mx_DevicesPanel {
// Normally the panel is 880px, however this can easily overflow the container.
// TODO: Fix the table to not be squishy
width: auto;
max-width: 880px;
}
.mx_SecuritySettingsTab_deviceInfo {
display: table;
padding-left: 0;
}
.mx_SecuritySettingsTab_deviceInfo > li {
display: table-row;
}
.mx_SecuritySettingsTab_deviceInfo > li > label,
.mx_SecuritySettingsTab_deviceInfo > li > span {
display: table-cell;
padding-right: 1em;
}
.mx_SecuritySettingsTab_importExportButtons .mx_AccessibleButton {
margin-right: 10px;
}
.mx_SecuritySettingsTab_importExportButtons {
margin-bottom: 15px;
}
.mx_SecuritySettingsTab_ignoredUser {
margin-bottom: 5px;
}
.mx_SecuritySettingsTab_ignoredUser .mx_AccessibleButton {
margin-right: 10px;
}

69
res/css/views/settings/tabs/_SettingsTab.scss Normal file
View file

@ -0,0 +1,69 @@
/*
Copyright 2019 New Vector 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_SettingsTab_heading {
font-size: 20px;
font-weight: 600;
color: $primary-fg-color;
}
.mx_SettingsTab_subheading {
font-size: 14px;
display: block;
font-family: $font-family;
font-weight: 600;
color: $primary-fg-color;
margin-bottom: 10px;
margin-top: 12px;
}
.mx_SettingsTab_subsectionText {
color: $settings-subsection-fg-color;
font-size: 12px;
padding-bottom: 12px;
display: block;
margin: 0 100px 0 0; // Align with the rest of the view
}
.mx_SettingsTab_section .mx_SettingsFlag {
margin-right: 100px;
height: 25px;
margin-bottom: 10px;
}
.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
vertical-align: bottom;
display: inline-block;
font-size: 12px;
color: $primary-fg-color;
max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
}
.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
float: right;
}
.mx_SettingsTab_linkBtn {
cursor: pointer;
color: $accent-color;
word-break: break-all;
}
.mx_SettingsTab .mx_SettingsTab_subheading:nth-child(n + 2) {
// These views have a lot of the same repetitive information on it, so
// give them more visual distinction between the sections.
margin-top: 30px;
}

28
res/css/views/settings/tabs/_VoiceSettingsTab.scss Normal file
View file

@ -0,0 +1,28 @@
/*
Copyright 2019 New Vector 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_VoiceSettingsTab .mx_Field select {
width: 100%;
max-width: 100%;
}
.mx_VoiceSettingsTab .mx_Field {
margin-right: 100px; // align with the rest of the fields
}
.mx_VoiceSettingsTab_missingMediaPermissions {
margin-bottom: 15px;
}

BIN
res/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf Normal file
View file

Binary file not shown.

BIN
res/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf Normal file
View file

Binary file not shown.

BIN
res/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf Normal file
View file

Binary file not shown.

BIN
res/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf Normal file
View file

Binary file not shown.

Some files were not shown because too many files have changed in this diff Show more