mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-15 10:11:38 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'develop' into reorganize-preferences

Browse source
This commit is contained in:
Šimon Brandner 2021-04-30 10:55:29 +02:00
commit e2bee396bb
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
645 changed files with 23824 additions and 7486 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintignore.errorfiles
View file

@ -1,7 +1,7 @@
# autogenerated file: run scripts/generate-eslint-error-ignore-file to update. # autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
src/Markdown.js src/Markdown.js
src/Velociraptor.js src/NodeAnimator.js
src/components/structures/RoomDirectory.js src/components/structures/RoomDirectory.js
src/components/views/rooms/MemberList.js src/components/views/rooms/MemberList.js
src/ratelimitedfunc.js src/ratelimitedfunc.js

1
.gitignore vendored
View file

@ -2,6 +2,7 @@
/*.log /*.log
package-lock.json package-lock.json
/coverage
/node_modules /node_modules
/lib /lib

1
.stylelintrc.js
View file

@ -4,6 +4,7 @@ module.exports = {
"stylelint-scss", "stylelint-scss",
], ],
"rules": { "rules": {
"color-hex-case": null,
"indentation": 4, "indentation": 4,
"comment-empty-line-before": null, "comment-empty-line-before": null,
"declaration-empty-line-before": null, "declaration-empty-line-before": null,

437
CHANGELOG.md
View file

@ -1,14 +1,441 @@
Changes in [3.19.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.19.0) (2021-04-26)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.19.0-rc.1...v3.19.0)
* Upgrade to JS SDK 10.0.0
* [Release] Dynamic max and min zoom in the new ImageView
[\#5927](https://github.com/matrix-org/matrix-react-sdk/pull/5927)
* [Release] Add a WheelEvent normalization function
[\#5911](https://github.com/matrix-org/matrix-react-sdk/pull/5911)
* Add a WheelEvent normalization function
[\#5904](https://github.com/matrix-org/matrix-react-sdk/pull/5904)
* [Release] Use floats for image background opacity
[\#5907](https://github.com/matrix-org/matrix-react-sdk/pull/5907)
Changes in [3.19.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.19.0-rc.1) (2021-04-21)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.18.0...v3.19.0-rc.1)
* Upgrade to JS SDK 10.0.0-rc.1
* Translations update from Weblate
[\#5896](https://github.com/matrix-org/matrix-react-sdk/pull/5896)
* Fix sticky tags header in room list
[\#5895](https://github.com/matrix-org/matrix-react-sdk/pull/5895)
* Fix spaces filtering sometimes lagging behind or behaving oddly
[\#5893](https://github.com/matrix-org/matrix-react-sdk/pull/5893)
* Fix issue with spaces context switching looping and breaking
[\#5894](https://github.com/matrix-org/matrix-react-sdk/pull/5894)
* Improve RoomList render time when filtering
[\#5874](https://github.com/matrix-org/matrix-react-sdk/pull/5874)
* Avoid being stuck in a space
[\#5891](https://github.com/matrix-org/matrix-react-sdk/pull/5891)
* [Spaces] Context switching
[\#5795](https://github.com/matrix-org/matrix-react-sdk/pull/5795)
* Warn when you attempt to leave room that you are the only member of
[\#5415](https://github.com/matrix-org/matrix-react-sdk/pull/5415)
* Ensure PersistedElement are unmounted on application logout
[\#5884](https://github.com/matrix-org/matrix-react-sdk/pull/5884)
* Add missing space in seshat dialog and the corresponding string
[\#5866](https://github.com/matrix-org/matrix-react-sdk/pull/5866)
* A tiny change to make the Add existing rooms dialog a little nicer
[\#5885](https://github.com/matrix-org/matrix-react-sdk/pull/5885)
* Remove weird margin from the file panel
[\#5889](https://github.com/matrix-org/matrix-react-sdk/pull/5889)
* Trigger lazy loading when filtering using spaces
[\#5882](https://github.com/matrix-org/matrix-react-sdk/pull/5882)
* Fix typo in method call in add existing to space dialog
[\#5883](https://github.com/matrix-org/matrix-react-sdk/pull/5883)
* New Image View fixes/improvements
[\#5872](https://github.com/matrix-org/matrix-react-sdk/pull/5872)
* Limit voice recording length
[\#5871](https://github.com/matrix-org/matrix-react-sdk/pull/5871)
* Clean up add existing to space dialog and include DMs in it too
[\#5881](https://github.com/matrix-org/matrix-react-sdk/pull/5881)
* Fix unknown slash command error exploding
[\#5853](https://github.com/matrix-org/matrix-react-sdk/pull/5853)
* Switch to a spec conforming email validation Regexp
[\#5852](https://github.com/matrix-org/matrix-react-sdk/pull/5852)
* Cleanup unused state in MessageComposer
[\#5877](https://github.com/matrix-org/matrix-react-sdk/pull/5877)
* Pulse animation for voice messages recording state
[\#5869](https://github.com/matrix-org/matrix-react-sdk/pull/5869)
* Don't include invisible rooms in notify summary
[\#5875](https://github.com/matrix-org/matrix-react-sdk/pull/5875)
* Properly disable composer access when recording a voice message
[\#5870](https://github.com/matrix-org/matrix-react-sdk/pull/5870)
* Stabilise starting a DM with multiple people flow
[\#5862](https://github.com/matrix-org/matrix-react-sdk/pull/5862)
* Render msgOption only if showReadReceipts is enabled
[\#5864](https://github.com/matrix-org/matrix-react-sdk/pull/5864)
* Labs: Add quick/cheap "do not disturb" flag
[\#5873](https://github.com/matrix-org/matrix-react-sdk/pull/5873)
* Fix ReadReceipts animations
[\#5836](https://github.com/matrix-org/matrix-react-sdk/pull/5836)
* Add tooltips to message previews
[\#5859](https://github.com/matrix-org/matrix-react-sdk/pull/5859)
* IRC Layout fix layout spacing in replies
[\#5855](https://github.com/matrix-org/matrix-react-sdk/pull/5855)
* Move user to welcome_page if continuing with previous session
[\#5849](https://github.com/matrix-org/matrix-react-sdk/pull/5849)
* Improve image view
[\#5521](https://github.com/matrix-org/matrix-react-sdk/pull/5521)
* Add a button to reset personal encryption state during login
[\#5819](https://github.com/matrix-org/matrix-react-sdk/pull/5819)
* Fix js-sdk import in SlashCommands
[\#5850](https://github.com/matrix-org/matrix-react-sdk/pull/5850)
* Fix useRoomPowerLevels hook
[\#5854](https://github.com/matrix-org/matrix-react-sdk/pull/5854)
* Prevent state events being rendered with invalid state keys
[\#5851](https://github.com/matrix-org/matrix-react-sdk/pull/5851)
* Give server ACLs a name in 'roles & permissions' tab
[\#5838](https://github.com/matrix-org/matrix-react-sdk/pull/5838)
* Don't hide notification badge on the home space button as it has no menu
[\#5845](https://github.com/matrix-org/matrix-react-sdk/pull/5845)
* User Info hide disambiguation as we always show MXID anyway
[\#5843](https://github.com/matrix-org/matrix-react-sdk/pull/5843)
* Improve kick state to not show if the target was not joined to begin with
[\#5846](https://github.com/matrix-org/matrix-react-sdk/pull/5846)
* Fix space store wrongly switching to a non-space filter
[\#5844](https://github.com/matrix-org/matrix-react-sdk/pull/5844)
* Tweak appearance of invite reason
[\#5847](https://github.com/matrix-org/matrix-react-sdk/pull/5847)
* Update Inter font to v3.18
[\#5840](https://github.com/matrix-org/matrix-react-sdk/pull/5840)
* Enable sharing historical keys on invite
[\#5839](https://github.com/matrix-org/matrix-react-sdk/pull/5839)
* Add ability to hide post-login encryption setup with customisation point
[\#5834](https://github.com/matrix-org/matrix-react-sdk/pull/5834)
* Use LaTeX and TeX delimiters by default
[\#5515](https://github.com/matrix-org/matrix-react-sdk/pull/5515)
* Clone author's deps fork for Netlify previews
[\#5837](https://github.com/matrix-org/matrix-react-sdk/pull/5837)
* Show drop file UI only if dragging a file
[\#5827](https://github.com/matrix-org/matrix-react-sdk/pull/5827)
* Ignore punctuation when filtering rooms
[\#5824](https://github.com/matrix-org/matrix-react-sdk/pull/5824)
* Resizable CallView
[\#5710](https://github.com/matrix-org/matrix-react-sdk/pull/5710)
Changes in [3.18.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.18.0) (2021-04-12)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.18.0-rc.1...v3.18.0)
* Upgrade to JS SDK 9.11.0
* [Release] Tweak appearance of invite reason
[\#5848](https://github.com/matrix-org/matrix-react-sdk/pull/5848)
Changes in [3.18.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.18.0-rc.1) (2021-04-07)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.17.0...v3.18.0-rc.1)
* Upgrade to JS SDK 9.11.0-rc.1
* Translations update from Weblate
[\#5832](https://github.com/matrix-org/matrix-react-sdk/pull/5832)
* Add fake fallback thumbnail URL for encrypted videos
[\#5826](https://github.com/matrix-org/matrix-react-sdk/pull/5826)
* Fix broken "Go to Home View" shortcut on macOS
[\#5818](https://github.com/matrix-org/matrix-react-sdk/pull/5818)
* Remove status area UI defects when in-call
[\#5828](https://github.com/matrix-org/matrix-react-sdk/pull/5828)
* Fix viewing invitations when the inviter has no avatar set
[\#5829](https://github.com/matrix-org/matrix-react-sdk/pull/5829)
* Restabilize room list ordering with prefiltering on spaces/communities
[\#5825](https://github.com/matrix-org/matrix-react-sdk/pull/5825)
* Show invite reasons
[\#5694](https://github.com/matrix-org/matrix-react-sdk/pull/5694)
* Require strong password in forgot password form
[\#5744](https://github.com/matrix-org/matrix-react-sdk/pull/5744)
* Attended transfer
[\#5798](https://github.com/matrix-org/matrix-react-sdk/pull/5798)
* Make user autocomplete query search beyond prefix
[\#5822](https://github.com/matrix-org/matrix-react-sdk/pull/5822)
* Add reset option for corrupted event index store
[\#5806](https://github.com/matrix-org/matrix-react-sdk/pull/5806)
* Prevent Re-request encryption keys from appearing under redacted messages
[\#5816](https://github.com/matrix-org/matrix-react-sdk/pull/5816)
* Keybindings follow up
[\#5815](https://github.com/matrix-org/matrix-react-sdk/pull/5815)
* Increase default visible tiles for room sublists
[\#5821](https://github.com/matrix-org/matrix-react-sdk/pull/5821)
* Change copy to point to native node modules docs in element desktop
[\#5817](https://github.com/matrix-org/matrix-react-sdk/pull/5817)
* Show waveform and timer in voice messages
[\#5801](https://github.com/matrix-org/matrix-react-sdk/pull/5801)
* Label unlabeled avatar button in event panel
[\#5585](https://github.com/matrix-org/matrix-react-sdk/pull/5585)
* Fix the theme engine breaking with some web theming extensions
[\#5810](https://github.com/matrix-org/matrix-react-sdk/pull/5810)
* Add /spoiler command
[\#5696](https://github.com/matrix-org/matrix-react-sdk/pull/5696)
* Don't specify sample rates for voice messages
[\#5802](https://github.com/matrix-org/matrix-react-sdk/pull/5802)
* Tweak security key error handling
[\#5812](https://github.com/matrix-org/matrix-react-sdk/pull/5812)
* Add user settings for warn before exit
[\#5793](https://github.com/matrix-org/matrix-react-sdk/pull/5793)
* Decouple key bindings from event handling
[\#5720](https://github.com/matrix-org/matrix-react-sdk/pull/5720)
* Fixing spaces papercuts
[\#5792](https://github.com/matrix-org/matrix-react-sdk/pull/5792)
* Share keys for historical messages when inviting users to encrypted rooms
[\#5763](https://github.com/matrix-org/matrix-react-sdk/pull/5763)
* Fix upload bar not populating when starting uploads
[\#5804](https://github.com/matrix-org/matrix-react-sdk/pull/5804)
* Fix crash on login when using social login
[\#5803](https://github.com/matrix-org/matrix-react-sdk/pull/5803)
* Convert AccessSecretStorageDialog to TypeScript
[\#5805](https://github.com/matrix-org/matrix-react-sdk/pull/5805)
* Tweak cross-signing copy
[\#5807](https://github.com/matrix-org/matrix-react-sdk/pull/5807)
* Fix password change popup message
[\#5791](https://github.com/matrix-org/matrix-react-sdk/pull/5791)
* View Source: make Event ID go below Event ID
[\#5790](https://github.com/matrix-org/matrix-react-sdk/pull/5790)
* Fix line numbers when missing trailing newline
[\#5800](https://github.com/matrix-org/matrix-react-sdk/pull/5800)
* Remember reply when switching rooms
[\#5796](https://github.com/matrix-org/matrix-react-sdk/pull/5796)
* Fix edge case with redaction grouper messing up continuations
[\#5797](https://github.com/matrix-org/matrix-react-sdk/pull/5797)
* Only show the ask anyway modal for explicit user lookup failures
[\#5785](https://github.com/matrix-org/matrix-react-sdk/pull/5785)
* Improve error reporting when EventIndex fails on a supported environment
[\#5787](https://github.com/matrix-org/matrix-react-sdk/pull/5787)
* Tweak and fix some space features
[\#5789](https://github.com/matrix-org/matrix-react-sdk/pull/5789)
* Support replying with a message command
[\#5686](https://github.com/matrix-org/matrix-react-sdk/pull/5686)
* Labs feature: Early implementation of voice messages
[\#5769](https://github.com/matrix-org/matrix-react-sdk/pull/5769)
Changes in [3.17.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.17.0) (2021-03-29)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.17.0-rc.1...v3.17.0)
* Upgrade to JS SDK 9.10.0
* [Release] Tweak cross-signing copy
[\#5808](https://github.com/matrix-org/matrix-react-sdk/pull/5808)
* [Release] Fix crash on login when using social login
[\#5809](https://github.com/matrix-org/matrix-react-sdk/pull/5809)
* [Release] Fix edge case with redaction grouper messing up continuations
[\#5799](https://github.com/matrix-org/matrix-react-sdk/pull/5799)
Changes in [3.17.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.17.0-rc.1) (2021-03-25)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.16.0...v3.17.0-rc.1)
* Upgrade to JS SDK 9.10.0-rc.1
* Translations update from Weblate
[\#5788](https://github.com/matrix-org/matrix-react-sdk/pull/5788)
* Track next event [tile] over group boundaries
[\#5784](https://github.com/matrix-org/matrix-react-sdk/pull/5784)
* Fixing the minor UI issues in the email discovery
[\#5780](https://github.com/matrix-org/matrix-react-sdk/pull/5780)
* Don't overwrite callback with undefined if no customization provided
[\#5783](https://github.com/matrix-org/matrix-react-sdk/pull/5783)
* Fix redaction event list summaries breaking sender profiles
[\#5781](https://github.com/matrix-org/matrix-react-sdk/pull/5781)
* Fix CIDER formatting buttons on Safari
[\#5782](https://github.com/matrix-org/matrix-react-sdk/pull/5782)
* Improve discovery of rooms in a space
[\#5776](https://github.com/matrix-org/matrix-react-sdk/pull/5776)
* Spaces improve creation journeys
[\#5777](https://github.com/matrix-org/matrix-react-sdk/pull/5777)
* Make buttons in verify dialog respect the system font
[\#5778](https://github.com/matrix-org/matrix-react-sdk/pull/5778)
* Collapse redactions into an event list summary
[\#5728](https://github.com/matrix-org/matrix-react-sdk/pull/5728)
* Added invite option to room's context menu
[\#5648](https://github.com/matrix-org/matrix-react-sdk/pull/5648)
* Add an optional config option to make the welcome page the login page
[\#5658](https://github.com/matrix-org/matrix-react-sdk/pull/5658)
* Fix username showing instead of display name in Jitsi widgets
[\#5770](https://github.com/matrix-org/matrix-react-sdk/pull/5770)
* Convert a bunch more js-sdk imports to absolute paths
[\#5774](https://github.com/matrix-org/matrix-react-sdk/pull/5774)
* Remove forgotten rooms from the room list once forgotten
[\#5775](https://github.com/matrix-org/matrix-react-sdk/pull/5775)
* Log error when failing to list usermedia devices
[\#5771](https://github.com/matrix-org/matrix-react-sdk/pull/5771)
* Fix weird timeline jumps
[\#5772](https://github.com/matrix-org/matrix-react-sdk/pull/5772)
* Replace type declaration in Registration.tsx
[\#5773](https://github.com/matrix-org/matrix-react-sdk/pull/5773)
* Add possibility to delay rageshake persistence in app startup
[\#5767](https://github.com/matrix-org/matrix-react-sdk/pull/5767)
* Fix left panel resizing and lower min-width improving flexibility
[\#5764](https://github.com/matrix-org/matrix-react-sdk/pull/5764)
* Work around more cases where a rageshake server might not be present
[\#5766](https://github.com/matrix-org/matrix-react-sdk/pull/5766)
* Iterate space panel visually and functionally
[\#5761](https://github.com/matrix-org/matrix-react-sdk/pull/5761)
* Make some dispatches async
[\#5765](https://github.com/matrix-org/matrix-react-sdk/pull/5765)
* fix: make room directory correct when using a homeserver with explicit port
[\#5762](https://github.com/matrix-org/matrix-react-sdk/pull/5762)
* Hangup all calls on logout
[\#5756](https://github.com/matrix-org/matrix-react-sdk/pull/5756)
* Remove now-unused assets and CSS from CompleteSecurity step
[\#5757](https://github.com/matrix-org/matrix-react-sdk/pull/5757)
* Add details and summary to allowed HTML tags
[\#5760](https://github.com/matrix-org/matrix-react-sdk/pull/5760)
* Support a media handling customisation endpoint
[\#5714](https://github.com/matrix-org/matrix-react-sdk/pull/5714)
* Edit button on View Source dialog that takes you to devtools ->
SendCustomEvent
[\#5718](https://github.com/matrix-org/matrix-react-sdk/pull/5718)
* Show room alias in plain/formatted body
[\#5748](https://github.com/matrix-org/matrix-react-sdk/pull/5748)
* Allow pills on the beginning of a part string
[\#5754](https://github.com/matrix-org/matrix-react-sdk/pull/5754)
* [SK-3] Decorate easy components with replaceableComponent
[\#5734](https://github.com/matrix-org/matrix-react-sdk/pull/5734)
* Use fsync in reskindex to ensure file is written to disk
[\#5753](https://github.com/matrix-org/matrix-react-sdk/pull/5753)
* Remove unused common CSS classes
[\#5752](https://github.com/matrix-org/matrix-react-sdk/pull/5752)
* Rebuild space previews with new designs
[\#5751](https://github.com/matrix-org/matrix-react-sdk/pull/5751)
* Rework cross-signing login flow
[\#5727](https://github.com/matrix-org/matrix-react-sdk/pull/5727)
* Change read receipt drift to be non-fractional
[\#5745](https://github.com/matrix-org/matrix-react-sdk/pull/5745)
Changes in [3.16.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.16.0) (2021-03-15)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.16.0-rc.2...v3.16.0)
* Upgrade to JS SDK 9.9.0
* [Release] Change read receipt drift to be non-fractional
[\#5746](https://github.com/matrix-org/matrix-react-sdk/pull/5746)
* [Release] Properly gate SpaceRoomView behind labs
[\#5750](https://github.com/matrix-org/matrix-react-sdk/pull/5750)
Changes in [3.16.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.16.0-rc.2) (2021-03-10)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.16.0-rc.1...v3.16.0-rc.2)
* Fixed incorrect build output in rc.1
Changes in [3.16.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.16.0-rc.1) (2021-03-10)
===============================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.15.0...v3.16.0-rc.1)
* Upgrade to JS SDK 9.9.0-rc.1
* Translations update from Weblate
[\#5743](https://github.com/matrix-org/matrix-react-sdk/pull/5743)
* Document behaviour of showReadReceipts=false for sent receipts
[\#5739](https://github.com/matrix-org/matrix-react-sdk/pull/5739)
* Tweak sent marker code style
[\#5741](https://github.com/matrix-org/matrix-react-sdk/pull/5741)
* Fix sent markers disappearing for edits/reactions
[\#5737](https://github.com/matrix-org/matrix-react-sdk/pull/5737)
* Ignore to-device decryption in the room list store
[\#5740](https://github.com/matrix-org/matrix-react-sdk/pull/5740)
* Spaces suggested rooms support
[\#5736](https://github.com/matrix-org/matrix-react-sdk/pull/5736)
* Add tooltips to sent/sending receipts
[\#5738](https://github.com/matrix-org/matrix-react-sdk/pull/5738)
* Remove a bunch of useless 'use strict' definitions
[\#5735](https://github.com/matrix-org/matrix-react-sdk/pull/5735)
* [SK-1] Fix types for replaceableComponent
[\#5732](https://github.com/matrix-org/matrix-react-sdk/pull/5732)
* [SK-2] Make debugging skinning problems easier
[\#5733](https://github.com/matrix-org/matrix-react-sdk/pull/5733)
* Support sending invite reasons with /invite command
[\#5695](https://github.com/matrix-org/matrix-react-sdk/pull/5695)
* Fix clicking on the avatar for opening member info requires pixel-perfect
accuracy
[\#5717](https://github.com/matrix-org/matrix-react-sdk/pull/5717)
* Display decrypted and encrypted event source on the same dialog
[\#5713](https://github.com/matrix-org/matrix-react-sdk/pull/5713)
* Fix units of TURN server expiry time
[\#5730](https://github.com/matrix-org/matrix-react-sdk/pull/5730)
* Display room name in pills instead of address
[\#5624](https://github.com/matrix-org/matrix-react-sdk/pull/5624)
* Refresh UI for file uploads
[\#5723](https://github.com/matrix-org/matrix-react-sdk/pull/5723)
* UI refresh for uploaded files
[\#5719](https://github.com/matrix-org/matrix-react-sdk/pull/5719)
* Improve message sending states to match new designs
[\#5699](https://github.com/matrix-org/matrix-react-sdk/pull/5699)
* Add clipboard write permission for widgets
[\#5725](https://github.com/matrix-org/matrix-react-sdk/pull/5725)
* Fix widget resizing
[\#5722](https://github.com/matrix-org/matrix-react-sdk/pull/5722)
* Option for audio streaming
[\#5707](https://github.com/matrix-org/matrix-react-sdk/pull/5707)
* Show a specific error for hs_disabled
[\#5576](https://github.com/matrix-org/matrix-react-sdk/pull/5576)
* Add Edge to the targets list
[\#5721](https://github.com/matrix-org/matrix-react-sdk/pull/5721)
* File drop UI fixes and improvements
[\#5505](https://github.com/matrix-org/matrix-react-sdk/pull/5505)
* Fix Bottom border of state counters is white on the dark theme
[\#5715](https://github.com/matrix-org/matrix-react-sdk/pull/5715)
* Trim spurious whitespace of nicknames
[\#5332](https://github.com/matrix-org/matrix-react-sdk/pull/5332)
* Ensure HostSignupDialog border colour matches light theme
[\#5716](https://github.com/matrix-org/matrix-react-sdk/pull/5716)
* Don't place another call if there's already one ongoing
[\#5712](https://github.com/matrix-org/matrix-react-sdk/pull/5712)
* Space room hierarchies
[\#5706](https://github.com/matrix-org/matrix-react-sdk/pull/5706)
* Iterate Space view and right panel
[\#5705](https://github.com/matrix-org/matrix-react-sdk/pull/5705)
* Add a scroll to bottom on message sent setting
[\#5692](https://github.com/matrix-org/matrix-react-sdk/pull/5692)
* Add .tmp files to gitignore
[\#5708](https://github.com/matrix-org/matrix-react-sdk/pull/5708)
* Initial Space Room View and Creation UX
[\#5704](https://github.com/matrix-org/matrix-react-sdk/pull/5704)
* Add multi language spell check
[\#5452](https://github.com/matrix-org/matrix-react-sdk/pull/5452)
* Fix tetris effect (holes) in read receipts
[\#5697](https://github.com/matrix-org/matrix-react-sdk/pull/5697)
* Fixed edit for markdown images
[\#5703](https://github.com/matrix-org/matrix-react-sdk/pull/5703)
* Iterate Space Panel
[\#5702](https://github.com/matrix-org/matrix-react-sdk/pull/5702)
* Fix read receipts for compact layout
[\#5700](https://github.com/matrix-org/matrix-react-sdk/pull/5700)
* Space Store and Space Panel for Room List filtering
[\#5689](https://github.com/matrix-org/matrix-react-sdk/pull/5689)
* Log when turn creds expire
[\#5691](https://github.com/matrix-org/matrix-react-sdk/pull/5691)
* Null check for maxHeight in call view
[\#5690](https://github.com/matrix-org/matrix-react-sdk/pull/5690)
* Autocomplete invited users
[\#5687](https://github.com/matrix-org/matrix-react-sdk/pull/5687)
* Add send message button
[\#5535](https://github.com/matrix-org/matrix-react-sdk/pull/5535)
* Move call buttons to the room header
[\#5693](https://github.com/matrix-org/matrix-react-sdk/pull/5693)
* Use the default SSSS key if the default is set
[\#5638](https://github.com/matrix-org/matrix-react-sdk/pull/5638)
* Initial Spaces feature flag
[\#5668](https://github.com/matrix-org/matrix-react-sdk/pull/5668)
* Clean up code edge cases and add helpers
[\#5667](https://github.com/matrix-org/matrix-react-sdk/pull/5667)
* Clean up widgets when leaving the room
[\#5684](https://github.com/matrix-org/matrix-react-sdk/pull/5684)
* Fix read receipts?
[\#5567](https://github.com/matrix-org/matrix-react-sdk/pull/5567)
* Fix MAU usage alerts
[\#5678](https://github.com/matrix-org/matrix-react-sdk/pull/5678)
Changes in [3.15.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.15.0) (2021-03-01) Changes in [3.15.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.15.0) (2021-03-01)
===================================================================================================== =====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.15.0-rc.1...v3.15.0) [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.15.0-rc.1...v3.15.0)
## Security notice ## Security notice
matrix-react-sdk 3.15.0 fixes a low severity issue (CVE-2021-21320) where the matrix-react-sdk 3.15.0 fixes a moderate severity issue (CVE-2021-21320) where
user content sandbox can be abused to trick users into opening unexpected the user content sandbox can be abused to trick users into opening unexpected
documents. The content is opened with a `blob` origin that cannot access Matrix documents after several user interactions. The content can be opened with a
user data, so messages and secrets are not at risk. Thanks to @keerok for `blob` origin from the Matrix client, so it is possible for a malicious document
responsibly disclosing this via Matrix's Security Disclosure Policy. to access user messages and secrets. Thanks to @keerok for responsibly
disclosing this via Matrix's Security Disclosure Policy.
## All changes ## All changes

11
babel.config.js
View file

@ -3,12 +3,15 @@ module.exports = {
"presets": [ "presets": [
["@babel/preset-env", { ["@babel/preset-env", {
"targets": [ "targets": [
"last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions" "last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"last 2 Edge versions",
], ],
}], }],
"@babel/preset-typescript", "@babel/preset-typescript",
"@babel/preset-flow", "@babel/preset-flow",
"@babel/preset-react" "@babel/preset-react",
], ],
"plugins": [ "plugins": [
["@babel/plugin-proposal-decorators", {legacy: true}], ["@babel/plugin-proposal-decorators", {legacy: true}],
@ -18,6 +21,6 @@ module.exports = {
"@babel/plugin-proposal-object-rest-spread", "@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-flow-comments", "@babel/plugin-transform-flow-comments",
"@babel/plugin-syntax-dynamic-import", "@babel/plugin-syntax-dynamic-import",
"@babel/plugin-transform-runtime" "@babel/plugin-transform-runtime",
] ],
}; };

6
docs/ciderEditor.md
View file

@ -21,14 +21,14 @@ caret nodes (more on that later).
For these reasons it doesn't use `innerText`, `textContent` or anything similar. For these reasons it doesn't use `innerText`, `textContent` or anything similar.
The model addresses any content in the editor within as an offset within this string. The model addresses any content in the editor within as an offset within this string.
The caret position is thus also converted from a position in the DOM tree The caret position is thus also converted from a position in the DOM tree
to an offset in the content string. This happens in `getCaretOffsetAndText` in `dom.js`. to an offset in the content string. This happens in `getCaretOffsetAndText` in `dom.ts`.
Once the content string and caret offset is calculated, it is passed to the `update()` Once the content string and caret offset is calculated, it is passed to the `update()`
method of the model. The model first calculates the same content string of its current parts, method of the model. The model first calculates the same content string of its current parts,
basically just concatenating their text. It then looks for differences between basically just concatenating their text. It then looks for differences between
the current and the new content string. The diffing algorithm is very basic, the current and the new content string. The diffing algorithm is very basic,
and assumes there is only one change around the caret offset, and assumes there is only one change around the caret offset,
so this should be very inexpensive. See `diff.js` for details. so this should be very inexpensive. See `diff.ts` for details.
The result of the diffing is the strings that were added and/or removed from The result of the diffing is the strings that were added and/or removed from
the current content. These differences are then applied to the parts, the current content. These differences are then applied to the parts,
@ -51,7 +51,7 @@ which relate poorly to text input or changes, and don't need the `beforeinput` e
which isn't broadly supported yet. which isn't broadly supported yet.
Once the parts of the model are updated, the DOM of the editor is then reconciled Once the parts of the model are updated, the DOM of the editor is then reconciled
with the new model state, see `renderModel` in `render.js` for this. with the new model state, see `renderModel` in `render.ts` for this.
If the model didn't reject the input and didn't make any additional changes, If the model didn't reject the input and didn't make any additional changes,
this won't make any changes to the DOM at all, and should thus be fairly efficient. this won't make any changes to the DOM at all, and should thus be fairly efficient.

19
docs/media-handling.md Normal file
View file

@ -0,0 +1,19 @@
# Media handling
Surely media should be as easy as just putting a URL into an `img` and calling it good, right?
Not quite. Matrix uses something called a Matrix Content URI (better known as MXC URI) to identify
content, which is then converted to a regular HTTPS URL on the homeserver. However, sometimes that
URL can change depending on deployment considerations.
The react-sdk features a [customisation endpoint](https://github.com/vector-im/element-web/blob/develop/docs/customisations.md)
for media handling where all conversions from MXC URI to HTTPS URL happen. This is to ensure that
those obscure deployments can route all their media to the right place.
For development, there are currently two functions available: `mediaFromMxc` and `mediaFromContent`.
The `mediaFromMxc` function should be self-explanatory. `mediaFromContent` takes an event content as
a parameter and will automatically parse out the source media and thumbnail. Both functions return
a `Media` object with a number of options on it, such as getting various common HTTPS URLs for the
media.
**It is extremely important that all media calls are put through this customisation endpoint.** So
much so it's a lint rule to avoid accidental use of the wrong functions.

24
docs/room-list-store.md
View file

@ -124,12 +124,19 @@ all kinds of filtering.
## Filtering ## Filtering
Filters are provided to the store as condition classes, which are then passed along to the algorithm Filters are provided to the store as condition classes and have two major kinds: Prefilters and Runtime.
implementations. The implementations then get to decide how to actually filter the rooms, however in
practice the base `Algorithm` class deals with the filtering in a more optimized/generic way.
The results of filters get cached to avoid needlessly iterating over potentially thousands of rooms, Prefilters flush out rooms which shouldn't appear to the algorithm implementations. Typically this is
as the old room list store does. When a filter condition changes, it emits an update which (in this due to some higher order room list filtering (such as spaces or tags) deliberately exposing a subset of
rooms to the user. The algorithm implementations will not see a room being prefiltered out.
Runtime filters are used for more dynamic filtering, such as the user filtering by room name. These
filters are passed along to the algorithm implementations where those implementations decide how and
when to apply the filter. In practice, the base `Algorithm` class ends up doing the heavy lifting for
optimization reasons.
The results of runtime filters get cached to avoid needlessly iterating over potentially thousands of
rooms, as the old room list store does. When a filter condition changes, it emits an update which (in this
case) the `Algorithm` class will pick up and act accordingly. Typically, this also means filtering a case) the `Algorithm` class will pick up and act accordingly. Typically, this also means filtering a
minor subset where possible to avoid over-iterating rooms. minor subset where possible to avoid over-iterating rooms.
@ -137,6 +144,13 @@ All filter conditions are considered "stable" by the consumers, meaning that the
expect a change in the condition unless the condition says it has changed. This is intentional to expect a change in the condition unless the condition says it has changed. This is intentional to
maintain the caching behaviour described above. maintain the caching behaviour described above.
One might ask why we don't just use prefilter conditions for everything, and the answer is one of slight
subtlety: in the cases of prefilters we are knowingly exposing the user to a workspace-style UX where
room notifications are self-contained within that workspace. Runtime filters tend to not want to affect
visible notification counts (as it doesn't want the room header to suddenly be confusing to the user as
they type), and occasionally UX like "found 2/12 rooms" is desirable. If prefiltering were used instead,
the notification counts would vary while the user was typing and "found 2/12" UX would not be possible.
## Class breakdowns ## Class breakdowns
The `RoomListStore` is the major coordinator of various algorithm implementations, which take care The `RoomListStore` is the major coordinator of various algorithm implementations, which take care

21
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "matrix-react-sdk", "name": "matrix-react-sdk",
"version": "3.15.0", "version": "3.19.0",
"description": "SDK for matrix.org using React", "description": "SDK for matrix.org using React",
"author": "matrix.org", "author": "matrix.org",
"repository": { "repository": {
@ -23,9 +23,7 @@
"package.json" "package.json"
], ],
"bin": { "bin": {
"reskindex": "scripts/reskindex.js", "reskindex": "scripts/reskindex.js"
"matrix-gen-i18n": "scripts/gen-i18n.js",
"matrix-prune-i18n": "scripts/prune-i18n.js"
}, },
"main": "./src/index.js", "main": "./src/index.js",
"matrix_src_main": "./src/index.js", "matrix_src_main": "./src/index.js",
@ -35,7 +33,7 @@
"prepublishOnly": "yarn build", "prepublishOnly": "yarn build",
"i18n": "matrix-gen-i18n", "i18n": "matrix-gen-i18n",
"prunei18n": "matrix-prune-i18n", "prunei18n": "matrix-prune-i18n",
"diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && ./scripts/gen-i18n.js && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json", "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && matrix-gen-i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
"reskindex": "node scripts/reskindex.js -h header", "reskindex": "node scripts/reskindex.js -h header",
"reskindex:watch": "node scripts/reskindex.js -h header -w", "reskindex:watch": "node scripts/reskindex.js -h header -w",
"rethemendex": "res/css/rethemendex.sh", "rethemendex": "res/css/rethemendex.sh",
@ -51,7 +49,8 @@
"lint:types": "tsc --noEmit --jsx react", "lint:types": "tsc --noEmit --jsx react",
"lint:style": "stylelint 'res/css/**/*.scss'", "lint:style": "stylelint 'res/css/**/*.scss'",
"test": "jest", "test": "jest",
"test:e2e": "./test/end-to-end-tests/run.sh --app-url http://localhost:8080" "test:e2e": "./test/end-to-end-tests/run.sh --app-url http://localhost:8080",
"coverage": "yarn test --coverage"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
@ -83,6 +82,7 @@
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop", "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
"matrix-widget-api": "^0.1.0-beta.13", "matrix-widget-api": "^0.1.0-beta.13",
"minimist": "^1.2.5", "minimist": "^1.2.5",
"opus-recorder": "^8.0.3",
"pako": "^2.0.3", "pako": "^2.0.3",
"parse5": "^6.0.1", "parse5": "^6.0.1",
"png-chunks-extract": "^1.0.0", "png-chunks-extract": "^1.0.0",
@ -101,7 +101,6 @@
"tar-js": "^0.3.0", "tar-js": "^0.3.0",
"text-encoding-utf-8": "^1.0.2", "text-encoding-utf-8": "^1.0.2",
"url": "^0.11.0", "url": "^0.11.0",
"velocity-animate": "^2.0.6",
"what-input": "^5.2.10", "what-input": "^5.2.10",
"zxcvbn": "^4.4.2" "zxcvbn": "^4.4.2"
}, },
@ -157,8 +156,10 @@
"jest": "^26.6.3", "jest": "^26.6.3",
"jest-canvas-mock": "^2.3.0", "jest-canvas-mock": "^2.3.0",
"jest-environment-jsdom-sixteen": "^1.0.3", "jest-environment-jsdom-sixteen": "^1.0.3",
"jest-fetch-mock": "^3.0.3",
"matrix-mock-request": "^1.2.3", "matrix-mock-request": "^1.2.3",
"matrix-react-test-utils": "^0.2.2", "matrix-react-test-utils": "^0.2.2",
"matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
"olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz", "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
"react-test-renderer": "^16.14.0", "react-test-renderer": "^16.14.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
@ -188,6 +189,12 @@
}, },
"transformIgnorePatterns": [ "transformIgnorePatterns": [
"/node_modules/(?!matrix-js-sdk).+$" "/node_modules/(?!matrix-js-sdk).+$"
],
"collectCoverageFrom": [
"<rootDir>/src/**/*.{js,ts,tsx}"
],
"coverageReporters": [
"text"
] ]
} }
} }

69
res/css/_common.scss
View file

@ -28,6 +28,16 @@ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e
:root { :root {
font-size: 10px; font-size: 10px;
--transition-short: .1s;
--transition-standard: .3s;
}
@media (prefers-reduced-motion) {
:root {
--transition-short: 0;
--transition-standard: 0;
}
} }
html { html {
@ -303,7 +313,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
} }
.mx_Dialog_lightbox .mx_Dialog_background { .mx_Dialog_lightbox .mx_Dialog_background {
opacity: 0.85; opacity: $lightbox-background-bg-opacity;
background-color: $lightbox-background-bg-color; background-color: $lightbox-background-bg-color;
} }
@ -315,6 +325,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
pointer-events: none; pointer-events: none;
padding: 0;
} }
.mx_Dialog_header { .mx_Dialog_header {
@ -395,6 +406,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
border: 1px solid $accent-color; border: 1px solid $accent-color;
color: $accent-color; color: $accent-color;
background-color: $button-secondary-bg-color; background-color: $button-secondary-bg-color;
font-family: inherit;
} }
.mx_Dialog button:last-child { .mx_Dialog button:last-child {
@ -489,54 +501,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
margin-top: 69px; margin-top: 69px;
} }
.mx_Beta {
color: red;
margin-right: 10px;
position: relative;
top: -3px;
background-color: white;
padding: 0 4px;
border-radius: 3px;
border: 1px solid darkred;
cursor: help;
transition-duration: 200ms;
font-size: smaller;
filter: opacity(0.5);
}
.mx_Beta:hover {
color: white;
border: 1px solid gray;
background-color: darkred;
}
.mx_TintableSvgButton {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.mx_TintableSvgButton object {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
.mx_TintableSvgButton span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
// username colors // username colors
// used by SenderProfile & RoomPreviewBar // used by SenderProfile & RoomPreviewBar
.mx_Username_color1 { .mx_Username_color1 {
@ -606,6 +570,13 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
} }
} }
@define-mixin ProgressBarBgColour $colour {
background-color: $colour;
&::-webkit-progress-bar {
background-color: $colour;
}
}
@define-mixin ProgressBarBorderRadius $radius { @define-mixin ProgressBarBorderRadius $radius {
border-radius: $radius; border-radius: $radius;
&::-moz-progress-bar { &::-moz-progress-bar {

11
res/css/_components.scss
View file

@ -111,17 +111,19 @@
@import "./views/elements/_AddressSelector.scss"; @import "./views/elements/_AddressSelector.scss";
@import "./views/elements/_AddressTile.scss"; @import "./views/elements/_AddressTile.scss";
@import "./views/elements/_DesktopBuildsNotice.scss"; @import "./views/elements/_DesktopBuildsNotice.scss";
@import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_DesktopCapturerSourcePicker.scss"; @import "./views/elements/_DesktopCapturerSourcePicker.scss";
@import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_Dropdown.scss"; @import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss"; @import "./views/elements/_EditableItemList.scss";
@import "./views/elements/_ErrorBoundary.scss"; @import "./views/elements/_ErrorBoundary.scss";
@import "./views/elements/_EventListSummary.scss"; @import "./views/elements/_EventListSummary.scss";
@import "./views/elements/_FacePile.scss";
@import "./views/elements/_Field.scss"; @import "./views/elements/_Field.scss";
@import "./views/elements/_FormButton.scss"; @import "./views/elements/_FormButton.scss";
@import "./views/elements/_ImageView.scss"; @import "./views/elements/_ImageView.scss";
@import "./views/elements/_InfoTooltip.scss"; @import "./views/elements/_InfoTooltip.scss";
@import "./views/elements/_InlineSpinner.scss"; @import "./views/elements/_InlineSpinner.scss";
@import "./views/elements/_InviteReason.scss";
@import "./views/elements/_ManageIntegsButton.scss"; @import "./views/elements/_ManageIntegsButton.scss";
@import "./views/elements/_MiniAvatarUploader.scss"; @import "./views/elements/_MiniAvatarUploader.scss";
@import "./views/elements/_PowerSelector.scss"; @import "./views/elements/_PowerSelector.scss";
@ -211,13 +213,13 @@
@import "./views/rooms/_SendMessageComposer.scss"; @import "./views/rooms/_SendMessageComposer.scss";
@import "./views/rooms/_Stickers.scss"; @import "./views/rooms/_Stickers.scss";
@import "./views/rooms/_TopUnreadMessagesBar.scss"; @import "./views/rooms/_TopUnreadMessagesBar.scss";
@import "./views/rooms/_VoiceRecordComposerTile.scss";
@import "./views/rooms/_WhoIsTypingTile.scss"; @import "./views/rooms/_WhoIsTypingTile.scss";
@import "./views/settings/_AvatarSetting.scss"; @import "./views/settings/_AvatarSetting.scss";
@import "./views/settings/_CrossSigningPanel.scss"; @import "./views/settings/_CrossSigningPanel.scss";
@import "./views/settings/_DevicesPanel.scss"; @import "./views/settings/_DevicesPanel.scss";
@import "./views/settings/_E2eAdvancedPanel.scss"; @import "./views/settings/_E2eAdvancedPanel.scss";
@import "./views/settings/_EmailAddresses.scss"; @import "./views/settings/_EmailAddresses.scss";
@import "./views/settings/_SpellCheckLanguages.scss";
@import "./views/settings/_IntegrationManager.scss"; @import "./views/settings/_IntegrationManager.scss";
@import "./views/settings/_Notifications.scss"; @import "./views/settings/_Notifications.scss";
@import "./views/settings/_PhoneNumbers.scss"; @import "./views/settings/_PhoneNumbers.scss";
@ -225,6 +227,7 @@
@import "./views/settings/_SecureBackupPanel.scss"; @import "./views/settings/_SecureBackupPanel.scss";
@import "./views/settings/_SetIdServer.scss"; @import "./views/settings/_SetIdServer.scss";
@import "./views/settings/_SetIntegrationManager.scss"; @import "./views/settings/_SetIntegrationManager.scss";
@import "./views/settings/_SpellCheckLanguages.scss";
@import "./views/settings/_UpdateCheckButton.scss"; @import "./views/settings/_UpdateCheckButton.scss";
@import "./views/settings/tabs/_SettingsTab.scss"; @import "./views/settings/tabs/_SettingsTab.scss";
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss"; @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
@ -245,8 +248,12 @@
@import "./views/toasts/_AnalyticsToast.scss"; @import "./views/toasts/_AnalyticsToast.scss";
@import "./views/toasts/_NonUrgentEchoFailureToast.scss"; @import "./views/toasts/_NonUrgentEchoFailureToast.scss";
@import "./views/verification/_VerificationShowSas.scss"; @import "./views/verification/_VerificationShowSas.scss";
@import "./views/voice_messages/_PlayPauseButton.scss";
@import "./views/voice_messages/_PlaybackContainer.scss";
@import "./views/voice_messages/_Waveform.scss";
@import "./views/voip/_CallContainer.scss"; @import "./views/voip/_CallContainer.scss";
@import "./views/voip/_CallView.scss"; @import "./views/voip/_CallView.scss";
@import "./views/voip/_CallViewForRoom.scss";
@import "./views/voip/_DialPad.scss"; @import "./views/voip/_DialPad.scss";
@import "./views/voip/_DialPadContextMenu.scss"; @import "./views/voip/_DialPadContextMenu.scss";
@import "./views/voip/_DialPadModal.scss"; @import "./views/voip/_DialPadModal.scss";

1
res/css/structures/_FilePanel.scss
View file

@ -22,7 +22,6 @@ limitations under the License.
} }
.mx_FilePanel .mx_RoomView_messageListWrapper { .mx_FilePanel .mx_RoomView_messageListWrapper {
margin-right: 20px;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

7
res/css/structures/_LeftPanel.scss
View file

@ -19,7 +19,8 @@ $roomListCollapsedWidth: 68px;
.mx_LeftPanel { .mx_LeftPanel {
background-color: $roomlist-bg-color; background-color: $roomlist-bg-color;
min-width: 260px; // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
min-width: 206px;
max-width: 50%; max-width: 50%;
// Create a row-based flexbox for the GroupFilterPanel and the room list // Create a row-based flexbox for the GroupFilterPanel and the room list
@ -129,6 +130,10 @@ $roomListCollapsedWidth: 68px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background: $secondary-fg-color; background: $secondary-fg-color;
} }
&.mx_LeftPanel_exploreButton_space::before {
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
}
} }
} }

2
res/css/structures/_MatrixChat.scss
View file

@ -66,7 +66,7 @@ limitations under the License.
} }
/* not the left panel, and not the resize handle, so the roomview/groupview/... */ /* not the left panel, and not the resize handle, so the roomview/groupview/... */
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_ResizeHandle) { .mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
background-color: $primary-bg-color; background-color: $primary-bg-color;
flex: 1 1 0; flex: 1 1 0;

2
res/css/structures/_RoomSearch.scss
View file

@ -22,7 +22,7 @@ limitations under the License.
// keep border thickness consistent to prevent movement // keep border thickness consistent to prevent movement
border: 1px solid transparent; border: 1px solid transparent;
height: 28px; height: 28px;
padding: 2px; padding: 1px;
// Create a flexbox for the icons (easier to manage) // Create a flexbox for the icons (easier to manage)
display: flex; display: flex;

97
res/css/structures/_RoomStatusBar.scss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_RoomStatusBar { .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
margin-left: 65px; margin-left: 65px;
min-height: 50px; min-height: 50px;
} }
@ -68,6 +68,99 @@ limitations under the License.
min-height: 58px; min-height: 58px;
} }
.mx_RoomStatusBar_unsentMessages {
> div[role="alert"] {
// cheat some basic alignment
display: flex;
align-items: center;
min-height: 70px;
margin: 12px;
padding-left: 16px;
background-color: $header-panel-bg-color;
border-radius: 4px;
}
.mx_RoomStatusBar_unsentBadge {
margin-right: 12px;
.mx_NotificationBadge {
// Override sizing from the default badge
width: 24px !important;
height: 24px !important;
border-radius: 24px !important;
.mx_NotificationBadge_count {
font-size: $font-16px !important; // override default
}
}
}
.mx_RoomStatusBar_unsentTitle {
color: $warning-color;
font-size: $font-15px;
}
.mx_RoomStatusBar_unsentDescription {
font-size: $font-12px;
}
.mx_RoomStatusBar_unsentButtonBar {
flex-grow: 1;
text-align: right;
margin-right: 22px;
color: $muted-fg-color;
.mx_AccessibleButton {
padding: 5px 10px;
padding-left: 28px; // 16px for the icon, 2px margin to text, 10px regular padding
display: inline-block;
position: relative;
&:nth-child(2) {
border-left: 1px solid $resend-button-divider-color;
}
&::before {
content: '';
position: absolute;
left: 10px; // inset for regular button padding
background-color: $muted-fg-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
&.mx_RoomStatusBar_unsentCancelAllBtn::before {
mask-image: url('$(res)/img/element-icons/trashcan.svg');
width: 12px;
height: 16px;
top: calc(50% - 8px); // text sizes are dynamic
}
&.mx_RoomStatusBar_unsentResendAllBtn {
padding-left: 34px; // 28px from above, but +6px to account for the wider icon
&::before {
mask-image: url('$(res)/img/element-icons/retry.svg');
width: 18px;
height: 18px;
top: calc(50% - 9px); // text sizes are dynamic
}
}
}
.mx_InlineSpinner {
vertical-align: middle;
margin-right: 5px;
top: 1px; // just to help the vertical alignment be slightly better
& + span {
margin-right: 10px; // same margin/padding as the rightmost button
}
}
}
}
.mx_RoomStatusBar_connectionLostBar img { .mx_RoomStatusBar_connectionLostBar img {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
@ -103,7 +196,7 @@ limitations under the License.
} }
.mx_MatrixChat_useCompactLayout { .mx_MatrixChat_useCompactLayout {
.mx_RoomStatusBar { .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
min-height: 40px; min-height: 40px;
} }

6
res/css/structures/_RoomView.scss
View file

@ -262,12 +262,6 @@ hr.mx_RoomView_myReadMarker {
padding-top: 1px; padding-top: 1px;
} }
.mx_RoomView_inCall .mx_RoomView_statusAreaBox {
background-color: $accent-color;
color: $accent-fg-color;
position: relative;
}
.mx_RoomView_voipChevron { .mx_RoomView_voipChevron {
position: absolute; position: absolute;
bottom: -11px; bottom: -11px;

1
res/css/structures/_ScrollPanel.scss
View file

@ -21,6 +21,5 @@ limitations under the License.
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
overflow-y: hidden;
} }
} }

113
res/css/structures/_SpacePanel.scss
View file

@ -16,9 +16,8 @@ limitations under the License.
$topLevelHeight: 32px; $topLevelHeight: 32px;
$nestedHeight: 24px; $nestedHeight: 24px;
$gutterSize: 17px; $gutterSize: 16px;
$activeStripeSize: 4px; $activeBorderTransparentGap: 1px;
$activeBorderTransparentGap: 2px;
$activeBackgroundColor: $roomtile-selected-bg-color; $activeBackgroundColor: $roomtile-selected-bg-color;
$activeBorderColor: $secondary-fg-color; $activeBorderColor: $secondary-fg-color;
@ -36,6 +35,7 @@ $activeBorderColor: $secondary-fg-color;
.mx_SpacePanel_spaceTreeWrapper { .mx_SpacePanel_spaceTreeWrapper {
flex: 1; flex: 1;
padding: 8px 8px 16px 0;
} }
.mx_SpacePanel_toggleCollapse { .mx_SpacePanel_toggleCollapse {
@ -59,25 +59,29 @@ $activeBorderColor: $secondary-fg-color;
margin: 0; margin: 0;
list-style: none; list-style: none;
padding: 0; padding: 0;
> .mx_SpaceItem {
padding-left: 16px; padding-left: 16px;
} }
.mx_AutoHideScrollbar {
padding: 16px 12px 16px 0;
} }
.mx_SpaceButton_toggleCollapse { .mx_SpaceButton_toggleCollapse {
cursor: pointer; cursor: pointer;
} }
.mx_SpaceItem.collapsed { .mx_SpaceTreeLevel {
.mx_SpaceButton { display: flex;
.mx_NotificationBadge { flex-direction: column;
right: -4px; max-width: 250px;
top: -4px; flex-grow: 1;
}
} }
.mx_SpaceItem {
display: inline-flex;
flex-flow: wrap;
}
.mx_SpaceItem.collapsed {
& > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse { & > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
@ -89,34 +93,42 @@ $activeBorderColor: $secondary-fg-color;
.mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton { .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
margin-left: $gutterSize; margin-left: $gutterSize;
min-width: 40px;
} }
.mx_SpaceButton { .mx_SpaceButton {
border-radius: 8px; border-radius: 8px;
position: relative;
margin-bottom: 2px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 4px; padding: 4px 4px 4px 0;
width: 100%;
&.mx_SpaceButton_active { &.mx_SpaceButton_active {
&:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper { &:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
background-color: $activeBackgroundColor; background-color: $activeBackgroundColor;
border-radius: 8px;
} }
&.mx_SpaceButton_narrow { &.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
.mx_BaseAvatar, .mx_SpaceButton_avatarPlaceholder { padding: $activeBorderTransparentGap;
border: 2px $activeBorderColor solid; border: 3px $activeBorderColor solid;
border-radius: 11px;
}
} }
} }
.mx_SpaceButton_selectionWrapper { .mx_SpaceButton_selectionWrapper {
position: relative;
display: flex; display: flex;
flex: 1; flex: 1;
align-items: center; align-items: center;
border-radius: 12px;
padding: 4px;
}
&:not(.mx_SpaceButton_narrow) {
.mx_SpaceButton_selectionWrapper {
width: 100%;
padding-right: 16px;
overflow: hidden;
}
} }
.mx_SpaceButton_name { .mx_SpaceButton_name {
@ -124,7 +136,6 @@ $activeBorderColor: $secondary-fg-color;
margin-left: 8px; margin-left: 8px;
white-space: nowrap; white-space: nowrap;
display: block; display: block;
max-width: 150px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
padding-right: 8px; padding-right: 8px;
@ -133,8 +144,7 @@ $activeBorderColor: $secondary-fg-color;
} }
.mx_SpaceButton_toggleCollapse { .mx_SpaceButton_toggleCollapse {
width: calc($gutterSize - $activeStripeSize); width: $gutterSize;
margin-left: 1px;
height: 20px; height: 20px;
mask-position: center; mask-position: center;
mask-size: 20px; mask-size: 20px;
@ -172,11 +182,6 @@ $activeBorderColor: $secondary-fg-color;
} }
} }
.mx_SpaceButton_avatarPlaceholder {
border: $activeBorderTransparentGap transparent solid;
padding: $activeBorderTransparentGap;
}
&.mx_SpaceButton_new .mx_SpaceButton_icon { &.mx_SpaceButton_new .mx_SpaceButton_icon {
background-color: $accent-color; background-color: $accent-color;
transition: all .1s ease-in-out; // TODO transition transition: all .1s ease-in-out; // TODO transition
@ -196,22 +201,9 @@ $activeBorderColor: $secondary-fg-color;
} }
} }
.mx_BaseAvatar {
/* moving the border-radius to this element from _image
element so we can add a border to it without the initials being displaced */
overflow: hidden;
border: 2px transparent solid;
padding: $activeBorderTransparentGap;
.mx_BaseAvatar_initial {
top: $activeBorderTransparentGap;
left: $activeBorderTransparentGap;
}
.mx_BaseAvatar_image { .mx_BaseAvatar_image {
border-radius: 8px; border-radius: 8px;
} }
}
.mx_SpaceButton_menuButton { .mx_SpaceButton_menuButton {
width: 20px; width: 20px;
@ -219,8 +211,9 @@ $activeBorderColor: $secondary-fg-color;
height: 20px; height: 20px;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
position: relative;
display: none; display: none;
position: absolute;
right: 4px;
&::before { &::before {
top: 2px; top: 2px;
@ -239,9 +232,8 @@ $activeBorderColor: $secondary-fg-color;
} }
.mx_SpacePanel_badgeContainer { .mx_SpacePanel_badgeContainer {
position: absolute;
height: 16px; height: 16px;
// don't set width so that it takes no space when there is no badge to show
margin: auto 0; // vertically align
// Create a flexbox to make aligning dot badges easier // Create a flexbox to make aligning dot badges easier
display: flex; display: flex;
@ -261,17 +253,29 @@ $activeBorderColor: $secondary-fg-color;
&.collapsed { &.collapsed {
.mx_SpaceButton { .mx_SpaceButton {
.mx_SpacePanel_badgeContainer { .mx_SpacePanel_badgeContainer {
position: absolute; right: -3px;
right: 0px; top: -3px;
top: 2px; }
&.mx_SpaceButton_active .mx_SpacePanel_badgeContainer {
// when we draw the selection border we move the relative bounds of our parent
// so update our position within the bounds of the parent to maintain position overall
right: -6px;
top: -6px;
} }
} }
} }
&:not(.collapsed) { &:not(.collapsed) {
.mx_SpacePanel_badgeContainer {
position: absolute;
right: 4px;
}
.mx_SpaceButton:hover, .mx_SpaceButton:hover,
.mx_SpaceButton:focus-within, .mx_SpaceButton:focus-within,
.mx_SpaceButton_hasMenuOpen { .mx_SpaceButton_hasMenuOpen {
&:not(.mx_SpaceButton_home) {
// Hide the badge container on hover because it'll be a menu button // Hide the badge container on hover because it'll be a menu button
.mx_SpacePanel_badgeContainer { .mx_SpacePanel_badgeContainer {
width: 0; width: 0;
@ -284,6 +288,7 @@ $activeBorderColor: $secondary-fg-color;
} }
} }
} }
}
/* root space buttons are bigger and not indented */ /* root space buttons are bigger and not indented */
& > .mx_AutoHideScrollbar { & > .mx_AutoHideScrollbar {
@ -326,20 +331,20 @@ $activeBorderColor: $secondary-fg-color;
mask-image: url('$(res)/img/element-icons/leave.svg'); mask-image: url('$(res)/img/element-icons/leave.svg');
} }
.mx_SpacePanel_iconHome::before {
mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
}
.mx_SpacePanel_iconMembers::before { .mx_SpacePanel_iconMembers::before {
mask-image: url('$(res)/img/element-icons/room/members.svg'); mask-image: url('$(res)/img/element-icons/room/members.svg');
} }
.mx_SpacePanel_iconPlus::before { .mx_SpacePanel_iconPlus::before {
mask-image: url('$(res)/img/element-icons/plus.svg'); mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
}
.mx_SpacePanel_iconHash::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
} }
.mx_SpacePanel_iconExplore::before { .mx_SpacePanel_iconExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg'); mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
} }
} }

247
res/css/structures/_SpaceRoomDirectory.scss
View file

@ -26,12 +26,16 @@ limitations under the License.
word-break: break-word; word-break: break-word;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.mx_SpaceRoomDirectory,
.mx_SpaceRoomView_landing {
.mx_Dialog_title { .mx_Dialog_title {
display: flex; display: flex;
.mx_BaseAvatar { .mx_BaseAvatar {
margin-right: 16px; margin-right: 12px;
align-self: center;
} }
.mx_BaseAvatar_image { .mx_BaseAvatar_image {
@ -47,6 +51,7 @@ limitations under the License.
} }
> div { > div {
font-weight: 400;
color: $secondary-fg-color; color: $secondary-fg-color;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
@ -54,39 +59,70 @@ limitations under the License.
} }
} }
.mx_Dialog_content {
// TODO fix scrollbar
//display: flex;
//flex-direction: column;
//height: calc(100% - 80px);
.mx_AccessibleButton_kind_link { .mx_AccessibleButton_kind_link {
padding: 0; padding: 0;
} }
.mx_SearchBox { .mx_SearchBox {
margin: 24px 0 28px; margin: 24px 0 16px;
}
.mx_SpaceRoomDirectory_noResults {
text-align: center;
> div {
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-fg-color;
}
} }
.mx_SpaceRoomDirectory_listHeader { .mx_SpaceRoomDirectory_listHeader {
display: flex; display: flex;
font-size: $font-12px; min-height: 32px;
line-height: $font-15px; align-items: center;
color: $secondary-fg-color; font-size: $font-15px;
line-height: $font-24px;
color: $primary-fg-color;
.mx_FormButton { .mx_AccessibleButton {
margin-bottom: 8px; padding: 2px 8px;
font-weight: normal;
& + .mx_AccessibleButton {
margin-left: 16px;
}
} }
> span { > span {
margin: auto 0 0 auto; margin-left: auto;
} }
} }
.mx_SpaceRoomDirectory_error {
position: relative;
font-weight: $font-semi-bold;
color: $notice-primary-color;
font-size: $font-15px;
line-height: $font-18px;
margin: 20px auto 12px;
padding-left: 24px;
width: max-content;
&::before {
content: "";
position: absolute;
height: 16px;
width: 16px;
left: 0;
background-image: url("$(res)/img/element-icons/warning-badge.svg");
}
} }
} }
.mx_SpaceRoomDirectory_list { .mx_SpaceRoomDirectory_list {
margin-top: 8px; margin-top: 16px;
padding-bottom: 40px;
.mx_SpaceRoomDirectory_roomCount { .mx_SpaceRoomDirectory_roomCount {
> h3 { > h3 {
@ -106,113 +142,141 @@ limitations under the License.
} }
.mx_SpaceRoomDirectory_subspace { .mx_SpaceRoomDirectory_subspace {
margin-top: 8px;
.mx_SpaceRoomDirectory_subspace_info {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 8px;
color: $secondary-fg-color;
font-weight: $font-semi-bold;
font-size: $font-12px;
line-height: $font-15px;
.mx_BaseAvatar {
margin-right: 12px;
vertical-align: middle;
}
.mx_BaseAvatar_image { .mx_BaseAvatar_image {
border-radius: 8px; border-radius: 8px;
} }
}
.mx_SpaceRoomDirectory_actions { .mx_SpaceRoomDirectory_subspace_toggle {
text-align: right; position: absolute;
height: min-content; left: -1px;
margin-left: auto; top: 10px;
margin-right: 16px; height: 16px;
width: 16px;
border-radius: 4px;
background-color: $primary-bg-color;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 16px;
width: 16px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $tertiary-fg-color;
mask-size: 16px;
transform: rotate(270deg);
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
&.mx_SpaceRoomDirectory_subspace_toggle_shown::before {
transform: rotate(0deg);
} }
} }
.mx_SpaceRoomDirectory_subspace_children { .mx_SpaceRoomDirectory_subspace_children {
margin-left: 12px; position: relative;
border-left: 2px solid $space-button-outline-color; padding-left: 12px;
padding-left: 24px;
}
} }
.mx_SpaceRoomDirectory_roomTile { .mx_SpaceRoomDirectory_roomTile {
padding: 16px; position: relative;
padding: 8px 16px;
border-radius: 8px; border-radius: 8px;
border: 1px solid $space-button-outline-color; min-height: 56px;
margin: 8px 0 16px;
display: flex;
min-height: 76px;
box-sizing: border-box; box-sizing: border-box;
&.mx_AccessibleButton:hover { display: grid;
background-color: rgba(141, 151, 165, 0.1); grid-template-columns: 20px auto max-content;
} grid-column-gap: 8px;
grid-row-gap: 6px;
align-items: center;
.mx_BaseAvatar { .mx_BaseAvatar {
margin-right: 16px; grid-row: 1;
margin-top: 6px; grid-column: 1;
} }
.mx_SpaceRoomDirectory_roomTile_info {
display: inline-block;
font-size: $font-15px;
flex-grow: 1;
height: min-content;
margin: auto 0;
.mx_SpaceRoomDirectory_roomTile_name { .mx_SpaceRoomDirectory_roomTile_name {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-18px; line-height: $font-18px;
} grid-row: 1;
.mx_SpaceRoomDirectory_roomTile_topic { grid-column: 2;
line-height: $font-24px;
color: $secondary-fg-color;
}
}
.mx_SpaceRoomDirectory_roomTile_memberCount { .mx_InfoTooltip {
display: inline;
margin-left: 12px;
color: $tertiary-fg-color;
font-size: $font-12px;
line-height: $font-15px;
.mx_InfoTooltip_icon {
margin-right: 4px;
position: relative; position: relative;
margin: auto 0 auto 24px; vertical-align: text-top;
padding: 0 0 0 28px;
line-height: $font-24px;
display: inline-block;
width: 32px;
&::before { &::before {
position: absolute; position: absolute;
content: '';
width: 24px;
height: 24px;
top: 0; top: 0;
left: 0; left: 0;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
background-color: $secondary-fg-color;
mask-image: url('$(res)/img/element-icons/community-members.svg');
} }
} }
}
}
.mx_SpaceRoomDirectory_roomTile_info {
font-size: $font-14px;
line-height: $font-18px;
color: $secondary-fg-color;
grid-row: 2;
grid-column: 1/3;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.mx_SpaceRoomDirectory_actions { .mx_SpaceRoomDirectory_actions {
width: 180px;
text-align: right; text-align: right;
height: min-content; margin-left: 20px;
margin: auto 0 auto 28px; grid-column: 3;
grid-row: 1/3;
.mx_AccessibleButton { .mx_AccessibleButton {
vertical-align: middle; padding: 8px 18px;
display: inline-block;
visibility: hidden;
}
& + .mx_AccessibleButton { .mx_Checkbox {
margin-left: 24px; display: inline-flex;
vertical-align: middle;
margin-left: 12px;
} }
} }
&:hover {
background-color: $groupFilterPanel-bg-color;
.mx_AccessibleButton {
visibility: visible;
}
}
}
.mx_SpaceRoomDirectory_roomTile,
.mx_SpaceRoomDirectory_subspace_children {
&::before {
content: "";
position: absolute;
background-color: $groupFilterPanel-bg-color;
width: 1px;
height: 100%;
left: 6px;
top: 0;
} }
} }
@ -223,9 +287,18 @@ limitations under the License.
line-height: $font-15px; line-height: $font-15px;
color: $secondary-fg-color; color: $secondary-fg-color;
} }
.mx_Checkbox {
display: inline-block;
} }
> hr {
border: none;
height: 1px;
background-color: rgba(141, 151, 165, 0.2);
margin: 20px 0;
}
.mx_SpaceRoomDirectory_createRoom {
display: block;
margin: 16px auto 0;
width: max-content;
} }
} }

307
res/css/structures/_SpaceRoomView.scss
View file

