Merge remote-tracking branch 'origin/develop' into t3chguy/clear_notifications
This commit is contained in:
Travis Ralston
commit
96ffe94876
733 changed files with 50889 additions and 9584 deletions
1
.babelrc
1
.babelrc
|
|
@ -13,7 +13,6 @@
|
|||
],
|
||||
"transform-class-properties",
|
||||
"transform-object-rest-spread",
|
||||
"transform-async-to-bluebird",
|
||||
"transform-runtime",
|
||||
"add-module-exports",
|
||||
"syntax-dynamic-import"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
2
.github/FUNDING.yml
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
patreon: matrixdotorg
|
||||
liberapay: matrixdotorg
|
||||
|
|
@ -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
1576
CHANGELOG.md
File diff suppressed because it is too large
Load diff
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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
71
docs/ciderEditor.md
Normal 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
6
docs/features/README.md
Normal 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
37
docs/features/composer.md
Normal 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.
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
44
package.json
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ limitations under the License.
|
|||
order: 2;
|
||||
flex: 1 1 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_RoomView_messageListWrapper {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
&::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');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ limitations under the License.
|
|||
order: 2;
|
||||
flex: 1 1 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_RoomView_messageListWrapper {
|
||||
|
|
|
|||
|
|
@ -50,9 +50,8 @@ limitations under the License.
|
|||
height: 20px;
|
||||
width: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton::before {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -63,6 +62,7 @@ limitations under the License.
|
|||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RightPanel_membersButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/user.svg');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,14 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.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');
|
||||
|
|
@ -23,3 +31,4 @@ limitations under the License.
|
|||
background-position: center;
|
||||
padding: 9px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
98
res/css/structures/_ToastContainer.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@ limitations under the License.
|
|||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
padding: 0 7px;
|
||||
padding: 0 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -89,5 +89,4 @@ limitations under the License.
|
|||
background-color: $menu-selected-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
36
res/css/views/context_menus/_WidgetContextMenu.scss
Normal file
36
res/css/views/context_menus/_WidgetContextMenu.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,8 +14,29 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
67
res/css/views/dialogs/_MessageEditHistoryDialog.scss
Normal file
67
res/css/views/dialogs/_MessageEditHistoryDialog.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,3 @@ limitations under the License.
|
|||
box-shadow: none;
|
||||
border: 1px solid $accent-color;
|
||||
}
|
||||
|
||||
.mx_SetEmailDialog_email_input_placeholder {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
62
res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss
Normal 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
48
res/css/views/dialogs/_TermsDialog.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -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');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ limitations under the License.
|
|||
|
||||
.mx_CreateKeyBackupDialog_primaryContainer {
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
|
||||
padding: 20px
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mx_CreateKeyBackupDialog_primaryContainer::after {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ limitations under the License.
|
|||
|
||||
.mx_RestoreKeyBackupDialog_primaryContainer {
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
|
||||
padding: 20px
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mx_RestoreKeyBackupDialog_passPhraseInput,
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ limitations under the License.
|
|||
position: absolute;
|
||||
right: 10px;
|
||||
top: 16px;
|
||||
width: 0
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_networkoption {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ limitations under the License.
|
|||
max-height: 116px;
|
||||
overflow-y: auto;
|
||||
border-radius: 3px;
|
||||
background-color: $primary-bg-color;
|
||||
border: solid 1px $accent-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
34
res/css/views/elements/_ErrorBoundary.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
36
res/css/views/elements/_FormButton.scss
Normal 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
55
res/css/views/elements/_IconButton.scss
Normal 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');
|
||||
}
|
||||
}
|
||||
91
res/css/views/elements/_InteractiveTooltip.scss
Normal file
91
res/css/views/elements/_InteractiveTooltip.scss
Normal 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
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,5 @@ limitations under the License.
|
|||
|
||||
.mx_PowerSelector .mx_Field select,
|
||||
.mx_PowerSelector .mx_Field input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
56
res/css/views/elements/_RoomAliasField.scss
Normal file
56
res/css/views/elements/_RoomAliasField.scss
Normal 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
19
res/css/views/elements/_TextWithTooltip.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ limitations under the License.
|
|||
border-bottom: 7px solid transparent;
|
||||
}
|
||||
|
||||
.mx_Tooltip_chevron:after {
|
||||
.mx_Tooltip_chevron::after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
229
res/css/views/emojipicker/_EmojiPicker.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -44,8 +44,7 @@ limitations under the License.
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_link
|
||||
{
|
||||
.mx_MatrixToolbar_link {
|
||||
color: $accent-fg-color !important;
|
||||
text-decoration: underline !important;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -37,6 +37,3 @@ limitations under the License.
|
|||
.mx_CreateEvent_header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mx_CreateEvent_link {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
77
res/css/views/messages/_MKeyVerificationRequest.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,4 +15,6 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
color: $event-timestamp-color;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
19
res/css/views/messages/_ReactionsRowButtonTooltip.scss
Normal 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
50
res/css/views/messages/_ViewSourceEvent.scss
Normal 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
244
res/css/views/right_panel/_UserInfo.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -270,7 +242,6 @@ $AppsDrawerBodyHeight: 273px;
|
|||
|
||||
.mx_AppIconTile_image {
|
||||
padding: 10px;
|
||||
width: 75%;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
width: 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,8 +349,8 @@ form.mx_Custom_Widget_Form div {
|
|||
}
|
||||
|
||||
@keyframes mx_AppLoading_spinner_fadeIn_animation {
|
||||
from { opacity: 0 }
|
||||
to { opacity: 1 }
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -50,6 +45,22 @@
|
|||
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,
|
||||
|
|
@ -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
76
res/css/views/rooms/_BasicMessageComposer.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
63
res/css/views/rooms/_EditMessageComposer.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -41,19 +50,32 @@ limitations under the License.
|
|||
|
||||
.mx_EventTile_continuation {
|
||||
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;
|
||||
}
|
||||
|
|
@ -108,7 +147,30 @@ 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;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -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(
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
-45deg,
|
||||
$event-redacted-fg-color,
|
||||
$event-redacted-fg-color 3px,
|
||||
var(--lozenge-color),
|
||||
var(--lozenge-color) 3px,
|
||||
transparent 3px,
|
||||
transparent 6px
|
||||
);
|
||||
box-shadow: 0px 0px 3px $event-redacted-border-color inset;
|
||||
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;
|
||||
color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
|
||||
font-size: 14px;
|
||||
|
||||
pre, code {
|
||||
font-family: $monospace-font-family !important;
|
||||
// deliberate constants as we're behind an invert filter
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body code {
|
||||
code {
|
||||
// deliberate constants as we're behind an invert filter
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body {
|
||||
pre, code {
|
||||
// deliberate constants as we're behind an invert filter
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.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,8 +525,7 @@ 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
|
||||
{
|
||||
.mx_EventTile_content .markdown-body h6 {
|
||||
font-family: inherit !important;
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -455,8 +533,7 @@ limitations under the License.
|
|||
|
||||
/* 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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ limitations under the License.
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_JumpToBottomButton_scrollDown:before {
|
||||
.mx_JumpToBottomButton_scrollDown::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ limitations under the License.
|
|||
width: 12px;
|
||||
height: 12px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 100%;
|
||||
}
|
||||
.mx_MemberDeviceInfo_icon_blacklisted {
|
||||
mask-image: url('$(res)/img/e2e/blacklisted.svg');
|
||||
|
|
@ -57,6 +58,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberDeviceInfo_deviceId {
|
||||
word-break: break-word;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@ limitations under the License.
|
|||
|
||||
.mx_MemberInfo_name h2 {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
max-height: 50px;
|
||||
}
|
||||
|
||||
.mx_MemberInfo h2 {
|
||||
|
|
@ -80,9 +82,6 @@ limitations under the License.
|
|||
display: block;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_avatar .mx_BaseAvatar {
|
||||
}
|
||||
|
||||
.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -87,10 +87,14 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_MemberList_invite.mx_AccessibleButton_disabled {
|
||||
background-color: $greyed-fg-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.mx_MemberList_invite span {
|
||||
background-image: url('$(res)/img/feather-customised/user-add.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
padding-left: 25px;
|
||||
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue