mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-16 05:04:57 +08:00
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into pseudonymous-analytics-id
This commit is contained in:
James Salter
commit
79f03dfec3
@ -63,6 +63,11 @@ module.exports = {
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
},
|
||||
}],
|
||||
settings: {
|
||||
react: {
|
||||
version: "detect",
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function buildRestrictedPropertiesOptions(properties, message) {
|
||||
|
||||
2
.github/workflows/develop.yml
vendored
2
.github/workflows/develop.yml
vendored
@ -10,6 +10,8 @@ on:
|
||||
jobs:
|
||||
end-to-end:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
PR_NUMBER: ${{github.event.number}}
|
||||
container: vectorim/element-web-ci-e2etests-env:latest
|
||||
steps:
|
||||
- name: Checkout code
|
||||
|
||||
24
.github/workflows/typecheck.yaml
vendored
Normal file
24
.github/workflows/typecheck.yaml
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
name: Type Check
|
||||
on:
|
||||
pull_request:
|
||||
branches: [develop]
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: c-hive/gha-yarn-cache@v2
|
||||
- name: Install Deps
|
||||
run: "./scripts/ci/install-deps.sh --ignore-scripts"
|
||||
- name: Typecheck
|
||||
run: "yarn run lint:types"
|
||||
- name: Switch js-sdk to release mode
|
||||
run: |
|
||||
scripts/ci/js-sdk-to-release.js
|
||||
cd node_modules/matrix-js-sdk
|
||||
yarn install
|
||||
yarn run build:compile
|
||||
yarn run build:types
|
||||
- name: Typecheck (release mode)
|
||||
run: "yarn run lint:types"
|
||||
|
||||
@ -17,6 +17,7 @@ module.exports = {
|
||||
"selector-list-comma-newline-after": null,
|
||||
"at-rule-no-unknown": null,
|
||||
"no-descending-specificity": null,
|
||||
"no-empty-first-line": true,
|
||||
"scss/at-rule-no-unknown": [true, {
|
||||
// https://github.com/vector-im/element-web/issues/10544
|
||||
"ignoreAtRules": ["define-mixin"],
|
||||
|
||||
111
CHANGELOG.md
111
CHANGELOG.md
@ -1,3 +1,114 @@
|
||||
Changes in [3.30.0](https://github.com/vector-im/element-desktop/releases/tag/v3.30.0) (2021-09-14)
|
||||
===================================================================================================
|
||||
|
||||
## ✨ Features
|
||||
* Add bubble highlight styling ([\#6582](https://github.com/matrix-org/matrix-react-sdk/pull/6582)). Fixes vector-im/element-web#18295 and vector-im/element-web#18295. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* [Release] Add config option to turn on in-room event sending timing metrics ([\#6773](https://github.com/matrix-org/matrix-react-sdk/pull/6773)).
|
||||
* Create narrow mode for Composer ([\#6682](https://github.com/matrix-org/matrix-react-sdk/pull/6682)). Fixes vector-im/element-web#18533 and vector-im/element-web#18533.
|
||||
* Prefer matrix.to alias links over room id in spaces & share ([\#6745](https://github.com/matrix-org/matrix-react-sdk/pull/6745)). Fixes vector-im/element-web#18796 and vector-im/element-web#18796.
|
||||
* Stop automatic playback of voice messages if a non-voice message is encountered ([\#6728](https://github.com/matrix-org/matrix-react-sdk/pull/6728)). Fixes vector-im/element-web#18850 and vector-im/element-web#18850.
|
||||
* Show call length during a call ([\#6700](https://github.com/matrix-org/matrix-react-sdk/pull/6700)). Fixes vector-im/element-web#18566 and vector-im/element-web#18566. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Serialize and retry mass-leave when leaving space ([\#6737](https://github.com/matrix-org/matrix-react-sdk/pull/6737)). Fixes vector-im/element-web#18789 and vector-im/element-web#18789.
|
||||
* Improve form handling in and around space creation ([\#6739](https://github.com/matrix-org/matrix-react-sdk/pull/6739)). Fixes vector-im/element-web#18775 and vector-im/element-web#18775.
|
||||
* Split autoplay GIFs and videos into different settings ([\#6726](https://github.com/matrix-org/matrix-react-sdk/pull/6726)). Fixes vector-im/element-web#5771 and vector-im/element-web#5771. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Add autoplay for voice messages ([\#6710](https://github.com/matrix-org/matrix-react-sdk/pull/6710)). Fixes vector-im/element-web#18804, vector-im/element-web#18715, vector-im/element-web#18714 vector-im/element-web#17961 and vector-im/element-web#18804.
|
||||
* Allow to use basic html to format invite messages ([\#6703](https://github.com/matrix-org/matrix-react-sdk/pull/6703)). Fixes vector-im/element-web#15738 and vector-im/element-web#15738. Contributed by [skolmer](https://github.com/skolmer).
|
||||
* Allow widgets, when eligible, to interact with more rooms as per MSC2762 ([\#6684](https://github.com/matrix-org/matrix-react-sdk/pull/6684)).
|
||||
* Remove arbitrary limits from send/receive events for widgets ([\#6719](https://github.com/matrix-org/matrix-react-sdk/pull/6719)). Fixes vector-im/element-web#17994 and vector-im/element-web#17994.
|
||||
* Reload suggested rooms if we see the state change down /sync ([\#6715](https://github.com/matrix-org/matrix-react-sdk/pull/6715)). Fixes vector-im/element-web#18761 and vector-im/element-web#18761.
|
||||
* When creating private spaces, make the initial rooms restricted if supported ([\#6721](https://github.com/matrix-org/matrix-react-sdk/pull/6721)). Fixes vector-im/element-web#18722 and vector-im/element-web#18722.
|
||||
* Threading exploration work ([\#6658](https://github.com/matrix-org/matrix-react-sdk/pull/6658)). Fixes vector-im/element-web#18532 and vector-im/element-web#18532.
|
||||
* Default to `Don't leave any` when leaving a space ([\#6697](https://github.com/matrix-org/matrix-react-sdk/pull/6697)). Fixes vector-im/element-web#18592 and vector-im/element-web#18592. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Special case redaction event sending from widgets per MSC2762 ([\#6686](https://github.com/matrix-org/matrix-react-sdk/pull/6686)). Fixes vector-im/element-web#18573 and vector-im/element-web#18573.
|
||||
* Add active speaker indicators ([\#6639](https://github.com/matrix-org/matrix-react-sdk/pull/6639)). Fixes vector-im/element-web#17627 and vector-im/element-web#17627. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Increase general app performance by optimizing layers ([\#6644](https://github.com/matrix-org/matrix-react-sdk/pull/6644)). Fixes vector-im/element-web#18730 and vector-im/element-web#18730. Contributed by [Palid](https://github.com/Palid).
|
||||
|
||||
## 🐛 Bug Fixes
|
||||
* Fix autocomplete not having y-scroll ([\#6802](https://github.com/matrix-org/matrix-react-sdk/pull/6802)).
|
||||
* Fix emoji picker and stickerpicker not appearing correctly when opened ([\#6801](https://github.com/matrix-org/matrix-react-sdk/pull/6801)).
|
||||
* Debounce read marker update on scroll ([\#6774](https://github.com/matrix-org/matrix-react-sdk/pull/6774)).
|
||||
* Fix Space creation wizard go to my first room button behaviour ([\#6748](https://github.com/matrix-org/matrix-react-sdk/pull/6748)). Fixes vector-im/element-web#18764 and vector-im/element-web#18764.
|
||||
* Fix scroll being stuck at bottom ([\#6751](https://github.com/matrix-org/matrix-react-sdk/pull/6751)). Fixes vector-im/element-web#18903 and vector-im/element-web#18903.
|
||||
* Fix widgets not remembering identity verification when asked to. ([\#6742](https://github.com/matrix-org/matrix-react-sdk/pull/6742)). Fixes vector-im/element-web#15631 and vector-im/element-web#15631.
|
||||
* Add missing pluralisation i18n strings for Spaces ([\#6738](https://github.com/matrix-org/matrix-react-sdk/pull/6738)). Fixes vector-im/element-web#18780 and vector-im/element-web#18780.
|
||||
* Make ForgotPassword UX slightly more user friendly ([\#6636](https://github.com/matrix-org/matrix-react-sdk/pull/6636)). Fixes vector-im/element-web#11531 and vector-im/element-web#11531. Contributed by [Palid](https://github.com/Palid).
|
||||
* Don't context switch room on SpaceStore ready as it can break permalinks ([\#6730](https://github.com/matrix-org/matrix-react-sdk/pull/6730)). Fixes vector-im/element-web#17974 and vector-im/element-web#17974.
|
||||
* Fix explore rooms button not working during space creation wizard ([\#6729](https://github.com/matrix-org/matrix-react-sdk/pull/6729)). Fixes vector-im/element-web#18762 and vector-im/element-web#18762.
|
||||
* Fix bug where one party's media would sometimes not be shown ([\#6731](https://github.com/matrix-org/matrix-react-sdk/pull/6731)).
|
||||
* Only make the initial space rooms suggested by default ([\#6714](https://github.com/matrix-org/matrix-react-sdk/pull/6714)). Fixes vector-im/element-web#18760 and vector-im/element-web#18760.
|
||||
* Replace fake username in EventTilePreview with a proper loading state ([\#6702](https://github.com/matrix-org/matrix-react-sdk/pull/6702)). Fixes vector-im/element-web#15897 and vector-im/element-web#15897. Contributed by [skolmer](https://github.com/skolmer).
|
||||
* Don't send prehistorical events to widgets during decryption at startup ([\#6695](https://github.com/matrix-org/matrix-react-sdk/pull/6695)). Fixes vector-im/element-web#18060 and vector-im/element-web#18060.
|
||||
* When creating subspaces properly set restricted join rule ([\#6725](https://github.com/matrix-org/matrix-react-sdk/pull/6725)). Fixes vector-im/element-web#18797 and vector-im/element-web#18797.
|
||||
* Fix the Image View not openning for some pinned messages ([\#6723](https://github.com/matrix-org/matrix-react-sdk/pull/6723)). Fixes vector-im/element-web#18422 and vector-im/element-web#18422. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Show autocomplete sections vertically ([\#6722](https://github.com/matrix-org/matrix-react-sdk/pull/6722)). Fixes vector-im/element-web#18860 and vector-im/element-web#18860. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix EmojiPicker filtering to lower case emojibase data strings ([\#6717](https://github.com/matrix-org/matrix-react-sdk/pull/6717)). Fixes vector-im/element-web#18686 and vector-im/element-web#18686.
|
||||
* Clear currentRoomId when viewing home page, fixing document title ([\#6716](https://github.com/matrix-org/matrix-react-sdk/pull/6716)). Fixes vector-im/element-web#18668 and vector-im/element-web#18668.
|
||||
* Fix membership updates to Spaces not applying in real-time ([\#6713](https://github.com/matrix-org/matrix-react-sdk/pull/6713)). Fixes vector-im/element-web#18737 and vector-im/element-web#18737.
|
||||
* Don't show a double stacked invite modals when inviting to Spaces ([\#6698](https://github.com/matrix-org/matrix-react-sdk/pull/6698)). Fixes vector-im/element-web#18745 and vector-im/element-web#18745. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Remove non-functional DuckDuckGo Autocomplete Provider ([\#6712](https://github.com/matrix-org/matrix-react-sdk/pull/6712)). Fixes vector-im/element-web#18778 and vector-im/element-web#18778.
|
||||
* Filter members on `MemberList` load ([\#6708](https://github.com/matrix-org/matrix-react-sdk/pull/6708)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix improper voice messages being produced in Firefox and sometimes other browsers. ([\#6696](https://github.com/matrix-org/matrix-react-sdk/pull/6696)). Fixes vector-im/element-web#18587 and vector-im/element-web#18587.
|
||||
* Fix client forgetting which capabilities a widget was approved for ([\#6685](https://github.com/matrix-org/matrix-react-sdk/pull/6685)). Fixes vector-im/element-web#18786 and vector-im/element-web#18786.
|
||||
* Fix left panel widgets not remembering collapsed state ([\#6687](https://github.com/matrix-org/matrix-react-sdk/pull/6687)). Fixes vector-im/element-web#17803 and vector-im/element-web#17803.
|
||||
* Fix changelog link colour back to blue ([\#6692](https://github.com/matrix-org/matrix-react-sdk/pull/6692)). Fixes vector-im/element-web#18726 and vector-im/element-web#18726.
|
||||
* Soften codeblock border color ([\#6564](https://github.com/matrix-org/matrix-react-sdk/pull/6564)). Fixes vector-im/element-web#18367 and vector-im/element-web#18367. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Pause ringing more aggressively ([\#6691](https://github.com/matrix-org/matrix-react-sdk/pull/6691)). Fixes vector-im/element-web#18588 and vector-im/element-web#18588. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix command autocomplete ([\#6680](https://github.com/matrix-org/matrix-react-sdk/pull/6680)). Fixes vector-im/element-web#18670 and vector-im/element-web#18670. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Don't re-sort the room-list based on profile/status changes ([\#6595](https://github.com/matrix-org/matrix-react-sdk/pull/6595)). Fixes vector-im/element-web#110 and vector-im/element-web#110. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix codeblock formatting with syntax highlighting on ([\#6681](https://github.com/matrix-org/matrix-react-sdk/pull/6681)). Fixes vector-im/element-web#18739 vector-im/element-web#18365 and vector-im/element-web#18739. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Add padding to the Add button in the notification settings ([\#6665](https://github.com/matrix-org/matrix-react-sdk/pull/6665)). Fixes vector-im/element-web#18706 and vector-im/element-web#18706. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
|
||||
Changes in [3.29.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.29.1) (2021-09-13)
|
||||
===================================================================================================
|
||||
|
||||
## 🔒 SECURITY FIXES
|
||||
* Fix a security issue with message key sharing. See https://matrix.org/blog/2021/09/13/vulnerability-disclosure-key-sharing
|
||||
for details.
|
||||
|
||||
Changes in [3.29.0](https://github.com/vector-im/element-desktop/releases/tag/v3.29.0) (2021-08-31)
|
||||
===================================================================================================
|
||||
|
||||
## ✨ Features
|
||||
* [Release]Increase general app performance by optimizing layers ([\#6672](https://github.com/matrix-org/matrix-react-sdk/pull/6672)). Fixes vector-im/element-web#18730 and vector-im/element-web#18730. Contributed by [Palid](https://github.com/Palid).
|
||||
* Add a warning on E2EE rooms if you try to make them public ([\#5698](https://github.com/matrix-org/matrix-react-sdk/pull/5698)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Allow pagination of the space hierarchy and use new APIs ([\#6507](https://github.com/matrix-org/matrix-react-sdk/pull/6507)). Fixes vector-im/element-web#18089 and vector-im/element-web#18427.
|
||||
* Improve emoji in composer ([\#6650](https://github.com/matrix-org/matrix-react-sdk/pull/6650)). Fixes vector-im/element-web#18593 and vector-im/element-web#18593. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Allow playback of replied-to voice message ([\#6629](https://github.com/matrix-org/matrix-react-sdk/pull/6629)). Fixes vector-im/element-web#18599 and vector-im/element-web#18599. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Format autocomplete suggestions vertically ([\#6620](https://github.com/matrix-org/matrix-react-sdk/pull/6620)). Fixes vector-im/element-web#17574 and vector-im/element-web#17574. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Remember last `MemberList` search query per-room ([\#6640](https://github.com/matrix-org/matrix-react-sdk/pull/6640)). Fixes vector-im/element-web#18613 and vector-im/element-web#18613. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Sentry rageshakes ([\#6597](https://github.com/matrix-org/matrix-react-sdk/pull/6597)). Fixes vector-im/element-web#11111 and vector-im/element-web#11111. Contributed by [novocaine](https://github.com/novocaine).
|
||||
* Autocomplete has been updated to match modern accessibility standards. Navigate via up/down arrows rather than Tab. Enter or Tab to confirm a suggestion. This should be familiar to Slack & Discord users. You can now use Tab to navigate around the application and do more without touching your mouse. No more accidentally sending half of people's names because the completion didn't fire on Enter! ([\#5659](https://github.com/matrix-org/matrix-react-sdk/pull/5659)). Fixes vector-im/element-web#4872, vector-im/element-web#11071, vector-im/element-web#17171, vector-im/element-web#15646 vector-im/element-web#4872 and vector-im/element-web#4872.
|
||||
* Add new call tile states ([\#6610](https://github.com/matrix-org/matrix-react-sdk/pull/6610)). Fixes vector-im/element-web#18521 and vector-im/element-web#18521. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Left align call tiles ([\#6609](https://github.com/matrix-org/matrix-react-sdk/pull/6609)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Make loading encrypted images look snappier ([\#6590](https://github.com/matrix-org/matrix-react-sdk/pull/6590)). Fixes vector-im/element-web#17878 and vector-im/element-web#17862. Contributed by [Palid](https://github.com/Palid).
|
||||
* Offer a way to create a space based on existing community ([\#6543](https://github.com/matrix-org/matrix-react-sdk/pull/6543)). Fixes vector-im/element-web#18092.
|
||||
* Accessibility improvements in and around Spaces ([\#6569](https://github.com/matrix-org/matrix-react-sdk/pull/6569)). Fixes vector-im/element-web#18094 and vector-im/element-web#18094.
|
||||
|
||||
## 🐛 Bug Fixes
|
||||
* [Release] Fix commit edit history ([\#6690](https://github.com/matrix-org/matrix-react-sdk/pull/6690)). Fixes vector-im/element-web#18742 and vector-im/element-web#18742. Contributed by [Palid](https://github.com/Palid).
|
||||
* Fix images not rendering when sent from other clients. ([\#6661](https://github.com/matrix-org/matrix-react-sdk/pull/6661)). Fixes vector-im/element-web#18702 and vector-im/element-web#18702.
|
||||
* Fix autocomplete scrollbar and make the autocomplete a little smaller ([\#6655](https://github.com/matrix-org/matrix-react-sdk/pull/6655)). Fixes vector-im/element-web#18682 and vector-im/element-web#18682. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix replies on the bubble layout ([\#6451](https://github.com/matrix-org/matrix-react-sdk/pull/6451)). Fixes vector-im/element-web#18184. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Show "Enable encryption in settings" only when the user can do that ([\#6646](https://github.com/matrix-org/matrix-react-sdk/pull/6646)). Fixes vector-im/element-web#18646 and vector-im/element-web#18646. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix cross signing setup from settings screen ([\#6633](https://github.com/matrix-org/matrix-react-sdk/pull/6633)). Fixes vector-im/element-web#17761 and vector-im/element-web#17761.
|
||||
* Fix call tiles on the bubble layout ([\#6647](https://github.com/matrix-org/matrix-react-sdk/pull/6647)). Fixes vector-im/element-web#18648 and vector-im/element-web#18648. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix error on accessing encrypted media without encryption keys ([\#6625](https://github.com/matrix-org/matrix-react-sdk/pull/6625)). Contributed by [Palid](https://github.com/Palid).
|
||||
* Fix jitsi widget sometimes being permanently stuck in the bottom-right corner ([\#6632](https://github.com/matrix-org/matrix-react-sdk/pull/6632)). Fixes vector-im/element-web#17226 and vector-im/element-web#17226. Contributed by [Palid](https://github.com/Palid).
|
||||
* Fix FilePanel pagination in E2EE rooms ([\#6630](https://github.com/matrix-org/matrix-react-sdk/pull/6630)). Fixes vector-im/element-web#18415 and vector-im/element-web#18415. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix call tile buttons ([\#6624](https://github.com/matrix-org/matrix-react-sdk/pull/6624)). Fixes vector-im/element-web#18565 and vector-im/element-web#18565. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix vertical call tile spacing issues ([\#6621](https://github.com/matrix-org/matrix-react-sdk/pull/6621)). Fixes vector-im/element-web#18558 and vector-im/element-web#18558. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix long display names in call tiles ([\#6618](https://github.com/matrix-org/matrix-react-sdk/pull/6618)). Fixes vector-im/element-web#18562 and vector-im/element-web#18562. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Avoid access token overflow ([\#6616](https://github.com/matrix-org/matrix-react-sdk/pull/6616)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Properly handle media errors ([\#6615](https://github.com/matrix-org/matrix-react-sdk/pull/6615)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix glare related regressions ([\#6614](https://github.com/matrix-org/matrix-react-sdk/pull/6614)). Fixes vector-im/element-web#18538 and vector-im/element-web#18538. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix long display names in call toasts ([\#6617](https://github.com/matrix-org/matrix-react-sdk/pull/6617)). Fixes vector-im/element-web#18557 and vector-im/element-web#18557. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix PiP of held calls ([\#6611](https://github.com/matrix-org/matrix-react-sdk/pull/6611)). Fixes vector-im/element-web#18539 and vector-im/element-web#18539. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix call tile behaviour on narrow layouts ([\#6556](https://github.com/matrix-org/matrix-react-sdk/pull/6556)). Fixes vector-im/element-web#18398. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Fix video call persisting when widget removed ([\#6608](https://github.com/matrix-org/matrix-react-sdk/pull/6608)). Fixes vector-im/element-web#15703 and vector-im/element-web#15703.
|
||||
* Fix toast colors ([\#6606](https://github.com/matrix-org/matrix-react-sdk/pull/6606)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Remove tiny scrollbar dot from code blocks ([\#6596](https://github.com/matrix-org/matrix-react-sdk/pull/6596)). Fixes vector-im/element-web#18474. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
* Improve handling of pills in the composer ([\#6353](https://github.com/matrix-org/matrix-react-sdk/pull/6353)). Fixes vector-im/element-web#10134 vector-im/element-web#10896 and vector-im/element-web#15037. Contributed by [SimonBrandner](https://github.com/SimonBrandner).
|
||||
|
||||
Changes in [3.28.1](https://github.com/vector-im/element-desktop/releases/tag/v3.28.1) (2021-08-17)
|
||||
===================================================================================================
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "matrix-react-sdk",
|
||||
"version": "3.28.1",
|
||||
"version": "3.30.0",
|
||||
"description": "SDK for matrix.org using React",
|
||||
"author": "matrix.org",
|
||||
"repository": {
|
||||
@ -83,7 +83,7 @@
|
||||
"linkifyjs": "^2.1.9",
|
||||
"lodash": "^4.17.20",
|
||||
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
|
||||
"matrix-widget-api": "^0.1.0-beta.15",
|
||||
"matrix-widget-api": "^0.1.0-beta.16",
|
||||
"minimist": "^1.2.5",
|
||||
"opus-recorder": "^8.0.3",
|
||||
"pako": "^2.0.3",
|
||||
@ -151,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": "^1.0.0",
|
||||
"allchange": "^1.0.3",
|
||||
"babel-jest": "^26.6.3",
|
||||
"chokidar": "^3.5.1",
|
||||
"concurrently": "^5.3.0",
|
||||
|
||||
@ -53,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;
|
||||
|
||||
@ -89,7 +89,7 @@ b {
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
font-weight: 400;
|
||||
font-size: $font-18px;
|
||||
margin-top: 16px;
|
||||
@ -142,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 {
|
||||
@ -168,12 +168,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
// it has the appearance of a text box so the controls
|
||||
// appear to be part of the input
|
||||
|
||||
.mx_Dialog, .mx_MatrixChat {
|
||||
.mx_Dialog, .mx_MatrixChat_wrapper {
|
||||
.mx_textinput > input[type=text],
|
||||
.mx_textinput > input[type=search] {
|
||||
border: none;
|
||||
flex: 1;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
|
||||
@ -184,7 +184,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
background-color: transparent;
|
||||
color: $input-darker-fg-color;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba($primary-fg-color, .1);
|
||||
border: 1px solid rgba($primary-content, .1);
|
||||
// these things should probably not be defined globally
|
||||
margin: 9px;
|
||||
}
|
||||
@ -209,7 +209,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
|
||||
.mx_textinput {
|
||||
color: $input-darker-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
@ -271,7 +271,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
}
|
||||
|
||||
.mx_Dialog {
|
||||
background-color: $primary-bg-color;
|
||||
background-color: $background;
|
||||
color: $light-fg-color;
|
||||
z-index: 4012;
|
||||
font-weight: 300;
|
||||
@ -379,7 +379,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
.mx_Dialog_content {
|
||||
margin: 24px 0 68px;
|
||||
font-size: $font-14px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
@ -488,8 +488,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";
|
||||
@ -131,6 +132,7 @@
|
||||
@import "./views/elements/_EditableItemList.scss";
|
||||
@import "./views/elements/_ErrorBoundary.scss";
|
||||
@import "./views/elements/_EventListSummary.scss";
|
||||
@import "./views/elements/_EventTilePreview.scss";
|
||||
@import "./views/elements/_FacePile.scss";
|
||||
@import "./views/elements/_Field.scss";
|
||||
@import "./views/elements/_ImageView.scss";
|
||||
|
||||
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;
|
||||
@ -397,7 +397,7 @@ limitations under the License.
|
||||
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_AccessibleButton_kind_link {
|
||||
@ -422,7 +422,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: 8px;
|
||||
mask-image: url('$(res)/img/image-view/close.svg');
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -278,12 +270,12 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
li.mx_SpaceRoomDirectory_roomTileWrapper {
|
||||
li.mx_SpaceHierarchy_roomTileWrapper {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_roomTile,
|
||||
.mx_SpaceRoomDirectory_subspace_children {
|
||||
.mx_SpaceHierarchy_roomTile,
|
||||
.mx_SpaceHierarchy_subspace_children {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -295,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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -311,7 +303,7 @@ limitations under the License.
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_createRoom {
|
||||
.mx_SpaceHierarchy_createRoom {
|
||||
display: block;
|
||||
margin: 16px auto 0;
|
||||
width: max-content;
|
||||
@ -20,13 +20,16 @@ $gutterSize: 16px;
|
||||
$activeBorderTransparentGap: 1px;
|
||||
|
||||
$activeBackgroundColor: $roomtile-selected-bg-color;
|
||||
$activeBorderColor: $secondary-fg-color;
|
||||
$activeBorderColor: $secondary-content;
|
||||
|
||||
.mx_SpacePanel {
|
||||
flex: 0 0 auto;
|
||||
background-color: $groupFilterPanel-bg-color;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
// Fix for the blurred avatar-background
|
||||
z-index: 1;
|
||||
|
||||
// Create another flexbox so the Panel fills the container
|
||||
display: flex;
|
||||
@ -111,6 +114,7 @@ $activeBorderColor: $secondary-fg-color;
|
||||
align-items: center;
|
||||
padding: 4px 4px 4px 0;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&.mx_SpaceButton_active {
|
||||
&:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
|
||||
@ -135,7 +139,6 @@ $activeBorderColor: $secondary-fg-color;
|
||||
&:not(.mx_SpaceButton_narrow) {
|
||||
.mx_SpaceButton_selectionWrapper {
|
||||
width: 100%;
|
||||
padding-right: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@ -147,7 +150,6 @@ $activeBorderColor: $secondary-fg-color;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding-right: 8px;
|
||||
font-size: $font-14px;
|
||||
line-height: $font-18px;
|
||||
}
|
||||
@ -221,8 +223,7 @@ $activeBorderColor: $secondary-fg-color;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
top: 2px;
|
||||
@ -235,14 +236,12 @@ $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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpacePanel_badgeContainer {
|
||||
position: absolute;
|
||||
|
||||
// Create a flexbox to make aligning dot badges easier
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -260,6 +259,7 @@ $activeBorderColor: $secondary-fg-color;
|
||||
&.collapsed {
|
||||
.mx_SpaceButton {
|
||||
.mx_SpacePanel_badgeContainer {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
@ -289,19 +289,12 @@ $activeBorderColor: $secondary-fg-color;
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
.mx_SpacePanel_badgeContainer {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.mx_SpaceButton:hover,
|
||||
.mx_SpaceButton:focus-within,
|
||||
.mx_SpaceButton_hasMenuOpen {
|
||||
&:not(.mx_SpaceButton_invite) {
|
||||
// Hide the badge container on hover because it'll be a menu button
|
||||
.mx_SpacePanel_badgeContainer {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@ -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,7 @@ $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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -207,7 +210,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
|
||||
.mx_SpaceRoomView_preview_inviter_mxid {
|
||||
line-height: $font-24px;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -224,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;
|
||||
@ -248,6 +251,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
.mx_SpaceRoomView_landing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
|
||||
> .mx_BaseAvatar_image,
|
||||
> .mx_BaseAvatar > .mx_BaseAvatar_image {
|
||||
@ -257,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;
|
||||
@ -330,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;
|
||||
@ -354,16 +358,11 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
|
||||
.mx_SpaceFeedbackPrompt {
|
||||
padding: 7px; // 8px - 1px border
|
||||
border: 1px solid rgba($primary-fg-color, .1);
|
||||
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 {
|
||||
@ -388,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 {
|
||||
@ -415,7 +414,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 14px;
|
||||
background-color: $secondary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -438,7 +437,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_inviteTeammates_buttons {
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
margin-top: 28px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
@ -454,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;
|
||||
@ -473,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;
|
||||
@ -492,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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -36,8 +36,8 @@ limitations under the License.
|
||||
.mx_Toast_toast {
|
||||
grid-row: 1 / 3;
|
||||
grid-column: 1;
|
||||
color: $primary-fg-color;
|
||||
background-color: $system;
|
||||
color: $primary-content;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
@ -63,7 +63,7 @@ limitations under the License.
|
||||
|
||||
&.mx_Toast_icon_verification::after {
|
||||
mask-image: url("$(res)/img/e2e/normal.svg");
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
&.mx_Toast_icon_verification_warning {
|
||||
@ -82,7 +82,7 @@ limitations under the License.
|
||||
|
||||
&.mx_Toast_icon_secure_backup::after {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_Toast_title, .mx_Toast_body {
|
||||
@ -163,7 +163,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_Toast_detail {
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_Toast_deviceID {
|
||||
|
||||
@ -35,7 +35,7 @@ limitations under the License.
|
||||
// we cheat opacity on the theme colour with an after selector here
|
||||
&::after {
|
||||
content: '';
|
||||
border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse
|
||||
border-bottom: 1px solid $primary-content;
|
||||
opacity: 0.2;
|
||||
display: block;
|
||||
padding-top: 8px;
|
||||
@ -58,7 +58,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $tertiary-fg-color;
|
||||
background: $tertiary-content;
|
||||
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
|
||||
}
|
||||
}
|
||||
@ -176,7 +176,7 @@ limitations under the License.
|
||||
width: 85%;
|
||||
opacity: 0.2;
|
||||
border: none;
|
||||
border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse
|
||||
border-bottom: 1px solid $primary-content;
|
||||
}
|
||||
|
||||
&.mx_IconizedContextMenu {
|
||||
@ -292,7 +292,7 @@ limitations under the License.
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background: $primary-fg-color;
|
||||
background: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ limitations under the License.
|
||||
.mx_ViewSource_heading {
|
||||
font-size: $font-17px;
|
||||
font-weight: 400;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
|
||||
|
||||
@ -96,3 +96,10 @@ div.mx_AccessibleButton_kind_link.mx_Login_forgot {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.mx_Login_spinner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_AudioPlayer_mediaName {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-15px;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -27,7 +27,7 @@ limitations under the License.
|
||||
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: $quaternary-fg-color;
|
||||
background: $quaternary-content;
|
||||
outline: none; // remove blue selection border
|
||||
position: relative; // for before+after pseudo elements later on
|
||||
|
||||
@ -42,7 +42,7 @@ limitations under the License.
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@ limitations under the License.
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
cursor: pointer;
|
||||
|
||||
// Firefox adds a border on the thumb
|
||||
@ -63,7 +63,7 @@ limitations under the License.
|
||||
// in firefox, so it's just wasted CPU/GPU time.
|
||||
&::before { // ::before to ensure it ends up under the thumb
|
||||
content: '';
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
|
||||
// Absolute positioning to ensure it overlaps with the existing bar
|
||||
position: absolute;
|
||||
@ -81,7 +81,7 @@ limitations under the License.
|
||||
|
||||
// This is firefox's built-in support for the above, with 100% less hacks.
|
||||
&::-moz-range-progress {
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $tertiary-content;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ limitations under the License.
|
||||
min-width: 80px;
|
||||
|
||||
background-color: $accent-color;
|
||||
color: $primary-bg-color;
|
||||
color: $background;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ limitations under the License.
|
||||
|
||||
.mx_CreateSpaceFromCommunityDialog {
|
||||
width: 480px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
@ -73,7 +73,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;
|
||||
@ -86,7 +86,7 @@ limitations under the License.
|
||||
margin-top: 8px;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
> * {
|
||||
@ -112,7 +112,7 @@ limitations under the License.
|
||||
margin-top: 4px;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -138,7 +138,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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
22
res/css/views/elements/_EventTilePreview.scss
Normal file
22
res/css/views/elements/_EventTilePreview.scss
Normal file
@ -0,0 +1,22 @@
|
||||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_EventTilePreview_loader {
|
||||
&.mx_IRCLayout,
|
||||
&.mx_GroupLayout {
|
||||
padding: 9px 0;
|
||||
}
|
||||
}
|
||||
@ -25,7 +25,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
border: 1px solid $primary-bg-color;
|
||||
border: 1px solid $background;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar_initial {
|
||||
@ -47,7 +47,7 @@ limitations under the License.
|
||||
left: 0;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
background: $tertiary-fg-color;
|
||||
background: $tertiary-content;
|
||||
mask-position: center;
|
||||
mask-size: 20px;
|
||||
mask-repeat: no-repeat;
|
||||
@ -60,6 +60,6 @@ limitations under the License.
|
||||
margin-left: 12px;
|
||||
font-size: $font-14px;
|
||||
line-height: $font-24px;
|
||||
color: $tertiary-fg-color;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,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;
|
||||
}
|
||||
@ -67,7 +67,7 @@ limitations under the License.
|
||||
height: 6px;
|
||||
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $primary-fg-color;
|
||||
background-color: $primary-content;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -98,14 +98,14 @@ limitations under the License.
|
||||
transition:
|
||||
font-size 0.25s ease-out 0.1s,
|
||||
color 0.25s ease-out 0.1s,
|
||||
top 0.25s ease-out 0.1s,
|
||||
transform 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;
|
||||
transform: translateY(0);
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
margin: 7px 8px;
|
||||
padding: 2px;
|
||||
pointer-events: none; // Allow clicks to fall through to the input
|
||||
@ -124,10 +124,10 @@ limitations under the License.
|
||||
transition:
|
||||
font-size 0.25s ease-out 0s,
|
||||
color 0.25s ease-out 0s,
|
||||
top 0.25s ease-out 0s,
|
||||
transform 0.25s ease-out 0s,
|
||||
background-color 0.25s ease-out 0s;
|
||||
font-size: $font-10px;
|
||||
top: -13px;
|
||||
transform: translateY(-13px);
|
||||
padding: 0 2px;
|
||||
background-color: $field-focused-label-bg-color;
|
||||
pointer-events: initial;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -41,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;
|
||||
@ -116,7 +116,7 @@ limitations under the License.
|
||||
|
||||
.mx_CallEvent_type {
|
||||
font-weight: 400;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
font-size: 1.2rem;
|
||||
line-height: $font-13px;
|
||||
display: flex;
|
||||
@ -132,7 +132,7 @@ limitations under the License.
|
||||
position: absolute;
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
background-color: $tertiary-fg-color;
|
||||
background-color: $secondary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
@ -145,7 +145,7 @@ limitations under the License.
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: $secondary-fg-color;
|
||||
color: $secondary-content;
|
||||
margin-right: 16px;
|
||||
gap: 8px;
|
||||
min-width: max-content;
|
||||
|
||||
@ -36,6 +36,10 @@ $timelineImageBorderRadius: 4px;
|
||||
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 {
|
||||
@ -96,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 {
|
||||
@ -92,6 +92,10 @@ limitations under the License.
|
||||
mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_threadButton::after {
|
||||
mask-image: url('$(res)/img/element-icons/message/thread.svg');
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_editButton::after {
|
||||
mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -232,6 +232,10 @@ limitations under the License.
|
||||
mask-image: url('$(res)/img/element-icons/room/files.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_icon_threads::before {
|
||||
mask-image: url('$(res)/img/element-icons/message/thread.svg');
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_icon_share::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/share.svg');
|
||||
}
|
||||
|
||||
@ -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;
|
||||
overflow: clip;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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,9 @@
|
||||
|
||||
.mx_Autocomplete_Completion_container_pill {
|
||||
margin: 12px;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
max-height: 35vh;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_container_truncate {
|
||||
@ -68,7 +71,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 +85,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 {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -23,16 +23,24 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_EventTile[data-layout=bubble] {
|
||||
|
||||
position: relative;
|
||||
margin-top: var(--gutterSize);
|
||||
margin-left: 50px;
|
||||
margin-left: 49px;
|
||||
margin-right: 100px;
|
||||
font-size: $font-14px;
|
||||
|
||||
&.mx_EventTile_continuation {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&.mx_EventTile_highlight {
|
||||
&::before {
|
||||
background-color: $event-highlight-bg-color;
|
||||
}
|
||||
|
||||
color: $event-highlight-fg-color;
|
||||
}
|
||||
|
||||
/* For replies */
|
||||
.mx_EventTile {
|
||||
padding-top: 0;
|
||||
@ -69,10 +77,11 @@ limitations under the License.
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.mx_SenderProfile {
|
||||
> .mx_SenderProfile {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: 2px;
|
||||
font-size: $font-15px;
|
||||
}
|
||||
|
||||
&[data-self=false] {
|
||||
@ -188,8 +197,6 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_ReplyThread {
|
||||
margin: 0 calc(-1 * var(--gutterSize));
|
||||
|
||||
.mx_EventTile_reply {
|
||||
max-width: 90%;
|
||||
padding: 0;
|
||||
@ -223,11 +230,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;
|
||||
@ -264,6 +266,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;
|
||||
@ -283,6 +286,8 @@ limitations under the License.
|
||||
.mx_EventTile_line,
|
||||
.mx_EventTile_info {
|
||||
min-width: 100%;
|
||||
// Preserve alignment with left edge of text in bubbles
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
@ -290,9 +295,10 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_EventTile_line > a {
|
||||
// Align timestamps with those of normal bubble tiles
|
||||
right: auto;
|
||||
top: -15px;
|
||||
left: -68px;
|
||||
top: -11px;
|
||||
left: -95px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -322,11 +328,10 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_EventTile_line {
|
||||
margin: 0 5px;
|
||||
margin: 0;
|
||||
> a {
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: translateX(calc(100% + 5px));
|
||||
// Align timestamps with those of normal bubble tiles
|
||||
left: -76px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -336,7 +341,8 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_EventListSummary[data-expanded=false][data-layout=bubble] {
|
||||
padding: 0 34px;
|
||||
// Align with left edge of bubble tiles
|
||||
padding: 0 49px;
|
||||
}
|
||||
|
||||
/* events that do not require bubble layout */
|
||||
|
||||
@ -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 {
|
||||
@ -514,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 {
|
||||
@ -618,7 +618,7 @@ $hover-select-border: 4px;
|
||||
}
|
||||
|
||||
.mx_EventTile_keyRequestInfo_text a {
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -643,6 +643,7 @@ $hover-select-border: 4px;
|
||||
|
||||
// Remove some of the default tile padding so that the error is centered
|
||||
margin-right: 0;
|
||||
|
||||
.mx_EventTile_line {
|
||||
padding-left: 0;
|
||||
margin-right: 0;
|
||||
@ -674,3 +675,66 @@ $hover-select-border: 4px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ThreadInfo:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_ThreadView {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.mx_ScrollPanel {
|
||||
margin-top: 20px;
|
||||
|
||||
.mx_RoomView_MessageList {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_senderDetails {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
a {
|
||||
flex: 1;
|
||||
min-width: none;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_SenderProfile {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ThreadView_List {
|
||||
flex: 1;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.mx_EventTile_roomName {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_EventTile_line {
|
||||
padding-left: 0 !important;
|
||||
order: 10 !important;
|
||||
}
|
||||
|
||||
.mx_EventTile {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 0;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_sendMessage {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -111,7 +111,7 @@ limitations under the License.
|
||||
.mx_MemberInfo_field {
|
||||
cursor: pointer;
|
||||
font-size: $font-15px;
|
||||
color: $primary-fg-color;
|
||||
color: $primary-content;
|
||||
margin-left: 8px;
|
||||
line-height: $font-23px;
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user