mirror of
https://github.com/element-hq/element-web
synced 2024-10-27 13:16:02 +03:00
Merge branches 'develop' and 't3chguy/emoji_picker_composer' of github.com:matrix-org/matrix-react-sdk into t3chguy/emoji_picker_composer
Conflicts: src/components/views/rooms/MessageComposer.js
This commit is contained in:
Michael Telatynski
commit
ccd0c952e3
1131 changed files with 52941 additions and 24634 deletions
20
.babelrc
20
.babelrc
|
|
@ -1,20 +0,0 @@
|
|||
{
|
||||
"presets": [
|
||||
"react",
|
||||
"es2015",
|
||||
"es2016"
|
||||
],
|
||||
"plugins": [
|
||||
[
|
||||
"transform-builtin-extend",
|
||||
{
|
||||
"globals": ["Error"]
|
||||
}
|
||||
],
|
||||
"transform-class-properties",
|
||||
"transform-object-rest-spread",
|
||||
"transform-runtime",
|
||||
"add-module-exports",
|
||||
"syntax-dynamic-import"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
steps:
|
||||
- label: ":eslint: Lint"
|
||||
command:
|
||||
- "echo '--- Install js-sdk'"
|
||||
- "./scripts/ci/install-deps.sh"
|
||||
- "yarn lintwithexclusions"
|
||||
- "yarn stylelint"
|
||||
plugins:
|
||||
- docker#v3.0.1:
|
||||
image: "node:10"
|
||||
|
||||
- label: ":chains: End-to-End Tests"
|
||||
agents:
|
||||
# We use a xlarge sized instance instead of the normal small ones because
|
||||
# e2e tests otherwise take +-8min
|
||||
queue: "xlarge"
|
||||
command:
|
||||
# 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"
|
||||
- "./scripts/ci/end-to-end-tests.sh"
|
||||
plugins:
|
||||
- docker#v3.0.1:
|
||||
image: "matrixdotorg/riotweb-ci-e2etests-env:latest"
|
||||
propagate-environment: true
|
||||
|
||||
- label: ":karma: Tests"
|
||||
agents:
|
||||
# We use a medium sized instance instead of the normal small ones because
|
||||
# webpack loves to gorge itself on resources.
|
||||
queue: "medium"
|
||||
command:
|
||||
# Install chrome
|
||||
- "echo '--- Installing Chrome'"
|
||||
- "wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -"
|
||||
- "sh -c 'echo \"deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main\" >> /etc/apt/sources.list.d/google.list'"
|
||||
- "apt-get update"
|
||||
- "apt-get install -y google-chrome-stable"
|
||||
# Run tests
|
||||
# TODO: Remove hacky chmod for BuildKite
|
||||
- "chmod +x ./scripts/ci/*.sh"
|
||||
- "chmod +x ./scripts/*"
|
||||
- "echo '--- Installing Dependencies'"
|
||||
- "./scripts/ci/install-deps.sh"
|
||||
- "echo '+++ Running Tests'"
|
||||
- "./scripts/ci/unit-tests.sh"
|
||||
env:
|
||||
CHROME_BIN: "/usr/bin/google-chrome-stable"
|
||||
plugins:
|
||||
- docker#v3.0.1:
|
||||
image: "node:10"
|
||||
propagate-environment: true
|
||||
|
||||
- label: "🔧 Riot Tests"
|
||||
agents:
|
||||
# We use a medium sized instance instead of the normal small ones because
|
||||
# webpack loves to gorge itself on resources.
|
||||
queue: "medium"
|
||||
command:
|
||||
# Install chrome
|
||||
- "echo '--- Installing Chrome'"
|
||||
- "wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -"
|
||||
- "sh -c 'echo \"deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main\" >> /etc/apt/sources.list.d/google.list'"
|
||||
- "apt-get update"
|
||||
- "apt-get install -y google-chrome-stable"
|
||||
# Run tests
|
||||
# TODO: Remove hacky chmod for BuildKite
|
||||
- "chmod +x ./scripts/ci/*.sh"
|
||||
- "chmod +x ./scripts/*"
|
||||
- "echo '--- Installing Dependencies'"
|
||||
- "./scripts/ci/install-deps.sh"
|
||||
- "echo '+++ Running Tests'"
|
||||
- "./scripts/ci/riot-unit-tests.sh"
|
||||
env:
|
||||
CHROME_BIN: "/usr/bin/google-chrome-stable"
|
||||
plugins:
|
||||
- docker#v3.0.1:
|
||||
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"
|
||||
trigger: "riot-web"
|
||||
branches: "develop"
|
||||
build:
|
||||
branch: "develop"
|
||||
message: "[react-sdk] ${BUILDKITE_MESSAGE}"
|
||||
async: true
|
||||
|
|
@ -1 +1,4 @@
|
|||
src/component-index.js
|
||||
test/end-to-end-tests/node_modules/
|
||||
test/end-to-end-tests/riot/
|
||||
test/end-to-end-tests/synapse/
|
||||
|
|
|
|||
|
|
@ -1,16 +1,13 @@
|
|||
# autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
|
||||
|
||||
src/component-index.js
|
||||
src/components/structures/RoomDirectory.js
|
||||
src/components/structures/RoomStatusBar.js
|
||||
src/components/structures/RoomView.js
|
||||
src/components/structures/ScrollPanel.js
|
||||
src/components/structures/SearchBox.js
|
||||
src/components/structures/UploadBar.js
|
||||
src/components/views/avatars/BaseAvatar.js
|
||||
src/components/views/avatars/MemberAvatar.js
|
||||
src/components/views/create_room/RoomAlias.js
|
||||
src/components/views/dialogs/DeactivateAccountDialog.js
|
||||
src/components/views/dialogs/SetPasswordDialog.js
|
||||
src/components/views/dialogs/UnknownDeviceDialog.js
|
||||
src/components/views/elements/AddressSelector.js
|
||||
|
|
@ -31,9 +28,7 @@ src/components/views/rooms/MemberInfo.js
|
|||
src/components/views/rooms/MemberList.js
|
||||
src/components/views/rooms/RoomList.js
|
||||
src/components/views/rooms/RoomPreviewBar.js
|
||||
src/components/views/rooms/SearchBar.js
|
||||
src/components/views/rooms/SearchResultTile.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
|
||||
|
|
@ -45,7 +40,6 @@ src/notifications/ContentRules.js
|
|||
src/notifications/PushRuleVectorState.js
|
||||
src/PlatformPeg.js
|
||||
src/rageshake/rageshake.js
|
||||
src/rageshake/submit-rageshake.js
|
||||
src/ratelimitedfunc.js
|
||||
src/Rooms.js
|
||||
src/Unread.js
|
||||
|
|
@ -58,8 +52,10 @@ src/utils/Receipt.js
|
|||
src/Velociraptor.js
|
||||
test/components/structures/MessagePanel-test.js
|
||||
test/components/views/dialogs/InteractiveAuthDialog-test.js
|
||||
test/components/views/rooms/MessageComposerInput-test.js
|
||||
test/mock-clock.js
|
||||
test/notifications/ContentRules-test.js
|
||||
test/notifications/PushRuleVectorState-test.js
|
||||
test/stores/RoomViewStore-test.js
|
||||
src/component-index.js
|
||||
test/end-to-end-tests/node_modules/
|
||||
test/end-to-end-tests/riot/
|
||||
test/end-to-end-tests/synapse/
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@ const path = require('path');
|
|||
// but only if they come from a module that starts with eslint-config-
|
||||
// So we load the filename directly (and it could be in node_modules/
|
||||
// or or ../node_modules/ etc)
|
||||
const matrixJsSdkPath = path.dirname(require.resolve('matrix-js-sdk'));
|
||||
//
|
||||
// We add a `..` to the end because the js-sdk lives out of lib/, but the eslint
|
||||
// config is at the project root.
|
||||
const matrixJsSdkPath = path.join(path.dirname(require.resolve('matrix-js-sdk')), '..');
|
||||
|
||||
module.exports = {
|
||||
parser: "babel-eslint",
|
||||
|
|
@ -25,6 +28,7 @@ module.exports = {
|
|||
parserOptions: {
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
legacyDecorators: true,
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
|
|
|
|||
1818
CHANGELOG.md
1818
CHANGELOG.md
File diff suppressed because it is too large
Load diff
17
README.md
17
README.md
|
|
@ -4,7 +4,7 @@ matrix-react-sdk
|
|||
This is a react-based SDK for inserting a Matrix chat/voip client into a web page.
|
||||
|
||||
This package provides the React components needed to build a Matrix web client
|
||||
using React. It is not useable in isolation, and instead must must be used from
|
||||
using React. It is not useable in isolation, and instead must be used from
|
||||
a 'skin'. A skin provides:
|
||||
* Customised implementations of presentation components.
|
||||
* Custom CSS
|
||||
|
|
@ -34,7 +34,7 @@ All code lands on the `develop` branch - `master` is only used for stable releas
|
|||
**Please file PRs against `develop`!!**
|
||||
|
||||
Please follow the standard Matrix contributor's guide:
|
||||
https://github.com/matrix-org/synapse/tree/master/CONTRIBUTING.rst
|
||||
https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.rst
|
||||
|
||||
Please follow the Matrix JS/React code style as per:
|
||||
https://github.com/matrix-org/matrix-react-sdk/blob/master/code_style.md
|
||||
|
|
@ -45,7 +45,7 @@ Code should be committed as follows:
|
|||
* In practice, `matrix-react-sdk` is still evolving so fast that the maintenance
|
||||
burden of customising and overriding these components for Riot can seriously
|
||||
impede development. So right now, there should be very few (if any) customisations for Riot.
|
||||
* CSS: https://github.com/vector-im/riot-web/tree/master/src/skins/vector/css/matrix-react-sdk
|
||||
* CSS: https://github.com/matrix-org/matrix-react-sdk/tree/master/res/css
|
||||
* Theme specific CSS & resources: https://github.com/matrix-org/matrix-react-sdk/tree/master/res/themes
|
||||
|
||||
React components in matrix-react-sdk are come in two different flavours:
|
||||
|
|
@ -67,6 +67,7 @@ practices that anyone working with the SDK needs to be be aware of and uphold:
|
|||
|
||||
* After creating a new component you must run `yarn reskindex` to regenerate
|
||||
the `component-index.js` for the SDK (used in future for skinning)
|
||||
<!-- TODO: Remove this once this approach to skinning is replaced -->
|
||||
|
||||
* The view's CSS file MUST have the same name (e.g. view/rooms/MessageTile.css).
|
||||
CSS for matrix-react-sdk currently resides in
|
||||
|
|
@ -82,7 +83,7 @@ practices that anyone working with the SDK needs to be be aware of and uphold:
|
|||
'Stealing' styling information from other components (including parents)
|
||||
is not cool, as it breaks the independence of the components.
|
||||
|
||||
* CSS classes are named with an app-specific namespacing prefix to try to avoid
|
||||
* CSS classes are named with an app-specific name-spacing prefix to try to avoid
|
||||
CSS collisions. The base skin shipped by Matrix.org with the matrix-react-sdk
|
||||
uses the naming prefix "mx_". A company called Yoyodyne Inc might use a
|
||||
prefix like "yy_" for its app-specific classes.
|
||||
|
|
@ -107,7 +108,7 @@ practices that anyone working with the SDK needs to be be aware of and uphold:
|
|||
.mx_RoomTile {} in RoomList.css - only RoomTile.css is allowed to define its
|
||||
own CSS. Instead, say .mx_RoomList .mx_RoomTile {} to scope the override
|
||||
only to the context of RoomList views. N.B. overrides should be relatively
|
||||
rare as in general CSS inheritence should be enough.
|
||||
rare as in general CSS inheritance should be enough.
|
||||
|
||||
* Components should render only within the bounding box of their outermost DOM
|
||||
element. Page-absolute positioning and negative CSS margins and similar are
|
||||
|
|
@ -132,8 +133,10 @@ Development
|
|||
|
||||
Ensure you have the latest LTS version of Node.js installed.
|
||||
|
||||
Using `yarn` instead of `npm` is recommended. Please see the Yarn [install
|
||||
guide](https://yarnpkg.com/docs/install/) if you do not have it already.
|
||||
Using `yarn` instead of `npm` is recommended. Please see the Yarn 1 [install
|
||||
guide](https://classic.yarnpkg.com/docs/install) if you do not have it
|
||||
already. This project has not yet been migrated to Yarn 2, so please ensure
|
||||
`yarn --version` shows a version from the 1.x series.
|
||||
|
||||
`matrix-react-sdk` depends on `matrix-js-sdk`. To make use of changes in the
|
||||
latter and to ensure tests run against the develop branch of `matrix-js-sdk`,
|
||||
|
|
|
|||
17
__mocks__/browser-request.js
Normal file
17
__mocks__/browser-request.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
const en = require("../src/i18n/strings/en_EN");
|
||||
|
||||
module.exports = jest.fn((opts, cb) => {
|
||||
const url = opts.url || opts.uri;
|
||||
if (url && url.endsWith("languages.json")) {
|
||||
cb(undefined, {status: 200}, JSON.stringify({
|
||||
"en": {
|
||||
"fileName": "en_EN.json",
|
||||
"label": "English",
|
||||
},
|
||||
}));
|
||||
} else if (url && url.endsWith("en_EN.json")) {
|
||||
cb(undefined, {status: 200}, JSON.stringify(en));
|
||||
} else {
|
||||
cb(true, {status: 404}, "");
|
||||
}
|
||||
});
|
||||
1
__mocks__/imageMock.js
Normal file
1
__mocks__/imageMock.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
module.exports = "image-file-stub";
|
||||
10
__mocks__/languages.json
Normal file
10
__mocks__/languages.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"en": {
|
||||
"fileName": "en_EN.json",
|
||||
"label": "English"
|
||||
},
|
||||
"en-us": {
|
||||
"fileName": "en_US.json",
|
||||
"label": "English (US)"
|
||||
}
|
||||
}
|
||||
23
babel.config.js
Normal file
23
babel.config.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
module.exports = {
|
||||
"sourceMaps": "inline",
|
||||
"presets": [
|
||||
["@babel/preset-env", {
|
||||
"targets": [
|
||||
"last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions"
|
||||
],
|
||||
}],
|
||||
"@babel/preset-typescript",
|
||||
"@babel/preset-flow",
|
||||
"@babel/preset-react"
|
||||
],
|
||||
"plugins": [
|
||||
["@babel/plugin-proposal-decorators", {legacy: true}],
|
||||
"@babel/plugin-proposal-export-default-from",
|
||||
"@babel/plugin-proposal-numeric-separator",
|
||||
"@babel/plugin-proposal-class-properties",
|
||||
"@babel/plugin-proposal-object-rest-spread",
|
||||
"@babel/plugin-transform-flow-comments",
|
||||
"@babel/plugin-syntax-dynamic-import",
|
||||
"@babel/plugin-transform-runtime"
|
||||
]
|
||||
};
|
||||
|
|
@ -151,6 +151,7 @@ General Style
|
|||
Don't set things to undefined. Reserve that value to mean "not yet set to anything."
|
||||
Boolean objects are verboten.
|
||||
- Use JSDoc
|
||||
- Use switch-case statements where there are 5 or more branches running against the same variable.
|
||||
|
||||
ECMAScript
|
||||
----------
|
||||
|
|
|
|||
31
docs/jitsi.md
Normal file
31
docs/jitsi.md
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
# Jitsi Wrapper
|
||||
|
||||
**Note**: These are developer docs. Please consult your client's documentation for
|
||||
instructions on setting up Jitsi.
|
||||
|
||||
The react-sdk wraps all Jitsi call widgets in a local wrapper called `jitsi.html`
|
||||
which takes several parameters:
|
||||
|
||||
*Query string*:
|
||||
* `widgetId`: The ID of the widget. This is needed for communication back to the
|
||||
react-sdk.
|
||||
* `parentUrl`: The URL of the parent window. This is also needed for
|
||||
communication back to the react-sdk.
|
||||
|
||||
*Hash/fragment (formatted as a query string)*:
|
||||
* `conferenceDomain`: The domain to connect Jitsi Meet to.
|
||||
* `conferenceId`: The room or conference ID to connect Jitsi Meet to.
|
||||
* `isAudioOnly`: Boolean for whether this is a voice-only conference. May not
|
||||
be present, should default to `false`.
|
||||
* `displayName`: The display name of the user viewing the widget. May not
|
||||
be present or could be null.
|
||||
* `avatarUrl`: The HTTP(S) URL for the avatar of the user viewing the widget. May
|
||||
not be present or could be null.
|
||||
* `userId`: The MXID of the user viewing the widget. May not be present or could
|
||||
be null.
|
||||
|
||||
The react-sdk will assume that `jitsi.html` is at the path of wherever it is currently
|
||||
being served. For example, `https://riot.im/develop/jitsi.html` or `vector://webapp/jitsi.html`.
|
||||
|
||||
The `jitsi.html` wrapper can use the react-sdk's `WidgetApi` to communicate, making
|
||||
it easier to actually implement the feature.
|
||||
28
docs/scrolling.md
Normal file
28
docs/scrolling.md
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
# ScrollPanel
|
||||
|
||||
## Updates
|
||||
|
||||
During an onscroll event, we check whether we're getting close to the top or bottom edge of the loaded content. If close enough, we fire a request to load more through the callback passed in the `onFillRequest` prop. This returns a promise is passed down from `TimelinePanel`, where it will call paginate on the `TimelineWindow` and once the events are received back, update its state with the new events. This update trickles down to the `MessagePanel`, which rerenders all tiles and passed that to `ScrollPanel`. ScrollPanels `componentDidUpdate` method gets called, and we do the scroll housekeeping there (read below). Once the rerender has completed, the `setState` callback is called and we resolve the promise returned by `onFillRequest`. Now we check the DOM to see if we need more fill requests.
|
||||
|
||||
## Prevent Shrinking
|
||||
|
||||
ScrollPanel supports a mode to prevent it shrinking. This is used to prevent a jump when at the bottom of the timeline and people start and stop typing. It gets cleared automatically when 200px above the bottom of the timeline.
|
||||
|
||||
|
||||
## BACAT (Bottom-Aligned, Clipped-At-Top) scrolling
|
||||
|
||||
BACAT scrolling implements a different way of restoring the scroll position in the timeline while tiles out of view are changing height or tiles are being added or removed. It was added in https://github.com/matrix-org/matrix-react-sdk/pull/2842.
|
||||
|
||||
The motivation for the changes is having noticed that setting scrollTop while scrolling tends to not work well, with it interrupting ongoing scrolling and also querying scrollTop reporting outdated values and consecutive scroll adjustments cancelling each out previous ones. This seems to be worse on macOS than other platforms, presumably because of a higher resolution in scroll events there. Also see https://github.com/vector-im/riot-web/issues/528. The BACAT approach allows to only have to change the scroll offset when adding or removing tiles.
|
||||
|
||||
The approach taken instead is to vertically align the timeline tiles to the bottom of the scroll container (using flexbox) and give the timeline inside the scroll container an explicit height, initially set to a multiple of the PAGE_SIZE (400px at time of writing) as needed by the content. When scrolled up, we can compensate for anything that grew below the viewport by changing the height of the timeline to maintain what's currently visible in the viewport without adjusting the scrollTop and hence without jumping.
|
||||
|
||||
For anything above the viewport growing or shrinking, we don't need to do anything as the timeline is bottom-aligned. We do need to update the height manually to keep all content visible as more is loaded. To maintain scroll position after the portion above the viewport changes height, we need to set the scrollTop, as we cannot balance it out with more height changes. We do this 100ms after the user has stopped scrolling, so setting scrollTop has not nasty side-effects.
|
||||
|
||||
As of https://github.com/matrix-org/matrix-react-sdk/pull/4166, we are scrolling to compensate for height changes by calling `scrollBy(0, x)` rather than reading and than setting `scrollTop`, as reading `scrollTop` can (again, especially on macOS) easily return values that are out of sync with what is on the screen, probably because scrolling can be done [off the main thread](https://wiki.mozilla.org/Platform/GFX/APZ) in some circumstances. This seems to further prevent jumps.
|
||||
|
||||
### How does it work?
|
||||
|
||||
`componentDidUpdate` is called when a tile in the timeline is updated (as we rerender the whole timeline) or tiles are added or removed (see Updates section before). From here, `checkScroll` is called, which calls `_restoreSavedScrollState`. Now, we increase the timeline height if something below the viewport grew by adjusting `this._bottomGrowth`. `bottomGrowth` is the height added to the timeline (on top of the height from the number of pages calculated at the last `_updateHeight` run) to compensate for growth below the viewport. This is cleared during the next run of `_updateHeight`. Remember that the tiles in the timeline are aligned to the bottom.
|
||||
|
||||
From `_restoreSavedScrollState` we also call `_updateHeight` which waits until the user stops scrolling for 100ms and then recalculates the amount of pages of 400px the timeline should be sized to, to be able to show all of its (newly added) content. We have to adjust the scroll offset (which is why we wait until scrolling has stopped) now because the space above the viewport has likely changed.
|
||||
|
|
@ -51,6 +51,17 @@ Settings are the different options a user may set or experience in the applicati
|
|||
}
|
||||
```
|
||||
|
||||
Settings that support the config level can be set in the config file under the `settingDefaults` key (note that some settings, like the "theme" setting, are special cased in the config file):
|
||||
```json
|
||||
{
|
||||
...
|
||||
"settingDefaults": {
|
||||
"settingName": true
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
### Getting values for a setting
|
||||
|
||||
After importing `SettingsStore`, simply make a call to `SettingsStore.getValue`. The `roomId` parameter should always
|
||||
|
|
|
|||
71
docs/skinning.md
Normal file
71
docs/skinning.md
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
# Skinning
|
||||
|
||||
The react-sdk can be skinned to replace presentation components, CSS, or
|
||||
other relevant parts of the SDK. Typically consumers will replace entire
|
||||
components and get the ability for custom CSS as a result.
|
||||
|
||||
This doc isn't exhaustive on how skinning works, though it should cover
|
||||
some of the more complicated parts such as component replacement.
|
||||
|
||||
## Loading a skin
|
||||
|
||||
1. Generate a `component-index.js` (preferably using the tools that the react-sdk
|
||||
exposes). This can typically be done with a npm script like `"reskindex -h src/header"`.
|
||||
2. In your app's entry point, add something like this code:
|
||||
```javascript
|
||||
import {loadSkin} from "matrix-react-sdk";
|
||||
loadSkin(import("component-index").components);
|
||||
// The rest of your imports go under this.
|
||||
```
|
||||
3. Import the remainder of the SDK and bootstrap your app.
|
||||
|
||||
It is extremely important that you **do not** import anything else from the
|
||||
SDK prior to loading your skin as otherwise the skin might not work. Loading
|
||||
the skin should be one of the first things your app does, if not the very
|
||||
first thing.
|
||||
|
||||
Additionally, **do not** provide `loadSkin` with the react-sdk components
|
||||
themselves otherwise the app might explode. The SDK is already aware of its
|
||||
components and doesn't need to be told.
|
||||
|
||||
## Replacing components
|
||||
|
||||
Components that replace the react-sdk ones MUST have a `replaces` static
|
||||
key on the component's class to describe which component it overrides. For
|
||||
example, if your `VectorAuthPage` component is meant to replace the react-sdk
|
||||
`AuthPage` component then you'd add `static replaces = 'views.auth.AuthPage';`
|
||||
to the `VectorAuthPage` class.
|
||||
|
||||
Other than that, the skin just needs to be loaded normally as mentioned above.
|
||||
Consumers of the SDK likely will not be interested in the rest of this section.
|
||||
|
||||
### SDK developer notes
|
||||
|
||||
Components in the react-sdk MUST be decorated with the `@replaceableComponent`
|
||||
function. For components that can't use the decorator, they must use a
|
||||
variation that provides similar functionality. The decorator gives consumers
|
||||
an opportunity to load skinned components by abusing import ordering and
|
||||
behaviour.
|
||||
|
||||
Decorators are executed at import time which is why we can abuse the import
|
||||
ordering behaviour: importing `loadSkin` doesn't trigger any components to
|
||||
be imported, allowing the consumer to specify a skin. When the consumer does
|
||||
import a component (for example, `MatrixChat`), it starts to pull in all the
|
||||
components via `import` statements. When the components get pulled in the
|
||||
decorator checks with the skinned components to see if it should be replacing
|
||||
the component being imported. The decorator then effectively replaces the
|
||||
components when needed by specifying the skinned component as an override for
|
||||
the SDK's component, which should in theory override critical functions like
|
||||
`render()` and lifecycle event handlers.
|
||||
|
||||
The decorator also means that older usage of `getComponent()` is no longer
|
||||
required because components should be replaced by the decorator. Eventually
|
||||
the react-sdk should only have one usage of `getComponent()`: the decorator.
|
||||
|
||||
The decorator assumes that if `getComponent()` returns null that there is
|
||||
no skinned version of the component and continues on using the SDK's component.
|
||||
In previous versions of the SDK, the function would throw an error instead
|
||||
because it also expected the skin to list the SDK's components as well, however
|
||||
that is no longer possible due to the above.
|
||||
|
||||
In short, components should always be `import`ed.
|
||||
27
docs/usercontent.md
Normal file
27
docs/usercontent.md
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
# Usercontent
|
||||
|
||||
While decryption itself is safe to be done without a sandbox,
|
||||
letting the browser and user interact with the resulting data may be dangerous,
|
||||
previously `usercontent.riot.im` was used to act as a sandbox on a different origin to close the attack surface,
|
||||
it is now possible to do by using a combination of a sandboxed iframe and some code written into the app which consumes this SDK.
|
||||
|
||||
Usercontent is an iframe sandbox target for allowing a user to safely download a decrypted attachment from a sandboxed origin where it cannot be used to XSS your riot session out from under you.
|
||||
|
||||
Its function is to create an Object URL for the user/browser to use but bound to an origin different to that of the riot instance to protect against XSS.
|
||||
|
||||
It exposes a function over a postMessage API, when sent an object with the matching fields to render a download link with the Object URL:
|
||||
|
||||
```json5
|
||||
{
|
||||
"imgSrc": "", // the src of the image to display in the download link
|
||||
"imgStyle": "", // the style to apply to the image
|
||||
"style": "", // the style to apply to the download link
|
||||
"download": "", // download attribute to pass to the <a/> tag
|
||||
"textContent": "", // the text to put inside the download link
|
||||
"blob": "", // the data blob to wrap in an object url and allow the user to download
|
||||
}
|
||||
```
|
||||
|
||||
If only imgSrc, imgStyle and style are passed then just update the existing link without overwriting other things about it.
|
||||
|
||||
It is expected that this target be available at `usercontent/` relative to the root of the app, this can be seen in riot-web's webpack config.
|
||||
39
jenkins.sh
39
jenkins.sh
|
|
@ -1,39 +0,0 @@
|
|||
#!/bin/bash
|
||||
|
||||
set -e
|
||||
|
||||
export NVM_DIR="$HOME/.nvm"
|
||||
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
|
||||
nvm use 10
|
||||
|
||||
set -x
|
||||
|
||||
scripts/fetchdep.sh matrix-org matrix-js-sdk
|
||||
|
||||
pushd matrix-js-sdk
|
||||
yarn link
|
||||
yarn install
|
||||
popd
|
||||
|
||||
yarn link matrix-js-sdk
|
||||
|
||||
# install the other dependencies
|
||||
yarn install
|
||||
|
||||
# run the mocha tests
|
||||
yarn test --no-colors
|
||||
|
||||
# run eslint
|
||||
yarn lintall -f checkstyle -o eslint.xml || true
|
||||
|
||||
# re-run the linter, excluding any files known to have errors or warnings.
|
||||
yarn lintwithexclusions
|
||||
|
||||
# lint styles
|
||||
yarn stylelint
|
||||
|
||||
# delete the old tarball, if it exists
|
||||
rm -f matrix-react-sdk-*.tgz
|
||||
|
||||
# build our tarball
|
||||
yarn pack
|
||||
228
karma.conf.js
228
karma.conf.js
|
|
@ -1,228 +0,0 @@
|
|||
// karma.conf.js - the config file for karma, which runs our tests.
|
||||
|
||||
var path = require('path');
|
||||
var fs = require('fs');
|
||||
|
||||
/*
|
||||
* We use webpack to build our tests. It's a pain to have to wait for webpack
|
||||
* to build everything; however it's the easiest way to load our dependencies
|
||||
* from node_modules.
|
||||
*
|
||||
* If you run karma in multi-run mode (with `yarn test-multi`), it will watch
|
||||
* the tests for changes, and webpack will rebuild using a cache. This is much quicker
|
||||
* than a clean rebuild.
|
||||
*/
|
||||
|
||||
// the name of the test file. By default, a special file which runs all tests.
|
||||
//
|
||||
// TODO: this could be a pattern, and karma would run each file, with a
|
||||
// separate webpack bundle for each file. But then we get a separate instance
|
||||
// of the sdk, and each of the dependencies, for each test file, and everything
|
||||
// gets very confused. Can we persuade webpack to put all of the dependencies
|
||||
// in a 'common' bundle?
|
||||
//
|
||||
var testFile = process.env.KARMA_TEST_FILE || 'test/all-tests.js';
|
||||
|
||||
|
||||
process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
|
||||
|
||||
function fileExists(name) {
|
||||
try {
|
||||
fs.statSync(name);
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// try find the gemini-scrollbar css in an version-agnostic way
|
||||
var gsCss = 'node_modules/gemini-scrollbar/gemini-scrollbar.css';
|
||||
if (!fileExists(gsCss)) {
|
||||
gsCss = 'node_modules/react-gemini-scrollbar/'+gsCss;
|
||||
}
|
||||
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
// frameworks to use
|
||||
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
||||
frameworks: ['mocha'],
|
||||
|
||||
// list of files / patterns to load in the browser
|
||||
files: [
|
||||
testFile,
|
||||
gsCss,
|
||||
|
||||
// some images to reduce noise from the tests
|
||||
{pattern: 'test/img/*', watched: false, included: false,
|
||||
served: true, nocache: false},
|
||||
// translation files
|
||||
{pattern: 'src/i18n/strings/*', watcheed: false, included: false, served: true},
|
||||
{pattern: 'test/i18n/*', watched: false, included: false, served: true},
|
||||
],
|
||||
|
||||
proxies: {
|
||||
// redirect img links to the karma server
|
||||
"/img/": "/base/test/img/",
|
||||
// special languages.json file for the tests
|
||||
"/i18n/languages.json": "/base/test/i18n/languages.json",
|
||||
// and redirect i18n requests
|
||||
"/i18n/": "/base/src/i18n/strings/",
|
||||
},
|
||||
|
||||
// list of files to exclude
|
||||
//
|
||||
// This doesn't work. It turns out that it's webpack which does the
|
||||
// watching of the /test directory (karma only watches `testFile`
|
||||
// itself). Webpack watches the directory so that it can spot
|
||||
// new tests, which is fair enough; unfortunately it triggers a rebuild
|
||||
// every time a lockfile is created in that directory, and there
|
||||
// doesn't seem to be any way to tell webpack to ignore particular
|
||||
// files in a watched directory.
|
||||
//
|
||||
// exclude: [
|
||||
// '**/.#*'
|
||||
// ],
|
||||
|
||||
// preprocess matching files before serving them to the browser
|
||||
// available preprocessors:
|
||||
// https://npmjs.org/browse/keyword/karma-preprocessor
|
||||
preprocessors: {
|
||||
'test/**/*.js': ['webpack', 'sourcemap']
|
||||
},
|
||||
|
||||
// test results reporter to use
|
||||
// possible values: 'dots', 'progress'
|
||||
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
|
||||
reporters: ['logcapture', 'spec', 'summary'],
|
||||
|
||||
specReporter: {
|
||||
suppressErrorSummary: false, // do print error summary
|
||||
suppressFailed: false, // do print information about failed tests
|
||||
suppressPassed: false, // do print information about passed tests
|
||||
showSpecTiming: true, // print the time elapsed for each spec
|
||||
},
|
||||
|
||||
client: {
|
||||
captureLogs: true,
|
||||
},
|
||||
|
||||
// web server port
|
||||
port: 9876,
|
||||
|
||||
// enable / disable colors in the output (reporters and logs)
|
||||
colors: true,
|
||||
|
||||
// level of logging
|
||||
// possible values: config.LOG_DISABLE || config.LOG_ERROR ||
|
||||
// config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
|
||||
//
|
||||
// This is strictly for logs that would be generated by the browser itself and we
|
||||
// don't want to log about missing images, which are emitted on LOG_WARN.
|
||||
logLevel: config.LOG_ERROR,
|
||||
|
||||
// enable / disable watching file and executing tests whenever any file
|
||||
// changes
|
||||
autoWatch: true,
|
||||
|
||||
// start these browsers
|
||||
// available browser launchers:
|
||||
// https://npmjs.org/browse/keyword/karma-launcher
|
||||
browsers: [
|
||||
'Chrome',
|
||||
//'PhantomJS',
|
||||
//'ChromeHeadless',
|
||||
],
|
||||
|
||||
customLaunchers: {
|
||||
'VectorChromeHeadless': {
|
||||
base: 'Chrome',
|
||||
flags: [
|
||||
'--no-sandbox',
|
||||
// See https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
|
||||
'--headless',
|
||||
'--disable-gpu',
|
||||
// Without a remote debugging port, Google Chrome exits immediately.
|
||||
'--remote-debugging-port=9222',
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
// Continuous Integration mode
|
||||
// if true, Karma captures browsers, runs the tests and exits
|
||||
// singleRun: false,
|
||||
|
||||
// Concurrency level
|
||||
// how many browser should be started simultaneous
|
||||
concurrency: Infinity,
|
||||
|
||||
webpack: {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/, loader: "babel-loader",
|
||||
include: [path.resolve('./src'),
|
||||
path.resolve('./test'),
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(gif|png|svg|ttf|woff2)$/,
|
||||
loader: 'file-loader',
|
||||
},
|
||||
],
|
||||
noParse: [
|
||||
// for cross platform compatibility use [\\\/] as the path separator
|
||||
// this ensures that the regex trips on both Windows and *nix
|
||||
|
||||
// don't parse the languages within highlight.js. They
|
||||
// cause stack overflows
|
||||
// (https://github.com/webpack/webpack/issues/1721), and
|
||||
// there is no need for webpack to parse them - they can
|
||||
// just be included as-is.
|
||||
/highlight\.js[\\\/]lib[\\\/]languages/,
|
||||
|
||||
// olm takes ages for webpack to process, and it's already heavily
|
||||
// optimised, so there is little to gain by us uglifying it.
|
||||
/olm[\\\/](javascript[\\\/])?olm\.js$/,
|
||||
|
||||
// also disable parsing for sinon, because it
|
||||
// tries to do voodoo with 'require' which upsets
|
||||
// webpack (https://github.com/webpack/webpack/issues/304)
|
||||
/sinon[\\\/]pkg[\\\/]sinon\.js$/,
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
// alias any requires to the react module to the one in our
|
||||
// path, otherwise we tend to get the react source included
|
||||
// twice when using `npm link` / `yarn link`.
|
||||
react: path.resolve('./node_modules/react'),
|
||||
|
||||
'matrix-react-sdk': path.resolve('test/skinned-sdk.js'),
|
||||
'sinon': 'sinon/pkg/sinon.js',
|
||||
},
|
||||
modules: [
|
||||
path.resolve('./test'),
|
||||
"node_modules"
|
||||
],
|
||||
},
|
||||
devtool: 'inline-source-map',
|
||||
externals: {
|
||||
// Don't try to bundle electron: leave it as a commonjs dependency
|
||||
// (the 'commonjs' here means it will output a 'require')
|
||||
"electron": "commonjs electron",
|
||||
},
|
||||
// make sure we're flagged as development to avoid wasting time optimising
|
||||
mode: 'development',
|
||||
},
|
||||
|
||||
webpackMiddleware: {
|
||||
stats: {
|
||||
// don't fill the console up with a mahoosive list of modules
|
||||
chunks: false,
|
||||
},
|
||||
},
|
||||
|
||||
browserNoActivityTimeout: 15000,
|
||||
});
|
||||
};
|
||||
167
package.json
167
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "matrix-react-sdk",
|
||||
"version": "1.7.5",
|
||||
"version": "2.6.1",
|
||||
"description": "SDK for matrix.org using React",
|
||||
"author": "matrix.org",
|
||||
"repository": {
|
||||
|
|
@ -8,58 +8,54 @@
|
|||
"url": "https://github.com/matrix-org/matrix-react-sdk"
|
||||
},
|
||||
"license": "Apache-2.0",
|
||||
"main": "lib/index.js",
|
||||
"files": [
|
||||
".babelrc",
|
||||
".eslintrc.js",
|
||||
"lib",
|
||||
"res",
|
||||
"src",
|
||||
"scripts",
|
||||
"git-revision.txt",
|
||||
"docs",
|
||||
"header",
|
||||
"CHANGELOG.md",
|
||||
"CONTRIBUTING.rst",
|
||||
"LICENSE",
|
||||
"README.md",
|
||||
"code_style.md",
|
||||
"git-revision.txt",
|
||||
"header",
|
||||
"jenkins.sh",
|
||||
"karma.conf.js",
|
||||
"lib",
|
||||
"package.json",
|
||||
"release.sh",
|
||||
"scripts",
|
||||
"src",
|
||||
"test",
|
||||
"res"
|
||||
"package.json"
|
||||
],
|
||||
"bin": {
|
||||
"reskindex": "scripts/reskindex.js",
|
||||
"matrix-gen-i18n": "scripts/gen-i18n.js",
|
||||
"matrix-prune-i18n": "scripts/prune-i18n.js"
|
||||
},
|
||||
"main": "./lib/index.js",
|
||||
"typings": "./lib/index.d.ts",
|
||||
"matrix_src_main": "./src/index.js",
|
||||
"scripts": {
|
||||
"reskindex": "node scripts/reskindex.js -h header",
|
||||
"reskindex:watch": "node scripts/reskindex.js -h header -w",
|
||||
"rethemendex": "res/css/rethemendex.sh",
|
||||
"prepare": "yarn build",
|
||||
"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",
|
||||
"start": "yarn start:init && yarn start:all",
|
||||
"start:all": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n build,reskindex \"yarn build:watch\" \"yarn reskindex:watch\"",
|
||||
"start:init": "babel src -d lib --source-maps --copy-files",
|
||||
"lint": "eslint src/",
|
||||
"lintall": "eslint src/ test/",
|
||||
"lintwithexclusions": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
|
||||
"stylelint": "stylelint 'res/css/**/*.scss'",
|
||||
"reskindex": "node scripts/reskindex.js -h header",
|
||||
"reskindex:watch": "node scripts/reskindex.js -h header -w",
|
||||
"rethemendex": "res/css/rethemendex.sh",
|
||||
"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",
|
||||
"e2etests": "./test/end-to-end-tests/run.sh --riot-url http://localhost:8080"
|
||||
"build": "yarn clean && git rev-parse HEAD > git-revision.txt && yarn build:compile && yarn build:types",
|
||||
"build:compile": "yarn reskindex && babel -d lib --verbose --extensions \".ts,.js,.tsx\" src",
|
||||
"build:types": "tsc --emitDeclarationOnly --jsx react",
|
||||
"start": "echo THIS IS FOR LEGACY PURPOSES ONLY. && yarn start:all",
|
||||
"start:all": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n build,reskindex \"yarn start:build\" \"yarn reskindex:watch\"",
|
||||
"start:build": "babel src -w -s -d lib --verbose --extensions \".ts,.js\"",
|
||||
"lint": "yarn lint:types && yarn lint:ts && yarn lint:js && yarn lint:style",
|
||||
"lint:js": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
|
||||
"lint:ts": "tslint --project ./tsconfig.json -t stylish",
|
||||
"lint:types": "tsc --noEmit --jsx react",
|
||||
"lint:style": "stylelint 'res/css/**/*.scss'",
|
||||
"test": "jest",
|
||||
"test:e2e": "./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",
|
||||
"@babel/runtime": "^7.8.3",
|
||||
"await-lock": "^2.0.1",
|
||||
"blueimp-canvas-to-blob": "^3.5.0",
|
||||
"browser-encrypt-attachment": "^0.3.0",
|
||||
"browser-request": "^0.3.3",
|
||||
|
|
@ -75,62 +71,67 @@
|
|||
"file-saver": "^1.3.3",
|
||||
"filesize": "3.5.6",
|
||||
"flux": "2.1.1",
|
||||
"react-focus-lock": "^2.2.1",
|
||||
"focus-visible": "^5.0.2",
|
||||
"fuse.js": "^2.2.0",
|
||||
"gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566",
|
||||
"gfm.css": "^1.1.1",
|
||||
"glob": "^5.0.14",
|
||||
"glob-to-regexp": "^0.4.1",
|
||||
"highlight.js": "^9.15.8",
|
||||
"html-entities": "^1.2.1",
|
||||
"is-ip": "^2.0.0",
|
||||
"isomorphic-fetch": "^2.2.1",
|
||||
"linkifyjs": "^2.1.6",
|
||||
"lodash": "^4.17.14",
|
||||
"lolex": "4.2",
|
||||
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
|
||||
"optimist": "^0.6.1",
|
||||
"minimist": "^1.2.0",
|
||||
"pako": "^1.0.5",
|
||||
"parse5": "^5.1.1",
|
||||
"png-chunks-extract": "^1.0.0",
|
||||
"project-name-generator": "^2.1.7",
|
||||
"prop-types": "^15.5.8",
|
||||
"qrcode-react": "^0.1.16",
|
||||
"qrcode": "^1.4.4",
|
||||
"qs": "^6.6.0",
|
||||
"querystring": "^0.2.0",
|
||||
"react": "^16.9.0",
|
||||
"react-addons-css-transition-group": "15.6.2",
|
||||
"react-beautiful-dnd": "^4.0.1",
|
||||
"react-dom": "^16.9.0",
|
||||
"react-gemini-scrollbar": "github:matrix-org/react-gemini-scrollbar#9cf17f63b7c0b0ec5f31df27da0f82f7238dc594",
|
||||
"react-focus-lock": "^2.2.1",
|
||||
"resize-observer-polyfill": "^1.5.0",
|
||||
"sanitize-html": "^1.18.4",
|
||||
"slate": "^0.41.2",
|
||||
"slate-html-serializer": "^0.6.1",
|
||||
"slate-md-serializer": "github:matrix-org/slate-md-serializer#f7c4ad3",
|
||||
"slate-react": "^0.18.10",
|
||||
"text-encoding-utf-8": "^1.0.1",
|
||||
"url": "^0.11.0",
|
||||
"velocity-animate": "^1.5.2",
|
||||
"what-input": "^5.2.6",
|
||||
"whatwg-fetch": "^1.1.1",
|
||||
"zxcvbn": "^4.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-loader": "^7.1.5",
|
||||
"babel-plugin-add-module-exports": "^0.2.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",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-es2016": "^6.24.1",
|
||||
"babel-preset-es2017": "^6.24.1",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"chokidar": "^2.1.2",
|
||||
"@babel/cli": "^7.7.5",
|
||||
"@babel/core": "^7.7.5",
|
||||
"@babel/plugin-proposal-class-properties": "^7.7.4",
|
||||
"@babel/plugin-proposal-decorators": "^7.7.4",
|
||||
"@babel/plugin-proposal-export-default-from": "^7.7.4",
|
||||
"@babel/plugin-proposal-numeric-separator": "^7.7.4",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
|
||||
"@babel/plugin-transform-flow-comments": "^7.7.4",
|
||||
"@babel/plugin-transform-runtime": "^7.8.3",
|
||||
"@babel/preset-env": "^7.7.6",
|
||||
"@babel/preset-flow": "^7.7.4",
|
||||
"@babel/preset-react": "^7.7.4",
|
||||
"@babel/preset-typescript": "^7.7.4",
|
||||
"@babel/register": "^7.7.4",
|
||||
"@peculiar/webcrypto": "^1.0.22",
|
||||
"@types/classnames": "^2.2.10",
|
||||
"@types/flux": "^3.1.9",
|
||||
"@types/lodash": "^4.14.152",
|
||||
"@types/modernizr": "^3.5.3",
|
||||
"@types/node": "^12.12.41",
|
||||
"@types/qrcode": "^1.3.4",
|
||||
"@types/react": "^16.9",
|
||||
"@types/react-dom": "^16.9.8",
|
||||
"@types/zxcvbn": "^4.4.0",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"babel-jest": "^24.9.0",
|
||||
"chokidar": "^3.3.1",
|
||||
"concurrently": "^4.0.1",
|
||||
"enzyme": "^3.10.0",
|
||||
"enzyme-adapter-react-16": "^1.15.1",
|
||||
"eslint": "^5.12.0",
|
||||
"eslint-config-google": "^0.7.1",
|
||||
"eslint-plugin-babel": "^5.2.1",
|
||||
|
|
@ -139,32 +140,40 @@
|
|||
"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",
|
||||
"flow-parser": "^0.57.3",
|
||||
"jest-mock": "^23.2.0",
|
||||
"karma": "^4.0.1",
|
||||
"karma-chrome-launcher": "^2.2.0",
|
||||
"karma-cli": "^1.0.1",
|
||||
"karma-logcapture-reporter": "0.0.1",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "^0.0.31",
|
||||
"karma-summary-reporter": "^1.5.1",
|
||||
"karma-webpack": "^4.0.0-beta.0",
|
||||
"glob": "^5.0.14",
|
||||
"jest": "^24.9.0",
|
||||
"jest-canvas-mock": "^2.2.0",
|
||||
"lolex": "^5.1.2",
|
||||
"matrix-mock-request": "^1.2.3",
|
||||
"matrix-react-test-utils": "^0.2.2",
|
||||
"mocha": "^5.0.5",
|
||||
"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",
|
||||
"tslint": "^5.20.1",
|
||||
"typescript": "^3.7.3",
|
||||
"walk": "^2.3.9",
|
||||
"webpack": "^4.20.2",
|
||||
"webpack-cli": "^3.1.1"
|
||||
},
|
||||
"jest": {
|
||||
"testMatch": [
|
||||
"<rootDir>/test/**/*-test.js"
|
||||
],
|
||||
"setupFiles": ["jest-canvas-mock"],
|
||||
"setupFilesAfterEnv": [
|
||||
"<rootDir>/test/setupTests.js"
|
||||
],
|
||||
"moduleNameMapper": {
|
||||
"\\.(gif|png|svg|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
|
||||
"\\$webapp/i18n/languages.json": "<rootDir>/__mocks__/languages.json"
|
||||
},
|
||||
"transformIgnorePatterns": [
|
||||
"/node_modules/(?!matrix-js-sdk).+$"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
52
release.sh
52
release.sh
|
|
@ -1,4 +1,4 @@
|
|||
#!/bin/sh
|
||||
#!/bin/bash
|
||||
#
|
||||
# Script to perform a release of matrix-react-sdk.
|
||||
#
|
||||
|
|
@ -9,4 +9,52 @@ set -e
|
|||
|
||||
cd `dirname $0`
|
||||
|
||||
exec ./node_modules/matrix-js-sdk/release.sh -z "$@"
|
||||
for i in matrix-js-sdk
|
||||
do
|
||||
echo "Checking version of $i..."
|
||||
depver=`cat package.json | jq -r .dependencies[\"$i\"]`
|
||||
latestver=`yarn info -s $i dist-tags.next`
|
||||
if [ "$depver" != "$latestver" ]
|
||||
then
|
||||
echo "The latest version of $i is $latestver but package.json depends on $depver."
|
||||
echo -n "Type 'u' to auto-upgrade, 'c' to continue anyway, or 'a' to abort:"
|
||||
read resp
|
||||
if [ "$resp" != "u" ] && [ "$resp" != "c" ]
|
||||
then
|
||||
echo "Aborting."
|
||||
exit 1
|
||||
fi
|
||||
if [ "$resp" == "u" ]
|
||||
then
|
||||
echo "Upgrading $i to $latestver..."
|
||||
yarn add -E $i@$latestver
|
||||
git add -u
|
||||
# The `-e` flag opens the editor and gives you a chance to check
|
||||
# the upgrade for correctness.
|
||||
git commit -m "Upgrade $i to $latestver" -e
|
||||
fi
|
||||
fi
|
||||
done
|
||||
|
||||
./node_modules/matrix-js-sdk/release.sh -z "$@"
|
||||
|
||||
release="${1#v}"
|
||||
prerelease=0
|
||||
# We check if this build is a prerelease by looking to
|
||||
# see if the version has a hyphen in it. Crude,
|
||||
# but semver doesn't support postreleases so anything
|
||||
# with a hyphen is a prerelease.
|
||||
echo $release | grep -q '-' && prerelease=1
|
||||
|
||||
if [ $prerelease -eq 0 ]
|
||||
then
|
||||
# For a release, reset SDK deps back to the `develop` branch.
|
||||
for i in matrix-js-sdk
|
||||
do
|
||||
echo "Resetting $i to develop branch..."
|
||||
yarn add github:matrix-org/$i#develop
|
||||
git add -u
|
||||
git commit -m "Reset $i back to develop branch"
|
||||
done
|
||||
git push origin develop
|
||||
fi
|
||||
|
|
|
|||
|
|
@ -16,6 +16,12 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import "./_font-sizes.scss";
|
||||
|
||||
:root {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
html {
|
||||
/* hack to stop overscroll bounce on OSX and iOS.
|
||||
N.B. Breaks things when we have legitimate horizontal overscroll */
|
||||
|
|
@ -25,7 +31,7 @@ html {
|
|||
|
||||
body {
|
||||
font-family: $font-family;
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
background-color: $primary-bg-color;
|
||||
color: $primary-fg-color;
|
||||
border: 0px;
|
||||
|
|
@ -42,10 +48,15 @@ pre, code {
|
|||
font-size: 100% !important;
|
||||
}
|
||||
|
||||
.error, .warning {
|
||||
.error, .warning,
|
||||
.text-error, .text-warning {
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
b {
|
||||
// On Firefox, the default weight for `<b>` is `bolder` which results in no bold
|
||||
// effect since we only have specific weights of our fonts available.
|
||||
|
|
@ -55,7 +66,7 @@ b {
|
|||
h2 {
|
||||
color: $primary-fg-color;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: $font-18px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
|
@ -71,7 +82,7 @@ input[type=search],
|
|||
input[type=password] {
|
||||
padding: 9px;
|
||||
font-family: $font-family;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
font-weight: 600;
|
||||
min-width: 0;
|
||||
}
|
||||
|
|
@ -202,37 +213,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
|
||||
Stop the scrollbar view from pushing out the container's overall sizing, which causes
|
||||
flexbox to adapt to the new size and cause the view to keep growing.
|
||||
*/
|
||||
.gm-scrollbar-container .gm-scroll-view {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Expand thumbs on hoverover */
|
||||
.gm-scrollbar {
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
.gm-scrollbar.-vertical {
|
||||
width: 6px;
|
||||
transition: width 120ms ease-out !important;
|
||||
}
|
||||
.gm-scrollbar.-vertical:hover,
|
||||
.gm-scrollbar.-vertical:active {
|
||||
width: 8px;
|
||||
transition: width 120ms ease-out !important;
|
||||
}
|
||||
.gm-scrollbar.-horizontal {
|
||||
height: 6px;
|
||||
transition: height 120ms ease-out !important;
|
||||
}
|
||||
.gm-scrollbar.-horizontal:hover,
|
||||
.gm-scrollbar.-horizontal:active {
|
||||
height: 8px;
|
||||
transition: height 120ms ease-out !important;
|
||||
}
|
||||
|
||||
// These are magic constants which are excluded from tinting, to let themes
|
||||
// (which only have CSS, unlike skins) tell the app what their non-tinted
|
||||
// colourscheme is by inspecting the stylesheet DOM.
|
||||
|
|
@ -279,7 +259,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
color: $light-fg-color;
|
||||
z-index: 4012;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
position: relative;
|
||||
padding: 25px 30px 30px 30px;
|
||||
max-height: 80%;
|
||||
|
|
@ -338,9 +318,17 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mx_Dialog_titleImage {
|
||||
vertical-align: middle;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: -2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.mx_Dialog_title {
|
||||
font-size: 22px;
|
||||
line-height: 36px;
|
||||
font-size: $font-22px;
|
||||
line-height: $font-36px;
|
||||
color: $dialog-title-fg-color;
|
||||
}
|
||||
|
||||
|
|
@ -368,7 +356,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
|
||||
.mx_Dialog_content {
|
||||
margin: 24px 0 68px;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
color: $primary-fg-color;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
|
@ -378,7 +366,13 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
.mx_Dialog button, .mx_Dialog input[type="submit"] {
|
||||
/* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied
|
||||
* to them that no button anywhere else in the app gets by default. In practice, buttons in other places
|
||||
* in the app look the same by being AccessibleButtons, or possibly by having explict button classes.
|
||||
* We should go through and have one consistent set of styles for buttons throughout the app.
|
||||
* For now, I am duplicating the selectors here for mx_Dialog and mx_DialogButtons.
|
||||
*/
|
||||
.mx_Dialog button, .mx_Dialog input[type="submit"], .mx_Dialog_buttons button, .mx_Dialog_buttons input[type="submit"] {
|
||||
@mixin mx_DialogButton;
|
||||
margin-left: 0px;
|
||||
margin-right: 8px;
|
||||
|
|
@ -394,27 +388,32 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover {
|
||||
.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover, .mx_Dialog_buttons button:hover, .mx_Dialog_buttons input[type="submit"]:hover {
|
||||
@mixin mx_DialogButton_hover;
|
||||
}
|
||||
|
||||
.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus {
|
||||
.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus, .mx_Dialog_buttons button:focus, .mx_Dialog_buttons input[type="submit"]:focus {
|
||||
filter: brightness($focus-brightness);
|
||||
}
|
||||
|
||||
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
|
||||
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary, .mx_Dialog_buttons button.mx_Dialog_primary, .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
min-width: 156px;
|
||||
}
|
||||
|
||||
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
|
||||
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger, .mx_Dialog_buttons button.danger, .mx_Dialog_buttons input[type="submit"].danger {
|
||||
background-color: $warning-color;
|
||||
border: solid 1px $warning-color;
|
||||
color: $accent-fg-color;
|
||||
}
|
||||
|
||||
.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
|
||||
.mx_Dialog button.warning, .mx_Dialog input[type="submit"].warning {
|
||||
border: solid 1px $warning-color;
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled, .mx_Dialog_buttons button:disabled, .mx_Dialog_buttons input[type="submit"]:disabled {
|
||||
background-color: $light-fg-color;
|
||||
border: solid 1px $light-fg-color;
|
||||
opacity: 0.7;
|
||||
|
|
@ -453,7 +452,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
}
|
||||
|
||||
.mx_TextInputDialog_input {
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 9px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// autogenerated by rethemendex.sh
|
||||
@import "./_common.scss";
|
||||
@import "./_font-sizes.scss";
|
||||
@import "./structures/_AutoHideScrollbar.scss";
|
||||
@import "./structures/_CompatibilityPage.scss";
|
||||
@import "./structures/_ContextualMenu.scss";
|
||||
|
|
@ -24,11 +25,11 @@
|
|||
@import "./structures/_SearchBox.scss";
|
||||
@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";
|
||||
@import "./structures/auth/_CompleteSecurity.scss";
|
||||
@import "./structures/auth/_Login.scss";
|
||||
@import "./views/auth/_AuthBody.scss";
|
||||
@import "./views/auth/_AuthButtons.scss";
|
||||
|
|
@ -36,9 +37,11 @@
|
|||
@import "./views/auth/_AuthHeader.scss";
|
||||
@import "./views/auth/_AuthHeaderLogo.scss";
|
||||
@import "./views/auth/_AuthPage.scss";
|
||||
@import "./views/auth/_CompleteSecurityBody.scss";
|
||||
@import "./views/auth/_CountryDropdown.scss";
|
||||
@import "./views/auth/_InteractiveAuthEntryComponents.scss";
|
||||
@import "./views/auth/_LanguageSelector.scss";
|
||||
@import "./views/auth/_PassphraseField.scss";
|
||||
@import "./views/auth/_ServerConfig.scss";
|
||||
@import "./views/auth/_ServerTypeSelector.scss";
|
||||
@import "./views/auth/_Welcome.scss";
|
||||
|
|
@ -60,11 +63,14 @@
|
|||
@import "./views/dialogs/_DeactivateAccountDialog.scss";
|
||||
@import "./views/dialogs/_DeviceVerifyDialog.scss";
|
||||
@import "./views/dialogs/_DevtoolsDialog.scss";
|
||||
@import "./views/dialogs/_EncryptedEventDialog.scss";
|
||||
@import "./views/dialogs/_GroupAddressPicker.scss";
|
||||
@import "./views/dialogs/_IncomingSasDialog.scss";
|
||||
@import "./views/dialogs/_InviteDialog.scss";
|
||||
@import "./views/dialogs/_KeyboardShortcutsDialog.scss";
|
||||
@import "./views/dialogs/_MessageEditHistoryDialog.scss";
|
||||
@import "./views/dialogs/_NewSessionReviewDialog.scss";
|
||||
@import "./views/dialogs/_RoomSettingsDialog.scss";
|
||||
@import "./views/dialogs/_RoomSettingsDialogBridges.scss";
|
||||
@import "./views/dialogs/_RoomUpgradeDialog.scss";
|
||||
@import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
|
||||
@import "./views/dialogs/_SetEmailDialog.scss";
|
||||
|
|
@ -102,11 +108,13 @@
|
|||
@import "./views/elements/_ManageIntegsButton.scss";
|
||||
@import "./views/elements/_PowerSelector.scss";
|
||||
@import "./views/elements/_ProgressBar.scss";
|
||||
@import "./views/elements/_QRCode.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/_Slider.scss";
|
||||
@import "./views/elements/_Spinner.scss";
|
||||
@import "./views/elements/_SyntaxHighlight.scss";
|
||||
@import "./views/elements/_TextWithTooltip.scss";
|
||||
|
|
@ -124,22 +132,26 @@
|
|||
@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/_MVideoBody.scss";
|
||||
@import "./views/messages/_MessageActionBar.scss";
|
||||
@import "./views/messages/_MessageTimestamp.scss";
|
||||
@import "./views/messages/_MjolnirBody.scss";
|
||||
@import "./views/messages/_ReactionsRow.scss";
|
||||
@import "./views/messages/_ReactionsRowButton.scss";
|
||||
@import "./views/messages/_ReactionsRowButtonTooltip.scss";
|
||||
@import "./views/messages/_RedactedBody.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/messages/_common_CryptoEvent.scss";
|
||||
@import "./views/right_panel/_EncryptionInfo.scss";
|
||||
@import "./views/right_panel/_UserInfo.scss";
|
||||
@import "./views/right_panel/_VerificationPanel.scss";
|
||||
@import "./views/room_settings/_AliasSettings.scss";
|
||||
@import "./views/room_settings/_ColorSettings.scss";
|
||||
@import "./views/rooms/_AppsDrawer.scss";
|
||||
|
|
@ -150,6 +162,9 @@
|
|||
@import "./views/rooms/_EditMessageComposer.scss";
|
||||
@import "./views/rooms/_EntityTile.scss";
|
||||
@import "./views/rooms/_EventTile.scss";
|
||||
@import "./views/rooms/_GroupLayout.scss";
|
||||
@import "./views/rooms/_IRCLayout.scss";
|
||||
@import "./views/rooms/_InviteOnlyIcon.scss";
|
||||
@import "./views/rooms/_JumpToBottomButton.scss";
|
||||
@import "./views/rooms/_LinkPreviewWidget.scss";
|
||||
@import "./views/rooms/_MemberDeviceInfo.scss";
|
||||
|
|
@ -170,14 +185,15 @@
|
|||
@import "./views/rooms/_RoomTile.scss";
|
||||
@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/_UserOnlineDot.scss";
|
||||
@import "./views/rooms/_WhoIsTypingTile.scss";
|
||||
@import "./views/settings/_AvatarSetting.scss";
|
||||
@import "./views/settings/_CrossSigningPanel.scss";
|
||||
@import "./views/settings/_DevicesPanel.scss";
|
||||
@import "./views/settings/_E2eAdvancedPanel.scss";
|
||||
@import "./views/settings/_EmailAddresses.scss";
|
||||
@import "./views/settings/_IntegrationManager.scss";
|
||||
@import "./views/settings/_KeyBackupPanel.scss";
|
||||
|
|
@ -190,6 +206,7 @@
|
|||
@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/_AppearanceUserSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";
|
||||
|
|
|
|||
71
res/css/_font-sizes.scss
Normal file
71
res/css/_font-sizes.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
Copyright 2020 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.
|
||||
*/
|
||||
|
||||
$font-1px: 0.067rem;
|
||||
$font-2px: 0.133rem;
|
||||
$font-3px: 0.200rem;
|
||||
$font-4px: 0.267rem;
|
||||
$font-5px: 0.333rem;
|
||||
$font-6px: 0.400rem;
|
||||
$font-7px: 0.467rem;
|
||||
$font-8px: 0.533rem;
|
||||
$font-9px: 0.600rem;
|
||||
$font-10px: 0.667rem;
|
||||
$font-10-4px: 0.693rem;
|
||||
$font-11px: 0.733rem;
|
||||
$font-12px: 0.800rem;
|
||||
$font-13px: 0.867rem;
|
||||
$font-14px: 0.933rem;
|
||||
$font-15px: 1.000rem;
|
||||
$font-16px: 1.067rem;
|
||||
$font-17px: 1.133rem;
|
||||
$font-18px: 1.200rem;
|
||||
$font-19px: 1.267rem;
|
||||
$font-20px: 1.3333333rem;
|
||||
$font-21px: 1.400rem;
|
||||
$font-22px: 1.467rem;
|
||||
$font-23px: 1.533rem;
|
||||
$font-24px: 1.600rem;
|
||||
$font-25px: 1.667rem;
|
||||
$font-26px: 1.733rem;
|
||||
$font-27px: 1.800rem;
|
||||
$font-28px: 1.867rem;
|
||||
$font-29px: 1.933rem;
|
||||
$font-30px: 2.000rem;
|
||||
$font-31px: 2.067rem;
|
||||
$font-32px: 2.133rem;
|
||||
$font-33px: 2.200rem;
|
||||
$font-34px: 2.267rem;
|
||||
$font-35px: 2.333rem;
|
||||
$font-36px: 2.400rem;
|
||||
$font-37px: 2.467rem;
|
||||
$font-38px: 2.533rem;
|
||||
$font-39px: 2.600rem;
|
||||
$font-40px: 2.667rem;
|
||||
$font-41px: 2.733rem;
|
||||
$font-42px: 2.800rem;
|
||||
$font-43px: 2.867rem;
|
||||
$font-44px: 2.933rem;
|
||||
$font-45px: 3.000rem;
|
||||
$font-46px: 3.067rem;
|
||||
$font-47px: 3.133rem;
|
||||
$font-48px: 3.200rem;
|
||||
$font-49px: 3.267rem;
|
||||
$font-50px: 3.333rem;
|
||||
$font-51px: 3.400rem;
|
||||
$font-52px: 3.467rem;
|
||||
$font-88px: 5.887rem;
|
||||
$font-400px: 26.667rem;
|
||||
|
|
@ -14,69 +14,16 @@ 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 logical to read but duplicates a selector to separate the
|
||||
* hiding/showing from the sizing.
|
||||
*/
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
|
||||
/*
|
||||
1. for browsers that support native overlay auto-hiding scrollbars
|
||||
*/
|
||||
.mx_AutoHideScrollbar {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
}
|
||||
/*
|
||||
2. webkit also supports overflow:overlay where the scrollbars don't take any space
|
||||
in the layout but they don't autohide, so do that only on hover
|
||||
*/
|
||||
body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar:hover {
|
||||
overflow-y: overlay;
|
||||
}
|
||||
/*
|
||||
3. as a last fallback, compensate for the scrollbar taking up space in the layout
|
||||
by having giving the child element (.mx_AutoHideScrollbar_offset) a
|
||||
negative right margin of the width of the scrollbar when the container
|
||||
is overflowing. This is what Firefox ends up using. Overflow is detected
|
||||
in javascript, and adds the mx_AutoHideScrollbar_overflow class to the container.
|
||||
This only works in Firefox, which should be fine as this fallback is only needed there.
|
||||
*/
|
||||
body.mx_scrollbar_nooverlay {
|
||||
.mx_AutoHideScrollbar {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.mx_AutoHideScrollbar:hover {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
offset scrollbar width with negative margin-right
|
||||
|
||||
include before and after psuedo-elements here so they can
|
||||
be used to do something interesting like scroll-indicating
|
||||
gradients (see IndicatorScrollBar)
|
||||
*/
|
||||
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset,
|
||||
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::before,
|
||||
.mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after {
|
||||
margin-right: calc(-1 * var(--scrollbar-width));
|
||||
}
|
||||
}
|
||||
|
||||
// style the native scrollbars ...
|
||||
// ... standard css scrollbars (firefox at time of writing)
|
||||
.mx_AutoHideScrollbar {
|
||||
// make any scrollbar grey and thin
|
||||
html {
|
||||
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
|
||||
}
|
||||
// scrollbar-width is not inherited (but -color is, why?!),
|
||||
// so declare it on every element
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
// or fallback for webkit browsers
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
|
|
@ -84,6 +31,37 @@ body.mx_scrollbar_nooverlay {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: $scrollbar-thumb-color;
|
||||
border-radius: 3px;
|
||||
background-color: $scrollbar-thumb-color;
|
||||
}
|
||||
|
||||
// make auto-hide scrollbars not transparent again on hover
|
||||
.mx_AutoHideScrollbar:hover {
|
||||
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background-color: $scrollbar-track-color;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $scrollbar-thumb-color;
|
||||
}
|
||||
}
|
||||
|
||||
// make scrollbars transparent for autohide scrollbars
|
||||
.mx_AutoHideScrollbar {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-y: overlay; // where supported
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
scrollbar-color: transparent transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ limitations under the License.
|
|||
background-color: $menu-bg-color;
|
||||
color: $primary-fg-color;
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
z-index: 5001;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ limitations under the License.
|
|||
border-radius: 3px;
|
||||
border: 1px solid $strong-input-border-color;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
font-size: $font-13px;
|
||||
padding: 9px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,11 +26,16 @@ limitations under the License.
|
|||
|
||||
.mx_CustomRoomTagPanel_scroller {
|
||||
max-height: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_CustomRoomTagPanel .mx_AccessibleButton {
|
||||
margin: 9px auto;
|
||||
margin: 0 auto;
|
||||
width: 40px;
|
||||
padding: 10px 0 9px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_CustomRoomTagPanel .mx_BaseAvatar_image {
|
||||
|
|
@ -39,7 +44,13 @@ limitations under the License.
|
|||
height: 40px;
|
||||
}
|
||||
|
||||
.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected .mx_BaseAvatar_image {
|
||||
border: 3px solid $warning-color;
|
||||
border-radius: 40px;
|
||||
.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected::before {
|
||||
content: '';
|
||||
height: 56px;
|
||||
background-color: $accent-color-alt;
|
||||
width: 5px;
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
top: 2px; // 10 [padding-top] - (56 - 40)/2
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ limitations under the License.
|
|||
|
||||
.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
color: $event-timestamp-color;
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +60,7 @@ limitations under the License.
|
|||
|
||||
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
|
||||
flex: 1 0 0;
|
||||
font-size: 11px;
|
||||
font-size: $font-11px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -80,7 +80,7 @@ limitations under the License.
|
|||
flex: 1 1 auto;
|
||||
line-height: initial;
|
||||
padding: 0px;
|
||||
font-size: 11px;
|
||||
font-size: $font-11px;
|
||||
opacity: 1.0;
|
||||
color: $event-timestamp-color;
|
||||
}
|
||||
|
|
@ -90,7 +90,7 @@ limitations under the License.
|
|||
text-align: right;
|
||||
visibility: visible;
|
||||
position: initial;
|
||||
font-size: 11px;
|
||||
font-size: $font-11px;
|
||||
opacity: 1.0;
|
||||
color: $event-timestamp-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_GroupHeader_editButton::before {
|
||||
mask-image: url('$(res)/img/icons-settings-room.svg');
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
}
|
||||
|
||||
.mx_GroupHeader_shareButton::before {
|
||||
|
|
@ -134,7 +134,7 @@ limitations under the License.
|
|||
overflow: hidden;
|
||||
color: $primary-fg-color;
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
font-size: $font-22px;
|
||||
padding-left: 19px;
|
||||
padding-right: 16px;
|
||||
/* why isn't text-overflow working? */
|
||||
|
|
@ -148,7 +148,7 @@ limitations under the License.
|
|||
max-height: 42px;
|
||||
color: $settings-grey-fg-color;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
font-size: $font-13px;
|
||||
padding-left: 19px;
|
||||
margin-right: 16px;
|
||||
overflow: hidden;
|
||||
|
|
@ -180,10 +180,6 @@ limitations under the License.
|
|||
line-height: 2em;
|
||||
}
|
||||
|
||||
.mx_GroupView > .mx_MainSplit {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_GroupView_body {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
@ -200,7 +196,7 @@ limitations under the License.
|
|||
text-transform: uppercase;
|
||||
color: $h3-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
font-size: $font-13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -230,7 +226,7 @@ limitations under the License.
|
|||
.mx_GroupView_rooms_header_addRow_label {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
line-height: 24px;
|
||||
line-height: $font-24px;
|
||||
padding-left: 28px;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
|
@ -262,7 +258,7 @@ limitations under the License.
|
|||
|
||||
.mx_GroupView_membershipSection_description {
|
||||
/* To match textButton */
|
||||
line-height: 34px;
|
||||
line-height: $font-34px;
|
||||
}
|
||||
|
||||
.mx_GroupView_membershipSection_description .mx_BaseAvatar {
|
||||
|
|
@ -341,8 +337,8 @@ limitations under the License.
|
|||
display: none;
|
||||
}
|
||||
|
||||
.mx_GroupView_body .gm-scroll-view > * {
|
||||
margin: 11px 50px 0px 68px;
|
||||
.mx_GroupView_body .mx_AutoHideScrollbar > * {
|
||||
margin: 11px 50px 50px 68px;
|
||||
}
|
||||
|
||||
.mx_GroupView_groupDesc textarea {
|
||||
|
|
@ -370,7 +366,7 @@ limitations under the License.
|
|||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.mx_GroupView .mx_MemberInfo .gm-scroll-view > :not(.mx_MemberInfo_avatar) {
|
||||
.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar > :not(.mx_MemberInfo_avatar) {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,3 +23,84 @@ limitations under the License.
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx_HomePage_default {
|
||||
text-align: center;
|
||||
|
||||
.mx_HomePage_default_wrapper {
|
||||
padding: 25vh 0 12px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 600;
|
||||
font-size: $font-32px;
|
||||
line-height: $font-44px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 4px;
|
||||
font-weight: 600;
|
||||
font-size: $font-18px;
|
||||
line-height: $font-25px;
|
||||
color: $muted-fg-color;
|
||||
}
|
||||
|
||||
.mx_HomePage_default_buttons {
|
||||
margin: 80px auto 0;
|
||||
width: fit-content;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin
|
||||
|
||||
width: 104px; // 120px - 2* 8px
|
||||
margin: 0 39px; // 55px - 2* 8px
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-radius: 8px;
|
||||
vertical-align: top;
|
||||
word-break: break-word;
|
||||
|
||||
font-weight: 600;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-20px;
|
||||
color: $muted-fg-color;
|
||||
|
||||
&:hover {
|
||||
color: $accent-color;
|
||||
background: rgba(#03b381, 0.06);
|
||||
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 20px;
|
||||
left: 40px; // (120px-40px)/2
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: $muted-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
&.mx_HomePage_button_sendDm::before {
|
||||
mask-image: url('$(res)/img/feather-customised/message-circle.svg');
|
||||
}
|
||||
&.mx_HomePage_button_explore::before {
|
||||
mask-image: url('$(res)/img/feather-customised/explore.svg');
|
||||
}
|
||||
&.mx_HomePage_button_createGroup::before {
|
||||
mask-image: url('$(res)/img/feather-customised/group.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
margin: 4px 0 1px 9px;
|
||||
padding: 9px;
|
||||
padding-left: 42px;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ limitations under the License.
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// move hit area 5px to the right so it doesn't overlap with the timeline scrollbar
|
||||
|
|
|
|||
|
|
@ -76,13 +76,6 @@ limitations under the License.
|
|||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
|
||||
/* Experimental fix for https://github.com/vector-im/vector-web/issues/947
|
||||
and https://github.com/vector-im/vector-web/issues/946.
|
||||
Empirically this stops the MessagePanel's width exploding outwards when
|
||||
gemini is in 'prevented' mode
|
||||
*/
|
||||
overflow-x: auto;
|
||||
|
||||
/* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari
|
||||
needed height 100% all the way down to the HomePage. Height does not
|
||||
have to be auto, empirically.
|
||||
|
|
|
|||
|
|
@ -67,9 +67,6 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.mx_MyGroups_headerCard_header {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -98,12 +95,17 @@ limitations under the License.
|
|||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mx_MyGroups_scrollable {
|
||||
overflow-y: inherit;
|
||||
}
|
||||
|
||||
.mx_MyGroups_placeholder {
|
||||
background-color: $info-plinth-bg-color;
|
||||
color: $info-plinth-fg-color;
|
||||
line-height: 400px;
|
||||
line-height: $font-400px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -147,11 +149,11 @@ limitations under the License.
|
|||
|
||||
.mx_GroupTile_profile .mx_GroupTile_name {
|
||||
margin: 0px;
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
}
|
||||
|
||||
.mx_GroupTile_profile .mx_GroupTile_groupId {
|
||||
font-size: 13px;
|
||||
font-size: $font-13px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
|
@ -159,7 +161,7 @@ limitations under the License.
|
|||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 13px;
|
||||
font-size: $font-13px;
|
||||
max-height: 36px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ limitations under the License.
|
|||
|
||||
.mx_NotificationPanel .mx_EventTile_roomName {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile_roomName a {
|
||||
|
|
@ -54,7 +54,7 @@ limitations under the License.
|
|||
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
|
||||
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
|
||||
color: $primary-fg-color;
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
display: inline;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2020 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.
|
||||
|
|
@ -18,7 +19,7 @@ limitations under the License.
|
|||
overflow-x: hidden;
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
min-width: 250px;
|
||||
min-width: 264px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -95,7 +96,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RightPanel_headerButton_badge {
|
||||
font-size: 8px;
|
||||
font-size: $font-8px;
|
||||
border-radius: 8px;
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2020 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.
|
||||
|
|
@ -45,9 +46,8 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomDirectory_listheader {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
margin-top: 13px;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_searchbox {
|
||||
|
|
@ -64,7 +64,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomDirectory_table {
|
||||
font-size: 14px;
|
||||
font-size: $font-12px;
|
||||
color: $primary-fg-color;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
|
@ -112,6 +112,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomDirectory_name {
|
||||
display: inline-block;
|
||||
font-size: $font-18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -119,13 +120,23 @@ limitations under the License.
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_perm {
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: $font-20px;
|
||||
padding: 0 5px;
|
||||
color: $accent-fg-color;
|
||||
background-color: $rte-room-pill-color;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_topic {
|
||||
cursor: initial;
|
||||
color: $light-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_alias {
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
color: $settings-grey-fg-color;
|
||||
}
|
||||
|
||||
|
|
@ -138,8 +149,8 @@ limitations under the License.
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory p {
|
||||
font-size: 14px;
|
||||
.mx_RoomDirectory > span {
|
||||
font-size: $font-15px;
|
||||
margin-top: 0;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomStatusBar_callBar {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
line-height: $font-50px;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_placeholderIndicator span {
|
||||
|
|
@ -94,7 +94,7 @@ limitations under the License.
|
|||
border-radius: 40px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
line-height: $font-24px;
|
||||
font-size: 0.8em;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
|
|
@ -132,7 +132,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomStatusBar_connectionLostBar_desc {
|
||||
color: $primary-fg-color;
|
||||
font-size: 13px;
|
||||
font-size: $font-13px;
|
||||
opacity: 0.5;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
|
@ -145,7 +145,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomStatusBar_typingBar {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
line-height: $font-50px;
|
||||
|
||||
color: $primary-fg-color;
|
||||
opacity: 0.5;
|
||||
|
|
@ -155,7 +155,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomStatusBar_isAlone {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
line-height: $font-50px;
|
||||
|
||||
color: $primary-fg-color;
|
||||
opacity: 0.5;
|
||||
|
|
@ -174,11 +174,11 @@ limitations under the License.
|
|||
|
||||
.mx_RoomStatusBar_callBar {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
line-height: $font-40px;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_typingBar {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
line-height: $font-40px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,15 +68,15 @@ limitations under the License.
|
|||
text-transform: uppercase;
|
||||
color: $roomsublist-label-fg-color;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_badge > div {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 8px;
|
||||
border-radius: $font-16px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
padding: 0 5px;
|
||||
color: $roomtile-badge-fg-color;
|
||||
background-color: $roomtile-name-color;
|
||||
|
|
@ -166,41 +166,22 @@ limitations under the License.
|
|||
|
||||
// overflow indicators
|
||||
.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
|
||||
&.mx_IndicatorScrollbar_topOverflow::before,
|
||||
&.mx_IndicatorScrollbar_bottomOverflow::after {
|
||||
&.mx_IndicatorScrollbar_topOverflow::before {
|
||||
position: sticky;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
content: "";
|
||||
display: block;
|
||||
z-index: 100;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
|
||||
margin-top: -8px;
|
||||
}
|
||||
&.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_topOverflow::before {
|
||||
top: 0;
|
||||
transition: background-image 0.1s ease-in;
|
||||
background: linear-gradient(to top, $panel-gradient);
|
||||
}
|
||||
|
||||
/*
|
||||
// for now, we remove the bottomOverflow entirely as we don't want to
|
||||
// lose the screen real-estate due to a bg-colored gradient, but we also
|
||||
// don't want to use drop shadows and risk a confusing hierarchy of cards.
|
||||
// so, instead, we hard-clip at the bottom but soft-clip at the top.
|
||||
&.mx_IndicatorScrollbar_bottomOverflow::after {
|
||||
bottom: 0;
|
||||
transition: background-image 0.1s ease-in;
|
||||
margin: 0px -8px;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.0));
|
||||
|
||||
&.mx_IndicatorScrollbar_topOverflow {
|
||||
margin-top: -8px;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ limitations under the License.
|
|||
.mx_RoomView_fileDropTarget {
|
||||
min-width: 0px;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
font-size: $font-18px;
|
||||
text-align: center;
|
||||
|
||||
pointer-events: none;
|
||||
|
|
@ -186,7 +186,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomView_empty {
|
||||
flex: 1 1 auto;
|
||||
font-size: 13px;
|
||||
font-size: $font-13px;
|
||||
padding-left: 3em;
|
||||
padding-right: 3em;
|
||||
margin-right: 20px;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ limitations under the License.
|
|||
cursor: pointer;
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
|
||||
margin-bottom: 6px;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ limitations under the License.
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.mx_TagPanel_items_selected {
|
||||
|
|
@ -57,6 +58,7 @@ limitations under the License.
|
|||
|
||||
.mx_TagPanel .mx_TagPanel_scroller {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagPanel_tagTileContainer {
|
||||
|
|
@ -68,7 +70,7 @@ limitations under the License.
|
|||
}
|
||||
.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
|
||||
height: 40px;
|
||||
padding: 5px 0 4px 0;
|
||||
padding: 10px 0 9px 0;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile {
|
||||
|
|
@ -82,21 +84,39 @@ limitations under the License.
|
|||
// opacity: 1;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
|
||||
background-color: $accent-color;
|
||||
border-radius: 40px;
|
||||
|
||||
/* In case this is a "initial" avatar */
|
||||
display: block;
|
||||
.mx_TagPanel .mx_TagTile_plus {
|
||||
margin-bottom: 12px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: $roomheader-addroom-bg-color;
|
||||
position: relative;
|
||||
/* overwrite mx_RoleButton inline-block */
|
||||
display: block !important;
|
||||
|
||||
&::before {
|
||||
background-color: $roomheader-addroom-fg-color;
|
||||
mask-image: url('$(res)/img/feather-customised/plus.svg');
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile_selected .mx_BaseAvatar_image {
|
||||
border: 3px solid $accent-color;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
box-sizing: border-box;
|
||||
.mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
|
||||
content: '';
|
||||
height: calc(100% + 16px);
|
||||
background-color: $accent-color;
|
||||
width: 5px;
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
top: -8px; // (16px from height / 2)
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
|
||||
|
|
@ -117,9 +137,9 @@ limitations under the License.
|
|||
top: -8px;
|
||||
border-radius: 8px;
|
||||
background-color: $neutral-badge-color;
|
||||
color: #ffffff;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
font-size: $font-10px;
|
||||
text-align: center;
|
||||
padding-top: 1px;
|
||||
padding-left: 4px;
|
||||
|
|
@ -137,7 +157,7 @@ limitations under the License.
|
|||
border-radius: 8px;
|
||||
color: $accent-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
padding: 0 5px;
|
||||
background-color: $roomtile-name-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
/*
|
||||
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_TagPanelButtons {
|
||||
background-color: $tagpanel-bg-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 17px 0 3px 0;
|
||||
}
|
||||
|
||||
.mx_TagPanelButtons > .mx_GroupsButton::before {
|
||||
mask: url('$(res)/img/feather-customised/users.svg');
|
||||
mask-position: center 11px;
|
||||
}
|
||||
|
||||
.mx_TagPanelButtons > .mx_TagPanelButtons_report::before {
|
||||
mask: url('$(res)/img/feather-customised/life-buoy.svg');
|
||||
mask-position: center 9px;
|
||||
}
|
||||
|
||||
.mx_TagPanelButtons > .mx_AccessibleButton {
|
||||
margin-bottom: 12px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: $tagpanel-button-color;
|
||||
position: relative;
|
||||
/* overwrite mx_RoleButton inline-block */
|
||||
display: block !important;
|
||||
|
||||
&::before {
|
||||
background-color: $tagpanel-bg-color;
|
||||
mask-repeat: no-repeat;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -28,8 +28,8 @@ limitations under the License.
|
|||
margin: 0 4px;
|
||||
grid-row: 2 / 4;
|
||||
grid-column: 1;
|
||||
background-color: white;
|
||||
box-shadow: 0px 4px 12px $menu-box-shadow-color;
|
||||
background-color: $dark-panel-bg-color;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -37,22 +37,21 @@ limitations under the License.
|
|||
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;
|
||||
background-color: $dark-panel-bg-color;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 20px 1fr;
|
||||
column-gap: 10px;
|
||||
grid-template-columns: 22px 1fr;
|
||||
column-gap: 8px;
|
||||
row-gap: 4px;
|
||||
padding: 8px;
|
||||
padding-right: 16px;
|
||||
|
||||
&.mx_Toast_hasIcon {
|
||||
&::after {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
mask-size: 100%;
|
||||
|
|
@ -64,17 +63,49 @@ limitations under the License.
|
|||
background-color: $primary-fg-color;
|
||||
}
|
||||
|
||||
h2, .mx_Toast_body {
|
||||
&.mx_Toast_icon_verification_warning::after {
|
||||
background-image: url("$(res)/img/e2e/warning.svg");
|
||||
}
|
||||
|
||||
.mx_Toast_title, .mx_Toast_body {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
&:not(.mx_Toast_hasIcon) {
|
||||
padding-left: 12px;
|
||||
|
||||
.mx_Toast_title {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Toast_title,
|
||||
.mx_Toast_description {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.mx_Toast_title {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
h2 {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1;
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
font-weight: 600;
|
||||
display: inline;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span {
|
||||
padding-left: 8px;
|
||||
float: right;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-22px;
|
||||
color: $muted-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Toast_body {
|
||||
|
|
@ -83,16 +114,34 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Toast_buttons {
|
||||
float: right;
|
||||
display: flex;
|
||||
|
||||
.mx_FormButton {
|
||||
min-width: 96px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Toast_description {
|
||||
max-width: 400px;
|
||||
max-width: 272px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin: 4px 0 11px 0;
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Toast_deviceID {
|
||||
font-size: $font-10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ limitations under the License.
|
|||
|
||||
.mx_TopLeftMenuButton_name {
|
||||
margin: 0 7px;
|
||||
font-size: 18px;
|
||||
font-size: $font-18px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
|
@ -43,7 +43,7 @@ limitations under the License.
|
|||
margin: 0 7px;
|
||||
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
|
||||
mask-repeat: no-repeat;
|
||||
width: 10px;
|
||||
width: $font-22px;
|
||||
height: 6px;
|
||||
background-color: $roomsublist-label-fg-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ limitations under the License.
|
|||
|
||||
.mx_ViewSource pre {
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
|
|
|
|||
100
res/css/structures/auth/_CompleteSecurity.scss
Normal file
100
res/css/structures/auth/_CompleteSecurity.scss
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
/*
|
||||
Copyright 2020 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_CompleteSecurity_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_CompleteSecurity_headerIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_CompleteSecurity_clients {
|
||||
width: max-content;
|
||||
margin: 36px auto 0;
|
||||
|
||||
.mx_CompleteSecurity_clients_desktop, .mx_CompleteSecurity_clients_mobile {
|
||||
position: relative;
|
||||
width: 160px;
|
||||
text-align: center;
|
||||
padding-top: 64px;
|
||||
display: inline-block;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
left: 56px;
|
||||
top: 0;
|
||||
background-color: $muted-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CompleteSecurity_clients_desktop {
|
||||
margin-right: 56px;
|
||||
}
|
||||
|
||||
.mx_CompleteSecurity_clients_desktop::before {
|
||||
mask-image: url('$(res)/img/feather-customised/monitor.svg');
|
||||
}
|
||||
|
||||
.mx_CompleteSecurity_clients_mobile::before {
|
||||
mask-image: url('$(res)/img/feather-customised/smartphone.svg');
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 16px;
|
||||
font-size: $font-12px;
|
||||
color: $muted-fg-color;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CompleteSecurity_heroIcon {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mx_CompleteSecurity_body {
|
||||
font-size: $font-15px;
|
||||
}
|
||||
|
||||
.mx_CompleteSecurity_waiting {
|
||||
color: $notice-secondary-color;
|
||||
}
|
||||
|
||||
.mx_CompleteSecurity_actionRow {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: $font-28px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
margin-inline-start: 18px;
|
||||
|
||||
&.warning {
|
||||
color: $warning-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -89,3 +89,13 @@ limitations under the License.
|
|||
.mx_Login_underlinedServerName {
|
||||
border-bottom: 1px dashed $accent-color;
|
||||
}
|
||||
|
||||
div.mx_AccessibleButton_kind_link.mx_Login_forgot {
|
||||
// style it as a link
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
|
||||
&.mx_AccessibleButton_disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/*
|
||||
Copyright 2019 New Vector Ltd
|
||||
Copyright 2020 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.
|
||||
|
|
@ -16,22 +17,22 @@ limitations under the License.
|
|||
|
||||
.mx_AuthBody {
|
||||
width: 500px;
|
||||
font-size: $font-12px;
|
||||
color: $authpage-secondary-color;
|
||||
background-color: $authpage-body-bg-color;
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding: 25px 60px;
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
color: $authpage-secondary-color;
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-size: $font-24px;
|
||||
font-weight: 600;
|
||||
margin-top: 8px;
|
||||
color: $authpage-primary-color;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
font-weight: 600;
|
||||
color: $authpage-primary-color;
|
||||
}
|
||||
|
|
@ -97,7 +98,7 @@ limitations under the License.
|
|||
|
||||
.mx_AuthBody_editServerDetails {
|
||||
padding-left: 1em;
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
@ -118,6 +119,24 @@ limitations under the License.
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_AuthBody_paddedFooter {
|
||||
height: 80px; // height of the submit button + register link
|
||||
padding-top: 28px;
|
||||
text-align: center;
|
||||
|
||||
.mx_AuthBody_paddedFooter_title {
|
||||
margin-top: 16px;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
}
|
||||
|
||||
.mx_AuthBody_paddedFooter_subtitle {
|
||||
margin-top: 8px;
|
||||
font-size: $font-10px;
|
||||
line-height: $font-14px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AuthBody_changeFlow {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
|
@ -127,27 +146,3 @@ limitations under the License.
|
|||
.mx_AuthBody_spinner {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.mx_AuthBody_passwordScore {
|
||||
width: 100%;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
|
||||
&::-moz-progress-bar {
|
||||
border-radius: 2px;
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
&::-webkit-progress-bar,
|
||||
&::-webkit-progress-value {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ limitations under the License.
|
|||
|
||||
cursor: pointer;
|
||||
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
padding: 0 11px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ limitations under the License.
|
|||
.mx_AuthFooter {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
opacity: 0.72;
|
||||
padding: 20px 0;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
|
||||
|
|
|
|||
42
res/css/views/auth/_CompleteSecurityBody.scss
Normal file
42
res/css/views/auth/_CompleteSecurityBody.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/*
|
||||
Copyright 2019 New Vector Ltd
|
||||
Copyright 2020 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_CompleteSecurityBody {
|
||||
width: 600px;
|
||||
color: $authpage-primary-color;
|
||||
background-color: $authpage-body-bg-color;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
h2 {
|
||||
font-size: $font-24px;
|
||||
font-weight: 600;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $font-14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:hover,
|
||||
a:visited {
|
||||
@mixin mx_Dialog_link;
|
||||
}
|
||||
}
|
||||
|
|
@ -60,3 +60,14 @@ limitations under the License.
|
|||
.mx_InteractiveAuthEntryComponents_passwordSection {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.mx_InteractiveAuthEntryComponents_sso_buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ limitations under the License.
|
|||
|
||||
.mx_AuthBody_language .mx_Dropdown_input {
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
font-weight: 600;
|
||||
color: $authpage-lang-color;
|
||||
}
|
||||
|
|
|
|||
55
res/css/views/auth/_PassphraseField.scss
Normal file
55
res/css/views/auth/_PassphraseField.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
/*
|
||||
Copyright 2020 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.
|
||||
*/
|
||||
|
||||
$PassphraseStrengthHigh: $accent-color;
|
||||
$PassphraseStrengthMedium: $username-variant5-color;
|
||||
$PassphraseStrengthLow: $notice-primary-color;
|
||||
|
||||
@define-mixin ProgressBarColour $colour {
|
||||
color: $colour;
|
||||
&::-moz-progress-bar {
|
||||
background-color: $colour;
|
||||
}
|
||||
&::-webkit-progress-value {
|
||||
background-color: $colour;
|
||||
}
|
||||
}
|
||||
|
||||
progress.mx_PassphraseField_progress {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
|
||||
border-radius: 2px;
|
||||
&::-moz-progress-bar {
|
||||
border-radius: 2px;
|
||||
}
|
||||
&::-webkit-progress-bar,
|
||||
&::-webkit-progress-value {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@mixin ProgressBarColour $PassphraseStrengthLow;
|
||||
&[value="2"], &[value="3"] {
|
||||
@mixin ProgressBarColour $PassphraseStrengthMedium;
|
||||
}
|
||||
&[value="4"] {
|
||||
@mixin ProgressBarColour $PassphraseStrengthHigh;
|
||||
}
|
||||
}
|
||||
|
|
@ -65,5 +65,5 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ServerTypeSelector_description {
|
||||
font-size: 10px;
|
||||
font-size: $font-10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
object-fit: cover;
|
||||
border-radius: 40px;
|
||||
vertical-align: top;
|
||||
background-color: $avatar-bg-color;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ limitations under the License.
|
|||
.mx_MessageComposer_avatar .mx_BaseAvatar {
|
||||
padding: 2px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 15px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_avatar .mx_BaseAvatar_initial {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MessageContextMenu_field {
|
||||
display: block;
|
||||
padding: 3px 6px 3px 6px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ limitations under the License.
|
|||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 16px;
|
||||
line-height: $font-16px;
|
||||
}
|
||||
|
||||
.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet {
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ input.mx_StatusMessageContextMenu_message {
|
|||
.mx_StatusMessageContextMenu_clear {
|
||||
@mixin mx_DialogButton;
|
||||
align-self: start;
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
padding: 6px 1em;
|
||||
border: 1px solid transparent;
|
||||
margin-right: 10px;
|
||||
|
|
@ -61,5 +61,5 @@ input.mx_StatusMessageContextMenu_message {
|
|||
}
|
||||
|
||||
.mx_StatusMessageContextMenu_actionContainer .mx_Spinner {
|
||||
justify-content: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ limitations under the License.
|
|||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 16px;
|
||||
line-height: $font-16px;
|
||||
}
|
||||
|
||||
.mx_TagTileContextMenu_item object {
|
||||
|
|
|
|||
|
|
@ -19,12 +19,12 @@ limitations under the License.
|
|||
border-radius: 4px;
|
||||
|
||||
.mx_TopLeftMenu_greyedText {
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_TopLeftMenu_upgradeLink {
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
|
||||
img {
|
||||
margin-left: 5px;
|
||||
|
|
@ -53,6 +53,10 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/feather-customised/home.svg');
|
||||
}
|
||||
|
||||
.mx_TopLeftMenu_icon_help::after {
|
||||
mask-image: url('$(res)/img/feather-customised/life-buoy.svg');
|
||||
}
|
||||
|
||||
.mx_TopLeftMenu_icon_settings::after {
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
}
|
||||
|
|
@ -68,10 +72,10 @@ limitations under the License.
|
|||
.mx_AccessibleButton::after {
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: 0 center;
|
||||
mask-size: 16px;
|
||||
mask-size: $font-16px;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: $font-16px;
|
||||
height: $font-16px;
|
||||
content: "";
|
||||
top: 5px;
|
||||
left: 14px;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ limitations under the License.
|
|||
.mx_AddressPickerDialog_input,
|
||||
.mx_AddressPickerDialog_input:focus {
|
||||
height: 26px;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
font-family: $font-family;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
|
|
@ -50,7 +50,7 @@ limitations under the License.
|
|||
.mx_AddressPickerDialog_inputContainer {
|
||||
border-radius: 3px;
|
||||
border: solid 1px $input-border-color;
|
||||
line-height: 36px;
|
||||
line-height: $font-36px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
padding-top: 1px;
|
||||
|
|
|
|||
|
|
@ -26,22 +26,22 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ConfirmUserActionDialog_name {
|
||||
font-size: 18px;
|
||||
font-size: $font-18px;
|
||||
}
|
||||
|
||||
.mx_ConfirmUserActionDialog_userId {
|
||||
font-size: 13px;
|
||||
font-size: $font-13px;
|
||||
}
|
||||
|
||||
.mx_ConfirmUserActionDialog_reasonField {
|
||||
font-family: $font-family;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
|
||||
border-radius: 3px;
|
||||
border: solid 1px $input-border-color;
|
||||
line-height: 36px;
|
||||
line-height: $font-36px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
padding-top: 1px;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_CreateGroupDialog_input {
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 9px;
|
||||
|
|
@ -44,7 +44,7 @@ limitations under the License.
|
|||
.mx_CreateGroupDialog_prefix,
|
||||
.mx_CreateGroupDialog_suffix {
|
||||
padding: 0px 5px;
|
||||
line-height: 37px;
|
||||
line-height: $font-37px;
|
||||
background-color: $input-darker-bg-color;
|
||||
border: 1px solid $input-border-color;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_CreateRoomDialog_details {
|
||||
margin-top: 15px;
|
||||
|
||||
.mx_CreateRoomDialog_details_summary {
|
||||
outline: none;
|
||||
list-style: none;
|
||||
|
|
@ -30,7 +32,7 @@ limitations under the License.
|
|||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
align-items: flex-start;
|
||||
margin: 5px 0;
|
||||
|
||||
input[type=checkbox] {
|
||||
|
|
@ -49,7 +51,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_CreateRoomDialog_input {
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 9px;
|
||||
|
|
@ -71,11 +73,19 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_CreateRoomDialog {
|
||||
|
||||
&.mx_Dialog_fixedWidth {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
.mx_Dialog_content {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
p,
|
||||
.mx_Field_input label {
|
||||
color: $muted-fg-color;
|
||||
}
|
||||
|
||||
.mx_SettingsFlag {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -90,5 +100,18 @@ limitations under the License.
|
|||
flex: 0 0 auto;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.mx_CreateRoomDialog_topic {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.mx_Dialog_content > .mx_SettingsFlag {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 85px 0 0;
|
||||
font-size: $font-12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,11 +68,11 @@ limitations under the License.
|
|||
width: 240px;
|
||||
color: $input-fg-color;
|
||||
font-family: $font-family;
|
||||
font-size: 16px;
|
||||
font-size: $font-16px;
|
||||
}
|
||||
|
||||
.mx_DevTools_textarea {
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
max-width: 684px;
|
||||
min-height: 250px;
|
||||
padding: 10px;
|
||||
|
|
@ -189,3 +189,37 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DevTools_VerificationRequest {
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 3px;
|
||||
padding: 1px 5px;
|
||||
margin-bottom: 6px;
|
||||
font-family: $monospace-font-family;
|
||||
|
||||
dl {
|
||||
display: grid;
|
||||
grid-template-columns: max-content auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
dd:empty {
|
||||
color: #666666;
|
||||
&::after {
|
||||
content: "(empty)";
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
dt::after {
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
228
res/css/views/dialogs/_InviteDialog.scss
Normal file
228
res/css/views/dialogs/_InviteDialog.scss
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
/*
|
||||
Copyright 2019, 2020 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_InviteDialog_addressBar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.mx_InviteDialog_editor {
|
||||
flex: 1;
|
||||
width: 100%; // Needed to make the Field inside grow
|
||||
background-color: $user-tile-hover-bg-color;
|
||||
border-radius: 4px;
|
||||
min-height: 25px;
|
||||
padding-left: 8px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
.mx_InviteDialog_userTile {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
// Using a textarea for this element, to circumvent autofill
|
||||
// Mostly copied from AddressPickerDialog
|
||||
textarea,
|
||||
textarea:focus {
|
||||
height: 34px;
|
||||
line-height: $font-34px;
|
||||
font-size: $font-14px;
|
||||
padding-left: 12px;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
outline: 0 !important;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
word-wrap: nowrap;
|
||||
|
||||
// Roughly fill about 2/5ths of the available space. This is to try and 'fill' the
|
||||
// remaining space after a bunch of pills, but is a bit hacky. Ideally we'd have
|
||||
// support for "fill remaining width", but traditional tricks don't work with what
|
||||
// we're pushing into this "field". Flexbox just makes things worse. The theory is
|
||||
// that users won't need more than about 2/5ths of the input to find the person
|
||||
// they're looking for.
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog_goButton {
|
||||
min-width: 48px;
|
||||
margin-left: 10px;
|
||||
height: 25px;
|
||||
line-height: $font-25px;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_buttonAndSpinner {
|
||||
.mx_Spinner {
|
||||
// Width and height are required to trick the layout engine.
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog_section {
|
||||
padding-bottom: 10px;
|
||||
|
||||
h3 {
|
||||
font-size: $font-12px;
|
||||
color: $muted-fg-color;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog_roomTile {
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: $user-tile-hover-bg-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
* {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_roomTile_avatarStack {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
||||
& > * {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog_roomTile_selected {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 36px;
|
||||
background-color: $username-variant1-color;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
mask-image: url("$(res)/img/feather-customised/check.svg");
|
||||
mask-size: 100%;
|
||||
mask-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 6px; // 50%
|
||||
left: 6px; // 50%
|
||||
background-color: #ffffff; // this is fine without a var because it's for both themes
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog_roomTile_name {
|
||||
font-weight: 600;
|
||||
font-size: $font-14px;
|
||||
color: $primary-fg-color;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_roomTile_userId {
|
||||
font-size: $font-12px;
|
||||
color: $muted-fg-color;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_roomTile_time {
|
||||
text-align: right;
|
||||
font-size: $font-12px;
|
||||
color: $muted-fg-color;
|
||||
float: right;
|
||||
line-height: $font-36px; // Height of the avatar to keep the time vertically aligned
|
||||
}
|
||||
|
||||
.mx_InviteDialog_roomTile_highlight {
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
// Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog.
|
||||
.mx_InviteDialog_userTile {
|
||||
margin-right: 8px;
|
||||
|
||||
.mx_InviteDialog_userTile_pill {
|
||||
background-color: $username-variant1-color;
|
||||
border-radius: 12px;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: $font-24px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
color: #ffffff; // this is fine without a var because it's for both themes
|
||||
|
||||
.mx_InviteDialog_userTile_avatar {
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
img.mx_InviteDialog_userTile_avatar {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_userTile_name {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_userTile_threepidAvatar {
|
||||
background-color: #ffffff; // this is fine without a var because it's for both themes
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog_userTile_remove {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InviteDialog {
|
||||
// Prevent the dialog from jumping around randomly when elements change.
|
||||
height: 590px;
|
||||
padding-left: 20px; // the design wants some padding on the left
|
||||
}
|
||||
|
||||
.mx_InviteDialog_userSections {
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
padding-right: 45px;
|
||||
height: 455px; // mx_InviteDialog's height minus some for the upper elements
|
||||
}
|
||||
|
||||
// Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
|
||||
// for the user section gets weird.
|
||||
.mx_InviteDialog_helpText,
|
||||
.mx_InviteDialog_addressBar {
|
||||
margin-right: 45px;
|
||||
}
|
||||
65
res/css/views/dialogs/_KeyboardShortcutsDialog.scss
Normal file
65
res/css/views/dialogs/_KeyboardShortcutsDialog.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/*
|
||||
Copyright 2020 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_KeyboardShortcutsDialog {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
flex-direction: column;
|
||||
margin-bottom: -50px;
|
||||
max-height: 1100px; // XXX: this may need adjusting when adding new shortcuts
|
||||
|
||||
.mx_KeyboardShortcutsDialog_category {
|
||||
width: 33.3333%; // 3 columns
|
||||
margin: 0 0 40px;
|
||||
|
||||
& > div {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 15px 0 5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
background-color: $reaction-row-button-bg-color;
|
||||
margin-right: 5px;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border: 1px solid $kbd-border-color;
|
||||
box-shadow: 0 2px $kbd-border-color;
|
||||
margin-bottom: 4px;
|
||||
text-transform: capitalize;
|
||||
|
||||
& + kbd {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_KeyboardShortcutsDialog_inline div {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@ limitations under the License.
|
|||
|
||||
.mx_MessageEditHistoryDialog_edits {
|
||||
list-style-type: none;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
padding: 0;
|
||||
color: $primary-fg-color;
|
||||
|
||||
|
|
@ -60,7 +60,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MessageActionBar .mx_AccessibleButton {
|
||||
font-size: 10px;
|
||||
font-size: $font-10px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2016 OpenMarket Ltd
|
||||
Copyright 2020 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,21 +14,24 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_EncryptedEventDialog .mx_DeviceVerifyButtons {
|
||||
float: right;
|
||||
padding: 0px;
|
||||
margin-right: 42px;
|
||||
.mx_NewSessionReviewDialog_header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {
|
||||
@mixin mx_DialogButton;
|
||||
background-color: $primary-bg-color;
|
||||
color: $accent-color;
|
||||
.mx_NewSessionReviewDialog_headerIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_EncryptedEventDialog button {
|
||||
margin-top: 0px;
|
||||
.mx_NewSessionReviewDialog_deviceName {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_NewSessionReviewDialog_deviceID {
|
||||
font-size: $font-12px;
|
||||
color: $notice-secondary-color;
|
||||
}
|
||||
|
|
@ -29,6 +29,15 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/feather-customised/users-sm.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_notificationsIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/notifications.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_bridgesIcon::before {
|
||||
// This icon is pants, please improve :)
|
||||
mask-image: url('$(res)/img/feather-customised/bridge.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_warningIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
|
||||
}
|
||||
|
|
@ -50,3 +59,4 @@ limitations under the License.
|
|||
mask-size: 36px;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
112
res/css/views/dialogs/_RoomSettingsDialogBridges.scss
Normal file
112
res/css/views/dialogs/_RoomSettingsDialogBridges.scss
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
/*
|
||||
Copyright 2020 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_RoomSettingsDialog_BridgeList {
|
||||
padding: 0;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_BridgeList li {
|
||||
list-style-type: none;
|
||||
padding: 5px;
|
||||
margin-bottom: 8px;
|
||||
border-width: 1px 1px;
|
||||
border-color: $primary-hairline-color;
|
||||
border-style: solid;
|
||||
border-radius: 5px;
|
||||
|
||||
.column-icon {
|
||||
float: left;
|
||||
padding-right: 10px;
|
||||
|
||||
* {
|
||||
border-radius: 5px;
|
||||
border: 1px solid $input-darker-bg-color;
|
||||
}
|
||||
|
||||
.noProtocolIcon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: $input-darker-bg-color;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.protocol-icon {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
img {
|
||||
border-radius: 5px;
|
||||
border-width: 1px 1px;
|
||||
border-color: $primary-hairline-color;
|
||||
}
|
||||
span {
|
||||
/* Correct letter placement */
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column-data {
|
||||
display: inline-block;
|
||||
width: 85%;
|
||||
|
||||
> h3 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
font-size: 16pt;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.workspace-channel-details {
|
||||
color: $primary-fg-color;
|
||||
font-weight: 600;
|
||||
|
||||
.channel {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_showMore {
|
||||
display: block;
|
||||
text-align: left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
color: $muted-fg-color;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.metadata.visible {
|
||||
overflow-y: visible;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@ limitations under the License.
|
|||
padding: 9px;
|
||||
color: $input-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
margin-bottom: 10px;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ limitations under the License.
|
|||
padding: 9px;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ limitations under the License.
|
|||
padding: 9px;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
max-width: 280px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ limitations under the License.
|
|||
margin-left: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-repeat: none;
|
||||
}
|
||||
|
||||
.mx_ShareDialog_split {
|
||||
|
|
@ -64,9 +65,6 @@ limitations under the License.
|
|||
|
||||
.mx_ShareDialog_qrcode_container {
|
||||
float: left;
|
||||
background-color: #ffffff;
|
||||
padding: 5px; // makes qr code more readable in dark theme
|
||||
border-radius: 5px;
|
||||
height: 256px;
|
||||
width: 256px;
|
||||
margin-right: 64px;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_TermsDialog_termsTable {
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,14 +14,6 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
// CSS voodoo to support a gemini-scrollbar for the contents of the dialog
|
||||
.mx_Dialog_unknownDevice .mx_Dialog {
|
||||
// ideally we'd shrink the height to fit when needed, but in practice this
|
||||
// is a pain in the ass. plus might as well make the dialog big given how
|
||||
// important it is.
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -35,7 +27,7 @@ limitations under the License.
|
|||
// userid
|
||||
.mx_UnknownDeviceDialog p {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
font-size: $font-16px;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {
|
||||
|
|
@ -44,6 +36,7 @@ limitations under the License.
|
|||
|
||||
.mx_UnknownDeviceDialog .mx_Dialog_content {
|
||||
margin-bottom: 24px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog_deviceList > li {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,10 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_appearanceIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/brush.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_voiceIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/phone.svg');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,18 +32,7 @@ limitations under the License.
|
|||
|
||||
.mx_CreateKeyBackupDialog_passPhraseContainer {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.mx_CreateKeyBackupDialog_passPhraseHelp {
|
||||
flex: 1;
|
||||
height: 85px;
|
||||
margin-left: 20px;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.mx_CreateKeyBackupDialog_passPhraseHelp progress {
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.mx_CreateKeyBackupDialog_passPhraseInput {
|
||||
|
|
@ -85,3 +74,9 @@ limitations under the License.
|
|||
flex: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_CreateKeyBackupDialog {
|
||||
details .mx_AccessibleButton {
|
||||
margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,3 +32,9 @@ limitations under the License.
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.mx_RestoreKeyBackupDialog_content > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 110px; /* Empirically measured */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
Copyright 2018 New Vector Ltd
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2019, 2020 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,6 +15,34 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_CreateSecretStorageDialog {
|
||||
// Why you ask? Because CompleteSecurityBody is 600px so this is the width
|
||||
// we end up when in there, but when in our own dialog we set our own width
|
||||
// so need to fix it to something sensible as otherwise we'd end up either
|
||||
// really wide or really narrow depending on the phase. I bet you wish you
|
||||
// never asked.
|
||||
width: 560px;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
details .mx_AccessibleButton {
|
||||
margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog .mx_Dialog_title {
|
||||
/* TODO: Consider setting this for all dialog titles. */
|
||||
margin-bottom: 1em;
|
||||
|
|
@ -22,7 +50,7 @@ limitations under the License.
|
|||
|
||||
.mx_CreateSecretStorageDialog_primaryContainer {
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
|
||||
padding: 20px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_primaryContainer::after {
|
||||
|
|
@ -33,30 +61,15 @@ limitations under the License.
|
|||
|
||||
.mx_CreateSecretStorageDialog_passPhraseContainer {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_passPhraseHelp {
|
||||
flex: 1;
|
||||
height: 85px;
|
||||
margin-left: 20px;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_passPhraseHelp progress {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_passPhraseInput {
|
||||
flex: none;
|
||||
width: 250px;
|
||||
border: 1px solid $accent-color;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin-bottom: 1em;
|
||||
.mx_Field.mx_CreateSecretStorageDialog_passPhraseField {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_passPhraseMatch {
|
||||
width: 200px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -82,6 +95,10 @@ limitations under the License.
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyButtons button {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2020 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,70 +15,152 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_NetworkDropdown {
|
||||
height: 32px;
|
||||
position: relative;
|
||||
}
|
||||
width: max-content;
|
||||
padding-right: 32px;
|
||||
margin-left: auto;
|
||||
margin-right: 9px;
|
||||
margin-top: 12px;
|
||||
|
||||
.mx_NetworkDropdown_input {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $strong-input-border-color;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_arrow {
|
||||
border-color: $primary-fg-color transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 5px 0;
|
||||
display: block;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 16px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_networkoption {
|
||||
height: 37px;
|
||||
line-height: 37px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_networkoption img {
|
||||
margin: 5px;
|
||||
width: 25px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:focus {
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
.mx_AccessibleButton {
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_menu {
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
top: 100%;
|
||||
z-index: 2;
|
||||
min-width: 204px;
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $accent-color;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $dialog-close-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
|
||||
background-color: $focus-bg-color;
|
||||
max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_menu_network {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_server {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid $input-darker-fg-color;
|
||||
|
||||
.mx_NetworkDropdown_server_title {
|
||||
padding: 0 10px;
|
||||
font-size: $font-15px;
|
||||
font-weight: 600;
|
||||
line-height: $font-20px;
|
||||
margin-bottom: 4px;
|
||||
position: relative;
|
||||
|
||||
// remove server button
|
||||
.mx_AccessibleButton {
|
||||
position: absolute;
|
||||
display: inline;
|
||||
right: 10px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-top: 2px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/feather-customised/x.svg');
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_server_subtitle {
|
||||
padding: 0 10px;
|
||||
font-size: $font-10px;
|
||||
line-height: $font-14px;
|
||||
margin-top: -4px;
|
||||
margin-bottom: 4px;
|
||||
color: $muted-fg-color;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_server_network {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-16px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&[aria-checked=true]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
right: 10px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
background-color: $input-valid-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_server_add,
|
||||
.mx_NetworkDropdown_server_network {
|
||||
&:hover {
|
||||
background-color: $header-panel-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_server_add {
|
||||
padding: 16px 10px 16px 32px;
|
||||
position: relative;
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 7px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/feather-customised/plus.svg');
|
||||
background-color: $muted-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_handle {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
right: -28px; // - (24 + 4)
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_handle_server {
|
||||
color: $muted-fg-color;
|
||||
font-size: $font-12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_dialog .mx_Dialog {
|
||||
width: 45vw;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ limitations under the License.
|
|||
text-align: center;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_primary {
|
||||
|
|
@ -36,12 +36,20 @@ limitations under the License.
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_primary_outline {
|
||||
color: $button-primary-bg-color;
|
||||
background-color: $button-secondary-bg-color;
|
||||
border: 1px solid $button-primary-bg-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_secondary {
|
||||
color: $accent-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
|
||||
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,
|
||||
.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +68,14 @@ limitations under the License.
|
|||
background-color: $button-danger-bg-color;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
|
||||
.mx_AccessibleButton_kind_danger_outline {
|
||||
color: $button-danger-bg-color;
|
||||
background-color: $button-secondary-bg-color;
|
||||
border: 1px solid $button-danger-bg-color;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled,
|
||||
.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
|
||||
color: $button-danger-disabled-fg-color;
|
||||
background-color: $button-danger-disabled-bg-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@ limitations under the License.
|
|||
border-radius: 3px;
|
||||
background-color: rgba(74, 73, 74, 0.1);
|
||||
border: solid 1px $input-border-color;
|
||||
line-height: 26px;
|
||||
line-height: $font-26px;
|
||||
color: $primary-fg-color;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
font-weight: normal;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ limitations under the License.
|
|||
display: flex;
|
||||
padding-left: 9px;
|
||||
padding-right: 9px;
|
||||
margin: 0 5px 0 0 !important;
|
||||
}
|
||||
|
||||
.mx_DirectorySearchBox_joinButton {
|
||||
|
|
@ -33,7 +32,7 @@ limitations under the License.
|
|||
background-repeat: no-repeat;
|
||||
text-indent: 18px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,10 +29,14 @@ limitations under the License.
|
|||
position: relative;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $strong-input-border-color;
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mx_Dropdown_input.mx_AccessibleButton_disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.mx_Dropdown_input:focus {
|
||||
border-color: $input-focused-border-color;
|
||||
}
|
||||
|
|
@ -53,7 +57,7 @@ limitations under the License.
|
|||
|
||||
.mx_Dropdown_option {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
line-height: $font-35px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
|
@ -63,6 +67,8 @@ limitations under the License.
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_Dropdown_option div {
|
||||
|
|
@ -71,12 +77,18 @@ limitations under the License.
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_Dropdown_option img {
|
||||
.mx_Dropdown_option img,
|
||||
.mx_Dropdown_option .mx_Dropdown_option_emoji {
|
||||
margin: 5px;
|
||||
width: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_Dropdown_option_emoji {
|
||||
font-size: $font-16px;
|
||||
line-height: $font-16px;
|
||||
}
|
||||
|
||||
input.mx_Dropdown_option,
|
||||
input.mx_Dropdown_option:focus {
|
||||
font-weight: normal;
|
||||
|
|
|
|||
|
|
@ -20,14 +20,21 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EditableItem {
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.mx_EditableItem_delete {
|
||||
order: 3;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
mask-image: url('$(res)/img/feather-customised/cancel.svg');
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $warning-color;
|
||||
mask-size: 100%;
|
||||
}
|
||||
|
||||
.mx_EditableItem_email {
|
||||
|
|
@ -36,12 +43,22 @@ limitations under the License.
|
|||
|
||||
.mx_EditableItem_promptText {
|
||||
margin-right: 10px;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.mx_EditableItem_confirmBtn {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.mx_EditableItem_item {
|
||||
flex: auto 1 0;
|
||||
order: 1;
|
||||
width: calc(100% - 14px); // leave space for the remove button
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mx_EditableItemList_label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_TextualEvent.mx_EventListSummary_summary {
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ limitations under the License.
|
|||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
padding-top: 8px;
|
||||
line-height: 12px;
|
||||
line-height: $font-12px;
|
||||
}
|
||||
|
||||
.mx_EventListSummary_avatars .mx_BaseAvatar {
|
||||
|
|
@ -46,19 +46,19 @@ limitations under the License.
|
|||
.mx_EventListSummary_line {
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
margin-left: 63px;
|
||||
line-height: 30px;
|
||||
line-height: $font-30px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_EventListSummary {
|
||||
font-size: 13px;
|
||||
font-size: $font-13px;
|
||||
.mx_EventTile_line {
|
||||
line-height: 20px;
|
||||
line-height: $font-20px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventListSummary_line {
|
||||
line-height: 22px;
|
||||
line-height: $font-22px;
|
||||
}
|
||||
|
||||
.mx_EventListSummary_toggle {
|
||||
|
|
@ -66,6 +66,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_TextualEvent.mx_EventListSummary_summary {
|
||||
font-size: 13px;
|
||||
font-size: $font-13px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ limitations under the License.
|
|||
.mx_Field textarea {
|
||||
font-weight: normal;
|
||||
font-family: $font-family;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
border: none;
|
||||
// Even without a border here, we still need this avoid overlapping the rounded
|
||||
// corners on the field above.
|
||||
|
|
@ -102,7 +102,7 @@ limitations under the License.
|
|||
background-color 0.25s ease-out 0.1s;
|
||||
color: $primary-fg-color;
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
|
|
@ -126,7 +126,7 @@ limitations under the License.
|
|||
color 0.25s ease-out 0s,
|
||||
top 0.25s ease-out 0s,
|
||||
background-color 0.25s ease-out 0s;
|
||||
font-size: 10px;
|
||||
font-size: $font-10px;
|
||||
top: -13px;
|
||||
padding: 0 2px;
|
||||
background-color: $field-focused-label-bg-color;
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_FormButton {
|
||||
line-height: 16px;
|
||||
line-height: $font-16px;
|
||||
padding: 5px 15px;
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
height: min-content;
|
||||
|
||||
&:not(:last-child) {
|
||||
|
|
|
|||
|
|
@ -102,13 +102,13 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ImageView_name {
|
||||
font-size: 18px;
|
||||
font-size: $font-18px;
|
||||
margin-bottom: 6px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.mx_ImageView_metadata {
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
|
@ -118,13 +118,13 @@ limitations under the License.
|
|||
margin-bottom: 6px;
|
||||
border-radius: 5px;
|
||||
background-color: $lightbox-bg-color;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
padding: 9px;
|
||||
border: 1px solid $lightbox-border-color;
|
||||
}
|
||||
|
||||
.mx_ImageView_size {
|
||||
font-size: 11px;
|
||||
font-size: $font-11px;
|
||||
}
|
||||
|
||||
.mx_ImageView_link {
|
||||
|
|
@ -133,7 +133,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ImageView_button {
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
opacity: 0.5;
|
||||
margin-top: 18px;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ limitations under the License.
|
|||
background-color: $interactive-tooltip-bg-color;
|
||||
color: $interactive-tooltip-fg-color;
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
font-size: $font-10px;
|
||||
font-weight: 600;
|
||||
padding: 6px;
|
||||
z-index: 5001;
|
||||
|
|
|
|||
21
res/css/views/elements/_QRCode.scss
Normal file
21
res/css/views/elements/_QRCode.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/*
|
||||
Copyright 2020 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_QRCode {
|
||||
img {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,11 +6,33 @@
|
|||
.mx_RoomPill,
|
||||
.mx_GroupPill,
|
||||
.mx_AtRoomPill {
|
||||
border-radius: 16px;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
padding-left: 5px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
border-radius: $font-16px;
|
||||
line-height: $font-15px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
a.mx_Pill {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: calc(100% - 1ch);
|
||||
}
|
||||
|
||||
.mx_Pill {
|
||||
padding: $font-1px;
|
||||
padding-right: 0.4em;
|
||||
vertical-align: text-top;
|
||||
line-height: $font-17px;
|
||||
}
|
||||
|
||||
/* More specific to override `.markdown-body a` color */
|
||||
.mx_EventTile_content .markdown-body a.mx_GroupPill,
|
||||
.mx_GroupPill {
|
||||
color: $accent-fg-color;
|
||||
background-color: $rte-group-pill-color;
|
||||
}
|
||||
|
||||
/* More specific to override `.markdown-body a` text-decoration */
|
||||
|
|
@ -23,7 +45,6 @@
|
|||
.mx_UserPill {
|
||||
color: $primary-fg-color;
|
||||
background-color: $other-user-pill-bg-color;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.mx_UserPill_selected {
|
||||
|
|
@ -37,7 +58,6 @@
|
|||
.mx_MessageComposer_input .mx_AtRoomPill {
|
||||
color: $accent-fg-color;
|
||||
background-color: $mention-user-pill-bg-color;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
/* More specific to override `.markdown-body a` color */
|
||||
|
|
@ -47,15 +67,6 @@
|
|||
.mx_GroupPill {
|
||||
color: $accent-fg-color;
|
||||
background-color: $rte-room-pill-color;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
/* More specific to override `.markdown-body a` color */
|
||||
.mx_EventTile_content .markdown-body a.mx_GroupPill,
|
||||
.mx_GroupPill {
|
||||
color: $accent-fg-color;
|
||||
background-color: $rte-group-pill-color;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.mx_EventTile_body .mx_UserPill,
|
||||
|
|
@ -69,8 +80,10 @@
|
|||
.mx_GroupPill .mx_BaseAvatar,
|
||||
.mx_AtRoomPill .mx_BaseAvatar {
|
||||
position: relative;
|
||||
left: -3px;
|
||||
top: 2px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 10rem;
|
||||
margin-right: 0.24rem;
|
||||
}
|
||||
|
||||
.mx_Markdown_BOLD {
|
||||
|
|
|
|||
99
res/css/views/elements/_Slider.scss
Normal file
99
res/css/views/elements/_Slider.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
/*
|
||||
Copyright 2020 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_Slider {
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mx_Slider_dotContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mx_Slider_bar {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
height: 1em;
|
||||
width: 100%;
|
||||
padding: 0 0.5em; // half the width of a dot.
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_Slider_bar > hr {
|
||||
width: 100%;
|
||||
height: 0.4em;
|
||||
background-color: $slider-background-color;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mx_Slider_selection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(100% - 1em); // 2 * half the width of a dot
|
||||
height: 1em;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_Slider_selectionDot {
|
||||
position: absolute;
|
||||
width: 1.1em;
|
||||
height: 1.1em;
|
||||
background-color: $slider-selection-color;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 6px lightgrey;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.mx_Slider_selection > hr {
|
||||
margin: 0;
|
||||
border: 0.2em solid $slider-selection-color;
|
||||
}
|
||||
|
||||
.mx_Slider_dot {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
border-radius: 50%;
|
||||
background-color: $slider-background-color;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.mx_Slider_dotActive {
|
||||
background-color: $slider-selection-color;
|
||||
}
|
||||
|
||||
.mx_Slider_dotValue {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: $slider-background-color;
|
||||
}
|
||||
|
||||
// The following is a hack to center the labels without adding
|
||||
// any width to the slider's dots.
|
||||
.mx_Slider_labelContainer {
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.mx_Slider_label {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
left: -50%;
|
||||
}
|
||||
|
|
@ -16,11 +16,13 @@ limitations under the License.
|
|||
|
||||
.mx_ToggleSwitch {
|
||||
transition: background-color 0.20s ease-out 0.1s;
|
||||
width: 48px;
|
||||
height: 24px;
|
||||
border-radius: 14px;
|
||||
|
||||
width: $font-44px;
|
||||
height: $font-20px;
|
||||
border-radius: 1.5rem;
|
||||
padding: 2px;
|
||||
|
||||
background-color: $togglesw-off-color;
|
||||
position: relative;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
|
@ -31,23 +33,18 @@ limitations under the License.
|
|||
|
||||
.mx_ToggleSwitch.mx_ToggleSwitch_on {
|
||||
background-color: $togglesw-on-color;
|
||||
|
||||
> .mx_ToggleSwitch_ball {
|
||||
left: calc(100% - $font-20px);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ToggleSwitch_ball {
|
||||
transition: left 0.15s ease-out 0.1s;
|
||||
margin: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
width: $font-20px;
|
||||
height: $font-20px;
|
||||
border-radius: $font-20px;
|
||||
background-color: $togglesw-ball-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
transition: left 0.15s ease-out 0.1s;
|
||||
left: 0;
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue