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 fix/bubble-highlight/18295
This commit is contained in:
Šimon Brandner
commit
e8bf7ac227
@ -63,6 +63,11 @@ module.exports = {
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
},
|
||||
}],
|
||||
settings: {
|
||||
react: {
|
||||
version: "detect",
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function buildRestrictedPropertiesOptions(properties, message) {
|
||||
|
||||
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 }}
|
||||
74
CHANGELOG.md
74
CHANGELOG.md
@ -1,4 +1,76 @@
|
||||
Changes in [3.27.0](https://github.com/vector-im/element-desktop/releases/tag/v3.27.0) (2021-07-02)
|
||||
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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "matrix-react-sdk",
|
||||
"version": "3.27.0",
|
||||
"version": "3.28.1",
|
||||
"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,7 +82,7 @@
|
||||
"katex": "^0.12.0",
|
||||
"linkifyjs": "^2.1.9",
|
||||
"lodash": "^4.17.20",
|
||||
"matrix-js-sdk": "12.2.0",
|
||||
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
|
||||
"matrix-widget-api": "^0.1.0-beta.15",
|
||||
"minimist": "^1.2.5",
|
||||
"opus-recorder": "^8.0.3",
|
||||
@ -149,7 +151,7 @@
|
||||
"@typescript-eslint/eslint-plugin": "^4.17.0",
|
||||
"@typescript-eslint/parser": "^4.17.0",
|
||||
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
|
||||
"allchange": "github:matrix-org/allchange",
|
||||
"allchange": "^1.0.2",
|
||||
"babel-jest": "^26.6.3",
|
||||
"chokidar": "^3.5.1",
|
||||
"concurrently": "^5.3.0",
|
||||
|
||||
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;
|
||||
@ -141,12 +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 {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
@ -167,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],
|
||||
@ -183,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;
|
||||
}
|
||||
@ -208,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;
|
||||
}
|
||||
}
|
||||
@ -270,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;
|
||||
@ -378,8 +379,13 @@ 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;
|
||||
|
||||
a {
|
||||
color: $accent-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Dialog_buttons {
|
||||
@ -487,8 +493,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";
|
||||
@ -75,6 +76,7 @@
|
||||
@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";
|
||||
@ -270,6 +272,7 @@
|
||||
@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";
|
||||
|
||||
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;
|
||||
}
|
||||
@ -68,23 +53,29 @@ limitations under the License.
|
||||
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;
|
||||
@ -105,7 +96,7 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_error {
|
||||
.mx_SpaceHierarchy_error {
|
||||
position: relative;
|
||||
font-weight: $font-semi-bold;
|
||||
color: $notice-primary-color;
|
||||
@ -124,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: '';
|
||||
@ -171,23 +163,23 @@ 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;
|
||||
@ -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;
|
||||
@ -235,7 +238,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -236,6 +251,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
.mx_SpaceRoomView_landing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
|
||||
> .mx_BaseAvatar_image,
|
||||
> .mx_BaseAvatar > .mx_BaseAvatar_image {
|
||||
@ -245,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;
|
||||
@ -318,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;
|
||||
@ -342,16 +358,11 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
|
||||
.mx_SpaceFeedbackPrompt {
|
||||
padding: 7px; // 8px - 1px border
|
||||
border: 1px solid $menu-border-color;
|
||||
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
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_list {
|
||||
// we don't want this container to get forced into the flexbox layout
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_privateScope {
|
||||
@ -376,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 {
|
||||
@ -403,7 +414,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 14px;
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -426,7 +437,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_inviteTeammates_buttons {
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
margin-top: 28px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
@ -442,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;
|
||||
@ -461,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;
|
||||
@ -480,7 +491,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
left: -2px;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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: $toast-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: $toast-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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -119,7 +119,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
background: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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,7 +44,7 @@ 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;
|
||||
@ -66,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;
|
||||
@ -79,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;
|
||||
}
|
||||
|
||||
> * {
|
||||
@ -105,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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -126,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;
|
||||
@ -145,7 +145,7 @@ limitations under the License.
|
||||
|
||||
.mx_AddExistingToSpaceDialog {
|
||||
width: 480px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
@ -188,7 +188,7 @@ limitations under the License.
|
||||
padding-left: 0;
|
||||
flex: unset;
|
||||
height: unset;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
@ -221,7 +221,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_SubspaceSelector_onlySpace {
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -35,8 +35,8 @@ limitations under the License.
|
||||
|
||||
.mx_ConfirmUserActionDialog_reasonField {
|
||||
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%;
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -23,7 +23,7 @@ limitations under the License.
|
||||
|
||||
.mx_CreateSubspaceDialog {
|
||||
width: 480px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
@ -57,7 +57,7 @@ limitations under the License.
|
||||
flex-grow: 1;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
|
||||
> * {
|
||||
vertical-align: middle;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -16,7 +16,7 @@ limitations under the License.
|
||||
|
||||
.mx_GenericFeatureFeedbackDialog {
|
||||
.mx_GenericFeatureFeedbackDialog_subheading {
|
||||
color: $primary-fg-color;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ limitations under the License.
|
||||
font-weight: normal;
|
||||
font-family: $font-family;
|
||||
font-size: $font-14px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
|
||||
.mx_Dropdown_input {
|
||||
border: 1px solid $input-border-color;
|
||||
@ -44,7 +44,7 @@ limitations under the License.
|
||||
top: 8px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,7 +63,7 @@ limitations under the License.
|
||||
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
@ -72,7 +72,7 @@ limitations under the License.
|
||||
top: calc(50% - 8px); // vertical centering
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
|
||||
@ -81,7 +81,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
> p {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ limitations under the License.
|
||||
|
||||
.mx_ManageRestrictedJoinRuleDialog {
|
||||
width: 480px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
@ -52,7 +52,7 @@ 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;
|
||||
@ -85,7 +85,7 @@ limitations under the License.
|
||||
margin-top: 8px;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $tertiary-fg-color;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
|
||||
.mx_Checkbox {
|
||||
@ -113,7 +113,7 @@ limitations under the License.
|
||||
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
@ -122,7 +122,7 @@ limitations under the License.
|
||||
top: calc(50% - 8px); // vertical centering
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
|
||||
|
||||
@ -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,7 +16,7 @@ limitations under the License.
|
||||
|
||||
.mx_Dropdown {
|
||||
position: relative;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_Dropdown_disabled {
|
||||
@ -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 {
|
||||
@ -111,7 +111,7 @@ input.mx_Dropdown_option:focus {
|
||||
padding: 0px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $input-focused-border-color;
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@ -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,6 +38,7 @@ limitations under the License.
|
||||
.mx_Field input,
|
||||
.mx_Field select,
|
||||
.mx_Field textarea {
|
||||
font-family: inherit;
|
||||
font-weight: normal;
|
||||
font-size: $font-14px;
|
||||
border: none;
|
||||
@ -45,8 +46,8 @@ limitations under the License.
|
||||
// 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;
|
||||
}
|
||||
@ -66,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;
|
||||
}
|
||||
@ -99,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,126 +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;
|
||||
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_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_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;
|
||||
@ -144,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;
|
||||
@ -158,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,6 +16,12 @@ limitations under the License.
|
||||
|
||||
$timelineImageBorderRadius: 4px;
|
||||
|
||||
.mx_MImageBody_thumbnail--blurhash {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.mx_MImageBody_thumbnail {
|
||||
object-fit: contain;
|
||||
border-radius: $timelineImageBorderRadius;
|
||||
@ -23,10 +29,17 @@ $timelineImageBorderRadius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
> div > 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 {
|
||||
@ -87,5 +100,5 @@ $timelineImageBorderRadius: 4px;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_HiddenImagePlaceholder {
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ limitations under the License.
|
||||
height: 32px;
|
||||
line-height: $font-24px;
|
||||
border-radius: 8px;
|
||||
background: $primary-bg-color;
|
||||
background: $background;
|
||||
border: 1px solid $input-border-color;
|
||||
top: -32px;
|
||||
right: 8px;
|
||||
@ -77,11 +77,11 @@ limitations under the License.
|
||||
mask-size: 18px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_maskButton:hover::after {
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_reactButton::after {
|
||||
|
||||
@ -16,7 +16,7 @@ limitations under the License.
|
||||
|
||||
.mx_ReactionsRow {
|
||||
margin: 6px 0;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
|
||||
.mx_ReactionsRow_addReactionButton {
|
||||
position: relative;
|
||||
@ -36,7 +36,7 @@ limitations under the License.
|
||||
mask-size: 16px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@ limitations under the License.
|
||||
|
||||
&:hover, &.mx_ReactionsRow_addReactionButton_active {
|
||||
&::before {
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -64,10 +64,10 @@ limitations under the License.
|
||||
vertical-align: middle;
|
||||
|
||||
&:link, &:visited {
|
||||
color: $tertiary-fg-color;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -93,7 +93,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
> h1 {
|
||||
color: $tertiary-fg-color;
|
||||
color: $tertiary-content;
|
||||
font-size: $font-12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -145,7 +145,7 @@ limitations under the License.
|
||||
justify-content: space-around;
|
||||
|
||||
.mx_AccessibleButton_kind_secondary {
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
background-color: rgba(141, 151, 165, 0.2);
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-14px;
|
||||
|
||||
@ -48,7 +48,7 @@ limitations under the License.
|
||||
height: 32px;
|
||||
line-height: $font-24px;
|
||||
border-radius: 8px;
|
||||
background: $primary-bg-color;
|
||||
background: $background;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 1px;
|
||||
width: max-content;
|
||||
@ -66,7 +66,7 @@ limitations under the License.
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -75,7 +75,7 @@ limitations under the License.
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@ -83,7 +83,7 @@ limitations under the License.
|
||||
> span {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@ limitations under the License.
|
||||
|
||||
.mx_RoomSummaryCard_alias {
|
||||
font-size: $font-13px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
h2, .mx_RoomSummaryCard_alias {
|
||||
@ -115,7 +115,7 @@ limitations under the License.
|
||||
// as we will be applying it in its children
|
||||
padding: 0;
|
||||
height: auto;
|
||||
color: $tertiary-fg-color;
|
||||
color: $tertiary-content;
|
||||
|
||||
.mx_RoomSummaryCard_icon_app {
|
||||
padding: 10px 48px 10px 12px; // based on typical mx_RoomSummaryCard_Button padding
|
||||
@ -128,7 +128,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
span {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -55,7 +55,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_UserInfo_separator {
|
||||
border-bottom: 1px solid rgba($primary-fg-color, .1);
|
||||
border-bottom: 1px solid rgba($primary-content, .1);
|
||||
}
|
||||
|
||||
.mx_UserInfo_memberDetailsContainer {
|
||||
|
||||
@ -51,7 +51,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -64,7 +64,7 @@ $MiniAppTileHeight: 200px;
|
||||
&:hover {
|
||||
.mx_AppsContainer_resizerHandle::after {
|
||||
opacity: 0.8;
|
||||
background: $primary-fg-color;
|
||||
background: $primary-content;
|
||||
}
|
||||
|
||||
.mx_ResizeHandle_horizontal::before {
|
||||
@ -79,7 +79,7 @@ $MiniAppTileHeight: 200px;
|
||||
|
||||
content: '';
|
||||
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,27 +4,29 @@
|
||||
z-index: 1001;
|
||||
width: 100%;
|
||||
border: 1px solid $primary-hairline-color;
|
||||
background: $primary-bg-color;
|
||||
background: $background;
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
max-height: 35vh;
|
||||
overflow: clip;
|
||||
display: flex;
|
||||
box-shadow: 0px -16px 32px $composer-shadow-color;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_ProviderSection {
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* a "block" completion takes up a whole line */
|
||||
.mx_Autocomplete_Completion_block {
|
||||
height: 34px;
|
||||
min-height: 34px;
|
||||
display: flex;
|
||||
padding: 0 12px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_block * {
|
||||
@ -40,7 +42,7 @@
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_pill > * {
|
||||
@ -59,8 +61,8 @@
|
||||
|
||||
.mx_Autocomplete_Completion_container_pill {
|
||||
margin: 12px;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_container_truncate {
|
||||
@ -68,7 +70,6 @@
|
||||
.mx_Autocomplete_Completion_subtitle,
|
||||
.mx_Autocomplete_Completion_description {
|
||||
/* Ellipsis for long names/subtitles/descriptions */
|
||||
max-width: 150px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -83,7 +84,7 @@
|
||||
|
||||
.mx_Autocomplete_provider_name {
|
||||
margin: 12px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
font-weight: 400;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@ limitations under the License.
|
||||
|
||||
@keyframes visualbell {
|
||||
from { background-color: $visual-bell-bg-color; }
|
||||
to { background-color: $primary-bg-color; }
|
||||
to { background-color: $background; }
|
||||
}
|
||||
|
||||
&.mx_BasicMessageComposer_input_error {
|
||||
@ -65,6 +65,14 @@ limitations under the License.
|
||||
font-size: $font-10-4px;
|
||||
}
|
||||
}
|
||||
|
||||
span.mx_UserPill {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span.mx_RoomPill {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_BasicMessageComposer_input_disabled {
|
||||
|
||||
@ -28,7 +28,7 @@ limitations under the License.
|
||||
.mx_BasicMessageComposer_input {
|
||||
border-radius: 4px;
|
||||
border: solid 1px $primary-hairline-color;
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
max-height: 200px;
|
||||
padding: 3px 6px;
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ limitations under the License.
|
||||
.mx_EntityTile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
cursor: pointer;
|
||||
|
||||
.mx_E2EIcon {
|
||||
@ -86,12 +86,12 @@ limitations under the License.
|
||||
|
||||
.mx_EntityTile_ellipsis .mx_EntityTile_name {
|
||||
font-style: italic;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
|
||||
font-style: italic;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_EntityTile_unavailable .mx_EntityTile_avatar,
|
||||
|
||||
@ -109,6 +109,8 @@ limitations under the License.
|
||||
|
||||
.mx_ReplyTile .mx_SenderProfile {
|
||||
display: block;
|
||||
top: unset;
|
||||
left: unset;
|
||||
}
|
||||
|
||||
.mx_ReactionsRow {
|
||||
@ -192,8 +194,6 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_ReplyThread {
|
||||
margin: 0 calc(-1 * var(--gutterSize));
|
||||
|
||||
.mx_EventTile_reply {
|
||||
max-width: 90%;
|
||||
padding: 0;
|
||||
@ -227,11 +227,6 @@ limitations under the License.
|
||||
margin-left: -9px;
|
||||
}
|
||||
|
||||
.mx_ReplyThread {
|
||||
border-left-width: 2px;
|
||||
border-left-color: $eventbubble-reply-color;
|
||||
}
|
||||
|
||||
/* Special layout scenario for "Unable To Decrypt (UTD)" events */
|
||||
&.mx_EventTile_bad > .mx_EventTile_line {
|
||||
display: grid;
|
||||
@ -268,6 +263,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
|
||||
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
|
||||
.mx_EventTile.mx_EventTile_info[data-layout=bubble],
|
||||
.mx_EventListSummary[data-layout=bubble][data-expanded=false] {
|
||||
--backgroundColor: transparent;
|
||||
|
||||
@ -55,7 +55,7 @@ $hover-select-border: 4px;
|
||||
}
|
||||
|
||||
.mx_SenderProfile {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
font-size: $font-14px;
|
||||
display: inline-block; /* anti-zalgo, with overflow hidden */
|
||||
overflow: hidden;
|
||||
@ -161,7 +161,7 @@ $hover-select-border: 4px;
|
||||
// up with the other read receipts
|
||||
|
||||
&::before {
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 14px;
|
||||
@ -480,7 +480,7 @@ $hover-select-border: 4px;
|
||||
}
|
||||
|
||||
pre code > * {
|
||||
display: inline-block;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
pre {
|
||||
@ -489,6 +489,10 @@ $hover-select-border: 4px;
|
||||
// https://github.com/vector-im/vector-web/issues/754
|
||||
overflow-x: overlay;
|
||||
overflow-y: visible;
|
||||
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -510,7 +514,7 @@ $hover-select-border: 4px;
|
||||
|
||||
.mx_EventTile:hover .mx_EventTile_body pre,
|
||||
.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
|
||||
border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
|
||||
border: 1px solid $tertiary-content;
|
||||
}
|
||||
|
||||
.mx_EventTile_pre_container {
|
||||
@ -614,7 +618,7 @@ $hover-select-border: 4px;
|
||||
}
|
||||
|
||||
.mx_EventTile_keyRequestInfo_text a {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@ limitations under the License.
|
||||
height: 38px;
|
||||
border-radius: 19px;
|
||||
box-sizing: border-box;
|
||||
background: $primary-bg-color;
|
||||
background: $background;
|
||||
border: 1.3px solid $muted-fg-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user