mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-15 20:54:59 +08:00
Merge branches 'develop' and 'travis/download-logs' of github.com:matrix-org/matrix-react-sdk into travis/download-logs
Conflicts: src/i18n/strings/en_EN.json src/rageshake/submit-rageshake.ts
This commit is contained in:
Michael Telatynski
commit
70c81cc377
@ -6,25 +6,20 @@ 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/SetPasswordDialog.js
|
||||
src/components/views/dialogs/UnknownDeviceDialog.js
|
||||
src/components/views/elements/AddressSelector.js
|
||||
src/components/views/elements/DirectorySearchBox.js
|
||||
src/components/views/elements/MemberEventListSummary.js
|
||||
src/components/views/elements/UserSelector.js
|
||||
src/components/views/globals/MatrixToolbar.js
|
||||
src/components/views/globals/NewVersionBar.js
|
||||
src/components/views/globals/UpdateCheckBar.js
|
||||
src/components/views/messages/MFileBody.js
|
||||
src/components/views/messages/TextualBody.js
|
||||
src/components/views/room_settings/ColorSettings.js
|
||||
src/components/views/rooms/Autocomplete.js
|
||||
src/components/views/rooms/AuxPanel.js
|
||||
src/components/views/rooms/LinkPreviewWidget.js
|
||||
src/components/views/rooms/MemberDeviceInfo.js
|
||||
src/components/views/rooms/MemberInfo.js
|
||||
src/components/views/rooms/MemberList.js
|
||||
src/components/views/rooms/RoomList.js
|
||||
|
||||
127
.eslintrc.js
127
.eslintrc.js
@ -11,111 +11,36 @@ const path = require('path');
|
||||
const matrixJsSdkPath = path.join(path.dirname(require.resolve('matrix-js-sdk')), '..');
|
||||
|
||||
module.exports = {
|
||||
extends: ["matrix-org", "matrix-org/react-legacy"],
|
||||
parser: "babel-eslint",
|
||||
extends: [matrixJsSdkPath + "/.eslintrc.js"],
|
||||
plugins: [
|
||||
"react",
|
||||
"react-hooks",
|
||||
"flowtype",
|
||||
"babel"
|
||||
],
|
||||
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
},
|
||||
globals: {
|
||||
LANGUAGES_FILE: "readonly",
|
||||
},
|
||||
env: {
|
||||
es6: true,
|
||||
},
|
||||
parserOptions: {
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
legacyDecorators: true,
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
// eslint's built in no-invalid-this rule breaks with class properties
|
||||
"no-invalid-this": "off",
|
||||
// so we replace it with a version that is class property aware
|
||||
"babel/no-invalid-this": "error",
|
||||
|
||||
// We appear to follow this most of the time, so let's enforce it instead
|
||||
// of occasionally following it (or catching it in review)
|
||||
"keyword-spacing": "error",
|
||||
|
||||
/** react **/
|
||||
// This just uses the react plugin to help eslint known when
|
||||
// variables have been used in JSX
|
||||
"react/jsx-uses-vars": "error",
|
||||
// Don't mark React as unused if we're using JSX
|
||||
"react/jsx-uses-react": "error",
|
||||
|
||||
// bind or arrow function in props causes performance issues
|
||||
// (but we currently use them in some places)
|
||||
// It's disabled here, but we should using it sparingly.
|
||||
"react/jsx-no-bind": "off",
|
||||
"react/jsx-key": ["error"],
|
||||
|
||||
// Components in JSX should always be defined.
|
||||
"react/jsx-no-undef": "error",
|
||||
|
||||
// Assert no spacing in JSX curly brackets
|
||||
// <Element prop={ consideredError} prop={notConsideredError} />
|
||||
//
|
||||
// https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/docs/rules/jsx-curly-spacing.md
|
||||
//
|
||||
// Disabled for now - if anything we'd like to *enforce* spacing in JSX
|
||||
// curly brackets for legibility, but in practice it's not clear that the
|
||||
// consistency particularly improves legibility here. --Matthew
|
||||
//
|
||||
// "react/jsx-curly-spacing": ["error", {"when": "never", "children": {"when": "always"}}],
|
||||
|
||||
// Assert spacing before self-closing JSX tags, and no spacing before or
|
||||
// after the closing slash, and no spacing after the opening bracket of
|
||||
// the opening tag or closing tag.
|
||||
//
|
||||
// https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/docs/rules/jsx-tag-spacing.md
|
||||
"react/jsx-tag-spacing": ["error"],
|
||||
|
||||
/** flowtype **/
|
||||
"flowtype/require-parameter-type": ["warn", {
|
||||
"excludeArrowFunctions": true,
|
||||
}],
|
||||
"flowtype/define-flow-type": "warn",
|
||||
"flowtype/require-return-type": ["warn",
|
||||
"always",
|
||||
{
|
||||
"annotateUndefined": "never",
|
||||
"excludeArrowFunctions": true,
|
||||
}
|
||||
],
|
||||
"flowtype/space-after-type-colon": ["warn", "always"],
|
||||
"flowtype/space-before-type-colon": ["warn", "never"],
|
||||
|
||||
/*
|
||||
* things that are errors in the js-sdk config that the current
|
||||
* code does not adhere to, turned down to warn
|
||||
*/
|
||||
"max-len": ["warn", {
|
||||
// apparently people believe the length limit shouldn't apply
|
||||
// to JSX.
|
||||
ignorePattern: '^\\s*<',
|
||||
ignoreComments: true,
|
||||
ignoreRegExpLiterals: true,
|
||||
code: 120,
|
||||
}],
|
||||
"valid-jsdoc": ["warn"],
|
||||
"new-cap": ["warn"],
|
||||
"key-spacing": ["warn"],
|
||||
"prefer-const": ["warn"],
|
||||
|
||||
// crashes currently: https://github.com/eslint/eslint/issues/6274
|
||||
"generator-star-spacing": "off",
|
||||
|
||||
"react-hooks/rules-of-hooks": "error",
|
||||
"react-hooks/exhaustive-deps": "warn",
|
||||
},
|
||||
settings: {
|
||||
flowtype: {
|
||||
onlyFilesWithFlowAnnotation: true
|
||||
},
|
||||
// Things we do that break the ideal style
|
||||
"no-constant-condition": "off",
|
||||
"prefer-promise-reject-errors": "off",
|
||||
"no-async-promise-executor": "off",
|
||||
"quotes": "off",
|
||||
"indent": "off",
|
||||
},
|
||||
|
||||
overrides: [{
|
||||
files: ["src/**/*.{ts, tsx}"],
|
||||
"extends": ["matrix-org/ts"],
|
||||
"rules": {
|
||||
// We disable this while we're transitioning
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
// We'd rather not do this but we do
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
|
||||
"quotes": "off",
|
||||
"no-extra-boolean-cast": "off",
|
||||
}
|
||||
}],
|
||||
};
|
||||
|
||||
1464
CHANGELOG.md
1464
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
@ -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:
|
||||
@ -133,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`,
|
||||
|
||||
@ -4,7 +4,7 @@ Matrix JavaScript/ECMAScript Style Guide
|
||||
The intention of this guide is to make Matrix's JavaScript codebase clean,
|
||||
consistent with other popular JavaScript styles and consistent with the rest of
|
||||
the Matrix codebase. For reference, the Matrix Python style guide can be found
|
||||
at https://github.com/matrix-org/synapse/blob/master/docs/code_style.rst
|
||||
at https://github.com/matrix-org/synapse/blob/master/docs/code_style.md
|
||||
|
||||
This document reflects how we would like Matrix JavaScript code to look, with
|
||||
acknowledgement that a significant amount of code is written to older
|
||||
@ -17,7 +17,7 @@ writing in modern ECMAScript and using a transpile step to generate the file
|
||||
that applications can then include. There are significant benefits in being
|
||||
able to use modern ECMAScript, although the tooling for doing so can be awkward
|
||||
for library code, especially with regard to translating source maps and line
|
||||
number throgh from the original code to the final application.
|
||||
number through from the original code to the final application.
|
||||
|
||||
General Style
|
||||
-------------
|
||||
@ -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
|
||||
----------
|
||||
|
||||
BIN
docs/img/RoomListStore2.png
Normal file
BIN
docs/img/RoomListStore2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
151
docs/room-list-store.md
Normal file
151
docs/room-list-store.md
Normal file
@ -0,0 +1,151 @@
|
||||
# Room list sorting
|
||||
|
||||
It's so complicated it needs its own README.
|
||||
|
||||
|
||||
|
||||
Legend:
|
||||
* Orange = External event.
|
||||
* Purple = Deterministic flow.
|
||||
* Green = Algorithm definition.
|
||||
* Red = Exit condition/point.
|
||||
* Blue = Process definition.
|
||||
|
||||
## Algorithms involved
|
||||
|
||||
There's two main kinds of algorithms involved in the room list store: list ordering and tag sorting.
|
||||
Throughout the code an intentional decision has been made to call them the List Algorithm and Sorting
|
||||
Algorithm respectively. The list algorithm determines the primary ordering of a given tag whereas the
|
||||
tag sorting defines how rooms within that tag get sorted, at the discretion of the list ordering.
|
||||
|
||||
Behaviour of the overall room list (sticky rooms, etc) are determined by the generically-named Algorithm
|
||||
class. Here is where much of the coordination from the room list store is done to figure out which list
|
||||
algorithm to call, instead of having all the logic in the room list store itself.
|
||||
|
||||
|
||||
Tag sorting is effectively the comparator supplied to the list algorithm. This gives the list algorithm
|
||||
the power to decide when and how to apply the tag sorting, if at all. For example, the importance algorithm,
|
||||
later described in this document, heavily uses the list ordering behaviour to break the tag into categories.
|
||||
Each category then gets sorted by the appropriate tag sorting algorithm.
|
||||
|
||||
### Tag sorting algorithm: Alphabetical
|
||||
|
||||
When used, rooms in a given tag will be sorted alphabetically, where the alphabet's order is a problem
|
||||
for the browser. All we do is a simple string comparison and expect the browser to return something
|
||||
useful.
|
||||
|
||||
### Tag sorting algorithm: Manual
|
||||
|
||||
Manual sorting makes use of the `order` property present on all tags for a room, per the
|
||||
[Matrix specification](https://matrix.org/docs/spec/client_server/r0.6.0#room-tagging). Smaller values
|
||||
of `order` cause rooms to appear closer to the top of the list.
|
||||
|
||||
### Tag sorting algorithm: Recent
|
||||
|
||||
Rooms get ordered by the timestamp of the most recent useful message. Usefulness is yet another algorithm
|
||||
in the room list system which determines whether an event type is capable of bubbling up in the room list.
|
||||
Normally events like room messages, stickers, and room security changes will be considered useful enough
|
||||
to cause a shift in time.
|
||||
|
||||
Note that this is reliant on the event timestamps of the most recent message. Because Matrix is eventually
|
||||
consistent this means that from time to time a room might plummet or skyrocket across the tag due to the
|
||||
timestamp contained within the event (generated server-side by the sender's server).
|
||||
|
||||
### List ordering algorithm: Natural
|
||||
|
||||
This is the easiest of the algorithms to understand because it does essentially nothing. It imposes no
|
||||
behavioural changes over the tag sorting algorithm and is by far the simplest way to order a room list.
|
||||
Historically, it's been the only option in Riot and extremely common in most chat applications due to
|
||||
its relative deterministic behaviour.
|
||||
|
||||
### List ordering algorithm: Importance
|
||||
|
||||
On the other end of the spectrum, this is the most complicated algorithm which exists. There's major
|
||||
behavioural changes, and the tag sorting algorithm gets selectively applied depending on circumstances.
|
||||
|
||||
Each tag which is not manually ordered gets split into 4 sections or "categories". Manually ordered tags
|
||||
simply get the manual sorting algorithm applied to them with no further involvement from the importance
|
||||
algorithm. There are 4 categories: Red, Grey, Bold, and Idle. Each has their own definition based off
|
||||
relative (perceived) importance to the user:
|
||||
|
||||
* **Red**: The room has unread mentions waiting for the user.
|
||||
* **Grey**: The room has unread notifications waiting for the user. Notifications are simply unread
|
||||
messages which cause a push notification or badge count. Typically, this is the default as rooms get
|
||||
set to 'All Messages'.
|
||||
* **Bold**: The room has unread messages waiting for the user. Essentially this is a grey room without
|
||||
a badge/notification count (or 'Mentions Only'/'Muted').
|
||||
* **Idle**: No useful (see definition of useful above) activity has occurred in the room since the user
|
||||
last read it.
|
||||
|
||||
Conveniently, each tag gets ordered by those categories as presented: red rooms appear above grey, grey
|
||||
above bold, etc.
|
||||
|
||||
Once the algorithm has determined which rooms belong in which categories, the tag sorting algorithm
|
||||
gets applied to each category in a sub-list fashion. This should result in the red rooms (for example)
|
||||
being sorted alphabetically amongst each other as well as the grey rooms sorted amongst each other, but
|
||||
collectively the tag will be sorted into categories with red being at the top.
|
||||
|
||||
## Sticky rooms
|
||||
|
||||
When the user visits a room, that room becomes 'sticky' in the list, regardless of ordering algorithm.
|
||||
From a code perspective, the underlying algorithm is not aware of a sticky room and instead the base class
|
||||
manages which room is sticky. This is to ensure that all algorithms handle it the same.
|
||||
|
||||
The sticky flag is simply to say it will not move higher or lower down the list while it is active. For
|
||||
example, if using the importance algorithm, the room would naturally become idle once viewed and thus
|
||||
would normally fly down the list out of sight. The sticky room concept instead holds it in place, never
|
||||
letting it fly down until the user moves to another room.
|
||||
|
||||
Only one room can be sticky at a time. Room updates around the sticky room will still hold the sticky
|
||||
room in place. The best example of this is the importance algorithm: if the user has 3 red rooms and
|
||||
selects the middle room, they will see exactly one room above their selection at all times. If they
|
||||
receive another notification which causes the room to move into the topmost position, the room that was
|
||||
above the sticky room will move underneath to allow for the new room to take the top slot, maintaining
|
||||
the sticky room's position.
|
||||
|
||||
Though only applicable to the importance algorithm, the sticky room is not aware of category boundaries
|
||||
and thus the user can see a shift in what kinds of rooms move around their selection. An example would
|
||||
be the user having 4 red rooms, the user selecting the third room (leaving 2 above it), and then having
|
||||
the rooms above it read on another device. This would result in 1 red room and 1 other kind of room
|
||||
above the sticky room as it will try to maintain 2 rooms above the sticky room.
|
||||
|
||||
An exception for the sticky room placement is when there's suddenly not enough rooms to maintain the placement
|
||||
exactly. This typically happens if the user selects a room and leaves enough rooms where it cannot maintain
|
||||
the N required rooms above the sticky room. In this case, the sticky room will simply decrease N as needed.
|
||||
The N value will never increase while selection remains unchanged: adding a bunch of rooms after having
|
||||
put the sticky room in a position where it's had to decrease N will not increase N.
|
||||
|
||||
## Responsibilities of the store
|
||||
|
||||
The store is responsible for the ordering, upkeep, and tracking of all rooms. The room list component simply gets
|
||||
an object containing the tags it needs to worry about and the rooms within. The room list component will
|
||||
decide which tags need rendering (as it commonly filters out empty tags in most cases), and will deal with
|
||||
all kinds of filtering.
|
||||
|
||||
## Filtering
|
||||
|
||||
Filters are provided to the store as condition classes, which are then passed along to the algorithm
|
||||
implementations. The implementations then get to decide how to actually filter the rooms, however in
|
||||
practice the base `Algorithm` class deals with the filtering in a more optimized/generic way.
|
||||
|
||||
The results of filters get cached to avoid needlessly iterating over potentially thousands of rooms,
|
||||
as the old room list store does. When a filter condition changes, it emits an update which (in this
|
||||
case) the `Algorithm` class will pick up and act accordingly. Typically, this also means filtering a
|
||||
minor subset where possible to avoid over-iterating rooms.
|
||||
|
||||
All filter conditions are considered "stable" by the consumers, meaning that the consumer does not
|
||||
expect a change in the condition unless the condition says it has changed. This is intentional to
|
||||
maintain the caching behaviour described above.
|
||||
|
||||
## Class breakdowns
|
||||
|
||||
The `RoomListStore` is the major coordinator of various algorithm implementations, which take care
|
||||
of the various `ListAlgorithm` and `SortingAlgorithm` options. The `Algorithm` class is responsible
|
||||
for figuring out which tags get which rooms, as Matrix specifies them as a reverse map: tags get
|
||||
defined on rooms and are not defined as a collection of rooms (unlike how they are presented to the
|
||||
user). Various list-specific utilities are also included, though they are expected to move somewhere
|
||||
more general when needed. For example, the `membership` utilities could easily be moved elsewhere
|
||||
as needed.
|
||||
|
||||
The various bits throughout the room list store should also have jsdoc of some kind to help describe
|
||||
what they do and how they work.
|
||||
@ -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
|
||||
|
||||
38
package.json
38
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "matrix-react-sdk",
|
||||
"version": "2.3.0",
|
||||
"version": "2.10.1",
|
||||
"description": "SDK for matrix.org using React",
|
||||
"author": "matrix.org",
|
||||
"repository": {
|
||||
@ -45,9 +45,8 @@
|
||||
"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": "yarn lint:types && 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",
|
||||
@ -55,6 +54,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@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",
|
||||
@ -64,8 +64,8 @@
|
||||
"create-react-class": "^15.6.0",
|
||||
"diff-dom": "^4.1.3",
|
||||
"diff-match-patch": "^1.0.4",
|
||||
"emojibase-data": "^4.0.2",
|
||||
"emojibase-regex": "^3.0.0",
|
||||
"emojibase-data": "^5.0.1",
|
||||
"emojibase-regex": "^4.0.1",
|
||||
"escape-html": "^1.0.3",
|
||||
"file-saver": "^1.3.3",
|
||||
"filesize": "3.5.6",
|
||||
@ -82,17 +82,18 @@
|
||||
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
|
||||
"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": "^1.4.4",
|
||||
"qrcode-react": "^0.1.16",
|
||||
"qs": "^6.6.0",
|
||||
"re-resizable": "^6.5.2",
|
||||
"react": "^16.9.0",
|
||||
"react-addons-css-transition-group": "15.6.2",
|
||||
"react-beautiful-dnd": "^4.0.1",
|
||||
"react-dom": "^16.9.0",
|
||||
"react-focus-lock": "^2.2.1",
|
||||
"react-transition-group": "^4.4.1",
|
||||
"resize-observer-polyfill": "^1.5.0",
|
||||
"sanitize-html": "^1.18.4",
|
||||
"tar-js": "^0.3.0",
|
||||
@ -119,15 +120,29 @@
|
||||
"@babel/register": "^7.7.4",
|
||||
"@peculiar/webcrypto": "^1.0.22",
|
||||
"@types/classnames": "^2.2.10",
|
||||
"@types/react": "16.9",
|
||||
"@types/counterpart": "^0.18.1",
|
||||
"@types/flux": "^3.1.9",
|
||||
"@types/linkifyjs": "^2.1.3",
|
||||
"@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/react-transition-group": "^4.4.0",
|
||||
"@types/sanitize-html": "^1.23.3",
|
||||
"@types/zxcvbn": "^4.4.0",
|
||||
"@typescript-eslint/eslint-plugin": "^3.4.0",
|
||||
"@typescript-eslint/parser": "^3.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": "7.3.1",
|
||||
"eslint-config-google": "^0.7.1",
|
||||
"eslint-config-matrix-org": "^0.1.2",
|
||||
"eslint-plugin-babel": "^5.2.1",
|
||||
"eslint-plugin-flowtype": "^2.30.0",
|
||||
"eslint-plugin-jest": "^23.0.4",
|
||||
@ -138,6 +153,7 @@
|
||||
"flow-parser": "^0.57.3",
|
||||
"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",
|
||||
@ -147,7 +163,6 @@
|
||||
"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",
|
||||
@ -157,6 +172,9 @@
|
||||
"testMatch": [
|
||||
"<rootDir>/test/**/*-test.js"
|
||||
],
|
||||
"setupFiles": [
|
||||
"jest-canvas-mock"
|
||||
],
|
||||
"setupFilesAfterEnv": [
|
||||
"<rootDir>/test/setupTests.js"
|
||||
],
|
||||
|
||||
@ -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: 10px;
|
||||
}
|
||||
|
||||
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;
|
||||
@ -60,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;
|
||||
}
|
||||
@ -76,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;
|
||||
}
|
||||
@ -154,9 +160,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
background-color: transparent;
|
||||
color: $input-darker-fg-color;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $dialog-close-fg-color;
|
||||
// these things should probably not be defined
|
||||
// globally
|
||||
border: 1px solid rgba($primary-fg-color, .1);
|
||||
// these things should probably not be defined globally
|
||||
margin: 9px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
@ -169,7 +174,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
|
||||
.mx_textinput input::placeholder {
|
||||
color: $roomsublist-label-fg-color;
|
||||
color: rgba($input-darker-fg-color, .75);
|
||||
}
|
||||
}
|
||||
|
||||
@ -221,7 +226,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
}
|
||||
|
||||
#mx_theme_tertiaryAccentColor {
|
||||
color: $roomsublist-label-bg-color;
|
||||
color: $tertiary-accent-color;
|
||||
}
|
||||
|
||||
/* Expected z-indexes for dialogs:
|
||||
@ -253,12 +258,12 @@ 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%;
|
||||
box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@ -313,7 +318,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
}
|
||||
|
||||
.mx_Dialog_titleImage {
|
||||
vertical-align: middle;
|
||||
vertical-align: sub;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: -2px;
|
||||
@ -321,14 +326,17 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
}
|
||||
|
||||
.mx_Dialog_title {
|
||||
font-size: 22px;
|
||||
line-height: 36px;
|
||||
font-size: $font-22px;
|
||||
line-height: $font-36px;
|
||||
color: $dialog-title-fg-color;
|
||||
}
|
||||
|
||||
.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
|
||||
text-align: center;
|
||||
}
|
||||
.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title {
|
||||
margin-right: 20px; // leave space for the 'X' cancel button
|
||||
}
|
||||
|
||||
.mx_Dialog_title.danger {
|
||||
color: $warning-color;
|
||||
@ -350,7 +358,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;
|
||||
}
|
||||
@ -419,6 +427,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
border-radius: 8px;
|
||||
padding: 0px;
|
||||
box-shadow: none;
|
||||
|
||||
/* Don't show scroll-bars on spinner dialogs */
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
// TODO: Review mx_GeneralButton usage to see if it can use a different class
|
||||
@ -446,7 +458,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;
|
||||
@ -572,3 +584,111 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
// So it fits in the space provided by the page
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
// A context menu that largely fits the | [icon] [label] | format.
|
||||
.mx_IconizedContextMenu {
|
||||
min-width: 146px;
|
||||
|
||||
.mx_IconizedContextMenu_optionList {
|
||||
& > * {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
// the notFirst class is for cases where the optionList might be under a header of sorts.
|
||||
&:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
|
||||
// This is a bit of a hack when we could just use a simple border-top property,
|
||||
// however we have a (kinda) good reason for doing it this way: we need opacity.
|
||||
// To get the right color, we need an opacity modifier which means we have to work
|
||||
// around the problem. PostCSS doesn't support the opacity() function, and if we
|
||||
// use something like postcss-functions we quickly run into an issue where the
|
||||
// function we would define gets passed a CSS variable for custom themes, which
|
||||
// can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
|
||||
//
|
||||
// Therefore, we just hack in a line and border the thing ourselves
|
||||
&::before {
|
||||
border-top: 1px solid $primary-fg-color;
|
||||
opacity: 0.1;
|
||||
content: '';
|
||||
|
||||
// Counteract the padding problems (width: 100% ignores the 40px padding,
|
||||
// unless we position it absolutely then it does the right thing).
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// round the top corners of the top button for the hover effect to be bounded
|
||||
&:first-child .mx_AccessibleButton:first-child {
|
||||
border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
|
||||
}
|
||||
|
||||
// round the bottom corners of the bottom button for the hover effect to be bounded
|
||||
&:last-child .mx_AccessibleButton:last-child {
|
||||
border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
// pad the inside of the button so that the hover background is padded too
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-decoration: none;
|
||||
color: $primary-fg-color;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
// Create a flexbox to more easily define the list items
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: $menu-selected-color;
|
||||
}
|
||||
|
||||
img, .mx_IconizedContextMenu_icon { // icons
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
max-width: 16px;
|
||||
}
|
||||
|
||||
span.mx_IconizedContextMenu_label { // labels
|
||||
padding-left: 14px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_IconizedContextMenu_compact {
|
||||
.mx_IconizedContextMenu_optionList > * {
|
||||
padding: 8px 16px 8px 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@define-mixin ProgressBarColour $colour {
|
||||
color: $colour;
|
||||
&::-moz-progress-bar {
|
||||
background-color: $colour;
|
||||
}
|
||||
&::-webkit-progress-value {
|
||||
background-color: $colour;
|
||||
}
|
||||
}
|
||||
|
||||
@define-mixin ProgressBarBorderRadius $radius {
|
||||
border-radius: $radius;
|
||||
&::-moz-progress-bar {
|
||||
border-radius: $radius;
|
||||
}
|
||||
&::-webkit-progress-bar,
|
||||
&::-webkit-progress-value {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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";
|
||||
@ -17,16 +18,16 @@
|
||||
@import "./structures/_NotificationPanel.scss";
|
||||
@import "./structures/_RightPanel.scss";
|
||||
@import "./structures/_RoomDirectory.scss";
|
||||
@import "./structures/_RoomSearch.scss";
|
||||
@import "./structures/_RoomStatusBar.scss";
|
||||
@import "./structures/_RoomSubList.scss";
|
||||
@import "./structures/_RoomView.scss";
|
||||
@import "./structures/_ScrollPanel.scss";
|
||||
@import "./structures/_SearchBox.scss";
|
||||
@import "./structures/_TabbedView.scss";
|
||||
@import "./structures/_TagPanel.scss";
|
||||
@import "./structures/_ToastContainer.scss";
|
||||
@import "./structures/_TopLeftMenuButton.scss";
|
||||
@import "./structures/_UploadBar.scss";
|
||||
@import "./structures/_UserMenu.scss";
|
||||
@import "./structures/_ViewSource.scss";
|
||||
@import "./structures/auth/_CompleteSecurity.scss";
|
||||
@import "./structures/auth/_Login.scss";
|
||||
@ -40,11 +41,14 @@
|
||||
@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";
|
||||
@import "./views/avatars/_BaseAvatar.scss";
|
||||
@import "./views/avatars/_DecoratedRoomAvatar.scss";
|
||||
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
|
||||
@import "./views/avatars/_PulsedAvatar.scss";
|
||||
@import "./views/context_menus/_MessageContextMenu.scss";
|
||||
@import "./views/context_menus/_RoomTileContextMenu.scss";
|
||||
@import "./views/context_menus/_StatusMessageContextMenu.scss";
|
||||
@ -59,15 +63,14 @@
|
||||
@import "./views/dialogs/_CreateGroupDialog.scss";
|
||||
@import "./views/dialogs/_CreateRoomDialog.scss";
|
||||
@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/_RebrandDialog.scss";
|
||||
@import "./views/dialogs/_RoomSettingsDialog.scss";
|
||||
@import "./views/dialogs/_RoomSettingsDialogBridges.scss";
|
||||
@import "./views/dialogs/_RoomUpgradeDialog.scss";
|
||||
@ -80,7 +83,6 @@
|
||||
@import "./views/dialogs/_SlashCommandHelpDialog.scss";
|
||||
@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
|
||||
@import "./views/dialogs/_TermsDialog.scss";
|
||||
@import "./views/dialogs/_UnknownDeviceDialog.scss";
|
||||
@import "./views/dialogs/_UploadConfirmDialog.scss";
|
||||
@import "./views/dialogs/_UserSettingsDialog.scss";
|
||||
@import "./views/dialogs/_WidgetOpenIDPermissionsDialog.scss";
|
||||
@ -103,16 +105,19 @@
|
||||
@import "./views/elements/_IconButton.scss";
|
||||
@import "./views/elements/_ImageView.scss";
|
||||
@import "./views/elements/_InlineSpinner.scss";
|
||||
@import "./views/elements/_InteractiveTooltip.scss";
|
||||
@import "./views/elements/_ManageIntegsButton.scss";
|
||||
@import "./views/elements/_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/_StyledCheckbox.scss";
|
||||
@import "./views/elements/_StyledRadioButton.scss";
|
||||
@import "./views/elements/_SyntaxHighlight.scss";
|
||||
@import "./views/elements/_TextWithTooltip.scss";
|
||||
@import "./views/elements/_ToggleSwitch.scss";
|
||||
@ -120,7 +125,6 @@
|
||||
@import "./views/elements/_TooltipButton.scss";
|
||||
@import "./views/elements/_Validation.scss";
|
||||
@import "./views/emojipicker/_EmojiPicker.scss";
|
||||
@import "./views/globals/_MatrixToolbar.scss";
|
||||
@import "./views/groups/_GroupPublicityToggle.scss";
|
||||
@import "./views/groups/_GroupRoomList.scss";
|
||||
@import "./views/groups/_GroupUserSettings.scss";
|
||||
@ -132,12 +136,13 @@
|
||||
@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";
|
||||
@ -157,31 +162,32 @@
|
||||
@import "./views/rooms/_EditMessageComposer.scss";
|
||||
@import "./views/rooms/_EntityTile.scss";
|
||||
@import "./views/rooms/_EventTile.scss";
|
||||
@import "./views/rooms/_InviteOnlyIcon.scss";
|
||||
@import "./views/rooms/_GroupLayout.scss";
|
||||
@import "./views/rooms/_IRCLayout.scss";
|
||||
@import "./views/rooms/_JumpToBottomButton.scss";
|
||||
@import "./views/rooms/_LinkPreviewWidget.scss";
|
||||
@import "./views/rooms/_MemberDeviceInfo.scss";
|
||||
@import "./views/rooms/_MemberInfo.scss";
|
||||
@import "./views/rooms/_MemberList.scss";
|
||||
@import "./views/rooms/_MessageComposer.scss";
|
||||
@import "./views/rooms/_MessageComposerFormatBar.scss";
|
||||
@import "./views/rooms/_NotificationBadge.scss";
|
||||
@import "./views/rooms/_PinnedEventTile.scss";
|
||||
@import "./views/rooms/_PinnedEventsPanel.scss";
|
||||
@import "./views/rooms/_PresenceLabel.scss";
|
||||
@import "./views/rooms/_ReplyPreview.scss";
|
||||
@import "./views/rooms/_RoomBreadcrumbs.scss";
|
||||
@import "./views/rooms/_RoomDropTarget.scss";
|
||||
@import "./views/rooms/_RoomHeader.scss";
|
||||
@import "./views/rooms/_RoomList.scss";
|
||||
@import "./views/rooms/_RoomPreviewBar.scss";
|
||||
@import "./views/rooms/_RoomRecoveryReminder.scss";
|
||||
@import "./views/rooms/_RoomSublist.scss";
|
||||
@import "./views/rooms/_RoomTile.scss";
|
||||
@import "./views/rooms/_RoomTileIcon.scss";
|
||||
@import "./views/rooms/_RoomUpgradeWarningBar.scss";
|
||||
@import "./views/rooms/_SearchBar.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";
|
||||
@ -195,10 +201,12 @@
|
||||
@import "./views/settings/_ProfileSettings.scss";
|
||||
@import "./views/settings/_SetIdServer.scss";
|
||||
@import "./views/settings/_SetIntegrationManager.scss";
|
||||
@import "./views/settings/_UpdateCheckButton.scss";
|
||||
@import "./views/settings/tabs/_SettingsTab.scss";
|
||||
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
|
||||
@import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss";
|
||||
@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
|
||||
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";
|
||||
@ -208,6 +216,6 @@
|
||||
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
|
||||
@import "./views/terms/_InlineTermsAgreement.scss";
|
||||
@import "./views/verification/_VerificationShowSas.scss";
|
||||
@import "./views/voip/_CallContainer.scss";
|
||||
@import "./views/voip/_CallView.scss";
|
||||
@import "./views/voip/_IncomingCallbox.scss";
|
||||
@import "./views/voip/_VideoView.scss";
|
||||
|
||||
73
res/css/_font-sizes.scss
Normal file
73
res/css/_font-sizes.scss
Normal file
@ -0,0 +1,73 @@
|
||||
/*
|
||||
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.1rem;
|
||||
$font-1-5px: 0.15rem;
|
||||
$font-2px: 0.2rem;
|
||||
$font-3px: 0.3rem;
|
||||
$font-4px: 0.4rem;
|
||||
$font-5px: 0.5rem;
|
||||
$font-6px: 0.6rem;
|
||||
$font-7px: 0.7rem;
|
||||
$font-8px: 0.8rem;
|
||||
$font-9px: 0.9rem;
|
||||
$font-10px: 1.0rem;
|
||||
$font-10-4px: 1.04rem;
|
||||
$font-11px: 1.1rem;
|
||||
$font-12px: 1.2rem;
|
||||
$font-13px: 1.3rem;
|
||||
$font-14px: 1.4rem;
|
||||
$font-15px: 1.5rem;
|
||||
$font-16px: 1.6rem;
|
||||
$font-17px: 1.7rem;
|
||||
$font-18px: 1.8rem;
|
||||
$font-19px: 1.9rem;
|
||||
$font-20px: 2.0rem;
|
||||
$font-21px: 2.1rem;
|
||||
$font-22px: 2.2rem;
|
||||
$font-23px: 2.3rem;
|
||||
$font-24px: 2.4rem;
|
||||
$font-25px: 2.5rem;
|
||||
$font-26px: 2.6rem;
|
||||
$font-27px: 2.7rem;
|
||||
$font-28px: 2.8rem;
|
||||
$font-29px: 2.9rem;
|
||||
$font-30px: 3.0rem;
|
||||
$font-31px: 3.1rem;
|
||||
$font-32px: 3.2rem;
|
||||
$font-33px: 3.3rem;
|
||||
$font-34px: 3.4rem;
|
||||
$font-35px: 3.5rem;
|
||||
$font-36px: 3.6rem;
|
||||
$font-37px: 3.7rem;
|
||||
$font-38px: 3.8rem;
|
||||
$font-39px: 3.9rem;
|
||||
$font-40px: 4.0rem;
|
||||
$font-41px: 4.1rem;
|
||||
$font-42px: 4.2rem;
|
||||
$font-43px: 4.3rem;
|
||||
$font-44px: 4.4rem;
|
||||
$font-45px: 4.5rem;
|
||||
$font-46px: 4.6rem;
|
||||
$font-47px: 4.7rem;
|
||||
$font-48px: 4.8rem;
|
||||
$font-49px: 4.9rem;
|
||||
$font-50px: 5.0rem;
|
||||
$font-51px: 5.1rem;
|
||||
$font-52px: 5.2rem;
|
||||
$font-78px: 7.8rem;
|
||||
$font-88px: 8.8rem;
|
||||
$font-400px: 40rem;
|
||||
@ -31,12 +31,12 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_ContextualMenu {
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
// TODO: Update design for custom tags to match new designs
|
||||
|
||||
.mx_LeftPanel_tagPanelContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -50,7 +52,7 @@ limitations under the License.
|
||||
background-color: $accent-color-alt;
|
||||
width: 5px;
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
left: -9px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
top: 2px; // 10 [padding-top] - (56 - 40)/2
|
||||
top: 12px; // just feels right (see comment above about designs needing to be updated)
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -29,12 +29,12 @@ limitations under the License.
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 19px;
|
||||
}
|
||||
|
||||
.mx_GroupView_header_view {
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
padding-bottom: 0px;
|
||||
padding-left: 19px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
@ -63,11 +63,11 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_GroupHeader_editButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
}
|
||||
|
||||
.mx_GroupHeader_shareButton::before {
|
||||
mask-image: url('$(res)/img/icons-share.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/share.svg');
|
||||
}
|
||||
|
||||
.mx_GroupView_hostingSignup img {
|
||||
@ -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;
|
||||
@ -182,6 +182,7 @@ limitations under the License.
|
||||
|
||||
.mx_GroupView_body {
|
||||
flex-grow: 1;
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
.mx_GroupView_rooms {
|
||||
@ -196,7 +197,7 @@ limitations under the License.
|
||||
text-transform: uppercase;
|
||||
color: $h3-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
font-size: $font-13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@ -226,7 +227,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;
|
||||
}
|
||||
@ -250,6 +251,7 @@ limitations under the License.
|
||||
.mx_GroupView_membershipSubSection {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_GroupView_membershipSubSection .mx_Spinner {
|
||||
@ -258,7 +260,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 {
|
||||
|
||||
@ -22,7 +22,7 @@ limitations under the License.
|
||||
content: "";
|
||||
background-color: $header-divider-color;
|
||||
opacity: 0.5;
|
||||
margin: 0 15px;
|
||||
margin: 6px 8px;
|
||||
border-radius: 1px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
@ -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($accent-color, 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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2018 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.
|
||||
@ -15,163 +14,182 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_LeftPanel_container {
|
||||
display: flex;
|
||||
/* LeftPanel 260px */
|
||||
min-width: 260px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container.collapsed {
|
||||
min-width: unset;
|
||||
/* Collapsed LeftPanel 50px */
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
|
||||
/* TagPanel 70px + Collapsed LeftPanel 50px */
|
||||
flex: 0 0 120px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_tagPanelContainer {
|
||||
flex: 0 0 70px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_hideButton {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 0px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
$tagPanelWidth: 56px; // only applies in this file, used for calculations
|
||||
|
||||
.mx_LeftPanel {
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
background-color: $roomlist-bg-color;
|
||||
min-width: 260px;
|
||||
max-width: 50%;
|
||||
|
||||
.mx_LeftPanel .mx_AppTile_mini {
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_RoomList_scrollbar {
|
||||
order: 1;
|
||||
|
||||
flex: 1 1 0;
|
||||
|
||||
overflow-y: auto;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu {
|
||||
order: 3;
|
||||
|
||||
border-top: 1px solid $panel-divider-color;
|
||||
margin-left: 16px; /* gutter */
|
||||
margin-right: 16px; /* gutter */
|
||||
flex: 0 0 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
|
||||
flex: 0 0 160px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu_options {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.mx_BottomLeftMenu_options object {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_BottomLeftMenu_options > div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mx_BottomLeftMenu_options .mx_RoleButton {
|
||||
margin-left: 0px;
|
||||
margin-right: 10px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu_settings {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_LeftPanel .mx_BottomLeftMenu {
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
|
||||
flex: 0 0 160px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu_options {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_exploreAndFilterRow {
|
||||
// Create a row-based flexbox for the TagPanel and the room list
|
||||
display: flex;
|
||||
|
||||
.mx_SearchBox {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
margin: 4px 9px 1px 9px;
|
||||
}
|
||||
}
|
||||
.mx_LeftPanel_tagPanelContainer {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: $tagPanelWidth;
|
||||
height: 100%;
|
||||
|
||||
.mx_LeftPanel_explore {
|
||||
flex: 0 0 50%;
|
||||
overflow: hidden;
|
||||
transition: flex-basis 0.2s;
|
||||
box-sizing: border-box;
|
||||
// Create another flexbox so the TagPanel fills the container
|
||||
display: flex;
|
||||
|
||||
&.mx_LeftPanel_explore_hidden {
|
||||
flex-basis: 0;
|
||||
// TagPanel handles its own CSS
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
font-size: 14px;
|
||||
margin: 4px 0 1px 9px;
|
||||
padding: 9px;
|
||||
padding-left: 42px;
|
||||
font-weight: 600;
|
||||
color: $notice-secondary-color;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
&:not(.mx_LeftPanel_hasTagPanel) {
|
||||
.mx_LeftPanel_roomListContainer {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $primary-bg-color;
|
||||
// Note: The 'room list' in this context is actually everything that isn't the tag
|
||||
// panel, such as the menu options, breadcrumbs, filtering, etc
|
||||
.mx_LeftPanel_roomListContainer {
|
||||
width: calc(100% - $tagPanelWidth);
|
||||
background-color: $roomlist-bg-color;
|
||||
|
||||
// Create another flexbox (this time a column) for the room list components
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.mx_LeftPanel_userHeader {
|
||||
/* 12px top, 12px sides, 20px bottom (using 13px bottom to account
|
||||
* for internal whitespace in the breadcrumbs)
|
||||
*/
|
||||
padding: 12px;
|
||||
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
|
||||
|
||||
// Create another flexbox column for the rows to stack within
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&::before {
|
||||
cursor: pointer;
|
||||
mask: url('$(res)/img/explore.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center center;
|
||||
content: "";
|
||||
left: 14px;
|
||||
top: 10px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $notice-secondary-color;
|
||||
position: absolute;
|
||||
.mx_LeftPanel_breadcrumbsContainer {
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
margin: 12px 12px 0 12px;
|
||||
flex: 0 0 auto;
|
||||
// Create yet another flexbox, this time within the row, to ensure items stay
|
||||
// aligned correctly. This is also a row-based flexbox.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.mx_IndicatorScrollbar_leftOverflow {
|
||||
mask-image: linear-gradient(90deg, transparent, black 5%);
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_rightOverflow {
|
||||
mask-image: linear-gradient(90deg, black, black 95%, transparent);
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
|
||||
mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_filterContainer {
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
|
||||
flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
|
||||
|
||||
// Create a flexbox to organize the inputs
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_RoomSearch_expanded + .mx_LeftPanel_exploreButton {
|
||||
// Cheaty way to return the occupied space to the filter input
|
||||
flex-basis: 0;
|
||||
margin: 0;
|
||||
width: 0;
|
||||
|
||||
// Don't forget to hide the masked ::before icon,
|
||||
// using display:none or visibility:hidden would break accessibility
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_exploreButton {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 20px;
|
||||
background-color: $roomlist-button-bg-color;
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-image: url('$(res)/img/feather-customised/compass.svg');
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_roomListWrapper {
|
||||
// Create a flexbox to ensure the containing items cause appropriate overflow.
|
||||
display: flex;
|
||||
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
margin-top: 10px; // so we're not up against the search/filter
|
||||
|
||||
&.mx_LeftPanel_roomListWrapper_stickyBottom {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
&.mx_LeftPanel_roomListWrapper_stickyTop {
|
||||
padding-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_actualRoomListContainer {
|
||||
flex-grow: 1; // fill the available space
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
position: relative; // for sticky headers
|
||||
|
||||
// Create a flexbox to trick the layout engine
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// These styles override the defaults for the minimized (66px) layout
|
||||
&.mx_LeftPanel_minimized {
|
||||
min-width: unset;
|
||||
|
||||
// We have to forcefully set the width to override the resizer's style attribute.
|
||||
&.mx_LeftPanel_hasTagPanel {
|
||||
width: calc(68px + $tagPanelWidth) !important;
|
||||
}
|
||||
&:not(.mx_LeftPanel_hasTagPanel) {
|
||||
width: 68px !important;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_roomListContainer {
|
||||
width: 68px;
|
||||
|
||||
.mx_LeftPanel_filterContainer {
|
||||
// Organize the flexbox into a centered column layout
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.mx_LeftPanel_exploreButton {
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,10 +41,6 @@ limitations under the License.
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_toolbarShowing {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.mx_MatrixChat {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -70,7 +66,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
/* not the left panel, and not the resize handle, so the roomview/groupview/... */
|
||||
.mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_ResizeHandle) {
|
||||
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_ResizeHandle) {
|
||||
background-color: $primary-bg-color;
|
||||
|
||||
flex: 1 1 0;
|
||||
|
||||
@ -105,7 +105,7 @@ limitations under the License.
|
||||
.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;
|
||||
}
|
||||
@ -149,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;
|
||||
}
|
||||
|
||||
@ -161,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;
|
||||
}
|
||||
@ -63,6 +63,10 @@ limitations under the License.
|
||||
padding-left: 32px;
|
||||
padding-top: 8px;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile_roomName a,
|
||||
|
||||
@ -20,8 +20,16 @@ limitations under the License.
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
min-width: 264px;
|
||||
max-width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
margin: 5px;
|
||||
padding: 4px 0;
|
||||
|
||||
.mx_RoomView_MessageList {
|
||||
padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RightPanel_header {
|
||||
@ -43,22 +51,20 @@ limitations under the License.
|
||||
.mx_RightPanel_headerButton {
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
vertical-align: top;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid transparent;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
top: 4px; // center with parent of 32px
|
||||
left: 4px; // center with parent of 32px
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-color: $rightpanel-button-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
@ -66,37 +72,50 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RightPanel_membersButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/user.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/members.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_filesButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/files.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/files.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_notifsButton::before {
|
||||
mask-image: url('$(res)/img/feather-customised/notifications.svg');
|
||||
mask-image: url('$(res)/img/element-icons/notifications.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_groupMembersButton::before {
|
||||
mask-image: url('$(res)/img/icons-people.svg');
|
||||
mask-image: url('$(res)/img/element-icons/community-members.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_roomsButton::before {
|
||||
mask-image: url('$(res)/img/icons-room-nobg.svg');
|
||||
mask-image: url('$(res)/img/element-icons/community-rooms.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton_highlight::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: $button-bg-color;
|
||||
.mx_RightPanel_headerButton_highlight {
|
||||
background: rgba($accent-color, 0.25);
|
||||
// make the icon the accent color too
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton:not(.mx_RightPanel_headerButton_highlight) {
|
||||
&:hover {
|
||||
background: rgba($accent-color, 0.1);
|
||||
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton_badge {
|
||||
font-size: 8px;
|
||||
font-size: $font-8px;
|
||||
border-radius: 8px;
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
|
||||
@ -64,7 +64,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_table {
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
color: $primary-fg-color;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
@ -112,7 +112,7 @@ limitations under the License.
|
||||
|
||||
.mx_RoomDirectory_name {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
font-size: $font-18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -124,7 +124,7 @@ limitations under the License.
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
line-height: $font-20px;
|
||||
padding: 0 5px;
|
||||
color: $accent-fg-color;
|
||||
background-color: $rte-room-pill-color;
|
||||
@ -136,7 +136,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_alias {
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
color: $settings-grey-fg-color;
|
||||
}
|
||||
|
||||
@ -150,7 +150,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomDirectory > span {
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
margin-top: 0;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
|
||||
81
res/css/structures/_RoomSearch.scss
Normal file
81
res/css/structures/_RoomSearch.scss
Normal file
@ -0,0 +1,81 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
// Note: this component expects to be contained within a flexbox
|
||||
.mx_RoomSearch {
|
||||
flex: 1;
|
||||
border-radius: 20px;
|
||||
background-color: $roomlist-button-bg-color;
|
||||
height: 28px;
|
||||
padding: 2px;
|
||||
|
||||
// Create a flexbox for the icons (easier to manage)
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_RoomSearch_icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask: url('$(res)/img/feather-customised/search-input.svg');
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.mx_RoomSearch_input {
|
||||
border: none !important; // !important to override default app-wide styles
|
||||
flex: 1 !important; // !important to override default app-wide styles
|
||||
color: $primary-fg-color !important; // !important to override default app-wide styles
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-16px;
|
||||
|
||||
&:not(.mx_RoomSearch_inputExpanded)::placeholder {
|
||||
color: $primary-fg-color !important; // !important to override default app-wide styles
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSearch_expanded {
|
||||
.mx_RoomSearch_clearButton {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-image: url('$(res)/img/feather-customised/x.svg');
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSearch_clearButton {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&.mx_RoomSearch_minimized {
|
||||
border-radius: 32px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
padding: 8px;
|
||||
|
||||
.mx_RoomSearch_icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,187 +0,0 @@
|
||||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
/* a word of explanation about the flex-shrink values employed here:
|
||||
there are 3 priotized categories of screen real-estate grabbing,
|
||||
each with a flex-shrink difference of 4 order of magnitude,
|
||||
so they ideally wouldn't affect each other.
|
||||
lowest category: .mx_RoomSubList
|
||||
flex-shrink: 10000000
|
||||
distribute size of items within the same category by their size
|
||||
middle category: .mx_RoomSubList.resized-sized
|
||||
flex-shrink: 1000
|
||||
applied when using the resizer, will have a max-height set to it,
|
||||
to limit the size
|
||||
highest category: .mx_RoomSubList.resized-all
|
||||
flex-shrink: 1
|
||||
small flex-shrink value (1), is only added if you can drag the resizer so far
|
||||
so in practice you can only assign this category if there is enough space.
|
||||
*/
|
||||
|
||||
.mx_RoomSubList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.mx_RoomSubList_nonEmpty .mx_AutoHideScrollbar_offset {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_labelContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
margin: 0 8px;
|
||||
padding: 0 8px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_labelContainer.focus-visible:focus-within {
|
||||
background-color: $roomtile-focused-bg-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_label {
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_label > span {
|
||||
flex: 1 1 auto;
|
||||
text-transform: uppercase;
|
||||
color: $roomsublist-label-fg-color;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_badge > div {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
padding: 0 5px;
|
||||
color: $roomtile-badge-fg-color;
|
||||
background-color: $roomtile-name-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_addRoom, .mx_RoomSubList_badge {
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_addRoom {
|
||||
background-color: $roomheader-addroom-bg-color;
|
||||
border-radius: 10px; // 16/2 + 2 padding
|
||||
height: 16px;
|
||||
flex: 0 0 16px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
background-color: $roomheader-addroom-fg-color;
|
||||
mask: url('$(res)/img/icons-room-add.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSubList_badgeHighlight > div {
|
||||
color: $accent-fg-color;
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevron {
|
||||
pointer-events: none;
|
||||
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
|
||||
mask-repeat: no-repeat;
|
||||
transition: transform 0.2s ease-in;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
margin-left: 2px;
|
||||
background-color: $roomsublist-label-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevronDown {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevronUp {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevronRight {
|
||||
transform: rotateZ(-90deg);
|
||||
}
|
||||
|
||||
.mx_RoomSubList_scroll {
|
||||
/* let rooms list grab as much space as it needs (auto),
|
||||
potentially overflowing and showing a scrollbar */
|
||||
flex: 0 1 auto;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
.mx_RoomSubList_scroll {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_labelContainer {
|
||||
margin-right: 8px;
|
||||
margin-left: 2px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_addRoom {
|
||||
margin-left: 3px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_label > span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// overflow indicators
|
||||
.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
|
||||
&.mx_IndicatorScrollbar_topOverflow::before {
|
||||
position: sticky;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
z-index: 100;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
transition: background-image 0.1s ease-in;
|
||||
background: linear-gradient(to top, $panel-gradient);
|
||||
}
|
||||
|
||||
|
||||
&.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;
|
||||
@ -261,7 +261,7 @@ hr.mx_RoomView_myReadMarker {
|
||||
.mx_RoomView_voipButton {
|
||||
float: right;
|
||||
margin-right: 13px;
|
||||
margin-top: 10px;
|
||||
margin-top: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -33,7 +33,7 @@ limitations under the License.
|
||||
.mx_TagPanel .mx_TagPanel_clearButton_container {
|
||||
/* Constant height within flex mx_TagPanel */
|
||||
height: 70px;
|
||||
width: 60px;
|
||||
width: 56px;
|
||||
|
||||
flex: none;
|
||||
|
||||
@ -51,7 +51,7 @@ limitations under the License.
|
||||
|
||||
.mx_TagPanel .mx_TagPanel_divider {
|
||||
height: 0px;
|
||||
width: 42px;
|
||||
width: 34px;
|
||||
border-bottom: 1px solid $panel-divider-color;
|
||||
display: none;
|
||||
}
|
||||
@ -66,15 +66,13 @@ limitations under the License.
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
height: 100%;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
|
||||
height: 40px;
|
||||
padding: 10px 0 9px 0;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile {
|
||||
margin: 9px 0;
|
||||
// opacity: 0.5;
|
||||
position: relative;
|
||||
}
|
||||
@ -86,8 +84,8 @@ limitations under the License.
|
||||
|
||||
.mx_TagPanel .mx_TagTile_plus {
|
||||
margin-bottom: 12px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 20px;
|
||||
background-color: $roomheader-addroom-bg-color;
|
||||
position: relative;
|
||||
@ -110,13 +108,13 @@ limitations under the License.
|
||||
|
||||
.mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
|
||||
content: '';
|
||||
height: 56px;
|
||||
height: calc(100% + 16px);
|
||||
background-color: $accent-color;
|
||||
width: 5px;
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
top: -8px; // (56 - 40)/2
|
||||
top: -8px; // (16px from height / 2)
|
||||
}
|
||||
|
||||
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
|
||||
@ -137,9 +135,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;
|
||||
@ -157,9 +155,9 @@ 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;
|
||||
background-color: $muted-fg-color;
|
||||
}
|
||||
|
||||
.mx_TagTile_badgeHighlight {
|
||||
|
||||
@ -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,26 +37,28 @@ 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 {
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
mask-size: 100%;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&.mx_Toast_icon_verification::after {
|
||||
@ -64,21 +66,63 @@ limitations under the License.
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
|
||||
&.mx_Toast_icon_verification_warning::after {
|
||||
background-image: url("$(res)/img/e2e/warning.svg");
|
||||
&.mx_Toast_icon_verification_warning {
|
||||
// white infill for the hollow svg mask
|
||||
&::before {
|
||||
background-color: #ffffff;
|
||||
mask-image: url('$(res)/img/e2e/normal.svg');
|
||||
mask-size: 90%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
mask-image: url("$(res)/img/e2e/warning.svg");
|
||||
background-color: $notice-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
h2, .mx_Toast_body {
|
||||
&.mx_Toast_icon_element_logo::after {
|
||||
background-image: url("$(res)/img/element-logo.svg");
|
||||
}
|
||||
|
||||
.mx_Toast_title, .mx_Toast_body {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
&:not(.mx_Toast_hasIcon) {
|
||||
padding-left: 12px;
|
||||
|
||||
h2 {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1;
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
.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: $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 {
|
||||
@ -87,20 +131,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: 10px;
|
||||
font-size: $font-10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
/*
|
||||
Copyright 2018 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_TopLeftMenuButton {
|
||||
flex: 0 0 52px;
|
||||
border-bottom: 1px solid $panel-divider-color;
|
||||
color: $topleftmenu-color;
|
||||
background-color: $primary-bg-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
padding: 0 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_TopLeftMenuButton .mx_BaseAvatar {
|
||||
margin: 0 7px;
|
||||
}
|
||||
|
||||
.mx_TopLeftMenuButton_name {
|
||||
margin: 0 7px;
|
||||
font-size: 18px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_TopLeftMenuButton_chevron {
|
||||
margin: 0 7px;
|
||||
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
|
||||
mask-repeat: no-repeat;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
background-color: $roomsublist-label-fg-color;
|
||||
}
|
||||
201
res/css/structures/_UserMenu.scss
Normal file
201
res/css/structures/_UserMenu.scss
Normal file
@ -0,0 +1,201 @@
|
||||
/*
|
||||
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_UserMenu {
|
||||
|
||||
// to make the ... button sort of aligned with the explore button below
|
||||
padding-right: 6px;
|
||||
|
||||
.mx_UserMenu_headerButtons {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
mask-image: url('$(res)/img/element-icons/context-menu.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_row {
|
||||
// Create a row-based flexbox to ensure items stay aligned correctly.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_UserMenu_userAvatarContainer {
|
||||
position: relative; // to make default avatars work
|
||||
margin-right: 8px;
|
||||
height: 32px; // to remove the unknown 4px gap the browser puts below it
|
||||
|
||||
.mx_UserMenu_userAvatar {
|
||||
border-radius: 32px; // should match avatar size
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_userName {
|
||||
font-weight: 600;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-20px;
|
||||
flex: 1;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_UserMenu_headerButtons {
|
||||
// No special styles: the rest of the layout happens to make it work.
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_UserMenu_minimized {
|
||||
.mx_UserMenu_userHeader {
|
||||
.mx_UserMenu_row {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_UserMenu_userAvatarContainer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_contextMenu {
|
||||
width: 247px;
|
||||
|
||||
.mx_UserMenu_contextMenu_redRow {
|
||||
.mx_AccessibleButton {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
color: $warning-color !important; // !important to override styles from context menu
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_contextMenu_header {
|
||||
padding: 20px;
|
||||
|
||||
// Create a flexbox to organize the header a bit easier
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_UserMenu_contextMenu_name {
|
||||
// Create another flexbox of columns to handle large user IDs
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(100% - 40px); // 40px = 32px theme button + 8px margin to theme button
|
||||
|
||||
* {
|
||||
// Automatically grow all subelements to fit the container
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_UserMenu_contextMenu_displayName {
|
||||
font-weight: bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-20px;
|
||||
}
|
||||
|
||||
.mx_UserMenu_contextMenu_userId {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_contextMenu_themeButton {
|
||||
min-width: 32px;
|
||||
max-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 8px;
|
||||
border-radius: 32px;
|
||||
background-color: $theme-button-bg-color;
|
||||
cursor: pointer;
|
||||
|
||||
// to make alignment easier, create flexbox for the image
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconHome::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconBell::before {
|
||||
mask-image: url('$(res)/img/element-icons/notifications.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconLock::before {
|
||||
mask-image: url('$(res)/img/element-icons/security.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconSettings::before {
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconArchive::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/archived.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconMessage::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/feedback.svg');
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconSignOut::before {
|
||||
mask-image: url('$(res)/img/element-icons/leave.svg');
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -26,6 +26,50 @@ limitations under the License.
|
||||
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;
|
||||
@ -34,7 +78,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_CompleteSecurity_body {
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
}
|
||||
|
||||
.mx_CompleteSecurity_waiting {
|
||||
@ -44,6 +88,7 @@ limitations under the License.
|
||||
.mx_CompleteSecurity_actionRow {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: $font-28px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
margin-inline-start: 18px;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ limitations under the License.
|
||||
|
||||
.mx_AuthBody {
|
||||
width: 500px;
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
color: $authpage-secondary-color;
|
||||
background-color: $authpage-body-bg-color;
|
||||
border-radius: 0 4px 4px 0;
|
||||
@ -25,14 +25,14 @@ limitations under the License.
|
||||
box-sizing: border-box;
|
||||
|
||||
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;
|
||||
}
|
||||
@ -98,7 +98,7 @@ limitations under the License.
|
||||
|
||||
.mx_AuthBody_editServerDetails {
|
||||
padding-left: 1em;
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@ -119,6 +119,29 @@ 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_InlineSpinner img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AuthBody_paddedFooter_subtitle {
|
||||
margin-top: 8px;
|
||||
font-size: $font-10px;
|
||||
line-height: $font-14px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AuthBody_changeFlow {
|
||||
display: block;
|
||||
text-align: center;
|
||||
@ -129,26 +152,11 @@ limitations under the License.
|
||||
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;
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_AuthBody {
|
||||
border-radius: 4px;
|
||||
width: auto;
|
||||
max-width: 500px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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));
|
||||
|
||||
@ -21,3 +21,9 @@ limitations under the License.
|
||||
padding: 25px 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_AuthHeader {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,3 +23,9 @@ limitations under the License.
|
||||
.mx_AuthHeaderLogo img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_AuthHeaderLogo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,3 +29,9 @@ limitations under the License.
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
|
||||
background-color: $authpage-modal-bg-color;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_AuthPage_modal {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,13 +24,13 @@ limitations under the License.
|
||||
box-sizing: border-box;
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-size: $font-24px;
|
||||
font-weight: 600;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
37
res/css/views/auth/_PassphraseField.scss
Normal file
37
res/css/views/auth/_PassphraseField.scss
Normal file
@ -0,0 +1,37 @@
|
||||
/*
|
||||
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;
|
||||
|
||||
progress.mx_PassphraseField_progress {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
|
||||
@mixin ProgressBarBorderRadius "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;
|
||||
}
|
||||
|
||||
34
res/css/views/avatars/_DecoratedRoomAvatar.scss
Normal file
34
res/css/views/avatars/_DecoratedRoomAvatar.scss
Normal file
@ -0,0 +1,34 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
// XXX: We shouldn't be using TemporaryTile anywhere - delete it.
|
||||
.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
|
||||
position: relative;
|
||||
|
||||
.mx_RoomTileIcon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mx_NotificationBadge, .mx_RoomTile_badgeContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
30
res/css/views/avatars/_PulsedAvatar.scss
Normal file
30
res/css/views/avatars/_PulsedAvatar.scss
Normal file
@ -0,0 +1,30 @@
|
||||
/*
|
||||
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_PulsedAvatar {
|
||||
@keyframes shadow-pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0px rgba($accent-color, 0.2);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 6px rgba($accent-color, 0);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
animation: shadow-pulse 1s infinite;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -15,25 +15,31 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_TagTileContextMenu_item {
|
||||
padding-top: 8px;
|
||||
padding: 8px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 8px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 16px;
|
||||
line-height: $font-16px;
|
||||
}
|
||||
|
||||
.mx_TagTileContextMenu_item object {
|
||||
pointer-events: none;
|
||||
.mx_TagTileContextMenu_item::before {
|
||||
content: '';
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
background-color: currentColor;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mx_TagTileContextMenu_viewCommunity::before {
|
||||
mask-image: url('$(res)/img/element-icons/view-community.svg');
|
||||
}
|
||||
|
||||
.mx_TagTileContextMenu_item_icon {
|
||||
padding-right: 8px;
|
||||
padding-left: 4px;
|
||||
display: inline-block;
|
||||
.mx_TagTileContextMenu_hideCommunity::before {
|
||||
mask-image: url('$(res)/img/element-icons/hide.svg');
|
||||
}
|
||||
|
||||
.mx_TagTileContextMenu_separator {
|
||||
|
||||
@ -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;
|
||||
@ -72,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;
|
||||
@ -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;
|
||||
|
||||
@ -18,8 +18,3 @@ limitations under the License.
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_GroupAddressPicker_checkboxContainer input[type="checkbox"] {
|
||||
/* Stop flex from shrinking the checkbox */
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
@ -40,8 +40,8 @@ limitations under the License.
|
||||
textarea,
|
||||
textarea:focus {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
font-size: 14px;
|
||||
line-height: $font-34px;
|
||||
font-size: $font-14px;
|
||||
padding-left: 12px;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
@ -65,7 +65,7 @@ limitations under the License.
|
||||
min-width: 48px;
|
||||
margin-left: 10px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
line-height: $font-25px;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_buttonAndSpinner {
|
||||
@ -84,7 +84,7 @@ limitations under the License.
|
||||
padding-bottom: 10px;
|
||||
|
||||
h3 {
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
color: $muted-fg-color;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
@ -143,23 +143,23 @@ limitations under the License.
|
||||
|
||||
.mx_InviteDialog_roomTile_name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-size: $font-14px;
|
||||
color: $primary-fg-color;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_roomTile_userId {
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
color: $muted-fg-color;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_roomTile_time {
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
color: $muted-fg-color;
|
||||
float: right;
|
||||
line-height: 36px; // Height of the avatar to keep the time vertically aligned
|
||||
line-height: $font-36px; // Height of the avatar to keep the time vertically aligned
|
||||
}
|
||||
|
||||
.mx_InviteDialog_roomTile_highlight {
|
||||
@ -176,7 +176,7 @@ limitations under the License.
|
||||
border-radius: 12px;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,6 +32,6 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_NewSessionReviewDialog_deviceID {
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
color: $notice-secondary-color;
|
||||
}
|
||||
|
||||
63
res/css/views/dialogs/_RebrandDialog.scss
Normal file
63
res/css/views/dialogs/_RebrandDialog.scss
Normal file
@ -0,0 +1,63 @@
|
||||
/*
|
||||
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_RebrandDialog {
|
||||
text-align: center;
|
||||
|
||||
a:link,
|
||||
a:hover,
|
||||
a:visited {
|
||||
@mixin mx_Dialog_link;
|
||||
}
|
||||
|
||||
.mx_Dialog_buttons {
|
||||
margin-top: 43px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RebrandDialog_body {
|
||||
width: 550px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx_RebrandDialog_logoContainer {
|
||||
margin-top: 35px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_RebrandDialog_logo {
|
||||
margin-left: 28px;
|
||||
margin-right: 28px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.mx_RebrandDialog_chevron::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $muted-fg-color;
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-right.svg');
|
||||
}
|
||||
@ -18,15 +18,19 @@ limitations under the License.
|
||||
// ==========================================================
|
||||
|
||||
.mx_RoomSettingsDialog_settingsIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_securityIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/lock.svg');
|
||||
mask-image: url('$(res)/img/element-icons/security.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_rolesIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/users-sm.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/settings/roles.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_notificationsIcon::before {
|
||||
mask-image: url('$(res)/img/element-icons/notifications.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_bridgesIcon::before {
|
||||
@ -35,7 +39,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog_warningIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/settings/advanced.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSettingsDialog .mx_Dialog_title {
|
||||
|
||||
@ -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: no-repeat;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
/*
|
||||
Copyright 2016 OpenMarket Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_UnknownDeviceDialog {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
// userid
|
||||
.mx_UnknownDeviceDialog p {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog .mx_Dialog_content {
|
||||
margin-bottom: 24px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog_deviceList > li {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.mx_UnknownDeviceDialog_deviceList > li > * {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@ -18,37 +18,41 @@ limitations under the License.
|
||||
// ==========================================================
|
||||
|
||||
.mx_UserSettingsDialog_settingsIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/settings.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_appearanceIcon::before {
|
||||
mask-image: url('$(res)/img/element-icons/settings/appearance.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_voiceIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/phone.svg');
|
||||
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_bellIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/notifications.svg');
|
||||
mask-image: url('$(res)/img/element-icons/notifications.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_preferencesIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/sliders.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings/preference.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_securityIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/lock.svg');
|
||||
mask-image: url('$(res)/img/element-icons/security.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_helpIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/help-circle.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings/help.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_labsIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/flag.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings/lab-flags.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_mjolnirIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/face.svg');
|
||||
mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_flairIcon::before {
|
||||
mask-image: url('$(res)/img/feather-customised/flair.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings/flair.svg');
|
||||
}
|
||||
|
||||
@ -35,17 +35,6 @@ limitations under the License.
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.mx_CreateKeyBackupDialog_passPhraseHelp {
|
||||
flex: 1;
|
||||
height: 85px;
|
||||
margin-left: 20px;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.mx_CreateKeyBackupDialog_passPhraseHelp progress {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_CreateKeyBackupDialog_passPhraseInput {
|
||||
flex: none;
|
||||
width: 250px;
|
||||
|
||||
@ -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 */
|
||||
}
|
||||
|
||||
@ -15,20 +15,79 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_AccessSecretStorageDialog_titleWithIcon::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_secureBackupTitle::before {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_securePhraseTitle::before {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_keyStatus {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_primaryContainer {
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_passPhraseInput,
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyInput {
|
||||
.mx_AccessSecretStorageDialog_passPhraseInput {
|
||||
width: 300px;
|
||||
border: 1px solid $accent-color;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
|
||||
color: $input-valid-border-color;
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
background-color: $input-valid-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
|
||||
color: $input-invalid-border-color;
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/x.svg');
|
||||
background-color: $input-invalid-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -48,6 +48,29 @@ limitations under the License.
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_titleWithIcon::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_secureBackupTitle::before {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_securePhraseTitle::before {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_centeredTitle, .mx_CreateSecretStorageDialog_centeredBody {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_primaryContainer {
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
|
||||
padding-top: 20px;
|
||||
@ -59,6 +82,36 @@ limitations under the License.
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
|
||||
margin-bottom: 16px;
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_optionTitle {
|
||||
color: $dialog-title-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: $font-18px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_optionIcon {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_passPhraseContainer {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@ -68,49 +121,47 @@ limitations under the License.
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_passPhraseHelp {
|
||||
flex: 1;
|
||||
height: 64px;
|
||||
margin-left: 20px;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_passPhraseHelp progress {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_passPhraseMatch {
|
||||
width: 200px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyHeader {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyContainer {
|
||||
display: flex;
|
||||
width: 380px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKey {
|
||||
width: 262px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: $info-plinth-fg-color;
|
||||
background-color: $info-plinth-bg-color;
|
||||
margin-right: 12px;
|
||||
border-radius: 6px;
|
||||
word-spacing: 1em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyButtons {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyButtons button {
|
||||
flex: 1;
|
||||
width: 160px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_continueSpinner {
|
||||
margin-top: 33px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_continueSpinner img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@ -35,6 +35,8 @@ limitations under the License.
|
||||
border-radius: 4px;
|
||||
border: 1px solid $dialog-close-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_menu_network {
|
||||
@ -47,19 +49,20 @@ limitations under the License.
|
||||
|
||||
.mx_NetworkDropdown_server_title {
|
||||
padding: 0 10px;
|
||||
font-size: 15px;
|
||||
font-size: $font-15px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
line-height: $font-20px;
|
||||
margin-bottom: 4px;
|
||||
position: relative;
|
||||
|
||||
// remove server button
|
||||
.mx_AccessibleButton {
|
||||
position: absolute;
|
||||
display: inline;
|
||||
right: 12px;
|
||||
right: 10px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-top: 4px;
|
||||
margin-top: 2px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@ -77,16 +80,16 @@ limitations under the License.
|
||||
|
||||
.mx_NetworkDropdown_server_subtitle {
|
||||
padding: 0 10px;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
font-size: $font-10px;
|
||||
line-height: $font-14px;
|
||||
margin-top: -4px;
|
||||
margin-bottom: 4px;
|
||||
color: $muted-fg-color;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_server_network {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-16px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@ -154,7 +157,7 @@ limitations under the License.
|
||||
|
||||
.mx_NetworkDropdown_handle_server {
|
||||
color: $muted-fg-color;
|
||||
font-size: 12px;
|
||||
font-size: $font-12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -23,6 +23,7 @@ limitations under the License.
|
||||
border-radius: 3px;
|
||||
border: solid 1px $accent-color;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mx_AddressSelector.mx_AddressSelector_empty {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -32,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;
|
||||
|
||||
@ -53,6 +53,9 @@ limitations under the License.
|
||||
.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 {
|
||||
|
||||
@ -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;
|
||||
@ -191,5 +191,5 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Field .mx_CountryDropdown {
|
||||
width: 67px;
|
||||
width: $font-78px;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -18,7 +18,7 @@ limitations under the License.
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.mx_InlineSpinner img {
|
||||
.mx_InlineSpinner_spin img {
|
||||
margin: 0px 6px;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
|
||||
@ -1,91 +0,0 @@
|
||||
/*
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_InteractiveTooltip_wrapper {
|
||||
position: fixed;
|
||||
z-index: 5000;
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip {
|
||||
border-radius: 3px;
|
||||
background-color: $interactive-tooltip-bg-color;
|
||||
color: $interactive-tooltip-fg-color;
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 6px;
|
||||
z-index: 5001;
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
|
||||
top: 10px; // 8px chevron + 2px spacing
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip_chevron_top {
|
||||
position: absolute;
|
||||
left: calc(50% - 8px);
|
||||
top: -8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-bottom: 8px solid $interactive-tooltip-bg-color;
|
||||
border-right: 8px solid transparent;
|
||||
}
|
||||
|
||||
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
|
||||
// by Sebastiano Guerriero (@guerriero_se)
|
||||
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
|
||||
.mx_InteractiveTooltip_chevron_top {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
|
||||
transform: rotate(135deg);
|
||||
border-radius: 0 0 0 3px;
|
||||
top: calc(-8px / 1.414); // sqrt(2) because of rotation
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
|
||||
bottom: 10px; // 8px chevron + 2px spacing
|
||||
}
|
||||
|
||||
.mx_InteractiveTooltip_chevron_bottom {
|
||||
position: absolute;
|
||||
left: calc(50% - 8px);
|
||||
bottom: -8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-top: 8px solid $interactive-tooltip-bg-color;
|
||||
border-right: 8px solid transparent;
|
||||
}
|
||||
|
||||
// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
|
||||
// by Sebastiano Guerriero (@guerriero_se)
|
||||
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
|
||||
.mx_InteractiveTooltip_chevron_bottom {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
|
||||
transform: rotate(-45deg);
|
||||
border-radius: 0 0 0 3px;
|
||||
bottom: calc(-8px / 1.414); // sqrt(2) because of rotation
|
||||
}
|
||||
}
|
||||
@ -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.
|
||||
@ -14,12 +14,26 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_ProgressBar {
|
||||
height: 5px;
|
||||
border: 1px solid $progressbar-color;
|
||||
}
|
||||
progress.mx_ProgressBar {
|
||||
height: 4px;
|
||||
width: 60px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
|
||||
.mx_ProgressBar_fill {
|
||||
height: 100%;
|
||||
background-color: $progressbar-color;
|
||||
@mixin ProgressBarBorderRadius "10px";
|
||||
@mixin ProgressBarColour $accent-color;
|
||||
::-webkit-progress-value {
|
||||
transition: width 1s;
|
||||
}
|
||||
::-moz-progress-bar {
|
||||
transition: padding-bottom 1s;
|
||||
padding-bottom: var(--value);
|
||||
transform-origin: 0 0;
|
||||
transform: rotate(-90deg) translateX(-15px);
|
||||
padding-left: 15px;
|
||||
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
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,6 +14,8 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_ReactionsRowButtonTooltip_reactedWith {
|
||||
opacity: 0.7;
|
||||
.mx_QRCode {
|
||||
img {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
@ -6,16 +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 {
|
||||
word-break: break-all;
|
||||
display: inline;
|
||||
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 */
|
||||
@ -28,7 +45,6 @@ a.mx_Pill {
|
||||
.mx_UserPill {
|
||||
color: $primary-fg-color;
|
||||
background-color: $other-user-pill-bg-color;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.mx_UserPill_selected {
|
||||
@ -42,7 +58,6 @@ a.mx_Pill {
|
||||
.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 */
|
||||
@ -52,15 +67,6 @@ a.mx_Pill {
|
||||
.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,
|
||||
@ -74,8 +80,10 @@ a.mx_Pill {
|
||||
.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%;
|
||||
}
|
||||
84
res/css/views/elements/_StyledCheckbox.scss
Normal file
84
res/css/views/elements/_StyledCheckbox.scss
Normal file
@ -0,0 +1,84 @@
|
||||
/*
|
||||
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_Checkbox {
|
||||
$size: $font-16px;
|
||||
$border-size: $font-1-5px;
|
||||
$border-radius: $font-4px;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
input[type=checkbox] {
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& + label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
& + label > .mx_Checkbox_background {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
|
||||
flex-shrink: 0;
|
||||
|
||||
height: $size;
|
||||
width: $size;
|
||||
size: 0.5rem;
|
||||
|
||||
border: $border-size solid rgba($muted-fg-color, 0.5);
|
||||
box-sizing: border-box;
|
||||
border-radius: $border-radius;
|
||||
|
||||
img {
|
||||
display: none;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
filter: invert(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + label > .mx_Checkbox_background {
|
||||
background: $accent-color;
|
||||
border-color: $accent-color;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
& + label > *:not(.mx_Checkbox_background) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:disabled + label {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:checked:disabled + label > .mx_Checkbox_background {
|
||||
background-color: $accent-color;
|
||||
border-color: $accent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
117
res/css/views/elements/_StyledRadioButton.scss
Normal file
117
res/css/views/elements/_StyledRadioButton.scss
Normal file
@ -0,0 +1,117 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
/**
|
||||
* This component expects the parent to specify a positive padding and
|
||||
* width
|
||||
*/
|
||||
|
||||
.mx_RadioButton {
|
||||
$radio-circle-color: $muted-fg-color;
|
||||
$active-radio-circle-color: $accent-color;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-grow: 1;
|
||||
|
||||
> .mx_RadioButton_content {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mx_RadioButton_spacer {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
height: $font-16px;
|
||||
width: $font-16px;
|
||||
}
|
||||
|
||||
> input[type=radio] {
|
||||
// Remove the OS's representation
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
appearance: none;
|
||||
|
||||
+ div {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
box-sizing: border-box;
|
||||
height: $font-16px;
|
||||
width: $font-16px;
|
||||
|
||||
border: $font-1-5px solid $radio-circle-color;
|
||||
border-radius: $font-16px;
|
||||
|
||||
> div {
|
||||
box-sizing: border-box;
|
||||
|
||||
height: $font-8px;
|
||||
width: $font-8px;
|
||||
|
||||
border-radius: $font-8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
& + div {
|
||||
border-color: $active-radio-circle-color;
|
||||
|
||||
& > div {
|
||||
background: $active-radio-circle-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
& + div,
|
||||
& + div + span {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
& + div {
|
||||
border-color: $radio-circle-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked:disabled {
|
||||
& + div > div {
|
||||
background-color: $radio-circle-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RadioButton_outlined {
|
||||
border: 1px solid $input-darker-bg-color;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_RadioButton_checked {
|
||||
border-color: $accent-color;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -51,21 +51,27 @@ limitations under the License.
|
||||
.mx_Tooltip {
|
||||
display: none;
|
||||
position: fixed;
|
||||
border: 1px solid $menu-border-color;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
|
||||
background-color: $menu-bg-color;
|
||||
z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
|
||||
z-index: 6000; // Higher than context menu so tooltips can be used everywhere
|
||||
padding: 10px;
|
||||
pointer-events: none;
|
||||
line-height: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: $primary-fg-color;
|
||||
line-height: $font-14px;
|
||||
font-size: $font-12px;
|
||||
font-weight: 500;
|
||||
max-width: 200px;
|
||||
word-break: break-word;
|
||||
margin-right: 50px;
|
||||
|
||||
background-color: $inverted-bg-color;
|
||||
color: $accent-fg-color;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
|
||||
.mx_Tooltip_chevron {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.mx_Tooltip_visible {
|
||||
animation: mx_fadein 0.2s forwards;
|
||||
}
|
||||
@ -75,18 +81,23 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Tooltip_timeline {
|
||||
box-shadow: none;
|
||||
background-color: $tooltip-timeline-bg-color;
|
||||
color: $tooltip-timeline-fg-color;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
padding: 6px 8px;
|
||||
// These tooltips use an older style with a chevron
|
||||
.mx_Field_tooltip {
|
||||
background-color: $menu-bg-color;
|
||||
color: $primary-fg-color;
|
||||
border: 1px solid $menu-border-color;
|
||||
text-align: unset;
|
||||
|
||||
.mx_Tooltip_chevron::after {
|
||||
border-right-color: $tooltip-timeline-bg-color;
|
||||
.mx_Tooltip_chevron {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Tooltip_title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mx_Tooltip_sub {
|
||||
opacity: 0.7;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@ limitations under the License.
|
||||
transition: opacity 0.2s ease-in;
|
||||
opacity: 0.6;
|
||||
|
||||
line-height: 11px;
|
||||
line-height: $font-11px;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user