PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge remote-tracking branch 'origin/develop' into t3chguy/clear_notifications

Browse source
This commit is contained in:
Travis Ralston 2019-11-27 19:27:52 -07:00
commit 96ffe94876
733 changed files with 50889 additions and 9584 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.babelrc
View file

@ -13,7 +13,6 @@
],
"transform-class-properties",
"transform-object-rest-spread",
"transform-async-to-bluebird",
"transform-runtime",
"add-module-exports",
"syntax-dynamic-import"

21
.buildkite/pipeline.yaml
View file

@ -1,7 +1,12 @@
steps:
- label: ":eslint: Lint"
command:
- "yarn install"
# TODO: Remove hacky chmod for BuildKite
- "echo '--- Setup'"
- "chmod +x ./scripts/ci/*.sh"
- "chmod +x ./scripts/*"
- "echo '--- Install js-sdk'"
- "./scripts/ci/install-deps.sh"
- "yarn lintwithexclusions"
- "yarn stylelint"
plugins:
@ -10,9 +15,9 @@ steps:
- label: ":chains: End-to-End Tests"
agents:
# We use a medium sized instance instead of the normal small ones because
# We use a xlarge sized instance instead of the normal small ones because
# e2e tests otherwise take +-8min
queue: "medium"
queue: "xlarge"
command:
# TODO: Remove hacky chmod for BuildKite
- "echo '--- Setup'"
@ -80,6 +85,16 @@ steps:
image: "node:10"
propagate-environment: true
- label: "🌐 i18n"
command:
- "echo '--- Fetching Dependencies'"
- "yarn install"
- "echo '+++ Testing i18n output'"
- "yarn diff-i18n"
plugins:
- docker#v3.0.1:
image: "node:10"
- wait
- label: "🐴 Trigger riot-web"

31
.eslintignore.errorfiles
View file

@ -1,10 +1,6 @@
# autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
src/component-index.js
src/components/structures/BottomLeftMenu.js
src/components/structures/CreateRoom.js
src/components/structures/MessagePanel.js
src/components/structures/NotificationPanel.js
src/components/structures/RoomDirectory.js
src/components/structures/RoomStatusBar.js
src/components/structures/RoomView.js
@ -19,58 +15,39 @@ src/components/views/dialogs/SetPasswordDialog.js
src/components/views/dialogs/UnknownDeviceDialog.js
src/components/views/elements/AddressSelector.js
src/components/views/elements/DirectorySearchBox.js
src/components/views/elements/ImageView.js
src/components/views/elements/MemberEventListSummary.js
src/components/views/elements/TintableSvg.js
src/components/views/elements/UserSelector.js
src/components/views/globals/MatrixToolbar.js
src/components/views/globals/NewVersionBar.js
src/components/views/globals/UpdateCheckBar.js
src/components/views/messages/MFileBody.js
src/components/views/messages/RoomAvatarEvent.js
src/components/views/messages/TextualBody.js
src/components/views/room_settings/ColorSettings.js
src/components/views/rooms/Autocomplete.js
src/components/views/rooms/AuxPanel.js
src/components/views/rooms/EntityTile.js
src/components/views/rooms/LinkPreviewWidget.js
src/components/views/rooms/MemberDeviceInfo.js
src/components/views/rooms/MemberInfo.js
src/components/views/rooms/MemberList.js
src/components/views/rooms/MessageComposer.js
src/components/views/rooms/PinnedEventTile.js
src/components/views/rooms/RoomList.js
src/components/views/rooms/RoomPreviewBar.js
src/components/views/rooms/SearchableEntityList.js
src/components/views/rooms/SearchBar.js
src/components/views/rooms/SearchResultTile.js
src/components/views/rooms/TopUnreadMessagesBar.js
src/components/views/rooms/UserTile.js
src/components/views/rooms/SlateMessageComposer.js
src/components/views/settings/ChangeAvatar.js
src/components/views/settings/ChangePassword.js
src/components/views/settings/DevicesPanel.js
src/components/views/settings/IntegrationsManager.js
src/components/views/settings/Notifications.js
src/GroupAddressPicker.js
src/HtmlUtils.js
src/ImageUtils.js
src/languageHandler.js
src/linkify-matrix.js
src/Markdown.js
src/MatrixClientPeg.js
src/notifications/ContentRules.js
src/notifications/PushRuleVectorState.js
src/notifications/VectorPushRulesDefinitions.js
src/Notifier.js
src/PlatformPeg.js
src/Presence.js
src/rageshake/rageshake.js
src/rageshake/submit-rageshake.js
src/ratelimitedfunc.js
src/Roles.js
src/Rooms.js
src/ScalarAuthClient.js
src/UiEffects.js
src/Unread.js
src/utils/DecryptFile.js
src/utils/DirectoryUtils.js
@ -78,16 +55,10 @@ src/utils/DMRoomMap.js
src/utils/FormattingUtils.js
src/utils/MultiInviter.js
src/utils/Receipt.js
src/VectorConferenceHandler.js
src/Velociraptor.js
src/WhoIsTyping.js
src/wrappers/withMatrixClient.js
test/components/structures/MessagePanel-test.js
test/components/structures/ScrollPanel-test.js
test/components/structures/TimelinePanel-test.js
test/components/views/dialogs/InteractiveAuthDialog-test.js
test/components/views/rooms/MessageComposerInput-test.js
test/components/views/rooms/RoomSettings-test.js
test/mock-clock.js
test/notifications/ContentRules-test.js
test/notifications/PushRuleVectorState-test.js

4
.eslintrc.js
View file

@ -12,6 +12,7 @@ module.exports = {
extends: [matrixJsSdkPath + "/.eslintrc.js"],
plugins: [
"react",
"react-hooks",
"flowtype",
"babel"
],
@ -104,6 +105,9 @@ module.exports = {
// crashes currently: https://github.com/eslint/eslint/issues/6274
"generator-star-spacing": "off",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
},
settings: {
flowtype: {

2
.github/FUNDING.yml vendored Normal file
View file

@ -0,0 +1,2 @@
patreon: matrixdotorg
liberapay: matrixdotorg

9
.stylelintrc.js
View file

@ -1,5 +1,8 @@
module.exports = {
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-scss",
],
"rules": {
"indentation": 4,
"comment-empty-line-before": null,
@ -11,5 +14,11 @@ module.exports = {
"number-no-trailing-zeros": null,
"number-leading-zero": null,
"selector-list-comma-newline-after": null,
"at-rule-no-unknown": null,
"no-descending-specificity": null,
"scss/at-rule-no-unknown": [true, {
// https://github.com/vector-im/riot-web/issues/10544
"ignoreAtRules": ["define-mixin"],
}],
}
}

1576
CHANGELOG.md
View file

File diff suppressed because it is too large Load diff

5
README.md
View file

@ -168,3 +168,8 @@ Ensure you've followed the above development instructions and then:
```bash
yarn test
```
## End-to-End tests
Make sure you've got your Riot development server running (by doing `yarn start` in riot-web), and then in this project, run `yarn run e2etests`.
See `test/end-to-end-tests/README.md` for more information.

4
code_style.md
View file

@ -22,7 +22,7 @@ number throgh from the original code to the final application.
General Style
-------------
- 4 spaces to indent, for consistency with Matrix Python.
- 120 columns per line, but try to keep JavaScript code around the 80 column mark.
- 120 columns per line, but try to keep JavaScript code around the 90 column mark.
Inline JSX in particular can be nicer with more columns per line.
- No trailing whitespace at end of lines.
- Don't indent empty lines.
@ -34,7 +34,7 @@ General Style
- UpperCamelCase for class and type names
- lowerCamelCase for functions and variables.
- Single line ternary operators are fine.
- UPPER_CAMEL_CASE for constants
- UPPER_SNAKE_CASE for constants
- Single quotes for strings by default, for consistency with most JavaScript styles:
```javascript

71
docs/ciderEditor.md Normal file
View file

@ -0,0 +1,71 @@
# The CIDER (Contenteditable-Input-Diff-Error-Reconcile) editor
The CIDER editor is a custom editor written for Riot.
Most of the code can be found in the `/editor/` directory of the `matrix-react-sdk` project.
It is used to power the composer main composer (both to send and edit messages), and might be used for other usecases where autocomplete is desired (invite box, ...).
## High-level overview.
The editor is backed by a model that contains parts.
A part has some text and a type (plain text, pill, ...). When typing in the editor,
the model validates the input and updates the parts.
The parts are then reconciled with the DOM.
## Inner workings
When typing in the `contenteditable` element, the `input` event fires and
the DOM of the editor is turned into a string. The way this is done has
some logic to it to deal with adding newlines for block elements, to make sure
the caret offset is calculated in the same way as the content string, and to ignore
caret nodes (more on that later).
For these reasons it doesn't use `innerText`, `textContent` or anything similar.
The model addresses any content in the editor within as an offset within this string.
The caret position is thus also converted from a position in the DOM tree
to an offset in the content string. This happens in `getCaretOffsetAndText` in `dom.js`.
Once the content string and caret offset is calculated, it is passed to the `update()`
method of the model. The model first calculates the same content string of its current parts,
basically just concatenating their text. It then looks for differences between
the current and the new content string. The diffing algorithm is very basic,
and assumes there is only one change around the caret offset,
so this should be very inexpensive. See `diff.js` for details.
The result of the diffing is the strings that were added and/or removed from
the current content. These differences are then applied to the parts,
where parts can apply validation logic to these changes.
For example, if you type an @ in some plain text, the plain text part rejects
that character, and this character is then presented to the part creator,
which will turn it into a pill candidate part.
Pill candidate parts are what opens the auto completion, and upon picking a completion,
replace themselves with an actual pill which can't be edited anymore.
The diffing is needed to preserve state in the parts apart from their text
(which is the only thing the model receives from the DOM), e.g. to build
the model incrementally. Any text that didn't change is assumed
to leave the parts it intersects alone.
The benefit of this is that we can use the `input` event, which is broadly supported,
to find changes in the editor. We don't have to rely on keyboard events,
which relate poorly to text input or changes, and don't need the `beforeinput` event,
which isn't broadly supported yet.
Once the parts of the model are updated, the DOM of the editor is then reconciled
with the new model state, see `renderModel` in `render.js` for this.
If the model didn't reject the input and didn't make any additional changes,
this won't make any changes to the DOM at all, and should thus be fairly efficient.
For the browser to allow the user to place the caret between two pills,
or between a pill and the start and end of the line, we need some extra DOM nodes.
These DOM nodes are called caret nodes, and contain an invisble character, so
the caret can be placed into them. The model is unaware of caret nodes, and they
are only added to the DOM during the render phase. Likewise, when calculating
the content string, caret nodes need to be ignored, as they would confuse the model.
As part of the reconciliation, the caret position is also adjusted to any changes
the model made to the input. The caret is passed around in two formats.
The model receives the caret *offset* within the content string (which includes
an atNodeEnd flag to make it unambiguous if it is at a part and or the next part start).
The model converts this to a caret *position* internally, which has a partIndex
and an offset within the part text, which is more natural to work with.
From there on, the caret *position* is used, also during reconciliation.

6
docs/features/README.md Normal file
View file

@ -0,0 +1,6 @@
# Feature documention
The idea of this folder is to document the features we support in different parts of the app.
In case anyone needs to work on a given part, and isn't aware of all the features in the area,
they will hopefully get an idea for all the supported functionality to know what to take into account
when making changes.

37
docs/features/composer.md Normal file
View file

@ -0,0 +1,37 @@
# Composer Features
## Auto Complete
- Hitting tab tries to auto-complete the word before the caret as a room member
- If no matching name is found, a visual bell is shown
- @ + a letter opens auto complete for members starting with the given letter
- When inserting a user pill at the start in the composer, a colon and space is appended to the pill
- When inserting a user pill anywhere else in composer, only a space is appended to the pill
- # + a letter opens auto complete for rooms starting with the given letter
- : open auto complete for emoji
- Pressing arrow-up/arrow-down while the autocomplete is open navigates between auto complete options
- Pressing tab while the autocomplete is open goes to the next autocomplete option,
wrapping around at the end after reverting to the typed text first.
## Formatting
- When selecting text, a formatting bar appears above the selection.
- The formatting bar allows to format the selected test as:
bold, italic, strikethrough, a block quote, and a code block (inline if no linebreak is selected).
- Formatting is applied as markdown syntax.
- Hitting ctrl/cmd+B also marks the selected text as bold
- Hitting ctrl/cmd+I also marks the selected text as italic
- Hitting ctrl/cmd+> also marks the selected text as a blockquote
## Misc
- When hitting the arrow-up button while having the caret at the start in the composer,
the last message sent by the syncing user is edited.
- Clicking a display name on an event in the timeline inserts a user pill into the composer
- Emoticons (like :-), >:-), :-/, ...) are replaced by emojis while typing if the relevant setting is enabled
- Typing in the composer sends typing notifications in the room
- Pressing ctrl/mod+z and ctrl/mod+y undoes/redoes modifications
- Pressing shift+enter inserts a line break
- Pressing enter sends the message.
- Choosing "Quote" in the context menu of an event inserts a quote of the event body in the composer.
- Choosing "Reply" in the context menu of an event shows a preview above the composer to reply to.
- Pressing alt+arrow up/arrow down navigates in previously sent messages, putting them in the composer.

2
docs/settings.md
View file

@ -15,7 +15,7 @@ order of prioirty, are:
* `room-account` - The current user's account, but only when in a specific room
* `account` - The current user's account
* `room` - A specific room (setting for all members of the room)
* `config` - Values are defined by `config.json`
* `config` - Values are defined by the `settingDefaults` key (usually) in `config.json`
* `default` - The hardcoded default for the settings
Individual settings may control which levels are appropriate for them as part of the defaults. This is often to ensure

4
karma.conf.js
View file

@ -28,7 +28,7 @@ process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
function fileExists(name) {
try {
fs.statSync(gsCss);
fs.statSync(name);
return true;
} catch (e) {
return false;
@ -166,7 +166,7 @@ module.exports = function (config) {
]
},
{
test: /\.(gif|png|svg|ttf)$/,
test: /\.(gif|png|svg|ttf|woff2)$/,
loader: 'file-loader',
},
],

44
package.json
View file

@ -1,6 +1,6 @@
{
"name": "matrix-react-sdk",
"version": "1.1.0",
"version": "1.7.4",
"description": "SDK for matrix.org using React",
"author": "matrix.org",
"repository": {
@ -40,6 +40,7 @@
"rethemendex": "res/css/rethemendex.sh",
"i18n": "matrix-gen-i18n",
"prunei18n": "matrix-prune-i18n",
"diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && ./scripts/gen-i18n.js && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
"build": "yarn reskindex && yarn start:init",
"build:watch": "babel src -w --skip-initial-build -d lib --source-maps --copy-files",
"emoji-data-strip": "node scripts/emoji-data-strip.js",
@ -49,38 +50,45 @@
"lint": "eslint src/",
"lintall": "eslint src/ test/",
"lintwithexclusions": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
"stylelint": "stylelint res/css/**/*.scss",
"stylelint": "stylelint 'res/css/**/*.scss'",
"clean": "rimraf lib",
"prepare": "yarn clean && yarn build && git rev-parse HEAD > git-revision.txt",
"test": "karma start --single-run=true --browsers VectorChromeHeadless",
"test-multi": "karma start"
"test-multi": "karma start",
"e2etests": "./test/end-to-end-tests/run.sh --riot-url http://localhost:8080"
},
"dependencies": {
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-runtime": "^6.26.0",
"bluebird": "^3.5.0",
"blueimp-canvas-to-blob": "^3.5.0",
"browser-encrypt-attachment": "^0.3.0",
"browser-request": "^0.3.3",
"classnames": "^2.1.2",
"commonmark": "^0.28.1",
"counterpart": "^0.18.0",
"emojione": "2.2.7",
"create-react-class": "^15.6.0",
"diff-dom": "^4.1.3",
"diff-match-patch": "^1.0.4",
"emojibase-data": "^4.0.2",
"emojibase-regex": "^3.0.0",
"escape-html": "^1.0.3",
"file-saver": "^1.3.3",
"filesize": "3.5.6",
"flux": "2.1.1",
"focus-trap-react": "^3.0.5",
"focus-visible": "^5.0.2",
"fuse.js": "^2.2.0",
"gemini-scrollbar": "github:matrix-org/gemini-scrollbar#b302279",
"gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566",
"gfm.css": "^1.1.1",
"glob": "^5.0.14",
"highlight.js": "9.14.2",
"glob-to-regexp": "^0.4.1",
"highlight.js": "^9.15.8",
"is-ip": "^2.0.0",
"isomorphic-fetch": "^2.2.1",
"linkifyjs": "^2.1.6",
"lodash": "^4.13.1",
"lolex": "2.3.2",
"matrix-js-sdk": "1.1.0",
"lodash": "^4.17.14",
"lolex": "4.2",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
"optimist": "^0.6.1",
"pako": "^1.0.5",
"png-chunks-extract": "^1.0.0",
@ -88,11 +96,11 @@
"qrcode-react": "^0.1.16",
"qs": "^6.6.0",
"querystring": "^0.2.0",
"react": "^15.6.0",
"react-addons-css-transition-group": "15.3.2",
"react": "^16.9.0",
"react-addons-css-transition-group": "15.6.2",
"react-beautiful-dnd": "^4.0.1",
"react-dom": "^15.6.0",
"react-gemini-scrollbar": "github:matrix-org/react-gemini-scrollbar#5e97aef",
"react-dom": "^16.9.0",
"react-gemini-scrollbar": "github:matrix-org/react-gemini-scrollbar#9cf17f63b7c0b0ec5f31df27da0f82f7238dc594",
"resize-observer-polyfill": "^1.5.0",
"sanitize-html": "^1.18.4",
"slate": "^0.41.2",
@ -111,7 +119,6 @@
"babel-eslint": "^10.0.1",
"babel-loader": "^7.1.5",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-async-to-bluebird": "^1.1.1",
"babel-plugin-transform-builtin-extend": "^1.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
@ -127,7 +134,9 @@
"eslint-config-google": "^0.7.1",
"eslint-plugin-babel": "^5.2.1",
"eslint-plugin-flowtype": "^2.30.0",
"eslint-plugin-jest": "^23.0.4",
"eslint-plugin-react": "^7.7.0",
"eslint-plugin-react-hooks": "^2.0.1",
"estree-walker": "^0.5.0",
"expect": "^24.1.0",
"file-loader": "^3.0.1",
@ -143,15 +152,16 @@
"karma-summary-reporter": "^1.5.1",
"karma-webpack": "^4.0.0-beta.0",
"matrix-mock-request": "^1.2.3",
"matrix-react-test-utils": "^0.1.1",
"matrix-react-test-utils": "^0.2.2",
"mocha": "^5.0.5",
"react-addons-test-utils": "^15.4.0",
"react-test-renderer": "^16.9.0",
"require-json": "0.0.1",
"rimraf": "^2.4.3",
"sinon": "^5.0.7",
"source-map-loader": "^0.2.3",
"stylelint": "^9.10.1",
"stylelint-config-standard": "^18.2.0",
"stylelint-scss": "^3.9.0",
"walk": "^2.3.9",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1"

119
res/css/_common.scss
View file

@ -30,6 +30,16 @@ body {
color: $primary-fg-color;
border: 0px;
margin: 0px;
// needed to match the designs correctly on macOS
// see https://github.com/vector-im/riot-web/issues/11425
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
pre, code {
font-family: $monospace-font-family;
font-size: 100% !important;
}
.error, .warning {
@ -99,15 +109,23 @@ input[type=text], input[type=password], textarea {
color: $primary-fg-color;
}
/* Required by Firefox */
textarea {
font-family: $font-family;
color: $primary-fg-color;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
outline: none;
box-shadow: none;
}
/* Required by Firefox */
textarea {
font-family: $font-family;
color: $primary-fg-color;
// This is used to hide the standard outline added by browsers for
// accessible (focusable) components. Not intended for buttons, but
// should be used on things like focusable containers where the outline
// is usually not helping anyone.
*:focus:not(.focus-visible) {
outline: none;
}
// .mx_textinput is a container for a text input
@ -116,6 +134,13 @@ textarea {
// appear to be part of the input
.mx_Dialog, .mx_MatrixChat {
.mx_textinput > input[type=text],
.mx_textinput > input[type=search] {
border: none;
flex: 1;
color: $primary-fg-color;
}
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput {
@ -134,13 +159,6 @@ textarea {
.mx_textinput {
display: flex;
align-items: center;
> input[type=text],
> input[type=search] {
border: none;
flex: 1;
color: $primary-fg-color;
}
}
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
@ -153,14 +171,12 @@ textarea {
/*** panels ***/
.dark-panel {
background-color: $dark-panel-bg-color;
}
.dark-panel {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.mx_textinput {
color: $input-darker-fg-color;
background-color: $input-darker-bg-color;
background-color: $primary-bg-color;
border: none;
}
}
@ -196,25 +212,25 @@ textarea {
/* Expand thumbs on hoverover */
.gm-scrollbar {
border-radius: 5px ! important;
border-radius: 5px !important;
}
.gm-scrollbar.-vertical {
width: 6px;
transition: width 120ms ease-out ! important;
transition: width 120ms ease-out !important;
}
.gm-scrollbar.-vertical:hover,
.gm-scrollbar.-vertical:active {
width: 8px;
transition: width 120ms ease-out ! important;
transition: width 120ms ease-out !important;
}
.gm-scrollbar.-horizontal {
height: 6px;
transition: height 120ms ease-out ! important;
transition: height 120ms ease-out !important;
}
.gm-scrollbar.-horizontal:hover,
.gm-scrollbar.-horizontal:active {
height: 8px;
transition: height 120ms ease-out ! important;
transition: height 120ms ease-out !important;
}
// These are magic constants which are excluded from tinting, to let themes
@ -258,14 +274,6 @@ textarea {
justify-content: center;
}
/* Spinner Dialog overide */
.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
width: auto;
border-radius: 8px;
padding: 0px;
box-shadow: none;
}
.mx_Dialog {
background-color: $primary-bg-color;
color: $light-fg-color;
@ -327,7 +335,7 @@ textarea {
.mx_Dialog_header {
position: relative;
margin-bottom: 20px;
margin-bottom: 10px;
}
.mx_Dialog_title {
@ -377,7 +385,7 @@ textarea {
// flip colours for the secondary ones
font-weight: 600;
border: 1px solid $accent-color ! important;
border: 1px solid $accent-color;
color: $accent-color;
background-color: $button-secondary-bg-color;
}
@ -394,7 +402,7 @@ textarea {
filter: brightness($focus-brightness);
}
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
color: $accent-fg-color;
background-color: $accent-color;
min-width: 156px;
@ -412,6 +420,14 @@ textarea {
opacity: 0.7;
}
/* Spinner Dialog overide */
.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
width: auto;
border-radius: 8px;
padding: 0px;
box-shadow: none;
}
// TODO: Review mx_GeneralButton usage to see if it can use a different class
// These classes were brought in from the old UserSettings and are included here to avoid
// breaking the app.
@ -445,25 +461,6 @@ textarea {
background-color: $primary-bg-color;
}
.mx_emojione {
height: 1em;
vertical-align: middle;
}
.mx_emojione_selected {
background-color: $accent-color;
}
::-moz-selection {
background-color: $accent-color;
color: $selection-fg-color;
}
::selection {
background-color: $accent-color;
color: $selection-fg-color;
}
.mx_textButton {
@mixin mx_DialogButton_small;
}
@ -558,3 +555,27 @@ textarea {
color: $username-variant8-color;
}
@define-mixin mx_Tooltip_dark {
box-shadow: none;
background-color: $tooltip-timeline-bg-color;
color: $tooltip-timeline-fg-color;
border: none;
border-radius: 3px;
padding: 6px 8px;
}
// This is a workaround for our mixins not supporting child selectors
.mx_Tooltip_dark {
.mx_Tooltip_chevron::after {
border-right-color: $tooltip-timeline-bg-color;
}
}
@define-mixin mx_Settings_fullWidthField {
margin-right: 100px;
}
@define-mixin mx_Settings_tooltip {
// So it fits in the space provided by the page
max-width: 120px;
}

34
res/css/_components.scss
View file

@ -25,6 +25,7 @@
@import "./structures/_TabbedView.scss";
@import "./structures/_TagPanel.scss";
@import "./structures/_TagPanelButtons.scss";
@import "./structures/_ToastContainer.scss";
@import "./structures/_TopLeftMenuButton.scss";
@import "./structures/_UploadBar.scss";
@import "./structures/_ViewSource.scss";
@ -48,9 +49,9 @@
@import "./views/context_menus/_StatusMessageContextMenu.scss";
@import "./views/context_menus/_TagTileContextMenu.scss";
@import "./views/context_menus/_TopLeftMenu.scss";
@import "./views/context_menus/_WidgetContextMenu.scss";
@import "./views/dialogs/_AddressPickerDialog.scss";
@import "./views/dialogs/_Analytics.scss";
@import "./views/dialogs/_BugReportDialog.scss";
@import "./views/dialogs/_ChangelogDialog.scss";
@import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@import "./views/dialogs/_ConfirmUserActionDialog.scss";
@ -62,6 +63,7 @@
@import "./views/dialogs/_EncryptedEventDialog.scss";
@import "./views/dialogs/_GroupAddressPicker.scss";
@import "./views/dialogs/_IncomingSasDialog.scss";
@import "./views/dialogs/_MessageEditHistoryDialog.scss";
@import "./views/dialogs/_RestoreKeyBackupDialog.scss";
@import "./views/dialogs/_RoomSettingsDialog.scss";
@import "./views/dialogs/_RoomUpgradeDialog.scss";
@ -70,6 +72,9 @@
@import "./views/dialogs/_SetPasswordDialog.scss";
@import "./views/dialogs/_SettingsDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_SlashCommandHelpDialog.scss";
@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
@import "./views/dialogs/_TermsDialog.scss";
@import "./views/dialogs/_UnknownDeviceDialog.scss";
@import "./views/dialogs/_UploadConfirmDialog.scss";
@import "./views/dialogs/_UserSettingsDialog.scss";
@ -84,23 +89,30 @@
@import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss";
@import "./views/elements/_ErrorBoundary.scss";
@import "./views/elements/_EventListSummary.scss";
@import "./views/elements/_Field.scss";
@import "./views/elements/_FormButton.scss";
@import "./views/elements/_IconButton.scss";
@import "./views/elements/_ImageView.scss";
@import "./views/elements/_InlineSpinner.scss";
@import "./views/elements/_InteractiveTooltip.scss";
@import "./views/elements/_ManageIntegsButton.scss";
@import "./views/elements/_MemberEventListSummary.scss";
@import "./views/elements/_PowerSelector.scss";
@import "./views/elements/_ProgressBar.scss";
@import "./views/elements/_ReplyThread.scss";
@import "./views/elements/_ResizeHandle.scss";
@import "./views/elements/_RichText.scss";
@import "./views/elements/_RoleButton.scss";
@import "./views/elements/_RoomAliasField.scss";
@import "./views/elements/_Spinner.scss";
@import "./views/elements/_SyntaxHighlight.scss";
@import "./views/elements/_TextWithTooltip.scss";
@import "./views/elements/_ToggleSwitch.scss";
@import "./views/elements/_ToolTipButton.scss";
@import "./views/elements/_Tooltip.scss";
@import "./views/elements/_TooltipButton.scss";
@import "./views/elements/_Validation.scss";
@import "./views/emojipicker/_EmojiPicker.scss";
@import "./views/globals/_MatrixToolbar.scss";
@import "./views/groups/_GroupPublicityToggle.scss";
@import "./views/groups/_GroupRoomList.scss";
@ -110,24 +122,30 @@
@import "./views/messages/_MEmoteBody.scss";
@import "./views/messages/_MFileBody.scss";
@import "./views/messages/_MImageBody.scss";
@import "./views/messages/_MKeyVerificationRequest.scss";
@import "./views/messages/_MNoticeBody.scss";
@import "./views/messages/_MStickerBody.scss";
@import "./views/messages/_MTextBody.scss";
@import "./views/messages/_MessageActionBar.scss";
@import "./views/messages/_MessageTimestamp.scss";
@import "./views/messages/_ReactionDimension.scss";
@import "./views/messages/_MjolnirBody.scss";
@import "./views/messages/_ReactionsRow.scss";
@import "./views/messages/_ReactionsRowButton.scss";
@import "./views/messages/_ReactionsRowButtonTooltip.scss";
@import "./views/messages/_RoomAvatarEvent.scss";
@import "./views/messages/_SenderProfile.scss";
@import "./views/messages/_TextualEvent.scss";
@import "./views/messages/_UnknownBody.scss";
@import "./views/messages/_ViewSourceEvent.scss";
@import "./views/right_panel/_UserInfo.scss";
@import "./views/room_settings/_AliasSettings.scss";
@import "./views/room_settings/_ColorSettings.scss";
@import "./views/rooms/_AppsDrawer.scss";
@import "./views/rooms/_Autocomplete.scss";
@import "./views/rooms/_AuxPanel.scss";
@import "./views/rooms/_BasicMessageComposer.scss";
@import "./views/rooms/_E2EIcon.scss";
@import "./views/rooms/_EditMessageComposer.scss";
@import "./views/rooms/_EntityTile.scss";
@import "./views/rooms/_EventTile.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
@ -136,6 +154,7 @@
@import "./views/rooms/_MemberInfo.scss";
@import "./views/rooms/_MemberList.scss";
@import "./views/rooms/_MessageComposer.scss";
@import "./views/rooms/_MessageComposerFormatBar.scss";
@import "./views/rooms/_PinnedEventTile.scss";
@import "./views/rooms/_PinnedEventsPanel.scss";
@import "./views/rooms/_PresenceLabel.scss";
@ -150,26 +169,31 @@
@import "./views/rooms/_RoomUpgradeWarningBar.scss";
@import "./views/rooms/_SearchBar.scss";
@import "./views/rooms/_SearchableEntityList.scss";
@import "./views/rooms/_SendMessageComposer.scss";
@import "./views/rooms/_Stickers.scss";
@import "./views/rooms/_TopUnreadMessagesBar.scss";
@import "./views/rooms/_WhoIsTypingTile.scss";
@import "./views/settings/_DevicesPanel.scss";
@import "./views/settings/_EmailAddresses.scss";
@import "./views/settings/_IntegrationsManager.scss";
@import "./views/settings/_IntegrationManager.scss";
@import "./views/settings/_KeyBackupPanel.scss";
@import "./views/settings/_Notifications.scss";
@import "./views/settings/_PhoneNumbers.scss";
@import "./views/settings/_ProfileSettings.scss";
@import "./views/settings/_SetIdServer.scss";
@import "./views/settings/_SetIntegrationManager.scss";
@import "./views/settings/tabs/_SettingsTab.scss";
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
@import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss";
@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss";
@import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
@import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";
@import "./views/settings/tabs/user/_NotificationUserSettingsTab.scss";
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
@import "./views/terms/_InlineTermsAgreement.scss";
@import "./views/verification/_VerificationShowSas.scss";
@import "./views/voip/_CallView.scss";
@import "./views/voip/_IncomingCallbox.scss";

9
res/css/structures/_AutoHideScrollbar.scss
View file

@ -14,12 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
/* This file has CSS for both native and non-native scrollbars in an
* order that's fairly logic to read but violates stylelints descending
* specificity rule, so turn it off for this file. It also duplicates
* a selector to separate the hiding/showing from the sizing.
/* This file has CSS for both native and non-native scrollbars in an order
* that's fairly logical to read but duplicates a selector to separate the
* hiding/showing from the sizing.
*/
/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
/* stylelint-disable no-duplicate-selectors */
/*
1. for browsers that support native overlay auto-hiding scrollbars

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

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -39,7 +40,11 @@ limitations under the License.
z-index: 5001;
}
.mx_ContextualMenu.mx_ContextualMenu_right {
.mx_ContextualMenu_right {
right: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
right: 8px;
}
@ -54,19 +59,11 @@ limitations under the License.
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_right::after {
content: '';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 7px solid $menu-bg-color;
border-bottom: 7px solid transparent;
position: absolute;
top: -7px;
right: 1px;
.mx_ContextualMenu_left {
left: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_left {
.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
left: 8px;
}
@ -81,19 +78,11 @@ limitations under the License.
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_left::after {
content: '';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid $menu-bg-color;
border-bottom: 7px solid transparent;
position: absolute;
top: -7px;
left: 1px;
.mx_ContextualMenu_top {
top: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_top {
.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
top: 8px;
}
@ -108,19 +97,11 @@ limitations under the License.
border-right: 8px solid transparent;
}
.mx_ContextualMenu_chevron_top::after {
content: '';
width: 0;
height: 0;
border-left: 7px solid transparent;
border-bottom: 7px solid $menu-bg-color;
border-right: 7px solid transparent;
position: absolute;
left: -7px;
top: 1px;
.mx_ContextualMenu_bottom {
bottom: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_bottom {
.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
bottom: 8px;
}
@ -135,24 +116,6 @@ limitations under the License.
border-right: 8px solid transparent;
}
.mx_ContextualMenu_chevron_bottom::after {
content: '';
width: 0;
height: 0;
border-left: 7px solid transparent;
border-top: 7px solid $menu-bg-color;
border-right: 7px solid transparent;
position: absolute;
left: -7px;
bottom: 1px;
}
.mx_ContextualMenu_field {
padding: 3px 6px 3px 6px;
cursor: pointer;
white-space: nowrap;
}
.mx_ContextualMenu_spinner {
display: block;
margin: 0 auto;

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

@ -18,6 +18,7 @@ limitations under the License.
order: 2;
flex: 1 1 0;
overflow-y: auto;
display: flex;
}
.mx_FilePanel .mx_RoomView_messageListWrapper {

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

@ -2,18 +2,16 @@
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.mx_GenericErrorPage_box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: inline;
width: 500px;
height: 200px;
min-height: 125px;
border: 1px solid #f22;
padding: 10px;
padding: 10px 10px 20px;
background-color: #fcc;
}

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

@ -44,21 +44,29 @@ limitations under the License.
}
.mx_GroupHeader_button {
position: relative;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
height: 20px;
width: 20px;
background-color: $groupheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
&::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
background-color: $groupheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
}
.mx_GroupHeader_editButton {
.mx_GroupHeader_editButton::before {
mask-image: url('$(res)/img/icons-settings-room.svg');
}
.mx_GroupHeader_shareButton {
.mx_GroupHeader_shareButton::before {
mask-image: url('$(res)/img/icons-share.svg');
}

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

@ -24,13 +24,13 @@ limitations under the License.
.mx_LeftPanel_container.collapsed {
min-width: unset;
/* Collapsed LeftPanel 70px */
flex: 0 0 70px;
/* Collapsed LeftPanel 50px */
flex: 0 0 50px;
}
.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 70px + Collapsed LeftPanel 70px */
flex: 0 0 140px;
/* TagPanel 70px + Collapsed LeftPanel 50px */
flex: 0 0 120px;
}
.mx_LeftPanel_tagPanelContainer {
@ -125,3 +125,53 @@ limitations under the License.
margin-top: 12px;
}
}
.mx_LeftPanel_exploreAndFilterRow {
display: flex;
.mx_SearchBox {
flex: 1 1 0;
min-width: 0;
margin: 4px 9px 1px 9px;
}
}
.mx_LeftPanel_explore {
flex: 0 0 50%;
overflow: hidden;
transition: flex-basis 0.2s;
box-sizing: border-box;
&.mx_LeftPanel_explore_hidden {
flex-basis: 0;
}
.mx_AccessibleButton {
font-size: 14px;
margin: 4px 0 1px 9px;
padding: 9px;
padding-left: 42px;
font-weight: 600;
color: $notice-secondary-color;
position: relative;
border-radius: 4px;
&:hover {
background-color: $primary-bg-color;
}
&::before {
cursor: pointer;
mask: url('$(res)/img/explore.svg');
mask-repeat: no-repeat;
mask-position: center center;
content: "";
left: 14px;
top: 10px;
width: 16px;
height: 16px;
background-color: $notice-secondary-color;
position: absolute;
}
}
}

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

@ -18,6 +18,7 @@ limitations under the License.
order: 2;
flex: 1 1 0;
overflow-y: auto;
display: flex;
}
.mx_NotificationPanel .mx_RoomView_messageListWrapper {

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

@ -50,18 +50,18 @@ limitations under the License.
height: 20px;
width: 20px;
position: relative;
}
.mx_RightPanel_headerButton::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: $rightpanel-button-color;
mask-repeat: no-repeat;
mask-size: contain;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: $rightpanel-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
}
.mx_RightPanel_membersButton::before {

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

@ -17,7 +17,6 @@ limitations under the License.
.mx_RoomDirectory_dialogWrapper > .mx_Dialog {
max-width: 960px;
height: 100%;
padding: 20px;
}
.mx_RoomDirectory_dialog {
@ -35,24 +34,6 @@ limitations under the License.
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 {
flex: 1;
display: flex;
@ -91,9 +72,8 @@ limitations under the License.
}
.mx_RoomDirectory_roomAvatar {
width: 24px;
padding-left: 12px;
padding-right: 24px;
width: 32px;
padding-right: 14px;
vertical-align: top;
}
@ -101,6 +81,35 @@ limitations under the License.
padding-bottom: 16px;
}
.mx_RoomDirectory_roomMemberCount {
color: $light-fg-color;
width: 60px;
padding: 0 10px;
text-align: center;
&::before {
background-color: $light-fg-color;
display: inline-block;
vertical-align: text-top;
margin-right: 2px;
content: "";
mask: url('$(res)/img/feather-customised/user.svg');
mask-repeat: no-repeat;
mask-position: center;
// scale it down and make the size slightly bigger (16 instead of 14px)
// to avoid rendering artifacts
mask-size: 80%;
width: 16px;
height: 16px;
}
}
.mx_RoomDirectory_join, .mx_RoomDirectory_preview {
width: 80px;
text-align: center;
white-space: nowrap;
}
.mx_RoomDirectory_name {
display: inline-block;
font-weight: 600;
@ -110,22 +119,9 @@ limitations under the License.
display: inline-block;
}
.mx_RoomDirectory_perm {
display: inline;
padding-left: 5px;
padding-right: 5px;
margin-right: 5px;
height: 15px;
border-radius: 11px;
background-color: $plinth-bg-color;
text-transform: uppercase;
font-weight: 600;
font-size: 11px;
color: $accent-color;
}
.mx_RoomDirectory_topic {
cursor: initial;
color: $light-fg-color;
}
.mx_RoomDirectory_alias {
@ -133,13 +129,20 @@ limitations under the License.
color: $settings-grey-fg-color;
}
.mx_RoomDirectory_roomMemberCount {
text-align: right;
width: 100px;
padding-right: 10px;
}
.mx_RoomDirectory_table tr {
padding-bottom: 10px;
cursor: pointer;
}
.mx_RoomDirectory .mx_RoomView_MessageList {
padding: 0;
}
.mx_RoomDirectory p {
font-size: 14px;
margin-top: 0;
.mx_AccessibleButton {
padding: 0;
}
}

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

@ -20,7 +20,7 @@ limitations under the License.
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
distribute size of items within the same category 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,
@ -46,10 +46,15 @@ limitations under the License.
flex-direction: row;
align-items: center;
flex: 0 0 auto;
margin: 0 16px;
margin: 0 8px;
padding: 0 8px;
height: 36px;
}
.mx_RoomSubList_labelContainer.focus-visible:focus-within {
background-color: $roomtile-focused-bg-color;
}
.mx_RoomSubList_label {
flex: 1;
cursor: pointer;
@ -67,13 +72,13 @@ limitations under the License.
margin-left: 8px;
}
.mx_RoomSubList_badge {
.mx_RoomSubList_badge > div {
flex: 0 0 auto;
border-radius: 8px;
color: $accent-fg-color;
font-weight: 600;
font-size: 12px;
padding: 0 5px;
color: $roomtile-badge-fg-color;
background-color: $roomtile-name-color;
cursor: pointer;
}
@ -103,7 +108,8 @@ limitations under the License.
}
}
.mx_RoomSubList_badgeHighlight {
.mx_RoomSubList_badgeHighlight > div {
color: $accent-fg-color;
background-color: $warning-color;
}
@ -143,8 +149,9 @@ limitations under the License.
}
.mx_RoomSubList_labelContainer {
margin-right: 14px;
margin-right: 8px;
margin-left: 2px;
padding: 0;
}
.mx_RoomSubList_addRoom {

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

@ -221,6 +221,9 @@ hr.mx_RoomView_myReadMarker {
position: relative;
top: -1px;
z-index: 1;
transition: width 400ms easeInSine 1s, opacity 400ms easeInSine 1s;
width: 99%;
opacity: 1;
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {

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

@ -14,12 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_SearchBox_closeButton {
cursor: pointer;
background-image: url('$(res)/img/icons-close.svg');
background-repeat: no-repeat;
width: 16px;
height: 16px;
background-position: center;
padding: 9px;
.mx_SearchBox {
flex: 1 1 0;
min-width: 0;
&.mx_SearchBox_blurred:not(:hover) {
background-color: transparent;
}
.mx_SearchBox_closeButton {
cursor: pointer;
background-image: url('$(res)/img/icons-close.svg');
background-repeat: no-repeat;
width: 16px;
height: 16px;
background-position: center;
padding: 9px;
}
}

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

@ -63,7 +63,6 @@ limitations under the License.
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5px;
height: 100%;
}

98
res/css/structures/_ToastContainer.scss Normal file
View file

@ -0,0 +1,98 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_ToastContainer {
position: absolute;
top: 0;
left: 70px;
z-index: 101;
padding: 4px;
display: grid;
grid-template-rows: 1fr 14px 6px;
&.mx_ToastContainer_stacked::before {
content: "";
margin: 0 4px;
grid-row: 2 / 4;
grid-column: 1;
background-color: white;
box-shadow: 0px 4px 12px $menu-box-shadow-color;
border-radius: 8px;
}
.mx_Toast_toast {
grid-row: 1 / 3;
grid-column: 1;
color: $primary-fg-color;
background-color: $primary-bg-color;
box-shadow: 0px 4px 12px $menu-box-shadow-color;
border-radius: 8px;
overflow: hidden;
display: grid;
grid-template-columns: 20px 1fr;
column-gap: 10px;
row-gap: 4px;
padding: 8px;
padding-right: 16px;
&.mx_Toast_hasIcon {
&::after {
content: "";
width: 20px;
height: 20px;
grid-column: 1;
grid-row: 1;
mask-size: 100%;
mask-repeat: no-repeat;
}
&.mx_Toast_icon_verification::after {
mask-image: url("$(res)/img/e2e/normal.svg");
background-color: $primary-fg-color;
}
h2, .mx_Toast_body {
grid-column: 2;
}
}
h2 {
grid-column: 1 / 3;
grid-row: 1;
margin: 0;
font-size: 15px;
font-weight: 600;
}
.mx_Toast_body {
grid-column: 1 / 3;
grid-row: 2;
}
.mx_Toast_buttons {
display: flex;
}
.mx_Toast_description {
max-width: 400px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 4px 0 11px 0;
font-size: 12px;
}
}
}

2
res/css/structures/_TopLeftMenuButton.scss
View file

@ -22,7 +22,7 @@ limitations under the License.
display: flex;
align-items: center;
min-width: 0;
padding: 0 7px;
padding: 0 4px;
overflow: hidden;
}

16
res/css/structures/auth/_Login.scss
View file

@ -30,6 +30,7 @@ limitations under the License.
.mx_Login_submit:disabled {
opacity: 0.3;
cursor: default;
}
.mx_AuthBody a.mx_Login_sso_link:link,
@ -62,6 +63,15 @@ limitations under the License.
margin-bottom: 12px;
}
.mx_Login_error.mx_Login_serverError {
text-align: left;
font-weight: normal;
}
.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
color: $orange-warning-color;
}
.mx_Login_type_container {
display: flex;
align-items: center;
@ -73,9 +83,9 @@ limitations under the License.
}
.mx_Login_type_label {
flex-grow: 1;
flex: 1;
}
.mx_Login_type_dropdown {
min-width: 200px;
.mx_Login_underlinedServerName {
border-bottom: 1px dashed $accent-color;
}

11
res/css/views/auth/_AuthBody.scss
View file

@ -39,8 +39,7 @@ limitations under the License.
a:link,
a:hover,
a:visited {
color: $accent-color;
text-decoration: none;
@mixin mx_Dialog_link;
}
input[type=text],
@ -58,12 +57,12 @@ limitations under the License.
color: $authpage-primary-color;
}
.mx_Field_labelAlwaysTopLeft label,
.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
.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 */,
.mx_Field_labelAlwaysTopLeft label {
.mx_Field textarea:not(:placeholder-shown) + label {
background-color: $authpage-body-bg-color;
}
@ -72,7 +71,6 @@ limitations under the License.
}
.mx_Field input {
width: 100%;
box-sizing: border-box;
}
@ -110,7 +108,6 @@ limitations under the License.
.mx_AuthBody_fieldRow > .mx_Field {
margin: 0 5px;
flex: 1;
}
.mx_AuthBody_fieldRow > .mx_Field:first-child {

6
res/css/views/auth/_InteractiveAuthEntryComponents.scss
View file

@ -49,10 +49,14 @@ limitations under the License.
}
.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
background-color: $accent-color-50pct;
background-color: $accent-color-darker;
cursor: default;
}
.mx_InteractiveAuthEntryComponents_termsPolicy {
display: block;
}
.mx_InteractiveAuthEntryComponents_passwordSection {
width: 300px;
}

34
res/css/views/auth/_ServerConfig.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,24 +15,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ServerConfig_fields {
display: flex;
margin: 1em 0;
}
.mx_ServerConfig_fields .mx_Field {
flex: 1;
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 {
opacity: 0.8;
}
.mx_ServerConfig_error {
display: block;
color: $warning-color;
}
.mx_ServerConfig_identityServer {
transform: scaleY(0);
transform-origin: top;
transition: transform 0.25s;
&.mx_ServerConfig_identityServer_shown {
transform: scaleY(1);
}
}

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

@ -18,6 +18,18 @@ limitations under the License.
padding: 6px;
}
.mx_RoomTileContextMenu_tag_icon {
padding-right: 8px;
padding-left: 4px;
display: inline-block;
}
.mx_RoomTileContextMenu_tag_icon_set {
padding-right: 8px;
padding-left: 4px;
display: none;
}
.mx_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave {
padding-top: 8px;
padding-right: 20px;
@ -45,18 +57,6 @@ limitations under the License.
color: rgba(0, 0, 0, 0.2);
}
.mx_RoomTileContextMenu_tag_icon {
padding-right: 8px;
padding-left: 4px;
display: inline-block
}
.mx_RoomTileContextMenu_tag_icon_set {
padding-right: 8px;
padding-left: 4px;
display: none;
}
.mx_RoomTileContextMenu_separator {
margin-top: 0;
margin-bottom: 0;
@ -72,10 +72,6 @@ limitations under the License.
color: $warning-color;
}
.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon {
/* Something to indicate that the icon is the set tag */
}
.mx_RoomTileContextMenu_notif_picker {
position: absolute;
top: 16px;

2
res/css/views/context_menus/_TagTileContextMenu.scss
View file

@ -33,7 +33,7 @@ limitations under the License.
.mx_TagTileContextMenu_item_icon {
padding-right: 8px;
padding-left: 4px;
display: inline-block
display: inline-block;
}
.mx_TagTileContextMenu_separator {

1
res/css/views/context_menus/_TopLeftMenu.scss
View file

@ -89,5 +89,4 @@ limitations under the License.
background-color: $menu-selected-color;
}
}
}

36
res/css/views/context_menus/_WidgetContextMenu.scss Normal file
View file

@ -0,0 +1,36 @@
/*
Copyright 2019 The Matrix.org Foundaction C.I.C.
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_WidgetContextMenu {
padding: 6px;
.mx_WidgetContextMenu_option {
padding: 3px 6px 3px 6px;
cursor: pointer;
white-space: nowrap;
}
.mx_WidgetContextMenu_separator {
margin-top: 0;
margin-bottom: 0;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: solid;
border-top-width: 1px;
border-color: $menu-border-color;
}
}

17
res/css/views/dialogs/_AddressPickerDialog.scss
View file

@ -1,6 +1,7 @@
/*
Copyright 2016 OpenMarket Ltd
Copyright 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -15,10 +16,17 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_AddressPickerDialog {
a:link,
a:hover,
a:visited {
@mixin mx_Dialog_link;
}
}
/* Using a textarea for this element, to circumvent autofill */
.mx_AddressPickerDialog_input,
.mx_AddressPickerDialog_input:focus
{
.mx_AddressPickerDialog_input:focus {
height: 26px;
font-size: 14px;
font-family: $font-family;
@ -36,7 +44,7 @@ limitations under the License.
}
.mx_AddressPickerDialog .mx_Dialog_content {
min-height: 50px
min-height: 50px;
}
.mx_AddressPickerDialog_inputContainer {
@ -68,3 +76,6 @@ limitations under the License.
pointer-events: none;
}
.mx_AddressPickerDialog_identityServer {
margin-top: 1em;
}

60
res/css/views/dialogs/_CreateRoomDialog.scss
View file

@ -14,8 +14,29 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CreateRoomDialog_details_summary {
outline: none;
.mx_CreateRoomDialog_details {
.mx_CreateRoomDialog_details_summary {
outline: none;
list-style: none;
font-weight: 600;
cursor: pointer;
color: $accent-color;
// list-style doesn't do it for webkit
&::-webkit-details-marker {
display: none;
}
}
> div {
display: flex;
align-items: start;
margin: 5px 0;
input[type=checkbox] {
margin-right: 10px;
}
}
}
.mx_CreateRoomDialog_label {
@ -36,3 +57,38 @@ limitations under the License.
background-color: $primary-bg-color;
width: 100%;
}
// needed to make the alias field only grow as wide as needed
// as opposed to full width
.mx_CreateRoomDialog_aliasContainer {
display: flex;
// put margin on container so it can collapse with siblings
margin: 10px 0;
.mx_RoomAliasField {
margin: 0;
}
}
.mx_CreateRoomDialog {
&.mx_Dialog_fixedWidth {
width: 450px;
}
.mx_SettingsFlag {
display: flex;
}
.mx_SettingsFlag_label {
flex: 1 1 0;
min-width: 0;
font-weight: 600;
}
.mx_ToggleSwitch {
flex: 0 0 auto;
margin-left: 30px;
}
}

4
res/css/views/dialogs/_DeactivateAccountDialog.scss
View file

@ -21,3 +21,7 @@ limitations under the License.
.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section {
margin-top: 60px;
}
.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field {
width: 300px;
}

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

@ -23,7 +23,11 @@ limitations under the License.
cursor: default !important;
}
.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_ServersInRoomList_button, .mx_DevTools_RoomStateExplorer_query {
.mx_DevTools_RoomStateExplorer_query {
margin-bottom: 10px;
}
.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_ServersInRoomList_button {
margin-bottom: 10px;
width: 100%;
}
@ -41,13 +45,11 @@ limitations under the License.
border-bottom: 1px solid #e5e5e5;
}
.mx_DevTools_inputRow
{
.mx_DevTools_inputRow {
display: table-row;
}
.mx_DevTools_inputLabelCell
{
.mx_DevTools_inputLabelCell {
display: table-cell;
font-weight: bold;
padding-right: 24px;
@ -58,8 +60,7 @@ limitations under the License.
width: 240px;
}
.mx_DevTools_inputCell input
{
.mx_DevTools_inputCell input {
display: inline-block;
border: 0;
border-bottom: 1px solid $input-underline-color;
@ -75,15 +76,15 @@ limitations under the License.
max-width: 684px;
min-height: 250px;
padding: 10px;
width: 100%;
}
.mx_DevTools_content .mx_Field_input {
display: inline-block;
.mx_DevTools_eventTypeStateKeyGroup {
display: flex;
flex-wrap: wrap;
}
.mx_DevTools_content .mx_Field_input + .mx_Field_input {
margin-left: 42px;
.mx_DevTools_content .mx_Field_input:first-of-type {
margin-right: 42px;
}
.mx_DevTools_tgl {
@ -91,11 +92,11 @@ limitations under the License.
// add default box-sizing for this scope
&,
&:after,
&:before,
&::after,
&::before,
& *,
& *:after,
& *:before,
& *::after,
& *::before,
& + .mx_DevTools_tgl-btn {
box-sizing: border-box;
&::selection {
@ -111,8 +112,8 @@ limitations under the License.
position: relative;
cursor: pointer;
user-select: none;
&:after,
&:before {
&::after,
&::before {
position: relative;
display: block;
content: "";
@ -120,16 +121,16 @@ limitations under the License.
height: 100%;
}
&:after {
&::after {
left: 0;
}
&:before {
&::before {
display: none;
}
}
&:checked + .mx_DevTools_tgl-btn:after {
&:checked + .mx_DevTools_tgl-btn::after {
left: 50%;
}
}
@ -140,8 +141,8 @@ limitations under the License.
transition: all .2s ease;
font-family: sans-serif;
perspective: 100px;
&:after,
&:before {
&::after,
&::before {
display: inline-block;
transition: all .4s ease;
width: 100%;
@ -156,34 +157,34 @@ limitations under the License.
border-radius: 4px;
}
&:after {
&::after {
content: attr(data-tg-on);
background: #02C66F;
background: #02c66f;
transform: rotateY(-180deg);
}
&:before {
background: #FF3A19;
&::before {
background: #ff3a19;
content: attr(data-tg-off);
}
&:active:before {
&:active::before {
transform: rotateY(-20deg);
}
}
&:checked + .mx_DevTools_tgl-btn {
&:before {
&::before {
transform: rotateY(180deg);
}
&:after {
&::after {
transform: rotateY(0);
left: 0;
background: #7FC6A6;
background: #7fc6a6;
}
&:active:after {
&:active::after {
transform: rotateY(20deg);
}
}

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

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_GroupAddressPicker_checkboxContainer{
.mx_GroupAddressPicker_checkboxContainer {
margin-top: 10px;
display: flex;
}

67
res/css/views/dialogs/_MessageEditHistoryDialog.scss Normal file
View file

@ -0,0 +1,67 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_MessageEditHistoryDialog .mx_Dialog_header > .mx_Dialog_title {
text-align: center;
}
.mx_MessageEditHistoryDialog {
display: flex;
flex-direction: column;
max-height: 60vh;
}
.mx_MessageEditHistoryDialog_scrollPanel {
flex: 1 1 auto;
}
.mx_MessageEditHistoryDialog_error {
color: $warning-color;
text-align: center;
}
.mx_MessageEditHistoryDialog_edits {
list-style-type: none;
font-size: 14px;
padding: 0;
color: $primary-fg-color;
span.mx_EditHistoryMessage_deletion, span.mx_EditHistoryMessage_insertion {
padding: 0px 2px;
}
.mx_EditHistoryMessage_deletion {
color: rgb(255, 76, 85);
background-color: rgba(255, 76, 85, 0.1);
text-decoration: line-through;
}
.mx_EditHistoryMessage_insertion {
color: rgb(26, 169, 123);
background-color: rgba(26, 169, 123, 0.1);
text-decoration: underline;
}
.mx_EventTile_line, .mx_EventTile_content {
margin-right: 0px;
}
.mx_MessageActionBar .mx_AccessibleButton {
font-size: 10px;
padding: 0 8px;
}
}

8
res/css/views/dialogs/_RoomSettingsDialog.scss
View file

@ -17,19 +17,19 @@ limitations under the License.
// ICONS
// ==========================================================
.mx_RoomSettingsDialog_settingsIcon:before {
.mx_RoomSettingsDialog_settingsIcon::before {
mask-image: url('$(res)/img/feather-customised/settings.svg');
}
.mx_RoomSettingsDialog_securityIcon:before {
.mx_RoomSettingsDialog_securityIcon::before {
mask-image: url('$(res)/img/feather-customised/lock.svg');
}
.mx_RoomSettingsDialog_rolesIcon:before {
.mx_RoomSettingsDialog_rolesIcon::before {
mask-image: url('$(res)/img/feather-customised/users-sm.svg');
}
.mx_RoomSettingsDialog_warningIcon:before {
.mx_RoomSettingsDialog_warningIcon::before {
mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
}

3
res/css/views/dialogs/_SetEmailDialog.scss
View file

@ -31,6 +31,3 @@ limitations under the License.
box-shadow: none;
border: 1px solid $accent-color;
}
.mx_SetEmailDialog_email_input_placeholder {
}

1
res/css/views/dialogs/_SetPasswordDialog.scss
View file

@ -21,7 +21,6 @@ limitations under the License.
color: $primary-fg-color;
background-color: $primary-bg-color;
font-size: 15px;
width: 100%;
max-width: 280px;
margin-bottom: 10px;
}

13
res/css/views/dialogs/_BugReportDialog.scss → res/css/views/dialogs/_SlashCommandHelpDialog.scss
View file

@ -1,5 +1,5 @@
/*
Copyright 2017 OpenMarket Ltd
Copyright Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,12 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_BugReportDialog .mx_Field {
flex: 1;
.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
margin-bottom: 2px;
}
.mx_BugReportDialog_field_input {
// TODO: We should really apply this to all .mx_Field inputs.
// See https://github.com/vector-im/riot-web/issues/9344.
flex: 1;
.mx_SlashCommandHelpDialog .mx_Dialog_content {
margin-top: 12px;
margin-bottom: 34px;
}

62
res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss Normal file
View file

@ -0,0 +1,62 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_TabbedIntegrationManagerDialog .mx_Dialog {
width: 60%;
height: 70%;
overflow: hidden;
padding: 0;
max-width: initial;
max-height: initial;
position: relative;
}
.mx_TabbedIntegrationManagerDialog_container {
// Full size of the dialog, whatever it is
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
.mx_TabbedIntegrationManagerDialog_currentManager {
width: 100%;
height: 100%;
border-top: 1px solid $accent-color;
iframe {
background-color: #fff;
border: 0;
width: 100%;
height: 100%;
}
}
}
.mx_TabbedIntegrationManagerDialog_tab {
display: inline-block;
border: 1px solid $accent-color;
border-bottom: 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding: 10px 8px;
margin-right: 5px;
}
.mx_TabbedIntegrationManagerDialog_currentTab {
background-color: $accent-color;
color: $accent-fg-color;
}

48
res/css/views/dialogs/_TermsDialog.scss Normal file
View file

@ -0,0 +1,48 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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.
*/
/*
* To avoid visual glitching of two modals stacking briefly, we customise the
* terms dialog sizing when it will appear for the integration manager so that
* it gets the same basic size as the IM's own modal.
*/
.mx_TermsDialog_forIntegrationManager .mx_Dialog {
width: 60%;
height: 70%;
box-sizing: border-box;
}
.mx_TermsDialog_termsTableHeader {
font-weight: bold;
text-align: left;
}
.mx_TermsDialog_termsTable {
font-size: 12px;
width: 100%;
}
.mx_TermsDialog_service, .mx_TermsDialog_summary {
padding-right: 10px;
}
.mx_TermsDialog_link {
display: inline-block;
mask-image: url('$(res)/img/external-link.svg');
background-color: $accent-color;
width: 10px;
height: 10px;
}

20
res/css/views/dialogs/_UserSettingsDialog.scss
View file

@ -17,34 +17,38 @@ limitations under the License.
// ICONS
// ==========================================================
.mx_UserSettingsDialog_settingsIcon:before {
.mx_UserSettingsDialog_settingsIcon::before {
mask-image: url('$(res)/img/feather-customised/settings.svg');
}
.mx_UserSettingsDialog_voiceIcon:before {
.mx_UserSettingsDialog_voiceIcon::before {
mask-image: url('$(res)/img/feather-customised/phone.svg');
}
.mx_UserSettingsDialog_bellIcon:before {
.mx_UserSettingsDialog_bellIcon::before {
mask-image: url('$(res)/img/feather-customised/notifications.svg');
}
.mx_UserSettingsDialog_preferencesIcon:before {
.mx_UserSettingsDialog_preferencesIcon::before {
mask-image: url('$(res)/img/feather-customised/sliders.svg');
}
.mx_UserSettingsDialog_securityIcon:before {
.mx_UserSettingsDialog_securityIcon::before {
mask-image: url('$(res)/img/feather-customised/lock.svg');
}
.mx_UserSettingsDialog_helpIcon:before {
.mx_UserSettingsDialog_helpIcon::before {
mask-image: url('$(res)/img/feather-customised/help-circle.svg');
}
.mx_UserSettingsDialog_labsIcon:before {
.mx_UserSettingsDialog_labsIcon::before {
mask-image: url('$(res)/img/feather-customised/flag.svg');
}
.mx_UserSettingsDialog_flairIcon:before {
.mx_UserSettingsDialog_mjolnirIcon::before {
mask-image: url('$(res)/img/feather-customised/face.svg');
}
.mx_UserSettingsDialog_flairIcon::before {
mask-image: url('$(res)/img/feather-customised/flair.svg');
}

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

@ -20,8 +20,8 @@ limitations under the License.
}
.mx_CreateKeyBackupDialog_primaryContainer {
/*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/
padding: 20px
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding: 20px;
}
.mx_CreateKeyBackupDialog_primaryContainer::after {

2
res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss
View file

@ -23,7 +23,7 @@ limitations under the License.
padding-left: 45px;
padding-bottom: 10px;
&:before {
&::before {
mask: url("$(res)/img/e2e/lock-warning-filled.svg");
mask-repeat: no-repeat;
background-color: $primary-fg-color;

4
res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
View file

@ -15,8 +15,8 @@ limitations under the License.
*/
.mx_RestoreKeyBackupDialog_primaryContainer {
/*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/
padding: 20px
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding: 20px;
}
.mx_RestoreKeyBackupDialog_passPhraseInput,

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

@ -36,7 +36,7 @@ limitations under the License.
position: absolute;
right: 10px;
top: 16px;
width: 0
width: 0;
}
.mx_NetworkDropdown_networkoption {

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

@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_AccessibleButton:focus {
outline: 0;
}
.mx_AccessibleButton {
cursor: pointer;
}
@ -79,3 +75,22 @@ limitations under the License.
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
}
.mx_AccessibleButton_kind_link {
color: $button-link-fg-color;
background-color: $button-link-bg-color;
}
.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled {
opacity: 0.4;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
padding: 5px 12px;
color: $button-link-fg-color;
background-color: $button-link-bg-color;
}
.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {
opacity: 0.4;
}

5
res/css/views/elements/_AddressSelector.scss
View file

@ -20,9 +20,8 @@ limitations under the License.
width: 485px;
max-height: 116px;
overflow-y: auto;
border-radius: 3px;
background-color: $primary-bg-color;
border: solid 1px $accent-color;
border-radius: 3px;
border: solid 1px $accent-color;
cursor: pointer;
}

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

@ -51,13 +51,6 @@ limitations under the License.
background: $primary-fg-color;
}
.mx_Dropdown_input > .mx_Dropdown_option {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.mx_Dropdown_option {
height: 35px;
line-height: 35px;
@ -65,6 +58,13 @@ limitations under the License.
padding-right: 8px;
}
.mx_Dropdown_input > .mx_Dropdown_option {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.mx_Dropdown_option div {
overflow: hidden;
text-overflow: ellipsis;

6
res/css/views/elements/_EditableItemList.scss
View file

@ -42,12 +42,6 @@ limitations under the License.
margin-right: 5px;
}
.mx_EditableItemList_newItem .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_EditableItemList_label {
margin-bottom: 5px;
}

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

@ -0,0 +1,34 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_ErrorBoundary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mx_ErrorBoundary_body {
display: flex;
flex-direction: column;
max-width: 400px;
align-items: center;
.mx_AccessibleButton {
margin-top: 5px;
}
}

20
res/css/views/elements/_MemberEventListSummary.scss → res/css/views/elements/_EventListSummary.scss
View file

@ -14,28 +14,28 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MemberEventListSummary {
.mx_EventListSummary {
position: relative;
}
.mx_TextualEvent.mx_MemberEventListSummary_summary {
.mx_TextualEvent.mx_EventListSummary_summary {
font-size: 14px;
display: inline-flex;
}
.mx_MemberEventListSummary_avatars {
.mx_EventListSummary_avatars {
display: inline-block;
margin-right: 8px;
padding-top: 8px;
line-height: 12px;
}
.mx_MemberEventListSummary_avatars .mx_BaseAvatar {
.mx_EventListSummary_avatars .mx_BaseAvatar {
margin-right: -4px;
cursor: pointer;
}
.mx_MemberEventListSummary_toggle {
.mx_EventListSummary_toggle {
color: $accent-color;
cursor: pointer;
float: right;
@ -43,29 +43,29 @@ limitations under the License.
margin-top: 8px;
}
.mx_MemberEventListSummary_line {
.mx_EventListSummary_line {
border-bottom: 1px solid $primary-hairline-color;
margin-left: 63px;
line-height: 30px;
}
.mx_MatrixChat_useCompactLayout {
.mx_MemberEventListSummary {
.mx_EventListSummary {
font-size: 13px;
.mx_EventTile_line {
line-height: 20px;
}
}
.mx_MemberEventListSummary_line {
.mx_EventListSummary_line {
line-height: 22px;
}
.mx_MemberEventListSummary_toggle {
.mx_EventListSummary_toggle {
margin-top: 3px;
}
.mx_TextualEvent.mx_MemberEventListSummary_summary {
.mx_TextualEvent.mx_EventListSummary_summary {
font-size: 13px;
}
}

14
res/css/views/elements/_Field.scss
View file

@ -18,6 +18,8 @@ limitations under the License.
.mx_Field {
display: flex;
flex: 1;
min-width: 0;
position: relative;
margin: 1em 0;
border-radius: 4px;
@ -29,6 +31,10 @@ limitations under the License.
border-right: 1px solid $input-border-color;
}
.mx_Field_postfix {
border-left: 1px solid $input-border-color;
}
.mx_Field input,
.mx_Field select,
.mx_Field textarea {
@ -42,6 +48,8 @@ limitations under the License.
padding: 8px 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
flex: 1;
min-width: 0;
}
.mx_Field select {
@ -107,12 +115,12 @@ limitations under the License.
max-width: calc(100% - 20px); // 100% of parent minus margin and padding
}
.mx_Field_labelAlwaysTopLeft label,
.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
.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 */,
.mx_Field_labelAlwaysTopLeft label {
.mx_Field textarea:not(:placeholder-shown) + label {
transition:
font-size 0.25s ease-out 0s,
color 0.25s ease-out 0s,

36
res/css/views/elements/_FormButton.scss Normal file
View file

@ -0,0 +1,36 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_FormButton {
line-height: 16px;
padding: 5px 15px;
font-size: 12px;
height: min-content;
&:not(:last-child) {
margin-right: 8px;
}
&.mx_AccessibleButton_kind_primary {
color: $accent-color;
background-color: $accent-bg-color;
}
&.mx_AccessibleButton_kind_danger {
color: $notice-primary-color;
background-color: $notice-primary-bg-color;
}
}

55
res/css/views/elements/_IconButton.scss Normal file
View file

@ -0,0 +1,55 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_IconButton {
width: 32px;
height: 32px;
border-radius: 100%;
background-color: $accent-bg-color;
// don't shrink or grow if in a flex container
flex: 0 0 auto;
&.mx_AccessibleButton_disabled {
background-color: none;
&::before {
background-color: lightgrey;
}
}
&:hover {
opacity: 90%;
}
&::before {
content: "";
display: block;
width: 100%;
height: 100%;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 55%;
background-color: $accent-color;
}
&.mx_IconButton_icon_check::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
}
&.mx_IconButton_icon_edit::before {
mask-image: url('$(res)/img/feather-customised/edit.svg');
}
}

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

@ -128,8 +128,8 @@ limitations under the License.
}
.mx_ImageView_link {
color: $lightbox-fg-color ! important;
text-decoration: none ! important;
color: $lightbox-fg-color !important;
text-decoration: none !important;
}
.mx_ImageView_button {

91
res/css/views/elements/_InteractiveTooltip.scss Normal file
View file

@ -0,0 +1,91 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_InteractiveTooltip_wrapper {
position: fixed;
z-index: 5000;
}
.mx_InteractiveTooltip {
border-radius: 3px;
background-color: $interactive-tooltip-bg-color;
color: $interactive-tooltip-fg-color;
position: absolute;
font-size: 10px;
font-weight: 600;
padding: 6px;
z-index: 5001;
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
top: 10px; // 8px chevron + 2px spacing
}
.mx_InteractiveTooltip_chevron_top {
position: absolute;
left: calc(50% - 8px);
top: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid $interactive-tooltip-bg-color;
border-right: 8px solid transparent;
}
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
// by Sebastiano Guerriero (@guerriero_se)
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
.mx_InteractiveTooltip_chevron_top {
height: 16px;
width: 16px;
background-color: inherit;
border: none;
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(135deg);
border-radius: 0 0 0 3px;
top: calc(-8px / 1.414); // sqrt(2) because of rotation
}
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
bottom: 10px; // 8px chevron + 2px spacing
}
.mx_InteractiveTooltip_chevron_bottom {
position: absolute;
left: calc(50% - 8px);
bottom: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid $interactive-tooltip-bg-color;
border-right: 8px solid transparent;
}
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
// by Sebastiano Guerriero (@guerriero_se)
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
.mx_InteractiveTooltip_chevron_bottom {
height: 16px;
width: 16px;
background-color: inherit;
border: none;
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(-45deg);
border-radius: 0 0 0 3px;
bottom: calc(-8px / 1.414); // sqrt(2) because of rotation
}
}

21
res/css/views/elements/_ManageIntegsButton.scss
View file

@ -16,6 +16,7 @@ limitations under the License.
.mx_ManageIntegsButton_error {
position: relative;
float: right;
cursor: not-allowed;
}
@ -25,18 +26,6 @@ limitations under the License.
top: -5px;
}
.mx_ManageIntegsButton_error {
float: right;
}
.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup {
display: none;
}
.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup {
display: inline;
}
.mx_ManageIntegsButton_errorPopup {
position: absolute;
top: 110%;
@ -51,3 +40,11 @@ limitations under the License.
text-align: center;
z-index: 1000;
}
.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup {
display: none;
}
.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup {
display: inline;
}

1
res/css/views/elements/_PowerSelector.scss
View file

@ -20,6 +20,5 @@ limitations under the License.
.mx_PowerSelector .mx_Field select,
.mx_PowerSelector .mx_Field input {
width: 100%;
box-sizing: border-box;
}

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

@ -13,12 +13,6 @@
padding-left: 5px;
}
.mx_EventTile_body .mx_UserPill,
.mx_EventTile_body .mx_RoomPill,
.mx_EventTile_body .mx_GroupPill {
cursor: pointer;
}
/* More specific to override `.markdown-body a` text-decoration */
.mx_EventTile_content .markdown-body a.mx_Pill {
text-decoration: none;
@ -33,7 +27,7 @@
}
.mx_UserPill_selected {
background-color: $accent-color ! important;
background-color: $accent-color !important;
}
/* More specific to override `.markdown-body a` color */
@ -64,6 +58,12 @@
padding-right: 5px;
}
.mx_EventTile_body .mx_UserPill,
.mx_EventTile_body .mx_RoomPill,
.mx_EventTile_body .mx_GroupPill {
cursor: pointer;
}
.mx_UserPill .mx_BaseAvatar,
.mx_RoomPill .mx_BaseAvatar,
.mx_GroupPill .mx_BaseAvatar,
@ -79,7 +79,7 @@
.mx_Markdown_ITALIC {
font-style: italic;
/*
/*
// interestingly, *not* using the explicit italic font
// variant seems yield better results.
@ -87,7 +87,7 @@
// https://github.com/google/fonts/issues/1726
transform: skewX(-14deg);
display: inline-block;
*/
*/
}
.mx_Markdown_CODE {

56
res/css/views/elements/_RoomAliasField.scss Normal file
View file

@ -0,0 +1,56 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_RoomAliasField {
// if parent is a flex container, this allows the
// width to be as wide as needed, and not 100%
flex: 0 1 auto;
display: flex;
align-items: stretch;
min-width: 0;
max-width: 100%;
input {
width: 150px;
padding-left: 0;
padding-right: 0;
}
input::placeholder {
color: $greyed-fg-color;
font-weight: normal;
}
.mx_Field_prefix, .mx_Field_postfix {
color: $greyed-fg-color;
border-left: none;
border-right: none;
font-weight: 600;
padding: 9px 10px;
flex: 0 0 auto;
}
.mx_Field_postfix {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
// this allows the domain name to show
// as long as it doesn't make the input shrink
// if it's too big, it shows an ellipsis
// 180: 28 for prefix, 152 for input
max-width: calc(100% - 180px);
}
}

19
res/css/views/elements/_TextWithTooltip.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_TextWithTooltip_tooltip {
display: none;
}

8
res/css/views/elements/_ToggleSwitch.scss
View file

@ -44,10 +44,10 @@ limitations under the License.
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
}
.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
left: 2px;
}

22
res/css/views/elements/_Tooltip.scss
View file

@ -36,8 +36,8 @@ limitations under the License.
border-bottom: 7px solid transparent;
}
.mx_Tooltip_chevron:after {
content:'';
.mx_Tooltip_chevron::after {
content: '';
width: 0;
height: 0;
border-top: 6px solid transparent;
@ -55,7 +55,7 @@ limitations under the License.
border-radius: 4px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color;
z-index: 2000;
z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
padding: 10px;
pointer-events: none;
line-height: 14px;
@ -74,3 +74,19 @@ limitations under the License.
animation: mx_fadeout 0.1s forwards;
}
}
.mx_Tooltip_timeline {
box-shadow: none;
background-color: $tooltip-timeline-bg-color;
color: $tooltip-timeline-fg-color;
text-align: center;
border: none;
border-radius: 3px;
font-size: 14px;
line-height: 1.2;
padding: 6px 8px;
.mx_Tooltip_chevron::after {
border-right-color: $tooltip-timeline-bg-color;
}
}

9
res/css/views/elements/_ToolTipButton.scss → res/css/views/elements/_TooltipButton.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2017 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (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.
*/
.mx_ToolTipButton {
.mx_TooltipButton {
display: inline-block;
width: 11px;
height: 11px;
@ -33,17 +34,17 @@ limitations under the License.
cursor: pointer;
}
.mx_ToolTipButton:hover {
.mx_TooltipButton:hover {
opacity: 1.0;
}
.mx_ToolTipButton_container {
.mx_TooltipButton_container {
position: relative;
top: -18px;
left: 4px;
}
.mx_ToolTipButton_helpText {
.mx_TooltipButton_helpText {
width: 400px;
text-align: start;
line-height: 17px !important;

229
res/css/views/emojipicker/_EmojiPicker.scss Normal file
View file

@ -0,0 +1,229 @@
/*
Copyright 2019 Tulir Asokan <tulir@maunium.net>
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_EmojiPicker {
width: 340px;
height: 450px;
border-radius: 4px;
display: flex;
flex-direction: column;
}
.mx_EmojiPicker_body {
flex: 1;
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.mx_EmojiPicker_header {
padding: 4px 8px 0;
border-bottom: 1px solid $message-action-bar-border-color;
}
.mx_EmojiPicker_anchor {
border: none;
padding: 8px 8px 6px;
border-bottom: 2px solid transparent;
background-color: transparent;
border-radius: 4px 4px 0 0;
width: 36px;
height: 38px;
&:not(:disabled) {
cursor: pointer;
}
&:not(:disabled):hover {
background-color: $focus-bg-color;
border-bottom: 2px solid $button-bg-color;
}
}
.mx_EmojiPicker_anchor::before {
background-color: $primary-fg-color;
content: '';
display: inline-block;
mask-size: 100%;
mask-repeat: no-repeat;
width: 100%;
height: 100%;
}
.mx_EmojiPicker_anchor:disabled::before {
background-color: $focus-bg-color;
}
.mx_EmojiPicker_anchor_activity::before { mask-image: url('$(res)/img/emojipicker/activity.svg'); }
.mx_EmojiPicker_anchor_custom::before { mask-image: url('$(res)/img/emojipicker/custom.svg'); }
.mx_EmojiPicker_anchor_flags::before { mask-image: url('$(res)/img/emojipicker/flags.svg'); }
.mx_EmojiPicker_anchor_foods::before { mask-image: url('$(res)/img/emojipicker/foods.svg'); }
.mx_EmojiPicker_anchor_nature::before { mask-image: url('$(res)/img/emojipicker/nature.svg'); }
.mx_EmojiPicker_anchor_objects::before { mask-image: url('$(res)/img/emojipicker/objects.svg'); }
.mx_EmojiPicker_anchor_people::before { mask-image: url('$(res)/img/emojipicker/people.svg'); }
.mx_EmojiPicker_anchor_places::before { mask-image: url('$(res)/img/emojipicker/places.svg'); }
.mx_EmojiPicker_anchor_recent::before { mask-image: url('$(res)/img/emojipicker/recent.svg'); }
.mx_EmojiPicker_anchor_symbols::before { mask-image: url('$(res)/img/emojipicker/symbols.svg'); }
.mx_EmojiPicker_anchor_visible {
border-bottom: 2px solid $button-bg-color;
}
.mx_EmojiPicker_search {
margin: 8px;
border-radius: 4px;
border: 1px solid $input-border-color;
background-color: $primary-bg-color;
display: flex;
input {
flex: 1;
border: none;
padding: 8px 12px;
border-radius: 4px 0;
}
button {
border: none;
background-color: inherit;
margin: 0;
padding: 8px;
align-self: center;
width: 32px;
height: 32px;
}
}
.mx_EmojiPicker_search_clear {
cursor: pointer;
}
.mx_EmojiPicker_search_icon {
width: 16px;
margin: 8px;
}
.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
pointer-events: none;
}
.mx_EmojiPicker_search_icon::after {
mask: url('$(res)/img/emojipicker/search.svg') no-repeat;
mask-size: 100%;
background-color: $primary-fg-color;
content: '';
display: inline-block;
width: 100%;
height: 100%;
}
.mx_EmojiPicker_search_clear::after {
mask-image: url('$(res)/img/emojipicker/delete.svg');
}
.mx_EmojiPicker_category {
padding: 0 12px;
display: flex;
flex-direction: column;
align-items: center;
}
.mx_EmojiPicker_category_label {
width: 304px;
}
.mx_EmojiPicker_list {
width: 304px;
padding: 0;
margin: 0;
}
.mx_EmojiPicker_item_wrapper {
display: inline-block;
list-style: none;
width: 38px;
cursor: pointer;
}
.mx_EmojiPicker_item {
display: inline-block;
font-size: 20px;
padding: 5px;
width: 100%;
height: 100%;
box-sizing: border-box;
text-align: center;
border-radius: 4px;
&:hover {
background-color: $focus-bg-color;
}
}
.mx_EmojiPicker_item_selected {
color: rgba(0, 0, 0, .5);
border: 1px solid $input-valid-border-color;
padding: 4px;
}
.mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
font-size: 16px;
font-weight: 600;
margin: 0;
}
.mx_EmojiPicker_footer {
border-top: 1px solid $message-action-bar-border-color;
height: 72px;
display: flex;
align-items: center;
}
.mx_EmojiPicker_preview_emoji {
font-size: 32px;
padding: 8px 16px;
}
.mx_EmojiPicker_preview_text {
display: flex;
flex-direction: column;
}
.mx_EmojiPicker_name {
text-transform: capitalize;
}
.mx_EmojiPicker_shortcode {
color: $light-fg-color;
font-size: 14px;
&::before, &::after {
content: ":";
}
}
.mx_EmojiPicker_quick {
flex-direction: column;
justify-content: space-around;
}
.mx_EmojiPicker_quick_header .mx_EmojiPicker_name {
margin-right: 4px;
}

7
res/css/views/globals/_MatrixToolbar.scss
View file

@ -44,10 +44,9 @@ limitations under the License.
flex: 1;
}
.mx_MatrixToolbar_link
{
color: $accent-fg-color ! important;
text-decoration: underline ! important;
.mx_MatrixToolbar_link {
color: $accent-fg-color !important;
text-decoration: underline !important;
cursor: pointer;
}

3
res/css/views/messages/_CreateEvent.scss
View file

@ -37,6 +37,3 @@ limitations under the License.
.mx_CreateEvent_header {
font-weight: bold;
}
.mx_CreateEvent_link {
}

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

@ -30,7 +30,7 @@ limitations under the License.
border-bottom: 1px solid $panel-divider-color;
}
.mx_DateSeparator > date {
.mx_DateSeparator > div {
margin: 0 25px;
flex: 0 0 auto;
}

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

@ -59,3 +59,42 @@ limitations under the License.
color: $imagebody-giflabel-color;
pointer-events: none;
}
.mx_HiddenImagePlaceholder {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
// To center the text in the middle of the frame
display: flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
background-color: $header-panel-bg-color;
.mx_HiddenImagePlaceholder_button {
color: $accent-color;
span.mx_HiddenImagePlaceholder_eye {
margin-right: 8px;
background-color: $accent-color;
mask-image: url('$(res)/img/feather-customised/eye.svg');
display: inline-block;
width: 18px;
height: 14px;
}
span:not(.mx_HiddenImagePlaceholder_eye) {
vertical-align: text-bottom;
}
}
}
.mx_EventTile:hover .mx_HiddenImagePlaceholder {
background-color: $primary-bg-color;
}

77
res/css/views/messages/_MKeyVerificationRequest.scss Normal file
View file

@ -0,0 +1,77 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_KeyVerification {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) min-content;
&.mx_KeyVerification_icon::after {
grid-column: 1;
grid-row: 1 / 3;
width: 12px;
height: 16px;
content: "";
mask-image: url("$(res)/img/e2e/normal.svg");
mask-repeat: no-repeat;
mask-size: 100%;
margin-top: 4px;
background-color: $primary-fg-color;
}
&.mx_KeyVerification_icon_verified::after {
mask-image: url("$(res)/img/e2e/verified.svg");
background-color: $accent-color;
}
.mx_KeyVerification_title, .mx_KeyVerification_subtitle, .mx_KeyVerification_state {
overflow-wrap: break-word;
}
.mx_KeyVerification_title {
font-weight: 600;
font-size: 15px;
grid-column: 2;
grid-row: 1;
}
.mx_KeyVerification_subtitle {
grid-column: 2;
grid-row: 2;
}
.mx_KeyVerification_state, .mx_KeyVerification_subtitle {
font-size: 12px;
}
.mx_KeyVerification_state, .mx_KeyVerification_buttons {
grid-column: 3;
grid-row: 1 / 3;
}
.mx_KeyVerification_buttons {
align-items: center;
display: flex;
}
.mx_KeyVerification_state {
width: 130px;
padding: 10px 20px;
margin: auto 0;
text-align: center;
color: $notice-secondary-color;
}
}

11
res/css/views/messages/_MStickerBody.scss
View file

@ -22,3 +22,14 @@ limitations under the License.
position: absolute;
top: 50%;
}
.mx_MStickerBody_hidden {
max-width: 220px;
text-decoration: none;
text-align: center;
// To center the text in the middle of the frame
display: flex;
align-items: center;
justify-content: center;
}

37
res/css/views/messages/_MessageActionBar.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -23,14 +24,33 @@ limitations under the License.
line-height: 24px;
border-radius: 4px;
background: $message-action-bar-bg-color;
top: -13px;
top: -18px;
right: 8px;
user-select: none;
// Ensure the action bar appears above over things, like the read marker.
z-index: 1;
// Adds a previous event safe area so that you can't accidentally hover the
// previous event while trying to mouse into the action bar or from the
// react button to its tooltip.
&::before {
content: '';
position: absolute;
// tooltip safe mousing area + tooltip overhang +
// action bar + action bar offset from event
width: calc(10px + 48px + 100% + 8px);
// safe area + action bar
height: calc(20px + 100%);
top: -20px;
left: -58px;
z-index: -1;
cursor: initial;
}
> * {
white-space: nowrap;
display: inline-block;
position: relative;
width: 27px;
border: 1px solid $message-action-bar-border-color;
margin-left: -1px;
@ -53,6 +73,11 @@ limitations under the License.
}
}
.mx_MessageActionBar_maskButton {
width: 27px;
}
.mx_MessageActionBar_maskButton::after {
content: '';
position: absolute;
@ -65,10 +90,18 @@ limitations under the License.
background-color: $message-action-bar-fg-color;
}
.mx_MessageActionBar_reactButton::after {
mask-image: url('$(res)/img/react.svg');
}
.mx_MessageActionBar_replyButton::after {
mask-image: url('$(res)/img/reply.svg');
}
.mx_MessageActionBar_editButton::after {
mask-image: url('$(res)/img/edit.svg');
}
.mx_MessageActionBar_optionsButton::after {
mask-image: url('$(res)/img/icon_context.svg');
}

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

@ -15,4 +15,6 @@ limitations under the License.
*/
.mx_MessageTimestamp {
color: $event-timestamp-color;
font-size: 10px;
}

10
res/css/views/messages/_ReactionDimension.scss → res/css/views/messages/_MjolnirBody.scss
View file

@ -1,5 +1,5 @@
/*
Copyright 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,12 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ReactionDimension {
width: 42px;
display: flex;
justify-content: space-evenly;
}
.mx_ReactionDimension_disabled {
.mx_MjolnirBody {
opacity: 0.4;
}

15
res/css/views/messages/_ReactionsRow.scss
View file

@ -16,4 +16,19 @@ limitations under the License.
.mx_ReactionsRow {
margin: 6px 0;
color: $primary-fg-color;
}
.mx_ReactionsRow_showAll {
text-decoration: none;
font-size: 10px;
font-weight: 600;
margin-left: 6px;
vertical-align: top;
&:hover,
&:link,
&:visited {
color: $accent-color;
}
}

11
res/css/views/messages/_ReactionsRowButton.scss
View file

@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_ReactionsRowButton {
display: inline-block;
display: inline-flex;
height: 20px;
line-height: 21px;
margin-right: 6px;
@ -24,6 +24,7 @@ limitations under the License.
border-radius: 10px;
background-color: $reaction-row-button-bg-color;
cursor: pointer;
user-select: none;
&:hover {
border-color: $reaction-row-button-hover-border-color;
@ -34,3 +35,11 @@ limitations under the License.
border-color: $reaction-row-button-selected-border-color;
}
}
.mx_ReactionsRowButton_content {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 4px;
}

19
res/css/views/messages/_ReactionsRowButtonTooltip.scss Normal file
View file

@ -0,0 +1,19 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_ReactionsRowButtonTooltip_reactedWith {
opacity: 0.7;
}

50
res/css/views/messages/_ViewSourceEvent.scss Normal file
View file

@ -0,0 +1,50 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_EventTile_content.mx_ViewSourceEvent {
display: flex;
opacity: 0.6;
font-size: 12px;
pre, code {
flex: 1;
}
pre {
line-height: 1.2;
margin: 3.5px 0;
}
.mx_ViewSourceEvent_toggle {
width: 12px;
mask-repeat: no-repeat;
mask-position: 0 center;
mask-size: auto 12px;
visibility: hidden;
background-color: $accent-color;
mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
}
&.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
mask-position: 0 bottom;
margin-bottom: 7px;
mask-image: url('$(res)/img/feather-customised/widget/minimise.svg');
}
&:hover .mx_ViewSourceEvent_toggle {
visibility: visible;
}
}

244
res/css/views/right_panel/_UserInfo.scss Normal file
View file

@ -0,0 +1,244 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
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_UserInfo {
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto;
font-size: 12px;
.mx_UserInfo_cancel {
height: 16px;
width: 16px;
padding: 10px 0 10px 10px;
cursor: pointer;
mask-image: url('$(res)/img/minimise.svg');
mask-repeat: no-repeat;
mask-position: 16px center;
background-color: $rightpanel-button-color;
position: absolute;
}
h2 {
font-size: 18px;
font-weight: 600;
margin: 18px 0 0 0;
}
.mx_UserInfo_container {
padding: 0 16px 16px 16px;
border-bottom: 1px solid lightgray;
}
.mx_UserInfo_memberDetailsContainer {
padding-bottom: 0;
}
.mx_RoomTile_nameContainer {
width: 154px;
}
.mx_RoomTile_badge {
display: none;
}
.mx_RoomTile_name {
width: 160px;
}
.mx_UserInfo_avatar {
margin: 24px 32px 0 32px;
cursor: pointer;
}
.mx_UserInfo_avatar > div {
max-width: 30vh;
margin: 0 auto;
}
.mx_UserInfo_avatar > div > div {
/* use padding-top instead of height to make this element square,
as the % in padding is a % of the width (including margin,
that's why we had to put the margin to center on a parent div),
and not a % of the parent height. */
padding-top: 100%;
height: 0;
border-radius: 100%;
box-sizing: content-box;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
cursor: zoom-in;
}
h3 {
text-transform: uppercase;
color: $notice-secondary-color;
font-weight: bold;
font-size: 12px;
margin: 4px 0;
}
p {
margin: 5px 0;
}
.mx_UserInfo_profile {
text-align: center;
h2 {
font-size: 18px;
line-height: 25px;
flex: 1;
overflow-x: auto;
max-height: 50px;
display: flex;
justify-content: center;
align-items: center;
.mx_E2EIcon {
margin: 5px;
}
}
.mx_UserInfo_profileStatus {
margin-top: 12px;
}
}
.mx_UserInfo_memberDetails .mx_UserInfo_profileField {
display: flex;
justify-content: center;
align-items: center;
margin: 6px 0;
.mx_IconButton, .mx_Spinner {
margin-left: 20px;
width: 16px;
height: 16px;
&::before {
mask-size: 80%;
}
}
.mx_UserInfo_roleDescription {
display: flex;
justify-content: center;
align-items: center;
// try to make it the same height as the dropdown
margin: 11px 0 12px 0;
.mx_IconButton {
margin-left: 6px;
}
}
.mx_Field {
margin: 0;
}
}
.mx_UserInfo_field {
cursor: pointer;
color: $accent-color;
line-height: 16px;
margin: 8px 0;
&.mx_UserInfo_destructive {
color: $warning-color;
}
}
.mx_UserInfo_statusMessage {
font-size: 11px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}
.mx_UserInfo_scrollContainer {
flex: 1 1 0;
padding-bottom: 16px;
}
.mx_UserInfo_scrollContainer .mx_UserInfo_container {
padding-top: 16px;
padding-bottom: 0;
border-bottom: none;
> :not(h3) {
margin-left: 8px;
}
}
.mx_UserInfo_devices {
.mx_UserInfo_device {
display: flex;
margin: 8px 0;
&.mx_UserInfo_device_verified {
.mx_UserInfo_device_trusted {
color: $accent-color;
}
}
&.mx_UserInfo_device_unverified {
.mx_UserInfo_device_trusted {
color: $warning-color;
}
}
.mx_UserInfo_device_name {
flex: 1;
margin-right: 5px;
word-break: break-word;
}
}
// both for icon in expand button and device item
.mx_E2EIcon {
// don't squeeze
flex: 0 0 auto;
margin: 2px 5px 0 0;
width: 12px;
height: 12px;
}
.mx_UserInfo_expand {
display: flex;
margin-top: 11px;
color: $accent-color;
}
}
.mx_UserInfo_verify {
display: block;
background-color: $accent-color;
color: $accent-fg-color;
border-radius: 4px;
padding: 7px 1.5em;
text-align: center;
margin: 16px 0;
}
}

2
res/css/views/room_settings/_ColorSettings.scss
View file

@ -28,7 +28,7 @@ limitations under the License.
position: absolute;
left: 10px;
top: 4px;
cursor: default ! important;
cursor: default !important;
}
.mx_ColorSettings_roomColorPrimary {

110
res/css/views/rooms/_AppsDrawer.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -42,7 +43,6 @@ $AppsDrawerBodyHeight: 273px;
.mx_AddWidget_button {
order: 2;
cursor: pointer;
padding-right: 12px;
padding: 0;
margin: 5px auto 5px auto;
color: $accent-color;
@ -153,40 +153,12 @@ $AppsDrawerBodyHeight: 273px;
background-color: $accent-color;
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_reload {
mask-image: url('$(res)/img/feather-customised/widget/refresh.svg');
mask-size: 100%;
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_snapshot {
mask-image: url('$(res)/img/feather-customised/widget/camera.svg');
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_edit {
mask-image: url('$(res)/img/feather-customised/widget/edit.svg');
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_delete {
mask-image: url('$(res)/img/feather-customised/widget/bin.svg');
background-color: $warning-color;
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_cancel {
mask-image: url('$(res)/img/feather-customised/widget/x-circle.svg');
}
/* delete ? */
.mx_AppTileMenuBarWidget {
cursor: pointer;
width: 10px;
height: 10px;
padding: 1px;
transition-duration: 500ms;
border: 1px solid transparent;
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
mask-image: url('$(res)/img/icon_context.svg');
}
.mx_AppTileMenuBarWidgetDelete {
@ -198,7 +170,7 @@ $AppsDrawerBodyHeight: 273px;
border-radius: 2px;
}
.mx_AppTileBody{
.mx_AppTileBody {
height: $AppsDrawerBodyHeight;
width: 100%;
overflow: hidden;
@ -234,7 +206,7 @@ $AppsDrawerBodyHeight: 273px;
background-color: $lightbox-bg-color;
border: 1px solid rgba(0, 0, 0, 0);
width: 200px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 3px;
margin: 5px;
@ -248,7 +220,7 @@ $AppsDrawerBodyHeight: 273px;
.mx_AppIconTile:hover {
border: 1px solid $accent-color;
box-shadow: 0 0 10px 5px rgba(200,200,200,0.5);
box-shadow: 0 0 10px 5px rgba(200, 200, 200, 0.5);
}
.mx_AppIconTile_content {
@ -270,9 +242,8 @@ $AppsDrawerBodyHeight: 273px;
.mx_AppIconTile_image {
padding: 10px;
width: 75%;
max-width:100px;
max-height:100px;
max-width: 100px;
max-height: 100px;
width: auto;
height: auto;
}
@ -295,44 +266,61 @@ form.mx_Custom_Widget_Form div {
.mx_AppPermissionWarning {
text-align: center;
background-color: $primary-bg-color;
background-color: $widget-menu-bar-bg-color;
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 16px;
}
.mx_AppPermissionWarningImage {
margin: 10px 0;
.mx_AppPermissionWarning_row {
margin-bottom: 12px;
}
.mx_AppPermissionWarningImage img {
width: 100px;
.mx_AppPermissionWarning_smallText {
font-size: 12px;
}
.mx_AppPermissionWarningText {
max-width: 400px;
margin: 10px auto 10px auto;
color: $primary-fg-color;
.mx_AppPermissionWarning_bolder {
font-weight: 600;
}
.mx_AppPermissionWarningTextLabel {
font-weight: bold;
display: block;
.mx_AppPermissionWarning h4 {
margin: 0;
padding: 0;
}
.mx_AppPermissionWarningTextURL {
color: $accent-color;
.mx_AppPermissionWarning_helpIcon {
margin-top: 1px;
margin-right: 2px;
width: 10px;
height: 10px;
display: inline-block;
}
.mx_AppPermissionButton {
border: none;
padding: 5px 20px;
border-radius: 5px;
background-color: $button-bg-color;
color: $button-fg-color;
cursor: pointer;
.mx_AppPermissionWarning_helpIcon::before {
display: inline-block;
background-color: $accent-color;
mask-repeat: no-repeat;
mask-size: 12px;
width: 12px;
height: 12px;
mask-position: center;
content: '';
vertical-align: middle;
mask-image: url('$(res)/img/feather-customised/help-circle.svg');
}
.mx_AppPermissionWarning_tooltip {
@mixin mx_Tooltip_dark;
ul {
list-style-position: inside;
padding-left: 2px;
margin-left: 0;
}
}
.mx_AppLoading {
@ -361,11 +349,11 @@ form.mx_Custom_Widget_Form div {
}
@keyframes mx_AppLoading_spinner_fadeIn_animation {
from { opacity: 0 }
to { opacity: 1 }
from { opacity: 0; }
to { opacity: 1; }
}
.mx_AppLoading iframe {
display: none;
display: none;
}

45
res/css/views/rooms/_Autocomplete.scss
View file

@ -8,18 +8,13 @@
border-bottom: none;
border-radius: 4px 4px 0 0;
max-height: 50vh;
overflow: auto
overflow: auto;
}
.mx_Autocomplete_ProviderSection {
border-bottom: 1px solid $primary-hairline-color;
}
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: flex;
}
/* a "block" completion takes up a whole line */
.mx_Autocomplete_Completion_block {
height: 34px;
@ -32,7 +27,7 @@
}
.mx_Autocomplete_Completion_block * {
margin: 0 3px;
margin: 0 3px;
}
.mx_Autocomplete_Completion_pill {
@ -50,11 +45,27 @@
margin: 0 3px;
}
/* styling for common completion elements */
.mx_Autocomplete_Completion_subtitle {
font-style: italic;
flex: 1;
}
.mx_Autocomplete_Completion_description {
color: gray;
}
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: flex;
flex-flow: wrap;
}
.mx_Autocomplete_Completion_container_truncate {
.mx_Autocomplete_Completion_title,
.mx_Autocomplete_Completion_subtitle,
.mx_Autocomplete_Completion_description {
/* Ellipsis for long names/subtitles/descriptions*/
/* Ellipsis for long names/subtitles/descriptions */
max-width: 150px;
white-space: nowrap;
overflow: hidden;
@ -62,13 +73,6 @@
}
}
/* container for pill-style completions */
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
display: flex;
flex-flow: wrap;
}
.mx_Autocomplete_Completion.selected,
.mx_Autocomplete_Completion:hover {
background: $selected-color;
@ -81,14 +85,3 @@
font-weight: 400;
opacity: 0.4;
}
/* styling for common completion elements */
.mx_Autocomplete_Completion_subtitle {
font-style: italic;
flex: 1;
}
.mx_Autocomplete_Completion_description {
color: gray;
}

76
res/css/views/rooms/_BasicMessageComposer.scss Normal file
View file

@ -0,0 +1,76 @@
/*
Copyright 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
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_BasicMessageComposer {
position: relative;
.mx_BasicMessageComposer_inputEmpty > :first-child::before {
content: var(--placeholder);
opacity: 0.333;
width: 0;
height: 0;
overflow: visible;
display: inline-block;
pointer-events: none;
white-space: nowrap;
}
@keyframes visualbell {
from { background-color: $visual-bell-bg-color; }
to { background-color: $primary-bg-color; }
}
&.mx_BasicMessageComposer_input_error {
animation: 0.2s visualbell;
}
.mx_BasicMessageComposer_input {
white-space: pre-wrap;
word-wrap: break-word;
outline: none;
overflow-x: hidden;
span.mx_UserPill, span.mx_RoomPill {
padding-left: 21px;
position: relative;
// avatar psuedo element
&::before {
position: absolute;
left: 2px;
top: 2px;
content: var(--avatar-letter);
width: 16px;
height: 16px;
background: var(--avatar-background), $avatar-bg-color;
color: $avatar-initial-color;
background-repeat: no-repeat;
background-size: 16px;
border-radius: 8px;
text-align: center;
font-weight: normal;
line-height: 16px;
font-size: 10.4px;
}
}
}
.mx_BasicMessageComposer_AutoCompleteWrapper {
position: relative;
height: 0;
}
}

30
res/css/views/rooms/_E2EIcon.scss
View file

@ -15,19 +15,29 @@ limitations under the License.
*/
.mx_E2EIcon {
width: 25px;
height: 25px;
mask-repeat: no-repeat;
mask-position: center 0;
width: 16px;
height: 16px;
margin: 0 9px;
position: relative;
display: block;
}
.mx_E2EIcon_verified {
mask-image: url('$(res)/img/e2e/lock-verified.svg');
background-color: $accent-color;
.mx_E2EIcon_verified::after, .mx_E2EIcon_warning::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: contain;
}
.mx_E2EIcon_warning {
mask-image: url('$(res)/img/e2e/lock-warning.svg');
background-color: $warning-color;
.mx_E2EIcon_verified::after {
background-image: url('$(res)/img/e2e/verified.svg');
}
.mx_E2EIcon_warning::after {
background-image: url('$(res)/img/e2e/warning.svg');
}

63
res/css/views/rooms/_EditMessageComposer.scss Normal file
View file

@ -0,0 +1,63 @@
/*
Copyright 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
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_EditMessageComposer {
padding: 3px;
// this is to try not make the text move but still have some
// padding around and in the editor.
// Actual values from fiddling around in inspector
margin: -7px -10px -5px -10px;
overflow: visible !important; // override mx_EventTile_content
.mx_BasicMessageComposer_input {
border-radius: 4px;
border: solid 1px $primary-hairline-color;
background-color: $primary-bg-color;
max-height: 200px;
padding: 3px 6px;
&:focus {
border-color: $accent-color-50pct;
}
}
.mx_EditMessageComposer_buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 5px;
position: absolute;
left: 0;
background: $header-panel-bg-color;
z-index: 100;
right: 0;
margin: 0 -110px 0 0;
padding-right: 147px;
.mx_AccessibleButton {
margin-left: 5px;
padding: 5px 40px;
}
}
}
.mx_EventTile_last .mx_EditMessageComposer_buttons {
position: static;
margin-right: -147px;
}

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

@ -85,10 +85,6 @@ limitations under the License.
overflow: hidden;
}
.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
font-size: 13px;
}
.mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic;
color: $primary-fg-color;
@ -102,23 +98,24 @@ limitations under the License.
.mx_EntityTile_unavailable .mx_EntityTile_avatar,
.mx_EntityTile_unavailable .mx_EntityTile_name,
.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
.mx_EntityTile_offline_beenactive .mx_EntityTile_name
{
.mx_EntityTile_offline_beenactive .mx_EntityTile_name {
opacity: 0.5;
}
.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
.mx_EntityTile_offline_neveractive .mx_EntityTile_name
{
.mx_EntityTile_offline_neveractive .mx_EntityTile_name {
opacity: 0.25;
}
.mx_EntityTile_unknown .mx_EntityTile_avatar,
.mx_EntityTile_unknown .mx_EntityTile_name
{
.mx_EntityTile_unknown .mx_EntityTile_name {
opacity: 0.25;
}
.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
font-size: 13px;
}
.mx_EntityTile_subtext {
font-size: 11px;
opacity: 0.5;

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

@ -22,6 +22,15 @@ limitations under the License.
position: relative;
}
.mx_EventTile_bubble {
background-color: $dark-panel-bg-color;
padding: 10px;
border-radius: 5px;
margin: 10px auto;
max-width: 75%;
box-sizing: border-box;
}
.mx_EventTile.mx_EventTile_info {
padding-top: 0px;
}
@ -40,20 +49,33 @@ limitations under the License.
}
.mx_EventTile_continuation {
padding-top: 0px ! important;
padding-top: 0px !important;
&.mx_EventTile_isEditing {
padding-top: 5px !important;
margin-top: -5px;
}
}
.mx_EventTile_isEditing {
background-color: $header-panel-bg-color;
}
.mx_EventTile .mx_SenderProfile {
color: $primary-fg-color;
font-size: 14px;
display: inline-block; /* anti-zalgo, with overflow hidden */
overflow-y: hidden;
overflow: hidden;
cursor: pointer;
padding-left: 65px; /* left gutter */
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
line-height: 17px;
/* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap;
text-overflow: ellipsis;
max-width: calc(100% - 65px);
}
.mx_EventTile .mx_SenderProfile .mx_Flair {
@ -72,12 +94,14 @@ limitations under the License.
}
}
.mx_EventTile_isEditing .mx_MessageTimestamp {
visibility: hidden !important;
}
.mx_EventTile .mx_MessageTimestamp {
display: block;
visibility: hidden;
white-space: nowrap;
color: $event-timestamp-color;
font-size: 10px;
left: 0px;
width: 46px; /* 8 + 30 (avatar) + 8 */
text-align: center;
@ -97,6 +121,21 @@ limitations under the License.
line-height: 22px;
}
.mx_EventTile_bubbleContainer {
display: grid;
grid-template-columns: 1fr 100px;
.mx_EventTile_line {
margin-right: 0px;
grid-column: 1 / 3;
padding: 0;
}
.mx_EventTile_msgOption {
grid-column: 2;
}
}
.mx_EventTile_reply {
margin-right: 10px;
}
@ -107,8 +146,31 @@ limitations under the License.
/* HACK to override line-height which is already marked important elsewhere */
.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
font-size: 48px ! important;
line-height: 48px ! important;
font-size: 48px !important;
line-height: 57px !important;
}
.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
visibility: visible;
}
.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: 3px;
width: auto;
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
.mx_EventTile_last > div > a > .mx_MessageTimestamp,
.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp {
visibility: visible;
}
.mx_EventTile:hover .mx_MessageActionBar,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar {
visibility: visible;
}
/* this is used for the tile for the event which is selected via the URL.
@ -120,9 +182,22 @@ limitations under the License.
background-color: $event-selected-color;
}
.mx_EventTile_highlight,
.mx_EventTile_highlight .markdown-body {
color: $event-highlight-fg-color;
.mx_EventTile_line {
background-color: $event-highlight-bg-color;
}
}
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
padding-left: 78px;
}
.mx_EventTile:hover .mx_EventTile_line,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line
{
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
.mx_EventTile.focus-visible:focus-within .mx_EventTile_line {
background-color: $event-selected-color;
}
@ -141,7 +216,7 @@ limitations under the License.
}
.mx_EventTile_encrypting {
color: $event-encrypting-color ! important;
color: $event-encrypting-color !important;
}
.mx_EventTile_sending {
@ -149,8 +224,7 @@ limitations under the License.
}
.mx_EventTile_sending .mx_UserPill,
.mx_EventTile_sending .mx_RoomPill,
.mx_EventTile_sending .mx_emojione {
.mx_EventTile_sending .mx_RoomPill {
opacity: 0.5;
}
@ -160,25 +234,30 @@ limitations under the License.
.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody,
.mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
--lozenge-color: $event-redacted-fg-color;
--lozenge-border-color: $event-redacted-border-color;
display: block;
width: 100%;
height: 22px;
width: 250px;
border-radius: 11px;
background: repeating-linear-gradient(
-45deg,
$event-redacted-fg-color,
$event-redacted-fg-color 3px,
transparent 3px,
transparent 6px
);
box-shadow: 0px 0px 3px $event-redacted-border-color inset;
background:
repeating-linear-gradient(
-45deg,
var(--lozenge-color),
var(--lozenge-color) 3px,
transparent 3px,
transparent 6px
);
box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
}
.mx_EventTile_highlight,
.mx_EventTile_highlight .markdown-body
{
color: $warning-color;
.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody {
opacity: 0.4;
}
div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
--lozenge-color: $event-notsent-color;
--lozenge-border-color: $event-notsent-color;
}
.mx_EventTile_contextual {
@ -203,27 +282,6 @@ limitations under the License.
text-decoration: none;
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
.mx_EventTile_last > div > a > .mx_MessageTimestamp,
.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp {
visibility: visible;
}
.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
visibility: visible;
}
.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: 3px;
width: auto;
}
.mx_EventTile:hover .mx_MessageActionBar,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
visibility: visible;
}
.mx_EventTile_readAvatars {
position: relative;
display: inline-block;
@ -231,6 +289,7 @@ limitations under the License.
height: 14px;
top: 29px;
user-select: none;
z-index: 1;
}
.mx_EventTile_continuation .mx_EventTile_readAvatars,
@ -268,9 +327,23 @@ limitations under the License.
overflow-y: hidden;
}
/* End to end encryption stuff */
.mx_EventTile:hover .mx_EventTile_e2eIcon {
opacity: 1;
/* Spoiler stuff */
.mx_EventTile_spoiler {
cursor: pointer;
}
.mx_EventTile_spoiler_reason {
color: $event-timestamp-color;
font-size: 11px;
}
.mx_EventTile_spoiler_content {
filter: blur(5px) saturate(0.1) sepia(1);
transition-duration: 0.5s;
}
.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
filter: none;
}
.mx_EventTile_e2eIcon {
@ -344,17 +417,22 @@ limitations under the License.
padding-left: 60px;
}
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: $e2e-verified-color 5px solid;
}
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color 5px solid;
}
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line {
padding-left: 78px;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: $e2e-verified-color 5px solid;
}
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color 5px solid;
/* End to end encryption stuff */
.mx_EventTile:hover .mx_EventTile_e2eIcon {
opacity: 1;
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
@ -364,12 +442,6 @@ limitations under the License.
width: auto;
}
/*
.mx_EventTile_verified .mx_EventTile_e2eIcon {
display: none;
}
*/
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon {
@ -377,36 +449,52 @@ limitations under the License.
left: 41px;
}
.mx_EventTile_content .mx_EventTile_edited {
user-select: none;
font-size: 12px;
color: $roomtopic-color;
display: inline-block;
margin-left: 9px;
cursor: pointer;
}
/* Various markdown overrides */
.mx_EventTile_body pre {
border: 1px solid transparent;
}
.mx_EventTile_content .markdown-body {
font-family: inherit ! important;
white-space: normal ! important;
line-height: inherit ! important;
font-family: inherit !important;
white-space: normal !important;
line-height: inherit !important;
color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
font-size: 14px;
}
/* have to use overlay rather than auto otherwise Linux and Windows
Chrome gets very confused about vertical spacing:
https://github.com/vector-im/vector-web/issues/754
*/
.mx_EventTile_content .markdown-body pre {
overflow-x: overlay;
overflow-y: visible;
max-height: 30vh;
}
.mx_EventTile_content .markdown-body code {
// deliberate constants as we're behind an invert filter
background-color: #f8f8f8;
}
.mx_EventTile_content .markdown-body {
pre, code {
font-family: $monospace-font-family !important;
// deliberate constants as we're behind an invert filter
color: #333;
}
pre {
// have to use overlay rather than auto otherwise Linux and Windows
// Chrome gets very confused about vertical spacing:
// https://github.com/vector-im/vector-web/issues/754
overflow-x: overlay;
overflow-y: visible;
max-height: 30vh;
}
code {
// deliberate constants as we're behind an invert filter
background-color: #f8f8f8;
}
}
.mx_EventTile:hover .mx_EventTile_body pre,
.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
}
.mx_EventTile_pre_container {
@ -427,17 +515,8 @@ limitations under the License.
background-image: url($copy-button-url);
}
.mx_EventTile_body pre {
border: 1px solid transparent;
}
.mx_EventTile:hover .mx_EventTile_body pre
{
border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
}
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton
{
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
visibility: visible;
}
@ -446,19 +525,17 @@ limitations under the License.
.mx_EventTile_content .markdown-body h3,
.mx_EventTile_content .markdown-body h4,
.mx_EventTile_content .markdown-body h5,
.mx_EventTile_content .markdown-body h6
{
font-family: inherit ! important;
.mx_EventTile_content .markdown-body h6 {
font-family: inherit !important;
color: inherit;
}
/* Make h1 and h2 the same size as h3. */
.mx_EventTile_content .markdown-body h1,
.mx_EventTile_content .markdown-body h2
{
.mx_EventTile_content .markdown-body h2 {
font-size: 1.5em;
border-bottom: none ! important; // override GFM
border-bottom: none !important; // override GFM
}
.mx_EventTile_content .markdown-body a {
@ -467,7 +544,7 @@ limitations under the License.
}
.mx_EventTile_content .markdown-body .hljs {
display: inline ! important;
display: inline !important;
}
/*
@ -556,8 +633,8 @@ limitations under the License.
}
.mx_EventTile_content .markdown-body {
p, ul, ol, dl, blockquote, pre, table {
margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
}
p, ul, ol, dl, blockquote, pre, table {
margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
}
}
}

2
res/css/views/rooms/_JumpToBottomButton.scss
View file

@ -55,7 +55,7 @@ limitations under the License.
cursor: pointer;
}
.mx_JumpToBottomButton_scrollDown:before {
.mx_JumpToBottomButton_scrollDown::before {
content: "";
position: absolute;
top: 0;

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