mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-16 05:04:57 +08:00
Merge remote-tracking branch 'upstream/develop' into feature/image-view-load-anim/18186
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner
commit
1a128c3a00
@ -63,6 +63,11 @@ module.exports = {
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
},
|
||||
}],
|
||||
settings: {
|
||||
react: {
|
||||
version: "detect",
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function buildRestrictedPropertiesOptions(properties, message) {
|
||||
|
||||
1
.github/CODEOWNERS
vendored
Normal file
1
.github/CODEOWNERS
vendored
Normal file
@ -0,0 +1 @@
|
||||
* @matrix-org/element-web
|
||||
2
.github/workflows/develop.yml
vendored
2
.github/workflows/develop.yml
vendored
@ -10,6 +10,8 @@ on:
|
||||
jobs:
|
||||
end-to-end:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
PR_NUMBER: ${{github.event.number}}
|
||||
container: vectorim/element-web-ci-e2etests-env:latest
|
||||
steps:
|
||||
- name: Checkout code
|
||||
|
||||
31
.github/workflows/layered-build.yaml
vendored
Normal file
31
.github/workflows/layered-build.yaml
vendored
Normal file
@ -0,0 +1,31 @@
|
||||
name: Layered Preview Build
|
||||
on:
|
||||
pull_request:
|
||||
branches: [develop]
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Build
|
||||
run: scripts/ci/layered.sh && cd element-web && cp element.io/develop/config.json config.json && CI_PACKAGE=true yarn build
|
||||
- name: Upload Artifact
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: previewbuild
|
||||
path: element-web/webapp
|
||||
# We'll only use this in a triggered job, then we're done with it
|
||||
retention-days: 1
|
||||
- uses: actions/github-script@v3.1.0
|
||||
with:
|
||||
script: |
|
||||
var fs = require('fs');
|
||||
fs.writeFileSync('${{github.workspace}}/pr.json', JSON.stringify(context.payload.pull_request));
|
||||
- name: Upload PR Info
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: pr.json
|
||||
path: pr.json
|
||||
# We'll only use this in a triggered job, then we're done with it
|
||||
retention-days: 1
|
||||
|
||||
80
.github/workflows/netlify.yaml
vendored
Normal file
80
.github/workflows/netlify.yaml
vendored
Normal file
@ -0,0 +1,80 @@
|
||||
name: Upload Preview Build to Netlify
|
||||
on:
|
||||
workflow_run:
|
||||
workflows: ["Layered Preview Build"]
|
||||
types:
|
||||
- completed
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
if: >
|
||||
${{ github.event.workflow_run.conclusion == 'success' }}
|
||||
steps:
|
||||
# There's a 'download artifact' action but it hasn't been updated for the
|
||||
# workflow_run action (https://github.com/actions/download-artifact/issues/60)
|
||||
# so instead we get this mess:
|
||||
- name: 'Download artifact'
|
||||
uses: actions/github-script@v3.1.0
|
||||
with:
|
||||
script: |
|
||||
var artifacts = await github.actions.listWorkflowRunArtifacts({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
run_id: ${{github.event.workflow_run.id }},
|
||||
});
|
||||
var matchArtifact = artifacts.data.artifacts.filter((artifact) => {
|
||||
return artifact.name == "previewbuild"
|
||||
})[0];
|
||||
var download = await github.actions.downloadArtifact({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
artifact_id: matchArtifact.id,
|
||||
archive_format: 'zip',
|
||||
});
|
||||
var fs = require('fs');
|
||||
fs.writeFileSync('${{github.workspace}}/previewbuild.zip', Buffer.from(download.data));
|
||||
|
||||
var prInfoArtifact = artifacts.data.artifacts.filter((artifact) => {
|
||||
return artifact.name == "pr.json"
|
||||
})[0];
|
||||
var download = await github.actions.downloadArtifact({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
artifact_id: prInfoArtifact.id,
|
||||
archive_format: 'zip',
|
||||
});
|
||||
var fs = require('fs');
|
||||
fs.writeFileSync('${{github.workspace}}/pr.json.zip', Buffer.from(download.data));
|
||||
- name: Extract Artifacts
|
||||
run: unzip -d webapp previewbuild.zip && rm previewbuild.zip && unzip pr.json.zip && rm pr.json.zip
|
||||
- name: 'Read PR Info'
|
||||
id: readctx
|
||||
uses: actions/github-script@v3.1.0
|
||||
with:
|
||||
script: |
|
||||
var fs = require('fs');
|
||||
var pr = JSON.parse(fs.readFileSync('${{github.workspace}}/pr.json'));
|
||||
console.log(`::set-output name=prnumber::${pr.number}`);
|
||||
- name: Deploy to Netlify
|
||||
id: netlify
|
||||
uses: nwtgck/actions-netlify@v1.2
|
||||
with:
|
||||
publish-dir: webapp
|
||||
deploy-message: "Deploy from GitHub Actions"
|
||||
# These don't work because we're in workflow_run
|
||||
enable-pull-request-comment: false
|
||||
enable-commit-comment: false
|
||||
env:
|
||||
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
|
||||
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
|
||||
timeout-minutes: 1
|
||||
- name: Edit PR Description
|
||||
uses: velas/pr-description@v1.0.1
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
with:
|
||||
pull-request-number: ${{ steps.readctx.outputs.prnumber }}
|
||||
description-message: |
|
||||
Preview: ${{ steps.netlify.outputs.deploy-url }}
|
||||
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.
|
||||
|
||||
12
.github/workflows/preview_changelog.yaml
vendored
Normal file
12
.github/workflows/preview_changelog.yaml
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
name: Preview Changelog
|
||||
on:
|
||||
pull_request_target:
|
||||
types: [ opened, edited, labeled ]
|
||||
jobs:
|
||||
changelog:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Preview Changelog
|
||||
uses: matrix-org/allchange@main
|
||||
with:
|
||||
ghToken: ${{ secrets.GITHUB_TOKEN }}
|
||||
24
.github/workflows/typecheck.yaml
vendored
Normal file
24
.github/workflows/typecheck.yaml
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
name: Type Check
|
||||
on:
|
||||
pull_request:
|
||||
branches: [develop]
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: c-hive/gha-yarn-cache@v2
|
||||
- name: Install Deps
|
||||
run: "./scripts/ci/install-deps.sh --ignore-scripts"
|
||||
- name: Typecheck
|
||||
run: "yarn run lint:types"
|
||||
- name: Switch js-sdk to release mode
|
||||
run: |
|
||||
scripts/ci/js-sdk-to-release.js
|
||||
cd node_modules/matrix-js-sdk
|
||||
yarn install
|
||||
yarn run build:compile
|
||||
yarn run build:types
|
||||
- name: Typecheck (release mode)
|
||||
run: "yarn run lint:types"
|
||||
|
||||
1
.node-version
Normal file
1
.node-version
Normal file
@ -0,0 +1 @@
|
||||
14
|
||||
@ -17,6 +17,7 @@ module.exports = {
|
||||
"selector-list-comma-newline-after": null,
|
||||
"at-rule-no-unknown": null,
|
||||
"no-descending-specificity": null,
|
||||
"no-empty-first-line": true,
|
||||
"scss/at-rule-no-unknown": [true, {
|
||||
// https://github.com/vector-im/element-web/issues/10544
|
||||
"ignoreAtRules": ["define-mixin"],
|
||||
|
||||
235
CHANGELOG.md
235
CHANGELOG.md
@ -1,3 +1,238 @@
|
||||
Changes in [3.29.0](https://github.com/vector-im/element-desktop/releases/tag/v3.29.0) (2021-08-31)
|
||||
===================================================================================================
|
||||
|
||||
## ✨ Features
|
||||
* [Release]Increase general app performance by optimizing layers ([\#6672](https://github.com/matrix-org/matrix-react-sdk/pull/6672)). Fixes vector-im/element-web#18730 and vector-im/element-web#18730. Contributed by [Palid](https://github.com/Palid).
|
||||
* Add a warning on E2EE rooms if you try to make them public ([\#5698](https://github.com/matrix-org/matrix-react-sdk/pull/5698)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Allow pagination of the space hierarchy and use new APIs ([\#6507](https://github.com/matrix-org/matrix-react-sdk/pull/6507)). Fixes vector-im/element-web#18089 and vector-im/element-web#18427.
|
||||
* Improve emoji in composer ([\#6650](https://github.com/matrix-org/matrix-react-sdk/pull/6650)). Fixes vector-im/element-web#18593 and vector-im/element-web#18593. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Allow playback of replied-to voice message ([\#6629](https://github.com/matrix-org/matrix-react-sdk/pull/6629)). Fixes vector-im/element-web#18599 and vector-im/element-web#18599. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Format autocomplete suggestions vertically ([\#6620](https://github.com/matrix-org/matrix-react-sdk/pull/6620)). Fixes vector-im/element-web#17574 and vector-im/element-web#17574. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Remember last `MemberList` search query per-room ([\#6640](https://github.com/matrix-org/matrix-react-sdk/pull/6640)). Fixes vector-im/element-web#18613 and vector-im/element-web#18613. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Sentry rageshakes ([\#6597](https://github.com/matrix-org/matrix-react-sdk/pull/6597)). Fixes vector-im/element-web#11111 and vector-im/element-web#11111. Contributed by [novocaine](https://github.com/novocaine).
|
||||
* Autocomplete has been updated to match modern accessibility standards. Navigate via up/down arrows rather than Tab. Enter or Tab to confirm a suggestion. This should be familiar to Slack & Discord users. You can now use Tab to navigate around the application and do more without touching your mouse. No more accidentally sending half of people's names because the completion didn't fire on Enter! ([\#5659](https://github.com/matrix-org/matrix-react-sdk/pull/5659)). Fixes vector-im/element-web#4872, vector-im/element-web#11071, vector-im/element-web#17171, vector-im/element-web#15646 vector-im/element-web#4872 and vector-im/element-web#4872.
|
||||
* Add new call tile states ([\#6610](https://github.com/matrix-org/matrix-react-sdk/pull/6610)). Fixes vector-im/element-web#18521 and vector-im/element-web#18521. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Left align call tiles ([\#6609](https://github.com/matrix-org/matrix-react-sdk/pull/6609)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Make loading encrypted images look snappier ([\#6590](https://github.com/matrix-org/matrix-react-sdk/pull/6590)). Fixes vector-im/element-web#17878 and vector-im/element-web#17862. Contributed by [Palid](https://github.com/Palid).
|
||||
* Offer a way to create a space based on existing community ([\#6543](https://github.com/matrix-org/matrix-react-sdk/pull/6543)). Fixes vector-im/element-web#18092.
|
||||
* Accessibility improvements in and around Spaces ([\#6569](https://github.com/matrix-org/matrix-react-sdk/pull/6569)). Fixes vector-im/element-web#18094 and vector-im/element-web#18094.
|
||||
|
||||
## 🐛 Bug Fixes
|
||||
* [Release] Fix commit edit history ([\#6690](https://github.com/matrix-org/matrix-react-sdk/pull/6690)). Fixes vector-im/element-web#18742 and vector-im/element-web#18742. Contributed by [Palid](https://github.com/Palid).
|
||||
* Fix images not rendering when sent from other clients. ([\#6661](https://github.com/matrix-org/matrix-react-sdk/pull/6661)). Fixes vector-im/element-web#18702 and vector-im/element-web#18702.
|
||||
* Fix autocomplete scrollbar and make the autocomplete a little smaller ([\#6655](https://github.com/matrix-org/matrix-react-sdk/pull/6655)). Fixes vector-im/element-web#18682 and vector-im/element-web#18682. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix replies on the bubble layout ([\#6451](https://github.com/matrix-org/matrix-react-sdk/pull/6451)). Fixes vector-im/element-web#18184. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Show "Enable encryption in settings" only when the user can do that ([\#6646](https://github.com/matrix-org/matrix-react-sdk/pull/6646)). Fixes vector-im/element-web#18646 and vector-im/element-web#18646. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix cross signing setup from settings screen ([\#6633](https://github.com/matrix-org/matrix-react-sdk/pull/6633)). Fixes vector-im/element-web#17761 and vector-im/element-web#17761.
|
||||
* Fix call tiles on the bubble layout ([\#6647](https://github.com/matrix-org/matrix-react-sdk/pull/6647)). Fixes vector-im/element-web#18648 and vector-im/element-web#18648. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix error on accessing encrypted media without encryption keys ([\#6625](https://github.com/matrix-org/matrix-react-sdk/pull/6625)). Contributed by [Palid](https://github.com/Palid).
|
||||
* Fix jitsi widget sometimes being permanently stuck in the bottom-right corner ([\#6632](https://github.com/matrix-org/matrix-react-sdk/pull/6632)). Fixes vector-im/element-web#17226 and vector-im/element-web#17226. Contributed by [Palid](https://github.com/Palid).
|
||||
* Fix FilePanel pagination in E2EE rooms ([\#6630](https://github.com/matrix-org/matrix-react-sdk/pull/6630)). Fixes vector-im/element-web#18415 and vector-im/element-web#18415. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix call tile buttons ([\#6624](https://github.com/matrix-org/matrix-react-sdk/pull/6624)). Fixes vector-im/element-web#18565 and vector-im/element-web#18565. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix vertical call tile spacing issues ([\#6621](https://github.com/matrix-org/matrix-react-sdk/pull/6621)). Fixes vector-im/element-web#18558 and vector-im/element-web#18558. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix long display names in call tiles ([\#6618](https://github.com/matrix-org/matrix-react-sdk/pull/6618)). Fixes vector-im/element-web#18562 and vector-im/element-web#18562. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Avoid access token overflow ([\#6616](https://github.com/matrix-org/matrix-react-sdk/pull/6616)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Properly handle media errors ([\#6615](https://github.com/matrix-org/matrix-react-sdk/pull/6615)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix glare related regressions ([\#6614](https://github.com/matrix-org/matrix-react-sdk/pull/6614)). Fixes vector-im/element-web#18538 and vector-im/element-web#18538. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix long display names in call toasts ([\#6617](https://github.com/matrix-org/matrix-react-sdk/pull/6617)). Fixes vector-im/element-web#18557 and vector-im/element-web#18557. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix PiP of held calls ([\#6611](https://github.com/matrix-org/matrix-react-sdk/pull/6611)). Fixes vector-im/element-web#18539 and vector-im/element-web#18539. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix call tile behaviour on narrow layouts ([\#6556](https://github.com/matrix-org/matrix-react-sdk/pull/6556)). Fixes vector-im/element-web#18398. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix video call persisting when widget removed ([\#6608](https://github.com/matrix-org/matrix-react-sdk/pull/6608)). Fixes vector-im/element-web#15703 and vector-im/element-web#15703.
|
||||
* Fix toast colors ([\#6606](https://github.com/matrix-org/matrix-react-sdk/pull/6606)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Remove tiny scrollbar dot from code blocks ([\#6596](https://github.com/matrix-org/matrix-react-sdk/pull/6596)). Fixes vector-im/element-web#18474. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Improve handling of pills in the composer ([\#6353](https://github.com/matrix-org/matrix-react-sdk/pull/6353)). Fixes vector-im/element-web#10134 vector-im/element-web#10896 and vector-im/element-web#15037. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
|
||||
Changes in [3.28.1](https://github.com/vector-im/element-desktop/releases/tag/v3.28.1) (2021-08-17)
|
||||
===================================================================================================
|
||||
|
||||
## 🐛 Bug Fixes
|
||||
* Fix multiple VoIP regressions ([matrix-org/matrix-js-sdk#1860](https://github.com/matrix-org/matrix-js-sdk/pull/1860)).
|
||||
|
||||
Changes in [3.28.0](https://github.com/vector-im/element-desktop/releases/tag/v3.28.0) (2021-08-16)
|
||||
===================================================================================================
|
||||
|
||||
## ✨ Features
|
||||
* Show how long a call was on call tiles ([\#6570](https://github.com/matrix-org/matrix-react-sdk/pull/6570)). Fixes vector-im/element-web#18405. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Add regional indicators to emoji picker ([\#6490](https://github.com/matrix-org/matrix-react-sdk/pull/6490)). Fixes vector-im/element-web#14963. Contributed by [robintown](https://github.com/robintown).
|
||||
* Make call control buttons accessible to screen reader users ([\#6181](https://github.com/matrix-org/matrix-react-sdk/pull/6181)). Fixes vector-im/element-web#18358. Contributed by [pvagner](https://github.com/pvagner).
|
||||
* Skip sending a thumbnail if it is not a sufficient saving over the original ([\#6559](https://github.com/matrix-org/matrix-react-sdk/pull/6559)). Fixes vector-im/element-web#17906.
|
||||
* Increase PiP snapping speed ([\#6539](https://github.com/matrix-org/matrix-react-sdk/pull/6539)). Fixes vector-im/element-web#18371. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Improve and move the incoming call toast ([\#6470](https://github.com/matrix-org/matrix-react-sdk/pull/6470)). Fixes vector-im/element-web#17912. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Allow all of the URL schemes that Firefox allows ([\#6457](https://github.com/matrix-org/matrix-react-sdk/pull/6457)). Contributed by [aaronraimist](https://github.com/aaronraimist).
|
||||
* Improve bubble layout colors ([\#6452](https://github.com/matrix-org/matrix-react-sdk/pull/6452)). Fixes vector-im/element-web#18081. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Spaces let users switch between Home and All Rooms behaviours ([\#6497](https://github.com/matrix-org/matrix-react-sdk/pull/6497)). Fixes vector-im/element-web#18093.
|
||||
* Support for MSC2285 (hidden read receipts) ([\#6390](https://github.com/matrix-org/matrix-react-sdk/pull/6390)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Group pinned message events with MELS ([\#6349](https://github.com/matrix-org/matrix-react-sdk/pull/6349)). Fixes vector-im/element-web#17938. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Make version copiable ([\#6227](https://github.com/matrix-org/matrix-react-sdk/pull/6227)). Fixes vector-im/element-web#17603 and vector-im/element-web#18329. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Improve voice messages uploading state ([\#6530](https://github.com/matrix-org/matrix-react-sdk/pull/6530)). Fixes vector-im/element-web#18226 and vector-im/element-web#18224.
|
||||
* Add surround with feature ([\#5510](https://github.com/matrix-org/matrix-react-sdk/pull/5510)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Improve call event tile wording ([\#6545](https://github.com/matrix-org/matrix-react-sdk/pull/6545)). Fixes vector-im/element-web#18376. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Show an avatar/a turned off microphone icon for muted users ([\#6486](https://github.com/matrix-org/matrix-react-sdk/pull/6486)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Prompt user to leave rooms/subspaces in a space when leaving space ([\#6424](https://github.com/matrix-org/matrix-react-sdk/pull/6424)). Fixes vector-im/element-web#18071.
|
||||
* Add customisation point to override widget variables ([\#6455](https://github.com/matrix-org/matrix-react-sdk/pull/6455)). Fixes vector-im/element-web#18035.
|
||||
* Add support for screen sharing in 1:1 calls ([\#5992](https://github.com/matrix-org/matrix-react-sdk/pull/5992)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
|
||||
## 🐛 Bug Fixes
|
||||
* [Release] Fix glare related regressions ([\#6622](https://github.com/matrix-org/matrix-react-sdk/pull/6622)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* [Release] Fix PiP of held calls ([\#6612](https://github.com/matrix-org/matrix-react-sdk/pull/6612)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* [Release] Fix toast colors ([\#6607](https://github.com/matrix-org/matrix-react-sdk/pull/6607)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix [object Object] in Widget Permissions ([\#6560](https://github.com/matrix-org/matrix-react-sdk/pull/6560)). Fixes vector-im/element-web#18384. Contributed by [Palid](https://github.com/Palid).
|
||||
* Fix right margin for events on IRC layout ([\#6542](https://github.com/matrix-org/matrix-react-sdk/pull/6542)). Fixes vector-im/element-web#18354.
|
||||
* Mirror only usermedia feeds ([\#6512](https://github.com/matrix-org/matrix-react-sdk/pull/6512)). Fixes vector-im/element-web#5633. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix LogoutDialog warning + TypeScript migration ([\#6533](https://github.com/matrix-org/matrix-react-sdk/pull/6533)).
|
||||
* Fix the wrong font being used in the room topic field ([\#6527](https://github.com/matrix-org/matrix-react-sdk/pull/6527)). Fixes vector-im/element-web#18339. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix inconsistent styling for links on hover ([\#6513](https://github.com/matrix-org/matrix-react-sdk/pull/6513)). Contributed by [janogarcia](https://github.com/janogarcia).
|
||||
* Fix incorrect height for encoded placeholder images ([\#6514](https://github.com/matrix-org/matrix-react-sdk/pull/6514)). Contributed by [Palid](https://github.com/Palid).
|
||||
* Fix call events layout for message bubble ([\#6465](https://github.com/matrix-org/matrix-react-sdk/pull/6465)). Fixes vector-im/element-web#18144.
|
||||
* Improve subspaces and some utilities around room/space creation ([\#6458](https://github.com/matrix-org/matrix-react-sdk/pull/6458)). Fixes vector-im/element-web#18090 vector-im/element-web#18091 and vector-im/element-web#17256.
|
||||
* Restore pointer cursor for SenderProfile in message bubbles ([\#6501](https://github.com/matrix-org/matrix-react-sdk/pull/6501)). Fixes vector-im/element-web#18249.
|
||||
* Fix issues with the Call View ([\#6472](https://github.com/matrix-org/matrix-react-sdk/pull/6472)). Fixes vector-im/element-web#18221. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Align event list summary read receipts when using message bubbles ([\#6500](https://github.com/matrix-org/matrix-react-sdk/pull/6500)). Fixes vector-im/element-web#18143.
|
||||
* Better positioning for unbubbled events in timeline ([\#6477](https://github.com/matrix-org/matrix-react-sdk/pull/6477)). Fixes vector-im/element-web#18132.
|
||||
* Realign reactions row with messages in modern layout ([\#6491](https://github.com/matrix-org/matrix-react-sdk/pull/6491)). Fixes vector-im/element-web#18118. Contributed by [robintown](https://github.com/robintown).
|
||||
* Fix CreateRoomDialog exploding when making public room outside of a space ([\#6492](https://github.com/matrix-org/matrix-react-sdk/pull/6492)). Fixes vector-im/element-web#18275.
|
||||
* Fix call crashing because `element` was undefined ([\#6488](https://github.com/matrix-org/matrix-react-sdk/pull/6488)). Fixes vector-im/element-web#18270. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Upscale thumbnails to the container size ([\#6589](https://github.com/matrix-org/matrix-react-sdk/pull/6589)). Fixes vector-im/element-web#18307.
|
||||
* Fix create room dialog in spaces no longer adding to the space ([\#6587](https://github.com/matrix-org/matrix-react-sdk/pull/6587)). Fixes vector-im/element-web#18465.
|
||||
* Don't show a modal on call reject/user hangup ([\#6580](https://github.com/matrix-org/matrix-react-sdk/pull/6580)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fade Call View Buttons after `componentDidMount` ([\#6581](https://github.com/matrix-org/matrix-react-sdk/pull/6581)). Fixes vector-im/element-web#18439. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix missing expand button on codeblocks ([\#6565](https://github.com/matrix-org/matrix-react-sdk/pull/6565)). Fixes vector-im/element-web#18388. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* allow customizing the bubble layout colors ([\#6568](https://github.com/matrix-org/matrix-react-sdk/pull/6568)). Fixes vector-im/element-web#18408. Contributed by [benneti](https://github.com/benneti).
|
||||
* Don't flash "Missed call" when accepting a call ([\#6567](https://github.com/matrix-org/matrix-react-sdk/pull/6567)). Fixes vector-im/element-web#18404. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix clicking whitespaces on replies ([\#6571](https://github.com/matrix-org/matrix-react-sdk/pull/6571)). Fixes vector-im/element-web#18327. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix disabled state for voice messages + send button tooltip ([\#6562](https://github.com/matrix-org/matrix-react-sdk/pull/6562)). Fixes vector-im/element-web#18413.
|
||||
* Fix voice feed being cut-off ([\#6550](https://github.com/matrix-org/matrix-react-sdk/pull/6550)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix sizing issues of the screen picker ([\#6498](https://github.com/matrix-org/matrix-react-sdk/pull/6498)). Fixes vector-im/element-web#18281. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Stop voice messages that are playing when starting a recording ([\#6563](https://github.com/matrix-org/matrix-react-sdk/pull/6563)). Fixes vector-im/element-web#18410.
|
||||
* Properly set style attribute on shared usercontent iframe ([\#6561](https://github.com/matrix-org/matrix-react-sdk/pull/6561)). Fixes vector-im/element-web#18414.
|
||||
* Null guard space inviter to prevent the app exploding ([\#6558](https://github.com/matrix-org/matrix-react-sdk/pull/6558)).
|
||||
* Make the ringing sound mutable/disablable ([\#6534](https://github.com/matrix-org/matrix-react-sdk/pull/6534)). Fixes vector-im/element-web#15591. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix wrong cursor being used in PiP ([\#6551](https://github.com/matrix-org/matrix-react-sdk/pull/6551)). Fixes vector-im/element-web#18383. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Re-pin Jitsi if the widget already exists ([\#6226](https://github.com/matrix-org/matrix-react-sdk/pull/6226)). Fixes vector-im/element-web#17679. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix broken call notification regression ([\#6526](https://github.com/matrix-org/matrix-react-sdk/pull/6526)). Fixes vector-im/element-web#18335. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* createRoom, only send join rule event if we have a join rule to put in it ([\#6516](https://github.com/matrix-org/matrix-react-sdk/pull/6516)). Fixes vector-im/element-web#18301.
|
||||
* Fix clicking pills inside replies ([\#6508](https://github.com/matrix-org/matrix-react-sdk/pull/6508)). Fixes vector-im/element-web#18283. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix grecaptcha regression ([\#6503](https://github.com/matrix-org/matrix-react-sdk/pull/6503)). Fixes vector-im/element-web#18284. Contributed by [Palid](https://github.com/Palid).
|
||||
|
||||
Changes in [3.27.0](https://github.com/vector-im/element-desktop/releases/tag/v3.27.0) (2021-08-02)
|
||||
===================================================================================================
|
||||
|
||||
## 🔒 SECURITY FIXES
|
||||
* Sanitize untrusted variables from message previews before translation
|
||||
Fixes vector-im/element-web#18314
|
||||
|
||||
## ✨ Features
|
||||
* Fix editing of `<sub>` & `<sup`> & `<u>`
|
||||
[\#6469](https://github.com/matrix-org/matrix-react-sdk/pull/6469)
|
||||
Fixes vector-im/element-web#18211
|
||||
* Zoom images in lightbox to where the cursor points
|
||||
[\#6418](https://github.com/matrix-org/matrix-react-sdk/pull/6418)
|
||||
Fixes vector-im/element-web#17870
|
||||
* Avoid hitting the settings store from TextForEvent
|
||||
[\#6205](https://github.com/matrix-org/matrix-react-sdk/pull/6205)
|
||||
Fixes vector-im/element-web#17650
|
||||
* Initial MSC3083 + MSC3244 support
|
||||
[\#6212](https://github.com/matrix-org/matrix-react-sdk/pull/6212)
|
||||
Fixes vector-im/element-web#17686 and vector-im/element-web#17661
|
||||
* Navigate to the first room with notifications when clicked on space notification dot
|
||||
[\#5974](https://github.com/matrix-org/matrix-react-sdk/pull/5974)
|
||||
* Add matrix: to the list of permitted URL schemes
|
||||
[\#6388](https://github.com/matrix-org/matrix-react-sdk/pull/6388)
|
||||
* Add "Copy Link" to room context menu
|
||||
[\#6374](https://github.com/matrix-org/matrix-react-sdk/pull/6374)
|
||||
* 💭 Message bubble layout
|
||||
[\#6291](https://github.com/matrix-org/matrix-react-sdk/pull/6291)
|
||||
Fixes vector-im/element-web#4635, vector-im/element-web#17773 vector-im/element-web#16220 and vector-im/element-web#7687
|
||||
* Play only one audio file at a time
|
||||
[\#6417](https://github.com/matrix-org/matrix-react-sdk/pull/6417)
|
||||
Fixes vector-im/element-web#17439
|
||||
* Move download button for media to the action bar
|
||||
[\#6386](https://github.com/matrix-org/matrix-react-sdk/pull/6386)
|
||||
Fixes vector-im/element-web#17943
|
||||
* Improved display of one-to-one call history with summary boxes for each call
|
||||
[\#6121](https://github.com/matrix-org/matrix-react-sdk/pull/6121)
|
||||
Fixes vector-im/element-web#16409
|
||||
* Notification settings UI refresh
|
||||
[\#6352](https://github.com/matrix-org/matrix-react-sdk/pull/6352)
|
||||
Fixes vector-im/element-web#17782
|
||||
* Fix EventIndex double handling events and erroring
|
||||
[\#6385](https://github.com/matrix-org/matrix-react-sdk/pull/6385)
|
||||
Fixes vector-im/element-web#18008
|
||||
* Improve reply rendering
|
||||
[\#3553](https://github.com/matrix-org/matrix-react-sdk/pull/3553)
|
||||
Fixes vector-im/riot-web#9217, vector-im/riot-web#7633, vector-im/riot-web#7530, vector-im/riot-web#7169, vector-im/riot-web#7151, vector-im/riot-web#6692 vector-im/riot-web#6579 and vector-im/element-web#17440
|
||||
|
||||
## 🐛 Bug Fixes
|
||||
* Fix CreateRoomDialog exploding when making public room outside of a space
|
||||
[\#6493](https://github.com/matrix-org/matrix-react-sdk/pull/6493)
|
||||
* Fix regression where registration would soft-crash on captcha
|
||||
[\#6505](https://github.com/matrix-org/matrix-react-sdk/pull/6505)
|
||||
Fixes vector-im/element-web#18284
|
||||
* only send join rule event if we have a join rule to put in it
|
||||
[\#6517](https://github.com/matrix-org/matrix-react-sdk/pull/6517)
|
||||
* Improve the new download button's discoverability and interactions.
|
||||
[\#6510](https://github.com/matrix-org/matrix-react-sdk/pull/6510)
|
||||
* Fix voice recording UI looking broken while microphone permissions are being requested.
|
||||
[\#6479](https://github.com/matrix-org/matrix-react-sdk/pull/6479)
|
||||
Fixes vector-im/element-web#18223
|
||||
* Match colors of room and user avatars in DMs
|
||||
[\#6393](https://github.com/matrix-org/matrix-react-sdk/pull/6393)
|
||||
Fixes vector-im/element-web#2449
|
||||
* Fix onPaste handler to work with copying files from Finder
|
||||
[\#5389](https://github.com/matrix-org/matrix-react-sdk/pull/5389)
|
||||
Fixes vector-im/element-web#15536 and vector-im/element-web#16255
|
||||
* Fix infinite pagination loop when offline
|
||||
[\#6478](https://github.com/matrix-org/matrix-react-sdk/pull/6478)
|
||||
Fixes vector-im/element-web#18242
|
||||
* Fix blurhash rounded corners missing regression
|
||||
[\#6467](https://github.com/matrix-org/matrix-react-sdk/pull/6467)
|
||||
Fixes vector-im/element-web#18110
|
||||
* Fix position of the space hierarchy spinner
|
||||
[\#6462](https://github.com/matrix-org/matrix-react-sdk/pull/6462)
|
||||
Fixes vector-im/element-web#18182
|
||||
* Fix display of image messages that lack thumbnails
|
||||
[\#6456](https://github.com/matrix-org/matrix-react-sdk/pull/6456)
|
||||
Fixes vector-im/element-web#18175
|
||||
* Fix crash with large audio files.
|
||||
[\#6436](https://github.com/matrix-org/matrix-react-sdk/pull/6436)
|
||||
Fixes vector-im/element-web#18149
|
||||
* Make diff colors in codeblocks more pleasant
|
||||
[\#6355](https://github.com/matrix-org/matrix-react-sdk/pull/6355)
|
||||
Fixes vector-im/element-web#17939
|
||||
* Show the correct audio file duration while loading the file.
|
||||
[\#6435](https://github.com/matrix-org/matrix-react-sdk/pull/6435)
|
||||
Fixes vector-im/element-web#18160
|
||||
* Fix various timeline settings not applying immediately.
|
||||
[\#6261](https://github.com/matrix-org/matrix-react-sdk/pull/6261)
|
||||
Fixes vector-im/element-web#17748
|
||||
* Fix issues with room list duplication
|
||||
[\#6391](https://github.com/matrix-org/matrix-react-sdk/pull/6391)
|
||||
Fixes vector-im/element-web#14508
|
||||
* Fix grecaptcha throwing useless error sometimes
|
||||
[\#6401](https://github.com/matrix-org/matrix-react-sdk/pull/6401)
|
||||
Fixes vector-im/element-web#15142
|
||||
* Update Emojibase and Twemoji and switch to IamCal (Slack-style) shortcodes
|
||||
[\#6347](https://github.com/matrix-org/matrix-react-sdk/pull/6347)
|
||||
Fixes vector-im/element-web#13857 and vector-im/element-web#13334
|
||||
* Respect compound emojis in default avatar initial generation
|
||||
[\#6397](https://github.com/matrix-org/matrix-react-sdk/pull/6397)
|
||||
Fixes vector-im/element-web#18040
|
||||
* Fix bug where the 'other homeserver' field in the server selection dialog would become briefly focus and then unfocus when clicked.
|
||||
[\#6394](https://github.com/matrix-org/matrix-react-sdk/pull/6394)
|
||||
Fixes vector-im/element-web#18031
|
||||
* Standardise spelling and casing of homeserver, identity server, and integration manager
|
||||
[\#6365](https://github.com/matrix-org/matrix-react-sdk/pull/6365)
|
||||
* Fix widgets not receiving decrypted events when they have permission.
|
||||
[\#6371](https://github.com/matrix-org/matrix-react-sdk/pull/6371)
|
||||
Fixes vector-im/element-web#17615
|
||||
* Prevent client hangs when calculating blurhashes
|
||||
[\#6366](https://github.com/matrix-org/matrix-react-sdk/pull/6366)
|
||||
Fixes vector-im/element-web#17945
|
||||
* Exclude state events from widgets reading room events
|
||||
[\#6378](https://github.com/matrix-org/matrix-react-sdk/pull/6378)
|
||||
* Cache feature_spaces\* flags to improve performance
|
||||
[\#6381](https://github.com/matrix-org/matrix-react-sdk/pull/6381)
|
||||
|
||||
Changes in [3.26.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.26.0) (2021-07-19)
|
||||
=====================================================================================================
|
||||
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.26.0-rc.1...v3.26.0)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
Contributing code to The React SDK
|
||||
==================================
|
||||
|
||||
matrix-react-sdk follows the same pattern as https://github.com/matrix-org/matrix-js-sdk/blob/master/CONTRIBUTING.rst
|
||||
matrix-react-sdk follows the same pattern as https://github.com/matrix-org/matrix-js-sdk/blob/master/CONTRIBUTING.md
|
||||
|
||||
@ -34,7 +34,7 @@ All code lands on the `develop` branch - `master` is only used for stable releas
|
||||
**Please file PRs against `develop`!!**
|
||||
|
||||
Please follow the standard Matrix contributor's guide:
|
||||
https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.rst
|
||||
https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.md
|
||||
|
||||
Please follow the Matrix JS/React code style as per:
|
||||
https://github.com/matrix-org/matrix-react-sdk/blob/master/code_style.md
|
||||
|
||||
17
package.json
17
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "matrix-react-sdk",
|
||||
"version": "3.26.0",
|
||||
"version": "3.29.0",
|
||||
"description": "SDK for matrix.org using React",
|
||||
"author": "matrix.org",
|
||||
"repository": {
|
||||
@ -55,6 +55,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"@sentry/browser": "^6.11.0",
|
||||
"@sentry/tracing": "^6.11.0",
|
||||
"await-lock": "^2.1.0",
|
||||
"blurhash": "^1.1.3",
|
||||
"browser-encrypt-attachment": "^0.3.0",
|
||||
@ -80,13 +82,14 @@
|
||||
"katex": "^0.12.0",
|
||||
"linkifyjs": "^2.1.9",
|
||||
"lodash": "^4.17.20",
|
||||
"matrix-js-sdk": "12.1.0",
|
||||
"matrix-widget-api": "^0.1.0-beta.15",
|
||||
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
|
||||
"matrix-widget-api": "^0.1.0-beta.16",
|
||||
"minimist": "^1.2.5",
|
||||
"opus-recorder": "^8.0.3",
|
||||
"pako": "^2.0.3",
|
||||
"parse5": "^6.0.1",
|
||||
"png-chunks-extract": "^1.0.0",
|
||||
"posthog-js": "1.12.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"qrcode": "^1.4.4",
|
||||
"re-resizable": "^6.9.0",
|
||||
@ -123,6 +126,7 @@
|
||||
"@babel/traverse": "^7.12.12",
|
||||
"@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz",
|
||||
"@peculiar/webcrypto": "^1.1.4",
|
||||
"@sentry/types": "^6.10.0",
|
||||
"@sinonjs/fake-timers": "^7.0.2",
|
||||
"@types/classnames": "^2.2.11",
|
||||
"@types/commonmark": "^0.27.4",
|
||||
@ -147,13 +151,14 @@
|
||||
"@typescript-eslint/eslint-plugin": "^4.17.0",
|
||||
"@typescript-eslint/parser": "^4.17.0",
|
||||
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
|
||||
"allchange": "^1.0.3",
|
||||
"babel-jest": "^26.6.3",
|
||||
"chokidar": "^3.5.1",
|
||||
"concurrently": "^5.3.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"eslint": "7.18.0",
|
||||
"eslint-config-google": "^0.14.0",
|
||||
"eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#main",
|
||||
"eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#2306b3d4da4eba908b256014b979f1d3d43d2945",
|
||||
"eslint-plugin-react": "^7.22.0",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"glob": "^7.1.6",
|
||||
@ -166,6 +171,7 @@
|
||||
"matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
|
||||
"react-test-renderer": "^17.0.2",
|
||||
"rimraf": "^3.0.2",
|
||||
"rrweb-snapshot": "1.1.7",
|
||||
"stylelint": "^13.9.0",
|
||||
"stylelint-config-standard": "^20.0.0",
|
||||
"stylelint-scss": "^3.18.0",
|
||||
@ -189,7 +195,8 @@
|
||||
"decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
|
||||
"decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
|
||||
"waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
|
||||
"workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js"
|
||||
"workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js",
|
||||
"RecorderWorklet": "<rootDir>/__mocks__/empty.js"
|
||||
},
|
||||
"transformIgnorePatterns": [
|
||||
"/node_modules/(?!matrix-js-sdk).+$"
|
||||
|
||||
4
release_config.yaml
Normal file
4
release_config.yaml
Normal file
@ -0,0 +1,4 @@
|
||||
subprojects:
|
||||
matrix-js-sdk:
|
||||
includeByDefault: false
|
||||
|
||||
55
res/css/_animations.scss
Normal file
55
res/css/_animations.scss
Normal file
@ -0,0 +1,55 @@
|
||||
/*
|
||||
Copyright 2021 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.
|
||||
*/
|
||||
|
||||
/**
|
||||
* React Transition Group animations are prefixed with 'mx_rtg--' so that we
|
||||
* know they should not be used anywhere outside of React Transition Groups.
|
||||
*/
|
||||
|
||||
.mx_rtg--fade-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.mx_rtg--fade-enter-active {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms ease;
|
||||
}
|
||||
.mx_rtg--fade-exit {
|
||||
opacity: 1;
|
||||
}
|
||||
.mx_rtg--fade-exit-active {
|
||||
opacity: 0;
|
||||
transition: opacity 300ms ease;
|
||||
}
|
||||
|
||||
|
||||
@keyframes mx--anim-pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
@keyframes mx--anim-pulse {
|
||||
// Override all keyframes in reduced-motion
|
||||
}
|
||||
.mx_rtg--fade-enter-active {
|
||||
transition: none;
|
||||
}
|
||||
.mx_rtg--fade-exit-active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@ -18,6 +18,7 @@ limitations under the License.
|
||||
|
||||
@import "./_font-sizes.scss";
|
||||
@import "./_font-weights.scss";
|
||||
@import "./_animations.scss";
|
||||
|
||||
$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
|
||||
|
||||
@ -52,8 +53,8 @@ html {
|
||||
body {
|
||||
font-family: $font-family;
|
||||
font-size: $font-15px;
|
||||
background-color: $primary-bg-color;
|
||||
color: $primary-fg-color;
|
||||
background-color: $background;
|
||||
color: $primary-content;
|
||||
border: 0px;
|
||||
margin: 0px;
|
||||
|
||||
@ -88,7 +89,7 @@ b {
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
font-weight: 400;
|
||||
font-size: $font-18px;
|
||||
margin-top: 16px;
|
||||
@ -104,8 +105,8 @@ a:visited {
|
||||
input[type=text],
|
||||
input[type=search],
|
||||
input[type=password] {
|
||||
font-family: inherit;
|
||||
padding: 9px;
|
||||
font-family: $font-family;
|
||||
font-size: $font-14px;
|
||||
font-weight: 600;
|
||||
min-width: 0;
|
||||
@ -141,13 +142,12 @@ textarea::placeholder {
|
||||
|
||||
input[type=text], input[type=password], textarea {
|
||||
background-color: transparent;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
/* Required by Firefox */
|
||||
textarea {
|
||||
font-family: $font-family;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
@ -168,12 +168,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
// it has the appearance of a text box so the controls
|
||||
// appear to be part of the input
|
||||
|
||||
.mx_Dialog, .mx_MatrixChat {
|
||||
.mx_Dialog, .mx_MatrixChat_wrapper {
|
||||
.mx_textinput > input[type=text],
|
||||
.mx_textinput > input[type=search] {
|
||||
border: none;
|
||||
flex: 1;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
|
||||
@ -184,7 +184,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
background-color: transparent;
|
||||
color: $input-darker-fg-color;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba($primary-fg-color, .1);
|
||||
border: 1px solid rgba($primary-content, .1);
|
||||
// these things should probably not be defined globally
|
||||
margin: 9px;
|
||||
}
|
||||
@ -209,7 +209,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
|
||||
.mx_textinput {
|
||||
color: $input-darker-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
@ -271,7 +271,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
}
|
||||
|
||||
.mx_Dialog {
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
color: $light-fg-color;
|
||||
z-index: 4012;
|
||||
font-weight: 300;
|
||||
@ -390,7 +390,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
.mx_Dialog_content {
|
||||
margin: 24px 0 68px;
|
||||
font-size: $font-14px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
@ -499,8 +499,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
border-radius: 3px;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 9px;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
color: $primary-content;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
.mx_textButton {
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
@import "./structures/_LeftPanelWidget.scss";
|
||||
@import "./structures/_MainSplit.scss";
|
||||
@import "./structures/_MatrixChat.scss";
|
||||
@import "./structures/_BackdropPanel.scss";
|
||||
@import "./structures/_MyGroups.scss";
|
||||
@import "./structures/_NonUrgentToastContainer.scss";
|
||||
@import "./structures/_NotificationPanel.scss";
|
||||
@ -27,8 +28,8 @@
|
||||
@import "./structures/_RoomView.scss";
|
||||
@import "./structures/_ScrollPanel.scss";
|
||||
@import "./structures/_SearchBox.scss";
|
||||
@import "./structures/_SpaceHierarchy.scss";
|
||||
@import "./structures/_SpacePanel.scss";
|
||||
@import "./structures/_SpaceRoomDirectory.scss";
|
||||
@import "./structures/_SpaceRoomView.scss";
|
||||
@import "./structures/_TabbedView.scss";
|
||||
@import "./structures/_ToastContainer.scss";
|
||||
@ -67,7 +68,6 @@
|
||||
@import "./views/dialogs/_AddExistingToSpaceDialog.scss";
|
||||
@import "./views/dialogs/_AddressPickerDialog.scss";
|
||||
@import "./views/dialogs/_Analytics.scss";
|
||||
@import "./views/dialogs/_BetaFeedbackDialog.scss";
|
||||
@import "./views/dialogs/_BugReportDialog.scss";
|
||||
@import "./views/dialogs/_ChangelogDialog.scss";
|
||||
@import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
|
||||
@ -76,16 +76,22 @@
|
||||
@import "./views/dialogs/_CreateCommunityPrototypeDialog.scss";
|
||||
@import "./views/dialogs/_CreateGroupDialog.scss";
|
||||
@import "./views/dialogs/_CreateRoomDialog.scss";
|
||||
@import "./views/dialogs/_CreateSpaceFromCommunityDialog.scss";
|
||||
@import "./views/dialogs/_CreateSubspaceDialog.scss";
|
||||
@import "./views/dialogs/_DeactivateAccountDialog.scss";
|
||||
@import "./views/dialogs/_DevtoolsDialog.scss";
|
||||
@import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
|
||||
@import "./views/dialogs/_FeedbackDialog.scss";
|
||||
@import "./views/dialogs/_ForwardDialog.scss";
|
||||
@import "./views/dialogs/_GenericFeatureFeedbackDialog.scss";
|
||||
@import "./views/dialogs/_GroupAddressPicker.scss";
|
||||
@import "./views/dialogs/_HostSignupDialog.scss";
|
||||
@import "./views/dialogs/_IncomingSasDialog.scss";
|
||||
@import "./views/dialogs/_InviteDialog.scss";
|
||||
@import "./views/dialogs/_JoinRuleDropdown.scss";
|
||||
@import "./views/dialogs/_KeyboardShortcutsDialog.scss";
|
||||
@import "./views/dialogs/_LeaveSpaceDialog.scss";
|
||||
@import "./views/dialogs/_ManageRestrictedJoinRuleDialog.scss";
|
||||
@import "./views/dialogs/_MessageEditHistoryDialog.scss";
|
||||
@import "./views/dialogs/_ModalWidgetDialog.scss";
|
||||
@import "./views/dialogs/_NewSessionReviewDialog.scss";
|
||||
@ -126,6 +132,7 @@
|
||||
@import "./views/elements/_EditableItemList.scss";
|
||||
@import "./views/elements/_ErrorBoundary.scss";
|
||||
@import "./views/elements/_EventListSummary.scss";
|
||||
@import "./views/elements/_EventTilePreview.scss";
|
||||
@import "./views/elements/_FacePile.scss";
|
||||
@import "./views/elements/_Field.scss";
|
||||
@import "./views/elements/_ImageView.scss";
|
||||
@ -236,6 +243,7 @@
|
||||
@import "./views/settings/_E2eAdvancedPanel.scss";
|
||||
@import "./views/settings/_EmailAddresses.scss";
|
||||
@import "./views/settings/_IntegrationManager.scss";
|
||||
@import "./views/settings/_LayoutSwitcher.scss";
|
||||
@import "./views/settings/_Notifications.scss";
|
||||
@import "./views/settings/_PhoneNumbers.scss";
|
||||
@import "./views/settings/_ProfileSettings.scss";
|
||||
@ -262,12 +270,16 @@
|
||||
@import "./views/spaces/_SpacePublicShare.scss";
|
||||
@import "./views/terms/_InlineTermsAgreement.scss";
|
||||
@import "./views/toasts/_AnalyticsToast.scss";
|
||||
@import "./views/toasts/_IncomingCallToast.scss";
|
||||
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
|
||||
@import "./views/verification/_VerificationShowSas.scss";
|
||||
@import "./views/voip/CallView/_CallViewButtons.scss";
|
||||
@import "./views/voip/_CallContainer.scss";
|
||||
@import "./views/voip/_CallPreview.scss";
|
||||
@import "./views/voip/_CallView.scss";
|
||||
@import "./views/voip/_CallViewForRoom.scss";
|
||||
@import "./views/voip/_CallViewHeader.scss";
|
||||
@import "./views/voip/_CallViewSidebar.scss";
|
||||
@import "./views/voip/_DialPad.scss";
|
||||
@import "./views/voip/_DialPadContextMenu.scss";
|
||||
@import "./views/voip/_DialPadModal.scss";
|
||||
|
||||
37
res/css/structures/_BackdropPanel.scss
Normal file
37
res/css/structures/_BackdropPanel.scss
Normal file
@ -0,0 +1,37 @@
|
||||
/*
|
||||
Copyright 2021 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_BackdropPanel {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
filter: blur(var(--lp-background-blur));
|
||||
// Force a new layer for the backdropPanel so it's better hardware supported
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.mx_BackdropPanel--image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-height: 100%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -34,7 +34,7 @@ limitations under the License.
|
||||
border-radius: 8px;
|
||||
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
|
||||
background-color: $menu-bg-color;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
position: absolute;
|
||||
font-size: $font-14px;
|
||||
z-index: 5001;
|
||||
|
||||
@ -18,7 +18,7 @@ limitations under the License.
|
||||
width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_CreateRoom input,
|
||||
|
||||
@ -14,10 +14,27 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
|
||||
|
||||
.mx_GroupFilterPanelContainer {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: $groupFilterPanelWidth;
|
||||
height: 100%;
|
||||
|
||||
// Create another flexbox so the GroupFilterPanel fills the container
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// GroupFilterPanel handles its own CSS
|
||||
}
|
||||
|
||||
.mx_GroupFilterPanel {
|
||||
flex: 1;
|
||||
z-index: 1;
|
||||
background-color: $groupFilterPanel-bg-color;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -75,13 +92,13 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.mx_TagTile_selected_prototype {
|
||||
.mx_TagTile_homeIcon::before {
|
||||
background-color: $primary-fg-color; // dark-on-light
|
||||
background-color: $primary-content; // dark-on-light
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -132,7 +132,7 @@ limitations under the License.
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
overflow: hidden;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
font-weight: bold;
|
||||
font-size: $font-22px;
|
||||
padding-left: 19px;
|
||||
@ -368,6 +368,65 @@ limitations under the License.
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.mx_GroupView_spaceUpgradePrompt {
|
||||
padding: 16px 50px;
|
||||
background-color: $header-panel-bg-color;
|
||||
border-radius: 8px;
|
||||
max-width: 632px;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
margin-top: 24px;
|
||||
position: relative;
|
||||
|
||||
> h2 {
|
||||
font-size: inherit;
|
||||
font-weight: $font-semi-bold;
|
||||
}
|
||||
|
||||
> p, h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: $font-24px;
|
||||
width: 20px;
|
||||
left: 18px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mx_GroupView_spaceUpgradePrompt_close {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
background-color: $input-darker-bg-color;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 8px;
|
||||
mask-image: url('$(res)/img/image-view/close.svg');
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar > :not(.mx_MemberInfo_avatar) {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
|
||||
@ -14,31 +14,47 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
|
||||
$roomListCollapsedWidth: 68px;
|
||||
|
||||
.mx_MatrixChat--with-avatar {
|
||||
.mx_LeftPanel,
|
||||
.mx_LeftPanel .mx_LeftPanel_roomListContainer {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_wrapper {
|
||||
display: flex;
|
||||
max-width: 50%;
|
||||
position: relative;
|
||||
|
||||
// Contain the amount of layers rendered by constraining what actually needs re-layering via css
|
||||
contain: layout paint;
|
||||
|
||||
.mx_LeftPanel_wrapper--user {
|
||||
background-color: $roomlist-bg-color;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&[data-collapsed] {
|
||||
max-width: $roomListCollapsedWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mx_LeftPanel {
|
||||
background-color: $roomlist-bg-color;
|
||||
// TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
|
||||
min-width: 206px;
|
||||
max-width: 50%;
|
||||
|
||||
// Create a row-based flexbox for the GroupFilterPanel and the room list
|
||||
display: flex;
|
||||
contain: content;
|
||||
|
||||
.mx_LeftPanel_GroupFilterPanelContainer {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: $groupFilterPanelWidth;
|
||||
height: 100%;
|
||||
|
||||
// Create another flexbox so the GroupFilterPanel fills the container
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// GroupFilterPanel handles its own CSS
|
||||
}
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
|
||||
// Note: The 'room list' in this context is actually everything that isn't the tag
|
||||
// panel, such as the menu options, breadcrumbs, filtering, etc
|
||||
@ -130,7 +146,7 @@ $roomListCollapsedWidth: 68px;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $secondary-fg-color;
|
||||
background: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -153,7 +169,7 @@ $roomListCollapsedWidth: 68px;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $secondary-fg-color;
|
||||
background: $secondary-content;
|
||||
}
|
||||
|
||||
&.mx_LeftPanel_exploreButton_space::before {
|
||||
@ -171,6 +187,8 @@ $roomListCollapsedWidth: 68px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_roomListWrapper {
|
||||
// Make the y-scrollbar more responsive
|
||||
padding-right: 2px;
|
||||
overflow: hidden;
|
||||
margin-top: 10px; // so we're not up against the search/filter
|
||||
flex: 1 0 0; // needed in Safari to properly set flex-basis
|
||||
@ -192,6 +210,7 @@ $roomListCollapsedWidth: 68px;
|
||||
|
||||
// These styles override the defaults for the minimized (66px) layout
|
||||
&.mx_LeftPanel_minimized {
|
||||
flex-grow: 0;
|
||||
min-width: unset;
|
||||
width: unset !important;
|
||||
|
||||
|
||||
@ -113,7 +113,7 @@ limitations under the License.
|
||||
|
||||
&:hover .mx_LeftPanelWidget_resizerHandle {
|
||||
opacity: 0.8;
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_LeftPanelWidget_maximizeButton {
|
||||
|
||||
@ -38,7 +38,7 @@ limitations under the License.
|
||||
width: 4px !important;
|
||||
border-radius: 4px !important;
|
||||
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,8 +29,6 @@ limitations under the License.
|
||||
.mx_MatrixChat_wrapper {
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -42,13 +40,12 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MatrixChat {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
|
||||
order: 2;
|
||||
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
@ -66,8 +63,8 @@ limitations under the License.
|
||||
}
|
||||
|
||||
/* not the left panel, and not the resize handle, so the roomview/groupview/... */
|
||||
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
|
||||
background-color: $primary-bg-color;
|
||||
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) {
|
||||
background-color: $background;
|
||||
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
@ -94,7 +91,7 @@ limitations under the License.
|
||||
|
||||
content: ' ';
|
||||
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,7 +49,7 @@ limitations under the License.
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
height: 1px;
|
||||
opacity: 0.4;
|
||||
content: '';
|
||||
@ -70,7 +70,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile_roomName a {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile_avatar {
|
||||
@ -79,7 +79,7 @@ limitations under the License.
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
|
||||
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
font-size: $font-12px;
|
||||
display: inline;
|
||||
}
|
||||
@ -118,7 +118,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
.mx_NotificationPanel .mx_EventTile_content {
|
||||
|
||||
@ -43,7 +43,7 @@ limitations under the License.
|
||||
.mx_RightPanel_headerButtonGroup {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
padding: 0 9px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@ limitations under the License.
|
||||
|
||||
.mx_RoomDirectory {
|
||||
margin-bottom: 12px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -71,14 +71,14 @@ limitations under the License.
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-18px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin: 40px auto 60px;
|
||||
font-size: $font-14px;
|
||||
line-height: $font-20px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
max-width: 464px; // easier reading
|
||||
}
|
||||
|
||||
@ -97,7 +97,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_table {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
display: grid;
|
||||
font-size: $font-12px;
|
||||
grid-template-columns: max-content auto max-content max-content max-content;
|
||||
|
||||
@ -33,14 +33,14 @@ limitations under the License.
|
||||
height: 16px;
|
||||
mask: url('$(res)/img/element-icons/roomlist/search.svg');
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
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
|
||||
color: $primary-content !important; // !important to override default app-wide styles
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@ -48,12 +48,12 @@ limitations under the License.
|
||||
line-height: $font-16px;
|
||||
|
||||
&:not(.mx_RoomSearch_inputExpanded)::placeholder {
|
||||
color: $tertiary-fg-color !important; // !important to override default app-wide styles
|
||||
color: $tertiary-content !important; // !important to override default app-wide styles
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSearch_hasQuery {
|
||||
border-color: $secondary-fg-color;
|
||||
border-color: $secondary-content;
|
||||
}
|
||||
|
||||
&.mx_RoomSearch_focused {
|
||||
@ -62,7 +62,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
&.mx_RoomSearch_focused, &.mx_RoomSearch_hasQuery {
|
||||
background-color: $roomlist-filter-active-bg-color;
|
||||
background-color: $background;
|
||||
|
||||
.mx_RoomSearch_clearButton {
|
||||
width: 16px;
|
||||
@ -71,7 +71,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@ limitations under the License.
|
||||
|
||||
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
|
||||
margin-right: -12px;
|
||||
border: 1px solid $primary-bg-color;
|
||||
border: 1px solid $background;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
|
||||
@ -39,7 +39,7 @@ limitations under the License.
|
||||
display: inline-block;
|
||||
color: #acacac;
|
||||
background-color: #ddd;
|
||||
border: 1px solid $primary-bg-color;
|
||||
border: 1px solid $background;
|
||||
border-radius: 40px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@ -171,14 +171,14 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_connectionLostBar_desc {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
font-size: $font-13px;
|
||||
opacity: 0.5;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.mx_RoomStatusBar_resend_link {
|
||||
color: $primary-fg-color !important;
|
||||
color: $primary-content !important;
|
||||
text-decoration: underline !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -187,7 +187,7 @@ limitations under the License.
|
||||
height: 50px;
|
||||
line-height: $font-50px;
|
||||
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
opacity: 0.5;
|
||||
overflow-y: hidden;
|
||||
display: block;
|
||||
|
||||
@ -14,10 +14,22 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_RoomView_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
// Contain the amount of layers rendered by constraining what actually needs re-layering via css
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.mx_RoomView {
|
||||
word-wrap: break-word;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
@ -40,7 +52,7 @@ limitations under the License.
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
opacity: 0.95;
|
||||
|
||||
position: absolute;
|
||||
@ -87,7 +99,7 @@ limitations under the License.
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3000;
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
.mx_RoomView_auxPanel_hiddenHighlights {
|
||||
@ -153,7 +165,6 @@ limitations under the License.
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
contain: content;
|
||||
}
|
||||
|
||||
.mx_RoomView_statusArea {
|
||||
@ -161,7 +172,7 @@ limitations under the License.
|
||||
flex: 0 0 auto;
|
||||
|
||||
max-height: 0px;
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
|
||||
@ -246,7 +257,7 @@ hr.mx_RoomView_myReadMarker {
|
||||
}
|
||||
|
||||
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
|
||||
|
||||
@ -15,7 +15,6 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_ScrollPanel {
|
||||
|
||||
.mx_RoomView_MessageList {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@ -14,21 +14,6 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_SpaceRoomDirectory_dialogWrapper > .mx_Dialog {
|
||||
max-width: 960px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory {
|
||||
height: 100%;
|
||||
margin-bottom: 12px;
|
||||
color: $primary-fg-color;
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory,
|
||||
.mx_SpaceRoomView_landing {
|
||||
.mx_Dialog_title {
|
||||
display: flex;
|
||||
@ -52,7 +37,7 @@ limitations under the License.
|
||||
|
||||
> div {
|
||||
font-weight: 400;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
}
|
||||
@ -61,29 +46,36 @@ limitations under the License.
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.mx_SearchBox {
|
||||
margin: 24px 0 16px;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_noResults {
|
||||
.mx_SpaceHierarchy_noResults {
|
||||
text-align: center;
|
||||
|
||||
> div {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_listHeader {
|
||||
.mx_SpaceHierarchy_listHeader {
|
||||
display: flex;
|
||||
min-height: 32px;
|
||||
align-items: center;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
margin-bottom: 12px;
|
||||
|
||||
> h4 {
|
||||
font-weight: $font-semi-bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
padding: 4px 12px;
|
||||
@ -104,7 +96,7 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_error {
|
||||
.mx_SpaceHierarchy_error {
|
||||
position: relative;
|
||||
font-weight: $font-semi-bold;
|
||||
color: $notice-primary-color;
|
||||
@ -123,43 +115,44 @@ limitations under the License.
|
||||
background-image: url("$(res)/img/element-icons/warning-badge.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_list {
|
||||
margin-top: 16px;
|
||||
padding-bottom: 40px;
|
||||
.mx_SpaceHierarchy_list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_roomCount {
|
||||
.mx_SpaceHierarchy_roomCount {
|
||||
> h3 {
|
||||
display: inline;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-18px;
|
||||
line-height: $font-22px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
> span {
|
||||
margin-left: 8px;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_subspace {
|
||||
.mx_SpaceHierarchy_subspace {
|
||||
.mx_BaseAvatar_image {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_subspace_toggle {
|
||||
.mx_SpaceHierarchy_subspace_toggle {
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: 10px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 4px;
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
@ -170,27 +163,26 @@ limitations under the License.
|
||||
width: 16px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
mask-size: 16px;
|
||||
transform: rotate(270deg);
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
|
||||
}
|
||||
|
||||
&.mx_SpaceRoomDirectory_subspace_toggle_shown::before {
|
||||
&.mx_SpaceHierarchy_subspace_toggle_shown::before {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_subspace_children {
|
||||
.mx_SpaceHierarchy_subspace_children {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_roomTile {
|
||||
.mx_SpaceHierarchy_roomTile {
|
||||
position: relative;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
min-height: 56px;
|
||||
box-sizing: border-box;
|
||||
|
||||
display: grid;
|
||||
@ -204,7 +196,7 @@ limitations under the License.
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_roomTile_name {
|
||||
.mx_SpaceHierarchy_roomTile_name {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-18px;
|
||||
@ -214,7 +206,7 @@ limitations under the License.
|
||||
.mx_InfoTooltip {
|
||||
display: inline;
|
||||
margin-left: 12px;
|
||||
color: $tertiary-fg-color;
|
||||
color: $tertiary-content;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
|
||||
@ -232,10 +224,10 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_roomTile_info {
|
||||
.mx_SpaceHierarchy_roomTile_info {
|
||||
font-size: $font-14px;
|
||||
line-height: $font-18px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
grid-row: 2;
|
||||
grid-column: 1/3;
|
||||
display: -webkit-box;
|
||||
@ -244,7 +236,7 @@ limitations under the License.
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_actions {
|
||||
.mx_SpaceHierarchy_actions {
|
||||
text-align: right;
|
||||
margin-left: 20px;
|
||||
grid-column: 3;
|
||||
@ -269,7 +261,7 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover, &:focus-within {
|
||||
background-color: $groupFilterPanel-bg-color;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
@ -278,8 +270,12 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_roomTile,
|
||||
.mx_SpaceRoomDirectory_subspace_children {
|
||||
li.mx_SpaceHierarchy_roomTileWrapper {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.mx_SpaceHierarchy_roomTile,
|
||||
.mx_SpaceHierarchy_subspace_children {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -291,12 +287,12 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_actions {
|
||||
.mx_SpaceRoomDirectory_actionsText {
|
||||
.mx_SpaceHierarchy_actions {
|
||||
.mx_SpaceHierarchy_actionsText {
|
||||
font-weight: normal;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -307,7 +303,7 @@ limitations under the License.
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_createRoom {
|
||||
.mx_SpaceHierarchy_createRoom {
|
||||
display: block;
|
||||
margin: 16px auto 0;
|
||||
width: max-content;
|
||||
@ -20,13 +20,16 @@ $gutterSize: 16px;
|
||||
$activeBorderTransparentGap: 1px;
|
||||
|
||||
$activeBackgroundColor: $roomtile-selected-bg-color;
|
||||
$activeBorderColor: $secondary-fg-color;
|
||||
$activeBorderColor: $secondary-content;
|
||||
|
||||
.mx_SpacePanel {
|
||||
flex: 0 0 auto;
|
||||
background-color: $groupFilterPanel-bg-color;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
// Fix for the blurred avatar-background
|
||||
z-index: 1;
|
||||
|
||||
// Create another flexbox so the Panel fills the container
|
||||
display: flex;
|
||||
@ -111,6 +114,7 @@ $activeBorderColor: $secondary-fg-color;
|
||||
align-items: center;
|
||||
padding: 4px 4px 4px 0;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&.mx_SpaceButton_active {
|
||||
&:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
|
||||
@ -235,7 +239,7 @@ $activeBorderColor: $secondary-fg-color;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url('$(res)/img/element-icons/context-menu.svg');
|
||||
background: $primary-fg-color;
|
||||
background: $primary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -297,7 +301,7 @@ $activeBorderColor: $secondary-fg-color;
|
||||
.mx_SpaceButton:hover,
|
||||
.mx_SpaceButton:focus-within,
|
||||
.mx_SpaceButton_hasMenuOpen {
|
||||
&:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) {
|
||||
&:not(.mx_SpaceButton_invite) {
|
||||
// Hide the badge container on hover because it'll be a menu button
|
||||
.mx_SpacePanel_badgeContainer {
|
||||
width: 0;
|
||||
@ -368,6 +372,14 @@ $activeBorderColor: $secondary-fg-color;
|
||||
.mx_SpacePanel_iconExplore::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
|
||||
}
|
||||
|
||||
.mx_SpacePanel_noIcon {
|
||||
display: none;
|
||||
|
||||
& + .mx_IconizedContextMenu_label {
|
||||
padding-left: 5px !important; // override default iconized label style to align with header
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
&::before {
|
||||
@ -45,7 +45,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 24px;
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -56,12 +56,15 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
|
||||
.mx_MainSplit > div:first-child {
|
||||
padding: 80px 60px;
|
||||
flex-grow: 1;
|
||||
@ -72,13 +75,13 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
margin: 0;
|
||||
font-size: $font-24px;
|
||||
font-weight: $font-semi-bold;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_description {
|
||||
font-size: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 24px;
|
||||
max-width: $SpaceRoomViewInnerWidth;
|
||||
@ -154,7 +157,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-14px;
|
||||
line-height: $font-24px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
margin-top: 24px;
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
@ -176,7 +179,19 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_preview_migratedCommunity {
|
||||
margin-bottom: 16px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $input-border-color;
|
||||
width: max-content;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -195,7 +210,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
|
||||
.mx_SpaceRoomView_preview_inviter_mxid {
|
||||
line-height: $font-24px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -212,7 +227,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
.mx_SpaceRoomView_preview_topic {
|
||||
font-size: $font-14px;
|
||||
line-height: $font-22px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
margin: 20px 0;
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
@ -234,6 +249,10 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_landing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
|
||||
> .mx_BaseAvatar_image,
|
||||
> .mx_BaseAvatar > .mx_BaseAvatar_image {
|
||||
border-radius: 12px;
|
||||
@ -242,7 +261,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
.mx_SpaceRoomView_landing_name {
|
||||
margin: 24px 0 16px;
|
||||
font-size: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
@ -315,7 +334,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
top: 0;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background: $tertiary-fg-color;
|
||||
background: $tertiary-content;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
@ -332,23 +351,17 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
> hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: $groupFilterPanel-bg-color;
|
||||
}
|
||||
|
||||
.mx_SearchBox {
|
||||
margin: 0 0 20px;
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.mx_SpaceFeedbackPrompt {
|
||||
margin-bottom: 16px;
|
||||
|
||||
// hide the HR as we have our own
|
||||
& + hr {
|
||||
display: none;
|
||||
}
|
||||
padding: 7px; // 8px - 1px border
|
||||
border: 1px solid rgba($primary-content, .1);
|
||||
border-radius: 8px;
|
||||
width: max-content;
|
||||
margin: 0 0 -40px auto; // collapse its own height to not push other components down
|
||||
}
|
||||
}
|
||||
|
||||
@ -374,7 +387,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
width: 432px;
|
||||
border-radius: 8px;
|
||||
background-color: $info-plinth-bg-color;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
box-sizing: border-box;
|
||||
|
||||
> h3 {
|
||||
@ -401,7 +414,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 14px;
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -424,7 +437,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_inviteTeammates_buttons {
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
margin-top: 28px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
@ -440,7 +453,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
width: 24px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
@ -459,7 +472,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_info {
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
margin: 20px 0;
|
||||
@ -478,7 +491,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
left: -2px;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -504,66 +517,3 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceFeedbackPrompt {
|
||||
margin-top: 18px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
> hr {
|
||||
border: none;
|
||||
border-top: 1px solid $input-border-color;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
> span {
|
||||
color: $secondary-fg-color;
|
||||
position: relative;
|
||||
padding-left: 32px;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
margin-right: auto;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: $secondary-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
color: $accent-color;
|
||||
position: relative;
|
||||
padding: 0 0 0 24px;
|
||||
margin-left: 8px;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: $accent-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -80,7 +80,7 @@ limitations under the License.
|
||||
|
||||
.mx_TabbedView_tabLabel_text {
|
||||
font-size: 15px;
|
||||
color: $tertiary-fg-color;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ limitations under the License.
|
||||
margin: 0 4px;
|
||||
grid-row: 2 / 4;
|
||||
grid-column: 1;
|
||||
background-color: $dark-panel-bg-color;
|
||||
background-color: $system;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
}
|
||||
@ -36,8 +36,8 @@ limitations under the License.
|
||||
.mx_Toast_toast {
|
||||
grid-row: 1 / 3;
|
||||
grid-column: 1;
|
||||
color: $primary-fg-color;
|
||||
background-color: $dark-panel-bg-color;
|
||||
background-color: $system;
|
||||
color: $primary-content;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
@ -63,7 +63,7 @@ limitations under the License.
|
||||
|
||||
&.mx_Toast_icon_verification::after {
|
||||
mask-image: url("$(res)/img/e2e/normal.svg");
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
&.mx_Toast_icon_verification_warning {
|
||||
@ -82,7 +82,7 @@ limitations under the License.
|
||||
|
||||
&.mx_Toast_icon_secure_backup::after {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_Toast_title, .mx_Toast_body {
|
||||
@ -163,7 +163,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Toast_detail {
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_Toast_deviceID {
|
||||
|
||||
@ -35,7 +35,7 @@ limitations under the License.
|
||||
// we cheat opacity on the theme colour with an after selector here
|
||||
&::after {
|
||||
content: '';
|
||||
border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse
|
||||
border-bottom: 1px solid $primary-content;
|
||||
opacity: 0.2;
|
||||
display: block;
|
||||
padding-top: 8px;
|
||||
@ -58,7 +58,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $tertiary-fg-color;
|
||||
background: $tertiary-content;
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
|
||||
}
|
||||
}
|
||||
@ -176,7 +176,7 @@ limitations under the License.
|
||||
width: 85%;
|
||||
opacity: 0.2;
|
||||
border: none;
|
||||
border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse
|
||||
border-bottom: 1px solid $primary-content;
|
||||
}
|
||||
|
||||
&.mx_IconizedContextMenu {
|
||||
@ -292,7 +292,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
background: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ limitations under the License.
|
||||
.mx_ViewSource_heading {
|
||||
font-size: $font-17px;
|
||||
font-weight: 400;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
|
||||
|
||||
@ -96,3 +96,10 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.mx_Login_spinner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_AudioPlayer_mediaName {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-15px;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -27,7 +27,7 @@ limitations under the License.
|
||||
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: $quaternary-fg-color;
|
||||
background: $quaternary-content;
|
||||
outline: none; // remove blue selection border
|
||||
position: relative; // for before+after pseudo elements later on
|
||||
|
||||
@ -42,7 +42,7 @@ limitations under the License.
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@ limitations under the License.
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
cursor: pointer;
|
||||
|
||||
// Firefox adds a border on the thumb
|
||||
@ -63,7 +63,7 @@ limitations under the License.
|
||||
// in firefox, so it's just wasted CPU/GPU time.
|
||||
&::before { // ::before to ensure it ends up under the thumb
|
||||
content: '';
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
|
||||
// Absolute positioning to ensure it overlaps with the existing bar
|
||||
position: absolute;
|
||||
@ -81,7 +81,7 @@ limitations under the License.
|
||||
|
||||
// This is firefox's built-in support for the above, with 100% less hacks.
|
||||
&::-moz-range-progress {
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ limitations under the License.
|
||||
min-width: 80px;
|
||||
|
||||
background-color: $accent-color;
|
||||
color: $primary-bg-color;
|
||||
color: $background;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
@ -85,7 +85,7 @@ limitations under the License.
|
||||
.mx_InteractiveAuthEntryComponents_termsPolicy {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
@ -27,7 +27,6 @@ limitations under the License.
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=255139
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_initial {
|
||||
|
||||
@ -47,7 +47,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $secondary-fg-color;
|
||||
background: $secondary-content;
|
||||
mask-image: url('$(res)/img/globe.svg');
|
||||
}
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ limitations under the License.
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-18px;
|
||||
line-height: $font-22px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
margin: 4px 0 14px;
|
||||
|
||||
.mx_BetaCard_betaPill {
|
||||
@ -40,7 +40,7 @@ limitations under the License.
|
||||
.mx_BetaCard_caption {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-20px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@ -54,7 +54,7 @@ limitations under the License.
|
||||
.mx_BetaCard_disclaimer {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
@ -72,13 +72,13 @@ limitations under the License.
|
||||
margin: 16px 0 0;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
|
||||
.mx_SettingsFlag_microcopy {
|
||||
margin-top: 4px;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@ limitations under the License.
|
||||
//
|
||||
// Therefore, we just hack in a line and border the thing ourselves
|
||||
&::before {
|
||||
border-top: 1px solid $primary-fg-color;
|
||||
border-top: 1px solid $primary-content;
|
||||
opacity: 0.1;
|
||||
content: '';
|
||||
|
||||
@ -63,7 +63,7 @@ limitations under the License.
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-decoration: none;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
@ -99,6 +99,10 @@ limitations under the License.
|
||||
.mx_IconizedContextMenu_icon + .mx_IconizedContextMenu_label {
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.mx_BetaCard_betaPill {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -115,7 +119,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
background: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -145,12 +149,17 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_checked {
|
||||
.mx_IconizedContextMenu_checked,
|
||||
.mx_IconizedContextMenu_unchecked {
|
||||
margin-left: 16px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
|
||||
}
|
||||
.mx_IconizedContextMenu_checked::before {
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_unchecked::before {
|
||||
content: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
background: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ input.mx_StatusMessageContextMenu_message {
|
||||
border-radius: 4px;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 6.5px 11px;
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
font-weight: normal;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
@ -51,6 +51,10 @@ limitations under the License.
|
||||
mask-image: url('$(res)/img/element-icons/hide.svg');
|
||||
}
|
||||
|
||||
.mx_TagTileContextMenu_createSpace::before {
|
||||
mask-image: url('$(res)/img/element-icons/message/fwd.svg');
|
||||
}
|
||||
|
||||
.mx_TagTileContextMenu_separator {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
@ -44,70 +44,17 @@ limitations under the License.
|
||||
|
||||
> h3 {
|
||||
margin: 0;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
font-size: $font-12px;
|
||||
font-weight: $font-semi-bold;
|
||||
line-height: $font-15px;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_entry {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
|
||||
// we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
|
||||
.mx_DecoratedRoomAvatar {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_entry_name {
|
||||
font-size: $font-15px;
|
||||
line-height: 30px;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_Checkbox {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_section_spaces {
|
||||
.mx_BaseAvatar {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_section_experimental {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
margin: 12px 0;
|
||||
padding: 8px 8px 8px 42px;
|
||||
background-color: $header-panel-bg-color;
|
||||
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: calc(50% - 8px); // vertical centering
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: $secondary-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
|
||||
mask-position: center;
|
||||
.mx_AccessibleButton_kind_link {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
margin-top: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -119,7 +66,7 @@ limitations under the License.
|
||||
flex-grow: 1;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
|
||||
.mx_ProgressBar {
|
||||
height: 8px;
|
||||
@ -132,7 +79,7 @@ limitations under the License.
|
||||
margin-top: 8px;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
> * {
|
||||
@ -158,7 +105,7 @@ limitations under the License.
|
||||
margin-top: 4px;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -179,7 +126,7 @@ limitations under the License.
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
@ -198,84 +145,113 @@ limitations under the License.
|
||||
|
||||
.mx_AddExistingToSpaceDialog {
|
||||
width: 480px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
min-height: 0;
|
||||
height: 80vh;
|
||||
|
||||
.mx_Dialog_title {
|
||||
display: flex;
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
border-radius: 8px;
|
||||
margin: 0;
|
||||
vertical-align: unset;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar {
|
||||
display: inline-flex;
|
||||
margin: auto 16px auto 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> div {
|
||||
> h1 {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-18px;
|
||||
line-height: $font-22px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpaceDialog_onlySpace {
|
||||
color: $secondary-fg-color;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Dropdown_input {
|
||||
border: none;
|
||||
|
||||
> .mx_Dropdown_option {
|
||||
padding-left: 0;
|
||||
flex: unset;
|
||||
height: unset;
|
||||
color: $secondary-fg-color;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Dropdown_menu {
|
||||
.mx_AddExistingToSpaceDialog_dropdownOptionActive {
|
||||
color: $accent-color;
|
||||
padding-right: 32px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 8px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $accent-color;
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SubspaceSelector {
|
||||
display: flex;
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
border-radius: 8px;
|
||||
margin: 0;
|
||||
vertical-align: unset;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar {
|
||||
display: inline-flex;
|
||||
margin: auto 16px auto 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> div {
|
||||
> h1 {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-18px;
|
||||
line-height: $font-22px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Dropdown_input {
|
||||
border: none;
|
||||
|
||||
> .mx_Dropdown_option {
|
||||
padding-left: 0;
|
||||
flex: unset;
|
||||
height: unset;
|
||||
color: $secondary-content;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Dropdown_menu {
|
||||
.mx_SubspaceSelector_dropdownOptionActive {
|
||||
color: $accent-color;
|
||||
padding-right: 32px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 8px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $accent-color;
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SubspaceSelector_onlySpace {
|
||||
color: $secondary-content;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_entry {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
|
||||
.mx_DecoratedRoomAvatar, // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
|
||||
.mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
img.mx_RoomAvatar_isSpaceRoom,
|
||||
.mx_RoomAvatar_isSpaceRoom img {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_entry_name {
|
||||
font-size: $font-15px;
|
||||
line-height: 30px;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_Checkbox {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,7 +29,6 @@ limitations under the License.
|
||||
.mx_AddressPickerDialog_input:focus {
|
||||
height: 26px;
|
||||
font-size: $font-14px;
|
||||
font-family: $font-family;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
margin: 0 !important;
|
||||
|
||||
@ -65,7 +65,7 @@ limitations under the License.
|
||||
.mx_CommunityPrototypeInviteDialog_personName {
|
||||
font-weight: 600;
|
||||
font-size: $font-14px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
|
||||
@ -34,10 +34,9 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_ConfirmUserActionDialog_reasonField {
|
||||
font-family: $font-family;
|
||||
font-size: $font-14px;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
color: $primary-content;
|
||||
background-color: $background;
|
||||
|
||||
border-radius: 3px;
|
||||
border: solid 1px $input-border-color;
|
||||
|
||||
@ -29,8 +29,8 @@ limitations under the License.
|
||||
border-radius: 3px;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 9px;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
color: $primary-content;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
.mx_CreateGroupDialog_input_hasPrefixAndSuffix {
|
||||
|
||||
@ -55,8 +55,8 @@ limitations under the License.
|
||||
border-radius: 3px;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 9px;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
color: $primary-content;
|
||||
background-color: $background;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -65,7 +65,7 @@ limitations under the License.
|
||||
.mx_CreateRoomDialog_aliasContainer {
|
||||
display: flex;
|
||||
// put margin on container so it can collapse with siblings
|
||||
margin: 10px 0;
|
||||
margin: 24px 0 10px;
|
||||
|
||||
.mx_RoomAliasField {
|
||||
margin: 0;
|
||||
@ -101,10 +101,6 @@ limitations under the License.
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.mx_CreateRoomDialog_topic {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.mx_Dialog_content > .mx_SettingsFlag {
|
||||
margin-top: 24px;
|
||||
}
|
||||
@ -114,4 +110,3 @@ limitations under the License.
|
||||
font-size: $font-12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
187
res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss
Normal file
187
res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss
Normal file
@ -0,0 +1,187 @@
|
||||
/*
|
||||
Copyright 2021 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_CreateSpaceFromCommunityDialog_wrapper {
|
||||
.mx_Dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CreateSpaceFromCommunityDialog {
|
||||
width: 480px;
|
||||
color: $primary-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
min-height: 0;
|
||||
|
||||
.mx_CreateSpaceFromCommunityDialog_content {
|
||||
> p {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.mx_CreateSpaceFromCommunityDialog_flairNotice {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceBasicSettings {
|
||||
> p {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.mx_Field_textarea {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_JoinRuleDropdown .mx_Dropdown_menu {
|
||||
width: auto !important; // override fixed width
|
||||
}
|
||||
|
||||
.mx_CreateSpaceFromCommunityDialog_nonPublicSpacer {
|
||||
height: 63px; // balance the height of the missing room alias field to prevent modal bouncing
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CreateSpaceFromCommunityDialog_footer {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
|
||||
> span {
|
||||
flex-grow: 1;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-content;
|
||||
|
||||
.mx_ProgressBar {
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
|
||||
@mixin ProgressBarBorderRadius 8px;
|
||||
}
|
||||
|
||||
.mx_CreateSpaceFromCommunityDialog_progressText {
|
||||
margin-top: 8px;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
> * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CreateSpaceFromCommunityDialog_error {
|
||||
padding-left: 12px;
|
||||
|
||||
> img {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.mx_CreateSpaceFromCommunityDialog_errorHeading {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-18px;
|
||||
color: $notice-primary-color;
|
||||
}
|
||||
|
||||
.mx_CreateSpaceFromCommunityDialog_errorCaption {
|
||||
margin-top: 4px;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
display: inline-block;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_primary {
|
||||
padding: 8px 36px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_primary_outline {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mx_CreateSpaceFromCommunityDialog_retryButton {
|
||||
margin-left: 12px;
|
||||
padding-left: 24px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: $primary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/retry.svg');
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog {
|
||||
.mx_InfoDialog {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog_checkmark {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
border: 3px solid $accent-color;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
margin: 12px auto 32px;
|
||||
|
||||
&::before {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: $accent-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
|
||||
mask-size: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
81
res/css/views/dialogs/_CreateSubspaceDialog.scss
Normal file
81
res/css/views/dialogs/_CreateSubspaceDialog.scss
Normal file
@ -0,0 +1,81 @@
|
||||
/*
|
||||
Copyright 2021 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_CreateSubspaceDialog_wrapper {
|
||||
.mx_Dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CreateSubspaceDialog {
|
||||
width: 480px;
|
||||
color: $primary-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
min-height: 0;
|
||||
|
||||
.mx_CreateSubspaceDialog_content {
|
||||
flex-grow: 1;
|
||||
|
||||
.mx_CreateSubspaceDialog_betaNotice {
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
background-color: $header-panel-bg-color;
|
||||
|
||||
.mx_BetaCard_betaPill {
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_JoinRuleDropdown + p {
|
||||
color: $muted-fg-color;
|
||||
font-size: $font-12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CreateSubspaceDialog_footer {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
|
||||
.mx_CreateSubspaceDialog_footer_prompt {
|
||||
flex-grow: 1;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-content;
|
||||
|
||||
> * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
display: inline-block;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_primary {
|
||||
margin-left: 16px;
|
||||
padding: 8px 36px;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -55,22 +55,6 @@ limitations under the License.
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.mx_DevTools_inputCell {
|
||||
display: table-cell;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.mx_DevTools_inputCell input {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
border-bottom: 1px solid $input-underline-color;
|
||||
padding: 0;
|
||||
width: 240px;
|
||||
color: $input-fg-color;
|
||||
font-family: $font-family;
|
||||
font-size: $font-16px;
|
||||
}
|
||||
|
||||
.mx_DevTools_textarea {
|
||||
font-size: $font-12px;
|
||||
max-width: 684px;
|
||||
@ -139,7 +123,6 @@ limitations under the License.
|
||||
+ .mx_DevTools_tgl-btn {
|
||||
padding: 2px;
|
||||
transition: all .2s ease;
|
||||
font-family: sans-serif;
|
||||
perspective: 100px;
|
||||
&::after,
|
||||
&::before {
|
||||
|
||||
@ -33,7 +33,7 @@ limitations under the License.
|
||||
padding-left: 52px;
|
||||
|
||||
> p {
|
||||
color: $tertiary-fg-color;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
|
||||
@ -16,7 +16,7 @@ limitations under the License.
|
||||
|
||||
.mx_ForwardDialog {
|
||||
width: 520px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
@ -25,7 +25,7 @@ limitations under the License.
|
||||
|
||||
> h3 {
|
||||
margin: 0 0 6px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
font-size: $font-12px;
|
||||
font-weight: $font-semi-bold;
|
||||
line-height: $font-15px;
|
||||
|
||||
@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_BetaFeedbackDialog {
|
||||
.mx_BetaFeedbackDialog_subheading {
|
||||
color: $primary-fg-color;
|
||||
.mx_GenericFeatureFeedbackDialog {
|
||||
.mx_GenericFeatureFeedbackDialog_subheading {
|
||||
color: $primary-content;
|
||||
font-size: $font-14px;
|
||||
line-height: $font-20px;
|
||||
margin-bottom: 24px;
|
||||
@ -70,11 +70,11 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_HostSignupDialog_text_dark {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_HostSignupDialog_text_light {
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_HostSignup_maximize_button {
|
||||
|
||||
@ -56,7 +56,7 @@ limitations under the License.
|
||||
box-sizing: border-box;
|
||||
min-width: 40%;
|
||||
flex: 1 !important;
|
||||
color: $primary-fg-color !important;
|
||||
color: $primary-content !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -94,7 +94,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
> span {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_subname {
|
||||
@ -110,7 +110,7 @@ limitations under the License.
|
||||
font-size: $font-14px;
|
||||
|
||||
> span {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -220,7 +220,7 @@ limitations under the License.
|
||||
.mx_InviteDialog_roomTile_name {
|
||||
font-weight: 600;
|
||||
font-size: $font-14px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
@ -352,7 +352,7 @@ limitations under the License.
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
margin-top: 0;
|
||||
border-color: $quaternary-fg-color;
|
||||
border-color: $quaternary-content;
|
||||
|
||||
input {
|
||||
font-size: 18px;
|
||||
@ -418,7 +418,7 @@ limitations under the License.
|
||||
> h4 {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@ -432,14 +432,14 @@ limitations under the License.
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
font-weight: $font-semi-bold;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_InviteDialog_multiInviterError_entry_userId {
|
||||
margin-left: 6px;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $tertiary-fg-color;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
67
res/css/views/dialogs/_JoinRuleDropdown.scss
Normal file
67
res/css/views/dialogs/_JoinRuleDropdown.scss
Normal file
@ -0,0 +1,67 @@
|
||||
/*
|
||||
Copyright 2021 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_JoinRuleDropdown {
|
||||
margin-bottom: 8px;
|
||||
font-weight: normal;
|
||||
font-family: $font-family;
|
||||
font-size: $font-14px;
|
||||
color: $primary-content;
|
||||
|
||||
.mx_Dropdown_input {
|
||||
border: 1px solid $input-border-color;
|
||||
}
|
||||
|
||||
.mx_Dropdown_option {
|
||||
font-size: $font-14px;
|
||||
line-height: $font-32px;
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
|
||||
> div {
|
||||
padding-left: 30px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 6px;
|
||||
top: 8px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_JoinRuleDropdown_invite::before {
|
||||
mask-image: url('$(res)/img/element-icons/lock.svg');
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
.mx_JoinRuleDropdown_public::before {
|
||||
mask-image: url('$(res)/img/globe.svg');
|
||||
mask-size: 12px;
|
||||
}
|
||||
|
||||
.mx_JoinRuleDropdown_restricted::before {
|
||||
mask-image: url('$(res)/img/element-icons/community-members.svg');
|
||||
mask-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
96
res/css/views/dialogs/_LeaveSpaceDialog.scss
Normal file
96
res/css/views/dialogs/_LeaveSpaceDialog.scss
Normal file
@ -0,0 +1,96 @@
|
||||
/*
|
||||
Copyright 2021 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_LeaveSpaceDialog_wrapper {
|
||||
.mx_Dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeaveSpaceDialog {
|
||||
width: 440px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
max-height: 520px;
|
||||
|
||||
.mx_Dialog_content {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
.mx_RadioButton + .mx_RadioButton {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.mx_SearchBox {
|
||||
// To match the space around the title
|
||||
margin: 0 0 15px 0;
|
||||
flex-grow: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_LeaveSpaceDialog_noResults {
|
||||
display: block;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.mx_LeaveSpaceDialog_section {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.mx_LeaveSpaceDialog_section_warning {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
margin: 12px 0 0;
|
||||
padding: 12px 8px 12px 42px;
|
||||
background-color: $header-panel-bg-color;
|
||||
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-content;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: calc(50% - 8px); // vertical centering
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: $secondary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
> p {
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Dialog_buttons {
|
||||
margin-top: 20px;
|
||||
|
||||
.mx_Dialog_primary {
|
||||
background-color: $notice-primary-color !important; // override default colour
|
||||
border-color: $notice-primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
150
res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss
Normal file
150
res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss
Normal file
@ -0,0 +1,150 @@
|
||||
/*
|
||||
Copyright 2021 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_ManageRestrictedJoinRuleDialog_wrapper {
|
||||
.mx_Dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ManageRestrictedJoinRuleDialog {
|
||||
width: 480px;
|
||||
color: $primary-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
min-height: 0;
|
||||
height: 60vh;
|
||||
|
||||
.mx_SearchBox {
|
||||
// To match the space around the title
|
||||
margin: 0 0 15px 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.mx_ManageRestrictedJoinRuleDialog_content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mx_ManageRestrictedJoinRuleDialog_noResults {
|
||||
display: block;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.mx_ManageRestrictedJoinRuleDialog_section {
|
||||
&:not(:first-child) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
margin: 0;
|
||||
color: $secondary-content;
|
||||
font-size: $font-12px;
|
||||
font-weight: $font-semi-bold;
|
||||
line-height: $font-15px;
|
||||
}
|
||||
|
||||
.mx_ManageRestrictedJoinRuleDialog_entry {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
img.mx_RoomAvatar_isSpaceRoom,
|
||||
.mx_RoomAvatar_isSpaceRoom img {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mx_ManageRestrictedJoinRuleDialog_entry_name {
|
||||
margin: 0 8px;
|
||||
font-size: $font-15px;
|
||||
line-height: 30px;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mx_ManageRestrictedJoinRuleDialog_entry_description {
|
||||
margin-top: 8px;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
|
||||
.mx_Checkbox {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ManageRestrictedJoinRuleDialog_section_spaces {
|
||||
.mx_BaseAvatar {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ManageRestrictedJoinRuleDialog_section_info {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
margin: 12px 0;
|
||||
padding: 8px 8px 8px 42px;
|
||||
background-color: $header-panel-bg-color;
|
||||
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-content;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: calc(50% - 8px); // vertical centering
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: $secondary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ManageRestrictedJoinRuleDialog_footer {
|
||||
margin-top: 20px;
|
||||
|
||||
.mx_ManageRestrictedJoinRuleDialog_footer_buttons {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
margin-left: auto;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
display: inline-block;
|
||||
|
||||
& + .mx_AccessibleButton {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -37,7 +37,7 @@ limitations under the License.
|
||||
list-style-type: none;
|
||||
font-size: $font-14px;
|
||||
padding: 0;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
|
||||
span.mx_EditHistoryMessage_deletion, span.mx_EditHistoryMessage_insertion {
|
||||
padding: 0px 2px;
|
||||
|
||||
@ -19,7 +19,7 @@ limitations under the License.
|
||||
|
||||
.mx_Dialog_content {
|
||||
margin-bottom: 24px;
|
||||
color: $tertiary-fg-color;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
|
||||
.mx_Dialog_primary {
|
||||
|
||||
@ -72,7 +72,7 @@ limitations under the License.
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
font-size: 16pt;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
> * {
|
||||
@ -81,7 +81,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.workspace-channel-details {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
font-weight: 600;
|
||||
|
||||
.channel {
|
||||
|
||||
@ -17,10 +17,10 @@ limitations under the License.
|
||||
.mx_ServerOfflineDialog {
|
||||
.mx_ServerOfflineDialog_content {
|
||||
padding-right: 85px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
|
||||
hr {
|
||||
border-color: $primary-fg-color;
|
||||
border-color: $primary-content;
|
||||
opacity: 0.1;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ limitations under the License.
|
||||
margin-bottom: 0;
|
||||
|
||||
> p {
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
font-size: $font-14px;
|
||||
margin: 16px 0;
|
||||
|
||||
@ -38,7 +38,7 @@ limitations under the License.
|
||||
> h4 {
|
||||
font-size: $font-15px;
|
||||
font-weight: $font-semi-bold;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ limitations under the License.
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 9px;
|
||||
color: $input-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
font-size: $font-15px;
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
|
||||
@ -15,7 +15,7 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_SpaceSettingsDialog {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
|
||||
.mx_SpaceSettings_errorText {
|
||||
font-weight: $font-semi-bold;
|
||||
@ -50,13 +50,13 @@ limitations under the License.
|
||||
.mx_RadioButton_content {
|
||||
font-weight: $font-semi-bold;
|
||||
line-height: $font-18px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
& + span {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-18px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
margin-left: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,7 +44,7 @@ limitations under the License.
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_resetBadge::before {
|
||||
|
||||
@ -56,7 +56,7 @@ limitations under the License.
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_secureBackupTitle::before {
|
||||
@ -101,7 +101,7 @@ limitations under the License.
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
|
||||
|
||||
@ -26,7 +26,7 @@ limitations under the License.
|
||||
&::before {
|
||||
mask: url("$(res)/img/e2e/lock-warning-filled.svg");
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
|
||||
@ -34,7 +34,7 @@ limitations under the License.
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $dialog-close-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -153,7 +153,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_handle_server {
|
||||
|
||||
@ -16,7 +16,7 @@ limitations under the License.
|
||||
|
||||
.mx_AddressSelector {
|
||||
position: absolute;
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
width: 485px;
|
||||
max-height: 116px;
|
||||
overflow-y: auto;
|
||||
@ -31,8 +31,8 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_AddressSelector_addressListElement .mx_AddressTile {
|
||||
background-color: $primary-bg-color;
|
||||
border: solid 1px $primary-bg-color;
|
||||
background-color: $background;
|
||||
border: solid 1px $background;
|
||||
}
|
||||
|
||||
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
|
||||
|
||||
@ -20,7 +20,7 @@ limitations under the License.
|
||||
background-color: rgba(74, 73, 74, 0.1);
|
||||
border: solid 1px $input-border-color;
|
||||
line-height: $font-26px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
font-size: $font-14px;
|
||||
font-weight: normal;
|
||||
margin-right: 4px;
|
||||
|
||||
@ -16,57 +16,41 @@ limitations under the License.
|
||||
|
||||
.mx_desktopCapturerSourcePicker {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_desktopCapturerSourcePicker_tabLabels {
|
||||
display: flex;
|
||||
padding: 0 0 8px 0;
|
||||
}
|
||||
.mx_desktopCapturerSourcePicker_tab {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
height: 500px;
|
||||
overflow: overlay;
|
||||
|
||||
.mx_desktopCapturerSourcePicker_tabLabel,
|
||||
.mx_desktopCapturerSourcePicker_tabLabel_selected {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
padding: 8px 0;
|
||||
font-size: $font-13px;
|
||||
}
|
||||
.mx_desktopCapturerSourcePicker_source {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.mx_desktopCapturerSourcePicker_tabLabel_selected {
|
||||
background-color: $tab-label-active-bg-color;
|
||||
color: $tab-label-active-fg-color;
|
||||
}
|
||||
.mx_desktopCapturerSourcePicker_source_thumbnail {
|
||||
margin: 4px;
|
||||
padding: 4px;
|
||||
border-width: 2px;
|
||||
border-radius: 8px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
|
||||
.mx_desktopCapturerSourcePicker_panel {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
height: 500px;
|
||||
overflow: overlay;
|
||||
}
|
||||
&.mx_desktopCapturerSourcePicker_source_thumbnail_selected,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_desktopCapturerSourcePicker_stream_button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mx_desktopCapturerSourcePicker_stream_button:hover,
|
||||
.mx_desktopCapturerSourcePicker_stream_button:focus {
|
||||
background: $roomtile-selected-bg-color;
|
||||
}
|
||||
|
||||
.mx_desktopCapturerSourcePicker_stream_thumbnail {
|
||||
margin: 4px;
|
||||
width: 312px;
|
||||
}
|
||||
|
||||
.mx_desktopCapturerSourcePicker_stream_name {
|
||||
margin: 0 4px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 312px;
|
||||
.mx_desktopCapturerSourcePicker_source_name {
|
||||
margin: 0 4px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ limitations under the License.
|
||||
|
||||
.mx_Dropdown {
|
||||
position: relative;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_Dropdown_disabled {
|
||||
@ -27,7 +27,7 @@ limitations under the License.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $strong-input-border-color;
|
||||
font-size: $font-12px;
|
||||
user-select: none;
|
||||
@ -52,7 +52,7 @@ limitations under the License.
|
||||
padding-right: 9px;
|
||||
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
background: $primary-content;
|
||||
}
|
||||
|
||||
.mx_Dropdown_option {
|
||||
@ -109,9 +109,9 @@ input.mx_Dropdown_option:focus {
|
||||
z-index: 2;
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
border-radius: 3px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $input-focused-border-color;
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
22
res/css/views/elements/_EventTilePreview.scss
Normal file
22
res/css/views/elements/_EventTilePreview.scss
Normal file
@ -0,0 +1,22 @@
|
||||
/*
|
||||
Copyright 2021 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_EventTilePreview_loader {
|
||||
&.mx_IRCLayout,
|
||||
&.mx_GroupLayout {
|
||||
padding: 9px 0;
|
||||
}
|
||||
}
|
||||
@ -25,7 +25,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
border: 1px solid $primary-bg-color;
|
||||
border: 1px solid $background;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_initial {
|
||||
@ -47,7 +47,7 @@ limitations under the License.
|
||||
left: 0;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
background: $tertiary-fg-color;
|
||||
background: $tertiary-content;
|
||||
mask-position: center;
|
||||
mask-size: 20px;
|
||||
mask-repeat: no-repeat;
|
||||
@ -60,6 +60,6 @@ limitations under the License.
|
||||
margin-left: 12px;
|
||||
font-size: $font-14px;
|
||||
line-height: $font-24px;
|
||||
color: $tertiary-fg-color;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,16 +38,16 @@ limitations under the License.
|
||||
.mx_Field input,
|
||||
.mx_Field select,
|
||||
.mx_Field textarea {
|
||||
font-family: inherit;
|
||||
font-weight: normal;
|
||||
font-family: $font-family;
|
||||
font-size: $font-14px;
|
||||
border: none;
|
||||
// Even without a border here, we still need this avoid overlapping the rounded
|
||||
// corners on the field above.
|
||||
border-radius: 4px;
|
||||
padding: 8px 9px;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
color: $primary-content;
|
||||
background-color: $background;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
@ -67,7 +67,7 @@ limitations under the License.
|
||||
height: 6px;
|
||||
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -100,7 +100,7 @@ limitations under the License.
|
||||
color 0.25s ease-out 0.1s,
|
||||
top 0.25s ease-out 0.1s,
|
||||
background-color 0.25s ease-out 0.1s;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
background-color: transparent;
|
||||
font-size: $font-14px;
|
||||
position: absolute;
|
||||
|
||||
@ -32,12 +32,12 @@ limitations under the License.
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
margin-right: 8px;
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
mask-image: url('$(res)/img/feather-customised/eye.svg');
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
|
||||
@ -37,7 +37,7 @@ limitations under the License.
|
||||
right: -6px;
|
||||
bottom: -6px;
|
||||
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
|
||||
@ -45,7 +45,7 @@ limitations under the License.
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url('$(res)/img/element-icons/camera.svg');
|
||||
|
||||
@ -43,7 +43,7 @@ a.mx_Pill {
|
||||
/* More specific to override `.markdown-body a` color */
|
||||
.mx_EventTile_content .markdown-body a.mx_UserPill,
|
||||
.mx_UserPill {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
background-color: $other-user-pill-bg-color;
|
||||
}
|
||||
|
||||
|
||||
@ -35,7 +35,7 @@ limitations under the License.
|
||||
font-size: $font-14px;
|
||||
font-weight: $font-semi-bold;
|
||||
border: 1px solid $input-border-color;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
|
||||
> img {
|
||||
object-fit: contain;
|
||||
|
||||
@ -74,7 +74,7 @@ limitations under the License.
|
||||
|
||||
.mx_ServerPicker_desc {
|
||||
margin-top: -12px;
|
||||
color: $tertiary-fg-color;
|
||||
color: $tertiary-content;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 3;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@ -37,7 +37,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Spinner_icon {
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
mask: url('$(res)/img/spinner.svg');
|
||||
mask-size: contain;
|
||||
animation: 1.1s steps(12, end) infinite spin;
|
||||
|
||||
@ -25,7 +25,7 @@ limitations under the License.
|
||||
|
||||
.mx_AccessibleButton {
|
||||
min-width: 70px;
|
||||
padding: 0; // override from button styles
|
||||
padding: 0 8px; // override from button styles
|
||||
margin-left: 16px; // distance from <Field>
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@ limitations under the License.
|
||||
&::before {
|
||||
content: '';
|
||||
border-radius: 20px;
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
opacity: 0.15;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@ -84,7 +84,7 @@ limitations under the License.
|
||||
// These tooltips use an older style with a chevron
|
||||
.mx_Field_tooltip {
|
||||
background-color: $menu-bg-color;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
border: 1px solid $menu-border-color;
|
||||
text-align: unset;
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_EmojiPicker_anchor::before {
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
mask-size: 100%;
|
||||
@ -89,7 +89,7 @@ limitations under the License.
|
||||
margin: 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $input-border-color;
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
display: flex;
|
||||
|
||||
input {
|
||||
@ -126,7 +126,7 @@ limitations under the License.
|
||||
.mx_EmojiPicker_search_icon::after {
|
||||
mask: url('$(res)/img/emojipicker/search.svg') no-repeat;
|
||||
mask-size: 100%;
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
@ -16,7 +16,7 @@ limitations under the License.
|
||||
|
||||
.mx_GroupRoomTile {
|
||||
position: relative;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -14,118 +14,23 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_CallEvent {
|
||||
.mx_CallEvent_wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
background-color: $dark-panel-bg-color;
|
||||
border-radius: 8px;
|
||||
margin: 10px auto;
|
||||
max-width: 75%;
|
||||
box-sizing: border-box;
|
||||
height: 60px;
|
||||
|
||||
&.mx_CallEvent_voice {
|
||||
.mx_CallEvent_type_icon::before,
|
||||
.mx_CallEvent_content_button_callBack span::before,
|
||||
.mx_CallEvent_content_button_answer span::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_CallEvent_video {
|
||||
.mx_CallEvent_type_icon::before,
|
||||
.mx_CallEvent_content_button_callBack span::before,
|
||||
.mx_CallEvent_content_button_answer span::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallEvent_info {
|
||||
.mx_CallEvent {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-left: 12px;
|
||||
justify-content: space-between;
|
||||
|
||||
.mx_CallEvent_info_basic {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 10px; // To match mx_CallEvent
|
||||
|
||||
.mx_CallEvent_sender {
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.8rem;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.mx_CallEvent_type {
|
||||
font-weight: 400;
|
||||
color: $secondary-fg-color;
|
||||
font-size: 1.2rem;
|
||||
line-height: $font-13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_CallEvent_type_icon {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
margin-right: 5px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
background-color: $tertiary-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallEvent_content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: $secondary-fg-color;
|
||||
margin-right: 16px;
|
||||
|
||||
.mx_CallEvent_content_button {
|
||||
height: 24px;
|
||||
padding: 0px 12px;
|
||||
margin-left: 8px;
|
||||
|
||||
span {
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background-color: $button-fg-color;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallEvent_content_button_reject span::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
|
||||
}
|
||||
|
||||
.mx_CallEvent_content_tooltip {
|
||||
margin-right: 5px;
|
||||
}
|
||||
background-color: $dark-panel-bg-color;
|
||||
border-radius: 8px;
|
||||
width: 65%;
|
||||
box-sizing: border-box;
|
||||
height: 60px;
|
||||
margin: 4px 0;
|
||||
|
||||
.mx_CallEvent_iconButton {
|
||||
display: inline-flex;
|
||||
@ -136,7 +41,7 @@ limitations under the License.
|
||||
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
@ -150,5 +55,165 @@ limitations under the License.
|
||||
.mx_CallEvent_unSilence::before {
|
||||
mask-image: url('$(res)/img/voip/un-silence.svg');
|
||||
}
|
||||
|
||||
&.mx_CallEvent_voice {
|
||||
.mx_CallEvent_type_icon::before,
|
||||
.mx_CallEvent_content_button_callBack span::before,
|
||||
.mx_CallEvent_content_button_answer span::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_CallEvent_video {
|
||||
.mx_CallEvent_type_icon::before,
|
||||
.mx_CallEvent_content_button_callBack span::before,
|
||||
.mx_CallEvent_content_button_answer span::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_CallEvent_voice.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
|
||||
mask-image: url('$(res)/img/voip/missed-voice.svg');
|
||||
}
|
||||
|
||||
&.mx_CallEvent_video.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
|
||||
mask-image: url('$(res)/img/voip/missed-video.svg');
|
||||
}
|
||||
|
||||
&.mx_CallEvent_voice.mx_CallEvent_rejected .mx_CallEvent_type_icon::before,
|
||||
&.mx_CallEvent_voice.mx_CallEvent_noAnswer .mx_CallEvent_type_icon::before {
|
||||
mask-image: url('$(res)/img/voip/declined-voice.svg');
|
||||
}
|
||||
|
||||
&.mx_CallEvent_video.mx_CallEvent_rejected .mx_CallEvent_type_icon::before,
|
||||
&.mx_CallEvent_video.mx_CallEvent_noAnswer .mx_CallEvent_type_icon::before {
|
||||
mask-image: url('$(res)/img/voip/declined-video.svg');
|
||||
}
|
||||
|
||||
.mx_CallEvent_info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-left: 12px;
|
||||
min-width: 0;
|
||||
|
||||
.mx_CallEvent_info_basic {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 10px; // To match mx_CallEvent
|
||||
min-width: 0;
|
||||
|
||||
.mx_CallEvent_sender {
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.8rem;
|
||||
margin-bottom: 3px;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mx_CallEvent_type {
|
||||
font-weight: 400;
|
||||
color: $secondary-content;
|
||||
font-size: 1.2rem;
|
||||
line-height: $font-13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_CallEvent_type_icon {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
margin-right: 5px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
background-color: $secondary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallEvent_content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: $secondary-content;
|
||||
margin-right: 16px;
|
||||
gap: 8px;
|
||||
min-width: max-content;
|
||||
|
||||
.mx_CallEvent_content_button {
|
||||
padding: 0px 12px;
|
||||
|
||||
span {
|
||||
padding: 1px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background-color: $button-fg-color;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallEvent_content_button_reject span::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
|
||||
}
|
||||
|
||||
.mx_CallEvent_content_tooltip {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_CallEvent_narrow {
|
||||
height: unset;
|
||||
width: 290px;
|
||||
flex-direction: column;
|
||||
align-items: unset;
|
||||
gap: 16px;
|
||||
|
||||
.mx_CallEvent_iconButton {
|
||||
position: absolute;
|
||||
margin-right: 0;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_CallEvent_info {
|
||||
align-items: unset;
|
||||
margin-top: 12px;
|
||||
margin-right: 12px;
|
||||
|
||||
.mx_CallEvent_sender {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallEvent_content {
|
||||
margin-left: 54px; // mx_CallEvent margin (12px) + avatar (32px) + mx_CallEvent_info_basic margin (10px)
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
Copyright 2015, 2016, 2021 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2015 - 2021 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.
|
||||
@ -60,6 +60,8 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MFileBody_info {
|
||||
cursor: pointer;
|
||||
|
||||
.mx_MFileBody_info_icon {
|
||||
background-color: $message-body-panel-icon-bg-color;
|
||||
border-radius: 20px;
|
||||
|
||||
@ -16,8 +16,10 @@ limitations under the License.
|
||||
|
||||
$timelineImageBorderRadius: 4px;
|
||||
|
||||
.mx_MImageBody {
|
||||
display: block;
|
||||
.mx_MImageBody_thumbnail--blurhash {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.mx_MImageBody_thumbnail {
|
||||
@ -27,10 +29,17 @@ $timelineImageBorderRadius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
> canvas {
|
||||
.mx_Blurhash > canvas {
|
||||
animation: mx--anim-pulse 1.75s infinite cubic-bezier(.4, 0, .6, 1);
|
||||
border-radius: $timelineImageBorderRadius;
|
||||
}
|
||||
|
||||
.mx_no-image-placeholder {
|
||||
background-color: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MImageBody_thumbnail_container {
|
||||
@ -91,5 +100,5 @@ $timelineImageBorderRadius: 4px;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_HiddenImagePlaceholder {
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user