@ -16,10 +16,57 @@ limitations under the License.
$SpaceRoomViewInnerWidth: 428px; $SpaceRoomViewInnerWidth: 428px;
@define-mixin SpacePillButton {
position: relative;
padding: 16px 32px 16px 72px;
width: 432px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid $input-border-color;
font-size: $font-15px;
margin: 20px 0;
> h3 {
font-weight: $font-semi-bold;
margin: 0 0 4px;
}
> span {
color: $secondary-fg-color;
}
&::before {
position: absolute;
content: '';
width: 32px;
height: 32px;
top: 24px;
left: 20px;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 24px;
background-color: $tertiary-fg-color;
}
&:hover {
border-color: $accent-color;
&::before {
background-color: $accent-color;
}
> span {
color: $primary-fg-color;
}
}
}
.mx_SpaceRoomView { .mx_SpaceRoomView {
.mx_MainSplit > div:first-child { .mx_MainSplit > div:first-child {
padding: 80px 60px; padding: 80px 60px;
flex-grow: 1; flex-grow: 1;
max-height: 100%;
overflow-y: auto;
h1 { h1 {
margin: 0; margin: 0;
@ -34,6 +81,16 @@ $SpaceRoomViewInnerWidth: 428px;
color: $secondary-fg-color; color: $secondary-fg-color;
margin-top: 12px; margin-top: 12px;
margin-bottom: 24px; margin-bottom: 24px;
max-width: $SpaceRoomViewInnerWidth;
}
.mx_AddExistingToSpace {
max-width: $SpaceRoomViewInnerWidth;
.mx_AddExistingToSpace_content {
height: calc(100vh - 360px);
max-height: 400px;
}
} }
.mx_SpaceRoomView_buttons { .mx_SpaceRoomView_buttons {
@ -42,7 +99,7 @@ $SpaceRoomViewInnerWidth: 428px;
width: $SpaceRoomViewInnerWidth; width: $SpaceRoomViewInnerWidth;
text-align: right; // button alignment right text-align: right; // button alignment right
.mx_FormButton { .mx_AccessibleButton_hasKind {
padding: 8px 22px; padding: 8px 22px;
margin-left: 16px; margin-left: 16px;
} }
@ -69,9 +126,68 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
.mx_SpaceRoomView_landing { .mx_SpaceRoomView_preview {
overflow-y: auto; padding: 32px 24px !important; // override default padding from above
margin: auto;
max-width: 480px;
box-sizing: border-box;
box-shadow: 2px 15px 30px $dialog-shadow-color;
border-radius: 8px;
.mx_SpaceRoomView_preview_inviter {
display: flex;
align-items: center;
margin-bottom: 20px;
font-size: $font-15px;
> div {
margin-left: 8px;
.mx_SpaceRoomView_preview_inviter_name {
line-height: $font-18px;
}
.mx_SpaceRoomView_preview_inviter_mxid {
line-height: $font-24px;
color: $secondary-fg-color;
}
}
}
> .mx_BaseAvatar_image,
> .mx_BaseAvatar > .mx_BaseAvatar_image {
border-radius: 12px;
}
h1.mx_SpaceRoomView_preview_name {
margin: 20px 0 !important; // override default margin from above
}
.mx_SpaceRoomView_preview_topic {
font-size: $font-14px;
line-height: $font-22px;
color: $secondary-fg-color;
margin: 20px 0;
max-height: 160px;
overflow-y: auto;
}
.mx_SpaceRoomView_preview_joinButtons {
margin-top: 20px;
.mx_AccessibleButton {
width: 200px;
box-sizing: border-box;
padding: 14px 0;
& + .mx_AccessibleButton {
margin-left: 20px;
}
}
}
}
.mx_SpaceRoomView_landing {
> .mx_BaseAvatar_image, > .mx_BaseAvatar_image,
> .mx_BaseAvatar > .mx_BaseAvatar_image { > .mx_BaseAvatar > .mx_BaseAvatar_image {
border-radius: 12px; border-radius: 12px;
@ -100,44 +216,60 @@ $SpaceRoomViewInnerWidth: 428px;
vertical-align: middle; vertical-align: middle;
} }
} }
}
.mx_SpaceRoomView_landing_memberCount { .mx_SpaceRoomView_landing_info {
display: flex;
align-items: center;
.mx_SpaceRoomView_info {
display: inline-block;
margin: 0 auto 0 0;
}
.mx_FacePile {
display: inline-block;
margin-right: 12px;
.mx_FacePile_faces {
cursor: pointer;
}
}
.mx_SpaceRoomView_landing_inviteButton {
position: relative; position: relative;
margin-left: 24px; padding-left: 40px;
padding: 0 0 0 28px; height: min-content;
line-height: $font-24px;
vertical-align: text-bottom;
&::before { &::before {
position: absolute; position: absolute;
content: ''; content: "";
width: 24px; left: 8px;
height: 24px; height: 16px;
top: 0; width: 16px;
left: 0; background: #ffffff; // white icon fill
mask-position: center; mask-position: center;
mask-size: 16px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-image: url('$(res)/img/element-icons/room/invite.svg');
background-color: $accent-color;
mask-image: url('$(res)/img/element-icons/community-members.svg');
} }
} }
} }
.mx_SpaceRoomView_landing_topic { .mx_SpaceRoomView_landing_topic {
font-size: $font-15px; font-size: $font-15px;
margin-top: 12px;
margin-bottom: 16px;
} }
.mx_SpaceRoomView_landing_joinButtons { > hr {
margin-top: 24px; border: none;
height: 1px;
.mx_FormButton { background-color: $groupFilterPanel-bg-color;
padding: 8px 22px;
}
} }
.mx_SpaceRoomView_landing_adminButtons { .mx_SpaceRoomView_landing_adminButtons {
margin-top: 32px; margin-top: 24px;
.mx_AccessibleButton { .mx_AccessibleButton {
position: relative; position: relative;
@ -146,9 +278,9 @@ $SpaceRoomViewInnerWidth: 428px;
box-sizing: border-box; box-sizing: border-box;
padding: 72px 16px 0; padding: 72px 16px 0;
border-radius: 12px; border-radius: 12px;
border: 1px solid $space-button-outline-color; border: 1px solid $input-border-color;
margin-right: 28px; margin-right: 28px;
margin-bottom: 28px; margin-bottom: 20px;
font-size: $font-14px; font-size: $font-14px;
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
@ -178,16 +310,6 @@ $SpaceRoomViewInnerWidth: 428px;
background: #ffffff; // white icon fill background: #ffffff; // white icon fill
} }
&.mx_SpaceRoomView_landing_inviteButton {
&::before {
background-color: $accent-color;
}
&::after {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
}
&.mx_SpaceRoomView_landing_addButton { &.mx_SpaceRoomView_landing_addButton {
&::before { &::before {
background-color: #ac3ba8; background-color: #ac3ba8;
@ -220,74 +342,14 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
.mx_SpaceRoomDirectory_list { .mx_SearchBox {
max-width: 600px; margin: 0 0 20px;
.mx_SpaceRoomDirectory_roomTile_actions {
display: none;
}
} }
} }
.mx_SpaceRoomView_privateScope { .mx_SpaceRoomView_privateScope {
.mx_RadioButton { .mx_AccessibleButton {
width: $SpaceRoomViewInnerWidth; @mixin SpacePillButton;
border-radius: 8px;
border: 1px solid $space-button-outline-color;
padding: 16px 16px 16px 72px;
margin-top: 36px;
cursor: pointer;
box-sizing: border-box;
position: relative;
> div:first-of-type {
// hide radio dot
display: none;
}
.mx_RadioButton_content {
margin: 0;
> h3 {
margin: 0 0 4px;
font-size: $font-15px;
font-weight: $font-semi-bold;
line-height: $font-18px;
}
> div {
color: $secondary-fg-color;
font-size: $font-15px;
line-height: $font-24px;
}
}
&::before {
content: "";
position: absolute;
height: 32px;
width: 32px;
top: 24px;
left: 20px;
background-color: $secondary-fg-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
.mx_RadioButton_checked {
border-color: $accent-color;
.mx_RadioButton_content {
> div {
color: $primary-fg-color;
}
}
&::before {
background-color: $accent-color;
}
} }
.mx_SpaceRoomView_privateScope_justMeButton::before { .mx_SpaceRoomView_privateScope_justMeButton::before {
@ -334,3 +396,50 @@ $SpaceRoomViewInnerWidth: 428px;
} }
} }
} }
.mx_SpaceRoomView_info {
color: $secondary-fg-color;
font-size: $font-15px;
line-height: $font-24px;
margin: 20px 0;
.mx_SpaceRoomView_info_public,
.mx_SpaceRoomView_info_private {
padding-left: 20px;
position: relative;
&::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
top: 0;
left: -2px;
mask-position: center;
mask-repeat: no-repeat;
background-color: $tertiary-fg-color;
}
}
.mx_SpaceRoomView_info_public::before {
mask-size: 12px;
mask-image: url("$(res)/img/globe.svg");
}
.mx_SpaceRoomView_info_private::before {
mask-size: 14px;
mask-image: url("$(res)/img/element-icons/lock.svg");
}
.mx_AccessibleButton_kind_link {
color: inherit;
position: relative;
padding-left: 16px;
&::before {
content: "·"; // visual separator
position: absolute;
left: 6px;
}
}
}

6
res/css/structures/_ToastContainer.scss
View file

@ -1,5 +1,5 @@
/* /*
Copyright 2019 The Matrix.org Foundation C.I.C. Copyright 2019-2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -158,6 +158,10 @@ limitations under the License.
} }
} }
.mx_Toast_detail {
color: $secondary-fg-color;
}
.mx_Toast_deviceID { .mx_Toast_deviceID {
font-size: $font-10px; font-size: $font-10px;
} }

72
res/css/structures/_UploadBar.scss
View file

@ -1,5 +1,5 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016, 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -15,47 +15,45 @@ limitations under the License.
*/ */
.mx_UploadBar { .mx_UploadBar {
padding-left: 65px; // line up with the shield area in the composer
position: relative; position: relative;
.mx_ProgressBar {
width: calc(100% - 40px); // cheating at a right margin
}
} }
.mx_UploadBar_uploadProgressOuter { .mx_UploadBar_filename {
height: 5px;
margin-left: 63px;
margin-top: -1px;
padding-bottom: 5px;
}
.mx_UploadBar_uploadProgressInner {
background-color: $accent-color;
height: 5px;
}
.mx_UploadBar_uploadFilename {
margin-top: 5px; margin-top: 5px;
margin-left: 65px; color: $muted-fg-color;
opacity: 0.5;
color: $primary-fg-color;
}
.mx_UploadBar_uploadIcon {
float: left;
margin-top: 5px;
margin-left: 14px;
}
.mx_UploadBar_uploadCancel {
float: right;
margin-top: 5px;
margin-right: 10px;
position: relative; position: relative;
opacity: 0.6; padding-left: 22px; // 18px for icon, 4px for padding
cursor: pointer; font-size: $font-15px;
z-index: 1; vertical-align: middle;
&::before {
content: "";
height: 18px;
width: 18px;
position: absolute;
top: 0;
left: 0;
mask-repeat: no-repeat;
mask-position: center;
background-color: $muted-fg-color;
mask-image: url('$(res)/img/element-icons/upload.svg');
}
} }
.mx_UploadBar_uploadBytes { .mx_UploadBar_cancel {
float: right; position: absolute;
margin-top: 5px; top: 0;
margin-right: 30px; right: 0;
color: $accent-color; height: 16px;
width: 16px;
margin-right: 16px; // align over rightmost button in composer
mask-repeat: no-repeat;
mask-position: center;
background-color: $muted-fg-color;
mask-image: url('$(res)/img/icons-close.svg');
} }

26
res/css/structures/_UserMenu.scss
View file

@ -117,6 +117,32 @@ limitations under the License.
.mx_UserMenu_headerButtons { .mx_UserMenu_headerButtons {
// No special styles: the rest of the layout happens to make it work. // No special styles: the rest of the layout happens to make it work.
} }
.mx_UserMenu_dnd {
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
&::before {
content: '';
position: absolute;
width: 24px;
height: 24px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $muted-fg-color;
}
&.mx_UserMenu_dnd_noisy::before {
mask-image: url('$(res)/img/element-icons/notifications.svg');
}
&.mx_UserMenu_dnd_muted::before {
mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
}
}
} }
&.mx_UserMenu_minimized { &.mx_UserMenu_minimized {

23
res/css/structures/_ViewSource.scss
View file

@ -14,17 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_ViewSource_label_left { .mx_ViewSource_separator {
float: left;
}
.mx_ViewSource_label_right {
float: right;
}
.mx_ViewSource_label_bottom {
clear: both; clear: both;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
padding-top: 0.7em;
padding-bottom: 0.7em;
}
.mx_ViewSource_heading {
font-size: $font-17px;
font-weight: 400;
color: $primary-fg-color;
margin-top: 0.7em;
} }
.mx_ViewSource pre { .mx_ViewSource pre {
@ -34,3 +35,7 @@ limitations under the License.
word-wrap: break-word; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
} }
.mx_ViewSource_details {
margin-top: 0.8em;
}

44
res/css/structures/auth/_CompleteSecurity.scss
View file

@ -26,50 +26,6 @@ limitations under the License.
position: relative; position: relative;
} }
.mx_CompleteSecurity_clients {
width: max-content;
margin: 36px auto 0;
.mx_CompleteSecurity_clients_desktop, .mx_CompleteSecurity_clients_mobile {
position: relative;
width: 160px;
text-align: center;
padding-top: 64px;
display: inline-block;
&::before {
content: '';
position: absolute;
height: 48px;
width: 48px;
left: 56px;
top: 0;
background-color: $muted-fg-color;
mask-repeat: no-repeat;
mask-size: contain;
}
}
.mx_CompleteSecurity_clients_desktop {
margin-right: 56px;
}
.mx_CompleteSecurity_clients_desktop::before {
mask-image: url('$(res)/img/feather-customised/monitor.svg');
}
.mx_CompleteSecurity_clients_mobile::before {
mask-image: url('$(res)/img/feather-customised/smartphone.svg');
}
p {
margin-top: 16px;
font-size: $font-12px;
color: $muted-fg-color;
text-align: center;
}
}
.mx_CompleteSecurity_heroIcon { .mx_CompleteSecurity_heroIcon {
width: 128px; width: 128px;
height: 128px; height: 128px;

3
res/css/views/avatars/_DecoratedRoomAvatar.scss
View file

@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
// XXX: We shouldn't be using TemporaryTile anywhere - delete it. .mx_DecoratedRoomAvatar, .mx_ExtraTile {
.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
position: relative; position: relative;
&.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar { &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {

134
res/css/views/dialogs/_AddExistingToSpaceDialog.scss
View file

@ -21,6 +21,66 @@ limitations under the License.
} }
} }
.mx_AddExistingToSpace {
.mx_SearchBox {
// To match the space around the title
margin: 0 0 15px 0;
flex-grow: 0;
}
.mx_AddExistingToSpace_content {
flex-grow: 1;
}
.mx_AddExistingToSpace_noResults {
display: block;
margin-top: 24px;
}
.mx_AddExistingToSpace_section {
&:not(:first-child) {
margin-top: 24px;
}
> h3 {
margin: 0;
color: $secondary-fg-color;
font-size: $font-12px;
font-weight: $font-semi-bold;
line-height: $font-15px;
}
.mx_AddExistingToSpace_entry {
display: flex;
margin-top: 12px;
.mx_BaseAvatar {
margin-right: 12px;
}
.mx_AddExistingToSpace_entry_name {
font-size: $font-15px;
line-height: 30px;
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 12px;
}
.mx_Checkbox {
align-items: center;
}
}
}
.mx_AddExistingToSpace_section_spaces {
.mx_BaseAvatar_image {
border-radius: 8px;
}
}
}
.mx_AddExistingToSpaceDialog { .mx_AddExistingToSpaceDialog {
width: 480px; width: 480px;
color: $primary-fg-color; color: $primary-fg-color;
@ -28,22 +88,23 @@ limitations under the License.
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
min-height: 0; min-height: 0;
height: 80vh;
.mx_Dialog_title { .mx_Dialog_title {
display: flex; display: flex;
.mx_BaseAvatar {
display: inline-flex;
margin: 5px 16px 5px 5px;
vertical-align: middle;
}
.mx_BaseAvatar_image { .mx_BaseAvatar_image {
border-radius: 8px; border-radius: 8px;
margin: 0; margin: 0;
vertical-align: unset; vertical-align: unset;
} }
.mx_BaseAvatar {
display: inline-flex;
margin: 5px 16px 5px 5px;
vertical-align: middle;
}
> div { > div {
> h1 { > h1 {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
@ -99,10 +160,6 @@ limitations under the License.
} }
} }
.mx_SearchBox {
margin: 0;
}
.mx_AddExistingToSpaceDialog_errorText { .mx_AddExistingToSpaceDialog_errorText {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-12px; font-size: $font-12px;
@ -111,49 +168,8 @@ limitations under the License.
margin-bottom: 28px; margin-bottom: 28px;
} }
.mx_AddExistingToSpaceDialog_content { .mx_AddExistingToSpace {
.mx_AddExistingToSpaceDialog_noResults { display: contents;
margin-top: 24px;
}
}
.mx_AddExistingToSpaceDialog_section {
margin-top: 24px;
> h3 {
margin: 0;
color: $secondary-fg-color;
font-size: $font-12px;
font-weight: $font-semi-bold;
line-height: $font-15px;
}
.mx_AddExistingToSpaceDialog_entry {
display: flex;
margin-top: 12px;
.mx_BaseAvatar {
margin-right: 12px;
}
.mx_AddExistingToSpaceDialog_entry_name {
font-size: $font-15px;
line-height: 30px;
flex-grow: 1;
}
.mx_FormButton {
min-width: 92px;
font-weight: normal;
box-sizing: border-box;
}
}
}
.mx_AddExistingToSpaceDialog_section_spaces {
.mx_BaseAvatar_image {
border-radius: 8px;
}
} }
.mx_AddExistingToSpaceDialog_footer { .mx_AddExistingToSpaceDialog_footer {
@ -162,8 +178,14 @@ limitations under the License.
> span { > span {
flex-grow: 1; flex-grow: 1;
font-size: $font-12px; font-size: $font-14px;
line-height: $font-15px; line-height: $font-15px;
font-weight: $font-semi-bold;
.mx_AccessibleButton {
font-size: inherit;
display: inline-block;
}
> * { > * {
vertical-align: middle; vertical-align: middle;
@ -178,8 +200,4 @@ limitations under the License.
padding: 0; padding: 0;
} }
} }
.mx_FormButton {
padding: 8px 22px;
}
} }

2
res/css/views/dialogs/_SpaceSettingsDialog.scss
View file

@ -49,7 +49,7 @@ limitations under the License.
} }
} }
.mx_FormButton { .mx_AccessibleButton_hasKind {
padding: 8px 22px; padding: 8px 22px;
} }
} }

31
res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
View file

@ -1,6 +1,5 @@
/* /*
Copyright 2018 New Vector Ltd Copyright 2018, 2019, 2021 The Matrix.org Foundation C.I.C.
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -15,6 +14,27 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_AccessSecretStorageDialog_reset {
position: relative;
padding-left: 24px; // 16px icon + 8px padding
margin-top: 7px; // vertical alignment to buttons
&::before {
content: "";
display: inline-block;
position: absolute;
height: 16px;
width: 16px;
left: 0;
top: 2px; // alignment
background-image: url("$(res)/img/element-icons/warning-badge.svg");
}
.mx_AccessSecretStorageDialog_reset_link {
color: $warning-color;
}
}
.mx_AccessSecretStorageDialog_titleWithIcon::before { .mx_AccessSecretStorageDialog_titleWithIcon::before {
content: ''; content: '';
display: inline-block; display: inline-block;
@ -26,6 +46,13 @@ limitations under the License.
background-color: $primary-fg-color; background-color: $primary-fg-color;
} }
.mx_AccessSecretStorageDialog_resetBadge::before {
// The image isn't capable of masking, so we use a background instead.
background-image: url("$(res)/img/element-icons/warning-badge.svg");
background-size: 24px;
background-color: transparent;
}
.mx_AccessSecretStorageDialog_secureBackupTitle::before { .mx_AccessSecretStorageDialog_secureBackupTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-backup.svg'); mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
} }

4
res/css/views/elements/_AccessibleButton.scss
View file

@ -26,7 +26,9 @@ limitations under the License.
padding: 7px 18px; padding: 7px 18px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
display: inline-block; display: inline-flex;
align-items: center;
justify-content: center;
font-size: $font-14px; font-size: $font-14px;
} }

65
res/css/views/elements/_FacePile.scss Normal file
View file

@ -0,0 +1,65 @@
/*
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_FacePile {
.mx_FacePile_faces {
display: inline-flex;
flex-direction: row-reverse;
vertical-align: middle;
> .mx_FacePile_face + .mx_FacePile_face {
margin-right: -8px;
}
.mx_BaseAvatar_image {
border: 1px solid $primary-bg-color;
}
.mx_BaseAvatar_initial {
margin: 1px; // to offset the border on the image
}
.mx_FacePile_more {
position: relative;
border-radius: 100%;
width: 30px;
height: 30px;
background-color: $groupFilterPanel-bg-color;
&::before {
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: inherit;
width: inherit;
background: $tertiary-fg-color;
mask-position: center;
mask-size: 20px;
mask-repeat: no-repeat;
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
}
}
}
.mx_FacePile_summary {
margin-left: 12px;
font-size: $font-14px;
line-height: $font-24px;
color: $tertiary-fg-color;
}
}

6
res/css/views/elements/_FormButton.scss
View file

@ -33,4 +33,10 @@ limitations under the License.
color: $notice-primary-color; color: $notice-primary-color;
background-color: $notice-primary-bg-color; background-color: $notice-primary-bg-color;
} }
&.mx_AccessibleButton_kind_secondary {
color: $secondary-fg-color;
border: 1px solid $secondary-fg-color;
background-color: unset;
}
} }

200
res/css/views/elements/_ImageView.scss
View file

@ -14,139 +14,107 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
/* This has got to be the most fragile piece of CSS ever written.
But empirically it works on Chrome/FF/Safari
*/
.mx_ImageView { .mx_ImageView {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
align-items: center;
}
.mx_ImageView_lhs {
order: 1;
flex: 1 1 10%;
min-width: 60px;
// background-color: #080;
// height: 20px;
}
.mx_ImageView_content {
order: 2;
/* min-width hack needed for FF */
min-width: 0px;
height: 90%;
flex: 15 15 0;
display: flex;
align-items: center;
justify-content: center;
}
.mx_ImageView_content img {
max-width: 100%;
/* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
max-height: 100%;
/* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
object-fit: contain;
/* background-image: url('$(res)/img/trans.png'); */
pointer-events: all;
}
.mx_ImageView_labelWrapper {
position: absolute;
top: 0px;
right: 0px;
height: 100%;
overflow: auto;
pointer-events: all;
}
.mx_ImageView_label {
text-align: left;
display: flex;
justify-content: center;
flex-direction: column; flex-direction: column;
padding-left: 30px; }
padding-right: 30px;
min-height: 100%; .mx_ImageView_image_wrapper {
max-width: 240px; display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow: hidden;
}
.mx_ImageView_image {
pointer-events: all;
flex-shrink: 0;
}
.mx_ImageView_panel {
width: 100%;
height: 68px;
display: flex;
justify-content: space-between;
align-items: center;
}
.mx_ImageView_info_wrapper {
pointer-events: all;
padding-left: 32px;
display: flex;
flex-direction: row;
align-items: center;
color: $lightbox-fg-color; color: $lightbox-fg-color;
} }
.mx_ImageView_cancel { .mx_ImageView_info {
position: absolute; padding-left: 12px;
// hack for mx_Dialog having a top padding of 40px display: flex;
top: 40px; flex-direction: column;
right: 0px;
padding-top: 35px;
padding-right: 35px;
cursor: pointer;
} }
.mx_ImageView_rotateClockwise { .mx_ImageView_info_sender {
position: absolute; font-weight: bold;
top: 40px;
right: 70px;
padding-top: 35px;
cursor: pointer;
} }
.mx_ImageView_rotateCounterClockwise { .mx_ImageView_toolbar {
position: absolute; padding-right: 16px;
top: 40px; pointer-events: all;
right: 105px; display: flex;
padding-top: 35px; align-items: center;
cursor: pointer;
}
.mx_ImageView_name {
font-size: $font-18px;
margin-bottom: 6px;
word-wrap: break-word;
}
.mx_ImageView_metadata {
font-size: $font-15px;
opacity: 0.5;
}
.mx_ImageView_download {
display: table;
margin-top: 24px;
margin-bottom: 6px;
border-radius: 5px;
background-color: $lightbox-bg-color;
font-size: $font-14px;
padding: 9px;
border: 1px solid $lightbox-border-color;
}
.mx_ImageView_size {
font-size: $font-11px;
}
.mx_ImageView_link {
color: $lightbox-fg-color !important;
text-decoration: none !important;
} }
.mx_ImageView_button { .mx_ImageView_button {
font-size: $font-15px; margin-left: 24px;
opacity: 0.5; display: block;
margin-top: 18px;
cursor: pointer; &::before {
content: '';
height: 22px;
width: 22px;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
display: block;
background-color: $icon-button-color;
}
} }
.mx_ImageView_shim { .mx_ImageView_button_rotateCW::before {
height: 30px; mask-image: url('$(res)/img/image-view/rotate-cw.svg');
} }
.mx_ImageView_rhs { .mx_ImageView_button_rotateCCW::before {
order: 3; mask-image: url('$(res)/img/image-view/rotate-ccw.svg');
flex: 1 1 10%; }
min-width: 300px;
// background-color: #800; .mx_ImageView_button_zoomOut::before {
// height: 20px; mask-image: url('$(res)/img/image-view/zoom-out.svg');
}
.mx_ImageView_button_zoomIn::before {
mask-image: url('$(res)/img/image-view/zoom-in.svg');
}
.mx_ImageView_button_download::before {
mask-image: url('$(res)/img/image-view/download.svg');
}
.mx_ImageView_button_more::before {
mask-image: url('$(res)/img/image-view/more.svg');
}
.mx_ImageView_button_close {
border-radius: 100%;
background: #21262c; // same on all themes
&::before {
width: 32px;
height: 32px;
mask-image: url('$(res)/img/image-view/close.svg');
mask-size: 40%;
}
} }

57
res/css/views/elements/_InviteReason.scss Normal file
View file

@ -0,0 +1,57 @@
/*
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_InviteReason {
position: relative;
margin-bottom: 1em;
.mx_InviteReason_reason {
visibility: visible;
}
.mx_InviteReason_view {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
justify-content: center;
align-items: center;
cursor: pointer;
color: $secondary-fg-color;
&::before {
content: "";
margin-right: 8px;
background-color: $secondary-fg-color;
mask-image: url('$(res)/img/feather-customised/eye.svg');
display: inline-block;
width: 18px;
height: 14px;
}
}
}
.mx_InviteReason_hidden {
.mx_InviteReason_reason {
visibility: hidden;
}
.mx_InviteReason_view {
display: flex;
}
}

12
res/css/views/elements/_ProgressBar.scss
View file

@ -1,5 +1,5 @@
/* /*
Copyright 2020 The Matrix.org Foundation C.I.C. Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -15,15 +15,15 @@ limitations under the License.
*/ */
progress.mx_ProgressBar { progress.mx_ProgressBar {
height: 4px; height: 6px;
width: 60px; width: 60px;
border-radius: 10px;
overflow: hidden; overflow: hidden;
appearance: none; appearance: none;
border: 0; border: none;
@mixin ProgressBarBorderRadius "10px"; @mixin ProgressBarBorderRadius "6px";
@mixin ProgressBarColour $accent-color; @mixin ProgressBarColour $progressbar-fg-color;
@mixin ProgressBarBgColour $progressbar-bg-color;
::-webkit-progress-value { ::-webkit-progress-value {
transition: width 1s; transition: width 1s;
} }

58
res/css/views/messages/_MFileBody.scss
View file

@ -1,5 +1,5 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016, 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -16,6 +16,19 @@ limitations under the License.
.mx_MFileBody_download { .mx_MFileBody_download {
color: $accent-color; color: $accent-color;
.mx_MFileBody_download_icon {
// 12px instead of 14px to better match surrounding font size
width: 12px;
height: 12px;
mask-size: 12px;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/download.svg");
background-color: $accent-color;
display: inline-block;
}
} }
.mx_MFileBody_download a { .mx_MFileBody_download a {
@ -45,3 +58,46 @@ limitations under the License.
* big the content of the iframe is. */ * big the content of the iframe is. */
height: 1.5em; height: 1.5em;
} }
.mx_MFileBody_info {
background-color: $message-body-panel-bg-color;
border-radius: 4px;
width: 270px;
padding: 8px;
color: $message-body-panel-fg-color;
.mx_MFileBody_info_icon {
background-color: $message-body-panel-icon-bg-color;
border-radius: 20px;
display: inline-block;
width: 32px;
height: 32px;
position: relative;
vertical-align: middle;
margin-right: 12px;
&::before {
content: '';
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
background-color: $message-body-panel-fg-color;
width: 13px;
height: 15px;
position: absolute;
top: 8px;
left: 9px;
}
}
.mx_MFileBody_info_filename {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
width: calc(100% - 32px - 12px); // 32px icon, 12px margin on the icon
vertical-align: middle;
}
}

8
res/css/views/messages/_MessageActionBar.scss
View file

@ -105,3 +105,11 @@ limitations under the License.
.mx_MessageActionBar_optionsButton::after { .mx_MessageActionBar_optionsButton::after {
mask-image: url('$(res)/img/element-icons/context-menu.svg'); mask-image: url('$(res)/img/element-icons/context-menu.svg');
} }
.mx_MessageActionBar_resendButton::after {
mask-image: url('$(res)/img/element-icons/retry.svg');
}
.mx_MessageActionBar_cancelButton::after {
mask-image: url('$(res)/img/element-icons/trashcan.svg');
}

4
res/css/views/right_panel/_EncryptionInfo.scss
View file

@ -14,13 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_UserInfo { .mx_EncryptionInfo_spinner {
.mx_EncryptionInfo_spinner {
.mx_Spinner { .mx_Spinner {
margin-top: 25px; margin-top: 25px;
margin-bottom: 15px; margin-bottom: 15px;
} }
text-align: center; text-align: center;
}
} }

5
res/css/views/rooms/_AppsDrawer.scss
View file

@ -370,11 +370,6 @@ $MinWidth: 240px;
display: none; display: none;
} }
/* Avoid apptile iframes capturing mouse event focus when resizing */
.mx_AppsDrawer_resizing iframe {
pointer-events: none;
}
.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper { .mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
z-index: 1; z-index: 1;
} }

5
res/css/views/rooms/_BasicMessageComposer.scss
View file

@ -66,6 +66,11 @@ limitations under the License.
} }
} }
} }
&.mx_BasicMessageComposer_input_disabled {
// Ignore all user input to avoid accidentally triggering the composer
pointer-events: none;
}
} }
.mx_BasicMessageComposer_AutoCompleteWrapper { .mx_BasicMessageComposer_AutoCompleteWrapper {

38
res/css/views/rooms/_EventTile.scss
View file

@ -159,6 +159,7 @@ $left-gutter: 64px;
.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp, .mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp, .mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp, .mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_ReplyThread .mx_EventTile > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused > a > .mx_MessageTimestamp, .mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused > a > .mx_MessageTimestamp,
.mx_IRCLayout .mx_EventTile.focus-visible:focus-within > a > .mx_MessageTimestamp { .mx_IRCLayout .mx_EventTile.focus-visible:focus-within > a > .mx_MessageTimestamp {
visibility: visible; visibility: visible;
@ -213,21 +214,30 @@ $left-gutter: 64px;
color: $accent-fg-color; color: $accent-fg-color;
} }
.mx_EventTile_encrypting { .mx_EventTile_receiptSent,
color: $event-encrypting-color !important; .mx_EventTile_receiptSending {
} // We don't use `position: relative` on the element because then it won't line
// up with the other read receipts
.mx_EventTile_sending { &::before {
color: $event-sending-color; background-color: $tertiary-fg-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;
width: 14px;
height: 14px;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
}
} }
.mx_EventTile_receiptSent::before {
.mx_EventTile_sending .mx_UserPill, mask-image: url('$(res)/img/element-icons/circle-sent.svg');
.mx_EventTile_sending .mx_RoomPill {
opacity: 0.5;
} }
.mx_EventTile_receiptSending::before {
.mx_EventTile_notSent { mask-image: url('$(res)/img/element-icons/circle-sending.svg');
color: $event-notsent-color;
} }
.mx_EventTile_contextual { .mx_EventTile_contextual {
@ -269,6 +279,10 @@ $left-gutter: 64px;
display: inline-block; display: inline-block;
height: $font-14px; height: $font-14px;
width: $font-14px; width: $font-14px;
transition:
left var(--transition-short) ease-out,
top var(--transition-standard) ease-out;
} }
.mx_EventTile_readAvatarRemainder { .mx_EventTile_readAvatarRemainder {

2
res/css/views/rooms/_GroupLayout.scss
View file

@ -21,7 +21,7 @@ $left-gutter: 64px;
.mx_EventTile { .mx_EventTile {
> .mx_SenderProfile { > .mx_SenderProfile {
line-height: $font-20px; line-height: $font-20px;
padding-left: $left-gutter; margin-left: $left-gutter;
} }
> .mx_EventTile_line { > .mx_EventTile_line {

25
res/css/views/rooms/_IRCLayout.scss
View file

@ -181,8 +181,7 @@ $irc-line-height: $font-18px;
> span { > span {
display: flex; display: flex;
> .mx_SenderProfile_name, > .mx_SenderProfile_name {
> .mx_SenderProfile_aux {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
min-width: var(--name-width); min-width: var(--name-width);
@ -212,12 +211,30 @@ $irc-line-height: $font-18px;
background: transparent; background: transparent;
> span { > span {
> .mx_SenderProfile_name, > .mx_SenderProfile_name {
> .mx_SenderProfile_aux {
min-width: inherit; min-width: inherit;
} }
} }
} }
.mx_EventTile_emote {
> .mx_EventTile_avatar {
margin-left: initial;
}
}
.mx_MessageTimestamp {
width: initial;
}
/**
* adding the icon back in the document flow
* if it's not present, there's no unwanted wasted space
*/
.mx_EventTile_e2eIcon {
position: relative;
order: -1;
}
} }
.mx_ProfileResizer { .mx_ProfileResizer {

4
res/css/views/rooms/_MessageComposer.scss
View file

@ -227,6 +227,10 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/composer/attach.svg'); mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
} }
.mx_MessageComposer_voiceMessage::before {
mask-image: url('$(res)/img/voip/mic-on-mask.svg');
}
.mx_MessageComposer_emoji::before { .mx_MessageComposer_emoji::before {
mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg'); mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
} }

2
res/css/views/rooms/_MessageComposerFormatBar.scss
View file

@ -60,6 +60,8 @@ limitations under the License.
width: 27px; width: 27px;
height: 24px; height: 24px;
box-sizing: border-box; box-sizing: border-box;
background: none;
vertical-align: middle;
} }
.mx_MessageComposerFormatBar_button::after { .mx_MessageComposerFormatBar_button::after {

7
res/css/views/rooms/_NewRoomIntro.scss
View file

@ -33,8 +33,13 @@ limitations under the License.
.mx_AccessibleButton { .mx_AccessibleButton {
line-height: $font-24px; line-height: $font-24px;
display: inline-block;
&::before { & + .mx_AccessibleButton {
margin-left: 12px;
}
&:not(.mx_AccessibleButton_kind_primary_outline)::before {
content: ''; content: '';
display: inline-block; display: inline-block;
background-color: $button-fg-color; background-color: $button-fg-color;

29
res/css/views/rooms/_RoomList.scss
View file

@ -27,6 +27,9 @@ limitations under the License.
.mx_RoomList_iconExplore::before { .mx_RoomList_iconExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg'); mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
} }
.mx_RoomList_iconBrowse::before {
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
}
.mx_RoomList_iconDialpad::before { .mx_RoomList_iconDialpad::before {
mask-image: url('$(res)/img/element-icons/roomlist/dialpad.svg'); mask-image: url('$(res)/img/element-icons/roomlist/dialpad.svg');
} }
@ -34,29 +37,33 @@ limitations under the License.
.mx_RoomList_explorePrompt { .mx_RoomList_explorePrompt {
margin: 4px 12px 4px; margin: 4px 12px 4px;
padding-top: 12px; padding-top: 12px;
border-top: 1px solid $tertiary-fg-color; border-top: 1px solid $input-border-color;
font-size: $font-13px; font-size: $font-14px;
div:first-child { div:first-child {
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
line-height: $font-18px;
color: $primary-fg-color;
} }
.mx_AccessibleButton { .mx_AccessibleButton {
color: $secondary-fg-color; color: $primary-fg-color;
position: relative; position: relative;
padding: 0 0 0 24px; padding: 8px 8px 8px 32px;
font-size: inherit; font-size: inherit;
margin-top: 8px; margin-top: 12px;
display: block; display: block;
text-align: start; text-align: start;
background-color: $roomlist-button-bg-color;
border-radius: 4px;
&::before { &::before {
content: ''; content: '';
width: 16px; width: 16px;
height: 16px; height: 16px;
position: absolute; position: absolute;
top: 0; top: 8px;
left: 0; left: 8px;
background: $secondary-fg-color; background: $secondary-fg-color;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
@ -70,5 +77,13 @@ limitations under the License.
&.mx_RoomList_explorePrompt_explore::before { &.mx_RoomList_explorePrompt_explore::before {
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg'); mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
} }
&.mx_RoomList_explorePrompt_spaceInvite::before {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
&.mx_RoomList_explorePrompt_spaceExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
}
} }
} }

8
res/css/views/rooms/_RoomSublist.scss
View file

@ -18,6 +18,10 @@ limitations under the License.
margin-left: 8px; margin-left: 8px;
margin-bottom: 4px; margin-bottom: 4px;
&.mx_RoomSublist_hidden {
display: none;
}
.mx_RoomSublist_headerContainer { .mx_RoomSublist_headerContainer {
// Create a flexbox to make alignment easy // Create a flexbox to make alignment easy
display: flex; display: flex;
@ -37,7 +41,9 @@ limitations under the License.
// The combined height must be set in the LeftPanel component for sticky headers // The combined height must be set in the LeftPanel component for sticky headers
// to work correctly. // to work correctly.
padding-bottom: 8px; padding-bottom: 8px;
height: 24px; // Allow the container to collapse on itself if its children
// are not in the normal document flow
max-height: 24px;
color: $roomlist-header-color; color: $roomlist-header-color;
.mx_RoomSublist_stickable { .mx_RoomSublist_stickable {

4
res/css/views/rooms/_RoomTile.scss
View file

@ -189,6 +189,10 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/settings.svg'); mask-image: url('$(res)/img/element-icons/settings.svg');
} }
.mx_RoomTile_iconInvite::before {
mask-image: url('$(res)/img/element-icons/room/invite.svg');
}
.mx_RoomTile_iconSignOut::before { .mx_RoomTile_iconSignOut::before {
mask-image: url('$(res)/img/element-icons/leave.svg'); mask-image: url('$(res)/img/element-icons/leave.svg');
} }

96
res/css/views/rooms/_VoiceRecordComposerTile.scss Normal file
View file

@ -0,0 +1,96 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_VoiceRecordComposerTile_stop {
// 28px plus a 2px border makes this a 32px square (as intended)
width: 28px;
height: 28px;
border: 2px solid $voice-record-stop-border-color;
border-radius: 32px;
margin-right: 16px; // between us and the send button
position: relative;
&::after {
content: '';
width: 14px;
height: 14px;
position: absolute;
top: 7px;
left: 7px;
border-radius: 2px;
background-color: $voice-record-stop-symbol-color;
}
}
.mx_VoiceRecordComposerTile_delete {
width: 14px; // w&h are size of icon
height: 18px;
vertical-align: middle;
margin-right: 7px; // distance from left edge of waveform container (container has some margin too)
background-color: $muted-fg-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/trashcan.svg');
}
.mx_VoiceMessagePrimaryContainer {
// Note: remaining class properties are in the PlayerContainer CSS.
margin: 6px; // force the composer area to put a gutter around us
margin-right: 12px; // isolate from stop button
position: relative; // important for the live circle
&.mx_VoiceRecordComposerTile_recording {
padding-left: 16px; // +10px for the live circle, +6px for regular padding
&::before {
animation: recording-pulse 2s infinite;
content: '';
background-color: $voice-record-live-circle-color;
width: 10px;
height: 10px;
position: absolute;
left: 8px;
top: 16px; // vertically center
border-radius: 10px;
}
}
}
// The keyframes are slightly weird here to help make a ramping/punch effect
// for the recording dot. We start and end at 100% opacity to help make the
// dot feel a bit like a real lamp that is blinking: the animation ends up
// spending a lot of its time showing a steady state without a fade effect.
// This lamp effect extends into why the 0% opacity keyframe is not in the
// midpoint: lamps take longer to turn off than they do to turn on, and the
// extra frames give it a bit of a realistic punch for when the animation is
// ramping back up to 100% opacity.
//
// Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s
// (intended to be used in a loop for 2s animation speed)
@keyframes recording-pulse {
0% {
opacity: 1;
}
35% {
opacity: 0;
}
65% {
opacity: 1;
}
}

51
res/css/views/spaces/_SpaceCreateMenu.scss
View file

@ -14,10 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
// TODO: the space panel currently does not have a fixed width, $spacePanelWidth: 71px;
// just the headers at each level have a max-width of 150px
// so this will look slightly off for now. We should probably use css grid for the whole main layout...
$spacePanelWidth: 200px;
.mx_SpaceCreateMenu_wrapper { .mx_SpaceCreateMenu_wrapper {
// background blur everything except SpacePanel // background blur everything except SpacePanel
@ -48,53 +45,11 @@ $spacePanelWidth: 200px;
} }
.mx_SpaceCreateMenuType { .mx_SpaceCreateMenuType {
position: relative; @mixin SpacePillButton;
padding: 16px 32px 16px 72px;
width: 432px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid $input-darker-bg-color;
font-size: $font-15px;
margin: 20px 0;
> h3 {
font-weight: $font-semi-bold;
margin: 0 0 4px;
}
> span {
color: $secondary-fg-color;
}
&::before {
position: absolute;
content: '';
width: 32px;
height: 32px;
top: 24px;
left: 20px;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 32px;
background-color: $tertiary-fg-color;
}
&:hover {
border-color: $accent-color;
&::before {
background-color: $accent-color;
}
> span {
color: $primary-fg-color;
}
}
} }
.mx_SpaceCreateMenuType_public::before { .mx_SpaceCreateMenuType_public::before {
mask-image: url('$(res)/img/globe.svg'); mask-image: url('$(res)/img/globe.svg');
mask-size: 26px;
} }
.mx_SpaceCreateMenuType_private::before { .mx_SpaceCreateMenuType_private::before {
mask-image: url('$(res)/img/element-icons/lock.svg'); mask-image: url('$(res)/img/element-icons/lock.svg');
@ -124,7 +79,7 @@ $spacePanelWidth: 200px;
} }
} }
.mx_FormButton { .mx_AccessibleButton_kind_primary {
padding: 8px 22px; padding: 8px 22px;
margin-left: auto; margin-left: auto;
display: block; display: block;

33
res/css/views/spaces/_SpacePublicShare.scss
View file

@ -16,38 +16,7 @@ limitations under the License.
.mx_SpacePublicShare { .mx_SpacePublicShare {
.mx_AccessibleButton { .mx_AccessibleButton {
border: 1px solid $space-button-outline-color; @mixin SpacePillButton;
box-sizing: border-box;
border-radius: 8px;
padding: 12px 24px 12px 52px;
margin-top: 16px;
width: $SpaceRoomViewInnerWidth;
font-size: $font-15px;
line-height: $font-24px;
position: relative;
display: flex;
> span {
color: #368bd6;
margin-left: auto;
}
&:hover {
background-color: rgba(141, 151, 165, 0.1);
}
&::before {
content: "";
position: absolute;
width: 30px;
height: 30px;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background: $muted-fg-color;
left: 12px;
top: 9px;
}
&.mx_SpacePublicShare_shareButton::before { &.mx_SpacePublicShare_shareButton::before {
mask-image: url('$(res)/img/element-icons/link.svg'); mask-image: url('$(res)/img/element-icons/link.svg');

51
res/css/views/voice_messages/_PlayPauseButton.scss Normal file
View file

@ -0,0 +1,51 @@
/*
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_PlayPauseButton {
position: relative;
width: 32px;
height: 32px;
border-radius: 32px;
background-color: $primary-bg-color;
&::before {
content: '';
position: absolute; // sizing varies by icon
background-color: $muted-fg-color;
mask-repeat: no-repeat;
mask-size: contain;
}
&.mx_PlayPauseButton_disabled::before {
opacity: 0.5;
}
&.mx_PlayPauseButton_play::before {
width: 13px;
height: 16px;
top: 8px; // center
left: 12px; // center
mask-image: url('$(res)/img/element-icons/play.svg');
}
&.mx_PlayPauseButton_pause::before {
width: 10px;
height: 12px;
top: 10px; // center
left: 11px; // center
mask-image: url('$(res)/img/element-icons/pause.svg');
}
}

54
res/css/views/voice_messages/_PlaybackContainer.scss Normal file
View file

@ -0,0 +1,54 @@
/*
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.
*/
// Dev note: there's no actual component called <PlaybackContainer />. These classes
// are shared amongst multiple voice message components.
// Container for live recording and playback controls
.mx_VoiceMessagePrimaryContainer {
padding: 6px; // makes us 4px taller than the send/stop button
padding-right: 5px; // there's 1px from the waveform itself, so account for that
background-color: $voice-record-waveform-bg-color;
border-radius: 12px;
// Cheat at alignment a bit
display: flex;
align-items: center;
color: $voice-record-waveform-fg-color;
font-size: $font-14px;
.mx_Waveform {
// We want the bars to be 2px shorter than the play/pause button in the waveform control
height: 28px; // default is 30px, so we're subtracting the 2px border off the bars
.mx_Waveform_bar {
background-color: $voice-record-waveform-incomplete-fg-color;
&.mx_Waveform_bar_100pct {
// Small animation to remove the mechanical feel of progress
transition: background-color 250ms ease;
background-color: $voice-record-waveform-fg-color;
}
}
}
.mx_Clock {
padding-right: 4px; // isolate from waveform
padding-left: 8px; // isolate from live circle
width: 40px; // we're not using a monospace font, so fake it
}
}

40
res/css/views/voice_messages/_Waveform.scss Normal file
View file

@ -0,0 +1,40 @@
/*
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_Waveform {
position: relative;
height: 30px; // tallest bar can only be 30px
top: 1px; // because of our border trick (see below), we're off by 1px of aligntment
display: flex;
align-items: center; // so the bars grow from the middle
overflow: hidden; // this is cheaper than a `max-height: calc(100% - 4px)` in the bar's CSS.
// A bar is meant to be a 2x2 circle when at zero height, and otherwise a 2px wide line
// with rounded caps.
.mx_Waveform_bar {
width: 0; // 0px width means we'll end up using the border as our width
border: 1px solid transparent; // transparent means we'll use the background colour
border-radius: 2px; // rounded end caps, based on the border
min-height: 0; // like the width, we'll rely on the border to give us height
max-height: 100%; // this makes the `height: 42%` work on the element
margin-left: 1px; // we want 2px between each bar, so 1px on either side for balance
margin-right: 1px;
// background color is handled by the parent components
}
}

20
res/css/views/voip/_CallView.scss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_CallView { .mx_CallView {
border-radius: 8px; border-radius: 8px;
background-color: $voipcall-plinth-color; background-color: $dark-panel-bg-color;
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
// XXX: CallContainer sets pointer-events: none - should probably be set back in a better place // XXX: CallContainer sets pointer-events: none - should probably be set back in a better place
@ -27,9 +27,12 @@ limitations under the License.
.mx_CallView_large { .mx_CallView_large {
padding-bottom: 10px; padding-bottom: 10px;
margin: 5px 5px 5px 18px; margin: 5px 5px 5px 18px;
display: flex;
flex-direction: column;
flex: 1;
.mx_CallView_voice { .mx_CallView_voice {
height: 360px; flex: 1;
} }
} }
@ -37,7 +40,8 @@ limitations under the License.
width: 320px; width: 320px;
padding-bottom: 8px; padding-bottom: 8px;
margin-top: 10px; margin-top: 10px;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08); background-color: $voipcall-plinth-color;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20);
border-radius: 8px; border-radius: 8px;
.mx_CallView_voice { .mx_CallView_voice {
@ -55,7 +59,7 @@ limitations under the License.
} }
} }
.mx_CallView_voice_holdText { .mx_CallView_holdTransferContent {
padding-top: 10px; padding-top: 10px;
padding-bottom: 25px; padding-bottom: 25px;
} }
@ -82,7 +86,7 @@ limitations under the License.
} }
} }
.mx_CallView_voice_hold { .mx_CallView_voice .mx_CallView_holdTransferContent {
// This masks the avatar image so when it's blurred, the edge is still crisp // This masks the avatar image so when it's blurred, the edge is still crisp
.mx_CallView_voice_avatarContainer { .mx_CallView_voice_avatarContainer {
border-radius: 2000px; border-radius: 2000px;
@ -91,7 +95,7 @@ limitations under the License.
} }
} }
.mx_CallView_voice_holdText { .mx_CallView_holdTransferContent {
height: 20px; height: 20px;
padding-top: 20px; padding-top: 20px;
padding-bottom: 15px; padding-bottom: 15px;
@ -104,6 +108,7 @@ limitations under the License.
.mx_CallView_video { .mx_CallView_video {
width: 100%; width: 100%;
height: 100%;
position: relative; position: relative;
z-index: 30; z-index: 30;
border-radius: 8px; border-radius: 8px;
@ -142,7 +147,7 @@ limitations under the License.
} }
} }
.mx_CallView_video_holdContent { .mx_CallView_video .mx_CallView_holdTransferContent {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -177,6 +182,7 @@ limitations under the License.
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: left; justify-content: left;
flex-shrink: 0;
} }
.mx_CallView_header_callType { .mx_CallView_header_callType {

46
res/css/views/voip/_CallViewForRoom.scss Normal file
View file

@ -0,0 +1,46 @@
/*
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
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_CallViewForRoom {
overflow: hidden;
.mx_CallViewForRoom_ResizeWrapper {
display: flex;
margin-bottom: 8px;
&:hover .mx_CallViewForRoom_ResizeHandle {
// Need to use important to override element style attributes
// set by re-resizable
width: 100% !important;
display: flex;
justify-content: center;
&::after {
content: '';
margin-top: 3px;
border-radius: 4px;
height: 4px;
width: 100%;
max-width: 64px;
background-color: $primary-fg-color;
}
}
}
}

2
res/css/views/voip/_VideoFeed.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_VideoFeed_remote { .mx_VideoFeed_remote {
width: 100%; width: 100%;
max-height: 100%; height: 100%;
background-color: #000; background-color: #000;
z-index: 50; z-index: 50;
} }

BIN
res/fonts/Inter/Inter-Bold.woff
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-Bold.woff2
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-BoldItalic.woff
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-BoldItalic.woff2
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-Italic.woff
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-Italic.woff2
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-Medium.woff
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-Medium.woff2
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-MediumItalic.woff
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-MediumItalic.woff2
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-Regular.woff
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-Regular.woff2
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-SemiBold.woff
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-SemiBold.woff2
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-SemiBoldItalic.woff
View file

Binary file not shown.

BIN
res/fonts/Inter/Inter-SemiBoldItalic.woff2
View file

Binary file not shown.

10
res/img/cancel-white.svg
View file

@ -1,10 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#ffffff" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1 KiB

3
res/img/element-icons/circle-sending.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="7.5" stroke="#8D99A5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 152 B

4
res/img/element-icons/circle-sent.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z" fill="#8D99A5"/>
<path d="M11.8697 4.95309C11.6784 4.7576 11.3597 4.74731 11.1578 4.93251L6.62066 9.04804L4.95244 7.91627C4.7293 7.77223 4.42116 7.77223 4.20865 7.95742C3.95363 8.1632 3.93238 8.5336 4.14489 8.78053L6.06813 10.9206C6.1 10.9515 6.13188 10.9926 6.17438 11.0132C6.53565 11.3013 7.07756 11.2498 7.37508 10.9L7.40695 10.8589L11.891 5.60128C12.0397 5.41608 12.0397 5.13828 11.8697 4.95309Z" fill="#8D99A5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 784 B

4
res/img/element-icons/pause.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V11C3 11.5523 2.55228 12 2 12H1C0.447715 12 0 11.5523 0 11V1Z" fill="#737D8C"/>
<path d="M7 1C7 0.447715 7.44772 0 8 0H9C9.55228 0 10 0.447715 10 1V11C10 11.5523 9.55228 12 9 12H8C7.44772 12 7 11.5523 7 11V1Z" fill="#737D8C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 396 B

3
res/img/element-icons/play.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 14.2104V1.78956C0 1.00724 0.857827 0.527894 1.5241 0.937906L11.6161 7.14834C12.2506 7.53883 12.2506 8.46117 11.6161 8.85166L1.5241 15.0621C0.857828 15.4721 0 14.9928 0 14.2104Z" fill="#737D8C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 310 B

3
res/img/element-icons/retry.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58365 3.90848C5.79757 2.94852 7.33285 2.375 9 2.375C12.6817 2.375 15.7112 5.1675 16.086 8.75H17.6314C17.9253 8.75 18.1006 9.07792 17.9376 9.32274L15.6812 12.711C15.5355 12.9297 15.2145 12.9297 15.0688 12.711L12.8124 9.32274C12.6494 9.07792 12.8247 8.75 13.1186 8.75H14.5754C14.2088 5.99798 11.8523 3.875 9 3.875C7.68247 3.875 6.4726 4.32705 5.51407 5.08504C5.45221 5.13396 5.39899 5.17326 5.36001 5.20114C5.34047 5.21513 5.32433 5.22637 5.31229 5.23463L5.29733 5.24482L5.29227 5.24821L5.29037 5.24948L5.28958 5.25L5.28923 5.25023L5.28906 5.25034L5.28898 5.2504L4.875 4.625L5.2889 5.25045C4.94347 5.47904 4.47814 5.38433 4.24955 5.0389C4.02136 4.69408 4.11534 4.22977 4.45929 4.00075L4.4633 3.99802C4.46789 3.99487 4.47605 3.9892 4.48719 3.98123C4.5096 3.9652 4.5433 3.94038 4.58365 3.90848ZM3.42456 10.25H4.88138C5.1753 10.25 5.35061 9.92208 5.18758 9.67726L2.93119 6.28905C2.78553 6.07032 2.46447 6.07032 2.31881 6.28905L0.0624241 9.67726C-0.100613 9.92207 0.0746987 10.25 0.368618 10.25H1.914C2.28878 13.8325 5.31828 16.625 9 16.625C10.7415 16.625 12.3388 15.9992 13.5764 14.9611C13.8938 14.6949 13.9353 14.2219 13.6691 13.9045C13.4029 13.5872 12.9298 13.5457 12.6125 13.8119C11.6349 14.6319 10.376 15.125 9 15.125C6.14769 15.125 3.79123 13.002 3.42456 10.25Z" fill="#737D8C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

4
res/img/element-icons/roomlist/browse.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00262 5.60945C7.02444 6.31867 7.18204 6.99371 7.45029 7.60945H5.83106L5.49798 11.0235H8.60274L8.757 9.44233C9.29964 9.94168 9.94406 10.3321 10.6556 10.579L10.6122 11.0235H12.7966C13.3489 11.0235 13.7966 11.4712 13.7966 12.0235C13.7966 12.5758 13.3489 13.0235 12.7966 13.0235H10.4171L10.1823 15.4305C10.1287 15.9802 9.63959 16.3823 9.08991 16.3287C8.54024 16.2751 8.13811 15.786 8.19174 15.2363L8.40762 13.0235H5.30286L5.06803 15.4305C5.0144 15.9802 4.52533 16.3823 3.97565 16.3287C3.42598 16.2751 3.02385 15.786 3.07748 15.2363L3.29336 13.0235H1.6665C1.11422 13.0235 0.666504 12.5758 0.666504 12.0235C0.666504 11.4712 1.11422 11.0235 1.6665 11.0235H3.48848L3.82156 7.60945H2.26807C1.71578 7.60945 1.26807 7.16173 1.26807 6.60945C1.26807 6.05716 1.71578 5.60945 2.26807 5.60945H4.01668L4.28073 2.90297C4.33436 2.3533 4.82343 1.95117 5.37311 2.0048C5.92278 2.05842 6.32491 2.5475 6.27128 3.09717L6.02618 5.60945H7.00262Z" fill="#8D99A5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4224 5.37843C14.4224 6.50754 13.5071 7.42287 12.3779 7.42287C11.2488 7.42287 10.3335 6.50754 10.3335 5.37843C10.3335 4.24931 11.2488 3.33398 12.3779 3.33398C13.5071 3.33398 14.4224 4.24931 14.4224 5.37843ZM15.8496 7.45454C16.2133 6.84764 16.4224 6.13745 16.4224 5.37843C16.4224 3.14474 14.6116 1.33398 12.3779 1.33398C10.1443 1.33398 8.3335 3.14474 8.3335 5.37843C8.3335 7.61211 10.1443 9.42287 12.3779 9.42287C13.1369 9.42287 13.8471 9.21381 14.454 8.85013C14.4853 8.89368 14.5205 8.93528 14.5597 8.97444L16.293 10.7078C16.6835 11.0983 17.3167 11.0983 17.7072 10.7078C18.0977 10.3172 18.0977 9.68408 17.7072 9.29356L15.9739 7.56023C15.9347 7.52107 15.8931 7.48584 15.8496 7.45454Z" fill="#8D99A5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

3
res/img/element-icons/trashcan.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="12" height="17" viewBox="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.857143 14.5C0.857143 15.4491 1.62857 16.5 2.57143 16.5H9.42857C10.3714 16.5 11.1429 15.2542 11.1429 14.3051V5.67692C11.1429 4.72781 10.3714 3.95128 9.42857 3.95128H2.57143C1.62857 3.95128 0.857143 4.72781 0.857143 5.67692V14.5ZM11.1429 1.36282H9L8.39143 0.750218C8.23714 0.59491 8.01429 0.5 7.79143 0.5H4.20857C3.98571 0.5 3.76286 0.59491 3.60857 0.750218L3 1.36282H0.857143C0.385714 1.36282 0 1.75109 0 2.22564C0 2.70019 0.385714 3.08846 0.857143 3.08846H11.1429C11.6143 3.08846 12 2.70019 12 2.22564C12 1.75109 11.6143 1.36282 11.1429 1.36282Z" fill="#737D8C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 679 B

4
res/img/element-icons/upload.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.99902 14L8.99902 4" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
<path d="M12.5352 7.52441L8.99944 4.00012L5.46373 7.52441" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 336 B

6
res/img/element-icons/warning-badge.svg
View file

@ -1,5 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="8" fill="#737D8C" style="mix-blend-mode:multiply"/> <circle cx="8" cy="8" r="8" fill="#FF4B55"/>
<rect x="7" y="3" width="2" height="6" rx="1" fill="white"/> <rect x="7" y="3" width="2" height="6" rx="1" fill="white"/>
<rect x="7" y="11" width="2" height="2" rx="1" fill="white"/> <rect x="7" y="11" width="2" height="2" rx="1" fill="white"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 303 B

After

Width:  |  Height:  |  Size: 283 B

5
res/img/feather-customised/monitor.svg
View file

@ -1,5 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V15C22 16.1046 21.1046 17 20 17H4C2.89543 17 2 16.1046 2 15V5Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 21H16" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 17V21" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 510 B

4
res/img/feather-customised/smartphone.svg
View file

@ -1,4 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 4C5 2.89543 5.89543 2 7 2H17C18.1046 2 19 2.89543 19 4V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V4Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="18" r="1" fill="#2E2F32"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 386 B

3
res/img/image-view/close.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4684 2.04056C11.8589 1.65003 11.8589 1.01687 11.4684 0.626342C11.0779 0.235818 10.4447 0.235818 10.0542 0.626342L6.04718 4.63333L1.81137 0.397522C1.42084 0.00699783 0.78768 0.00699781 0.397156 0.397522C0.0066314 0.788046 0.00663096 1.42121 0.397155 1.81174L4.63297 6.04755L0.62608 10.0544C0.235557 10.445 0.235556 11.0781 0.626081 11.4686C1.0166 11.8592 1.64977 11.8592 2.04029 11.4686L6.04718 7.46176L9.82525 11.2398C10.2158 11.6303 10.8489 11.6303 11.2395 11.2398C11.63 10.8493 11.63 10.2161 11.2395 9.82561L7.46139 6.04755L11.4684 2.04056Z" fill="#A9B2BC"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 717 B

3
res/img/image-view/download.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1C9 0.447715 8.55229 0 8 0C7.44772 0 7 0.447715 7 1L7 12.5858L2.20711 7.79289C1.81658 7.40237 1.18342 7.40237 0.792893 7.79289C0.402369 8.18342 0.402369 8.81658 0.792893 9.20711L7.29289 15.7071C7.68342 16.0976 8.31658 16.0976 8.70711 15.7071L15.2071 9.20711C15.5976 8.81658 15.5976 8.18342 15.2071 7.79289C14.8166 7.40237 14.1834 7.40237 13.7929 7.79289L9 12.5858L9 1Z" fill="#8E99A4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 542 B

3
res/img/image-view/more.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66699 12C6.66699 13.1046 5.77156 14 4.66699 14C3.56242 14 2.66699 13.1046 2.66699 12C2.66699 10.8954 3.56242 10 4.66699 10C5.77156 10 6.66699 10.8954 6.66699 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM19.333 14C20.4376 14 21.333 13.1046 21.333 12C21.333 10.8954 20.4376 10 19.333 10C18.2284 10 17.333 10.8954 17.333 12C17.333 13.1046 18.2284 14 19.333 14Z" fill="#8E99A4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 609 B

3
res/img/image-view/rotate-ccw.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0.25C14.2811 0.25 16.3824 1.03493 18.0435 2.34854L18.0645 2.36549C19.294 3.38165 21.75 6.28172 21.75 10C21.75 15.3848 17.3848 19.75 12 19.75C11.3096 19.75 10.75 19.1904 10.75 18.5C10.75 17.8096 11.3096 17.25 12 17.25C16.0041 17.25 19.25 14.0041 19.25 10C19.25 7.32797 17.4103 5.07339 16.4819 4.30089C15.2482 3.32907 13.6934 2.75 12 2.75C8.33522 2.75 5.30553 5.46916 4.8184 9H6.50851C6.9004 9 7.13415 9.43723 6.91677 9.76366L3.90826 14.2813C3.71404 14.5729 3.28596 14.5729 3.09174 14.2813L0.083231 9.76366C-0.134151 9.43723 0.0995979 9 0.491489 9H2.30066C2.80139 4.085 6.95284 0.25 12 0.25Z" fill="#8E99A4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 764 B

3
res/img/image-view/rotate-cw.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0.25C7.71886 0.25 5.61758 1.03493 3.95646 2.34854L3.93549 2.36549C2.70597 3.38165 0.25 6.28172 0.25 10C0.25 15.3848 4.61522 19.75 10 19.75C10.6904 19.75 11.25 19.1904 11.25 18.5C11.25 17.8096 10.6904 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 7.32797 4.58973 5.07339 5.51806 4.30089C6.7518 3.32907 8.30655 2.75 10 2.75C13.6648 2.75 16.6945 5.46916 17.1816 9H15.4915C15.0996 9 14.8658 9.43723 15.0832 9.76366L18.0917 14.2813C18.286 14.5729 18.714 14.5729 18.9083 14.2813L21.9168 9.76366C22.1342 9.43723 21.9004 9 21.5085 9H19.6993C19.1986 4.085 15.0472 0.25 10 0.25Z" fill="#8E99A4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 752 B

3
res/img/image-view/zoom-in.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3293 13.5616C16.379 12.1476 17 10.3963 17 8.5C17 3.80558 13.1944 0 8.5 0C3.80558 0 0 3.80558 0 8.5C0 13.1944 3.80558 17 8.5 17C10.3963 17 12.1476 16.379 13.5616 15.3293L18.1161 19.8839C18.6043 20.372 19.3957 20.372 19.8839 19.8839C20.372 19.3957 20.372 18.6043 19.8839 18.1161L15.3293 13.5616ZM9.5 4C9.5 3.44772 9.05228 3 8.5 3C7.94772 3 7.5 3.44772 7.5 4V7.5H4C3.44772 7.5 3 7.94772 3 8.5C3 9.05228 3.44772 9.5 4 9.5H7.5V13C7.5 13.5523 7.94771 14 8.5 14C9.05228 14 9.5 13.5523 9.5 13V9.5H13C13.5523 9.5 14 9.05228 14 8.5C14 7.94772 13.5523 7.5 13 7.5H9.5V4Z" fill="#8E99A4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 733 B

3
res/img/image-view/zoom-out.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3293 13.5616C16.379 12.1476 17 10.3963 17 8.5C17 3.80558 13.1944 0 8.5 0C3.80558 0 0 3.80558 0 8.5C0 13.1944 3.80558 17 8.5 17C10.3963 17 12.1476 16.379 13.5616 15.3293L18.1161 19.8839C18.6043 20.372 19.3957 20.372 19.8839 19.8839C20.372 19.3957 20.372 18.6043 19.8839 18.1161L15.3293 13.5616ZM3 8.5C3 7.94772 3.44772 7.5 4 7.5H13C13.5523 7.5 14 7.94772 14 8.5C14 9.05229 13.5523 9.5 13 9.5H4C3.44772 9.5 3 9.05229 3 8.5Z" fill="#8E99A4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 596 B

1
res/img/rotate-ccw.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-ccw"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
Side by side

Before

Width:  |  Height:  |  Size: 311 B

1
res/img/rotate-cw.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-cw"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
Side by side

Before

Width:  |  Height:  |  Size: 315 B

3
res/img/voip/mic-on-mask.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09999 4.15C6.09999 1.99609 7.84608 0.25 9.99999 0.25C12.1539 0.25 13.9 1.99609 13.9 4.15V9.98254C13.9 12.1365 12.1539 13.8825 9.99999 13.8825C7.84608 13.8825 6.09999 12.1365 6.09999 9.98254V4.15ZM3.1748 8.73755C3.86516 8.73755 4.4248 9.29719 4.4248 9.98755C4.4248 13.0574 6.91483 15.5493 9.9915 15.5538C9.99433 15.5538 9.99717 15.5538 10 15.5538C10.0028 15.5538 10.0056 15.5538 10.0084 15.5538C13.085 15.5492 15.5748 13.0573 15.5748 9.98755C15.5748 9.29719 16.1344 8.73755 16.8248 8.73755C17.5152 8.73755 18.0748 9.29719 18.0748 9.98755C18.0748 14.0189 15.115 17.3576 11.25 17.9577V18.7513C11.25 19.4416 10.6904 20.0013 10 20.0013C9.30964 20.0013 8.75 19.4416 8.75 18.7513V17.9578C4.88483 17.3578 1.9248 14.0191 1.9248 9.98755C1.9248 9.29719 2.48445 8.73755 3.1748 8.73755Z" fill="#C1C6CD"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 951 B

18
res/themes/dark/css/_dark.scss
View file

@ -63,6 +63,8 @@ $input-invalid-border-color: $warning-color;
$field-focused-label-bg-color: $bg-color; $field-focused-label-bg-color: $bg-color;
$resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity.
// scrollbars // scrollbars
$scrollbar-thumb-color: rgba(255, 255, 255, 0.2); $scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
$scrollbar-track-color: transparent; $scrollbar-track-color: transparent;
@ -85,6 +87,7 @@ $dialog-close-fg-color: #9fa9ba;
$dialog-background-bg-color: $header-panel-bg-color; $dialog-background-bg-color: $header-panel-bg-color;
$lightbox-background-bg-color: #000; $lightbox-background-bg-color: #000;
$lightbox-background-bg-opacity: 0.85;
$settings-grey-fg-color: #a2a2a2; $settings-grey-fg-color: #a2a2a2;
$settings-profile-placeholder-bg-color: #21262c; $settings-profile-placeholder-bg-color: #21262c;
@ -109,7 +112,7 @@ $header-divider-color: $header-panel-text-primary-color;
$composer-e2e-icon-color: $header-panel-text-primary-color; $composer-e2e-icon-color: $header-panel-text-primary-color;
// this probably shouldn't have it's own colour // this probably shouldn't have it's own colour
$voipcall-plinth-color: #21262c; $voipcall-plinth-color: #394049;
// ******************** // ********************
@ -123,7 +126,6 @@ $roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color; $groupFilterPanel-divider-color: $roomlist-header-color;
$space-button-outline-color: rgba(141, 151, 165, 0.2);
$roomtile-preview-color: $secondary-fg-color; $roomtile-preview-color: $secondary-fg-color;
$roomtile-default-badge-bg-color: #61708b; $roomtile-default-badge-bg-color: #61708b;
@ -138,9 +140,6 @@ $panel-divider-color: transparent;
$widget-menu-bar-bg-color: $header-panel-bg-color; $widget-menu-bar-bg-color: $header-panel-bg-color;
$widget-body-bg-color: rgba(141, 151, 165, 0.2); $widget-body-bg-color: rgba(141, 151, 165, 0.2);
// event tile lifecycle
$event-sending-color: $text-secondary-color;
// event redaction // event redaction
$event-redacted-fg-color: #606060; $event-redacted-fg-color: #606060;
$event-redacted-border-color: #000000; $event-redacted-border-color: #000000;
@ -173,6 +172,9 @@ $button-link-bg-color: transparent;
// Toggle switch // Toggle switch
$togglesw-off-color: $room-highlight-color; $togglesw-off-color: $room-highlight-color;
$progressbar-fg-color: $accent-color;
$progressbar-bg-color: #21262c;
$visual-bell-bg-color: #800; $visual-bell-bg-color: #800;
$room-warning-bg-color: $header-panel-bg-color; $room-warning-bg-color: $header-panel-bg-color;
@ -203,6 +205,10 @@ $breadcrumb-placeholder-bg-color: #272c35;
$user-tile-hover-bg-color: $header-panel-bg-color; $user-tile-hover-bg-color: $header-panel-bg-color;
$message-body-panel-bg-color: #21262c82;
$message-body-panel-icon-bg-color: #8e99a4;
$message-body-panel-fg-color: $primary-fg-color;
// Appearance tab colors // Appearance tab colors
$appearance-tab-border-color: $room-highlight-color; $appearance-tab-border-color: $room-highlight-color;
@ -239,7 +245,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
@define-mixin mx_DialogButton_secondary { @define-mixin mx_DialogButton_secondary {
// flip colours for the secondary ones // flip colours for the secondary ones
font-weight: 600; font-weight: 600;
border: 1px solid $accent-color ! important; border: 1px solid $accent-color !important;
color: $accent-color; color: $accent-color;
background-color: $button-secondary-bg-color; background-color: $button-secondary-bg-color;
} }

16
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -61,6 +61,8 @@ $input-invalid-border-color: $warning-color;
$field-focused-label-bg-color: $bg-color; $field-focused-label-bg-color: $bg-color;
$resend-button-divider-color: $muted-fg-color;
// scrollbars // scrollbars
$scrollbar-thumb-color: rgba(255, 255, 255, 0.2); $scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
$scrollbar-track-color: transparent; $scrollbar-track-color: transparent;
@ -83,6 +85,7 @@ $dialog-close-fg-color: #9fa9ba;
$dialog-background-bg-color: $header-panel-bg-color; $dialog-background-bg-color: $header-panel-bg-color;
$lightbox-background-bg-color: #000; $lightbox-background-bg-color: #000;
$lightbox-background-bg-opacity: 0.85;
$settings-grey-fg-color: #a2a2a2; $settings-grey-fg-color: #a2a2a2;
$settings-profile-placeholder-bg-color: #e7e7e7; $settings-profile-placeholder-bg-color: #e7e7e7;
@ -106,7 +109,7 @@ $header-divider-color: $header-panel-text-primary-color;
$composer-e2e-icon-color: $header-panel-text-primary-color; $composer-e2e-icon-color: $header-panel-text-primary-color;
// this probably shouldn't have it's own colour // this probably shouldn't have it's own colour
$voipcall-plinth-color: #f2f5f8; $voipcall-plinth-color: #394049;
// ******************** // ********************
@ -120,7 +123,6 @@ $roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color; $groupFilterPanel-divider-color: $roomlist-header-color;
$space-button-outline-color: rgba(141, 151, 165, 0.2);
$roomtile-preview-color: #9e9e9e; $roomtile-preview-color: #9e9e9e;
$roomtile-default-badge-bg-color: #61708b; $roomtile-default-badge-bg-color: #61708b;
@ -133,9 +135,6 @@ $panel-divider-color: $header-panel-border-color;
$widget-menu-bar-bg-color: $header-panel-bg-color; $widget-menu-bar-bg-color: $header-panel-bg-color;
$widget-body-bg-color: #1A1D23; $widget-body-bg-color: #1A1D23;
// event tile lifecycle
$event-sending-color: $text-secondary-color;
// event redaction // event redaction
$event-redacted-fg-color: #606060; $event-redacted-fg-color: #606060;
$event-redacted-border-color: #000000; $event-redacted-border-color: #000000;
@ -168,6 +167,9 @@ $button-link-bg-color: transparent;
// Toggle switch // Toggle switch
$togglesw-off-color: $room-highlight-color; $togglesw-off-color: $room-highlight-color;
$progressbar-fg-color: $accent-color;
$progressbar-bg-color: #21262c;
$visual-bell-bg-color: #800; $visual-bell-bg-color: #800;
$room-warning-bg-color: $header-panel-bg-color; $room-warning-bg-color: $header-panel-bg-color;
@ -198,6 +200,10 @@ $breadcrumb-placeholder-bg-color: #272c35;
$user-tile-hover-bg-color: $header-panel-bg-color; $user-tile-hover-bg-color: $header-panel-bg-color;
$message-body-panel-bg-color: #21262c82;
$message-body-panel-icon-bg-color: #8e99a4;
$message-body-panel-fg-color: $primary-fg-color;
// Appearance tab colors // Appearance tab colors
$appearance-tab-border-color: $room-highlight-color; $appearance-tab-border-color: $room-highlight-color;

23
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -97,6 +97,8 @@ $input-invalid-border-color: $warning-color;
$field-focused-label-bg-color: #ffffff; $field-focused-label-bg-color: #ffffff;
$resend-button-divider-color: $input-darker-bg-color;
$button-bg-color: $accent-color; $button-bg-color: $accent-color;
$button-fg-color: white; $button-fg-color: white;
@ -127,6 +129,7 @@ $dialog-close-fg-color: #c1c1c1;
$dialog-background-bg-color: #e9e9e9; $dialog-background-bg-color: #e9e9e9;
$lightbox-background-bg-color: #000; $lightbox-background-bg-color: #000;
$lightbox-background-bg-opacity: 0.95;
$imagebody-giflabel: rgba(0, 0, 0, 0.7); $imagebody-giflabel: rgba(0, 0, 0, 0.7);
$imagebody-giflabel-border: rgba(0, 0, 0, 0.2); $imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
@ -173,7 +176,7 @@ $composer-e2e-icon-color: #91a1c0;
$header-divider-color: #91a1c0; $header-divider-color: #91a1c0;
// this probably shouldn't have it's own colour // this probably shouldn't have it's own colour
$voipcall-plinth-color: #f2f5f8; $voipcall-plinth-color: #F4F6FA;
// ******************** // ********************
@ -187,7 +190,14 @@ $roomsublist-divider-color: $primary-fg-color;
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
$groupFilterPanel-divider-color: $roomlist-header-color; $groupFilterPanel-divider-color: $roomlist-header-color;
$space-button-outline-color: #E3E8F0;
// See non-legacy _light for variable information
$voice-record-stop-border-color: #E3E8F0;
$voice-record-stop-symbol-color: #ff4b55;
$voice-record-waveform-bg-color: #E3E8F0;
$voice-record-waveform-fg-color: $muted-fg-color;
$voice-record-waveform-incomplete-fg-color: #C1C6CD;
$voice-record-live-circle-color: #ff4b55;
$roomtile-preview-color: #9e9e9e; $roomtile-preview-color: #9e9e9e;
$roomtile-default-badge-bg-color: #61708b; $roomtile-default-badge-bg-color: #61708b;
@ -223,8 +233,6 @@ $widget-body-bg-color: #fff;
$yellow-background: #fff8e3; $yellow-background: #fff8e3;
// event tile lifecycle // event tile lifecycle
$event-encrypting-color: #abddbc;
$event-sending-color: #ddd;
$event-notsent-color: #f44; $event-notsent-color: #f44;
$event-highlight-fg-color: $warning-color; $event-highlight-fg-color: $warning-color;
@ -282,7 +290,8 @@ $togglesw-ball-color: #fff;
$slider-selection-color: $accent-color; $slider-selection-color: $accent-color;
$slider-background-color: #c1c9d6; $slider-background-color: #c1c9d6;
$progressbar-color: #000; $progressbar-fg-color: $accent-color;
$progressbar-bg-color: rgba(141, 151, 165, 0.2);
$room-warning-bg-color: $yellow-background; $room-warning-bg-color: $yellow-background;
@ -322,6 +331,10 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
$user-tile-hover-bg-color: $header-panel-bg-color; $user-tile-hover-bg-color: $header-panel-bg-color;
$message-body-panel-bg-color: #e3e8f082;
$message-body-panel-icon-bg-color: #ffffff;
$message-body-panel-fg-color: $muted-fg-color;
// FontSlider colors // FontSlider colors
$appearance-tab-border-color: $input-darker-bg-color; $appearance-tab-border-color: $input-darker-bg-color;

Some files were not shown because too many files have changed in this diff Show more